fix: [LINKER-136] 타임라인 서버컴포넌트로 변경

packages/lds/src/Calendar/Calendar.tsx

@@ -90,8 +90,10 @@ const TileContent = ({
   });
 
   data.forEach((item) => {
+    const key = item instanceof Date ? item.toString() : `${item}`;
+
     if (format(item, 'yyyy-MM-dd') === format(date, 'yyyy-MM-dd')) {
-      html.push(<div key={date.getDate()} className={dot}></div>);
+      html.push(<div key={key} className={dot}></div>);
     }
   });
 

services/web/src/app/my/contact/Contact.css.ts

@@ -11,3 +11,11 @@ export const wrapper = style({
 export const searchInputWrapper = style({
   marginTop: '1.9rem',
 });
+
+export const nonLoginWrapper = style({
+  width: '100%',
+  height: '30rem',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

services/web/src/app/my/contact/page.tsx

@@ -1,14 +1,33 @@
 import { getContact, getContactBookMarks } from '@api/contacts';
+import { Txt } from '@linker/lds';
+import { colors } from '@linker/styles';
+
+import { getTokens } from '@utils/token/server';
 
 import Contact from './Contact';
+import { nonLoginWrapper } from './Contact.css';
 
 export default async function ContactPage() {
+  const { accessToken } = getTokens();
   const contactData = await getContact();
   const bookmarkData = await getContactBookMarks();
 
   return (
     <div>
-      <Contact defaultContact={contactData} bookmarksContact={bookmarkData} />
+      {accessToken == null ? (
+        <article className={nonLoginWrapper}>
+          <section className={nonLoginWrapper}>
+            <Txt typography="p1" color={colors.gray700} fontWeight="regular">
+              예정된 일정이 없습니다.
+            </Txt>
+            <Txt typography="p1" color={colors.gray700} fontWeight="regular">
+              일정을 추가해주세요.
+            </Txt>
+          </section>
+        </article>
+      ) : (
+        <Contact defaultContact={contactData} bookmarksContact={bookmarkData} />
+      )}
     </div>
   );
 }

services/web/src/app/my/timeline/Timeline.tsx

@@ -0,0 +1,24 @@
+import TimelineDefault from './component/TimelineDefault/TimelineDefault';
+import TimelineNull from './component/TimelineNull/TimelineNull';
+import { getPrevTimeline, getUpcomingTimeline } from './hooks/useGetNearSchedule';
+
+export default async function Timeline() {
+  const prevData = await getPrevTimeline();
+  const upcomingData = await getUpcomingTimeline();
+  const concatSchedules = [];
+
+  concatSchedules.push(prevData.schedules);
+  concatSchedules.push(upcomingData.schedules);
+
+  const uniqueSchedules = [...new Set(concatSchedules)];
+
+  return (
+    <>
+      {uniqueSchedules.length === 0 ? (
+        <TimelineNull />
+      ) : (
+        <TimelineDefault upComingData={upcomingData} prevData={prevData} />
+      )}
+    </>
+  );
+}

services/web/src/app/my/timeline/component/TimelineDefault/TimelineDefault.tsx

@@ -9,50 +9,67 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 import { timelineItemWrapper, timelineMonthWrapper } from './TimelineDefault.css';
+import { useGetPrevSchedule, useGetUpComingSchedule } from '../../hooks/useGetNearSchedule';
 import { useGetSearchSchedule } from '../../hooks/useGetSearchSchedule';
 import { selectDateAtom } from '../../stores/store';
-import { TimelineItemProps } from '../../types/schedule';
+import { GetTimelineRes, TimelineItemProps } from '../../types/schedule';
 import TimelineItem from '../TimelineItem/TimelineItem';
 
 interface TimelineDefaultProps {
-  concatSchedules: TimelineItemProps[];
+  prevData: GetTimelineRes;
+  upComingData: GetTimelineRes;
 }
 
-const TimelineDefault = ({ concatSchedules }: TimelineDefaultProps) => {
+const TimelineDefault = ({ prevData, upComingData }: TimelineDefaultProps) => {
   const router = useRouter();
   const setAtomDate = useSetAtom(selectDateAtom);
+  const { prevTimelineData } = useGetPrevSchedule(prevData);
+  const { upcomingTimelineData } = useGetUpComingSchedule(upComingData);
+  const [schedules, setSchedules] = useState<TimelineItemProps[]>();
+
+  useEffect(() => {
+    const concatSchedules = [];
+
+    concatSchedules.push(...prevTimelineData.schedules);
+    concatSchedules.push(...upcomingTimelineData.schedules);
+
+    const uniqueSchedules = [...new Set(concatSchedules)];
+
+    setSchedules(uniqueSchedules);
+  }, []);
 
   const [selectDate, setSelectDate] = useState(false);
   const [date, setDate] = useState(new Date());
-  const [prevYear, setPrevYear] = useState<TimelineItemProps[]>();
-  const [nextYear, setNextYear] = useState<TimelineItemProps[]>();
+  // const [prevYear, setPrevYear] = useState<TimelineItemProps[]>();
+  // const [nextYear, setNextYear] = useState<TimelineItemProps[]>();
   const [dropdownClick, setDropdownClick] = useState(-1);
   const [calendarDotData, setCalendarDotData] = useState<Array<Date | string>>([]);
 
-  const startDateYear = format(concatSchedules[0].startDateTime, 'yyyy');
+  // const startDateYear = format(uniqueSchedules[0][0].startDateTime, 'yyyy');
   const firstDayOfMonth = format(startOfMonth(date), 'yyyy-MM-dd 00:00:00');
   const lastDayOfMonth = format(endOfMonth(date), 'yyyy-MM-dd 23:59:59');
   const { data } = useGetSearchSchedule(firstDayOfMonth, lastDayOfMonth, 32);
 
-  // 받아온 데이터들 중 다른 연도가 있는지
-  // 연도가 하나라도 다른게 판단이 되면 diffYear가 true가됨
-  const hasDifferentYear = concatSchedules.some((item) => {
-    const formattedYear = format(item.startDateTime, 'yyyy');
+  // // 받아온 데이터들 중 다른 연도가 있는지
+  // // 연도가 하나라도 다른게 판단이 되면 diffYear가 true가됨
+  // const hasDifferentYear = uniqueSchedules[0].some((item) => {
+  //   const formattedYear = format(item.startDateTime, 'yyyy');
 
-    return formattedYear === startDateYear;
-  });
-  // 연도가 다른 원소의 첫번째 인덱스를 리턴
-  const diffIdx = concatSchedules.findIndex((item, index) => {
-    return format(item.startDateTime, 'yyyy').toString() !== startDateYear.toString();
-  });
+  //   return formattedYear === startDateYear;
+  // });
+  // // 연도가 다른 원소의 첫번째 인덱스를 리턴
+  // const diffIdx = uniqueSchedules[0].findIndex((item, index) => {
+  //   return format(item.startDateTime, 'yyyy').toString() !== startDateYear.toString();
+  // });
 
-  useEffect(() => {
-    // prevYear에는 0부터 diffIdx-1까지의 원소 저장
-    setPrevYear(concatSchedules.slice(0, diffIdx));
+  // useEffect(() => {
+  //   // prevYear에는 0부터 diffIdx-1까지의 원소 저장
+  //   setPrevYear(uniqueSchedules[0].slice(0, diffIdx));
+
+  //   // nextYear에는 diffIdx부터 끝까지의 원소 저장
+  //   setNextYear(uniqueSchedules[0].slice(diffIdx));
+  // }, [diffIdx, hasDifferentYear, concatSchedules]);
 
-    // nextYear에는 diffIdx부터 끝까지의 원소 저장
-    setNextYear(concatSchedules.slice(diffIdx));
-  }, [diffIdx, hasDifferentYear, concatSchedules]);
   useEffect(() => {
     setAtomDate(format(date, 'yyyy-MM-dd'));
   }, [date, router, setAtomDate]);
@@ -84,7 +101,7 @@ const TimelineDefault = ({ concatSchedules }: TimelineDefaultProps) => {
       {/*특정 날짜를 선택하지 않은 경우 */}
 
       {/*연도가 다른 경우 */}
-      {!selectDate && hasDifferentYear === false && prevYear && nextYear && (
+      {/* {!selectDate && hasDifferentYear === false && prevYear && nextYear && (
         <div>
           <section className={timelineMonthWrapper}>
             <Txt typography="h7" fontWeight="bold" color={colors.black}>
@@ -133,35 +150,34 @@ const TimelineDefault = ({ concatSchedules }: TimelineDefaultProps) => {
             ))}
           </section>
         </div>
-      )}
+      )} */}
       {/*연도가 다르지 않은 경우 */}
-      {!selectDate && hasDifferentYear === true && (
-        <div>
-          <section className={timelineMonthWrapper}>
-            <Txt typography="h7" fontWeight="bold" color={colors.black}>
-              {format(date, 'M월')}
-            </Txt>
-          </section>
-          <section className={timelineItemWrapper}>
-            {concatSchedules.map((item) => (
-              <button key={item.scheduleId}>
-                <TimelineItem
-                  scheduleId={item.scheduleId}
-                  profileImgUrl={item.profileImgUrl}
-                  title={item.title}
-                  startDateTime={item.startDateTime}
-                  endDateTime={item.endDateTime}
-                  contacts={item.contacts}
-                  color={item.color}
-                  description={item.description}
-                  dropdownClick={dropdownClick}
-                  setDropdownClick={setDropdownClick}
-                />
-              </button>
-            ))}
-          </section>
-        </div>
-      )}
+
+      <div>
+        <section className={timelineMonthWrapper}>
+          <Txt typography="h7" fontWeight="bold" color={colors.black}>
+            {format(date, 'M월')}
+          </Txt>
+        </section>
+        <section className={timelineItemWrapper}>
+          {schedules?.map((item) => (
+            <button key={item.scheduleId}>
+              <TimelineItem
+                scheduleId={item.scheduleId}
+                profileImgUrl={item.profileImgUrl}
+                title={item.title}
+                startDateTime={item.startDateTime}
+                endDateTime={item.endDateTime}
+                contacts={item.contacts}
+                color={item.color}
+                description={item.description}
+                dropdownClick={dropdownClick}
+                setDropdownClick={setDropdownClick}
+              />
+            </button>
+          ))}
+        </section>
+      </div>
     </>
   );
 };

services/web/src/app/my/timeline/component/TimelineNull/TimelineNull.tsx

@@ -1,8 +1,7 @@
 'use client';
 
-import { Calendar, Txt } from '@linker/lds';
+import { Calendar, Txt, Icon } from '@linker/lds';
 import { colors } from '@linker/styles';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
@@ -33,12 +32,7 @@ const TimelineNull = () => {
       />
       <article className={container}>
         <section className={wrapper}>
-          <Image
-            src={'https://static.im-linker.com/images/Subtract.svg'}
-            width={48}
-            height={48}
-            alt={'subtract'}
-          />
+          <Icon name="subtract" size={48} />
           <Txt typography="p1" color={colors.gray700} fontWeight="regular">
             예정된 일정이 없습니다.
           </Txt>

services/web/src/app/my/timeline/hooks/useGetNearSchedule.ts

@@ -1,31 +1,36 @@
-'use client';
-import { kyClient } from '@linker/ky';
+import { ky } from '@linker/ky';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { GetTimelineRes } from '../types/schedule';
 
-const getPrevTimeline = () => {
-  const res = kyClient.get<GetTimelineRes>('/v1/schedules/near-term?limit=32&type=PREV');
+export const getPrevTimeline = () => {
+  const res = ky.get<GetTimelineRes>('/v1/schedules/near-term?limit=32&type=PREV');
 
   return res;
 };
-const getUpcomingTimeline = () => {
-  const res = kyClient.get<GetTimelineRes>('/v1/schedules/near-term?limit=32&type=UPCOMING');
+export const getUpcomingTimeline = () => {
+  const res = ky.get<GetTimelineRes>('/v1/schedules/near-term?limit=32&type=UPCOMING');
 
   return res;
 };
 
-const useGetPrevSchedule = () => {
-  return useSuspenseQuery<GetTimelineRes>({
+const useGetPrevSchedule = (prevData: GetTimelineRes) => {
+  const { data: prevTimelineData } = useSuspenseQuery<GetTimelineRes>({
     queryKey: useGetPrevSchedule.getKey(),
     queryFn: () => getPrevTimeline(),
+    initialData: prevData,
   });
+
+  return { prevTimelineData };
 };
-const useGetUpComingSchedule = () => {
-  return useSuspenseQuery<GetTimelineRes>({
+const useGetUpComingSchedule = (upcomingData: GetTimelineRes) => {
+  const { data: upcomingTimelineData } = useSuspenseQuery<GetTimelineRes>({
     queryKey: useGetUpComingSchedule.getKey(),
     queryFn: () => getUpcomingTimeline(),
+    initialData: upcomingData,
   });
+
+  return { upcomingTimelineData };
 };
 
 useGetPrevSchedule.getKey = () => {

services/web/src/app/my/timeline/page.tsx

@@ -1,26 +1,5 @@
-'use client';
-
-import TimelineDefault from './component/TimelineDefault/TimelineDefault';
-import TimelineNull from './component/TimelineNull/TimelineNull';
-import { useGetPrevSchedule, useGetUpComingSchedule } from './hooks/useGetNearSchedule';
+import Timeline from './Timeline';
 
 export default function TimelinePage() {
-  const { data: prevData } = useGetPrevSchedule();
-  const { data: upcomingData } = useGetUpComingSchedule();
-  const concatSchedules = [];
-
-  concatSchedules.push(prevData.schedules);
-  concatSchedules.push(upcomingData.schedules);
-
-  const uniqueSchedules = [...new Set(concatSchedules)];
-
-  return (
-    <>
-      {uniqueSchedules.length === 0 ? (
-        <TimelineNull />
-      ) : (
-        <TimelineDefault concatSchedules={uniqueSchedules[0]} />
-      )}
-    </>
-  );
+  return <Timeline />;
 }

services/web/src/app/my/timeline/[id]/page.tsx → services/web/src/app/my/timeline/search/page.tsx

@@ -1,11 +1,12 @@
 'use client';
 import { useAtomValue } from 'jotai';
+import { NextPage } from 'next';
 
 import TimelineSearch from '../component/TimelineSearch/TimelineSearch';
 import { useGetSearchSchedule } from '../hooks/useGetSearchSchedule';
 import { selectDateAtom } from '../stores/store';
 
-export default function TimelineSearchPage() {
+const TimelineSearchPage: NextPage = () => {
   const selectedDate = useAtomValue(selectDateAtom);
 
   const startTime = `${selectedDate} 00:00:00`;
@@ -14,4 +15,6 @@ export default function TimelineSearchPage() {
   const { data: selectedData } = useGetSearchSchedule(startTime, endTime, 32);
 
   return <TimelineSearch schedules={selectedData.schedules} />;
-}
+};
+
+export default TimelineSearchPage;