20260115 #131 장바구니 빈 페이지 개발

src/app/(header-only)/cart/page.tsx

@@ -1,28 +1,19 @@
-"use client";
-
-import CartToast from "@/features/menu/components/toast/CartToast";
-import { useState } from "react";
+import EmptyCartView from "@/features/cart/components/view/EmptyCartView";
+import CartMenuCard from "@/features/cart/components/card/CartMenuCard";
 
 export default function CartPage() {
-  const [toastVisible, setToastVisible] = useState<boolean>(false);
-
-  const handleClick = (): void => {
-    setToastVisible(true);
-    setTimeout(() => setToastVisible(false), 1500);
-  }
   return (
-    <div className="w-full">
-      장바구니 페이지
-      <button
-        type="button"
-        onClick={handleClick}
-      >
-        토스트
-      </button>
-      <CartToast
-        visible={toastVisible}
-        message="장바구니에 쏙 담았어요!"
-      />
-    </div>
+    // <>
+    //   <CartMenuCard menuId={1}
+    //                 imageSrc="/tmp/menu/menu-1.png"
+    //                 title="김치제육 덮밥"
+    //                 price={6000} />
+    //   <CartMenuCard menuId={1}
+    //                 imageSrc="/tmp/menu/menu-1.png"
+    //                 title="김치제육 덮밥"
+    //                 rank={1}
+    //                 price={6000} />
+    // </>
+    <EmptyCartView/>
   );
 }

src/assets/icons/index.ts

@@ -13,6 +13,7 @@ export { default as JingwanEnableIcon } from "./jingwan-enable.svg";
 export { default as MinusIcon } from "./minus.svg";
 export { default as MyDisableIcon } from "./my-disable.svg";
 export { default as MyEnableIcon } from "./my-enable.svg";
+export { default as PleadingFaceIcon } from "./pleading-face.svg";
 export { default as PlusIcon } from "./plus.svg";
 export { default as PlusDisableIcon } from "./plus-disable.svg";
 export { default as ShoppingBagIcon } from "./shopping-bag.svg";

src/features/cart/components/button/QuantityStepper.module.css

@@ -3,6 +3,9 @@
   justify-content: center;
   align-content: center;
 
+  width: 5.125rem;
+  height: 1.75rem;
+
   padding-block: 0.44rem;
   padding-inline: 0.5rem;
 
@@ -15,6 +18,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  width: 100%;
 }
 
 .label {

src/features/cart/components/card/CartMenuCard.module.css

@@ -0,0 +1,55 @@
+.container {
+  display: flex;
+  position: relative;
+  gap: 1rem;
+
+  border: 1px solid black;
+
+  width: 100%;
+
+  background-color: var(--color-white);
+}
+
+.imageWrapper {
+  position: relative;
+  width: 5.125rem;
+  height: 5.125rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.image {
+  object-fit: cover;
+}
+
+.labelWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  padding-top: 0.25rem;
+}
+
+.title {
+  color: var(--color-black);
+  font-size: var(--text-base);
+  font-style: normal;
+  font-weight: var(--font-semibold);
+  line-height: var(--line-height-single);
+  letter-spacing: var(--letter-spacing);
+}
+
+.price {
+  color: var(--color-black);
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: var(--font-medium);
+  line-height: var(--line-height-single);
+  letter-spacing: var(--letter-spacing);
+}
+
+.stepperWrapper {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}

src/features/cart/components/card/CartMenuCard.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import styles from "./CartMenuCard.module.css";
+import Image from "next/image";
+import PopularTag from "@/features/menu/components/tags/PopularTag";
+import { formatNumberWithComma } from "@/shared/utils/number/utils";
+import QuantityStepper from "@/features/cart/components/button/QuantityStepper";
+
+type Rank = 1 | 2 | 3;
+
+interface CartMenuCardProps {
+  menuId: number;
+  imageSrc: string;
+  title: string;
+  price: number;
+  quantity: number;
+  rank?: Rank;
+  onClickAdd?: (menuId: number) => void;
+}
+
+export default function CartMenuCard({
+  menuId,
+  imageSrc,
+  title,
+  price,
+  quantity,
+  rank,
+}: CartMenuCardProps) {
+
+  const hasTag = typeof rank !== "undefined";
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.imageWrapper}>
+        <Image
+          src={imageSrc}
+          alt={"메뉴사진"}
+          fill
+          className={styles.image}
+        />
+      </div>
+
+      <div className={styles.labelWrapper}>
+        {hasTag && <PopularTag rank={rank} />}
+        <div className={styles.title}>
+          {title}
+        </div>
+        <div className={styles.price}>
+          {formatNumberWithComma(price)}원
+        </div>
+      </div>
+
+      <div className={styles.stepperWrapper}>
+        <QuantityStepper
+          menuId={menuId}
+          quantity={quantity}
+        />
+      </div>
+    </div>
+  );
+}

src/features/cart/components/view/EmptyCartView.module.css

@@ -0,0 +1,88 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  min-height: calc(100vh - var(--top-header-height));
+}
+
+.titleWrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  margin-bottom: 0.75rem;
+}
+
+.title {
+  color: var(--color-black);
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+  font-style: normal;
+  font-weight: var(--font-normal);
+  line-height: var(--line-height-single);
+  letter-spacing: -0.00363rem;
+}
+
+.subTitle {
+  color: var(--color-gray-600);
+  text-align: center;
+
+  font-size: var(--text-sm);
+  font-style: normal;
+  font-weight: var(--font-medium);
+  line-height: var(--line-height-single);
+  letter-spacing: -0.00281rem;
+
+  margin-bottom: 1.5rem;
+}
+
+.buttonWrapper {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.homeButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 0.75rem;
+  border: 1px solid var(--color-main-500);
+  background-color: var(--color-main-100);
+
+  padding: 1rem 1.5rem;
+}
+
+.homeButtonLabel {
+  color: var(--color-main);
+
+  font-size: var(--text-base);
+  font-style: normal;
+  font-weight: var(--font-semibold);
+  line-height: var(--line-height-single);
+  letter-spacing: -0.00319rem;
+}
+
+.menuButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 0.75rem;
+  background-color: var(--color-main);
+
+  padding: 1rem 1.6rem;
+}
+
+.menuButtonLabel {
+  color: var(--color-white);
+
+  font-size: var(--text-base);
+  font-style: normal;
+  font-weight: var(--font-semibold);
+  line-height: var(--line-height-single);
+  letter-spacing: -0.00319rem;
+}

src/features/cart/components/view/EmptyCartView.tsx

@@ -0,0 +1,38 @@
+import styles from "./EmptyCartView.module.css";
+import { PleadingFaceIcon } from "@/assets/icons";
+import Link from "next/link";
+
+export default function EmptyCartView() {
+  return (
+    <div className={styles.container}>
+      <div className={styles.titleWrapper}>
+        <div className={styles.title}>
+          아무것도 없어요
+        </div>
+        <PleadingFaceIcon />
+      </div>
+      <div className={styles.subTitle}>
+        메뉴를 둘러 보고, 먹고 싶은 메뉴를 바로 담아봐요
+      </div>
+
+
+      <div className={styles.buttonWrapper}>
+        <Link href="/">
+          <div className={styles.homeButton}>
+            <div className={styles.homeButtonLabel}>
+              인기 순위 보기
+            </div>
+          </div>
+        </Link>
+
+        <Link href="/hakgwan">
+          <div className={styles.menuButton}>
+            <div className={styles.menuButtonLabel}>
+              메뉴 둘러보기
+            </div>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+};

src/features/menu/components/category/button/CategoryButton.module.css

@@ -27,5 +27,5 @@
 
 .labelActive {
   color: var(--color-white);
-  font-weight: var(--font-extrabold);
+  font-weight: var(--font-bold);
 }

src/features/menu/components/list/MenuList.tsx

@@ -1,6 +1,6 @@
 import styles from "./MenuList.module.css";
 import MenuCard from "@/features/menu/components/card/MenuCard";
-import SeparationBar from "@/features/menu/components/bar/SeparationBar";
+import SeparationBar from "@/shared/components/bar/SeparationBar";
 import React from "react";
 import { MenuItem } from "@/features/menu/types/menuType";
 

src/shared/components/header/Header.tsx

@@ -1,5 +1,6 @@
 import { ShoppingBagIcon } from "@/assets/icons";
 import styles from "./Header.module.css";
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -8,7 +9,9 @@ export default function Header() {
         <div className={styles.logo}>
           LOGO
         </div>
-        <ShoppingBagIcon />
+        <Link href="/cart">
+          <ShoppingBagIcon />
+        </Link>
       </div>
     </div>
   );