[Feat/#76] 주문/계좌이체 페이지 생성

apps/customer/src/app/(tabs)/main/_components/MainListView.tsx

@@ -73,7 +73,7 @@ export default function MainListView() {
             onCategoryClick={handleCategoryClick}
           />
 
-          <div className="mt-[1.2rem] flex flex-col gap-[1.2rem] pb-[2rem]">
+          <div className="mt-[1.2rem] flex flex-col gap-[1.2rem] pb-[9.6rem]">
             {filteredAndSortedItems.map((item) => (
               <MainStoreCard key={item.id} item={item} />
             ))}

apps/customer/src/app/(tabs)/main/store/[id]/purchase/_components/PurchaseCompleteModal.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Button, Header, Icon } from "@compasser/design-system";
+import type { StoreDetailItem, StoreMenuItem } from "../../../_types/store-detail";
+
+interface PurchaseCompleteModalProps {
+  isOpen: boolean;
+  store: StoreDetailItem;
+  menu: StoreMenuItem;
+  onClose?: () => void;
+}
+
+const formatPrice = (price: number) => `${price.toLocaleString()}원`;
+
+export default function PurchaseCompleteModal({
+  isOpen,
+  store,
+  menu,
+}: PurchaseCompleteModalProps) {
+  const router = useRouter();
+
+  if (!isOpen) return null;
+
+  const handleConfirm = () => {
+    router.push("/main");
+  };
+
+  return (
+    <div className="fixed inset-0 z-[60] h-screen overflow-hidden bg-inverse">
+      <div className="flex h-full w-full flex-col bg-inverse">
+        <Header variant="center-title" title="주문 완료" />
+
+        <main className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-inverse">
+          <div className="flex flex-1 flex-col px-[1.6rem] pb-[1.6rem]">
+            <div className="flex flex-col items-center py-[6rem]">
+              <Icon
+                name="GiftOpen"
+                width={120}
+                height={120}
+                ariaHidden={false}
+              />
+
+              <p className="mt-[1.6rem] body1-m text-default">
+                결제가 완료되었어요.
+              </p>
+
+              <p className="mt-[0.8rem] body1-m text-default">
+                픽업 시간에 맞춰 상품을 수령해주세요!
+              </p>
+            </div>
+
+            <div className="my-[0.9rem] h-[1.2rem] w-full shrink-0 bg-background" />
+
+            <div className="shrink-0">
+              <div className="border-b border-gray-500 border-dashed px-[1rem] py-[0.8rem]">
+                <div className="flex items-center">
+                  <Icon
+                    name="StoreIcon"
+                    width={20}
+                    height={20}
+                    ariaHidden={false}
+                  />
+                  <p className="ml-[0.4rem] body2-r text-gray-700">
+                    {store.storeName}
+                  </p>
+                </div>
+              </div>
+
+              <div className="mt-[0.6rem] px-[1rem] py-[1rem]">
+                <div className="flex">
+                  <div className="flex h-[11rem] w-[11rem] shrink-0 items-center justify-center rounded-[8px] bg-background">
+                    <Icon name="Gift" width={80} height={80} ariaHidden={false} />
+                  </div>
+
+                  <div className="ml-[0.6rem] flex min-w-0 flex-1 flex-col">
+                    <p className="body1-m text-default">{menu.name}</p>
+
+                    <p className="mt-[0.2rem] body2-r text-gray-600">
+                      픽업시간: {menu.pickupStartTime} ~ {menu.pickupEndTime}
+                    </p>
+
+                    <p className="mt-[0.2rem] body2-m text-secondary">
+                      {formatPrice(menu.price)}
+                    </p>
+
+                    <div className="mt-auto flex justify-end">
+                      <span className="body1-m rounded-[999px] border border-primary px-[0.8rem] py-[0.2rem] text-primary">
+                        결제 완료
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-auto pt-[1.6rem]">
+              <Button size="lg" variant="primary" onClick={handleConfirm}>
+                확인
+              </Button>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

apps/customer/src/app/(tabs)/main/store/[id]/purchase/_components/PurchaseContent.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button, Header } from "@compasser/design-system";
+import type { StoreDetailItem, StoreMenuItem } from "../../../_types/store-detail";
+import PurchaseGuideModal from "./PurchaseGuideModal";
+import PurchaseInfoSection from "./PurchaseInfoSection";
+import PurchaseNoticeCard from "./PurchaseNoticeCard";
+import PurchaseOrderCard from "./PurchaseOrderCard";
+import PurchaseCompleteModal from "./PurchaseCompleteModal";
+
+interface PurchaseContentProps {
+  store: StoreDetailItem;
+  menu: StoreMenuItem;
+}
+
+const ACCOUNT_INFO = {
+  bankName: "나무은행",
+  accountNumber: "123-4567-891011",
+  depositor: "000",
+};
+
+const NOTICE_LIST = [
+  "결제 정보를 확인하고 이체를 진행해주세요.",
+  "10분 이내로 입금을 완료해주세요.",
+  "픽업 시간에 맞춰 상품을 수령해주세요.",
+];
+
+export default function PurchaseContent({
+  store,
+  menu,
+}: PurchaseContentProps) {
+  const router = useRouter();
+  const [count, setCount] = useState(1);
+  const [isGuideModalOpen, setIsGuideModalOpen] = useState(false);
+  const [isCompleteModalOpen, setIsCompleteModalOpen] = useState(false);
+
+  const totalPrice = useMemo(() => menu.price * count, [menu.price, count]);
+
+  const handleDecrease = () => {
+    setCount((prev) => Math.max(prev - 1, 0));
+  };
+
+  const handleIncrease = () => {
+    setCount((prev) => Math.min(prev + 1, menu.remainingCount));
+  };
+
+  const handleOpenGuideModal = () => {
+    if (count === 0) return;
+    setIsGuideModalOpen(true);
+  };
+
+  const handleCloseGuideModal = () => {
+    setIsGuideModalOpen(false);
+  };
+
+  const handleCompleteTransfer = () => {
+    setIsGuideModalOpen(false);
+    setIsCompleteModalOpen(true);
+  };
+
+  const handleCloseCompleteModal = () => {
+    setIsCompleteModalOpen(false);
+  };
+
+  return (
+    <>
+      <div className="flex min-h-screen w-full flex-col">
+        <Header
+          variant="back-title"
+          title="랜덤박스 구매"
+          onBackClick={() => router.back()}
+        />
+
+        <main className="flex-1 overflow-y-auto bg-background">
+          <div className="px-[1.6rem] pb-[1.6rem] pt-[1.6rem]">
+            <PurchaseOrderCard
+              store={store}
+              menu={menu}
+              count={count}
+              totalPrice={totalPrice}
+              onDecrease={handleDecrease}
+              onIncrease={handleIncrease}
+            />
+
+            <PurchaseInfoSection
+              bankName={ACCOUNT_INFO.bankName}
+              accountNumber={ACCOUNT_INFO.accountNumber}
+              depositor={ACCOUNT_INFO.depositor}
+              totalPrice={totalPrice}
+            />
+
+            <PurchaseNoticeCard noticeList={NOTICE_LIST} />
+
+            <Button
+              size="lg"
+              variant="primary"
+              disabled={count === 0}
+              className="mb-[4.8rem] mt-[1.6rem]"
+              onClick={handleOpenGuideModal}
+            >
+              결제하기
+            </Button>
+          </div>
+        </main>
+      </div>
+
+      <PurchaseGuideModal
+        isOpen={isGuideModalOpen}
+        accountText={`${ACCOUNT_INFO.bankName}${ACCOUNT_INFO.accountNumber}`}
+        onClose={handleCloseGuideModal}
+        onConfirm={handleCompleteTransfer}
+      />
+
+      <PurchaseCompleteModal
+        isOpen={isCompleteModalOpen}
+        store={store}
+        menu={menu}
+        onClose={handleCloseCompleteModal}
+      />
+    </>
+  );
+}

apps/customer/src/app/(tabs)/main/store/[id]/purchase/_components/PurchaseGuideModal.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { Button, Icon } from "@compasser/design-system";
+
+interface PurchaseGuideModalProps {
+  isOpen: boolean;
+  accountText: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export default function PurchaseGuideModal({
+  isOpen,
+  accountText,
+  onClose,
+  onConfirm,
+}: PurchaseGuideModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center bg-default/50 px-[1.6rem]">
+      <div className="h-[26.5rem] w-full rounded-[10px] border border-primary bg-inverse px-[1.6rem] py-[1rem]">
+        <div className="flex justify-end">
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="닫기"
+            className="flex h-[3.6rem] w-[3.6rem] items-center justify-center text-gray-600"
+          >
+            <Icon
+              name="CloseButton"
+              width={36}
+              height={36}
+              ariaHidden={false}
+            />
+          </button>
+        </div>
+
+        <div className="mt-[0.4rem] flex flex-col items-center px-[1.2rem] pb-[0.8rem]">
+          <div className="flex items-center justify-center">
+            <Icon
+              name="KakaoPay"
+              width={67.76}
+              height={28}
+              ariaHidden={false}
+            />
+            <h3 className="ml-[0.4rem] head3-m text-default">
+              카카오 계좌이체 안내
+            </h3>
+          </div>
+
+          <div className="mt-[2rem] text-center">
+            <p className="body2-r text-default">
+              카카오 계좌이체로 결제가 진행됩니다.
+            </p>
+            <p className="body2-r text-default">
+              아래의 계좌로 계좌이체를 진행해주세요.
+            </p>
+          </div>
+
+          <p className="mt-[1.2rem] head3-m text-default">{accountText}</p>
+
+          <Button
+            size="lg"
+            variant="primary"
+            className="mt-[2rem]"
+            onClick={onConfirm}
+          >
+            결제하기
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/customer/src/app/(tabs)/main/store/[id]/purchase/_components/PurchaseInfoSection.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+interface PurchaseInfoSectionProps {
+  bankName: string;
+  accountNumber: string;
+  depositor: string;
+  totalPrice: number;
+}
+
+export default function PurchaseInfoSection({
+  bankName,
+  accountNumber,
+  depositor,
+  totalPrice,
+}: PurchaseInfoSectionProps) {
+  return (
+    <div className="mt-[2.4rem]">
+      <h2 className="head3-m text-default">결제 정보</h2>
+
+      <div className="mt-[0.8rem] border-t border-gray-500 border-dashed" />
+
+      <div className="mt-[1rem] flex items-start justify-between">
+        <div className="flex flex-col gap-[0.8rem]">
+          <p className="body1-m text-gray-600">계좌정보</p>
+          <p className="body1-m text-gray-600">예금주명</p>
+          <p className="body1-m text-gray-600">총 결제금액</p>
+        </div>
+
+        <div className="flex flex-col gap-[0.8rem]">
+          <p className="body1-r text-default">
+            {bankName}
+            {accountNumber}
+          </p>
+          <p className="body1-r text-default">{depositor}</p>
+          <p className="body1-r text-default">{totalPrice.toLocaleString()}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/customer/src/app/(tabs)/main/store/[id]/purchase/_components/PurchaseNoticeCard.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Card, Icon } from "@compasser/design-system";
+
+interface PurchaseNoticeCardProps {
+  noticeList: string[];
+}
+
+export default function PurchaseNoticeCard({
+  noticeList,
+}: PurchaseNoticeCardProps) {
+  return (
+    <Card
+      variant="primary-variant-bordered"
+      className="mt-[4rem] flex flex-col gap-[0.4rem]"
+    >
+      {noticeList.map((text) => (
+        <div key={text} className="flex items-start">
+          <div className="mt-[0.15rem] shrink-0">
+            <Icon name="Check" width={16} height={16} ariaHidden={false} />
+          </div>
+          <p className="ml-[0.4rem] body2-r text-default">{text}</p>
+        </div>
+      ))}
+    </Card>
+  );
+}