Merge branch 'develop' into feature/#38-selfcare

packages/ui/assets/HalfStar.tsx

@@ -0,0 +1,45 @@
+interface PropsType {
+  size?: number
+  onClick?: () => void
+  className?: string
+}
+
+export const HalfStar = ({ size = 24, onClick, className = '' }: PropsType) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={onClick}
+      className={`${onClick ? 'cursor-pointer' : ''} ${className}`}
+    >
+      <g clip-path="url(#clip0_11568_9623)">
+        <path
+          d="M7.23916 2.34164C7.47864 1.60459 8.52136 1.60459 8.76085 2.34164L9.6165 4.97508C9.7236 5.3047 10.0308 5.52786 10.3773 5.52786H13.1463C13.9213 5.52786 14.2435 6.51956 13.6165 6.97508L11.3764 8.60263C11.096 8.80635 10.9787 9.16744 11.0858 9.49706L11.9414 12.1305C12.1809 12.8675 11.3373 13.4804 10.7104 13.0249L8.47023 11.3974C8.18984 11.1937 7.81016 11.1937 7.52977 11.3974L5.28964 13.0249C4.66266 13.4804 3.81908 12.8675 4.05856 12.1305L4.91422 9.49706C5.02132 9.16744 4.90399 8.80635 4.6236 8.60263L2.38347 6.97508C1.75649 6.51956 2.07872 5.52786 2.85369 5.52786H5.62265C5.96924 5.52786 6.2764 5.3047 6.3835 4.97508L7.23916 2.34164Z"
+          className="fill-gray200"
+        />
+      </g>
+      <g clip-path="url(#clip1_11568_9623)">
+        <g clip-path="url(#clip2_11568_9623)">
+          <path
+            d="M7.23916 2.34164C7.47864 1.60459 8.52136 1.60459 8.76085 2.34164L9.6165 4.97508C9.7236 5.3047 10.0308 5.52786 10.3773 5.52786H13.1463C13.9213 5.52786 14.2435 6.51956 13.6165 6.97508L11.3764 8.60263C11.096 8.80635 10.9787 9.16744 11.0858 9.49706L11.9414 12.1305C12.1809 12.8675 11.3373 13.4804 10.7104 13.0249L8.47023 11.3974C8.18984 11.1937 7.81016 11.1937 7.52977 11.3974L5.28964 13.0249C4.66266 13.4804 3.81908 12.8675 4.05856 12.1305L4.91422 9.49706C5.02132 9.16744 4.90399 8.80635 4.6236 8.60263L2.38347 6.97508C1.75649 6.51956 2.07872 5.52786 2.85369 5.52786H5.62265C5.96924 5.52786 6.2764 5.3047 6.3835 4.97508L7.23916 2.34164Z"
+            fill="currentColor"
+          />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_11568_9623">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_11568_9623">
+          <rect width="8" height="16" fill="white" />
+        </clipPath>
+        <clipPath id="clip2_11568_9623">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}

packages/ui/assets/index.tsx

@@ -50,4 +50,5 @@ export * from './Calendar'
 export * from './Run'
 export * from './CalculatorIcon'
 export * from './TimerIcon'
+export * from './HalfStar'
 export { default as HeaderLogo } from './HeaderLogo.png'

service/user/next.config.js

@@ -7,6 +7,9 @@ const nextConfig = {
   // experimental: {
   //   outputFileTracingRoot: path.join(__dirname, '../../'),
   // }
-};
+  images: {
+    domains: ['gdimg.gmarket.co.kr'] /** 더미데이터를 사용하기위하여 잠시 도메인을 추가함. 추후 삭제 필요 */,
+  },
+}
 
 module.exports = nextConfig

service/user/src/app/page.tsx

@@ -1,7 +1,8 @@
 'use client'
-import { Footer, Pickle, Button, Run, Timer, Play, CalculatorIcon, TimerIcon, Chevron } from '@package/ui'
+import { Footer, Pickle, Button, Run, CalculatorIcon, TimerIcon, Chevron } from '@package/ui'
 import Image from 'next/image'
 import pickleTestImage from '../assets/pickleTestImage.png'
+import Timer from '@/components/timer'
 
 const Home = () => {
   return (
@@ -43,17 +44,7 @@ const Home = () => {
                   </div>
                 </div>
               </div>
-              <div className="border border-gray100 rounded-2xl px-10 flex justify-between items-center flex-1">
-                <div className="flex gap-6 items-center">
-                  <Timer className="text-gray400" />
-                  <span className="text-gray400 text-titleLarge">30:26</span>
-                </div>
-                <Button
-                  kind="primary"
-                  className="h-fit px-2.5 py-2.5"
-                  icon={<Play size={20} className="text-white" isFill />}
-                />
-              </div>
+              <Timer />
             </div>
             <div className="flex gap-6">
               <div className="border border-gray100 rounded-2xl py-10 px-6 flex flex-col justify-between w-60 h-60 sm:flex-1 md:flex-1">

service/user/src/app/shop/Slider.tsx

@@ -0,0 +1,15 @@
+import Banner1 from '@/assets/shopBanner/banner1.png'
+import Image from 'next/image'
+const BannerImage = [Banner1]
+
+const Slider = () => {
+  return (
+    <div className="w-full relative">
+      <Image src={BannerImage[0]} className="w-full overflow-hidden rounded-3xl" alt="shop banenr image" />
+      <p className="text-white absolute  bottom-[4%] right-[10%] text-bodySmall">
+        {1}/{BannerImage.length}
+      </p>
+    </div>
+  )
+}
+export default Slider

service/user/src/app/shop/page.tsx

@@ -0,0 +1,209 @@
+'use client'
+
+import Banner from '@/components/banner'
+import Slider from './Slider'
+import ItemLayout from '@/components/shop/ItemLayout'
+import { useState } from 'react'
+
+const BannerDescription = {
+  title: '마음샵',
+  description: '나만의 루틴과 목표를 설정하여 자기관리에 도전해보세요.',
+}
+/** 더미데이터1 */
+const smallitem = [
+  {
+    id: '1',
+    price: '10,000',
+    title: '마음샵',
+    rating: '4.5',
+    review: 100,
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+  },
+  {
+    id: '1',
+    price: '10,000',
+    title: '마음샵',
+    rating: '4.5',
+    review: 100,
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+  },
+  {
+    id: '1',
+    price: '10,000',
+    title: '마음샵',
+    rating: '4.5',
+    review: 100,
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+  },
+  {
+    id: '1',
+    price: '10,000',
+    title: '마음샵',
+    rating: '4.5',
+    review: 100,
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+  },
+  {
+    id: '1',
+    price: '10,000',
+    title: '마음샵',
+    rating: '4.5',
+    review: 100,
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+  },
+  {
+    id: '1',
+    price: '10,000',
+    title: '마음샵',
+    rating: '4.5',
+    review: 100,
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+  },
+  {
+    id: '1',
+    price: '10,000',
+    title: '마음샵',
+    rating: '4.5',
+    review: 100,
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+  },
+]
+/** 더미데이터2 */
+const bigitem = [
+  {
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+
+    id: '1',
+    sale: '10',
+    price: '10,000',
+    title: '마음샵',
+    rating: '0',
+    review: 100,
+    hits: 23,
+  },
+  {
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+
+    id: '1',
+    sale: '10',
+    price: '10,000',
+    title: '마음샵',
+    rating: '0.5',
+    review: 100,
+    hits: 23,
+  },
+  {
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+
+    id: '1',
+    sale: '10',
+    price: '10,000',
+    title: '마음샵',
+    rating: '1',
+    review: 100,
+    hits: 23,
+  },
+  {
+    id: '1',
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+    price: '10,000',
+    title: '마음샵',
+    rating: '1.5',
+    review: 100,
+    hits: 23,
+  },
+  {
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+
+    id: '1',
+    sale: '10',
+    price: '10,000',
+    title: '마음샵',
+    rating: '2',
+    review: 100,
+    hits: 23,
+  },
+  {
+    id: '1',
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+    price: '10,000',
+    title: '마음샵',
+    rating: '2.5',
+    review: 100,
+    hits: 23,
+  },
+  {
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+
+    id: '1',
+    sale: '10',
+    price: '10,000',
+    title: '마음샵',
+    rating: '3',
+    review: 100,
+    hits: 23,
+  },
+  {
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+
+    id: '1',
+    sale: '10',
+    price: '10,000',
+    title: '마음샵',
+    rating: '3.5',
+    review: 100,
+    hits: 23,
+  },
+  {
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+
+    id: '1',
+    sale: '10',
+    price: '10,000',
+    title: '마음샵',
+    rating: '4',
+    review: 100,
+    hits: 23,
+  },
+  {
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+
+    id: '1',
+    sale: '10',
+    price: '10,000',
+    title: '마음샵',
+    rating: '4.5',
+    review: 100,
+    hits: 23,
+  },
+  {
+    image: 'https://gdimg.gmarket.co.kr/2702134841/still/400?ver=1671150539',
+
+    id: '1',
+    sale: '10',
+    price: '10,000',
+    title: '마음샵',
+    rating: '5',
+    review: 100,
+    hits: 23,
+  },
+]
+const Shop = () => {
+  const [type, setType] = useState<string>('')
+
+  return (
+    <div>
+      <Banner {...BannerDescription} />
+      <div className="flex w-full px-8 pt-10 pb-60 justify-center">
+        <div className="w-[1200px] flex flex-col gap-16">
+          <Slider />
+          <ItemLayout title="샵 주간랭킹" isRank items={smallitem} />
+          <ItemLayout title="인기 기타 상품" items={smallitem} />
+          <ItemLayout title="마음샵 상품 둘러보기" items={bigitem} isDetail type={type} setType={setType} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Shop

service/user/src/components/banner.tsx

@@ -0,0 +1,24 @@
+'use client'
+import Image from 'next/image'
+import tentativeBannerIcon from '@/assets/tentativeBannerIcon.png'
+
+interface BannerProps {
+  title: string
+  description: string
+}
+
+const Banner = ({ title, description }: BannerProps) => {
+  return (
+    <div className="flex w-full h-60 px-8 pt-[60px] justify-center items-center bg-gray25 border-b border-gray100">
+      <div className="flex w-[1200px] justify-between items-center">
+        <div className="flex flex-col gap-2">
+          <p className="text-black text-headlineSmall">{title}</p>
+          <p className="text-gray600 text-bodyMedium">{description}</p>
+        </div>
+        <Image src={tentativeBannerIcon} alt="selfcare" />
+      </div>
+    </div>
+  )
+}
+
+export default Banner

service/user/src/components/shop/BasketAlert.tsx

@@ -0,0 +1,5 @@
+const BasketAlert = () => {
+  return <></>
+}
+
+export default BasketAlert

service/user/src/components/shop/DetailItem.tsx

@@ -0,0 +1,41 @@
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import ShowStar from './ShowStar'
+
+export interface DetailItemType {
+  id: string
+  image: string
+  sale?: string
+  price: string
+  title: string
+  rating: string
+  review: number
+  hits?: number
+}
+interface DetailItemProps {
+  v: DetailItemType
+}
+
+const DetailItem = ({ v: item }: DetailItemProps) => {
+  const router = useRouter()
+  return (
+    <div className="flex flex-col gap-2 cursor-pointer" onClick={() => router.push(`/shop/${item.id}`)}>
+      <Image src={item.image} width={192} height={192} className="rounded-lg" alt={`${item.title}-${item.price}`} />
+      <div className="flex flex-col gap-1">
+        <div className="flex gap-1">
+          {item.sale && <p className="text-bodyLarge text-red500">{item.sale}%</p>}
+          <p className="text-labelLarge">{item.price} 원</p>
+        </div>
+        <p className="text-bodyMedium text-gray800">{item.title}</p>
+        <div className="flex gap-1">
+          <ShowStar rating={item.rating} />
+          <p className="text-bodyTiny text-gray600">{item.rating}</p>
+          <p className="text-bodyTiny text-gray400">({item.review})</p>
+        </div>
+        <p className="text-bodyTiny text-gray400">{item.hits}명 구경함</p>
+      </div>
+    </div>
+  )
+}
+
+export default DetailItem