From b38e1cd9c331bab0d8222466753ce89a66ad890d Mon Sep 17 00:00:00 2001 From: myoungjugo Date: Thu, 31 Jul 2025 19:17:10 +0900 Subject: [PATCH 1/4] redesigned basket page -removed initial design -added frames(with slots in it) --- app/basket/page.tsx | 87 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 app/basket/page.tsx diff --git a/app/basket/page.tsx b/app/basket/page.tsx new file mode 100644 index 0000000..69ad1d4 --- /dev/null +++ b/app/basket/page.tsx @@ -0,0 +1,87 @@ + +import { useState } from "react" +import { ImageIcon } from "lucide-react" + +export default function Component() { + // Simulate selected poses - showing fewer poses selected + const [selectedPoses] = useState([]) + + const slotsPerFrame = 4 + const framesPerRow = 2 + const slotsPerRow = slotsPerFrame * framesPerRow + const totalRows = Math.ceil(Math.max(8, selectedPoses.length) / slotsPerRow) + + const renderPhotoSlot = (index: number) => { + const poseIndex = index + const hasPose = poseIndex < selectedPoses.length + + return ( +
+ {hasPose ? ( + {`선택된 + ) : ( + phoTo + )} +
+ ) + } + + const renderFramePair = (rowIndex: number) => { + const startIndex = rowIndex * slotsPerRow + + return ( +
+ {/* Left frame */} +
+
+ {Array.from({ length: slotsPerFrame }, (_, i) => renderPhotoSlot(startIndex + i))} +
+
+ + {/* Right frame */} +
+
+ {Array.from({ length: slotsPerFrame }, (_, i) => renderPhotoSlot(startIndex + slotsPerFrame + i))} +
+
+
+ ) + } + + return ( +
+ {/* Otter background image in bottom-left corner - behind all elements */} +
+ Otter illustration background +
+ + {/* Top Bar Header Section */} +
+
+

내 장바구니

+
+ +

저장된 포즈 사진들

+
+
+
+ + {/* Main Content Area */} +
+
+ {Array.from({ length: totalRows }, (_, rowIndex) => renderFramePair(rowIndex))} +
+
+
+ ) +} + From 8c56288a6c09acb02dfb234718f642fbbbd20713 Mon Sep 17 00:00:00 2001 From: myoungjugo Date: Thu, 31 Jul 2025 19:32:22 +0900 Subject: [PATCH 2/4] fixed bug Client-side hook used in a server component --- app/basket/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/basket/page.tsx b/app/basket/page.tsx index 69ad1d4..8d9b0dc 100644 --- a/app/basket/page.tsx +++ b/app/basket/page.tsx @@ -1,4 +1,4 @@ - +"use client" import { useState } from "react" import { ImageIcon } from "lucide-react" From d76058a03df597e8848df9868a74c0f19af62e5f Mon Sep 17 00:00:00 2001 From: myoungjugo Date: Fri, 1 Aug 2025 20:17:46 +0900 Subject: [PATCH 3/4] added gitignore to my branch --- .gitignore | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f650315 --- /dev/null +++ b/.gitignore @@ -0,0 +1,27 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules + +# next.js +/.next/ +/out/ + +# production +/build + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts \ No newline at end of file From deec12b1c68c17afa913240a4e0da267a2566014 Mon Sep 17 00:00:00 2001 From: myoungjugo Date: Sat, 2 Aug 2025 02:27:47 +0900 Subject: [PATCH 4/4] added basket function in basket/page -added basket function(pose choosed will appear at the frame slot) -fixed frame slot locations -deleted not-using image --- app/basket/page.tsx | 88 ++++++++++++++++++++++++++++----------------- 1 file changed, 56 insertions(+), 32 deletions(-) diff --git a/app/basket/page.tsx b/app/basket/page.tsx index 8d9b0dc..6b22423 100644 --- a/app/basket/page.tsx +++ b/app/basket/page.tsx @@ -1,60 +1,75 @@ -"use client" -import { useState } from "react" -import { ImageIcon } from "lucide-react" +"use client"; + +import { useBasket } from "@/contexts/basket-context"; +import { ImageIcon } from "lucide-react"; export default function Component() { - // Simulate selected poses - showing fewer poses selected - const [selectedPoses] = useState([]) + const { basketItems } = useBasket(); + + const slotsPerFrame = 4; + const framesPerRow = 2; + const slotsPerRow = slotsPerFrame * framesPerRow; + const totalRows = Math.ceil(Math.max(8, basketItems.length) / slotsPerRow); - const slotsPerFrame = 4 - const framesPerRow = 2 - const slotsPerRow = slotsPerFrame * framesPerRow - const totalRows = Math.ceil(Math.max(8, selectedPoses.length) / slotsPerRow) + // 각 슬롯 index에 해당하는 pose를 결정하는 로직 (열 위치를 기준) + const getPoseForSlot = (slotIndex: number) => { + const columnIndex = slotIndex % slotsPerFrame; + return basketItems[columnIndex] ?? null; + }; const renderPhotoSlot = (index: number) => { - const poseIndex = index - const hasPose = poseIndex < selectedPoses.length + const pose = getPoseForSlot(index); + const imageUrl = pose?.imageUrl; return ( -
- {hasPose ? ( +
+ {imageUrl ? ( {`선택된 ) : ( - phoTo + + phoTo + )}
- ) - } + ); + }; const renderFramePair = (rowIndex: number) => { - const startIndex = rowIndex * slotsPerRow + const startIndex = rowIndex * slotsPerRow; return (
- {/* Left frame */} + {/* 왼쪽 프레임 */}
- {Array.from({ length: slotsPerFrame }, (_, i) => renderPhotoSlot(startIndex + i))} + {Array.from({ length: slotsPerFrame }, (_, i) => + renderPhotoSlot(startIndex + i) + )}
- {/* Right frame */} + {/* 오른쪽 프레임 */}
- {Array.from({ length: slotsPerFrame }, (_, i) => renderPhotoSlot(startIndex + slotsPerFrame + i))} + {Array.from({ length: slotsPerFrame }, (_, i) => + renderPhotoSlot(startIndex + slotsPerFrame + i) + )}
- ) - } + ); + }; return (
- {/* Otter background image in bottom-left corner - behind all elements */} + {/* 배경 수달 이미지 */}
- {/* Top Bar Header Section */} + {/* 상단 헤더 */}
-

내 장바구니

+

+ 내 장바구니 +

-

저장된 포즈 사진들

+

+ 저장된 포즈 사진들 +

- {/* Main Content Area */} + {/* 포토 슬롯 렌더링 */}
- {Array.from({ length: totalRows }, (_, rowIndex) => renderFramePair(rowIndex))} + {Array.from({ length: totalRows }, (_, rowIndex) => + renderFramePair(rowIndex) + )}
- ) + ); } + + +