[Feature] 홈 및 일정 페이지 일정 목록 조회

apps/web/src/entities/schedule/api/getMemberScheduleList.ts

@@ -0,0 +1,11 @@
+import { auth } from '@/shared/api/apiClient';
+import type { ApiResponse } from '@/shared/api/baseTypes';
+import { END_POINT } from '@/shared/constants/endpoint';
+
+import type { CrewScheduleListResponse } from '../model/schedule.model';
+
+export const getMemberScheduleList = () => {
+  return auth.get<ApiResponse<CrewScheduleListResponse[]>>(
+    END_POINT.SCHEDULE.JOINED_LIST
+  );
+};

apps/web/src/entities/schedule/api/getScheduleCalendar.ts

@@ -2,10 +2,17 @@ import { auth } from '@/shared/api/apiClient';
 import type { ApiResponse } from '@/shared/api/baseTypes';
 import { END_POINT } from '@/shared/constants/endpoint';
 
-import type { CrewScheduleCalendarResponse } from '../model/schedule.model';
+import type {
+  CrewScheduleCalendarRequest,
+  CrewScheduleCalendarResponse,
+} from '../model/schedule.model';
 
-export const getScheduleCalendar = (crewId: number) => {
-  return auth.get<ApiResponse<CrewScheduleCalendarResponse>>(
-    END_POINT.SCHEDULE.CALENDAR(crewId)
+export const getScheduleCalendar = (
+  crewId: number,
+  request?: CrewScheduleCalendarRequest
+) => {
+  return auth.get<ApiResponse<CrewScheduleCalendarResponse[]>>(
+    END_POINT.SCHEDULE.CALENDAR(crewId),
+    request ? { searchParams: request } : undefined
   );
 };

apps/web/src/entities/schedule/model/schedule.types.ts

@@ -1,5 +1,11 @@
-import type { CrewScheduleListResponse } from './schedule.model';
+import type {
+  CrewScheduleCalendarResponse,
+  CrewScheduleListResponse,
+} from './schedule.model';
 
 export type ScheduleListItem = CrewScheduleListResponse;
 export type ScheduleList = ScheduleListItem[];
 export type RunType = ScheduleListItem['runType'];
+
+export type ScheduleCalendarItem = CrewScheduleCalendarResponse;
+export type ScheduleCalendarList = ScheduleCalendarItem[];

apps/web/src/entities/schedule/styles/ScheduleList.css.ts

@@ -6,7 +6,6 @@ export const listContainer = style({
   flexDirection: 'column',
   gap: '10px',
   width: '100%',
-  height: '100%',
 });
 
 export const emptyContainer = style({
@@ -15,8 +14,8 @@ export const emptyContainer = style({
   alignItems: 'center',
   justifyContent: 'center',
   width: '100%',
-  height: '100px',
-  flex: 1,
+  height: '220px',
+  gap: '16px',
 });
 
 export const emptyText = style([
@@ -25,3 +24,8 @@ export const emptyText = style([
     color: vars.colors.gray60,
   },
 ]);
+
+export const addScheduleButton = style({
+  width: 'fit-content',
+  padding: '0 30px',
+});

apps/web/src/entities/schedule/ui/ScheduleList.tsx

@@ -1,3 +1,6 @@
+import { Button } from '@azit/design-system/button';
+import { CalendarIcon } from '@azit/design-system/icon';
+
 import { useFlow } from '@/app/routes/stackflow';
 
 import type { ScheduleListItem as ScheduleListItemType } from '@/entities/schedule/model/schedule.types';
@@ -6,9 +9,10 @@ import { ScheduleListItem } from '@/entities/schedule/ui/ScheduleListItem';
 
 interface ScheduleListProps {
   items: ScheduleListItemType[];
+  isHomePage?: boolean;
 }
 
-export function ScheduleList({ items }: ScheduleListProps) {
+export function ScheduleList({ items, isHomePage = false }: ScheduleListProps) {
   const { push } = useFlow();
 
   const handleClickItem = (item: ScheduleListItemType) => {
@@ -17,6 +21,22 @@ export function ScheduleList({ items }: ScheduleListProps) {
 
   const renderItem = () => {
     if (items.length === 0) {
+      if (isHomePage) {
+        return (
+          <div className={styles.emptyContainer}>
+            <CalendarIcon size={64} color="secondary" strokeWidth={0.5} />
+            <p className={styles.emptyText}>일정 탭에서 일정을 추가해보세요!</p>
+            <Button
+              size="medium"
+              state="outline"
+              onClick={() => push('SchedulePage', {}, { animate: false })}
+              className={styles.addScheduleButton}
+            >
+              일정 추가하기
+            </Button>
+          </div>
+        );
+      }
       return (
         <div className={styles.emptyContainer}>
           <p className={styles.emptyText}>등록된 일정이 없어요</p>

apps/web/src/entities/schedule/ui/ScheduleListItem.tsx

@@ -4,7 +4,7 @@ import { ClockIcon, MarkerPinIcon, UsersIcon } from '@azit/design-system/icon';
 import type { ScheduleListItem as ScheduleListItemType } from '@/entities/schedule/model/schedule.types';
 import * as styles from '@/entities/schedule/styles/ScheduleListItem.css.ts';
 
-function formatMeetingAt(meetingAt: string | undefined) {
+const formatMeetingAt = (meetingAt: string | undefined) => {
   if (!meetingAt) return { month: '', day: '', time: '' };
   try {
     const date = new Date(meetingAt);
@@ -20,30 +20,30 @@ function formatMeetingAt(meetingAt: string | undefined) {
   } catch {
     return { month: '', day: '', time: '' };
   }
-}
+};
 
-function buildTags(
+const buildTags = (
   item: ScheduleListItemType
-): { label: string; type: 'primary' | 'secondary' }[] {
-  const tags: { label: string; type: 'primary' | 'secondary' }[] = [];
+): { label: string; type: 'primary' | 'secondary' | 'gray' }[] => {
+  const tags: { label: string; type: 'primary' | 'secondary' | 'gray' }[] = [];
   if (item.runType) {
     tags.push({
       label: item.runType === 'REGULAR' ? '정기런' : '번개런',
-      type: 'primary',
+      type: item.runType === 'REGULAR' ? 'primary' : 'secondary',
     });
   }
   if (item.distance != null)
-    tags.push({ label: `${item.distance}km`, type: 'secondary' });
+    tags.push({ label: `${item.distance}km`, type: 'gray' });
   if (item.pace != null) {
     const min = Math.floor(item.pace);
     const sec = Math.round((item.pace - min) * 60);
     tags.push({
       label: `${min}'${sec.toString().padStart(2, '0')}"/km`,
-      type: 'secondary',
+      type: 'gray',
     });
   }
   return tags;
-}
+};
 
 interface ScheduleListItemProps {
   item: ScheduleListItemType;
@@ -77,10 +77,7 @@ export function ScheduleListItem({ item, handleClick }: ScheduleListItemProps) {
       <div className={styles.contentContainer}>
         <div className={styles.tagsContainer}>
           {tags.map((tag, index) => (
-            <Chip
-              key={index}
-              type={tag.type === 'primary' ? 'primary' : 'skyblue'}
-            >
+            <Chip key={index} type={tag.type}>
               {tag.label}
             </Chip>
           ))}

apps/web/src/pages/home/ui/HomePage.tsx

@@ -1,13 +1,17 @@
 import { Header } from '@azit/design-system/header';
 import { BellIcon } from '@azit/design-system/icon';
 import { AppScreen } from '@stackflow/plugin-basic-ui';
+import { useQuery } from '@tanstack/react-query';
 
 import { useFlow } from '@/app/routes/stackflow';
 
 import { ScheduleAttendanceSection } from '@/widgets/schedule-attendance/ui';
 import { ScheduleSectionLayout } from '@/widgets/schedule-section-layout/ui';
+import { ScheduleListSkeleton } from '@/widgets/skeleton/ui';
 
-import { mockActivityActivation, mockScheduleList } from '@/shared/mock/home';
+import { mockActivityActivation } from '@/shared/mock/home';
+import { memberQueries } from '@/shared/queries';
+import { scheduleQueries } from '@/shared/queries/schedule';
 import { scrollContainer } from '@/shared/styles/container.css';
 import { logo } from '@/shared/styles/logo.css';
 import { AppLayout } from '@/shared/ui/layout';
@@ -22,6 +26,14 @@ export function HomePage() {
     push('AlertPage', {});
   };
 
+  const { data: myInfoData } = useQuery(memberQueries.myInfoQuery());
+  const crewId = myInfoData?.ok ? myInfoData.data.result.crewId : 0;
+
+  const { data: scheduleList = [], isLoading } = useQuery({
+    ...scheduleQueries.getMemberScheduleListQuery(),
+    enabled: crewId > 0,
+  });
+
   return (
     <AppScreen>
       <AppLayout>
@@ -40,7 +52,13 @@ export function HomePage() {
               <ScheduleAttendanceSection activity={mockActivityActivation} />
             }
             scheduleTitle="내 일정"
-            scheduleContent={<ScheduleList items={mockScheduleList} />}
+            scheduleContent={
+              isLoading ? (
+                <ScheduleListSkeleton />
+              ) : (
+                <ScheduleList items={scheduleList} isHomePage />
+              )
+            }
           />
         </div>
       </AppLayout>

apps/web/src/pages/mypage/ui/MyAttendancePage.tsx

@@ -32,12 +32,7 @@ export function MyAttendancePage() {
         />
         <ScheduleSectionLayout
           topSection={
-            <ScheduleCalendar
-              value={new Date()}
-              onChange={() => {}}
-              activeStartDate={new Date()}
-              onActiveStartDateChange={() => {}}
-            />
+            <ScheduleCalendar value={new Date()} onChange={() => {}} />
           }
           scheduleContent={
             <>

apps/web/src/pages/schedule/ui/SchedulePage.tsx

@@ -5,10 +5,13 @@ import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { useState } from 'react';
 
-import { ScheduleWeekCalendar } from '@/widgets/schedule-calendar/ui/ScheduleWeekCalendar';
+import { ScheduleCalendar } from '@/widgets/schedule-calendar/ui/ScheduleCalendar';
+// import { ScheduleWeekCalendar } from '@/widgets/schedule-calendar/ui/ScheduleWeekCalendar';
 import { ScheduleFilterTab } from '@/widgets/schedule-filter-tab/ui';
 import { ScheduleSectionLayout } from '@/widgets/schedule-section-layout/ui';
+import { ScheduleListSkeleton } from '@/widgets/skeleton/ui';
 
+import { formatDate } from '@/shared/lib/formatters';
 import { memberQueries } from '@/shared/queries/member';
 import { scheduleQueries } from '@/shared/queries/schedule';
 import { scrollContainer } from '@/shared/styles/container.css';
@@ -21,13 +24,26 @@ import { ScheduleList } from '@/entities/schedule/ui';
 export function SchedulePage() {
   const [activeFilter, setActiveFilter] = useState<RunType>(undefined);
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const [date, setDate] = useState<string | undefined>(undefined);
+
+  const handleDateChange = (date: Date) => {
+    setSelectedDate(date);
+    setDate(formatDate(date, 'YYYY-MM-DD'));
+  };
 
   const { data: myInfoData } = useQuery(memberQueries.myInfoQuery());
   const crewId = myInfoData?.ok ? myInfoData.data.result.crewId : 0;
   const { data: scheduleList = [], isLoading } = useQuery({
     ...scheduleQueries.getScheduleListQuery(crewId, {
       runType: activeFilter,
-      date: dayjs(selectedDate).format('YYYY-MM-DD'),
+      date,
+    }),
+    enabled: crewId > 0,
+  });
+
+  const { data: scheduleCalendarList = [] } = useQuery({
+    ...scheduleQueries.getScheduleCalendarQuery(crewId, {
+      yearMonth: formatDate(selectedDate, 'YYYY-MM'),
     }),
     enabled: crewId > 0,
   });
@@ -43,18 +59,31 @@ export function SchedulePage() {
         <div className={scrollContainer}>
           <ScheduleSectionLayout
             topSection={
-              <ScheduleWeekCalendar
+              <ScheduleCalendar
                 value={selectedDate}
-                onChange={setSelectedDate}
+                onChange={handleDateChange}
+                scheduleData={scheduleCalendarList}
               />
+              // <ScheduleWeekCalendar
+              //     value={selectedDate}
+              //     onChange={handleDateChange}
+              //   />
             }
             scheduleContent={
               <>
                 <ScheduleFilterTab
                   activeFilter={activeFilter}
                   onFilterChange={setActiveFilter}
                 />
-                {!isLoading && <ScheduleList items={scheduleList} />}
+                {isLoading ? (
+                  <ScheduleListSkeleton />
+                ) : (
+                  <ScheduleList
+                    items={scheduleList.filter((item) =>
+                      dayjs(item.meetingAt).isAfter(dayjs(selectedDate))
+                    )}
+                  />
+                )}
               </>
             }
           />

apps/web/src/shared/constants/endpoint.ts

@@ -51,5 +51,6 @@ export const END_POINT = {
   SCHEDULE: {
     LIST: (crewId: number) => `crews/${crewId}/schedules`,
     CALENDAR: (crewId: number) => `crews/${crewId}/schedules/calendar`,
+    JOINED_LIST: 'members/me/schedules',
   },
 } as const;

apps/web/src/shared/lib/formatters.ts

@@ -1,3 +1,5 @@
+import dayjs from 'dayjs';
+
 const WEEKDAYS = ['일', '월', '화', '수', '목', '금', '토'] as const;
 
 export const formatOrderDate = (dateString: string | undefined) => {
@@ -42,3 +44,7 @@ export const formatExpectedShippingDate = (dateStr: string) => {
   const weekday = date.toLocaleDateString('ko-KR', { weekday: 'short' });
   return `${month}월 ${day}일 (${weekday}) 이내 판매자 발송 예정`;
 };
+
+export const formatDate = (date: Date, format: string) => {
+  return dayjs(date).format(format);
+};

apps/web/src/shared/queries/schedule.ts

@@ -1,23 +1,47 @@
 import { queryOptions } from '@tanstack/react-query';
 
+import { getMemberScheduleList } from '@/entities/schedule/api/getMemberScheduleList';
 import { getScheduleCalendar } from '@/entities/schedule/api/getScheduleCalendar';
 import { getScheduleList } from '@/entities/schedule/api/getScheduleList';
-import type { CrewScheduleListRequest } from '@/entities/schedule/model/schedule.model';
+import type {
+  CrewScheduleCalendarRequest,
+  CrewScheduleListRequest,
+} from '@/entities/schedule/model/schedule.model';
 
 export const scheduleQueries = {
   all: ['schedule'] as const,
+  listKey: (crewId: number, request?: CrewScheduleListRequest) =>
+    [...scheduleQueries.all, 'getScheduleList', crewId, request] as const,
+  memberListKey: () =>
+    [...scheduleQueries.all, 'getMemberScheduleList'] as const,
   getScheduleListQuery: (crewId: number, request?: CrewScheduleListRequest) =>
     queryOptions({
-      queryKey: [...scheduleQueries.all, 'getScheduleList', crewId, request],
+      queryKey: scheduleQueries.listKey(crewId, request),
       queryFn: async () => {
         const res = await getScheduleList(crewId, request);
         if (!res.ok) return [];
         return res.data.result ?? [];
       },
     }),
-  getScheduleCalendarQuery: (crewId: number) =>
+  getMemberScheduleListQuery: () =>
+    queryOptions({
+      queryKey: scheduleQueries.memberListKey(),
+      queryFn: async () => {
+        const res = await getMemberScheduleList();
+        if (!res.ok) return [];
+        return res.data.result ?? [];
+      },
+    }),
+  getScheduleCalendarQuery: (
+    crewId: number,
+    request?: CrewScheduleCalendarRequest
+  ) =>
     queryOptions({
       queryKey: [...scheduleQueries.all, 'getScheduleCalendar', crewId],
-      queryFn: () => getScheduleCalendar(crewId),
+      queryFn: async () => {
+        const res = await getScheduleCalendar(crewId, request);
+        if (!res.ok) return [];
+        return res.data.result ?? [];
+      },
     }),
 };