[Feat] 현황 full 기능 구현

src/apis/getQueryKey.ts

@@ -40,6 +40,9 @@ type QueryList = {
   feed: {
     memberId: number;
   };
+  missionSummaryList: {
+    date: string;
+  };
 };
 
 /**

src/apis/result.ts

@@ -0,0 +1,59 @@
+import getQueryKey from '@/apis/getQueryKey';
+import { MissionCategory, MissionStatus } from '@/apis/schema/mission';
+import { useQuery, type UseQueryOptions } from '@tanstack/react-query';
+
+interface MissionSummaryType {
+  missionId: number;
+  name: string;
+  category: MissionCategory;
+  visibility: string;
+  missionStatus: MissionStatus;
+}
+
+interface MissionSummaryListResponse {
+  missionAllCount: number;
+  missionCompleteCount: number;
+  missionNoneCount: number;
+  missionList: MissionSummaryType[];
+}
+
+const MissionSummaryListData: MissionSummaryListResponse = {
+  missionAllCount: 0,
+  missionCompleteCount: 0,
+  missionNoneCount: 0,
+  missionList: [
+    {
+      missionId: 1,
+      name: 'UX방법론 1챕터씩 공부하기!',
+      category: MissionCategory.STUDY,
+      visibility: 'ALL',
+      missionStatus: MissionStatus.COMPLETED,
+    },
+    {
+      missionId: 2,
+      name: '스쿼트하고 닭다리 되기!',
+      category: MissionCategory.STUDY,
+      visibility: 'ALL',
+      missionStatus: MissionStatus.NONE,
+    },
+  ],
+};
+
+const RESULT_API = {
+  getMissionSummaryList: async (_: string): Promise<MissionSummaryListResponse> => {
+    // // const { data } = await apiInstance.get(`/missions/summary-list?date=${date}`);
+    // const { data } = await apiInstance.get(`/missions/summary-list`);
+    // return data;
+    return MissionSummaryListData;
+  },
+};
+
+export default RESULT_API;
+
+export const useGetMissionSummaryList = (date: string, option?: UseQueryOptions<MissionSummaryListResponse>) => {
+  return useQuery<MissionSummaryListResponse>({
+    queryKey: getQueryKey('missionSummaryList', { date }),
+    queryFn: () => RESULT_API.getMissionSummaryList(date),
+    ...option,
+  });
+};

src/app/home/FollowList.tsx

@@ -56,11 +56,9 @@ export default FollowList;
 
 const containerCss = flex({
   overflowY: 'auto',
-  padding: '16px 0',
-  paddingBottom: '20px',
+  padding: '16px 16px 20px',
   gap: '12px',
   alignItems: 'stretch',
-  margin: '0 16px',
   _scrollbar: {
     display: 'none',
   },

src/app/home/ProfileItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type FollowDataState } from '@/app/page';
 import Thumbnail from '@/components/Thumbnail/Thumbnail';
+import { oneLineTextCss } from '@/constants/style/text';
 import { css, cx } from '@styled-system/css';
 
 interface Props {
@@ -29,6 +30,7 @@ function ProfileItem(props: Props) {
       <span
         className={cx(
           nameCss,
+          oneLineTextCss,
           css({
             color: props.selected ? 'text.primary' : 'text.tertiary',
           }),

src/app/result/OverallStatus/Calendar.tsx

@@ -0,0 +1,147 @@
+import CalendarItem from '@/app/result/OverallStatus/CalendarItem';
+import Icon from '@/components/Icon';
+import { WEEK_DAYS } from '@/components/MissionDetail/MissionCalender/MissionCalendar.constants';
+import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
+import useCalendar from '@/hooks/useCalendar';
+import { eventLogger } from '@/utils';
+import { css, cx } from '@styled-system/css';
+import dayjs, { type Dayjs } from 'dayjs';
+
+interface Props {
+  selectDate: Dayjs;
+  setSelectDate: (date: Dayjs) => void;
+}
+
+function MissionCalendar({ selectDate, setSelectDate }: Props) {
+  const currentData = dayjs();
+
+  const { date, monthCalendarData, onPrevMonth, onNextMonth, isCurrentMonth } = useCalendar({
+    currentData,
+    isQueryParams: true,
+  });
+
+  const currentYear = date.year();
+  const currentMonth = date.month() + 1;
+
+  const handlePrevMonth = () => {
+    eventLogger.logEvent(EVENT_LOG_CATEGORY.RESULT, EVENT_LOG_NAME.RESULT.CLICK_CALENDER_ARROW, {
+      direction: 'prev',
+    });
+    onPrevMonth();
+  };
+
+  const handleNextMonth = () => {
+    eventLogger.logEvent(EVENT_LOG_CATEGORY.RESULT, EVENT_LOG_NAME.RESULT.CLICK_CALENDER_ARROW, {
+      direction: 'next',
+    });
+    onNextMonth();
+  };
+
+  return (
+    <div>
+      <section>
+        <div className={dateLabeWrapperCss}>
+          <button type={'button'} className={buttonCss} onClick={handlePrevMonth}>
+            <Icon name="arrow-back" size={14} />
+          </button>
+          <div className={dateLabelTextCss}>
+            <span>
+              {currentYear}년 {currentMonth}월
+            </span>
+            {/* TODO : 나중에 넣어도 되려나 */}
+            {/* <Icon name={'normal-calender'} size={16} /> */}
+          </div>
+          <button
+            type={'button'}
+            className={cx(buttonCss, css({ visibility: isCurrentMonth ? 'hidden' : '' }))}
+            onClick={handleNextMonth}
+          >
+            <Icon name="arrow-forward" size={14} />
+          </button>
+        </div>
+        <table className={tableCss}>
+          <thead>
+            <tr className={calendarHeaderCss}>
+              {WEEK_DAYS.map((day) => (
+                <th key={day}>{day}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className={calendarBodyCss}>
+            {monthCalendarData.map((week, i) => (
+              <tr key={i}>
+                {week.map((day, index) => {
+                  if (!day) return <td key={'calender-null-' + index} className={missionCalendarTdCss} />;
+
+                  // const isToday = dayjs().isSame(`${day.year}-${day.month}-${day.date}`, 'day');
+                  const isSelected = selectDate.isSame(`${day.year}-${day.month}-${day.date}`, 'day');
+                  const thisDay = `${day.year}-${day.month}-${day.date}`;
+
+                  return (
+                    <CalendarItem
+                      key={thisDay}
+                      isSelected={isSelected}
+                      onClick={() => {
+                        setSelectDate(dayjs(thisDay));
+                      }}
+                    >
+                      {day.date}
+                    </CalendarItem>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+      <section></section>
+    </div>
+  );
+}
+
+export default MissionCalendar;
+
+const dateLabeWrapperCss = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '12px',
+  height: '36px',
+});
+
+const buttonCss = css({
+  padding: '8px',
+});
+
+const tableCss = css({
+  width: '100%',
+  textAlign: 'center',
+  borderSpacing: '0 8px',
+});
+
+const dateLabelTextCss = css({
+  textStyle: 'subtitle2',
+  color: 'text.secondary',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+});
+
+const missionCalendarTdCss = css({
+  padding: ' 12px 0',
+});
+
+const calendarHeaderCss = css({
+  width: '100%',
+  fontSize: '12px',
+  fontWeight: '400',
+  lineHeight: '18px',
+  color: 'text.secondary',
+  justifyContent: 'space-between',
+  height: '40px',
+});
+
+const calendarBodyCss = css({
+  textStyle: 'body6',
+  color: 'text.tertiary',
+});

src/app/result/OverallStatus/CalendarItem.tsx

@@ -0,0 +1,72 @@
+import { type PropsWithChildren } from 'react';
+import { css, cx } from '@/styled-system/css';
+
+interface Props {
+  isSelected?: boolean;
+  onClick: () => void;
+}
+
+function CalendarItem(props: PropsWithChildren<Props>) {
+  return (
+    <td className={cx(itemCss, props.isSelected && selectedCss)} onClick={props.onClick}>
+      <span
+        className={cx(
+          textCss,
+          css({
+            color: props.isSelected ? 'purple.purple700' : 'gray.gray600',
+          }),
+        )}
+      >
+        {props.children}
+      </span>
+    </td>
+  );
+}
+
+export default CalendarItem;
+
+const itemCss = css({
+  position: 'relative',
+  textStyle: 'subtitle3',
+  width: '40px',
+  height: '40px',
+  cursor: 'pointer',
+
+  '&::before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: '40px',
+    height: '40px',
+    borderRadius: '50%',
+    border: '1px solid',
+    borderColor: 'purple.purple700 !',
+    transform: 'translate(-50%, -50%)',
+    pointerEvents: 'none',
+    background:
+      'linear-gradient(0deg, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)), linear-gradient(0deg, #FFFFFF, #FFFFFF)',
+    zIndex: 0,
+
+    opacity: 0,
+    transition: 'opacity 0.3s',
+  },
+});
+
+const selectedCss = css({
+  '&::before': {
+    opacity: 1,
+  },
+});
+
+const textCss = css({
+  position: 'relative',
+  zIndex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+  transition: 'color 0.3s',
+});