From 39eeba3efbc04d9785217a0822dbc5715949f6c5 Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Mon, 6 Jan 2025 18:37:59 +0900
Subject: [PATCH 01/10] =?UTF-8?q?Fix:=20ios=20=EC=95=84=EC=9D=B4=EC=BD=98?=
 =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/assets/icons/GridIcon.tsx      | 4 ++--
 apps/client/src/assets/icons/PrevIcon.tsx      | 6 +++---
 apps/client/src/components/cake/CakeHeader.tsx | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/assets/icons/GridIcon.tsx b/apps/client/src/assets/icons/GridIcon.tsx
index ab621d7..cdf8e1e 100644
--- a/apps/client/src/assets/icons/GridIcon.tsx
+++ b/apps/client/src/assets/icons/GridIcon.tsx
@@ -7,8 +7,8 @@ const GridIcon = (props: SVGProps<SVGSVGElement>) => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M6.75 11.0833C7.32464 11.0833 7.87574 11.3116 8.28206 11.7179C8.68839 12.1243 8.91667 12.6754 8.91667 13.25V17.5833C8.91667 18.158 8.68839 18.7091 8.28206 19.1154C7.87574 19.5217 7.32464 19.75 6.75 19.75H2.41667C1.84203 19.75 1.29093 19.5217 0.884602 19.1154C0.478273 18.7091 0.25 18.158 0.25 17.5833V13.25C0.25 12.6754 0.478273 12.1243 0.884602 11.7179C1.29093 11.3116 1.84203 11.0833 2.41667 11.0833H6.75ZM17.5833 11.0833C18.158 11.0833 18.7091 11.3116 19.1154 11.7179C19.5217 12.1243 19.75 12.6754 19.75 13.25V17.5833C19.75 18.158 19.5217 18.7091 19.1154 19.1154C18.7091 19.5217 18.158 19.75 17.5833 19.75H13.25C12.6754 19.75 12.1243 19.5217 11.7179 19.1154C11.3116 18.7091 11.0833 18.158 11.0833 17.5833V13.25C11.0833 12.6754 11.3116 12.1243 11.7179 11.7179C12.1243 11.3116 12.6754 11.0833 13.25 11.0833H17.5833ZM6.75 0.25C7.32464 0.25 7.87574 0.478273 8.28206 0.884602C8.68839 1.29093 8.91667 1.84203 8.91667 2.41667V6.75C8.91667 7.32464 8.68839 7.87574 8.28206 8.28206C7.87574 8.68839 7.32464 8.91667 6.75 8.91667H2.41667C1.84203 8.91667 1.29093 8.68839 0.884602 8.28206C0.478273 7.87574 0.25 7.32464 0.25 6.75V2.41667C0.25 1.84203 0.478273 1.29093 0.884602 0.884602C1.29093 0.478273 1.84203 0.25 2.41667 0.25H6.75ZM17.5833 0.25C18.158 0.25 18.7091 0.478273 19.1154 0.884602C19.5217 1.29093 19.75 1.84203 19.75 2.41667V6.75C19.75 7.32464 19.5217 7.87574 19.1154 8.28206C18.7091 8.68839 18.158 8.91667 17.5833 8.91667H13.25C12.6754 8.91667 12.1243 8.68839 11.7179 8.28206C11.3116 7.87574 11.0833 7.32464 11.0833 6.75V2.41667C11.0833 1.84203 11.3116 1.29093 11.7179 0.884602C12.1243 0.478273 12.6754 0.25 13.25 0.25H17.5833Z"
       />
     </svg>
diff --git a/apps/client/src/assets/icons/PrevIcon.tsx b/apps/client/src/assets/icons/PrevIcon.tsx
index c6c9e76..9139974 100644
--- a/apps/client/src/assets/icons/PrevIcon.tsx
+++ b/apps/client/src/assets/icons/PrevIcon.tsx
@@ -5,13 +5,13 @@ const PrevIcon = (props: SVGProps<SVGSVGElement>) => {
     <svg
       {...props}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width="24px"
+      height="24px"
       viewBox="0 0 24 24"
       fill="none"
     >
       <path
-        d="M14 7L9 12L14 17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+        d="M14 7L9 12L14 17" stroke="white" strokeWidth="2"
       />
     </svg>
   );
diff --git a/apps/client/src/components/cake/CakeHeader.tsx b/apps/client/src/components/cake/CakeHeader.tsx
index e24ba89..1be6f07 100644
--- a/apps/client/src/components/cake/CakeHeader.tsx
+++ b/apps/client/src/components/cake/CakeHeader.tsx
@@ -29,12 +29,12 @@ const SubTitle = styled.h2`
   margin-top: 0.5rem;
 `;
 
-const Nickname = styled.h1`
+const Nickname = styled.p`
   color: var(--orange-500);
   display: inline;
 `;
 
-const Phrase = styled.h1`
+const Phrase = styled.p`
   display: inline;
 `;
 
@@ -78,7 +78,7 @@ const CakeHeader = ({
               navigate('/mypage');
             }}
           >
-            {!isPC && (<PersonIcon width={'100%'} height={'100%'} viewBox="0 0 31 38" />)}
+            {!isPC && (<PersonIcon viewBox="0 0 31 38" />)}
           </MyPageButton>
         )}
       </TitleContainer>

From 7e1974480d60d60d255af80c134edbdd924607ed Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Mon, 6 Jan 2025 20:59:33 +0900
Subject: [PATCH 02/10] =?UTF-8?q?Fix:=20=ED=8E=B8=EC=A7=80=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EA=B8=B0=EC=A4=80=2030=EC=9D=BC=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=207=EC=9D=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/ModalPortal.ts    |  6 +++---
 apps/server/src/routes/cake.ts    |  6 +++---
 apps/server/src/service/letter.ts | 15 ++++++---------
 3 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/ModalPortal.ts b/apps/client/src/ModalPortal.ts
index afd79b6..6c87cd0 100644
--- a/apps/client/src/ModalPortal.ts
+++ b/apps/client/src/ModalPortal.ts
@@ -6,9 +6,9 @@ interface ModalPortalProps {
 }
 
 export const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
-  const el = document.getElementById('modal');
-  if (!el) {
+  const modalElement = document.getElementById('modal');
+  if (!modalElement) {
     return null;
   }
-  return ReactDOM.createPortal(children, el);
+  return ReactDOM.createPortal(children, modalElement);
 };
diff --git a/apps/server/src/routes/cake.ts b/apps/server/src/routes/cake.ts
index 04af0b6..ea04b0d 100644
--- a/apps/server/src/routes/cake.ts
+++ b/apps/server/src/routes/cake.ts
@@ -85,14 +85,14 @@ router.get('/cake/:ownerId', async (req, res) => {
 
     const today = new Date();
     const birthday = cakeUserData.birthday;
-    const thisYearBdayAfter30 = new Date(
+    const thisYearBdayAfter7 = new Date(
       today.getFullYear(),
       birthday.getMonth(),
-      birthday.getDate() + 30,
+      birthday.getDate() + 7,
     );
 
     const year =
-      today > thisYearBdayAfter30
+      today > thisYearBdayAfter7
         ? today.getFullYear() + 1
         : today.getFullYear();
 
diff --git a/apps/server/src/service/letter.ts b/apps/server/src/service/letter.ts
index a92be20..9884742 100644
--- a/apps/server/src/service/letter.ts
+++ b/apps/server/src/service/letter.ts
@@ -1,16 +1,13 @@
 export function getLetterYearBasedOnBirthday(birthday: Date): number {
   const today = new Date();
-  const thisYearBirthday = new Date(
+
+  const thisYearBdayAfter7 = new Date(
     today.getFullYear(),
     birthday.getMonth(),
-    birthday.getDate(),
+    birthday.getDate() + 7,
   );
 
-  // 생일 기준으로 30일 이후인지 확인
-  const timeDifference = thisYearBirthday.getTime() - today.getTime();
-  const daysUntilBirthday = timeDifference / (1000 * 60 * 60 * 24);
-
-  return daysUntilBirthday <= 30 && daysUntilBirthday >= 0
-    ? today.getFullYear()
-    : today.getFullYear() + 1;
+  return today > thisYearBdayAfter7
+    ? today.getFullYear() + 1
+    : today.getFullYear();
 }

From 927c4845f6bc0cabb7f2cd66c3a98c89ad4d7cb5 Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Sun, 19 Jan 2025 15:12:51 +0900
Subject: [PATCH 03/10] =?UTF-8?q?Fix:=20react=20query=20staletime=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/apis/cake/useGetCakeLetters.tsx | 1 +
 apps/client/src/apis/cake/useGetYear.tsx        | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/apis/cake/useGetCakeLetters.tsx b/apps/client/src/apis/cake/useGetCakeLetters.tsx
index 1462668..3af0ad3 100644
--- a/apps/client/src/apis/cake/useGetCakeLetters.tsx
+++ b/apps/client/src/apis/cake/useGetCakeLetters.tsx
@@ -13,5 +13,6 @@ export const useGetCakeLetters = (ownerId: string, year: string, page: number) =
   return useSuspenseQuery({
     queryKey: ['cake-letters', ownerId, year, page],
     queryFn: () => fetchCakeLetters(ownerId, year, page),
+    staleTime: 1000 * 60,
   });
 }
diff --git a/apps/client/src/apis/cake/useGetYear.tsx b/apps/client/src/apis/cake/useGetYear.tsx
index 9d184a4..a8572e8 100644
--- a/apps/client/src/apis/cake/useGetYear.tsx
+++ b/apps/client/src/apis/cake/useGetYear.tsx
@@ -10,6 +10,7 @@ async function fetchYear() {
 export const useGetYear = () => {
   return useSuspenseQuery({
     queryKey: ['get-year'],
-    queryFn: () => fetchYear()
+    queryFn: () => fetchYear(),
+    staleTime: 1000 * 60 * 5,
   })
 }

From 37215b660b74e7748f9f9f7e76a3ebed70fe3992 Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Wed, 12 Feb 2025 18:34:16 +0900
Subject: [PATCH 04/10] =?UTF-8?q?fix:=20axios=20interceptor=20401=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=EC=B2=98=EB=A6=AC=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/apis/axios.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/client/src/apis/axios.ts b/apps/client/src/apis/axios.ts
index 7844298..3d6e249 100644
--- a/apps/client/src/apis/axios.ts
+++ b/apps/client/src/apis/axios.ts
@@ -14,8 +14,12 @@ axiosInstance.interceptors.response.use(
     const axiosError = customError.response?.status as number;
 
 
-    // 401 에러 응답
-    if (axiosError === 401) {
+    // 401 에러 응답 (인가 미들웨어에서 모든 토큰이 만료되었을때 401 리턴 -> 로그인 유도)
+    if ((axiosError === 401) && (window.location.pathname !== '/')) {
+      if (/^\/cake\/[^/]+$/.test(window.location.pathname)) {
+        return Promise.reject(error);
+      }
+      window.location.replace('/');
       return Promise.reject(error);
     }
 
@@ -30,7 +34,6 @@ axiosInstance.interceptors.response.use(
       return Promise.reject(error);
     }
 
-
     return Promise.reject(error);
   },
 );

From aa78124bd1eba5aa3c86ed8aa94d111b9bd0e778 Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Thu, 13 Feb 2025 00:41:18 +0900
Subject: [PATCH 05/10] =?UTF-8?q?Chore:=20cake=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EA=B4=80=EB=A0=A8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/components/cake/CakeHeader.tsx |  78 ++---------
 apps/client/src/components/cake/CakeInfo.tsx  |  59 ++++-----
 .../src/components/cake/ColorSelector.tsx     |  45 +------
 apps/client/src/components/cake/MyCake.tsx    |  22 +---
 .../client/src/components/cake/SharedCake.tsx |  30 +----
 apps/client/src/styles/CakeStyle.tsx          | 124 ++++++++++++++++++
 6 files changed, 176 insertions(+), 182 deletions(-)
 create mode 100644 apps/client/src/styles/CakeStyle.tsx

diff --git a/apps/client/src/components/cake/CakeHeader.tsx b/apps/client/src/components/cake/CakeHeader.tsx
index 1be6f07..1ff3aa6 100644
--- a/apps/client/src/components/cake/CakeHeader.tsx
+++ b/apps/client/src/components/cake/CakeHeader.tsx
@@ -1,61 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
+import * as C from '#styles/CakeStyle.tsx';
 import { useNavigate } from 'react-router-dom';
 import { PersonIcon } from '#icons';
 import useIsPC from '#hooks/useIsPc.tsx';
 
-const HeaderContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: start;
-  width: 100%;
-  padding-bottom: 20px;
-`;
-
-const TitleContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-`;
-
-const Title = styled.h1`
-  font-weight: bold;
-`;
-
-const SubTitle = styled.h2`
-  margin-top: 0.5rem;
-`;
-
-const Nickname = styled.p`
-  color: var(--orange-500);
-  display: inline;
-`;
-
-const Phrase = styled.p`
-  display: inline;
-`;
-
-const MyPageButton = styled.button`
-  width: 2.6rem;
-  height: 2.6rem;
-  border-radius: 50%;
-  border-width: 0;
-  overflow: hidden;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: right;
-  align-items: center;
-  background-color: transparent;
-
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-
 const CakeHeader = ({
   nickname,
   isMyCake,
@@ -66,25 +14,25 @@ const CakeHeader = ({
   const navigate = useNavigate();
   const isPC = useIsPC(1024);
   return (
-    <HeaderContainer>
-      <TitleContainer>
-        <Title>
-          <Nickname>{nickname}</Nickname>
-          <Phrase>님의 케이크</Phrase>
-        </Title>
+    <C.HeaderContainer>
+      <C.TitleContainer>
+        <C.Title>
+          <C.Nickname>{nickname}</C.Nickname>
+          <C.Phrase>님의 케이크</C.Phrase>
+        </C.Title>
         {isMyCake && (
-          <MyPageButton
+          <C.MyPageButton
             onClick={() => {
               navigate('/mypage');
             }}
           >
             {!isPC && (<PersonIcon viewBox="0 0 31 38" />)}
-          </MyPageButton>
+          </C.MyPageButton>
         )}
-      </TitleContainer>
-      {isMyCake && <SubTitle>장식초를 눌러 편지를 확인해보세요✉️</SubTitle>}
-      {!isMyCake && <SubTitle>친구의 케이크를 꾸며보세요❤️</SubTitle>}
-    </HeaderContainer>
+      </C.TitleContainer>
+      {isMyCake && <C.SubTitle>장식초를 눌러 편지를 확인해보세요✉️</C.SubTitle>}
+      {!isMyCake && <C.SubTitle>친구의 케이크를 꾸며보세요❤️</C.SubTitle>}
+    </C.HeaderContainer>
   );
 };
 
diff --git a/apps/client/src/components/cake/CakeInfo.tsx b/apps/client/src/components/cake/CakeInfo.tsx
index 3f766f9..cc07ced 100644
--- a/apps/client/src/components/cake/CakeInfo.tsx
+++ b/apps/client/src/components/cake/CakeInfo.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
 import { useParams } from 'react-router-dom';
+import * as C from '#styles/CakeStyle.tsx';
+
 import { CakeColorType } from '@isttp/types/all';
 import {
   getCakeDataRes,
@@ -9,15 +10,18 @@ import {
   getLetterRes,
   getCakeNoDataRes,
 } from '@isttp/schemas/all';
+
 import Pagenation from '#components/cake/Pagenation.tsx';
 import RenderCake from '#components/cake/RenderCake.tsx';
 import ReadLetter from '#components/letter/ReadLetter.tsx';
-import { useGetCakeLetters } from '#apis/cake/useGetCakeLetters.tsx';
-import { useGetLetter } from '#apis/letter/useGetLetter.tsx';
-import { useQueryClient } from '@tanstack/react-query';
 import Modal from '#components/modal/Modal.tsx';
 import Button from '#components/common/Button.tsx';
 
+import { useQueryClient } from '@tanstack/react-query';
+import { useGetCakeLetters } from '#apis/cake/useGetCakeLetters.tsx';
+import { useGetLetter } from '#apis/letter/useGetLetter.tsx';
+
+
 interface CakeInfoProps {
   year: string;
   sheetColor: CakeColorType | null;
@@ -25,6 +29,16 @@ interface CakeInfoProps {
   isMyCake?: boolean;
 }
 
+const CandlePositions = [
+  { top: 2, left: 30 },
+  { top: 6, left: 50 },
+  { top: 2, left: 70 },
+  { top: 40, left: 20 },
+  { top: 47, left: 40 },
+  { top: 47, left: 60 },
+  { top: 40, left: 80 },
+];
+
 const CakeInfo: React.FC<CakeInfoProps> = ({
   year,
   sheetColor,
@@ -42,12 +56,11 @@ const CakeInfo: React.FC<CakeInfoProps> = ({
   });
   const queryClient = useQueryClient();
   const { data: cakeLettersData } = useGetCakeLetters(ownerId!, year, pageData.currentPage);
-
   const { data: letterData } = useGetLetter(selectedLetterId!);
 
   useEffect(() => {
-    const noDataResult = getCakeNoDataRes.safeParse(cakeLettersData);
-    if (noDataResult.success && noDataResult.data.noData) {
+    const checkNoData = getCakeNoDataRes.safeParse(cakeLettersData);
+    if (checkNoData.success && checkNoData.data.noData) {
       setCakeData([]);
       setPageData({ currentPage: 1, totalPage: 1 });
     } else {
@@ -84,32 +97,22 @@ const CakeInfo: React.FC<CakeInfoProps> = ({
     });
   };
 
-  const candlePositions = [
-    { top: 2, left: 30 },
-    { top: 6, left: 50 },
-    { top: 2, left: 70 },
-    { top: 40, left: 20 },
-    { top: 47, left: 40 },
-    { top: 47, left: 60 },
-    { top: 40, left: 80 },
-  ];
-
   const candles = cakeData.map((cake, index) => ({
     candleImageUrl: cake.candleImageUrl,
     nickname: cake.nickname,
-    position: candlePositions[index % candlePositions.length],
+    position: CandlePositions[index % CandlePositions.length],
   }));
 
   return (
-    <CakeContainer>
-      <CakeInfoWrapper isMyCake={isMyCake}>
+    <C.CakeContainer>
+      <C.CakeInfoWrapper isMyCake={isMyCake}>
         <RenderCake
           sheetColor={sheetColor}
           creamColor={creamColor}
           candles={candles}
           handleClick={openLetter}
         />
-      </CakeInfoWrapper>
+      </C.CakeInfoWrapper>
       <Pagenation
         currentPage={pageData.currentPage}
         totalPage={pageData.totalPage}
@@ -136,20 +139,8 @@ const CakeInfo: React.FC<CakeInfoProps> = ({
           확인
         </Button>
       </Modal>
-    </CakeContainer>
+    </C.CakeContainer>
   );
 };
 
 export default CakeInfo;
-
-const CakeContainer = styled.div`
-  margin-top: 50px;
-`;
-
-const CakeInfoWrapper = styled.div<{ isMyCake?: boolean }>`
-  ${({ isMyCake }) =>
-    isMyCake === false &&
-    css`
-      pointer-events: none;
-    `}
-`;
diff --git a/apps/client/src/components/cake/ColorSelector.tsx b/apps/client/src/components/cake/ColorSelector.tsx
index dbf12ba..ed9b73e 100644
--- a/apps/client/src/components/cake/ColorSelector.tsx
+++ b/apps/client/src/components/cake/ColorSelector.tsx
@@ -1,42 +1,7 @@
 import React, { SetStateAction } from 'react';
-import styled from 'styled-components';
-
+import * as C from '#styles/CakeStyle.tsx';
 import { CakeColorType } from '@isttp/types/all';
 
-const ColorContainer = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  background-color: rgba(222, 222, 222, 0.5);
-  padding: 0.6rem;
-  border-radius: 0.5rem;
-`;
-
-const ColorOption = styled.div<{ $color: string; selected: boolean }>`
-  display: flex;
-  flex-direction: row; 
-  justify-content: center;
-  align-items: center; 
-  width: 2.5rem;
-  height: 2.5rem;
-  margin: 0.5rem;
-  border-radius: 50%;
-  background-color: var(--${(props) => props.$color === 'white' ? 'white' : `${props.$color}-100`});
-  cursor: pointer;
-  transition: border 0.1s;
-
-  &:hover {
-    border: 5px solid var(--${(props) => props.$color === 'white' ? 'gray-400' : `${props.$color}-200`});
-  }
-  
-  @media (max-width: 429px) {
-    width: 2rem;
-    height: 2rem;
-    margin: 0.5rem;
-  }
-`;
-
 type ColorSelectorProps = {
   selectedColor: string | null;
   setSelectedColor: React.Dispatch<SetStateAction<CakeColorType>>;
@@ -56,18 +21,18 @@ const ColorSelector: React.FC<ColorSelectorProps> = ({
   ];
 
   return (
-    <ColorContainer>
+    <C.ColorContainer>
       {colors.map((color, index) => (
-        <ColorOption
+        <C.ColorOption
           key={index}
           $color={color}
           selected={selectedColor === color}
           onClick={() => setSelectedColor(color)}
         >
           {selectedColor === color && <span>&#10004;</span>}
-        </ColorOption>
+        </C.ColorOption>
       ))}
-    </ColorContainer>
+    </C.ColorContainer>
   );
 };
 
diff --git a/apps/client/src/components/cake/MyCake.tsx b/apps/client/src/components/cake/MyCake.tsx
index 21c6c31..c645a6f 100644
--- a/apps/client/src/components/cake/MyCake.tsx
+++ b/apps/client/src/components/cake/MyCake.tsx
@@ -1,15 +1,18 @@
 import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
+import * as C from '#styles/CakeStyle.tsx';
+
 import Toggle from '#components/common/Toggle.tsx';
 import GridInfo from '#components/cake/GridInfo.tsx';
 import CakeInfo from '#components/cake/CakeInfo.tsx';
 import Button from '#components/common/Button.tsx';
 import ShareUrlModal from '#components/modal/ShareUrlModal.tsx';
 import CakeHeader from '#components/cake/CakeHeader.tsx';
+
 import { CakeUserTypeResponse } from '@isttp/types/all';
 import useToggleStore from '../../store/useToggleStore';
 
+
 type MyCakeProps = {
   ownerId: string;
   data: CakeUserTypeResponse;
@@ -39,7 +42,7 @@ const MyCake: React.FC<MyCakeProps> = ({ ownerId, data }) => {
     <>
       <CakeHeader nickname={data.nickname} isMyCake={true} />
       <Toggle ownerId={ownerId} toggle={toggle} onClick={clickedToggle} />
-      {data.isBirthday && <H1>happy birthday!</H1>}
+      {data.isBirthday && <C.H1>happy birthday!</C.H1>}
       {toggle ? (
         <GridInfo year={data.year} />
       ) : (
@@ -67,18 +70,3 @@ const MyCake: React.FC<MyCakeProps> = ({ ownerId, data }) => {
 };
 
 export default MyCake;
-
-const H1 = styled.h1`
-  background: linear-gradient(90deg, #FF3E3E 0%, #582599 100%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  text-align: center;
-  font-family: "sansita";
-  font-size: 2.125rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  text-transform: uppercase;
-  margin-top: 2rem;
-`;
diff --git a/apps/client/src/components/cake/SharedCake.tsx b/apps/client/src/components/cake/SharedCake.tsx
index 9dcdea1..507bc26 100644
--- a/apps/client/src/components/cake/SharedCake.tsx
+++ b/apps/client/src/components/cake/SharedCake.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import * as C from '#styles/CakeStyle.tsx'
 
 import CakeHeader from '#components/cake/CakeHeader.tsx';
 import CakeInfo from '#components/cake/CakeInfo.tsx';
@@ -63,14 +63,14 @@ const SharedCake: React.FC<MyCakeProps> = ({ ownerId, data }) => {
   return (
     <>
       <CakeHeader nickname={data.nickname} isMyCake={false} />
-      {data.isBirthday && <H1>happy birthday!</H1>}
+      {data.isBirthday && <C.H1>happy birthday!</C.H1>}
       <CakeInfo
         year={data.year}
         sheetColor={data.sheetColor}
         creamColor={data.creamColor}
         isMyCake={false}
       />
-      <Buttons>
+      <C.Buttons>
         <Button
           type="default"
           onClick={handleCheckLogin}
@@ -83,7 +83,7 @@ const SharedCake: React.FC<MyCakeProps> = ({ ownerId, data }) => {
         >
           내 케이크 보러가기
         </Button>
-      </Buttons>
+      </C.Buttons>
       <Modal open={open}>
         <span>편지를 작성하면 포인트를 얻을 수 있어요.{'\n'}로그인 하시겠어요?</span>
         <Button
@@ -117,25 +117,3 @@ const SharedCake: React.FC<MyCakeProps> = ({ ownerId, data }) => {
 };
 
 export default SharedCake;
-
-const Buttons = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 26px;
-  width: 100%;
-`
-const H1 = styled.h1`
-  background: linear-gradient(90deg, #FF3E3E 0%, #582599 100%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  text-align: center;
-  font-family: "sansita";
-  font-size: 2.125rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  text-transform: uppercase;
-  margin-top: 2rem;
-`;
-
diff --git a/apps/client/src/styles/CakeStyle.tsx b/apps/client/src/styles/CakeStyle.tsx
new file mode 100644
index 0000000..6a472e2
--- /dev/null
+++ b/apps/client/src/styles/CakeStyle.tsx
@@ -0,0 +1,124 @@
+import styled, { css } from 'styled-components';
+
+export const H1 = styled.h1`
+  background: linear-gradient(90deg, #FF3E3E 0%, #582599 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-align: center;
+  font-family: "sansita";
+  font-size: 2.125rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  text-transform: uppercase;
+  margin-top: 2rem;
+`;
+
+export const CakeContainer = styled.div`
+  margin-top: 50px;
+`;
+
+export const CakeInfoWrapper = styled.div<{ isMyCake?: boolean }>`
+  ${({ isMyCake }) =>
+    isMyCake === false &&
+    css`
+      pointer-events: none;
+    `}
+`;
+
+export const Buttons = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+  width: 100%;
+`
+/*케이크 페이지 헤더*/
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  width: 100%;
+  padding-bottom: 20px;
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+export const Title = styled.h1`
+  font-weight: bold;
+`;
+
+export const SubTitle = styled.h2`
+  margin-top: 0.5rem;
+`;
+
+export const Nickname = styled.p`
+  color: var(--orange-500);
+  display: inline;
+`;
+
+export const Phrase = styled.p`
+  display: inline;
+`;
+
+export const MyPageButton = styled.button`
+  width: 2.6rem;
+  height: 2.6rem;
+  border-radius: 50%;
+  border-width: 0;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  align-items: center;
+  background-color: transparent;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+/* RenderCake */
+
+export const ColorContainer = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  background-color: rgba(222, 222, 222, 0.5);
+  padding: 0.6rem;
+  border-radius: 0.5rem;
+`;
+
+export const ColorOption = styled.div<{ $color: string; selected: boolean }>`
+  display: flex;
+  flex-direction: row; 
+  justify-content: center;
+  align-items: center; 
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--${(props) => props.$color === 'white' ? 'white' : `${props.$color}-100`});
+  cursor: pointer;
+  transition: border 0.1s;
+
+  &:hover {
+    border: 5px solid var(--${(props) => props.$color === 'white' ? 'gray-400' : `${props.$color}-200`});
+  }
+  
+  @media (max-width: 429px) {
+    width: 2rem;
+    height: 2rem;
+    margin: 0.5rem;
+  }
+`;

From b83f65e00be4a3a3316fe716bb07df2e582f97ba Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Mon, 19 May 2025 17:26:46 +0900
Subject: [PATCH 06/10] =?UTF-8?q?chore:=20401=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=EC=B2=98=EB=A6=AC=20=EC=98=88=EC=99=B8=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/apis/axios.ts | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/apis/axios.ts b/apps/client/src/apis/axios.ts
index 3d6e249..ba13f43 100644
--- a/apps/client/src/apis/axios.ts
+++ b/apps/client/src/apis/axios.ts
@@ -1,4 +1,4 @@
-import axios, { AxiosError } from 'axios';
+import axios, { AxiosError } from "axios";
 
 const axiosInstance = axios.create({
   baseURL: process.env.SERVER_URL,
@@ -6,26 +6,29 @@ const axiosInstance = axios.create({
 });
 
 axiosInstance.interceptors.response.use(
-  response => {
+  (response) => {
     return response;
   },
-  async error => {
+  async (error) => {
     const customError = error as AxiosError;
     const axiosError = customError.response?.status as number;
 
-
     // 401 에러 응답 (인가 미들웨어에서 모든 토큰이 만료되었을때 401 리턴 -> 로그인 유도)
-    if ((axiosError === 401) && (window.location.pathname !== '/')) {
-      if (/^\/cake\/[^/]+$/.test(window.location.pathname)) {
+    if (axiosError === 401 && window.location.pathname !== "/") {
+      if (
+        /^\/cake\/[^/]+$/.test(window.location.pathname) ||
+        /^\/letter\/choose\/[^/]+$/.test(window.location.pathname) ||
+        /^\/letter\/create\/[^/]+$/.test(window.location.pathname)
+      ) {
         return Promise.reject(error);
       }
-      window.location.replace('/');
+      window.location.replace("/");
       return Promise.reject(error);
     }
 
     // 500 에러 응답
     if (axiosError === 500) {
-      console.log('서버 오류');
+      console.log("서버 오류");
       return Promise.reject(error);
     }
 
@@ -35,8 +38,7 @@ axiosInstance.interceptors.response.use(
     }
 
     return Promise.reject(error);
-  },
+  }
 );
 
-
 export default axiosInstance;

From c4265af66cc48f409cc5c5cfdc75c74b3b4c534f Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Mon, 19 May 2025 17:53:54 +0900
Subject: [PATCH 07/10] =?UTF-8?q?Refactor:=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=9B=B9=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=95=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/components/modal/Modal.tsx | 32 ++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/components/modal/Modal.tsx b/apps/client/src/components/modal/Modal.tsx
index ecb1208..e3d4bee 100644
--- a/apps/client/src/components/modal/Modal.tsx
+++ b/apps/client/src/components/modal/Modal.tsx
@@ -1,18 +1,46 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { ModalPortal } from '../../ModalPortal';
 
 const Modal = ({
   open,
+  onClose,
   children,
 }: {
   open: boolean;
+  onClose: () => void;
   children: React.ReactNode;
 }) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (open) {
+      document.addEventListener('keydown', handleKey);
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [open, onClose]);
+
   return (
     <ModalPortal>
       <Overlay open={open}>
-        <ModalContainer>{children}</ModalContainer>
+        <ModalContainer
+          ref={modalRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-title"
+          aria-describedby="modal-description"
+        >
+          {children}
+        </ModalContainer>
       </Overlay>
     </ModalPortal>
   );

From 3f069df5bf8df737d0201bd6103179772ba106f1 Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Mon, 19 May 2025 17:54:57 +0900
Subject: [PATCH 08/10] =?UTF-8?q?Chore:=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B3=80=EA=B2=BD=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20prop=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/components/cake/CakeInfo.tsx  | 16 ++++++---
 apps/client/src/components/cake/GridInfo.tsx  | 34 +++++++++++++------
 .../client/src/components/cake/SharedCake.tsx | 18 ++++------
 .../src/components/modal/LoginModal.tsx       |  2 +-
 .../src/components/modal/ShareUrlModal.tsx    |  8 ++---
 apps/client/src/pages/ChooseCandle.tsx        | 18 +++++-----
 6 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/apps/client/src/components/cake/CakeInfo.tsx b/apps/client/src/components/cake/CakeInfo.tsx
index cc07ced..8a091a8 100644
--- a/apps/client/src/components/cake/CakeInfo.tsx
+++ b/apps/client/src/components/cake/CakeInfo.tsx
@@ -21,7 +21,6 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useGetCakeLetters } from '#apis/cake/useGetCakeLetters.tsx';
 import { useGetLetter } from '#apis/letter/useGetLetter.tsx';
 
-
 interface CakeInfoProps {
   year: string;
   sheetColor: CakeColorType | null;
@@ -55,7 +54,11 @@ const CakeInfo: React.FC<CakeInfoProps> = ({
     totalPage: 1,
   });
   const queryClient = useQueryClient();
-  const { data: cakeLettersData } = useGetCakeLetters(ownerId!, year, pageData.currentPage);
+  const { data: cakeLettersData } = useGetCakeLetters(
+    ownerId!,
+    year,
+    pageData.currentPage
+  );
   const { data: letterData } = useGetLetter(selectedLetterId!);
 
   useEffect(() => {
@@ -68,7 +71,8 @@ const CakeInfo: React.FC<CakeInfoProps> = ({
       setCakeData(result.data);
       setPageData({
         currentPage: result.currentPage,
-        totalPage: result.totalPage === 0 ? result.totalPage + 1 : result.totalPage,
+        totalPage:
+          result.totalPage === 0 ? result.totalPage + 1 : result.totalPage,
       });
     }
   }, [cakeLettersData]);
@@ -128,8 +132,10 @@ const CakeInfo: React.FC<CakeInfoProps> = ({
           keyword={selectedItem?.keyword ?? ''}
         />
       )}
-      <Modal open={open}>
-        <span>편지 내용은 생일 이후에 확인할 수 있어요!{'\n'}두근두근...👉👈</span>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <span>
+          편지 내용은 생일 이후에 확인할 수 있어요!{'\n'}두근두근...👉👈
+        </span>
         <Button
           type="default"
           onClick={() => {
diff --git a/apps/client/src/components/cake/GridInfo.tsx b/apps/client/src/components/cake/GridInfo.tsx
index 4afa3d6..71b4436 100644
--- a/apps/client/src/components/cake/GridInfo.tsx
+++ b/apps/client/src/components/cake/GridInfo.tsx
@@ -1,4 +1,10 @@
-import React, { useState, CSSProperties, useRef, useEffect, useCallback } from 'react';
+import React, {
+  useState,
+  CSSProperties,
+  useRef,
+  useEffect,
+  useCallback,
+} from 'react';
 import { useParams } from 'react-router-dom';
 import * as G from '#styles/GridStyle.tsx';
 import { FixedSizeGrid as Grid } from 'react-window';
@@ -21,8 +27,10 @@ import Modal from '#components/modal/Modal.tsx';
 
 const GRID_PAGE = 24;
 
-
-const GridInfo: React.FC<{ year: string, handleTotalChange?: (total: number) => void }> = ({ year: init, handleTotalChange }) => {
+const GridInfo: React.FC<{
+  year: string;
+  handleTotalChange?: (total: number) => void;
+}> = ({ year: init, handleTotalChange }) => {
   const [year, setYear] = useState(init);
   const [cakeData, setCakeData] = useState<getCakeDataRes[]>([]);
   const [page, setPage] = useState(1);
@@ -39,13 +47,15 @@ const GridInfo: React.FC<{ year: string, handleTotalChange?: (total: number) =>
   const COL_WIDTH = isPC ? 155 : 130;
   const WIDTH = isPC ? 155 * 5 : 390;
 
-  const { data, isFetching } = year === 'all'
-    ? useGetMyLetters(page)
-    : useGetLetters(ownerId!, year, page);
+  const { data, isFetching } =
+    year === 'all'
+      ? useGetMyLetters(page)
+      : useGetLetters(ownerId!, year, page);
 
-  const { data: letterData } = year === 'all'
-    ? useGetAllLetter(selectedLetterId!)
-    : useGetLetter(selectedLetterId!);
+  const { data: letterData } =
+    year === 'all'
+      ? useGetAllLetter(selectedLetterId!)
+      : useGetLetter(selectedLetterId!);
 
   useEffect(() => {
     if (data) {
@@ -59,7 +69,9 @@ const GridInfo: React.FC<{ year: string, handleTotalChange?: (total: number) =>
         const result = getCakeLettersRes.parse(data);
         setNoData(false);
         setHasMore(result.data.length >= GRID_PAGE);
-        setCakeData((prev) => (page === 1 ? result.data : [...prev, ...result.data]));
+        setCakeData((prev) =>
+          page === 1 ? result.data : [...prev, ...result.data]
+        );
         handleTotalChange?.(result.totalPage);
       }
     }
@@ -202,7 +214,7 @@ const GridInfo: React.FC<{ year: string, handleTotalChange?: (total: number) =>
         candleImageUrl={selectedItem?.candleImageUrl ?? ''}
         keyword={selectedItem?.keyword ?? ''}
       />
-      <Modal open={open}>
+      <Modal open={open} onClose={() => setOpen(false)}>
         <span>편지 내용은 생일 이후에 확인할 수 있어요!</span>
         <Button
           type="default"
diff --git a/apps/client/src/components/cake/SharedCake.tsx b/apps/client/src/components/cake/SharedCake.tsx
index 507bc26..8a30b32 100644
--- a/apps/client/src/components/cake/SharedCake.tsx
+++ b/apps/client/src/components/cake/SharedCake.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import * as C from '#styles/CakeStyle.tsx'
+import * as C from '#styles/CakeStyle.tsx';
 
 import CakeHeader from '#components/cake/CakeHeader.tsx';
 import CakeInfo from '#components/cake/CakeInfo.tsx';
@@ -71,21 +71,17 @@ const SharedCake: React.FC<MyCakeProps> = ({ ownerId, data }) => {
         isMyCake={false}
       />
       <C.Buttons>
-        <Button
-          type="default"
-          onClick={handleCheckLogin}
-        >
+        <Button type="default" onClick={handleCheckLogin}>
           케이크 꾸며주기
         </Button>
-        <Button
-          type="default"
-          onClick={handleNavigateToMyCake}
-        >
+        <Button type="default" onClick={handleNavigateToMyCake}>
           내 케이크 보러가기
         </Button>
       </C.Buttons>
-      <Modal open={open}>
-        <span>편지를 작성하면 포인트를 얻을 수 있어요.{'\n'}로그인 하시겠어요?</span>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <span>
+          편지를 작성하면 포인트를 얻을 수 있어요.{'\n'}로그인 하시겠어요?
+        </span>
         <Button
           type="default"
           onClick={() => {
diff --git a/apps/client/src/components/modal/LoginModal.tsx b/apps/client/src/components/modal/LoginModal.tsx
index 6217ee1..d4dc2d9 100644
--- a/apps/client/src/components/modal/LoginModal.tsx
+++ b/apps/client/src/components/modal/LoginModal.tsx
@@ -13,7 +13,7 @@ const LoginModal = ({
   const navigate = useNavigate();
 
   return (
-    <Modal open={open}>
+    <Modal open={open} onClose={handleOpen}>
       <span>로그인이 필요합니다.</span>
       <Button
         type="default"
diff --git a/apps/client/src/components/modal/ShareUrlModal.tsx b/apps/client/src/components/modal/ShareUrlModal.tsx
index baa2cfb..263c74c 100644
--- a/apps/client/src/components/modal/ShareUrlModal.tsx
+++ b/apps/client/src/components/modal/ShareUrlModal.tsx
@@ -30,7 +30,7 @@ function kakaoShare(nickname: string) {
 
 function facebookShare(nickname: string) {
   window.open(
-    `https://www.facebook.com/sharer/sharer.php?u=${window.location.href}&title=${nickname}님의 케이크`,
+    `https://www.facebook.com/sharer/sharer.php?u=${window.location.href}&title=${nickname}님의 케이크`
   );
 }
 
@@ -50,7 +50,7 @@ const ShareUrlModal = ({
   }, []);
 
   return (
-    <Modal open={open}>
+    <Modal open={open} onClose={handleOpen}>
       <ShareBox>
         <h3>내 케이크 공유하기</h3>
         <div>
@@ -64,7 +64,7 @@ const ShareUrlModal = ({
             <LinkIcon width={'3rem'} height={'3rem'} />
           </IconButton>
         </div>
-        <Button type="default" onClick={handleOpen} >
+        <Button type="default" onClick={handleOpen}>
           닫기
         </Button>
       </ShareBox>
@@ -87,4 +87,4 @@ const ShareBox = styled.div`
   justify-content: center;
   align-items: center;
   gap: 24px;
-`
+`;
diff --git a/apps/client/src/pages/ChooseCandle.tsx b/apps/client/src/pages/ChooseCandle.tsx
index 395ee3c..5c138e8 100644
--- a/apps/client/src/pages/ChooseCandle.tsx
+++ b/apps/client/src/pages/ChooseCandle.tsx
@@ -48,7 +48,7 @@ const ChooseCandle = () => {
     try {
       // 선택한 장식초 정보 가져오기
       const candleResponse = await axiosInstance.get<CandleType>(
-        `/candle/${candleId}`,
+        `/candle/${candleId}`
       );
       if (candleResponse.status === 200) {
         const data = CandleType.parse(candleResponse.data);
@@ -118,7 +118,7 @@ const ChooseCandle = () => {
                 if (candle.point === 0) {
                   // 무료 장식초: 편지 페이지로 이동
                   navigate(
-                    `/letter/create/${ownerId}?candleId=${candle.candleId}`,
+                    `/letter/create/${ownerId}?candleId=${candle.candleId}`
                   );
                 } else {
                   // 유료 장식초: 결제 혹은 로그인 유도 모달 띄우기
@@ -135,7 +135,7 @@ const ChooseCandle = () => {
             </CandleButton>
           ))}
         </CandleContainer>
-        <Modal open={openBuy}>
+        <Modal open={openBuy} onClose={handleOpenBuy}>
           <img
             style={{ width: '5rem', height: '5rem' }}
             src={candle?.imageUrl}
@@ -155,11 +155,7 @@ const ChooseCandle = () => {
               gap: '1rem',
             }}
           >
-            <Button
-              type="gray"
-              size="large"
-              onClick={handleOpenBuy}
-            >
+            <Button type="gray" size="large" onClick={handleOpenBuy}>
               취소
             </Button>
             <Button
@@ -174,7 +170,7 @@ const ChooseCandle = () => {
             </Button>
           </div>
         </Modal>
-        <Modal open={openSuccess}>
+        <Modal open={openSuccess} onClose={() => setOpenSuccess(false)}>
           <img
             style={{ width: '5rem', height: '5rem' }}
             src={candle?.imageUrl}
@@ -185,7 +181,9 @@ const ChooseCandle = () => {
           <Button
             type="default"
             onClick={() => {
-              navigate(`/letter/create/${ownerId}?candleId=${candle?.candleId}`);
+              navigate(
+                `/letter/create/${ownerId}?candleId=${candle?.candleId}`
+              );
             }}
           >
             확인

From 62d2a4752837641e808f4596540b35cea13355a7 Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Mon, 19 May 2025 17:55:28 +0900
Subject: [PATCH 09/10] =?UTF-8?q?Chore:=20=ED=94=84=EB=A6=AC=ED=8B=B0?=
 =?UTF-8?q?=EC=96=B4=20=EA=B4=80=EB=A0=A8=20=EC=98=A4=EB=A5=98=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json          |  8 ++------
 packages/eslint-config/base.js | 22 +++++++++++-----------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c1c068c..1dc93b2 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -14,13 +14,9 @@
   ],
   "eslint.workingDirectories": [
     {
-      "mode": "auto",
+      "mode": "auto"
     }
   ],
-  "cSpell.words": [
-    "kakao",
-    "signup",
-    "webp"
-  ],
+  "cSpell.words": ["kakao", "signup", "webp"],
   "editor.tabSize": 2
 }
diff --git a/packages/eslint-config/base.js b/packages/eslint-config/base.js
index 23d5c5d..9e82be0 100644
--- a/packages/eslint-config/base.js
+++ b/packages/eslint-config/base.js
@@ -2,47 +2,47 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:prettier/recommended",
-    //"plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-type-checked",
     "plugin:@typescript-eslint/stylistic-type-checked",
     "plugin:@typescript-eslint/strict-type-checked",
-    "plugin:sonarjs/recommended-legacy"
+    "plugin:sonarjs/recommended-legacy",
   ],
   parser: "@typescript-eslint/parser",
   rules: {
-    "quotes": ["error", "single"],
+    quotes: ["error", "single"],
     "prettier/prettier": [
       "error",
       {
         endOfLine: "auto",
-        singleQuote: true
-      }
+        singleQuote: true,
+      },
     ],
     "@typescript-eslint/naming-convention": [
       "error",
       {
-        selector: "typeAlias",  // 타입선언
+        selector: "typeAlias", // 타입선언
         format: ["camelCase", "PascalCase"],
       },
       {
-        selector: "memberLike",  // Property 멤버
+        selector: "memberLike", // Property 멤버
         format: ["camelCase"],
       },
       {
-        selector: "function",  // function
+        selector: "function", // function
         format: ["camelCase"],
       },
       {
-        selector: "variable",  // 변수
+        selector: "variable", // 변수
         format: ["camelCase", "PascalCase", "UPPER_CASE"],
       },
       {
-        selector: "parameter",  // 파라미터
+        selector: "parameter", // 파라미터
         format: ["camelCase"],
         leadingUnderscore: "allow",
       },
       {
-        selector: "enumMember",  // enum
+        selector: "enumMember", // enum
         format: ["UPPER_CASE"],
       },
     ],

From d332e64bfbf8e6b2e9d34a7a1c155b5ef852e9fd Mon Sep 17 00:00:00 2001
From: kyr4601 <jane4545@naver.com>
Date: Mon, 19 May 2025 18:04:49 +0900
Subject: [PATCH 10/10] =?UTF-8?q?chore:=20=EC=8A=A4=ED=81=AC=EB=A6=B0?=
 =?UTF-8?q?=EB=A6=AC=EB=8D=94=20=EC=A0=81=EC=9A=A9=EC=9D=84=20=EC=9C=84?=
 =?UTF-8?q?=ED=95=9C=20id=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/client/src/components/cake/CakeInfo.tsx       | 2 +-
 apps/client/src/components/cake/GridInfo.tsx       | 4 +++-
 apps/client/src/components/cake/SharedCake.tsx     | 2 +-
 apps/client/src/components/modal/LoginModal.tsx    | 2 +-
 apps/client/src/components/modal/ShareUrlModal.tsx | 4 ++--
 apps/client/src/pages/ChooseCandle.tsx             | 8 ++++----
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/components/cake/CakeInfo.tsx b/apps/client/src/components/cake/CakeInfo.tsx
index 8a091a8..2f97461 100644
--- a/apps/client/src/components/cake/CakeInfo.tsx
+++ b/apps/client/src/components/cake/CakeInfo.tsx
@@ -133,7 +133,7 @@ const CakeInfo: React.FC<CakeInfoProps> = ({
         />
       )}
       <Modal open={open} onClose={() => setOpen(false)}>
-        <span>
+        <span id="modal-description">
           편지 내용은 생일 이후에 확인할 수 있어요!{'\n'}두근두근...👉👈
         </span>
         <Button
diff --git a/apps/client/src/components/cake/GridInfo.tsx b/apps/client/src/components/cake/GridInfo.tsx
index 71b4436..cdcac11 100644
--- a/apps/client/src/components/cake/GridInfo.tsx
+++ b/apps/client/src/components/cake/GridInfo.tsx
@@ -215,7 +215,9 @@ const GridInfo: React.FC<{
         keyword={selectedItem?.keyword ?? ''}
       />
       <Modal open={open} onClose={() => setOpen(false)}>
-        <span>편지 내용은 생일 이후에 확인할 수 있어요!</span>
+        <span id="modal-description">
+          편지 내용은 생일 이후에 확인할 수 있어요!
+        </span>
         <Button
           type="default"
           onClick={() => {
diff --git a/apps/client/src/components/cake/SharedCake.tsx b/apps/client/src/components/cake/SharedCake.tsx
index 8a30b32..6486cef 100644
--- a/apps/client/src/components/cake/SharedCake.tsx
+++ b/apps/client/src/components/cake/SharedCake.tsx
@@ -79,7 +79,7 @@ const SharedCake: React.FC<MyCakeProps> = ({ ownerId, data }) => {
         </Button>
       </C.Buttons>
       <Modal open={open} onClose={() => setOpen(false)}>
-        <span>
+        <span id="modal-description">
           편지를 작성하면 포인트를 얻을 수 있어요.{'\n'}로그인 하시겠어요?
         </span>
         <Button
diff --git a/apps/client/src/components/modal/LoginModal.tsx b/apps/client/src/components/modal/LoginModal.tsx
index d4dc2d9..4a114a2 100644
--- a/apps/client/src/components/modal/LoginModal.tsx
+++ b/apps/client/src/components/modal/LoginModal.tsx
@@ -14,7 +14,7 @@ const LoginModal = ({
 
   return (
     <Modal open={open} onClose={handleOpen}>
-      <span>로그인이 필요합니다.</span>
+      <span id="modal-title">로그인이 필요합니다.</span>
       <Button
         type="default"
         onClick={() => {
diff --git a/apps/client/src/components/modal/ShareUrlModal.tsx b/apps/client/src/components/modal/ShareUrlModal.tsx
index 263c74c..572c37a 100644
--- a/apps/client/src/components/modal/ShareUrlModal.tsx
+++ b/apps/client/src/components/modal/ShareUrlModal.tsx
@@ -52,8 +52,8 @@ const ShareUrlModal = ({
   return (
     <Modal open={open} onClose={handleOpen}>
       <ShareBox>
-        <h3>내 케이크 공유하기</h3>
-        <div>
+        <h3 id="modal-title">내 케이크 공유하기</h3>
+        <div id="modal-description">
           <IconButton onClick={() => kakaoShare(nickname)}>
             <KakaoLogoIcon width={'3rem'} height={'3rem'} />
           </IconButton>
diff --git a/apps/client/src/pages/ChooseCandle.tsx b/apps/client/src/pages/ChooseCandle.tsx
index 5c138e8..f7cc477 100644
--- a/apps/client/src/pages/ChooseCandle.tsx
+++ b/apps/client/src/pages/ChooseCandle.tsx
@@ -141,9 +141,9 @@ const ChooseCandle = () => {
             src={candle?.imageUrl}
             alt={candle?.candleId.toString()}
           />
-          <h3>해당 장식초를 구매하시겠습니까?</h3>
+          <h3 id="modal-title">해당 장식초를 구매하시겠습니까?</h3>
           <span>남은 포인트: {userPoint}P</span>
-          <span>결제 포인트: {candle?.point}P</span>
+          <span id="modal-description">결제 포인트: {candle?.point}P</span>
           {!isEnoughPoint && (
             <span style={{ color: 'red' }}>포인트가 부족합니다.</span>
           )}
@@ -176,8 +176,8 @@ const ChooseCandle = () => {
             src={candle?.imageUrl}
             alt={candle?.candleId.toString()}
           />
-          <h3>장식초 구매가 완료되었습니다.</h3>
-          <span>남은 포인트: {userPoint}P</span>
+          <h3 id="modal-title">장식초 구매가 완료되었습니다.</h3>
+          <span id="modal-description">남은 포인트: {userPoint}P</span>
           <Button
             type="default"
             onClick={() => {