diff --git a/src/app/(header-only)/cart/page.tsx b/src/app/(header-only)/cart/page.tsx index 91ed4fd..297ca8c 100644 --- a/src/app/(header-only)/cart/page.tsx +++ b/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(false); - - const handleClick = (): void => { - setToastVisible(true); - setTimeout(() => setToastVisible(false), 1500); - } return ( -
- 장바구니 페이지 - - -
+ // <> + // + // + // + ); } \ No newline at end of file diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index b03098a..df313e2 100644 --- a/src/assets/icons/index.ts +++ b/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"; diff --git a/src/assets/icons/pleading-face.svg b/src/assets/icons/pleading-face.svg new file mode 100644 index 0000000..c70b917 --- /dev/null +++ b/src/assets/icons/pleading-face.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/features/cart/components/button/QuantityStepper.module.css b/src/features/cart/components/button/QuantityStepper.module.css index 2843538..b4005bf 100644 --- a/src/features/cart/components/button/QuantityStepper.module.css +++ b/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 { diff --git a/src/features/cart/components/card/CartMenuCard.module.css b/src/features/cart/components/card/CartMenuCard.module.css new file mode 100644 index 0000000..10e7196 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/features/cart/components/card/CartMenuCard.tsx b/src/features/cart/components/card/CartMenuCard.tsx new file mode 100644 index 0000000..a9aa51a --- /dev/null +++ b/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 ( +
+
+ {"메뉴사진"} +
+ +
+ {hasTag && } +
+ {title} +
+
+ {formatNumberWithComma(price)}원 +
+
+ +
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/features/cart/components/view/EmptyCartView.module.css b/src/features/cart/components/view/EmptyCartView.module.css new file mode 100644 index 0000000..74d5d8b --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/features/cart/components/view/EmptyCartView.tsx b/src/features/cart/components/view/EmptyCartView.tsx new file mode 100644 index 0000000..b23c229 --- /dev/null +++ b/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 ( +
+
+
+ 아무것도 없어요 +
+ +
+
+ 메뉴를 둘러 보고, 먹고 싶은 메뉴를 바로 담아봐요 +
+ + +
+ +
+
+ 인기 순위 보기 +
+
+ + + +
+
+ 메뉴 둘러보기 +
+
+ +
+
+ ); +}; \ No newline at end of file diff --git a/src/features/menu/components/category/button/CategoryButton.module.css b/src/features/menu/components/category/button/CategoryButton.module.css index 9fdadce..d5f18cf 100644 --- a/src/features/menu/components/category/button/CategoryButton.module.css +++ b/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); } \ No newline at end of file diff --git a/src/features/menu/components/list/MenuList.tsx b/src/features/menu/components/list/MenuList.tsx index 86ac876..e1513f0 100644 --- a/src/features/menu/components/list/MenuList.tsx +++ b/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"; diff --git a/src/features/menu/components/bar/SeparationBar.module.css b/src/shared/components/bar/SeparationBar.module.css similarity index 100% rename from src/features/menu/components/bar/SeparationBar.module.css rename to src/shared/components/bar/SeparationBar.module.css diff --git a/src/features/menu/components/bar/SeparationBar.tsx b/src/shared/components/bar/SeparationBar.tsx similarity index 100% rename from src/features/menu/components/bar/SeparationBar.tsx rename to src/shared/components/bar/SeparationBar.tsx diff --git a/src/shared/components/header/Header.tsx b/src/shared/components/header/Header.tsx index 994cb35..7464969 100644 --- a/src/shared/components/header/Header.tsx +++ b/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() {
LOGO
- + + + );