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/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/client/src/apis/axios.ts b/apps/client/src/apis/axios.ts
index 7844298..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,22 +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 에러 응답
-    if (axiosError === 401) {
+    // 401 에러 응답 (인가 미들웨어에서 모든 토큰이 만료되었을때 401 리턴 -> 로그인 유도)
+    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("/");
       return Promise.reject(error);
     }
 
     // 500 에러 응답
     if (axiosError === 500) {
-      console.log('서버 오류');
+      console.log("서버 오류");
       return Promise.reject(error);
     }
 
@@ -30,10 +37,8 @@ axiosInstance.interceptors.response.use(
       return Promise.reject(error);
     }
 
-
     return Promise.reject(error);
-  },
+  }
 );
 
-
 export default axiosInstance;
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,
   })
 }
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..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.h1`
-  color: var(--orange-500);
-  display: inline;
-`;
-
-const Phrase = styled.h1`
-  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 width={'100%'} height={'100%'} viewBox="0 0 31 38" />)}
-          </MyPageButton>
+            {!isPC && (<PersonIcon viewBox="0 0 31 38" />)}
+          </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..2f97461 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,17 @@ 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 +28,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,
@@ -41,13 +54,16 @@ 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(() => {
-    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 {
@@ -55,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]);
@@ -84,32 +101,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}
@@ -125,8 +132,10 @@ const CakeInfo: React.FC<CakeInfoProps> = ({
           keyword={selectedItem?.keyword ?? ''}
         />
       )}
-      <Modal open={open}>
-        <span>편지 내용은 생일 이후에 확인할 수 있어요!{'\n'}두근두근...👉👈</span>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <span id="modal-description">
+          편지 내용은 생일 이후에 확인할 수 있어요!{'\n'}두근두근...👉👈
+        </span>
         <Button
           type="default"
           onClick={() => {
@@ -136,20 +145,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/GridInfo.tsx b/apps/client/src/components/cake/GridInfo.tsx
index 4afa3d6..cdcac11 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,8 +214,10 @@ const GridInfo: React.FC<{ year: string, handleTotalChange?: (total: number) =>
         candleImageUrl={selectedItem?.candleImageUrl ?? ''}
         keyword={selectedItem?.keyword ?? ''}
       />
-      <Modal open={open}>
-        <span>편지 내용은 생일 이후에 확인할 수 있어요!</span>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <span id="modal-description">
+          편지 내용은 생일 이후에 확인할 수 있어요!
+        </span>
         <Button
           type="default"
           onClick={() => {
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..6486cef 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,29 +63,25 @@ 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>
-        <Button
-          type="default"
-          onClick={handleCheckLogin}
-        >
+      <C.Buttons>
+        <Button type="default" onClick={handleCheckLogin}>
           케이크 꾸며주기
         </Button>
-        <Button
-          type="default"
-          onClick={handleNavigateToMyCake}
-        >
+        <Button type="default" onClick={handleNavigateToMyCake}>
           내 케이크 보러가기
         </Button>
-      </Buttons>
-      <Modal open={open}>
-        <span>편지를 작성하면 포인트를 얻을 수 있어요.{'\n'}로그인 하시겠어요?</span>
+      </C.Buttons>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <span id="modal-description">
+          편지를 작성하면 포인트를 얻을 수 있어요.{'\n'}로그인 하시겠어요?
+        </span>
         <Button
           type="default"
           onClick={() => {
@@ -117,25 +113,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/components/modal/LoginModal.tsx b/apps/client/src/components/modal/LoginModal.tsx
index 6217ee1..4a114a2 100644
--- a/apps/client/src/components/modal/LoginModal.tsx
+++ b/apps/client/src/components/modal/LoginModal.tsx
@@ -13,8 +13,8 @@ const LoginModal = ({
   const navigate = useNavigate();
 
   return (
-    <Modal open={open}>
-      <span>로그인이 필요합니다.</span>
+    <Modal open={open} onClose={handleOpen}>
+      <span id="modal-title">로그인이 필요합니다.</span>
       <Button
         type="default"
         onClick={() => {
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>
   );
diff --git a/apps/client/src/components/modal/ShareUrlModal.tsx b/apps/client/src/components/modal/ShareUrlModal.tsx
index baa2cfb..572c37a 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,10 +50,10 @@ const ShareUrlModal = ({
   }, []);
 
   return (
-    <Modal open={open}>
+    <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>
@@ -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..f7cc477 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,15 +135,15 @@ const ChooseCandle = () => {
             </CandleButton>
           ))}
         </CandleContainer>
-        <Modal open={openBuy}>
+        <Modal open={openBuy} onClose={handleOpenBuy}>
           <img
             style={{ width: '5rem', height: '5rem' }}
             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>
           )}
@@ -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,18 +170,20 @@ const ChooseCandle = () => {
             </Button>
           </div>
         </Modal>
-        <Modal open={openSuccess}>
+        <Modal open={openSuccess} onClose={() => setOpenSuccess(false)}>
           <img
             style={{ width: '5rem', height: '5rem' }}
             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={() => {
-              navigate(`/letter/create/${ownerId}?candleId=${candle?.candleId}`);
+              navigate(
+                `/letter/create/${ownerId}?candleId=${candle?.candleId}`
+              );
             }}
           >
             확인
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;
+  }
+`;
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();
 }
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"],
       },
     ],