[FE] 확정된 약속 정보 조회 API 데이터 Fetching

frontend/src/apis/meetingConfirm.ts

@@ -9,9 +9,17 @@ export interface ConfirmDates {
 
 interface PostMeetingConfirmRequest {
   uuid: string;
+
   requests: ConfirmDates;
 }
 
+export interface GetConfirmedMeetingInfoResponse extends ConfirmDates {
+  meetingName: string;
+  availableAttendeeNames: string[];
+  startDayOfWeek: string;
+  endDayOfWeek: string;
+}
+
 export const postMeetingConfirm = async ({ uuid, requests }: PostMeetingConfirmRequest) => {
   const data = await fetchClient({
     path: `/${uuid}/confirm`,
@@ -23,3 +31,13 @@ export const postMeetingConfirm = async ({ uuid, requests }: PostMeetingConfirmR
 
   return data;
 };
+
+export const getConfirmedMeetingInfo = async (uuid: string) => {
+  const data = await fetchClient<Promise<GetConfirmedMeetingInfoResponse>>({
+    path: `/${uuid}/confirm`,
+    method: 'GET',
+    errorMessage: '확정된 약속 정보 조회애 실패했어요 :(',
+  });
+
+  return data;
+};

frontend/src/components/MeetingTicket/TicketInfo.tsx

@@ -0,0 +1,56 @@
+import { useParams } from 'react-router-dom';
+
+import { useGetConfirmedMeetingInfoQuery } from '@stores/servers/confirm/queries';
+
+export default function TicketInfo() {
+  const params = useParams<{ uuid: string }>();
+  const uuid = params.uuid!;
+
+  const { data } = useGetConfirmedMeetingInfoQuery(uuid);
+
+  if (!data) {
+    return null;
+  }
+
+  const {
+    meetingName,
+    availableAttendeeNames,
+    startDate,
+    startTime,
+    startDayOfWeek,
+    endDate,
+    endTime,
+    endDayOfWeek,
+  } = data;
+
+  console.log(data);
+  return (
+    <div>
+      <div>{meetingName}</div>
+
+      <div>
+        <div>날짜</div>
+        <div>
+          <span>
+            {startDate}({startDayOfWeek})부터
+          </span>
+          <span>
+            {endDate}({endDayOfWeek})까지
+          </span>
+        </div>
+      </div>
+
+      <div>
+        <div>시간</div>
+        <div>{`${startTime} ~ ${endTime}`}</div>
+      </div>
+
+      <div>
+        <div>참여자 ({availableAttendeeNames.length}명)</div>
+        {availableAttendeeNames.map((attendeeName) => (
+          <div key={attendeeName}>{attendeeName}</div>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/components/MeetingTicket/index.tsx

@@ -0,0 +1,12 @@
+import MomoCharacter from '@assets/images/momoCharacter.svg';
+
+import TicketInfo from './TicketInfo';
+
+export default function MeetingTicket() {
+  return (
+    <div>
+      <MomoCharacter width={172} height={180} />
+      <TicketInfo />
+    </div>
+  );
+}

frontend/src/constants/queryKeys.ts

@@ -4,4 +4,5 @@ export const QUERY_KEY = {
   meetingTimeRecommends: 'meetingTimeRecommends',
   meetingSchedules: 'meetingSchedules',
   meetingMySchedule: 'meetingMySchedule',
+  confirmedMeetingInfo: 'confirmedMeetingInfo',
 } as const;

frontend/src/pages/FixedMeetingTicketPage/FixedMeetingTicketPage.tsx

@@ -0,0 +1,5 @@
+import MeetingTicket from '@components/MeetingTicket';
+
+export default function FixedMeetingTicketPage() {
+  return <MeetingTicket />;
+}

frontend/src/pages/MeetingConfirmPage/components/MeetingTimeOptions.tsx

@@ -39,6 +39,7 @@ export default function MeetingTimeOptions({ uuid, attendeeNames }: MeetingTimeO
   const [selectedMeeting, setSelectedMeeting] = useState<SelectedMeeting>({} as SelectedMeeting);
   const navigate = useNavigate();
 
+  // TODO: stores/servers/confirm/mutation.ts 파일로 분리
   const { mutate } = useMutation({
     mutationFn: postMeetingConfirm,
     onSuccess: () => {

frontend/src/router.tsx

@@ -6,6 +6,7 @@ import { TimePickerUpdateStateProvider } from '@contexts/TimePickerUpdateStatePr
 
 import AttendeeLoginPage from '@pages/AttendeeLoginPage/AttendeeLoginPage';
 import CreateMeetingPage from '@pages/CreateMeetingPage';
+import FixedMeetingTicketPage from '@pages/FixedMeetingTicketPage/FixedMeetingTicketPage';
 import MeetingConfirmPage from '@pages/MeetingConfirmPage';
 import MeetingLinkSharePage from '@pages/MeetingLinkSharePage';
 import MeetingRecommendPage from '@pages/MeetingRecommendPage';
@@ -48,6 +49,11 @@ const router = createBrowserRouter([
             path: ':uuid/complete',
             element: <MeetingLinkSharePage />,
           },
+
+          {
+            path: ':uuid/fixed-meeting-ticket',
+            element: <FixedMeetingTicketPage />,
+          },
         ],
       },
     ],

frontend/src/stores/servers/confirm/queries.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getConfirmedMeetingInfo } from '@apis/meetingConfirm';
+
+import { QUERY_KEY } from '@constants/queryKeys';
+
+export const useGetConfirmedMeetingInfoQuery = (uuid: string) =>
+  useQuery({
+    queryKey: [QUERY_KEY.confirmedMeetingInfo],
+    queryFn: () => getConfirmedMeetingInfo(uuid),
+    retry: 1,
+  });