Merge branch 'feature/#38-selfcare' into feature/path_refector

service/client/src/app/selfcare/Calendar.tsx

@@ -1,10 +1,155 @@
 import { Button, Chevron } from '@package/ui'
 import { useCalendar } from '@/hooks/useClandar'
+import { monthPurposes } from '@/apis/timeline/monthPurpose'
+import { useEffect, useState } from 'react'
+import { monthRoutineHistorys } from '@/apis/timeline/monthRoutineHistory'
+import { monthRoutines } from '@/apis/timeline/monthRoutine'
+
+interface T_Purpose {
+  title: string
+  content: string
+  startDate: string
+  endDate: string
+}
+
+interface T_RoutineHistory {
+  id: number
+  routine_name: string
+  exercise_info_list: {
+    pose: {
+      id: number
+      need_machine: boolean
+      name: string
+      simple_part: string[]
+      exact_part: string[]
+      thumbnail: string
+    }
+    repetitions: number
+    sets: number
+  }[]
+  date: string
+}
+
+type DayOfWeeks = 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY' | 'SUNDAY'
+
+type T_AllRoutine = {
+  userInfo: {
+    nickname: string
+    profileImage: string
+  }
+  routineList: Array<T_Routine>
+}
+
+interface T_Routine {
+  id: number
+  routine_name: string
+  exercise_info_response_list: {
+    pose: {
+      id: number
+      need_machine: boolean
+      name: string
+      simple_part: string[]
+      exact_part: string[]
+      thumbnail: string
+    }
+    repetitions: number
+    sets: number
+  }[]
+  day_of_weeks: DayOfWeeks[]
+  routine_status: {
+    is_archived: boolean
+    is_shared: boolean
+  }
+}
+
+const isSameDay = (today: number, routineDay: Array<DayOfWeeks>) => {
+  const days: Array<DayOfWeeks> = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY']
+  return routineDay.includes(days[today])
+}
+
+const isPast = (time: Date) => {
+  const now = new Date()
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0) > time
+}
+
+const changeUTCToKo = (date: Date) => {
+  const offset = 1000 * 60 * 60 * 9
+  return new Date(date.getTime() + offset)
+}
+
+const isIncludeTime = (startTime: Date, endTime: Date, today: Date) => {
+  return startTime.getTime() <= today.getTime() && today.getTime() <= endTime.getTime()
+}
 
 const Calendar = () => {
   const { weekCalendarList, changeMonth, nowDate, isToday } = useCalendar()
+  const [purposes, setPurposes] = useState<Array<T_Purpose>>()
+  const [routineHistorys, setRoutineHistorys] = useState<Array<T_RoutineHistory>>()
+  const [routines, setRoutines] = useState<T_AllRoutine>()
+
+  const getData = async () => {
+    monthPurposes(changeUTCToKo(nowDate).toISOString().slice(0, 10)).then(res => setPurposes(res))
+    monthRoutineHistorys(changeUTCToKo(weekCalendarList[0][0]).toISOString().slice(0, 10)).then(res =>
+      setRoutineHistorys(res)
+    )
+    monthRoutines().then(res => setRoutines(res))
+  }
+
+  const renderRoutineItem = (routine: T_Routine, day: Date) => {
+    if (!isPast(day) && isSameDay(day.getDay(), routine.day_of_weeks)) {
+      return <div className="w-full px-2 py-1 text-blue500 bg-gray50 rounded truncate">{routine.routine_name}</div>
+    }
+    return null
+  }
+
+  const renderHistoryItem = (routine: T_RoutineHistory, day: Date) => {
+    if (routine.date === changeUTCToKo(day).toISOString().slice(0, 10)) {
+      return <div className="w-full px-2 py-1 text-blue500 bg-gray50 rounded truncate">{routine.routine_name}</div>
+    }
+    return null
+  }
+
+  const renderPurposeItem = (purpose: T_Purpose, day: Date) => {
+    if (isIncludeTime(new Date(purpose.startDate), new Date(purpose.endDate), changeUTCToKo(day))) {
+      return <div className="w-full px-2 py-1 text-gray700 bg-gray50 rounded truncate">{purpose.title}</div>
+    }
+    return null
+  }
+
+  const renderItem = (day: Date) => {
+    let items = []
+
+    if (routines?.routineList?.length) {
+      items.push(...routines.routineList.map(routine => renderRoutineItem(routine, day)))
+    }
+
+    if (routineHistorys?.length) {
+      items.push(...routineHistorys.map(routine => renderHistoryItem(routine, day)))
+    }
+
+    if (purposes?.length) {
+      items.push(...purposes.map(purpose => renderPurposeItem(purpose, day)))
+    }
+
+    items = items.filter(item => item)
+
+    if (items.length > 3) {
+      return [
+        items[0],
+        items[1],
+        <div className="w-full px-2 py-1 text-gray700 bg-gray50 rounded truncate">{`+${items.length - 2}`}</div>,
+      ]
+    }
+
+    return items
+  }
+
+  useEffect(() => {
+    getData()
+  }, [nowDate])
+
   return (
-    <div className="flex flex-col gap-8 flex-1">
+    <div className="flex flex-col gap-8 flex-1 w-[1200px]">
       <div className="flex flex-col gap-3">
         <div className="flex gap-3 items-center">
           <span className="text-black text-titleMedium">
@@ -41,7 +186,10 @@ const Calendar = () => {
           {weekCalendarList.map((week: Date[], weekIdx: number) => (
             <div className="flex border-t border-gray50" key={`${week[0]}-${weekIdx}`}>
               {week.map((day: Date, dayIdx: number) => (
-                <div className="pt-2 px-2 pb-0.5 flex flex-1" key={`${day.getMonth()}-${day.getDate()}`}>
+                <div
+                  className="pt-2 px-2 pb-2 flex flex-1 flex-col gap-0.5 h-[126px]"
+                  key={`${day.getMonth()}-${day.getDate()}`}
+                >
                   <div
                     className={`w-6 h-6 flex justify-center items-center
                       text-${(weekIdx === 0 && day.getDate() > 7) || (weekIdx >= 4 && day.getDate() <= 7) ? (dayIdx === 0 ? 'red200' : 'gray200') : dayIdx === 0 ? 'red500' : 'black'}
@@ -50,14 +198,14 @@ const Calendar = () => {
                   >
                     {day.getDate()}
                   </div>
+                  {renderItem(day)}
                 </div>
               ))}
             </div>
           ))}
 
           {/* <div className="absolute top-[34px] w-full grid grid-cols-[repeat(7,_1fr_16px)] grid-rows-3 px-2 h-[92px] gap-y-0.5 pointer-events-none">
             <div className="w-full px-2 py-1 text-blue500 bg-gray50 rounded">하체 운동</div>
-            <div className="w-full px-2 py-1 text-blue500 bg-gray50 rounded truncate">하체 운동</div>
             <div className="w-full px-2 py-1 text-blue500 bg-gray50 rounded">하체 운동</div>
             <div className="w-full px-2 py-1 text-blue500 bg-gray50 rounded">하체 운동</div>
             <div className="w-full px-2 py-1 text-blue500 bg-gray50 rounded">하체 운동</div>

service/user/src/apis/timeline/monthPurpose.ts

@@ -0,0 +1,38 @@
+import { instance } from '../axios'
+
+interface T_Purpose {
+  title: string
+  content: string
+  startDate: string
+  endDate: string
+}
+
+export const monthPurposes = async (date: string) => {
+  return await instance
+    .get<Array<T_Purpose>>(`purposes/month/${date}`)
+    .then(res => res.data)
+    .catch((e): Array<T_Purpose> => {
+      console.error(
+        `%cAxios Error%c ${e.message}%c\n%O`,
+        'background:rgb(148,71,68);padding:4px 8px;border-radius:8px;font-weight:900;font-size:18px;',
+        'padding:40px 0;',
+        '',
+        e
+      )
+      // 이하는 더미데이터를 보내는 코드 입니다
+      return [
+        {
+          title: '타임라인 완성',
+          content: '타임라인을 완성해요',
+          startDate: '2024-03-22',
+          endDate: '2024-03-29',
+        },
+        {
+          title: '집에 도착',
+          content: '집에 무사히 도착해요',
+          startDate: '2024-03-22',
+          endDate: '2024-03-23',
+        },
+      ]
+    })
+}

service/user/src/apis/timeline/monthRoutine.ts

@@ -0,0 +1,97 @@
+import { instance } from '../axios'
+
+type DayOfWeeks = 'MONDAY' | 'TUESDAY' | 'WEDNESDAY' | 'THURSDAY' | 'FRIDAY' | 'SATURDAY' | 'SUNDAY'
+
+interface T_Routine {
+  userInfo: {
+    nickname: string
+    profileImage: string
+  }
+  routineList: {
+    id: number
+    routine_name: string
+    exercise_info_response_list: {
+      pose: {
+        id: number
+        need_machine: boolean
+        name: string
+        simple_part: string[]
+        exact_part: string[]
+        thumbnail: string
+      }
+      repetitions: number
+      sets: number
+    }[]
+    day_of_weeks: DayOfWeeks[]
+    routine_status: {
+      is_archived: boolean
+      is_shared: boolean
+    }
+  }[]
+}
+
+export const monthRoutines = async () => {
+  return await instance
+    .get<T_Routine>('routines/me/all')
+    .then(res => res.data)
+    .catch((e): T_Routine => {
+      console.error(e)
+
+      // 이하는 더미데이터를 보내는 코드입니다
+      return {
+        userInfo: {
+          nickname: '박지민',
+          profileImage: 'fileURL',
+        },
+        routineList: [
+          {
+            id: 1,
+            routine_name: '등 운동',
+            exercise_info_response_list: [
+              {
+                pose: {
+                  id: 1,
+                  need_machine: false,
+                  name: '어떤 등운동',
+                  simple_part: ['등'],
+                  exact_part: ['등 위쪽'],
+                  thumbnail: '썸네일',
+                },
+                repetitions: 20,
+                sets: 3,
+              },
+              {
+                pose: {
+                  id: 1,
+                  need_machine: false,
+                  name: '그런 등운동',
+                  simple_part: ['등'],
+                  exact_part: ['등 가운데'],
+                  thumbnail: '썸네일',
+                },
+                repetitions: 15,
+                sets: 5,
+              },
+              {
+                pose: {
+                  id: 1,
+                  need_machine: false,
+                  name: '저런 등운동',
+                  simple_part: ['등'],
+                  exact_part: ['등 아래'],
+                  thumbnail: '썸네일',
+                },
+                repetitions: 20,
+                sets: 5,
+              },
+            ],
+            day_of_weeks: ['MONDAY'],
+            routine_status: {
+              is_archived: true,
+              is_shared: true,
+            },
+          },
+        ],
+      }
+    })
+}