Merge branch 'dev' of https://github.com/Choco-Express/Choco-Express-FE…

… into feature/Choco-Express#22
Chaem03 · Sep 24, 2024 · 96661b9 · 96661b9
2 parents e521707 + 1673f57
commit 96661b9
Show file tree

Hide file tree

Showing 20 changed files with 376 additions and 23 deletions.
diff --git a/.env b/.env
@@ -1 +1,3 @@
-VITE_BASE_URL=https://api.choco-express.site
+VITE_BASE_URL=https://api.choco-express.site
+VITE_KAKAO_KEY=b76dd44adf31465496f17842634d7c6b
+VITE_KAKAO_ID=112476
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -16,7 +16,9 @@ jobs:
         uses: actions/checkout@v3
       - name: Create .env file
         run: |
-          echo "VITE_BASE_URL=${{ secrets.VITE_BASE_URL }}" > .env
+          echo "VITE_BASE_URL=${{ secrets.VITE_BASE_URL }}" >> .env
+          echo "VITE_KAKAO_KEY=${{ secrets.VITE_KAKAO_KEY }}" >> .env
+          echo "VITE_KAKAO_ID=${{ secrets.VITE_KAKAO_ID }}" >> .env
       - name: Node.js
         uses: actions/setup-node@v3
         with:

diff --git a/index.html b/index.html
@@ -9,5 +9,10 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
+      integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,8 +11,10 @@
   },
   "dependencies": {
     "axios": "^1.7.7",
+    "html2canvas": "^1.4.1",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-frame-component": "^5.2.7",
     "react-router-dom": "^6.26.1",

diff --git a/src/assets/images/bird.svg b/src/assets/images/bird.svg
diff --git a/src/components/ChocoCheck/ChocoCheck22.jsx b/src/components/ChocoCheck/ChocoCheck22.jsx
@@ -10,12 +10,11 @@ const ChocoCheck22 = ({ currentPage, itemsPerPage, chocoData, error }) => {
   const startIndex = (currentPage - 1) * itemsPerPage;
   const currentItems = chocoData.slice(startIndex, startIndex + itemsPerPage);
 
-  // * handleChocoClick 함수가 수정되었습니다.
   const handleChocoClick = (id, chocoType) => {
-    // chocoType 인자를 추가
+    // chocoType 인자
     setSelectedChocoId(id);
-    console.log("Clicked Choco Id:", id, "Choco Type:", chocoType); // chocoType을 콘솔에 출력
-    navigate(`/detailletter/${id}`, { state: { chocoType } }); // * chocoType을 state로 함께 전달
+    console.log("Clicked Choco Id:", id, "Choco Type:", chocoType);
+    navigate(`/detailletter/${id}`, { state: { chocoType } }); // * chocoType을 state로
   };
 
   if (error) {
@@ -32,7 +31,6 @@ const ChocoCheck22 = ({ currentPage, itemsPerPage, chocoData, error }) => {
         return (
           <S.Card
             key={item.id}
-            // * handleChocoClick 호출 시 chocoType을 인자로 추가
             onClick={() => handleChocoClick(item.id, item.chocoType)}
             selected={selectedChocoId === item.id}
           >

diff --git a/src/components/ChocoCheck/ChocoCheck33.jsx b/src/components/ChocoCheck/ChocoCheck33.jsx
@@ -10,11 +10,10 @@ const ChocoCheck33 = ({ currentPage, itemsPerPage, chocoData, error }) => {
   const startIndex = (currentPage - 1) * itemsPerPage;
   const currentItems = chocoData.slice(startIndex, startIndex + itemsPerPage);
 
-  // * handleChocoClick 함수가 수정되었습니다.
   const handleChocoClick = (id, chocoType) => {
-    // chocoType 인자를 추가
+    // chocoType 추가
     setSelectedChocoId(id);
-    console.log("Clicked Choco Id:", id, "Choco Type:", chocoType); // chocoType을 콘솔에 출력
+    console.log("Clicked Choco Id:", id, "Choco Type:", chocoType);
     navigate(`/detailletter/${id}`, { state: { chocoType } }); // * chocoType을 state로 함께 전달
   };
 

diff --git a/src/components/common/Heartbackground/styled.js b/src/components/common/Heartbackground/styled.js
@@ -11,6 +11,7 @@ export const ImgContainer = styled.div`
 
 export const HEART = styled.img`
   display: flex;
+  width: 100%;
 `;
 export const Logo = styled.img`
   display: flex;

diff --git a/src/hooks/useFormattedDate.js b/src/hooks/useFormattedDate.js
@@ -0,0 +1,17 @@
+import React, { useState, useEffect } from "react";
+
+export const useFormattedDate = (isoDate) => {
+  const [formattedDate, setFormattedDate] = useState("");
+
+  useEffect(() => {
+    const date = new Date(isoDate);
+    const formatted = date.toLocaleDateString("ko-KR", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+    setFormattedDate(formatted);
+  }, [isoDate]);
+
+  return formattedDate;
+};
diff --git a/src/pages/DetailLetter/DetailLetter.jsx b/src/pages/DetailLetter/DetailLetter.jsx
@@ -53,19 +53,21 @@ const DetailLetter = () => {
   const { chocoType } = state || {}; // * chocoType
 
   // * chocoType과 letter 이미지 매핑
-  const letterDesignId = chocoType ? chocoType : 1; // chocoType을 사용하여 letterDesignId 결정
+  const letterDesignId = chocoType ? chocoType : 1;
 
   const selectedLetter = LETTERS.find((letter) => letter.id === letterDesignId);
 
-  // 아래로는 삭제 코드
+  // 아래로는 삭제 코드 수정
   const handleDeleteClick = async () => {
     try {
       const response = await instance.delete(`/api/choco/${id}`);
+
       if (response.data) {
         console.log("삭제가 완료되었습니다.");
+
         navigate(-1);
       } else {
-        console.error("Unexpected response structure:", response.data);
+        console.error("Unexpected response structure:", response);
         alert("삭제에 실패했습니다.");
       }
     } catch (error) {

diff --git a/src/pages/LoginPage/Styled.jsx b/src/pages/LoginPage/Styled.jsx
@@ -16,6 +16,7 @@ export const Wrapper = styled.div`
   color: white;
   gap: 20px;
   height: 437px;
+  width: 100%;
   align-items: center;
   margin-top: 5rem;
 `;
@@ -39,7 +40,7 @@ export const Btn_Kakaologin = styled.div`
   cursor: pointer;
 
   border-radius: 0.375rem; // 6px
-  background: #FEE500;
+  background: #fee500;
 
   color: #000;
   font-family: Pretendard;
@@ -60,8 +61,9 @@ export const Btn_Googlelogin = styled.div`
   cursor: pointer;
 
   border-radius: 0.375rem; // 6px
-  background: #FFF;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
+  background: #fff;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.08),
+    0px 1px 2px 0px rgba(0, 0, 0, 0.25);
 
   color: rgba(0, 0, 0, 0.54);
   font-family: Pretendard;
@@ -82,11 +84,11 @@ export const Btn_Naverlogin = styled.div`
   cursor: pointer;
 
   border-radius: 0.375rem; // 6px
-  background: #03C75A;
+  background: #03c75a;
 
-  color: #FFF;
+  color: #fff;
   font-family: Pretendard;
   font-size: 1.125rem; // 18px
   font-style: normal;
   font-weight: 600;
-`;
+`;
diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx
@@ -1,8 +1,11 @@
 import * as S from "./style";
+import { useNavigate } from "react-router-dom";
 import HeartBackG from "@/components/common/Heartbackground/heartBackG";
 import INSTA_URL from "@/assets/images/instaLogo.svg";
+import { shareKakao } from "@/utils/shareKakao";
 
 export const MyPage = ({ user = "test" }) => {
+  const navigate = useNavigate();
   return (
     <S.Container>
       <HeartBackG />
@@ -16,10 +19,12 @@ export const MyPage = ({ user = "test" }) => {
             <S.BoxBtn>상자 열어보기</S.BoxBtn>
           </S.BtnContainer>
         </S.BoxContainer>
-        <S.ShareBtn>URL 공유하고 더 많은 편지 받기</S.ShareBtn>
-        <S.ShareBtn>
+        <S.ShareBtn onClick={shareKakao}>
+          URL 공유하고 더 많은 편지 받기
+        </S.ShareBtn>
+        <S.ShareBtn onClick={() => navigate("/share")}>
           <S.InstaLogo src={INSTA_URL} />
-          스토리로 상자 자랑하기
+          스토리로 자랑할 사진 다운 받기
         </S.ShareBtn>
       </S.Wrapper>
     </S.Container>

diff --git a/src/pages/MyPage/style.js b/src/pages/MyPage/style.js
@@ -60,6 +60,7 @@ export const ModifyBtn = styled.div`
   top: 1rem;
   right: 1.5rem;
   position: absolute;
+  cursor: pointer;
 `;
 
 export const BoxImg = styled.div`