Merge pull request #1 from MOJAN3543/main

feat: 상품 페이지, 마켓 페이지 추가
LikeLion-KNU04 · Aug 5, 2024 · 697ac1b · 697ac1b
2 parents 3ea88f7 + 21ddae2
commit 697ac1b
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 2 deletions.
diff --git a/apps/web/src/app/market/[id]/page.tsx b/apps/web/src/app/market/[id]/page.tsx
@@ -0,0 +1,70 @@
+"use client"
+import MainLayout from "@/components/MainLayout";
+import MarketDetail from "@/components/MarketDetail";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+
+export default function ProductPage() {
+    const router = usePathname();
+    return (
+        <MainLayout>
+            <div>
+                <div className="flex items-start justify-center gap-32 p-8">
+                    <Image
+                        src="https://picsum.photos/512/512"
+                        alt="product Image"
+                        width={512}
+                        height={512}
+                    />
+                    <div className="flex flex-col w-1/3 gap-5">
+                        <div>
+                            <div className="text-4xl font-bold">
+                                저당고단백 도시락
+                            </div>
+                            <div className="text-lg text-gray-500">
+                                영양 만점 도시락!
+                            </div>
+                        </div>
+                        <MarketDetail
+                            amount={1}
+                            price={10000}
+                            weight={100}
+                            calorie={300}
+                            carbs={200}
+                            protein={100}
+                            fat={12}
+                            origin={"국내산"}
+                        />
+                        <div className="flex items-center justify-between p-4 bg-gray-200">
+                            <div>
+                                저당고단백 도시락
+                            </div>
+                            <input
+                                className="w-16 p-2"
+                                type="number"
+                                defaultValue={1}>
+                            </input>
+                            <div className="font-bold">
+                                10,000원
+                            </div>
+                        </div>
+                        <div className="flex gap-3 justify-evenly">
+                            <button
+                                type="button"
+                                className="flex justify-center w-1/2 gap-3 p-5 text-lg bg-gray-200 rounded-lg "
+                            >
+                                장바구니에 담기
+                            </button>
+                            <button
+                                type="button"
+                                className="flex justify-center w-1/2 gap-3 p-5 text-lg text-white rounded-lg bg-primary-600"
+                            >
+                                구매
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </MainLayout>
+    )
+}
diff --git a/apps/web/src/app/market/page.tsx b/apps/web/src/app/market/page.tsx
@@ -0,0 +1,28 @@
+import MainLayout from "@/components/MainLayout";
+import ProductCard from "@/components/ProductCard";
+
+export default function MarketPage() {
+    return (
+        <MainLayout>
+
+            <div className="flex flex-col items-stretch gap-6 px-32 py-8">
+                <div className="text-4xl font-bold">
+                    밀로그 마켓
+                </div>
+                <div className="text-gray-400 text-gl">
+                    사용자를 위해 건강한 식단을 판매합니다.
+                </div>
+                <div className="grid grid-cols-4 gap-6">
+                    <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} />
+                    <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} />
+                    <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} />
+                    <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} />
+                    <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} />
+                    <ProductCard productImage={""} productId={1} productDetail="영양 만점 도시락!" productName="저당고단백 닭가슴살 도시락" productPrice={10000} />
+                </div>
+            </div>
+
+
+        </MainLayout>
+    )
+}
diff --git a/apps/web/src/components/Comment.tsx b/apps/web/src/components/Comment.tsx
@@ -17,7 +17,7 @@ export default function Comment({
       <Image
         className="rounded-full"
         src="https://picsum.photos/200/200"
-        alt="thumbnail"
+        alt="user Profile"
         width={48}
         height={48}
       />

diff --git a/apps/web/src/components/MarketDetail.tsx b/apps/web/src/components/MarketDetail.tsx
@@ -1,7 +1,8 @@
-import { IconChartBubble, IconLayoutGrid, IconMapPin, IconWeight } from "@tabler/icons-react";
+import { IconChartBubble, IconCurrencyWon, IconLayoutGrid, IconMapPin, IconWeight } from "@tabler/icons-react";
 
 interface MarketDetailProps extends React.HTMLAttributes<HTMLDivElement> {
   amount: number;
+  price: number;
   weight: number;
   calorie: number;
   carbs: number;
@@ -12,6 +13,7 @@ interface MarketDetailProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export default function MarketDetail({
   amount,
+  price,
   weight,
   calorie,
   carbs,
@@ -25,6 +27,17 @@ export default function MarketDetail({
       <div className="text-2xl font-bold">
         상품 정보
       </div>
+      <div className="flex justify-between">
+        <div className="flex items-center gap-2">
+          <IconCurrencyWon size={24} />
+          <div className="text-lg font-bold">
+            가격(원)
+          </div>
+        </div>
+        <div className="text-lg">
+          {price.toLocaleString('ko-KR')}
+        </div>
+      </div>
       <div className="flex justify-between">
         <div className="flex items-center gap-2">
           <IconLayoutGrid size={24} />

diff --git a/apps/web/src/components/ProductCard.tsx b/apps/web/src/components/ProductCard.tsx
@@ -0,0 +1,44 @@
+import Image from "next/image";
+import Link from "next/link";
+
+interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    productImage: string;
+    productId: number;
+    productName: string;
+    productPrice: number;
+    productDetail: string;
+}
+
+export default function ProductCard({
+    productImage,
+    productId,
+    productName,
+    productPrice,
+    productDetail,
+    ...props
+}: ProductCardProps) {
+    return (
+        <div {...props} className="flex flex-col w-full">
+            <Link href={"/market/" + productId}>
+                <Image
+                    className="w-full"
+                    src="https://picsum.photos/200/200"
+                    alt="product Image"
+                    width={200}
+                    height={200}
+                />
+            </Link>
+            <div className="text-base text-gray-500">
+                {productDetail}
+            </div>
+            <Link href={"/market/" + productId}>
+                <div className="text-lg">
+                    {productName}
+                </div>
+            </Link>
+            <div className="text-xl">
+                <b>{productPrice.toLocaleString('ko-KR')}</b>원
+            </div>
+        </div>
+    )
+}