From f681443f05ed2476a2c723f930a07882c3704f11 Mon Sep 17 00:00:00 2001 From: Jungu Lee <100949102+jobkaeHenry@users.noreply.github.com> Date: Fri, 12 Jan 2024 17:03:50 +0900 Subject: [PATCH] =?UTF-8?q?Revert=20"=EC=88=A0=EB=B0=B1=EA=B3=BC-Selector-?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5-=EA=B5=AC=ED=98=84"=20(#98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/package-lock.json | 56 ---- client/package.json | 3 - client/public/mockServiceWorker.js | 292 ------------------ client/src/app/wiki/(wiki-main)/page.tsx | 26 +- client/src/app/wiki/[alcoholNo]/page.tsx | 6 +- client/src/assets/icons/Alcohol/BeerIcon.svg | 9 - .../src/assets/icons/Alcohol/BrandyIcon.svg | 14 - .../src/assets/icons/Alcohol/LiquorIcon.svg | 14 - client/src/assets/icons/Alcohol/RumIcon.svg | 14 - .../src/assets/icons/Alcohol/SpiritsIcon.svg | 9 + .../src/components/layout/CustomContainer.tsx | 1 - .../src/components/post/PostCardSkeleton.tsx | 27 +- .../post/VirtualizedPostCardList.tsx | 127 -------- .../src/components/wiki/AlcoholPagination.tsx | 22 +- .../components/wiki/WikiAlcoholSelector.tsx | 78 ++--- .../wiki/detail/AlcoholDetailPage.tsx | 6 +- client/src/const/serverPath.ts | 4 +- .../alcohol/useGetAlcoholListQuery.tsx | 43 +-- 18 files changed, 81 insertions(+), 670 deletions(-) delete mode 100644 client/public/mockServiceWorker.js delete mode 100644 client/src/assets/icons/Alcohol/BeerIcon.svg delete mode 100644 client/src/assets/icons/Alcohol/BrandyIcon.svg delete mode 100644 client/src/assets/icons/Alcohol/LiquorIcon.svg delete mode 100644 client/src/assets/icons/Alcohol/RumIcon.svg create mode 100644 client/src/assets/icons/Alcohol/SpiritsIcon.svg delete mode 100644 client/src/components/post/VirtualizedPostCardList.tsx diff --git a/client/package-lock.json b/client/package-lock.json index e34a485..4016b32 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -14,7 +14,6 @@ "@mui/material": "^5.14.15", "@tanstack/react-query": "^5.8.1", "@tanstack/react-query-devtools": "^5.8.1", - "@tanstack/react-virtual": "^3.0.1", "axios": "^1.6.0", "dayjs": "^1.11.10", "framer-motion": "^10.16.4", @@ -25,7 +24,6 @@ "react-dom": "^18", "react-intersection-observer": "^9.5.3", "react-quill": "^2.0.0", - "react-virtualized-auto-sizer": "^1.0.20", "sharp": "^0.32.6", "zustand": "^4.4.6" }, @@ -46,7 +44,6 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", - "@types/react-window-infinite-loader": "^1.0.9", "autoprefixer": "^10", "eslint": "^8", "eslint-config-next": "14.0.0", @@ -7224,31 +7221,6 @@ "react-dom": "^18.0.0" } }, - "node_modules/@tanstack/react-virtual": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.0.1.tgz", - "integrity": "sha512-IFOFuRUTaiM/yibty9qQ9BfycQnYXIDHGP2+cU+0LrFFGNhVxCXSQnaY6wkX8uJVteFEBjUondX0Hmpp7TNcag==", - "dependencies": { - "@tanstack/virtual-core": "3.0.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@tanstack/virtual-core": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.0.0.tgz", - "integrity": "sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/tannerlinsley" - } - }, "node_modules/@testing-library/dom": { "version": "9.3.3", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz", @@ -7783,25 +7755,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-window": { - "version": "1.8.8", - "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz", - "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==", - "dev": true, - "dependencies": { - "@types/react": "*" - } - }, - "node_modules/@types/react-window-infinite-loader": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/@types/react-window-infinite-loader/-/react-window-infinite-loader-1.0.9.tgz", - "integrity": "sha512-gEInTjQwURCnDOFyIEK2+fWB5gTjqwx30O62QfxA9stE5aiB6EWkGj4UMhc0axq7/FV++Gs/TGW8FtgEx0S6Tw==", - "dev": true, - "dependencies": { - "@types/react": "*", - "@types/react-window": "*" - } - }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -19296,15 +19249,6 @@ "react-dom": ">=16.6.0" } }, - "node_modules/react-virtualized-auto-sizer": { - "version": "1.0.20", - "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.20.tgz", - "integrity": "sha512-OdIyHwj4S4wyhbKHOKM1wLSj/UDXm839Z3Cvfg2a9j+He6yDa6i5p0qQvEiCnyQlGO/HyfSnigQwuxvYalaAXA==", - "peerDependencies": { - "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc", - "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0-rc" - } - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/client/package.json b/client/package.json index 40d9b75..1a2aab9 100644 --- a/client/package.json +++ b/client/package.json @@ -19,7 +19,6 @@ "@mui/material": "^5.14.15", "@tanstack/react-query": "^5.8.1", "@tanstack/react-query-devtools": "^5.8.1", - "@tanstack/react-virtual": "^3.0.1", "axios": "^1.6.0", "dayjs": "^1.11.10", "framer-motion": "^10.16.4", @@ -30,7 +29,6 @@ "react-dom": "^18", "react-intersection-observer": "^9.5.3", "react-quill": "^2.0.0", - "react-virtualized-auto-sizer": "^1.0.20", "sharp": "^0.32.6", "zustand": "^4.4.6" }, @@ -51,7 +49,6 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", - "@types/react-window-infinite-loader": "^1.0.9", "autoprefixer": "^10", "eslint": "^8", "eslint-config-next": "14.0.0", 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/wiki/(wiki-main)/page.tsx b/client/src/app/wiki/(wiki-main)/page.tsx index b7b24dc..c567bb9 100644 --- a/client/src/app/wiki/(wiki-main)/page.tsx +++ b/client/src/app/wiki/(wiki-main)/page.tsx @@ -1,28 +1,16 @@ -"use client"; -import { useState } from "react"; import AlcoholPagination from "@/components/wiki/AlcoholPagination"; import WikiAlcoholSelector from "@/components/wiki/WikiAlcoholSelector"; + import SectionHeading from "@/components/SectionHeading"; -import { Stack } from "@mui/material"; -const WikiPage = () => { - const [currentAlcoholNo, setCurrentAlcoholNo] = useState( - undefined - ); +const WikiPage = () => { return ( - - - { - setCurrentAlcoholNo(alcoholNo); - }} - /> - - + <> + + + + ); }; diff --git a/client/src/app/wiki/[alcoholNo]/page.tsx b/client/src/app/wiki/[alcoholNo]/page.tsx index abf2f75..58ad3f3 100644 --- a/client/src/app/wiki/[alcoholNo]/page.tsx +++ b/client/src/app/wiki/[alcoholNo]/page.tsx @@ -30,9 +30,9 @@ export async function generateMetadata({ params }: Props): Promise { nameOfApp, alcoholType, `${alcoholType}추천`, - taste.Aroma?.map((aroma) => `${aroma}향 ${alcoholType}`).join(", "), - taste.Finish?.map((finish) => `${finish}피니시 ${alcoholType}`).join(", "), - taste.Taste?.map((taste) => `${taste}맛 ${alcoholType}`).join(", "), + taste.Aroma.map((aroma) => `${aroma}향 ${alcoholType}`).join(", "), + taste.Finish.map((finish) => `${finish}피니시 ${alcoholType}`).join(", "), + taste.Taste.map((taste) => `${taste}맛 ${alcoholType}`).join(", "), ], openGraph: { title: `${nameOfApp} | ${alcoholType} ${alcoholName}`, diff --git a/client/src/assets/icons/Alcohol/BeerIcon.svg b/client/src/assets/icons/Alcohol/BeerIcon.svg deleted file mode 100644 index 1bfe9a5..0000000 --- a/client/src/assets/icons/Alcohol/BeerIcon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/client/src/assets/icons/Alcohol/BrandyIcon.svg b/client/src/assets/icons/Alcohol/BrandyIcon.svg deleted file mode 100644 index bdb2685..0000000 --- a/client/src/assets/icons/Alcohol/BrandyIcon.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/client/src/assets/icons/Alcohol/LiquorIcon.svg b/client/src/assets/icons/Alcohol/LiquorIcon.svg deleted file mode 100644 index 6cb8f28..0000000 --- a/client/src/assets/icons/Alcohol/LiquorIcon.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/client/src/assets/icons/Alcohol/RumIcon.svg b/client/src/assets/icons/Alcohol/RumIcon.svg deleted file mode 100644 index 1e41542..0000000 --- a/client/src/assets/icons/Alcohol/RumIcon.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/client/src/assets/icons/Alcohol/SpiritsIcon.svg b/client/src/assets/icons/Alcohol/SpiritsIcon.svg new file mode 100644 index 0000000..7855116 --- /dev/null +++ b/client/src/assets/icons/Alcohol/SpiritsIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/components/layout/CustomContainer.tsx b/client/src/components/layout/CustomContainer.tsx index fc0a888..8c18ee3 100644 --- a/client/src/components/layout/CustomContainer.tsx +++ b/client/src/components/layout/CustomContainer.tsx @@ -19,7 +19,6 @@ const CustomContainer = ({ sx, mt, children }: CustomContainerInterface) => { gap: 2, p: 2, minHeight: `calc(100vh - ${appbarHeight} - ${navbarHeight})`, - height:'100%' }} > {children} diff --git a/client/src/components/post/PostCardSkeleton.tsx b/client/src/components/post/PostCardSkeleton.tsx index 79420e2..f6f031a 100644 --- a/client/src/components/post/PostCardSkeleton.tsx +++ b/client/src/components/post/PostCardSkeleton.tsx @@ -1,28 +1,23 @@ -import { Box, Card, CardProps, Skeleton, Stack } from "@mui/material"; -import { Ref, forwardRef } from "react"; +import { Box, Card, Skeleton, Stack } from "@mui/material"; -const PostCardSkeleton = ( - cardProps?: Omit, - ref?: Ref -) => { +const PostCardSkeleton = () => { return ( - + - + - - + + @@ -37,4 +32,4 @@ const PostCardSkeleton = ( ); }; -export default forwardRef(PostCardSkeleton); +export default PostCardSkeleton; diff --git a/client/src/components/post/VirtualizedPostCardList.tsx b/client/src/components/post/VirtualizedPostCardList.tsx deleted file mode 100644 index 4667a96..0000000 --- a/client/src/components/post/VirtualizedPostCardList.tsx +++ /dev/null @@ -1,127 +0,0 @@ -"use client"; - -import PostCard from "@/components/post/PostCard"; -import useGetPostListInfiniteQuery, { - UseGetPostListQueryInterface, -} from "@/queries/post/useGetPostListInfiniteQuery"; - -import { memo, useEffect, useRef } from "react"; -import { useMemo } from "react"; -import getTokenFromLocalStorage from "@/utils/getTokenFromLocalStorage"; -import { postcardContext } from "@/store/post/PostCardContext"; -import PostCardSkeleton from "./PostCardSkeleton"; - -import { useVirtualizer } from "@tanstack/react-virtual"; - -function VirtualizedPostCardList({ - height, - width, - searchAlcoholNos, - searchKeyword, - searchUserNos, - sort, - ...props -}: UseGetPostListQueryInterface & { width: number; height: number }) { - const { data, fetchNextPage, isFetchingNextPage, hasNextPage, isSuccess } = - useGetPostListInfiniteQuery({ - searchAlcoholNos: - searchKeyword === "" && searchAlcoholNos ? searchAlcoholNos : undefined, - sort, - searchUserNos, - searchKeyword: searchKeyword !== "" ? searchKeyword : undefined, - ...props, - headers: { Authorization: getTokenFromLocalStorage() }, - }); - - const allRows = data ? data.pages.flatMap(({ content }) => content) : []; - - const parentRef = useRef(null); - - const rowVirtualizer = useVirtualizer({ - count: allRows.length, - getScrollElement: () => parentRef.current, - estimateSize: () => 550, - initialRect: { width, height }, - overscan: 5, - }); - - const hasResult = useMemo( - () => data && data.pages[0].content.length > 0, - [data] - ); - - const loadMoreItems = () => { - const [lastItem] = [...rowVirtualizer.getVirtualItems()].reverse(); - - if ( - lastItem && - lastItem.index >= allRows.length - 1 && - hasNextPage && - !isFetchingNextPage - ) { - fetchNextPage(); - } - }; - - useEffect(loadMoreItems, [ - hasNextPage, - fetchNextPage, - allRows.length, - isFetchingNextPage, - rowVirtualizer.getVirtualItems(), - ]); - - return ( - -
- {hasResult && isSuccess && ( -
-
- {rowVirtualizer.getVirtualItems().map((virtualRow) => { - const post = allRows[virtualRow.index]; - const isLoaderRow = virtualRow.index > allRows.length - 1; - - return ( -
- {isLoaderRow ? ( - hasNextPage && - ) : ( - - )} -
- ); - })} -
-
- )} -
- - ); -} - -export default memo(VirtualizedPostCardList); diff --git a/client/src/components/wiki/AlcoholPagination.tsx b/client/src/components/wiki/AlcoholPagination.tsx index 53cabb6..1ae2eb8 100644 --- a/client/src/components/wiki/AlcoholPagination.tsx +++ b/client/src/components/wiki/AlcoholPagination.tsx @@ -9,26 +9,25 @@ import usePushToWikiDetail from "@/hooks/wiki/usePushToWikiDetail"; import { useEffect, useState } from "react"; import { useQueryClient } from "@tanstack/react-query"; -const AlcoholPagenation = ({ alcoholTypeNo }: { alcoholTypeNo?: number }) => { +const AlcoholPagenation = () => { const [currentPage, setCurrentPage] = useState(1); const size = 10; const { data: alcohols } = useGetAlcoholListQuery({ searchKeyword: "", page: currentPage - 1, - alcoholType: alcoholTypeNo, size, }); - // const [totalCount, setTotalCount] = useState(alcohols?.totalPages); + const [totalCount, setTotalCount] = useState(alcohols?.totalCount); - // useEffect(() => { - // const isSameWithPreviousValue = - // totalCount === alcohols?.totalPages || alcohols?.totalPages === undefined; + useEffect(() => { + const isSameWithPreviousValue = + totalCount === alcohols?.totalCount || alcohols?.totalCount === undefined; - // if (isSameWithPreviousValue) return; - // setTotalCount(alcohols?.totalPages); - // }, [alcohols]); + if (isSameWithPreviousValue) return; + setTotalCount(alcohols?.totalCount); + }, [alcohols]); const queryClient = useQueryClient(); @@ -36,7 +35,6 @@ const AlcoholPagenation = ({ alcoholTypeNo }: { alcoholTypeNo?: number }) => { const handler = async () => { const nextPageParams = { searchKeyword: "", - alcoholType: alcoholTypeNo, size, page: currentPage + 1, }; @@ -63,7 +61,7 @@ const AlcoholPagenation = ({ alcoholTypeNo }: { alcoholTypeNo?: number }) => { onClickElementHandler({ alcoholName, alcoholNo }) @@ -71,7 +69,7 @@ const AlcoholPagenation = ({ alcoholTypeNo }: { alcoholTypeNo?: number }) => { /> setCurrentPage(page)} diff --git a/client/src/components/wiki/WikiAlcoholSelector.tsx b/client/src/components/wiki/WikiAlcoholSelector.tsx index ea1c67c..dfff919 100644 --- a/client/src/components/wiki/WikiAlcoholSelector.tsx +++ b/client/src/components/wiki/WikiAlcoholSelector.tsx @@ -1,77 +1,43 @@ "use client"; -import { useState, useCallback, useMemo, useEffect } from "react"; -import { Stack, StackProps } from "@mui/material"; +import { useState, useCallback, useMemo } from "react"; +import { Stack } from "@mui/material"; import WikiAlcoholSelectorBtn from "./WikiAlcoholSelectorBtn"; import WineIcon from "@/assets/icons/Alcohol/WineIcon.svg"; -import BrandyIcon from "@/assets/icons/Alcohol/BrandyIcon.svg"; import AllAlcoholIcon from "@/assets/icons/Alcohol/AllAlcoholIcon.svg"; import WiskyIcon from "@/assets/icons/Alcohol/WiskyIcon.svg"; -import LiquorIcon from "@/assets/icons/Alcohol/LiquorIcon.svg"; -import BeerIcon from "@/assets/icons/Alcohol/BeerIcon.svg"; -import RumIcon from "@/assets/icons/Alcohol/RumIcon.svg"; - +import SpiritsIcon from "@/assets/icons/Alcohol/SpiritsIcon.svg"; import TraditionalAlcoholIcon from "@/assets/icons/Alcohol/TraditionalAlcoholIcon.svg"; import SakeIcon from "@/assets/icons/Alcohol/SakeIcon.svg"; -interface WikiAlcoholSelectorInterface extends Omit { - onChange?: (selectedAlcoholNo: number | undefined) => void; -} - -const WikiAlcoholSelector = ({ onChange }: WikiAlcoholSelectorInterface) => { +const WikiAlcoholSelector = () => { const btnList = useMemo( () => [ - { - title: "전체", - iconComponent: , - alcoholTypeNo: undefined, - }, - { title: "포도주", iconComponent: , alcoholTypeNo: 167 }, - { title: "브랜디", iconComponent: , alcoholTypeNo: 69 }, - { title: "위스키", iconComponent: , alcoholTypeNo: 111 }, - { title: "리큐르", iconComponent: , alcoholTypeNo: 33 }, - { title: "맥주", iconComponent: , alcoholTypeNo: 2 }, - - { - title: "우리술", - iconComponent: , - alcoholTypeNo: 109, - }, - { title: "사케", iconComponent: , alcoholTypeNo: 78 }, - { title: "럼", iconComponent: , alcoholTypeNo: 28 }, - { - title: "미분류", - iconComponent: , - alcoholTypeNo: 149, - }, + { title: "전체", iconComponent: }, + { title: "포도주", iconComponent: }, + { title: "위스키", iconComponent: }, + { title: "증류주", iconComponent: }, + { title: "우리술", iconComponent: }, + { title: "사케", iconComponent: }, ], [] ); - const [selectedAlcohol, setSelectedAlcohol] = useState( - btnList[0].alcoholTypeNo - ); - - useEffect(() => { - onChange?.(selectedAlcohol); - }, [selectedAlcohol]); + const [selectedAlcohol, setSelectedAlcohol] = useState(btnList[0].title); - const clickHandler = useCallback((alcoholTypeNo: number | undefined) => { - setSelectedAlcohol(alcoholTypeNo); + const clickHandler = useCallback((title: string) => { + setSelectedAlcohol(title); }, []); return ( - - - {btnList.map(({ alcoholTypeNo, title, iconComponent }) => ( - clickHandler(alcoholTypeNo)} - iconComponent={iconComponent} - /> - ))} - + + {btnList.map((btnInfo) => ( + clickHandler(btnInfo.title)} + {...btnInfo} + /> + ))} ); }; diff --git a/client/src/components/wiki/detail/AlcoholDetailPage.tsx b/client/src/components/wiki/detail/AlcoholDetailPage.tsx index 400d4c4..f38e121 100644 --- a/client/src/components/wiki/detail/AlcoholDetailPage.tsx +++ b/client/src/components/wiki/detail/AlcoholDetailPage.tsx @@ -38,19 +38,19 @@ const AlcoholDetailPage = ({ alcoholNo, initialData, children }: Props) => { Aroma - {alcoholInfo.taste.Aroma?.join(", ")} + {alcoholInfo.taste.Aroma.join(", ")} Taste - {alcoholInfo.taste.Taste?.join(", ")} + {alcoholInfo.taste.Taste.join(", ")} Finish - {alcoholInfo.taste.Finish?.join(", ")} + {alcoholInfo.taste.Finish.join(", ")} diff --git a/client/src/const/serverPath.ts b/client/src/const/serverPath.ts index 56edf9e..0703103 100644 --- a/client/src/const/serverPath.ts +++ b/client/src/const/serverPath.ts @@ -91,13 +91,13 @@ export const REMOVE_FILE = (attachNo: string) => `/attach/${attachNo}` as const; /** * 알콜리스트를 받아오는 URL */ -export const GET_ALCOHOL_LIST = "/alcohols/v2" as const; +export const GET_ALCOHOL_LIST = "/alcohols" as const; /** * 알콜 디테일을 받아오는 URL */ export const GET_ALCOHOL_DETAIL = (id: string) => - `/alcohols/${id}` as const; + `${GET_ALCOHOL_LIST}/${id}` as const; /** * 포스트의 PK를 입력받아 해당 PK의 게시글의 좋아요 취소를 요청 diff --git a/client/src/queries/alcohol/useGetAlcoholListQuery.tsx b/client/src/queries/alcohol/useGetAlcoholListQuery.tsx index b02dc06..f6a4d25 100644 --- a/client/src/queries/alcohol/useGetAlcoholListQuery.tsx +++ b/client/src/queries/alcohol/useGetAlcoholListQuery.tsx @@ -1,6 +1,5 @@ import { GET_ALCOHOL_LIST } from "@/const/serverPath"; import axios from "@/libs/axios"; -import PageNated from "@/types/Pagenated"; import { AlcoholDetailInterface } from "@/types/alcohol/AlcoholInterface"; import { useQuery } from "@tanstack/react-query"; @@ -8,24 +7,17 @@ export interface useGetAlcoholListQueryInterface { page?: number; size?: number; searchKeyword?: string; - alcoholType?: number; } const useGetAlcoholListQuery = ({ searchKeyword = "", size = 5, page = 0, - alcoholType, }: useGetAlcoholListQueryInterface) => { return useQuery({ - queryKey: AlcohilListQueryKey.byKeyword({ - page, - size, - searchKeyword, - alcoholType, - }), + queryKey: AlcohilListQueryKey.byKeyword({ page, size, searchKeyword }), queryFn: async () => - await getAlcoholListByKeyword({ searchKeyword, size, page, alcoholType }), + await getAlcoholListByKeyword({ searchKeyword, size, page }), enabled: searchKeyword != undefined, }); }; @@ -34,31 +26,24 @@ export const getAlcoholListByKeyword = async ({ searchKeyword, size, page, - alcoholType, }: useGetAlcoholListQueryInterface) => { - const { data } = await axios.get>( - GET_ALCOHOL_LIST, - { - params: { - page, - size, - searchKeyword, - alcoholType, - }, - } - ); + const { data } = await axios.get<{ + list: AlcoholDetailInterface[]; + totalCount: number; + }>(GET_ALCOHOL_LIST, { + params: { + page, + size, + searchKeyword, + }, + }); return data; }; export const AlcohilListQueryKey = { all: ["alcohol"] as const, - byKeyword: ({ - searchKeyword, - size, - page, - alcoholType, - }: useGetAlcoholListQueryInterface) => - ["alcohol", { searchKeyword, size, page, alcoholType }] as const, + byKeyword: ({ searchKeyword, size, page }: useGetAlcoholListQueryInterface) => + ["alcohol", { searchKeyword, size, page }] as const, }; export default useGetAlcoholListQuery;