hotfix: 일부 오류 수정 (#12)

username 관련 오류 및 SSR 렌더린 관련 오류로 추정되는 오류 수정

Author: six-standard

src/app/(with-tracker)/(auth-required)/layout.tsx

@@ -3,7 +3,6 @@ import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 import { cookies } from 'next/headers';
 import { Header } from '@/components';
 import { PATHS } from '@/constants';
-import { getCookieForAuth } from '@/utils/cookieUtil';
 import { me } from '@/apis';
 import { getQueryClient } from '@/utils/queryUtil';
 
@@ -17,7 +16,7 @@ export default async function Layout({ children }: IProp) {
   await client.prefetchQuery({
     queryKey: [PATHS.ME],
     queryFn: async () =>
-      await me(getCookieForAuth(cookies, ['access_token', 'refresh_token'])),
+      await me({ headers: { Cookie: cookies().toString() } }),
   });
 
   return (

src/app/(with-tracker)/(auth-required)/main/page.tsx

@@ -3,7 +3,6 @@ import { Metadata } from 'next';
 import { cookies } from 'next/headers';
 import { PATHS } from '@/constants';
 import { postList, postSummary } from '@/apis';
-import { getCookieForAuth } from '@/utils/cookieUtil';
 import { getQueryClient } from '@/utils/queryUtil';
 import { Content } from './Content';
 
@@ -26,7 +25,7 @@ export default async function Page({ searchParams }: IProp) {
     queryKey: [PATHS.POSTS, [searchParams.asc, searchParams.sort]],
     queryFn: async () =>
       await postList(
-        getCookieForAuth(cookies, ['access_token', 'refresh_token']),
+        { headers: { Cookie: cookies().toString() } },
         {
           asc: searchParams.asc === 'true',
           sort: searchParams.sort || '',
@@ -38,9 +37,7 @@ export default async function Page({ searchParams }: IProp) {
   await client.prefetchQuery({
     queryKey: [PATHS.SUMMARY],
     queryFn: async () =>
-      await postSummary(
-        getCookieForAuth(cookies, ['access_token', 'refresh_token']),
-      ),
+      await postSummary({ headers: { Cookie: cookies().toString() } }),
   });
 
   return (

src/components/auth-required/main/Section/Graph.tsx

@@ -12,13 +12,13 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 import { COLORS, PATHS, SCREENS } from '@/constants';
 import { Dropdown, Input } from '@/components';
 import { useResponsive } from '@/hooks';
 import { postDetail } from '@/apis';
-import { PostDetailValue, PostSummaryDto } from '@/types';
+import { PostDetailValue } from '@/types';
 
 ChartJS.register(
   CategoryScale,
@@ -47,14 +47,6 @@ interface IProp {
 
 export const Graph = ({ id, releasedAt }: IProp) => {
   const width = useResponsive();
-  const client = useQueryClient();
-  const maxDate = useMemo(
-    () =>
-      (
-        client.getQueryData([PATHS.SUMMARY]) as PostSummaryDto
-      )?.stats.lastUpdatedDate.split('T')[0],
-    [],
-  );
 
   const isMBI = width < SCREENS.MBI;
 
@@ -90,7 +82,6 @@ export const Graph = ({ id, releasedAt }: IProp) => {
           form="SMALL"
           value={type.start}
           min={releasedAt.split('T')[0]}
-          max={maxDate}
           onChange={(e) => setType({ ...type, start: e.target.value })}
           placeholder="시작 날짜"
           type="date"
@@ -101,7 +92,6 @@ export const Graph = ({ id, releasedAt }: IProp) => {
           form="SMALL"
           value={type.end}
           min={type.start ? type.start : releasedAt.split('T')[0]}
-          max={maxDate}
           onChange={(e) => setType({ ...type, end: e.target.value })}
           placeholder="종료 날짜"
           type="date"

src/components/auth-required/main/Section/index.tsx

@@ -11,10 +11,10 @@ import { Graph } from './Graph';
 
 export const Section = (p: PostType) => {
   const [open, setOpen] = useState(false);
-
   const client = useQueryClient();
 
-  const { username } = client.getQueryData([PATHS.ME]) as UserDto;
+  const username = (client.getQueryData([PATHS.ME]) as UserDto)?.username;
+  const url = `${process.env.NEXT_PUBLIC_VELOG_URL}/@${username || ''}/${p.slug}`;
 
   return (
     <section className="flex flex-col w-full h-fit relative">
@@ -31,9 +31,7 @@ export const Section = (p: PostType) => {
             title="해당 글로 바로가기"
             onClick={(e) => {
               e.stopPropagation();
-              window.open(
-                `${process.env.NEXT_PUBLIC_VELOG_URL}/@${username}/${p.slug}`,
-              );
+              window.open(url);
             }}
           >
             <Icon name="Shortcut" color="#ECECEC" size={20} />