diff --git a/client/public/mockServiceWorker.js b/client/public/mockServiceWorker.js deleted file mode 100644 index 78933b6..0000000 --- a/client/public/mockServiceWorker.js +++ /dev/null @@ -1,292 +0,0 @@ -/* eslint-disable */ -/* tslint:disable */ - -/** - * Mock Service Worker (2.0.4). - * @see https://github.com/mswjs/msw - * - Please do NOT modify this file. - * - Please do NOT serve this file on production. - */ - -const INTEGRITY_CHECKSUM = '0877fcdc026242810f5bfde0d7178db4' -const IS_MOCKED_RESPONSE = Symbol('isMockedResponse') -const activeClientIds = new Set() - -self.addEventListener('install', function () { - self.skipWaiting() -}) - -self.addEventListener('activate', function (event) { - event.waitUntil(self.clients.claim()) -}) - -self.addEventListener('message', async function (event) { - const clientId = event.source.id - - if (!clientId || !self.clients) { - return - } - - const client = await self.clients.get(clientId) - - if (!client) { - return - } - - const allClients = await self.clients.matchAll({ - type: 'window', - }) - - switch (event.data) { - case 'KEEPALIVE_REQUEST': { - sendToClient(client, { - type: 'KEEPALIVE_RESPONSE', - }) - break - } - - case 'INTEGRITY_CHECK_REQUEST': { - sendToClient(client, { - type: 'INTEGRITY_CHECK_RESPONSE', - payload: INTEGRITY_CHECKSUM, - }) - break - } - - case 'MOCK_ACTIVATE': { - activeClientIds.add(clientId) - - sendToClient(client, { - type: 'MOCKING_ENABLED', - payload: true, - }) - break - } - - case 'MOCK_DEACTIVATE': { - activeClientIds.delete(clientId) - break - } - - case 'CLIENT_CLOSED': { - activeClientIds.delete(clientId) - - const remainingClients = allClients.filter((client) => { - return client.id !== clientId - }) - - // Unregister itself when there are no more clients - if (remainingClients.length === 0) { - self.registration.unregister() - } - - break - } - } -}) - -self.addEventListener('fetch', function (event) { - const { request } = event - - // Bypass navigation requests. - if (request.mode === 'navigate') { - return - } - - // Opening the DevTools triggers the "only-if-cached" request - // that cannot be handled by the worker. Bypass such requests. - if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') { - return - } - - // Bypass all requests when there are no active clients. - // Prevents the self-unregistered worked from handling requests - // after it's been deleted (still remains active until the next reload). - if (activeClientIds.size === 0) { - return - } - - // Generate unique request ID. - const requestId = crypto.randomUUID() - event.respondWith(handleRequest(event, requestId)) -}) - -async function handleRequest(event, requestId) { - const client = await resolveMainClient(event) - const response = await getResponse(event, client, requestId) - - // Send back the response clone for the "response:*" life-cycle events. - // Ensure MSW is active and ready to handle the message, otherwise - // this message will pend indefinitely. - if (client && activeClientIds.has(client.id)) { - ;(async function () { - const responseClone = response.clone() - // When performing original requests, response body will - // always be a ReadableStream, even for 204 responses. - // But when creating a new Response instance on the client, - // the body for a 204 response must be null. - const responseBody = response.status === 204 ? null : responseClone.body - - sendToClient( - client, - { - type: 'RESPONSE', - payload: { - requestId, - isMockedResponse: IS_MOCKED_RESPONSE in response, - type: responseClone.type, - status: responseClone.status, - statusText: responseClone.statusText, - body: responseBody, - headers: Object.fromEntries(responseClone.headers.entries()), - }, - }, - [responseBody], - ) - })() - } - - return response -} - -// Resolve the main client for the given event. -// Client that issues a request doesn't necessarily equal the client -// that registered the worker. It's with the latter the worker should -// communicate with during the response resolving phase. -async function resolveMainClient(event) { - const client = await self.clients.get(event.clientId) - - if (client?.frameType === 'top-level') { - return client - } - - const allClients = await self.clients.matchAll({ - type: 'window', - }) - - return allClients - .filter((client) => { - // Get only those clients that are currently visible. - return client.visibilityState === 'visible' - }) - .find((client) => { - // Find the client ID that's recorded in the - // set of clients that have registered the worker. - return activeClientIds.has(client.id) - }) -} - -async function getResponse(event, client, requestId) { - const { request } = event - - // Clone the request because it might've been already used - // (i.e. its body has been read and sent to the client). - const requestClone = request.clone() - - function passthrough() { - const headers = Object.fromEntries(requestClone.headers.entries()) - - // Remove internal MSW request header so the passthrough request - // complies with any potential CORS preflight checks on the server. - // Some servers forbid unknown request headers. - delete headers['x-msw-intention'] - - return fetch(requestClone, { headers }) - } - - // Bypass mocking when the client is not active. - if (!client) { - return passthrough() - } - - // Bypass initial page load requests (i.e. static assets). - // The absence of the immediate/parent client in the map of the active clients - // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet - // and is not ready to handle requests. - if (!activeClientIds.has(client.id)) { - return passthrough() - } - - // Bypass requests with the explicit bypass header. - // Such requests can be issued by "ctx.fetch()". - const mswIntention = request.headers.get('x-msw-intention') - if (['bypass', 'passthrough'].includes(mswIntention)) { - return passthrough() - } - - // Notify the client that a request has been intercepted. - const requestBuffer = await request.arrayBuffer() - const clientMessage = await sendToClient( - client, - { - type: 'REQUEST', - payload: { - id: requestId, - url: request.url, - mode: request.mode, - method: request.method, - headers: Object.fromEntries(request.headers.entries()), - cache: request.cache, - credentials: request.credentials, - destination: request.destination, - integrity: request.integrity, - redirect: request.redirect, - referrer: request.referrer, - referrerPolicy: request.referrerPolicy, - body: requestBuffer, - keepalive: request.keepalive, - }, - }, - [requestBuffer], - ) - - switch (clientMessage.type) { - case 'MOCK_RESPONSE': { - return respondWithMock(clientMessage.data) - } - - case 'MOCK_NOT_FOUND': { - return passthrough() - } - } - - return passthrough() -} - -function sendToClient(client, message, transferrables = []) { - return new Promise((resolve, reject) => { - const channel = new MessageChannel() - - channel.port1.onmessage = (event) => { - if (event.data && event.data.error) { - return reject(event.data.error) - } - - resolve(event.data) - } - - client.postMessage( - message, - [channel.port2].concat(transferrables.filter(Boolean)), - ) - }) -} - -async function respondWithMock(response) { - // Setting response status code to 0 is a no-op. - // However, when responding with a "Response.error()", the produced Response - // instance will have status code set to 0. Since it's not possible to create - // a Response instance with status code 0, handle that use-case separately. - if (response.status === 0) { - return Response.error() - } - - const mockedResponse = new Response(response.body, response) - - Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, { - value: true, - enumerable: true, - }) - - return mockedResponse -} diff --git a/client/src/app/@Modal/(.)post/[userId]/[postId]/page.tsx b/client/src/app/@Modal/(.)post/[userId]/[postId]/page.tsx index 947fe61..8b092e2 100644 --- a/client/src/app/@Modal/(.)post/[userId]/[postId]/page.tsx +++ b/client/src/app/@Modal/(.)post/[userId]/[postId]/page.tsx @@ -1,11 +1,10 @@ import PostDetailPage from "@/app/post/[userId]/[postId]/page"; import ModalWrapper from "@/components/ModalWrapper"; -const page = async ({ ...context }) => { - const parsedPostId = context.params.postId +const page = async ({ params }: { params: { postId: string } }) => { return ( - + ); }; diff --git a/client/src/app/layout.tsx b/client/src/app/layout.tsx index a3f92b7..2dd1418 100644 --- a/client/src/app/layout.tsx +++ b/client/src/app/layout.tsx @@ -6,7 +6,6 @@ import { Box, GlobalStyles } from "@mui/material"; import Pretendard from "~/assets/font/Pretendard"; import NavigationBar from "~/components/NavigationBar"; import "./globals.css"; -import MSWInit from "@/components/mock/MSWInit"; import CustomQueryClientProvider from "@/components/queryClient/CustomQueryClientProvider"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; @@ -42,7 +41,6 @@ export default function RootLayout({ overflow: "auto", }} > - {children} diff --git a/client/src/app/post/[userId]/[postId]/page.tsx b/client/src/app/post/[userId]/[postId]/page.tsx index 0a33a61..1707e48 100644 --- a/client/src/app/post/[userId]/[postId]/page.tsx +++ b/client/src/app/post/[userId]/[postId]/page.tsx @@ -3,14 +3,15 @@ import PostDetail from "@/components/post/PostDetail"; import { getPostDetailQueryFn } from "@/queries/post/useGetPostDetailQuery"; import { redirect } from "next/navigation"; -const PostDetailPage = async ({ ...context }) => { - const parsedPostId = context.params.postId; +const PostDetailPage = async ({ params }: { params: { postId: string } }) => { + const parsedPostId = params.postId; + let initialData; try { - const initialData = await getPostDetailQueryFn(parsedPostId); - return ; + initialData = await getPostDetailQueryFn(parsedPostId); } catch { redirect("/not-found"); } + return ; }; export default PostDetailPage; diff --git a/client/src/app/post/page.tsx b/client/src/app/post/page.tsx deleted file mode 100644 index fbeb9d0..0000000 --- a/client/src/app/post/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const page = () => { - return
모든 포스트를 보는 페이지
; -}; - -export default page; diff --git a/client/src/components/mock/MSWInit.tsx b/client/src/components/mock/MSWInit.tsx deleted file mode 100644 index 86cf9af..0000000 --- a/client/src/components/mock/MSWInit.tsx +++ /dev/null @@ -1,27 +0,0 @@ -"use client"; -import { useState, type PropsWithChildren, useEffect } from "react"; -const isDev = process.env.NEXT_PUBLIC_API_MOCKING === "enable"; - -interface Props {} - -export default function MSWInit({ children }: PropsWithChildren) { - const [ready, setReady] = useState(false); - - const init = async () => { - if (isDev) { - const initMock = await import("@/mocks/index"); - await initMock.initMSW(); - setReady(() => true); - } else { - setReady(() => true); - } - }; - - useEffect(() => { - if (ready) return; - init(); - }, [ready]); - - if (!ready) return null; - return <>{children}; -} diff --git a/client/src/mocks/browser.ts b/client/src/mocks/browser.ts deleted file mode 100644 index bcd82e4..0000000 --- a/client/src/mocks/browser.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { setupWorker } from "msw/browser"; -import { handlers } from "./handlers"; - -export const worker = setupWorker(...handlers); diff --git a/client/src/mocks/handlers.ts b/client/src/mocks/handlers.ts deleted file mode 100644 index 97e450a..0000000 --- a/client/src/mocks/handlers.ts +++ /dev/null @@ -1,6 +0,0 @@ -import getPostList from "./handlers/getPostList"; -import getPostDetail from "./handlers/getPostDetail"; - -export const handlers = [ - getPostList,getPostDetail -]; diff --git a/client/src/mocks/handlers/getPostDetail.ts b/client/src/mocks/handlers/getPostDetail.ts deleted file mode 100644 index 868d839..0000000 --- a/client/src/mocks/handlers/getPostDetail.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { PostInterface } from "@/types/post/PostInterface"; -import { HttpResponse, http } from "msw"; -import { randomBoolean, randomNumber, randomSelect } from "../utils/random"; -/** - * 포스트 상세보기 정보를 받아오는 핸들러 - */ -export default http.get(`${process.env.NEXT_PUBLIC_DEV_BASE_URL}/posts/1`, () => { - return HttpResponse.json({ - nickname: "testNick", - id: "userID", - updateDt: "2023-11-08T13:05:09.531Z", - createdAt: "2023-11-08T13:05:09.531Z", - edited: randomBoolean(), - postNo: 135, - postContent: - "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos ullam aut minus aliquam quis officia, non dolore omnis, magnam totam tenetur ad harum? Mollitia omnis odit atque blanditiis exercitationem! Voluptatum.", - positionInfo: "울릉도 동남쪽 뱃길따라 200리", - alcoholName: "string", - postAttachUrl: randomSelect( - ["https://source.unsplash.com/random?wallpapers"], - [] - ), - tagList: randomSelect(["tag1", "tag2"], []), - quoteInfo: randomSelect( - [ - { - quoteNo: 1, - quoteContent: "1", - }, - ], - [] - ), - likeCount: randomNumber(), - quoteCount: randomNumber(), - followedByMe: randomBoolean(), - likedByme: randomBoolean(), - profileImgUrls: randomSelect( - "https://source.unsplash.com/random?wallpapers", - "" - ), - }); - }); diff --git a/client/src/mocks/handlers/getPostList.ts b/client/src/mocks/handlers/getPostList.ts deleted file mode 100644 index 6fd70d1..0000000 --- a/client/src/mocks/handlers/getPostList.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { PostInterface } from "@/types/post/PostInterface"; -import { HttpResponse, http } from "msw"; -import { randomBoolean, randomNumber, randomSelect } from "../utils/random"; -/** - * 포스트 리스트를 받아오는 핸들러 - */ -export default http.get(`${process.env.NEXT_PUBLIC_DEV_BASE_URL}/posts`, () => { - return HttpResponse.json({ - content: Array.from(new Array(5)).map((_data, i): PostInterface => { - return { - nickname: "testNick", - id: "userID", - updateDt: "2023-11-08T13:05:09.531Z", - createdAt: "2023-11-08T13:05:09.531Z", - edited: randomBoolean(), - postNo: i, - postContent: - "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos ullam aut minus aliquam quis officia, non dolore omnis, magnam totam tenetur ad harum? Mollitia omnis odit atque blanditiis exercitationem! Voluptatum.", - positionInfo: "울릉도 동남쪽 뱃길따라 200리", - alcoholName: "string", - postAttachUrl: randomSelect( - ["https://source.unsplash.com/random?wallpapers"], - [] - ), - tagList: randomSelect(["tag1", "tag2"], []), - quoteInfo: randomSelect( - [ - { - quoteNo: 1, - quoteContent: "1", - }, - ], - [] - ), - likeCount: randomNumber(), - quoteCount: randomNumber(), - followedByMe: randomBoolean(), - likedByme: randomBoolean(), - profileImgUrls: randomSelect( - "https://source.unsplash.com/random?wallpapers", - "" - ), - }; - }), - }); - }); - diff --git a/client/src/mocks/index.ts b/client/src/mocks/index.ts deleted file mode 100644 index 540955e..0000000 --- a/client/src/mocks/index.ts +++ /dev/null @@ -1,14 +0,0 @@ -export async function initMSW() { - if(typeof window === 'undefined') { - const { server } = await import('./server'); - server.listen({ - onUnhandledRequest: 'bypass' - }); - - } else { - const { worker } = await import('./browser'); - await worker.start({ - onUnhandledRequest: 'bypass' - }); - } -} \ No newline at end of file diff --git a/client/src/mocks/server.ts b/client/src/mocks/server.ts deleted file mode 100644 index f7ac3a6..0000000 --- a/client/src/mocks/server.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { setupServer } from 'msw/node' -import { handlers } from './handlers' - -export const server = setupServer(...handlers) \ No newline at end of file diff --git a/client/src/mocks/utils/random.ts b/client/src/mocks/utils/random.ts deleted file mode 100644 index a00c01c..0000000 --- a/client/src/mocks/utils/random.ts +++ /dev/null @@ -1,25 +0,0 @@ -/** - * 선택할 아이템을 2가지 받아 둘중 하나를 랜덤으로 선택해 리턴 - * @param first 선택할 아이템 - * @param second 선택할 아이템 - * @returns - */ -export const randomSelect = (first: T, second: T) => { - return randomBoolean() ? first : second; -}; -/** - * 0~10사이의 랜덤 숫자를 리턴 - * @returns - */ -export const randomNumber = ()=>{ - const randomNum = parseInt(String(Math.random() * 10)); - return Number(randomNum) -} -/** - * true / false 를 랜덤하게 리턴 - * @returns - */ -export const randomBoolean = ()=>{ - const randomNum = randomNumber(); - return randomNum % 2 === 0 -} \ No newline at end of file diff --git a/client/src/stories/Components/Post/PostCard.stories.tsx b/client/src/stories/Components/Post/PostCard.stories.tsx index 54765eb..1d14ce0 100644 --- a/client/src/stories/Components/Post/PostCard.stories.tsx +++ b/client/src/stories/Components/Post/PostCard.stories.tsx @@ -29,6 +29,7 @@ // quoteCount: 0, // likedByMe: false, // followedByMe: false, + // }; // const meta = {