✨ Feature: 편지지, 초코목록 화면 구현

package.json

@@ -10,9 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+
     "axios": "^1.7.6",
+
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-frame-component": "^5.2.7",
     "react-router-dom": "^6.26.1",
     "styled-components": "^6.1.12"
   },

src/App.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { styled } from "styled-components";
 import { GlobalStyle } from "./style/globalStyle";
 import { Outlet } from "react-router-dom";
+import { NameSetting } from "./components/NameSetting/NameSetting";
 
 const Frame = styled.div`
   width: 100vw;

src/components/ChocoCheck/ChocoCheck22.jsx

@@ -0,0 +1,44 @@
+import * as S from "./ChocoChoco22";
+import { CHOCOLATES } from "../../constants/Chocolates/data";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+// import { instance } from "../../apis/instance";
+
+const ChocoCheck22 = ({ currentPage, itemsPerPage }) => {
+  const [selectedChocoId, setSelectedChocoId] = useState(null);
+  const navigate = useNavigate();
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const currentItems = CHOCOLATES.slice(startIndex, startIndex + itemsPerPage);
+
+  const handleChocoClick = (id) => {
+    setSelectedChocoId(id);
+    console.log("Clicked Choco Id:", id);
+    navigate(`/detailletter/${id}`);
+  };
+
+  // const getchocolist = async () => {
+  //   try {
+  //     const response = await instance.get("/api/choco?page={page}");
+  //     console.log("success", response.data);
+  //   } catch (error) {
+  //     console.error("fail", error);
+  //   }
+  // };
+
+  return (
+    <S.ListCheck>
+      {currentItems.map((item) => (
+        <S.Card
+          key={item.id}
+          onClick={() => handleChocoClick(item.id)}
+          selected={selectedChocoId === item.id}
+        >
+          <S.Image src={item.src} alt={`Chocolate ${item.id}`} />
+        </S.Card>
+      ))}
+    </S.ListCheck>
+  );
+};
+
+export default ChocoCheck22;

src/components/ChocoCheck/ChocoCheck33.jsx

@@ -0,0 +1,34 @@
+import * as S from "./styled";
+import { CHOCOLATES } from "../../constants/Chocolates/data";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const ChocoCheck33 = ({ currentPage, itemsPerPage }) => {
+  const [selectedChocoId, setSelectedChocoId] = useState(null);
+  const navigate = useNavigate();
+
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const currentItems = CHOCOLATES.slice(startIndex, startIndex + itemsPerPage);
+
+  const handleChocoClick = (id) => {
+    setSelectedChocoId(id);
+    console.log("Clicked Choco Id:", id);
+    navigate(`/detailletter/${id}`);
+  };
+
+  return (
+    <S.ListCheck>
+      {currentItems.map((item) => (
+        <S.Card
+          key={item.id}
+          onClick={() => handleChocoClick(item.id)}
+          selected={selectedChocoId === item.id}
+        >
+          <S.Image src={item.src} alt={`Chocolate ${item.id}`} />
+        </S.Card>
+      ))}
+    </S.ListCheck>
+  );
+};
+
+export default ChocoCheck33;

src/components/ChocoCheck/ChocoChoco22.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const ListCheck = styled.div`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  position: absolute;
+  top: 235px;
+`;
+
+export const Card = styled.div``;
+
+export const Image = styled.img`
+  width: 80px;
+  padding: 5px;
+`;

src/components/ChocoCheck/styled.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const ListCheck = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  position: absolute;
+  top: 235px;
+`;
+
+export const Card = styled.div``;
+
+export const Image = styled.img`
+  width: 83px;
+  padding: 5px;
+`;

src/main.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+// import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import router from "./router";

src/pages/ChocoList/ChocoList.jsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import * as S from "./styled";
+import LOGO from "../../assets/images/mainLogo.svg";
+import ChocoCheck33 from "../../components/ChocoCheck/ChocoCheck33";
+import ChocoCheck22 from "../../components/ChocoCheck/ChocoCheck22";
+import { NextBtn } from "../../components/common/Button/NextBtn";
+import { BackBtn } from "../../components/common/Button/BackBtn";
+import { CHOCOLATES } from "../../constants/Chocolates/data";
+
+const ChocoList = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [selectedBoxId, setSelectedBoxId] = useState(1); // 초기값 1로 설정
+
+  const ITEMS_PER_PAGE = selectedBoxId === 4 ? 6 : 9; // box4일 때는 6, 나머지는 9로 설정
+
+  const totalPages = Math.ceil(CHOCOLATES.length / ITEMS_PER_PAGE);
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleBoxChange = (id) => {
+    setSelectedBoxId(id);
+    setCurrentPage(1);
+  };
+
+  return (
+    <S.Wrapper $selectedBoxId={selectedBoxId}>
+      {selectedBoxId === 4 ? (
+        <ChocoCheck22 currentPage={currentPage} itemsPerPage={ITEMS_PER_PAGE} />
+      ) : (
+        <ChocoCheck33 currentPage={currentPage} itemsPerPage={ITEMS_PER_PAGE} />
+      )}
+      <S.Logo src={LOGO} alt="Logo" />
+      <S.Name>[김연진]의 초콜릿 상자</S.Name>
+      <S.PageIndicator>{`${currentPage} / ${totalPages}`}</S.PageIndicator>
+      <S.ButtonContainer>
+        <BackBtn onClick={handlePreviousPage} disabled={currentPage === 1} />
+        <NextBtn
+          onClick={handleNextPage}
+          disabled={currentPage === totalPages}
+        />
+      </S.ButtonContainer>
+      임시로 상자 선택 버튼 추가
+      <div>
+        {[1, 2, 3, 4, 5, 6].map((id) => (
+          <button key={id} onClick={() => handleBoxChange(id)}>
+            Set Box {id}
+          </button>
+        ))}
+      </div>
+    </S.Wrapper>
+  );
+};
+
+export default ChocoList;

src/pages/ChocoList/styled.js

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import BackImg1 from "../../assets/images/BackImg/BackImg1.svg"; // 이미지 파일 import
+import BackImg2 from "../../assets/images/BackImg/BackImg2.svg";
+import BackImg3 from "../../assets/images/BackImg/BackImg3.svg";
+import BackImg4 from "../../assets/images/BackImg/BackImg4.svg";
+import BackImg5 from "../../assets/images/BackImg/BackImg5.svg";
+import BackImg6 from "../../assets/images/BackImg/BackImg6.svg";
+
+// 선택된 상자의 ID에 따라 배경 이미지를 반환하는 함수
+const getBackgroundImage = (id) => {
+  switch (id) {
+    case 1:
+      return `url(${BackImg1})`;
+    case 2:
+      return `url(${BackImg2})`;
+    case 3:
+      return `url(${BackImg3})`;
+    case 4:
+      return `url(${BackImg4})`;
+    case 5:
+      return `url(${BackImg5})`;
+    case 6:
+      return `url(${BackImg6})`;
+    default:
+      return "none";
+  }
+};
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 667px;
+  background-image: ${({ $selectedBoxId }) =>
+    getBackgroundImage($selectedBoxId)};
+  background-size: cover;
+  background-position: center;
+  background-color: lightgrey; /* 임시로 배경색 설정 */
+  z-index: 0;
+`;
+
+export const Logo = styled.img`
+  all: initial; /* 모든 스타일을 초기화 */
+  display: flex;
+  position: absolute;
+  top: 20px;
+  z-index: 10;
+`;
+
+export const Name = styled.div`
+  position: absolute;
+  top: 170px;
+  color: #fef7e2;
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  width: 100%;
+  padding: 10px;
+  position: absolute;
+  top: 550px;
+`;
+
+export const PageIndicator = styled.div`
+  font-size: 16px;
+  color: #fef7e2;
+  font-family: Pretendard;
+  position: absolute;
+  top: 530px;
+`;