아이콘 크기 변경 오류를 해결한다

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);
 };

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,
   });
 }

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,
   })
 }

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>

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>
   );

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>

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();
 

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();
 }