From 43a996fa1cbb0533bd59b4fe5ec317e3395546f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=89=E1=85=A9=E1=86=AB=E1=84=8C=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=8B=E1=85=A7=E1=86=BC?= Date: Tue, 30 Jul 2024 23:25:51 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor(prettier):=20queries=20import=20or?= =?UTF-8?q?der=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.prettierrc.json | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json index 2c213fc0..64e532a2 100644 --- a/frontend/.prettierrc.json +++ b/frontend/.prettierrc.json @@ -18,6 +18,7 @@ "^@type/(.*)$", "^@apis/(.*)$", "^@mocks/(.*)$", + "^@queries/(.*)$", "^@components/(.*)$", "^@hooks/(.*)$", "^@constants/(.*)$", From e5a31345d1c30f246749dc0171b881e2f0a4f225 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=89=E1=85=A9=E1=86=AB=E1=84=8C=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=8B=E1=85=A7=E1=86=BC?= Date: Tue, 30 Jul 2024 23:26:04 +0900 Subject: [PATCH 2/4] =?UTF-8?q?fix(jest.config.js):=20msw=EA=B0=80=20?= =?UTF-8?q?=EC=8B=A4=ED=96=89=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit setupFilesAfterEnv 내 jest-setup.ts 추가 --- frontend/jest.config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/jest.config.js b/frontend/jest.config.js index 446d91c0..6f800ec0 100644 --- a/frontend/jest.config.js +++ b/frontend/jest.config.js @@ -21,6 +21,8 @@ module.exports = { (https://mswjs.io/docs/migrations/1.x-to-2.x/#frequent-issues) */ setupFiles: ["./jest.polyfills.js"], + setupFilesAfterEnv: ["./jest-setup.ts"], + testEnvironmentOptions: { customExportConditions: [""], }, From 502f2fbeca38e8458a527203608b9caaa2463237 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=89=E1=85=A9=E1=86=AB=E1=84=8C=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=8B=E1=85=A7=E1=86=BC?= Date: Tue, 30 Jul 2024 23:27:50 +0900 Subject: [PATCH 3/4] =?UTF-8?q?test(mainPage):=20=EC=97=AC=ED=96=89?= =?UTF-8?q?=EA=B8=B0=20=EB=AC=B4=ED=95=9C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 무한스크롤 관련 핸들러 추가 2. 여행기 mock 데이터 추가 3. useInfiniteTravelogue를 renderHook으로 wrapping한 hook 추가(createInfiniteTravelogueHook) 4. 테스트 로직 추가 --- frontend/__tests__/mainPage.test.tsx | 45 ++ .../utils/createInfiniteTravelogueHook.tsx | 22 + frontend/src/mocks/data/travelogue.json | 638 ++++++++++++++++++ frontend/src/mocks/handlers/index.ts | 7 +- .../handlers/travelogueInfiniteHandler.ts | 18 + 5 files changed, 725 insertions(+), 5 deletions(-) create mode 100644 frontend/__tests__/mainPage.test.tsx create mode 100644 frontend/__tests__/utils/createInfiniteTravelogueHook.tsx create mode 100644 frontend/src/mocks/data/travelogue.json create mode 100644 frontend/src/mocks/handlers/travelogueInfiniteHandler.ts diff --git a/frontend/__tests__/mainPage.test.tsx b/frontend/__tests__/mainPage.test.tsx new file mode 100644 index 00000000..936d0c8f --- /dev/null +++ b/frontend/__tests__/mainPage.test.tsx @@ -0,0 +1,45 @@ +import { waitFor } from "@testing-library/react"; + +import { createInfiniteTravelogueHook } from "./utils/createInfiniteTravelogueHook"; + +describe("메인 페이지", () => { + describe("여행기 무한 스크롤 확인", () => { + it("메인 페이지로 진입했을때 보여지는 여행기는 총 5개이다.", async () => { + const { result } = createInfiniteTravelogueHook(); + await waitFor(() => { + expect(result.current.status).toMatch("success"); + expect(result.current.travelogues.length).toBe(5); + }); + }); + + it("다음 페이지로 이동할 경우 보여지는 여행기는 총 10개이다.", async () => { + const { result } = createInfiniteTravelogueHook(); + + await waitFor(() => { + result.current.fetchNextPage(); + }); + + await waitFor(() => { + expect(result.current.status).toMatch("success"); + expect(result.current.travelogues.length).toBe(10); + }); + }); + + it("마지막 페이지로 이동할 경우 더 이상 콘텐츠를 확인할 수 없다.", async () => { + const { result } = createInfiniteTravelogueHook(); + + await waitFor(() => { + result.current.fetchNextPage(); + }); + + await waitFor(() => { + result.current.fetchNextPage(); + }); + + await waitFor(() => { + expect(result.current.status).toMatch("success"); + expect(result.current.hasNextPage).toBeFalsy(); + }); + }); + }); +}); diff --git a/frontend/__tests__/utils/createInfiniteTravelogueHook.tsx b/frontend/__tests__/utils/createInfiniteTravelogueHook.tsx new file mode 100644 index 00000000..8f26370f --- /dev/null +++ b/frontend/__tests__/utils/createInfiniteTravelogueHook.tsx @@ -0,0 +1,22 @@ +import { renderHook } from "@testing-library/react"; + +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; + +import useInfiniteTravelogues from "@queries/useInfiniteTravelogues"; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: 0, + }, + }, +}); + +export const wrapper = ({ children }: React.PropsWithChildren) => ( + {children} +); + +export const createInfiniteTravelogueHook = () => + renderHook(() => useInfiniteTravelogues(), { + wrapper, + }); diff --git a/frontend/src/mocks/data/travelogue.json b/frontend/src/mocks/data/travelogue.json new file mode 100644 index 00000000..9070ee1b --- /dev/null +++ b/frontend/src/mocks/data/travelogue.json @@ -0,0 +1,638 @@ +[ + { + "id": 13, + "title": "리버의 ㅋㅋㄹ", + "thumbnail": "https://dev.touroot.kr/images/01630513-3942-4f98-ac6b-66df63a0d8d0.jpg", + "days": [ + { + "id": 26, + "places": [ + { + "id": 38, + "placeName": "ㅋㅋㄹ삥뽕김밥", + "description": "김밥....\n\n정말....대박적 맛있다....\n\n\n\n정말 최고...\n였...\n다......", + "position": { + "lat": "37.6375", + "lng": "126.663" + }, + "photoUrls": ["https://dev.touroot.kr/images/5213040f-430c-4f29-aba1-c24315991184.jpg"] + } + ] + } + ] + }, + { + "id": 12, + "title": "", + "thumbnail": "", + "days": [] + }, + { + "id": 11, + "title": "소렛의 도쿄여행💓", + "thumbnail": "https://dev.touroot.kr/images/d885b8e7-a521-401a-8f84-5de856df3996.jpeg", + "days": [ + { + "id": 25, + "places": [ + { + "id": 37, + "placeName": "도쿄", + "description": null, + "position": { + "lat": "35.6812", + "lng": "139.767" + }, + "photoUrls": ["https://dev.touroot.kr/images/4435a346-0cff-473c-a21c-8831a56bf49e.jpeg"] + } + ] + } + ] + }, + { + "id": 10, + "title": "솔라 여행기", + "thumbnail": "https://dev.touroot.kr/images/7d4f3aff-38ad-4a33-adc5-0b04bc19d8f7.webp", + "days": [ + { + "id": 16, + "places": [ + { + "id": 28, + "placeName": "에펠탑", + "description": "올림픽 한대요...30일 짜리 여행이면 Day추가가 귀찮을수도?", + "position": { + "lat": "48.8584", + "lng": "2.29448" + }, + "photoUrls": ["https://dev.touroot.kr/images/59e1699c-8092-4012-87d5-a686da952925.jpg"] + } + ] + }, + { + "id": 17, + "places": [ + { + "id": 29, + "placeName": "노트르담 대성당", + "description": null, + "position": { + "lat": "48.853", + "lng": "2.3499" + }, + "photoUrls": ["https://dev.touroot.kr/images/a8c6d973-85ca-4741-9d20-7940fdfe7b44.jpg"] + } + ] + }, + { + "id": 18, + "places": [ + { + "id": 30, + "placeName": "센 강", + "description": null, + "position": { + "lat": "48.6383", + "lng": "2.4489" + }, + "photoUrls": ["https://dev.touroot.kr/images/1bf4295c-3597-4c9e-a1b3-abe91c1898cc.png"] + } + ] + }, + { + "id": 19, + "places": [ + { + "id": 31, + "placeName": "오르세 미술관", + "description": null, + "position": { + "lat": "48.86", + "lng": "2.32656" + }, + "photoUrls": ["https://dev.touroot.kr/images/ac4f94d9-0c46-4f05-bb3a-67bcf06ba83f.png"] + } + ] + }, + { + "id": 20, + "places": [ + { + "id": 32, + "placeName": "루브르 박물관", + "description": null, + "position": { + "lat": "48.8606", + "lng": "2.33764" + }, + "photoUrls": ["https://dev.touroot.kr/images/87ee285f-d0ed-4575-964f-7e126145f054.png"] + } + ] + }, + { + "id": 21, + "places": [ + { + "id": 33, + "placeName": "몽파르나스타워", + "description": null, + "position": { + "lat": "48.8421", + "lng": "2.32195" + }, + "photoUrls": ["https://dev.touroot.kr/images/00c74d1b-1d8d-4661-a5ab-527146200ca0.jpg"] + } + ] + }, + { + "id": 22, + "places": [ + { + "id": 34, + "placeName": "튈르리정원", + "description": null, + "position": { + "lat": "36.0126", + "lng": "129.364" + }, + "photoUrls": ["https://dev.touroot.kr/images/1b0a55d7-2ae2-4339-9c18-80938e73fdd1.jpg"] + } + ] + }, + { + "id": 23, + "places": [ + { + "id": 35, + "placeName": "오랑주리 미술관", + "description": null, + "position": { + "lat": "48.8638", + "lng": "2.32267" + }, + "photoUrls": ["https://dev.touroot.kr/images/503ac4eb-0d4a-4c36-befe-5bac0d18af28.jpg"] + } + ] + }, + { + "id": 24, + "places": [ + { + "id": 36, + "placeName": "파리 샤를드골 국제공항", + "description": "집 가기 싫어요...", + "position": { + "lat": "49.0079", + "lng": "2.55079" + }, + "photoUrls": ["https://dev.touroot.kr/images/a5f3e510-9fc4-416f-8d2a-b5e5d41f79dc.png"] + } + ] + } + ] + }, + { + "id": 9, + "title": "지니의 여행기", + "thumbnail": "https://dev.touroot.kr/images/0d345f10-32ab-4b4b-aaad-cfaef6371fe9.jpg", + "days": [ + { + "id": 15, + "places": [ + { + "id": 26, + "placeName": "Dotonbori", + "description": "도톤보리 좋아요", + "position": { + "lat": "34.6686", + "lng": "135.503" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/f71e5182-32db-4b2d-be47-0353264686e5.jpg", + "https://dev.touroot.kr/images/b3e608a6-f1b7-47ae-a427-1c0b3c7b3ed6.jpg" + ] + }, + { + "id": 27, + "placeName": "Don Quijote Dotonbori", + "description": "돈키호테 좋아요", + "position": { + "lat": "34.6693", + "lng": "135.503" + }, + "photoUrls": ["https://dev.touroot.kr/images/9325a0ae-aa70-44c3-bed3-1de0997f5927.jpg"] + } + ] + } + ] + }, + { + "id": 8, + "title": "충북의 보물 단양 여행기", + "thumbnail": "https://dev.touroot.kr/images/6a74df25-e644-4255-9ad1-490d215e7b88.jpeg", + "days": [ + { + "id": 14, + "places": [ + { + "id": 23, + "placeName": "도담삼봉", + "description": "누가 만들어놓은 것 같이 참 이뿌네요. 한 폭의 그림 같은 느낌이랄까요", + "position": { + "lat": "37.0", + "lng": "128.344" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/18e7fb1a-9bdc-4745-b2b2-e883003bb272.jpg", + "https://dev.touroot.kr/images/3cd55b49-2cb6-4e1d-bf73-a35ca78dea3b.jpg", + "https://dev.touroot.kr/images/23bf1916-a9ac-4489-a908-1e98d381d8b8.jpg" + ] + }, + { + "id": 24, + "placeName": "만천하 스카이워크", + "description": "드높은 천상이 생각나는 아찔한 높이.. 올라가는게 힘들긴 합니다 ㅋ", + "position": { + "lat": "36.9803", + "lng": "128.339" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/f0420244-00aa-42c2-8b09-04cb18d54bb3.jpg", + "https://dev.touroot.kr/images/5ca1bef7-20d9-4140-abd6-92a12ffa2217.jpg", + "https://dev.touroot.kr/images/2b794311-685c-43d8-bdc0-2c6fcae9ed65.jpg" + ] + }, + { + "id": 25, + "placeName": "단양강 잔도", + "description": "제가 초한지를 좋아해서 잔도에 대한 로망이 있었는데 너무 좋았어용", + "position": { + "lat": "36.978", + "lng": "128.34" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/c4264f62-ff52-43d8-a5a5-89e7f096c88f.jpg", + "https://dev.touroot.kr/images/ad7b3840-f606-4182-a982-7391bad73b6d.jpg" + ] + } + ] + } + ] + }, + { + "id": 7, + "title": "허광한을 만나러 대만으로", + "thumbnail": "https://dev.touroot.kr/images/abcdc97d-10d3-467f-8421-b204d8ede346.jpeg", + "days": [ + { + "id": 12, + "places": [ + { + "id": 19, + "placeName": "홍마오청", + "description": "너무 이뻤던 홍마오청", + "position": { + "lat": "25.1754", + "lng": "121.433" + }, + "photoUrls": ["https://dev.touroot.kr/images/987a36e0-68f4-4a47-b0ae-c98bb11a8d58.jpeg"] + }, + { + "id": 20, + "placeName": "진과스 황금관", + "description": "홍등이 너무 이뻤다", + "position": { + "lat": "25.1063", + "lng": "121.859" + }, + "photoUrls": ["https://dev.touroot.kr/images/19f5646f-a75f-4eeb-bcb7-90cdd5f98457.jpeg"] + } + ] + }, + { + "id": 13, + "places": [ + { + "id": 21, + "placeName": "타이베이101 전망대", + "description": "엄청난 도시 같은 기분", + "position": { + "lat": "25.0337", + "lng": "121.565" + }, + "photoUrls": ["https://dev.touroot.kr/images/93196c49-e90d-4569-a87f-e7f3653f9fed.jpeg"] + }, + { + "id": 22, + "placeName": "키키레스토랑 (att 4 fun 지점)", + "description": "존맛탱구리리리집", + "position": { + "lat": "25.0355", + "lng": "121.566" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/136b4caa-e58b-425c-9b40-dadf86816660.jpeg", + "https://dev.touroot.kr/images/0313eff5-93e1-403a-84d8-6fe59c34129f.jpeg" + ] + } + ] + } + ] + }, + { + "id": 6, + "title": "살라메스즈베~~ 낙낙의 카작 여행기!", + "thumbnail": "https://dev.touroot.kr/images/f2346f3b-eb3a-4fdc-bb2c-808ddb42f530.JPG", + "days": [ + { + "id": 11, + "places": [ + { + "id": 16, + "placeName": "First President park", + "description": "그렇게 특별한 곳은 아니었지만, 공원이 엄청 넓었다!!\n산책로도 잘 되어 있고 특히 중간에 만난 청설모(?)가 넘나리 귀여웠다 ㅎㅎ\n그냥 가볼만한 정도인듯!", + "position": { + "lat": "43.1937", + "lng": "76.8868" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/9ee30c4b-a3d1-4782-a42b-ffd8bb793bb0.JPG", + "https://dev.touroot.kr/images/d18608ec-22ff-43cd-a02a-0ff8bdf279ac.JPG", + "https://dev.touroot.kr/images/a70fa145-5e17-4295-aedd-56c3d1164770.JPG", + "https://dev.touroot.kr/images/a32706fe-ae25-4d31-9dfc-56db199c8147.JPG" + ] + }, + { + "id": 17, + "placeName": "Paradise", + "description": "점심으로 선택한 파라다이스!\n처음으로 방문한 식당이었는데, 가격이 너무 싸서 놀랐다 ㅎㅎ\n카자흐스탄의 큰 장점이 물가가 엄청 싸다는 것이다.\n저기서 피자 가격이 5000원 정도 했던 것으로 기억한다.\n\n나는 \"라그만\"이라는 걸 먹었는데, 성공적이었음. 나는 짜게 먹는거 좋아해서 맛있었지만, 짠 거 싫어하면 미리 말씀 드려야 할듯!\n\n그리고 카작에선 차를 자주 마신다고 해서 먹어봤는데, 따뜻하고 향도 좋고 맛있었음. 이때부터 차를 즐기기 시작했다 ㅎㅎ", + "position": { + "lat": "43.2425", + "lng": "76.9741" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/dc8680c2-d12f-492c-b0d2-c9a20bb37683.png", + "https://dev.touroot.kr/images/6a6cbc7d-348e-4957-bbae-4121f3e348b0.png" + ] + }, + { + "id": 18, + "placeName": "Almaty Mall", + "description": "카자흐스탄 물가가 얼마나 싼지 단번에 알 수 있었던 곳..\n진짜 가격이 엄청 착하다.\n\n1 탱게당 3원이니 요거트랑 과일이 300원 정도밖에 안한다..\n\n확실히 유제품류랑 과일류가 엄청 싼듯!!!\n여기 있으면 마치 내가 부자가 된 기분이 든다.", + "position": { + "lat": "43.2075", + "lng": "76.8587" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/a65f9ecb-642c-4380-915a-faef38c6363c.png", + "https://dev.touroot.kr/images/2d57c125-204c-4a59-9a84-e6855340ee33.png" + ] + } + ] + } + ] + }, + { + "id": 5, + "title": "낭만의 10인 제주도 휴양기", + "thumbnail": "https://dev.touroot.kr/images/5c4ee3fe-e803-45c9-b600-0e3586dd2dfd.png", + "days": [ + { + "id": 8, + "places": [ + { + "id": 9, + "placeName": "서우봉 둘레길", + "description": "함덕이 한 눈에 보이는 서우봉. 간단한 하이킹 코스로도 훌륭합니다.", + "position": { + "lat": "33.5453", + "lng": "126.675" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/57d6a3fd-c41e-4042-b099-589a6150a6e3.png", + "https://dev.touroot.kr/images/49145c56-c534-4043-a83c-209551af58ce.png" + ] + }, + { + "id": 10, + "placeName": "동문재래시장", + "description": "동문야시장은 제주 향토 음식과 야시장 음식이 잘 조화되어 있는 곳입니다.", + "position": { + "lat": "33.512", + "lng": "126.528" + }, + "photoUrls": ["https://dev.touroot.kr/images/bbb81b88-ce44-41a8-ad73-9d5da8809ef2.png"] + } + ] + }, + { + "id": 9, + "places": [ + { + "id": 11, + "placeName": "파리바게뜨 동화마을", + "description": "제주도 파리바게트에서만 판매하는 우도땅콩크림도넛 맛있습니다. 한 번쯤 먹어볼만 해요!", + "position": { + "lat": "33.4354", + "lng": "126.732" + }, + "photoUrls": ["https://dev.touroot.kr/images/9d457b5c-fa2d-42bf-8e5e-a06767a294f1.png"] + }, + { + "id": 12, + "placeName": "사려니숲길 붉은오름 입출구", + "description": "비 온 뒤의 사려니숲은 이름 그대로 성스러웠습니다. 붉은오름 입출구로 가시는게 주차장과 가깝고 좋습니다.", + "position": { + "lat": "33.395", + "lng": "126.684" + }, + "photoUrls": ["https://dev.touroot.kr/images/e0ed72e9-a38c-4861-850b-187fa276e8ea.png"] + }, + { + "id": 13, + "placeName": "곱들락탁희", + "description": "흑돼지 맛집! 가격대는 꽤 있는 편입니다.", + "position": { + "lat": "33.5393", + "lng": "126.67" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/83d43cb2-f956-42f0-b08a-b3b66332bd19.png", + "https://dev.touroot.kr/images/99ffc965-a444-4661-8b8b-2ab428a7d4fb.png" + ] + } + ] + }, + { + "id": 10, + "places": [ + { + "id": 14, + "placeName": "함덕해수욕장", + "description": "에메랄드빛 바다는 해외 휴양지가 부럽지 않습니다!", + "position": { + "lat": "33.5434", + "lng": "126.67" + }, + "photoUrls": ["https://dev.touroot.kr/images/4bbaef28-2a4b-4976-abd7-c8486e310d73.png"] + }, + { + "id": 15, + "placeName": "스누피가든", + "description": "스누피 테마파크! 부지가 엄청 넓어서 날잡고 가시는게 좋습니다. 실내, 실외 모두 구경거리가 많아요~", + "position": { + "lat": "33.4442", + "lng": "126.778" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/5053b7d6-bcbd-4b87-9f62-b3690a76f953.png", + "https://dev.touroot.kr/images/6faca18a-4865-406a-9807-c9c772bdeba5.png", + "https://dev.touroot.kr/images/f02dcd8a-6f9c-4cfb-b439-e6ec9197b66a.png" + ] + } + ] + } + ] + }, + { + "id": 4, + "title": "행운이 가득한 싱가포르", + "thumbnail": "https://dev.touroot.kr/images/bc6c96ae-7068-47dd-8418-c48b10f3ddfb.jpg", + "days": [ + { + "id": 5, + "places": [ + { + "id": 6, + "placeName": "머라이언 공원", + "description": "싱가포르의 명물. 머메이언 아니고 머라이언.", + "position": { + "lat": "1.28679", + "lng": "103.854" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/0de51038-ceca-4854-9943-6719f0071832.jpg", + "https://dev.touroot.kr/images/85e68e92-7fd6-4807-824b-59277c06a64c.jpg" + ] + } + ] + }, + { + "id": 6, + "places": [ + { + "id": 7, + "placeName": "유니버셜 스튜디오 싱가포르", + "description": "너무 즐거운 곳. 작아서 더 즐겁다!", + "position": { + "lat": "1.25404", + "lng": "103.824" + }, + "photoUrls": ["https://dev.touroot.kr/images/d350fbe8-a1a4-4979-bd92-1c39779fc0a6.jpg"] + } + ] + }, + { + "id": 7, + "places": [ + { + "id": 8, + "placeName": "나이트 사파리", + "description": "야밤에 울타리도 없이 동물보기 덜덜 좀 무섭다", + "position": { + "lat": "1.40219", + "lng": "103.788" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/d769c994-97b2-4e67-84e0-6b89cf97dd1a.jpg", + "https://dev.touroot.kr/images/668f01a1-012b-4cb8-8521-a6f557350914.jpg", + "https://dev.touroot.kr/images/a28159a5-d4a9-46e2-b474-b05f77c6e558.jpg" + ] + } + ] + } + ] + }, + { + "id": 3, + "title": "당일치기 춘천 닭갈비 여행 🍗", + "thumbnail": "https://dev.touroot.kr/images/04cd1ef8-6c00-4c16-afe1-97f4a583e02a.jpg", + "days": [ + { + "id": 4, + "places": [ + { + "id": 4, + "placeName": "큰지붕닭갈비", + "description": "오후 2시쯤 방문하면 웨이팅 없이 점심을 먹을 수 있다~\n점심 먹고 카페 가서 맛있는 거 많이 먹을꺼라 적당히 먹자", + "position": { + "lat": "37.9291", + "lng": "127.782" + }, + "photoUrls": ["https://dev.touroot.kr/images/c74a056d-75ad-4eda-bc2e-6bfa80a1c365.jpg"] + }, + { + "id": 5, + "placeName": "카페 감자밭", + "description": "감자 라떼랑 감자빵 조합이 아주 조씁니다리\n카페 내부도 잘 꾸며져 있어요", + "position": { + "lat": "37.9296", + "lng": "127.784" + }, + "photoUrls": [ + "https://dev.touroot.kr/images/d0373743-6f80-4fe9-bef0-3225e1a75751.jpeg", + "https://dev.touroot.kr/images/0957de55-79e2-4d7f-95c2-53c4b0a6c5fc.jpg" + ] + } + ] + } + ] + }, + { + "id": 1, + "title": "지니의 일본 여행기", + "thumbnail": "https://dev.touroot.kr/images/25f502d6-d5fe-4451-8c83-c06032d57de8.webp", + "days": [ + { + "id": 1, + "places": [ + { + "id": 1, + "placeName": "유니버설 스튜디오 재팬", + "description": "유니버셜 스튜디오에서 버터맥주 마시기!", + "position": { + "lat": "34.6657", + "lng": "135.432" + }, + "photoUrls": ["https://dev.touroot.kr/images/adcf97e6-9184-4ee8-91fb-52aed00664ad.webp"] + }, + { + "id": 2, + "placeName": "돈키호테 도톤보리점", + "description": "돈키호테에서 물품 많이 많이 사야지~!", + "position": { + "lat": "34.6693", + "lng": "135.503" + }, + "photoUrls": ["https://dev.touroot.kr/images/fa194393-f664-4ab0-b892-50b3948a7ba3.jpg"] + } + ] + }, + { + "id": 2, + "places": [ + { + "id": 3, + "placeName": "도톤보리", + "description": "도톤보리에서 재밌게 놀기~", + "position": { + "lat": "34.6686", + "lng": "135.503" + }, + "photoUrls": ["https://dev.touroot.kr/images/4b091625-12ee-4026-ab1f-7d824e3bc6e3.jpg"] + } + ] + } + ] + } +] diff --git a/frontend/src/mocks/handlers/index.ts b/frontend/src/mocks/handlers/index.ts index 7aac7102..21b53ea8 100644 --- a/frontend/src/mocks/handlers/index.ts +++ b/frontend/src/mocks/handlers/index.ts @@ -1,6 +1,3 @@ -/** - * msw v2에선 rest 대신 http 사용 - * import { HttpResponse, http } from "msw"; - */ +import { travelogueInfiniteHandler } from "@mocks/handlers/travelogueInfiniteHandler"; -export const handlers = []; +export const handlers = [travelogueInfiniteHandler]; diff --git a/frontend/src/mocks/handlers/travelogueInfiniteHandler.ts b/frontend/src/mocks/handlers/travelogueInfiniteHandler.ts new file mode 100644 index 00000000..11ea2e90 --- /dev/null +++ b/frontend/src/mocks/handlers/travelogueInfiniteHandler.ts @@ -0,0 +1,18 @@ +import { HttpResponse, http } from "msw"; + +import MOCK_TRAVELOGUES from "@mocks/data/travelogue.json"; + +export const travelogueInfiniteHandler = http.get("/travelogues", ({ request }) => { + const url = new URL(request.url); + + const page = Number(url.searchParams.get("page") ?? "5"); + const size = Number(url.searchParams.get("size") ?? "5"); + + const start = page * size; + const end = (page + 1) * size; + + const last = MOCK_TRAVELOGUES.length <= end; + const paginatedPage = MOCK_TRAVELOGUES.slice(start, end); + + return HttpResponse.json({ content: paginatedPage, last }); +}); From c148e0b67a77bba4d197d329d4d2f9937332968c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=89=E1=85=A9=E1=86=AB=E1=84=8C=E1=85=B5=E1=86=AB?= =?UTF-8?q?=E1=84=8B=E1=85=A7=E1=86=BC?= Date: Tue, 30 Jul 2024 23:31:29 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix(useGetTravelogue):=20queryFn=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/queries/useGetTravelogue.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/queries/useGetTravelogue.ts b/frontend/src/queries/useGetTravelogue.ts index 928687b1..83b42cec 100644 --- a/frontend/src/queries/useGetTravelogue.ts +++ b/frontend/src/queries/useGetTravelogue.ts @@ -2,11 +2,14 @@ import { useQuery } from "@tanstack/react-query"; import { Travelogue } from "@type/domain/travelogue"; -import { getTravelogue } from "@apis/travelogue"; +import { client } from "@apis/client"; export const useGetTravelogue = (id: string) => { return useQuery({ queryKey: [`travelogues/${id}`], - queryFn: () => getTravelogue(id), + queryFn: async () => { + const { data } = await client.get(`/travelogues/${id}`); + return data; + }, }); };