From 5f1479ed4792b74c53208f826363a5ac4df3af2d Mon Sep 17 00:00:00 2001 From: shimseohyun Date: Sun, 8 Dec 2024 17:19:38 +0900 Subject: [PATCH 1/3] [Refactor] #100 - get Booth Response --- src/apis/domains/booth/_interfaces.ts | 62 ++++++++----- src/apis/domains/booth/apis.ts | 17 +++- src/apis/domains/waiting/_interfaces.ts | 1 + src/apis/dummy/dummyBoothDetailResponse.ts | 91 ------------------- src/hooks/apis/booth.ts | 9 +- src/lib/interfaces/booth.ts | 34 +++++-- src/lib/interfaces/boothDeatil.ts | 25 ----- src/main.tsx | 34 +++---- src/pages/boothDetail/BoothDetailPage.tsx | 18 ++-- .../_components/card/BoothDetailCard.tsx | 3 +- .../content/BoothDetailContent.tsx | 2 +- .../_components/menu/BoothDetailMenu.tsx | 4 +- .../_components/notice/BoothDetailNotice.tsx | 2 +- .../_components/WaitingCheckModal.tsx | 2 +- 14 files changed, 115 insertions(+), 189 deletions(-) delete mode 100644 src/apis/dummy/dummyBoothDetailResponse.ts delete mode 100644 src/lib/interfaces/boothDeatil.ts diff --git a/src/apis/domains/booth/_interfaces.ts b/src/apis/domains/booth/_interfaces.ts index 8d40d09..a79d836 100644 --- a/src/apis/domains/booth/_interfaces.ts +++ b/src/apis/domains/booth/_interfaces.ts @@ -1,33 +1,45 @@ +import { Booth } from "@interfaces/booth"; import { BoothStatus, WaitingStatus } from "@linenow-types/status"; -export interface Image { +interface Image { image: string; } +interface Menu { + name: string; + price: string; +} + // Booth 인터페이스 정의 -export interface Booth { +export interface GetBoothResponse { id: number; - name?: string; - description?: string; - location?: string; - caution?: string; + name: string; + description: string; + location: string; + caution: string; + is_operated: BoothStatus; - images?: Image[]; - menu?: { name: string; price: number }[]; + images: Image[]; + menu: Menu[]; + open_time: string; - close_time?: string; - waiting_count?: number; - is_waiting?: boolean; - waiting_status?: WaitingStatus; + close_time: string; + + waiting_count: number; + total_waiting_teams: number; + waiting_teams_ahead: number; + + is_waiting: boolean; waiting_id?: number; - total_waiting_teams?: number; - waiting_teams_ahead?: number; + waiting_status: WaitingStatus; } // GetBoothResponse 함수 정의 -export const GetBoothResponse = (response: Booth): Booth => { +export const transformGetBoothResponse = ( + response: GetBoothResponse +): Booth => { return { - id: response.id, + boothID: response.id, name: response.name, description: response.description, location: response.location, @@ -38,14 +50,14 @@ export const GetBoothResponse = (response: Booth): Booth => { name: item.name, price: item.price, })) || [], - open_time: response.open_time, - close_time: response.close_time, - waiting_count: response.waiting_count, - is_waiting: response.is_waiting, - waiting_status: response.waiting_status, - is_operated: response.is_operated, - waiting_id: response.waiting_id, - total_waiting_teams: response.total_waiting_teams, - waiting_teams_ahead: response.waiting_teams_ahead, + openTime: response.open_time, + closeTime: response.close_time, + waitingCount: response.waiting_count, + isWaiting: response.is_waiting, + waitingStatus: response.waiting_status, + isOperated: response.is_operated, + waitingID: response.waiting_id, + totalWaitingTeams: response.total_waiting_teams, + waitingTeamsAhead: response.waiting_teams_ahead, }; }; diff --git a/src/apis/domains/booth/apis.ts b/src/apis/domains/booth/apis.ts index 03b1740..9d3acb5 100644 --- a/src/apis/domains/booth/apis.ts +++ b/src/apis/domains/booth/apis.ts @@ -1,14 +1,21 @@ +// api method import { getResponse } from "@apis/instance"; -import { Booth, GetBoothResponse } from "./_interfaces"; +// types +import { Booth } from "@interfaces/booth"; +import { GetBoothResponse, transformGetBoothResponse } from "./_interfaces"; + +// get booth : - 부스 상세 export interface GetBoothRequest { - boothId: number; + boothID: number; } export const getBooth = async ({ - boothId, + ...props }: GetBoothRequest): Promise => { - const response = await getResponse(`/api/v1/booths/${boothId}`); + const response = await getResponse( + `/api/v1/booths/${props.boothID}` + ); - return response ? GetBoothResponse(response) : null; + return response ? transformGetBoothResponse(response) : null; }; diff --git a/src/apis/domains/waiting/_interfaces.ts b/src/apis/domains/waiting/_interfaces.ts index ebdf16a..681b0ea 100644 --- a/src/apis/domains/waiting/_interfaces.ts +++ b/src/apis/domains/waiting/_interfaces.ts @@ -70,6 +70,7 @@ export interface RegisterWaitingRequest { export interface PostWaitingRegisterProps extends Waiting { id?: number; } + // 대기 줄서기 등록 함수 export const postWaitingRegister = async ({ boothId, diff --git a/src/apis/dummy/dummyBoothDetailResponse.ts b/src/apis/dummy/dummyBoothDetailResponse.ts deleted file mode 100644 index 8834ec2..0000000 --- a/src/apis/dummy/dummyBoothDetailResponse.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { BoothDetail } from "@interfaces/boothDeatil"; - -// 저도 gpt가 짜준거에요.. 오해 없으시길 하하,, - -export const dummyBoothDetailResponse: BoothDetail[] = [ - { - boothID: 1, - name: "멋쟁이사자처럼", - description: `나는 읽기 쉬운 마음이야 - 당신도 쓱 훑고 가셔요 - 달랠 길 없는 외로운 마음 있지 - 머물다 가셔요 - 내게 긴 여운을 남겨줘요 - 사랑을, 사랑을 해줘요 - 할 수 있다면 그럴 수만 있다면 - 새하얀 빛으로 그댈 비춰 줄게요 - 그러다 밤이 찾아오면 - 우리 둘만의 비밀을 새겨요 - 추억할 그 밤 위에 갈피를 꽂고선 - 남몰래 펼쳐보아요 - 나의 자라나는 마음을 - 못 본채 꺾어 버릴 순 없네`, - location: "동국대학교 명진관", - isOperated: "운영 중", - images: [ - { - image: "/images/image_thumbnail_1.png", - }, - ], - menu: ["영심: 2,000원", "영심이: 10,000원", "찬주: 100원"], - openTime: "2024-09-20T10:27:56", - closeTime: "2024-09-26T10:27:59", - waitingCount: 2, - isWaiting: true, - waitingStatus: "waiting", - }, - { - boothID: 2, - name: "동대 사자 부스", - description: "여기는 사자 부스입니다.", - location: "동국대학교 팔정도", - isOperated: "운영 중", - images: [ - { - image: "/images/image_thumbnail_2.png", - }, - ], - menu: ["사자고기: 50,000원", "사자음료: 5,000원"], - openTime: "2024-09-21T10:00:00", - closeTime: "2024-09-27T18:00:00", - waitingCount: 3, - isWaiting: true, - waitingStatus: "waiting", - }, - { - boothID: 3, - name: "부스 3", - description: "부스 3 설명입니다.", - location: "동국대학교 신공학관", - isOperated: "운영 중", - images: [ - { - image: "/images/image_thumbnail_1.png", - }, - ], - menu: ["아이템 1: 1,000원", "아이템 2: 5,000원"], - openTime: "2024-09-22T09:00:00", - closeTime: "2024-09-28T17:00:00", - waitingCount: 5, - isWaiting: true, - waitingStatus: "waiting", - }, - { - boothID: 4, - name: "부스 4", - description: "부스 4 설명입니다.", - location: "동국대학교 원흥관", - isOperated: "운영 중", - images: [ - { - image: "/images/image_thumbnail_2.png", - }, - ], - menu: ["메뉴1: 10,000원", "메뉴2: 15,000원"], - openTime: "2024-09-23T11:00:00", - closeTime: "2024-09-29T20:00:00", - waitingCount: 0, - isWaiting: false, - waitingStatus: "canceled", - }, -]; diff --git a/src/hooks/apis/booth.ts b/src/hooks/apis/booth.ts index bfb2473..8517160 100644 --- a/src/hooks/apis/booth.ts +++ b/src/hooks/apis/booth.ts @@ -1,12 +1,11 @@ import { useQuery } from "@tanstack/react-query"; import { BOOTH_QUERY_KEY } from "@apis/domains/booth/queries"; -import { getBooth } from "@apis/domains/booth/apis"; +import { getBooth, GetBoothRequest } from "@apis/domains/booth/apis"; -export const useGetBooth = (boothId: number | null) => { +export const useGetBooth = ({ ...props }: GetBoothRequest) => { return useQuery({ - queryKey: [BOOTH_QUERY_KEY.BOOTH, boothId], - queryFn: () => getBooth({ boothId: boothId! }), - enabled: boothId !== null, + queryKey: [BOOTH_QUERY_KEY.BOOTH, props.boothID], + queryFn: () => getBooth(props), }); }; diff --git a/src/lib/interfaces/booth.ts b/src/lib/interfaces/booth.ts index 58c4db9..10ffe4a 100644 --- a/src/lib/interfaces/booth.ts +++ b/src/lib/interfaces/booth.ts @@ -1,20 +1,42 @@ +import { BoothStatus, WaitingStatus } from "@linenow-types/status"; + +export interface BoothImage { + image: string; +} + +export interface Menu { + name: string; + price: string; +} + export interface Booth { boothID: number; - thumbnail: string; name: string; description?: string; location: string; - isOperated: boolean; + caution: string; + + images: BoothImage[]; menu: Menu[]; + + isOperated: BoothStatus; + openTime: string; closeTime: string; + + waitingCount: number; + totalWaitingTeams: number; + waitingTeamsAhead: number; + + isWaiting: boolean; + waitingID?: number; + waitingStatus: WaitingStatus; } export interface BoothBrief - extends Pick< - Booth, - "boothID" | "thumbnail" | "name" | "description" | "location" - > {} + extends Pick { + thumbnail: string; +} export interface Menu { name: string; diff --git a/src/lib/interfaces/boothDeatil.ts b/src/lib/interfaces/boothDeatil.ts deleted file mode 100644 index 6af87a9..0000000 --- a/src/lib/interfaces/boothDeatil.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { WaitingStatus } from "@linenow-types/status"; - -export interface BoothImage { - image: string; -} - -export interface Menu { - item: string; - price: string; -} - -export interface BoothDetail { - boothID: number; - name: string; - description?: string; - location: string; - isOperated: string; - images: BoothImage[]; - menu: string[]; - openTime: string; - closeTime: string; - waitingCount: number; - isWaiting: boolean; - waitingStatus: WaitingStatus; -} diff --git a/src/main.tsx b/src/main.tsx index fd8f679..a853e85 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,20 +1,20 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import App from './App.tsx'; +// import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.tsx"; -// // mocks -// import { worker } from './mocks/browser.ts'; +// mocks +import { worker } from "./mocks/browser.ts"; -// worker -// .start({ -// onUnhandledRequest: 'bypass', -// }) -// .then(() => { -// ReactDOM.createRoot(document.getElementById('root')!).render(); -// }); +worker + .start({ + onUnhandledRequest: "bypass", + }) + .then(() => { + ReactDOM.createRoot(document.getElementById("root")!).render(); + }); -ReactDOM.createRoot(document.getElementById('root')!).render( - - - -); \ No newline at end of file +// ReactDOM.createRoot(document.getElementById('root')!).render( +// +// +// +// ); diff --git a/src/pages/boothDetail/BoothDetailPage.tsx b/src/pages/boothDetail/BoothDetailPage.tsx index d53086e..5aace27 100644 --- a/src/pages/boothDetail/BoothDetailPage.tsx +++ b/src/pages/boothDetail/BoothDetailPage.tsx @@ -29,7 +29,7 @@ const BoothDetailPage = () => { const boothNumber = boothId ? parseInt(boothId, 10) : null; - const { data: booth, isLoading } = useGetBooth(boothNumber || 0); + const { data: booth, isLoading } = useGetBooth({ boothID: boothNumber || 0 }); // TODO:- 이거 누군가는 고쳐주세요... atom쓰는걸로... const [isModalOpen, setIsModalOpen] = useState(false); @@ -52,7 +52,7 @@ const BoothDetailPage = () => { title: "정말 대기를 취소하시겠어요?", sub: "대기를 취소하면 현재 줄 서기가 사라져요.\n그래도 취소하실건가요?", primaryButton: { - onClick: () => postWaitingCancel(booth?.waiting_id || 0), + onClick: () => postWaitingCancel(booth?.waitingID || 0), }, secondButton: { children: "이전으로", @@ -60,7 +60,7 @@ const BoothDetailPage = () => { }; const getInformationTitle = () => { - switch (booth?.is_operated) { + switch (booth?.isOperated) { case "not_started": return "부스 운영 예상 시간"; case "finished": @@ -71,9 +71,9 @@ const BoothDetailPage = () => { }; const getInformationSub = () => { - switch (booth?.is_operated) { + switch (booth?.isOperated) { case "not_started": - return new Date(booth.open_time).toLocaleTimeString("ko-KR", { + return new Date(booth.openTime).toLocaleTimeString("ko-KR", { hour: "2-digit", minute: "2-digit", }); @@ -81,17 +81,17 @@ const BoothDetailPage = () => { case "finished": return undefined; default: - return `${booth?.total_waiting_teams || 0}팀`; + return `${booth?.totalWaitingTeams || 0}팀`; } }; const getInformationButton = () => { - if (booth?.is_waiting) { + if (booth?.isWaiting) { return ( <> 대기 취소하기 @@ -99,7 +99,7 @@ const BoothDetailPage = () => { ); } - switch (booth?.is_operated) { + switch (booth?.isOperated) { case "not_started": return ( 대기 취소하기