From e3eaa42f1448e134aef2d290a58f4e24573428c5 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Fri, 26 Jul 2024 11:58:18 +0900 Subject: [PATCH 01/33] =?UTF-8?q?fix:=20src/index.tsx=EC=97=90=EC=84=9C=20?= =?UTF-8?q?enableMocking=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/index.tsx | 25 ++++++++----------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 14647905d..b3c0887c6 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -38,20 +38,11 @@ const router = createBrowserRouter([ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); -async function enableMocking() { - if (process.env.MSW) { - const { worker } = await import('./mocks/browser'); - return worker.start(); - } -} - -enableMocking().then(() => { - root.render( - - - - - - , - ); -}); +root.render( + + + + + + , +); From 0cb8d194c5308e95baf4eff9ebf45df2d78fb086 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 17:39:50 +0900 Subject: [PATCH 02/33] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EA=B7=B8?= =?UTF-8?q?=EB=A3=B9=20=EC=83=9D=EC=84=B1=20=EC=8B=9C=20=EC=BD=94=EB=A9=98?= =?UTF-8?q?=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=AA=85=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 컴포넌트명 변경: RevewComment -> ReveweeComments - reviewGroup의 description이 빈문자열이면 기본값을 보여주는 것으로 변경 --- .../src/components/common/ReviewComment/index.tsx | 11 ----------- .../components/common/RevieweeComments/index.tsx | 13 +++++++++++++ .../{ReviewComment => RevieweeComments}/styles.ts | 2 +- frontend/src/components/common/index.tsx | 2 +- .../src/mocks/mockData/detailedReviewMockData.ts | 2 +- frontend/src/pages/DetailedReviewPage/index.tsx | 4 ++-- 6 files changed, 18 insertions(+), 16 deletions(-) delete mode 100644 frontend/src/components/common/ReviewComment/index.tsx create mode 100644 frontend/src/components/common/RevieweeComments/index.tsx rename frontend/src/components/common/{ReviewComment => RevieweeComments}/styles.ts (87%) diff --git a/frontend/src/components/common/ReviewComment/index.tsx b/frontend/src/components/common/ReviewComment/index.tsx deleted file mode 100644 index 64351c54f..000000000 --- a/frontend/src/components/common/ReviewComment/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as S from './styles'; - -interface ReviewCommentProps { - comment: string; -} - -const ReviewComments = ({ comment }: ReviewCommentProps) => { - return {comment}; -}; - -export default ReviewComments; diff --git a/frontend/src/components/common/RevieweeComments/index.tsx b/frontend/src/components/common/RevieweeComments/index.tsx new file mode 100644 index 000000000..9092ed1cd --- /dev/null +++ b/frontend/src/components/common/RevieweeComments/index.tsx @@ -0,0 +1,13 @@ +import * as S from './styles'; + +interface RevieweeCommentProps { + comment: string; +} + +const DEFAULT_COMMENTS = '안녕하세요! 리뷰 잘 부탁드립니다.'; + +const RevieweeComments = ({ comment }: RevieweeCommentProps) => { + return {comment || DEFAULT_COMMENTS}; +}; + +export default RevieweeComments; diff --git a/frontend/src/components/common/ReviewComment/styles.ts b/frontend/src/components/common/RevieweeComments/styles.ts similarity index 87% rename from frontend/src/components/common/ReviewComment/styles.ts rename to frontend/src/components/common/RevieweeComments/styles.ts index 3073cad59..d861b5496 100644 --- a/frontend/src/components/common/ReviewComment/styles.ts +++ b/frontend/src/components/common/RevieweeComments/styles.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const ReviewComment = styled.p` +export const RevieweeComments = styled.p` width: inherit; height: 3rem; margin-top: 1.6rem; diff --git a/frontend/src/components/common/index.tsx b/frontend/src/components/common/index.tsx index dbcb4a5cd..e466d0245 100644 --- a/frontend/src/components/common/index.tsx +++ b/frontend/src/components/common/index.tsx @@ -3,6 +3,6 @@ export { default as DropDown } from './DropDown'; export { default as SearchInput } from './SearchInput'; export { default as ProjectImg } from './ProjectImg'; export { default as ReviewDate } from './ReviewDate'; -export { default as ReviewComment } from './ReviewComment'; +export { default as RevieweeComments } from './RevieweeComments'; export { default as MultilineTextViewer } from './MultilineTextViewer'; export * from './modals'; diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts index df88cd590..272a5d6a3 100644 --- a/frontend/src/mocks/mockData/detailedReviewMockData.ts +++ b/frontend/src/mocks/mockData/detailedReviewMockData.ts @@ -10,7 +10,7 @@ export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = { reviewerGroup: { id: 123456, name: 'review-me', - description: 'vite 쓰고 싶다.', + description: '', thumnailUrl: '', }, reviews: [ diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx index 615b53d43..aef49beae 100644 --- a/frontend/src/pages/DetailedReviewPage/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/index.tsx @@ -1,7 +1,7 @@ import { useState, useEffect } from 'react'; import { useLocation, useParams } from 'react-router'; -import { ReviewComment } from '@/components'; +import { RevieweeComments } from '@/components'; import { DetailReviewData } from '@/types'; import { getDetailedReviewApi } from '../../apis/review'; @@ -51,7 +51,7 @@ const DetailedReviewPage = () => { isPublic={true} handleClickToggleButton={() => console.log('click toggle ')} /> - + {detailedReview.reviews.map((item, index) => ( ))} From 0a4cec6e1170a52e3bf01a739b2755d7b382f829 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 17:42:13 +0900 Subject: [PATCH 03/33] =?UTF-8?q?refactor:=20=EC=84=9C=EB=B2=84=20DB?= =?UTF-8?q?=EC=97=90=20=EC=9E=88=EB=8A=94=20=EB=A6=AC=EB=B7=B0=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EC=9C=84=ED=95=9C=20=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 현재 DB에 있는 리뷰 데이터를 목 서버에서도 사용하고, 사이드바 페이지 이동 시에도 활용할 수 있도록 관련 value들을 상수화 함 --- frontend/src/components/layouts/Sidebar/index.tsx | 3 ++- frontend/src/mocks/handlers/review.ts | 14 ++++++++++---- .../src/mocks/mockData/detailedReviewMockData.ts | 5 +++++ 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/layouts/Sidebar/index.tsx b/frontend/src/components/layouts/Sidebar/index.tsx index b89589fe6..88dcbe360 100644 --- a/frontend/src/components/layouts/Sidebar/index.tsx +++ b/frontend/src/components/layouts/Sidebar/index.tsx @@ -2,6 +2,7 @@ import { useLocation, Link } from 'react-router-dom'; import CloseIcon from '@/assets/close.svg'; import LogoIcon from '@/assets/logo.svg'; +import { DETAILED_PAGE_MOCK_API_SETTING_VALUES } from '@/mocks/mockData/detailedReviewMockData'; import { PAGE } from '../../../constants'; @@ -11,7 +12,7 @@ const PATH = { myPage: '/user/mypage', reviewWriting: '/user/review-writing', reviewPreviewList: '/user/review-preview-list', - detailedReview: '/user/detailed-review/0?memberId=1', + detailedReview: `/user/detailed-review/${DETAILED_PAGE_MOCK_API_SETTING_VALUES.reviewId}?memberId=${DETAILED_PAGE_MOCK_API_SETTING_VALUES.memberId}`, reviewGroupManagement: '/user/review-group-management', }; diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts index 2c065c259..7c762ad28 100644 --- a/frontend/src/mocks/handlers/review.ts +++ b/frontend/src/mocks/handlers/review.ts @@ -2,14 +2,20 @@ import { http, HttpResponse } from 'msw'; import endPoint from '@/apis/endpoints'; -import { DETAILED_REVIEW_MOCK_DATA } from '../mockData/detailedReviewMockData'; +import { DETAILED_REVIEW_MOCK_DATA, DETAILED_PAGE_MOCK_API_SETTING_VALUES } from '../mockData/detailedReviewMockData'; import { REVIEW_PREVIEW_LIST } from '../mockData/reviewPreviewList'; import { REVIEW_WRITING_DATA } from '../mockData/reviewWritingData'; const getDetailedReview = () => - http.get(endPoint.gettingDetailedReview(123456, 123456), async ({ request }) => { - return HttpResponse.json(DETAILED_REVIEW_MOCK_DATA); - }); + http.get( + endPoint.gettingDetailedReview( + DETAILED_PAGE_MOCK_API_SETTING_VALUES.reviewId, + DETAILED_PAGE_MOCK_API_SETTING_VALUES.memberId, + ), + async () => { + return HttpResponse.json(DETAILED_REVIEW_MOCK_DATA); + }, + ); const getDataToWriteReview = () => http.get(endPoint.gettingDataToWriteReview(10), async ({ request }) => { diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts index 272a5d6a3..7e2a542c1 100644 --- a/frontend/src/mocks/mockData/detailedReviewMockData.ts +++ b/frontend/src/mocks/mockData/detailedReviewMockData.ts @@ -1,5 +1,10 @@ import { DetailReviewData } from '@/types'; +export const DETAILED_PAGE_MOCK_API_SETTING_VALUES = { + reviewId: 5, + memberId: 2, +}; + const ANSWER = '림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. 림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. '; From 19fa32b6e7ff31c8acb311de6a11d06eece1d2b1 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 18:23:03 +0900 Subject: [PATCH 04/33] =?UTF-8?q?feat=20:=20QueryClient,=20QueryClientProv?= =?UTF-8?q?ider=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - src/index.tsx에 QueryClient, QueryClientProvider 적용 --- frontend/src/index.tsx | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index b3c0887c6..fff5dca0c 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,4 +1,5 @@ import { Global, ThemeProvider } from '@emotion/react'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import React from 'react'; import ReactDOM from 'react-dom/client'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; @@ -11,6 +12,8 @@ import ReviewWritingPage from './pages/ReviewWriting'; import globalStyles from './styles/globalStyles'; import theme from './styles/theme'; +const queryClient = new QueryClient(); + const router = createBrowserRouter([ { path: '/', @@ -38,11 +41,22 @@ const router = createBrowserRouter([ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); -root.render( - - - - - - , -); +async function enableMocking() { + if (process.env.NODE_ENV === 'development') { + const { worker } = await import('./mocks/browser'); + return worker.start(); + } +} + +enableMocking().then(() => { + root.render( + + + + + + + + , + ); +}); From 339c22c6e715423d03e8b1b78764925f6785f65b Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 18:30:18 +0900 Subject: [PATCH 05/33] =?UTF-8?q?fix:=20dependencies=EC=97=90=20=EC=9E=88?= =?UTF-8?q?=EB=8A=94=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=ED=8C=A8=ED=82=A4?= =?UTF-8?q?=EC=A7=80=EB=93=A4=EC=9D=84=20devDependencies=EB=A1=9C=20?= =?UTF-8?q?=EC=98=AE=EA=B9=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 8 ++++---- frontend/yarn.lock | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index cb7270ae1..e8b6883ff 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,15 +15,13 @@ "@emotion/styled": "^11.11.5", "@tanstack/react-query": "^5.51.1", "@tanstack/react-query-devtools": "^5.51.1", - "@testing-library/jest-dom": "^6.4.7", - "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.5.12", "dotenv-webpack": "^8.1.0", + "jest": "^29.7.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router": "^6.24.1", - "react-router-dom": "^6.24.1", - "jest": "^29.7.0" + "react-router-dom": "^6.24.1" }, "devDependencies": { "@babel/core": "^7.24.7", @@ -33,7 +31,9 @@ "@emotion/babel-plugin": "^11.11.0", "@stylelint/postcss-css-in-js": "^0.38.0", "@testing-library/dom": "^10.4.0", + "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", + "@testing-library/user-event": "^14.5.2", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.16.0", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 66d2ad309..f7dd5879c 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1098,9 +1098,9 @@ regenerator-runtime "^0.14.0" "@babel/runtime@^7.9.2": - version "7.24.8" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e" - integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA== + version "7.25.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb" + integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw== dependencies: regenerator-runtime "^0.14.0" @@ -1824,7 +1824,7 @@ lz-string "^1.5.0" pretty-format "^27.0.2" -"@testing-library/jest-dom@^6.4.7": +"@testing-library/jest-dom@^6.4.8": version "6.4.8" resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.8.tgz#9c435742b20c6183d4e7034f2b329d562c079daa" integrity sha512-JD0G+Zc38f5MBHA4NgxQMR5XtO5Jx9g86jqturNTt2WUfRmLDIY7iKkWHDCCTiDuFMre6nxAD5wHw9W5kI4rGw== From 90f178496e8206e246143416c84147b6e712f787 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 18:30:52 +0900 Subject: [PATCH 06/33] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20react-query=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/review.ts | 4 +- .../src/pages/DetailedReviewPage/index.tsx | 41 ++++++++----------- 2 files changed, 19 insertions(+), 26 deletions(-) diff --git a/frontend/src/apis/review.ts b/frontend/src/apis/review.ts index 9790f0df0..67161de91 100644 --- a/frontend/src/apis/review.ts +++ b/frontend/src/apis/review.ts @@ -1,5 +1,5 @@ //리뷰 작성 -import { ReviewData, WritingReviewInfoData } from '@/types'; +import { DetailReviewData, ReviewData, WritingReviewInfoData } from '@/types'; import endPoint from './endpoints'; @@ -46,7 +46,7 @@ export const getDetailedReviewApi = async ({ reviewId, memberId }: { reviewId: n throw new Error('상세 리뷰를 불러오는 데 실패했습니다.'); } - const data = await response.json(); + const data: DetailReviewData = await response.json(); return data; }; diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx index aef49beae..3c6bdaad9 100644 --- a/frontend/src/pages/DetailedReviewPage/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/index.tsx @@ -1,11 +1,10 @@ -import { useState, useEffect } from 'react'; +import { useQuery } from '@tanstack/react-query'; import { useLocation, useParams } from 'react-router'; +import { getDetailedReviewApi } from '@/apis/review'; import { RevieweeComments } from '@/components'; import { DetailReviewData } from '@/types'; -import { getDetailedReviewApi } from '../../apis/review'; - import KeywordSection from './components/KeywordSection'; import ReviewDescription from './components/ReviewDescription'; import ReviewSection from './components/ReviewSection/index'; @@ -17,30 +16,24 @@ const DetailedReviewPage = () => { const queryParams = new URLSearchParams(location.search); const memberId = queryParams.get('memberId'); - const [detailedReview, setDetailReview] = useState(); - const [isLoading, setIsLoading] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); - - useEffect(() => { - const fetchReview = async () => { - try { - const result = await getDetailedReviewApi({ reviewId: Number(id), memberId: Number(memberId) }); - - setDetailReview(result); - setErrorMessage(''); - } catch (error) { - setErrorMessage('리뷰를 불러오는 데 실패했습니다.'); - } finally { - setIsLoading(false); - } - }; - - fetchReview(); - }, [id]); + const fetchDetailedReview = async (reviewId: number, memberId: number) => { + const result = await getDetailedReviewApi({ reviewId, memberId }); + return result; + }; + + const { + data: detailedReview, + isLoading, + error, + } = useQuery({ + queryKey: ['detailedReview', id, memberId], + queryFn: () => fetchDetailedReview(Number(id), Number(memberId)), + enabled: !!id && !!memberId, + }); if (isLoading) return
Loading...
; - if (errorMessage) return
Error: {errorMessage}
; + if (error) return
Error: {error.message}
; if (!detailedReview) return
Error: 상세보기 리뷰 데이터를 가져올 수 없어요.
; return ( From f2e96a73441f668def3448ee4ff61084ed53300a Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 18:39:03 +0900 Subject: [PATCH 07/33] =?UTF-8?q?feat=20:=20msw=EC=97=90=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20404?= =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/mocks/handlers/review.ts | 16 ++++++++++++++-- .../src/mocks/mockData/detailedReviewMockData.ts | 5 +++++ 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts index 7c762ad28..e3501ad37 100644 --- a/frontend/src/mocks/handlers/review.ts +++ b/frontend/src/mocks/handlers/review.ts @@ -2,7 +2,11 @@ import { http, HttpResponse } from 'msw'; import endPoint from '@/apis/endpoints'; -import { DETAILED_REVIEW_MOCK_DATA, DETAILED_PAGE_MOCK_API_SETTING_VALUES } from '../mockData/detailedReviewMockData'; +import { + DETAILED_REVIEW_MOCK_DATA, + DETAILED_PAGE_MOCK_API_SETTING_VALUES, + DETAILED_PAGE_ERROR_API_VALUES, +} from '../mockData/detailedReviewMockData'; import { REVIEW_PREVIEW_LIST } from '../mockData/reviewPreviewList'; import { REVIEW_WRITING_DATA } from '../mockData/reviewWritingData'; @@ -17,6 +21,14 @@ const getDetailedReview = () => }, ); +const getWrongDetailReview = () => + http.get( + endPoint.gettingDetailedReview(DETAILED_PAGE_ERROR_API_VALUES.reviewId, DETAILED_PAGE_ERROR_API_VALUES.memberId), + async () => { + return HttpResponse.json({ error: '잘못된 상세리뷰 요청' }, { status: 404 }); + }, + ); + const getDataToWriteReview = () => http.get(endPoint.gettingDataToWriteReview(10), async ({ request }) => { return HttpResponse.json(REVIEW_WRITING_DATA); @@ -27,6 +39,6 @@ const getReviewPreviewList = () => return HttpResponse.json(REVIEW_PREVIEW_LIST); }); -const reviewHandler = [getDetailedReview(), getReviewPreviewList(), getDataToWriteReview()]; +const reviewHandler = [getDetailedReview(), getWrongDetailReview(), getReviewPreviewList(), getDataToWriteReview()]; export default reviewHandler; diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts index 7e2a542c1..003a5ffb2 100644 --- a/frontend/src/mocks/mockData/detailedReviewMockData.ts +++ b/frontend/src/mocks/mockData/detailedReviewMockData.ts @@ -5,6 +5,11 @@ export const DETAILED_PAGE_MOCK_API_SETTING_VALUES = { memberId: 2, }; +export const DETAILED_PAGE_ERROR_API_VALUES = { + reviewId: 0, + memberId: 0, +}; + const ANSWER = '림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. 림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. \n 바람은 여전히 그를 감싸며, 그의 마음 속 깊은 곳에 있는 꿈과 희망을 불러일으켰습니다.\n 림순은 미소 지으며 앞으로 나아갔습니다.림순의 바람은 그윽한 산들바람처럼 잔잔하게 흘러갔습니다. \n 눈부신 햇살이 그의 어깨를 감싸며, 푸른 하늘 아래 펼쳐진 들판을 바라보았습니다.\n 그의 마음은 자연의 아름다움 속에서 평온을 찾았고, 그 순간마다 삶의 소중함을 느꼈습니다.\n 그는 늘 그러한 순간들을 기억하며, 미래의 나날들을 기대했습니다. '; From 9721bda6e54fd1755963d7789ac1b088d947f3c2 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 19:53:09 +0900 Subject: [PATCH 08/33] =?UTF-8?q?ci:=20react-error-boundary=20=EC=84=A4?= =?UTF-8?q?=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package.json | 1 + frontend/yarn.lock | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/frontend/package.json b/frontend/package.json index e8b6883ff..5b3f60274 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,6 +20,7 @@ "jest": "^29.7.0", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-error-boundary": "^4.0.13", "react-router": "^6.24.1", "react-router-dom": "^6.24.1" }, diff --git a/frontend/yarn.lock b/frontend/yarn.lock index f7dd5879c..710d2bb82 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -6577,6 +6577,13 @@ react-dom@^18.3.1: loose-envify "^1.1.0" scheduler "^0.23.2" +react-error-boundary@^4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz#80386b7b27b1131c5fbb7368b8c0d983354c7947" + integrity sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ== + dependencies: + "@babel/runtime" "^7.12.5" + react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" From 9e31285d9c3e2b9b4b0c84308f4acfa6ea9adc19 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 19:54:01 +0900 Subject: [PATCH 09/33] =?UTF-8?q?feat:=20Outlet=EC=97=90=20QueryErrorReset?= =?UTF-8?q?Boundary,ErrorBoundary,=20Suspense=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c9c093b6e..49b7f9353 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,8 +1,22 @@ +import { QueryErrorResetBoundary } from '@tanstack/react-query'; +import { Suspense } from 'react'; +import { ErrorBoundary, FallbackProps } from 'react-error-boundary'; import { Outlet } from 'react-router'; import { Main, PageLayout, Sidebar, Topbar, SideModal } from './components'; import { useSidebar } from './hooks'; +// 에러가 발생했을 때 보여줄 Fallback 컴포넌트 +function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) { + return ( +
+

오류:

+ 
{error.message}
+ +
+ ); +} + const App = () => { const { isSidebarHidden, isSidebarModalOpen, closeSidebar, openSidebar } = useSidebar(); @@ -15,7 +29,15 @@ const App = () => { )}
- + + {({ reset }) => ( + + 로딩 중....}> + + + + )} +
); From 251af38f86797522e0a914c38d12efdc6c373312 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 19:55:58 +0900 Subject: [PATCH 10/33] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20useSuspenseQuer?= =?UTF-8?q?y=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/DetailedReviewPage/index.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx index 3c6bdaad9..af7d7b48a 100644 --- a/frontend/src/pages/DetailedReviewPage/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/index.tsx @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { useLocation, useParams } from 'react-router'; import { getDetailedReviewApi } from '@/apis/review'; @@ -7,7 +7,7 @@ import { DetailReviewData } from '@/types'; import KeywordSection from './components/KeywordSection'; import ReviewDescription from './components/ReviewDescription'; -import ReviewSection from './components/ReviewSection/index'; +import ReviewSection from './components/ReviewSection'; import * as S from './styles'; const DetailedReviewPage = () => { @@ -21,20 +21,12 @@ const DetailedReviewPage = () => { return result; }; - const { - data: detailedReview, - isLoading, - error, - } = useQuery({ + const { data: detailedReview } = useSuspenseQuery({ queryKey: ['detailedReview', id, memberId], queryFn: () => fetchDetailedReview(Number(id), Number(memberId)), - enabled: !!id && !!memberId, }); - if (isLoading) return
Loading...
; - - if (error) return
Error: {error.message}
; - if (!detailedReview) return
Error: 상세보기 리뷰 데이터를 가져올 수 없어요.
; + if (!detailedReview) throw new Error(' 상세보기 리뷰 데이터를 가져올 수 없어요.'); return ( From e45ddb43784c9f59a129acd0fa89c6d5b99ff208 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 23:56:54 +0900 Subject: [PATCH 11/33] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20resource,=20que?= =?UTF-8?q?ryString=20key=20=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/endpoints.ts | 9 ++++++++- frontend/src/pages/DetailedReviewPage/index.tsx | 3 ++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/frontend/src/apis/endpoints.ts b/frontend/src/apis/endpoints.ts index 1e07ca7f3..5c1809380 100644 --- a/frontend/src/apis/endpoints.ts +++ b/frontend/src/apis/endpoints.ts @@ -1,7 +1,14 @@ +export const DETAILED_REVIEW_API_PARAMS = { + resource: 'reviews', + queryString: { + memberId: 'memberId', + }, +}; + const endPoint = { postingReview: `${process.env.API_BASE_URL}/reviews`, gettingDetailedReview: (reviewId: number, memberId: number) => - `${process.env.API_BASE_URL}/reviews/${reviewId}?memberId=${memberId}`, + `${process.env.API_BASE_URL}/${DETAILED_REVIEW_API_PARAMS.resource}/${reviewId}?${DETAILED_REVIEW_API_PARAMS.queryString.memberId}=${memberId}`, gettingDataToWriteReview: (reviewerGroupId: number) => `${process.env.API_BASE_URL}/reviews/write?reviewerGroupId=${reviewerGroupId}`, gettingReviewList: (revieweeId: number, lastReviewId: number, memberId: number) => diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx index af7d7b48a..ae0b58aff 100644 --- a/frontend/src/pages/DetailedReviewPage/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/index.tsx @@ -1,6 +1,7 @@ import { useSuspenseQuery } from '@tanstack/react-query'; import { useLocation, useParams } from 'react-router'; +import { DETAILED_REVIEW_API_PARAMS } from '@/apis/endpoints'; import { getDetailedReviewApi } from '@/apis/review'; import { RevieweeComments } from '@/components'; import { DetailReviewData } from '@/types'; @@ -14,7 +15,7 @@ const DetailedReviewPage = () => { const { id } = useParams<{ id: string }>(); const location = useLocation(); const queryParams = new URLSearchParams(location.search); - const memberId = queryParams.get('memberId'); + const memberId = queryParams.get(DETAILED_REVIEW_API_PARAMS.queryString.memberId); const fetchDetailedReview = async (reviewId: number, memberId: number) => { const result = await getDetailedReviewApi({ reviewId, memberId }); From 41d8fb8f3bbb3b21df3e71fcf7edc4452d934bcf Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 23:57:49 +0900 Subject: [PATCH 12/33] =?UTF-8?q?refactor:=20=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=20react-query=20k?= =?UTF-8?q?ey=20=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/index.ts | 2 ++ frontend/src/constants/queryKeys.ts | 3 +++ frontend/src/pages/DetailedReviewPage/index.tsx | 3 ++- 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 frontend/src/constants/queryKeys.ts diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts index c3a84df74..c048ec1aa 100644 --- a/frontend/src/constants/index.ts +++ b/frontend/src/constants/index.ts @@ -1 +1,3 @@ export * from './page'; +export * from './review'; +export * from './queryKeys'; diff --git a/frontend/src/constants/queryKeys.ts b/frontend/src/constants/queryKeys.ts new file mode 100644 index 000000000..ef3f32e4b --- /dev/null +++ b/frontend/src/constants/queryKeys.ts @@ -0,0 +1,3 @@ +export const REVIEW_QUERY_KEYS = { + detailedReview: 'detailedReview', +}; diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx index ae0b58aff..ad94a7b94 100644 --- a/frontend/src/pages/DetailedReviewPage/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/index.tsx @@ -4,6 +4,7 @@ import { useLocation, useParams } from 'react-router'; import { DETAILED_REVIEW_API_PARAMS } from '@/apis/endpoints'; import { getDetailedReviewApi } from '@/apis/review'; import { RevieweeComments } from '@/components'; +import { REVIEW_QUERY_KEYS } from '@/constants'; import { DetailReviewData } from '@/types'; import KeywordSection from './components/KeywordSection'; @@ -23,7 +24,7 @@ const DetailedReviewPage = () => { }; const { data: detailedReview } = useSuspenseQuery({ - queryKey: ['detailedReview', id, memberId], + queryKey: [REVIEW_QUERY_KEYS.detailedReview, id, memberId], queryFn: () => fetchDetailedReview(Number(id), Number(memberId)), }); From 54d927cbf118d466cced35964e49f2659805ff96 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 23:58:20 +0900 Subject: [PATCH 13/33] =?UTF-8?q?refactor:=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=86=8D=EC=97=90=EC=84=9C?= =?UTF-8?q?=EB=A7=8C=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8A=94=20=EC=83=81?= =?UTF-8?q?=EC=88=98=EB=93=A4=20=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DetailedReviewPage/components/ReviewDescription/index.tsx | 3 ++- .../DetailedReviewPage/components/ReviewSection/index.tsx | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx index fe0f94355..1e5da06b8 100644 --- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx @@ -7,6 +7,7 @@ import LockToggle from '../LockToggle'; import * as S from './styles'; const PROJECT_IMAGE_SIZE = '6rem'; +const DATE_TITLE = '리뷰 작성일'; interface ReviewDescriptionProps extends Omit, Omit { isPublic: boolean; @@ -26,7 +27,7 @@ const ReviewDescription = ({ {projectName} - + diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx index c730feeaf..9c5f44311 100644 --- a/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/components/ReviewSection/index.tsx @@ -3,6 +3,8 @@ import { MultilineTextViewer } from '@/components'; import ReviewSectionHeader from '../ReviewSectionHeader'; import * as S from './styles'; + +const INDEX_OFFSET = 1; interface ReviewSectionProps { question: string; answer: string; @@ -12,7 +14,7 @@ interface ReviewSectionProps { const ReviewSection = ({ question, answer, index }: ReviewSectionProps) => { return ( - + From df18d3ac193d6ed3c688fe5c7acd68cfef3c6706 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Sat, 27 Jul 2024 23:59:03 +0900 Subject: [PATCH 14/33] =?UTF-8?q?refactor:=20DetailedReviewPage/components?= =?UTF-8?q?=EC=97=90=20index.tsx=EB=A5=BC=20=EC=B6=94=EA=B0=80=ED=95=B4=20?= =?UTF-8?q?import=20=EA=B2=BD=EB=A1=9C=20=EA=B0=84=EA=B2=B0=ED=95=98?= =?UTF-8?q?=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/DetailedReviewPage/components/index.tsx | 3 +++ frontend/src/pages/DetailedReviewPage/index.tsx | 6 ++---- 2 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 frontend/src/pages/DetailedReviewPage/components/index.tsx diff --git a/frontend/src/pages/DetailedReviewPage/components/index.tsx b/frontend/src/pages/DetailedReviewPage/components/index.tsx new file mode 100644 index 000000000..b850fb6d2 --- /dev/null +++ b/frontend/src/pages/DetailedReviewPage/components/index.tsx @@ -0,0 +1,3 @@ +export { default as KeywordSection } from './KeywordSection'; +export { default as ReviewDescription } from './ReviewDescription'; +export { default as ReviewSection } from './ReviewSection'; diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx index ad94a7b94..88fcd7964 100644 --- a/frontend/src/pages/DetailedReviewPage/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/index.tsx @@ -5,11 +5,9 @@ import { DETAILED_REVIEW_API_PARAMS } from '@/apis/endpoints'; import { getDetailedReviewApi } from '@/apis/review'; import { RevieweeComments } from '@/components'; import { REVIEW_QUERY_KEYS } from '@/constants'; +import { ReviewDescription, ReviewSection, KeywordSection } from '@/pages/DetailedReviewPage/components'; import { DetailReviewData } from '@/types'; -import KeywordSection from './components/KeywordSection'; -import ReviewDescription from './components/ReviewDescription'; -import ReviewSection from './components/ReviewSection'; import * as S from './styles'; const DetailedReviewPage = () => { @@ -29,7 +27,7 @@ const DetailedReviewPage = () => { }); if (!detailedReview) throw new Error(' 상세보기 리뷰 데이터를 가져올 수 없어요.'); - + // TODO: 리뷰 공개/비공개 토글 버튼 기능 return ( Date: Sun, 28 Jul 2024 14:16:45 +0900 Subject: [PATCH 15/33] =?UTF-8?q?feat:=20error=20=EC=A0=84=ED=8C=8C?= =?UTF-8?q?=EB=A5=BC=20=EC=9C=84=ED=95=9C=20QueryClient=20=EC=98=B5?= =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - react-query의 query, mutation에서 error가 전파되도록 QueryClient 옵션 설정 --- frontend/src/index.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index e03edda20..03ecf3f2b 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -12,7 +12,16 @@ import ReviewWritingPage from './pages/ReviewWriting'; import globalStyles from './styles/globalStyles'; import theme from './styles/theme'; -const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + throwOnError: true, + }, + mutations: { + throwOnError: true, + }, + }, +}); const router = createBrowserRouter([ { From 6af1a6589ff55ac0e31cb9341436e96453ef52ac Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 31 Jul 2024 16:11:13 +0900 Subject: [PATCH 16/33] =?UTF-8?q?fix:=20ErrorPage=EC=9D=98=20SideModal?= =?UTF-8?q?=EC=97=90=20closeModal=20props=EB=A1=9C=20=EC=A4=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/ErrorPage/index.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/ErrorPage/index.tsx b/frontend/src/pages/ErrorPage/index.tsx index 52d300c90..53b3d884d 100644 --- a/frontend/src/pages/ErrorPage/index.tsx +++ b/frontend/src/pages/ErrorPage/index.tsx @@ -1,10 +1,8 @@ import { useNavigate } from 'react-router'; -import { Main, PageLayout, SideModal, Sidebar, Topbar } from '@/components'; +import { Main, PageLayout, SideModal, Sidebar, Topbar, ErrorSection } from '@/components'; import { useSidebar } from '@/hooks'; -import ErrorSection from './components/ErrorSection'; - const ERROR_MESSAGE = { serverUnstable: '서버와의 통신이 불안정합니다.', }; @@ -24,7 +22,7 @@ const ErrorPage = () => { return ( {isSidebarModalOpen && ( - + )} From 91d0a55257dfbee514620d3cc6f2c29863e93f09 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 31 Jul 2024 16:18:29 +0900 Subject: [PATCH 17/33] =?UTF-8?q?refactor:=20ErrorSection=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EB=B3=80=EA=B2=BD(src/pages/ErrorPage=20->=20src/c?= =?UTF-8?q?omponents/error)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components => components/error}/ErrorSection/index.tsx | 0 .../components => components/error}/ErrorSection/styles.ts | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename frontend/src/{pages/ErrorPage/components => components/error}/ErrorSection/index.tsx (100%) rename frontend/src/{pages/ErrorPage/components => components/error}/ErrorSection/styles.ts (100%) diff --git a/frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx b/frontend/src/components/error/ErrorSection/index.tsx similarity index 100% rename from frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx rename to frontend/src/components/error/ErrorSection/index.tsx diff --git a/frontend/src/pages/ErrorPage/components/ErrorSection/styles.ts b/frontend/src/components/error/ErrorSection/styles.ts similarity index 100% rename from frontend/src/pages/ErrorPage/components/ErrorSection/styles.ts rename to frontend/src/components/error/ErrorSection/styles.ts From d13fdfdf5becb481fb9989ec4a0a4ba7ea245c39 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 31 Jul 2024 16:19:06 +0900 Subject: [PATCH 18/33] =?UTF-8?q?feat:=20ErrorFallback=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/error/ErrorFallback/index.tsx | 16 ++++++++++++++++ frontend/src/components/error/index.tsx | 1 + frontend/src/components/index.tsx | 1 + 3 files changed, 18 insertions(+) create mode 100644 frontend/src/components/error/ErrorFallback/index.tsx create mode 100644 frontend/src/components/error/index.tsx diff --git a/frontend/src/components/error/ErrorFallback/index.tsx b/frontend/src/components/error/ErrorFallback/index.tsx new file mode 100644 index 000000000..92b2fd410 --- /dev/null +++ b/frontend/src/components/error/ErrorFallback/index.tsx @@ -0,0 +1,16 @@ +import { FallbackProps } from 'react-error-boundary'; +import { useNavigate } from 'react-router'; + +import ErrorSection from '../ErrorSection'; + +const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => { + const navigate = useNavigate(); + const handleGoHome = () => { + resetErrorBoundary(); + navigate('/'); //TODO : 홈 페이지 경로가 결정되면 변경 + }; + + return ; +}; + +export default ErrorFallback; diff --git a/frontend/src/components/error/index.tsx b/frontend/src/components/error/index.tsx new file mode 100644 index 000000000..33c257e68 --- /dev/null +++ b/frontend/src/components/error/index.tsx @@ -0,0 +1 @@ +export { default as ErrorSection } from './ErrorSection'; diff --git a/frontend/src/components/index.tsx b/frontend/src/components/index.tsx index a54853d52..8d8b4e2ad 100644 --- a/frontend/src/components/index.tsx +++ b/frontend/src/components/index.tsx @@ -1,2 +1,3 @@ export * from './layouts'; export * from './common'; +export * from './error'; From f20698f938264d8a13dba23301cfaae8030f0e59 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 31 Jul 2024 16:19:31 +0900 Subject: [PATCH 19/33] =?UTF-8?q?feat:=20ErrorSuspenseContainer=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=B0=8F=20App.tsx=EC=97=90=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.tsx | 28 +++---------------- .../error/ErrorSuspenseContainer/index.tsx | 22 +++++++++++++++ frontend/src/components/error/index.tsx | 1 + 3 files changed, 27 insertions(+), 24 deletions(-) create mode 100644 frontend/src/components/error/ErrorSuspenseContainer/index.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 5ec3d1fcb..c7713d6ae 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,22 +1,8 @@ -import { QueryErrorResetBoundary } from '@tanstack/react-query'; -import { Suspense } from 'react'; -import { ErrorBoundary, FallbackProps } from 'react-error-boundary'; import { Outlet } from 'react-router'; -import { Main, PageLayout, Sidebar, Topbar, SideModal } from './components'; +import { Main, PageLayout, Sidebar, Topbar, SideModal, ErrorSuspenseContainer } from './components'; import { useSidebar } from './hooks'; -// 에러가 발생했을 때 보여줄 Fallback 컴포넌트 -function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) { - return ( -
-

오류:

- 
{error.message}
- -
- ); -} - const App = () => { const { isSidebarHidden, isSidebarModalOpen, closeSidebar, openSidebar } = useSidebar(); @@ -29,15 +15,9 @@ const App = () => { )}
- - {({ reset }) => ( - - 로딩 중....}> - - - - )} - + + +
); diff --git a/frontend/src/components/error/ErrorSuspenseContainer/index.tsx b/frontend/src/components/error/ErrorSuspenseContainer/index.tsx new file mode 100644 index 000000000..eca63af03 --- /dev/null +++ b/frontend/src/components/error/ErrorSuspenseContainer/index.tsx @@ -0,0 +1,22 @@ +import { QueryErrorResetBoundary } from '@tanstack/react-query'; +import { Suspense } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; + +import LoadingPage from '@/pages/LoadingPage'; +import { EssentialPropsWithChildren } from '@/types'; + +import ErrorFallback from '../ErrorFallback'; + +const ErrorSuspenseContainer = ({ children }: EssentialPropsWithChildren) => { + return ( + + {({ reset }) => ( + + }>{children} + + )} + + ); +}; + +export default ErrorSuspenseContainer; diff --git a/frontend/src/components/error/index.tsx b/frontend/src/components/error/index.tsx index 33c257e68..21f4f669b 100644 --- a/frontend/src/components/error/index.tsx +++ b/frontend/src/components/error/index.tsx @@ -1 +1,2 @@ export { default as ErrorSection } from './ErrorSection'; +export { default as ErrorSuspenseContainer } from './ErrorSuspenseContainer'; From f552fcf51e0a8c156523c2d5461e268360ad483e Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 31 Jul 2024 16:20:24 +0900 Subject: [PATCH 20/33] =?UTF-8?q?chore:=20constants/index.ts=20export=20?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 중복되는 apiErrorMessage 삭제 - queryKeys 추가 --- frontend/src/constants/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts index 4ff1879d6..4bfc080db 100644 --- a/frontend/src/constants/index.ts +++ b/frontend/src/constants/index.ts @@ -1,4 +1,4 @@ export * from './page'; export * from './apiErrorMessage'; export * from './review'; -export * from './apiErrorMessage'; +export * from './queryKeys'; From d6d7696d668cc5a31c7ed7672368051bce0dbbc2 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 31 Jul 2024 16:21:44 +0900 Subject: [PATCH 21/33] =?UTF-8?q?chore:=203=EC=B0=A8-1=EC=A3=BC=EC=B0=A8?= =?UTF-8?q?=20=ED=95=B5=EC=8B=AC=20=EA=B8=B0=EB=8A=A5=20=EC=8B=9C=ED=98=84?= =?UTF-8?q?=20=EB=95=8C=20=ED=95=84=EC=9A=94=20=EC=97=86=EB=8A=94=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A3=BC=EC=84=9D=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DetailedReviewPage/components/ReviewDescription/index.tsx | 4 ++-- frontend/src/pages/DetailedReviewPage/index.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx index 1e5da06b8..d9484bd03 100644 --- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx @@ -30,9 +30,9 @@ const ReviewDescription = ({ - + {/* 시현 때 숨김 - + */} ); }; diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx index 5ac395b8f..cabbd8508 100644 --- a/frontend/src/pages/DetailedReviewPage/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/index.tsx @@ -35,7 +35,7 @@ const DetailedReviewPage = () => { isPublic={true} handleClickToggleButton={() => console.log('click toggle ')} /> - {/* 시연때 숨김 */} + {/* 시연 때 숨김 */} {detailedReview.reviews.map((item, index) => ( ))} From 9745350c942268160260697d8292a9268ef67df1 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 31 Jul 2024 16:26:07 +0900 Subject: [PATCH 22/33] =?UTF-8?q?docs:=20ErrorPage=EC=9D=98=20ERROR=5FMESS?= =?UTF-8?q?AGE=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/ErrorPage/index.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/ErrorPage/index.tsx b/frontend/src/pages/ErrorPage/index.tsx index 53b3d884d..c773148c3 100644 --- a/frontend/src/pages/ErrorPage/index.tsx +++ b/frontend/src/pages/ErrorPage/index.tsx @@ -3,9 +3,7 @@ import { useNavigate } from 'react-router'; import { Main, PageLayout, SideModal, Sidebar, Topbar, ErrorSection } from '@/components'; import { useSidebar } from '@/hooks'; -const ERROR_MESSAGE = { - serverUnstable: '서버와의 통신이 불안정합니다.', -}; +const ERROR_MESSAGE = '찾으시는 페이지가 없어요.'; const ErrorPage = () => { const { isSidebarHidden, isSidebarModalOpen, closeSidebar, openSidebar } = useSidebar(); @@ -28,11 +26,7 @@ const ErrorPage = () => { )}
- +
); From 67e2c5a50554df163885c9a14f574fba6a330c23 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 31 Jul 2024 16:57:54 +0900 Subject: [PATCH 23/33] =?UTF-8?q?design:=20formWidth=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=20=EB=B0=8F=20fontSize=EC=97=90=201.4rem=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/theme.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts index 493bbf850..8ffdb9bcc 100644 --- a/frontend/src/styles/theme.ts +++ b/frontend/src/styles/theme.ts @@ -3,7 +3,7 @@ import { CSSProperties } from 'react'; import { ThemeProperty } from '../types'; -export const formWidth = '86.7rem'; +export const formWidth = '65rem'; export const sidebarWidth: ThemeProperty = { desktop: '25rem', mobile: '100vw', @@ -15,6 +15,7 @@ export const breakpoints: ThemeProperty = { }; // NOTE: 1rem = 10px export const fontSize: ThemeProperty = { + small: '1.4rem', basic: '1.6rem', medium: '2.4rem', large: '3.2rem', From 4415a3665299e3fcbdc88a03e0d904abe5f2ab8f Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Wed, 31 Jul 2024 16:59:35 +0900 Subject: [PATCH 24/33] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=EC=9D=B4=20=EC=9D=B4=EB=A6=84=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 리뷰 상세 페이지 목데이터, 데이터 타입에 리뷰이 이름 추가 - 리뷰 상세 페이지 컴포넌트에 리뷰이 이름 추가 및 관련 스타일 추가 --- .../mocks/mockData/detailedReviewMockData.ts | 1 + .../components/ReviewDescription/index.tsx | 15 ++++++++---- .../components/ReviewDescription/styles.ts | 23 ++++++++++++++++++- .../src/pages/DetailedReviewPage/index.tsx | 1 + frontend/src/types/review.ts | 1 + 5 files changed, 36 insertions(+), 5 deletions(-) diff --git a/frontend/src/mocks/mockData/detailedReviewMockData.ts b/frontend/src/mocks/mockData/detailedReviewMockData.ts index 003a5ffb2..cc9782954 100644 --- a/frontend/src/mocks/mockData/detailedReviewMockData.ts +++ b/frontend/src/mocks/mockData/detailedReviewMockData.ts @@ -16,6 +16,7 @@ const ANSWER = export const DETAILED_REVIEW_MOCK_DATA: DetailReviewData = { id: 123456, createdAt: new Date('2024-07-16'), + revieweeName: 'badahertz52', isPublic: false, reviewerGroup: { id: 123456, diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx index d9484bd03..13c81cbd5 100644 --- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx @@ -6,17 +6,19 @@ import LockToggle from '../LockToggle'; import * as S from './styles'; -const PROJECT_IMAGE_SIZE = '6rem'; +export const PROJECT_IMAGE_SIZE = '6rem'; const DATE_TITLE = '리뷰 작성일'; interface ReviewDescriptionProps extends Omit, Omit { isPublic: boolean; + revieweeName: string; handleClickToggleButton: () => void; } const ReviewDescription = ({ thumbnailUrl, projectName, + revieweeName, isPublic, date, handleClickToggleButton, @@ -25,10 +27,15 @@ const ReviewDescription = ({ - + {projectName} - - + + + {revieweeName}에 대한 리뷰입니다! + + + + {/* 시현 때 숨김 diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts index 799be41d7..964296046 100644 --- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts +++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/styles.ts @@ -12,11 +12,15 @@ export const Description = styled.section` `; export const DescriptionSide = styled.div` display: flex; + width: 100%; `; -export const ProjectNameAndDateContainer = styled.div` +// 6rem :깃헙 로고 사이즈 +export const ProjectInfoContainer = styled.div` display: flex; flex-direction: column; justify-content: flex-start; + + width: calc(100% - 6rem); margin-left: 1rem; `; @@ -25,3 +29,20 @@ export const ProjectName = styled.p` font-size: ${({ theme }) => theme.fontSize.medium}; font-weight: ${({ theme }) => theme.fontWeight.bold}; `; + +export const RevieweeNameAndDateContainer = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + + width: 100%; + + font-size: ${({ theme }) => theme.fontSize.basic}; +`; + +export const RevieweeNameWrapper = styled.p` + margin-top: 0; +`; +export const RevieweeName = styled.span` + color: ${({ theme }) => theme.colors.primary}; +`; diff --git a/frontend/src/pages/DetailedReviewPage/index.tsx b/frontend/src/pages/DetailedReviewPage/index.tsx index cabbd8508..4ea63c85e 100644 --- a/frontend/src/pages/DetailedReviewPage/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/index.tsx @@ -32,6 +32,7 @@ const DetailedReviewPage = () => { console.log('click toggle ')} /> diff --git a/frontend/src/types/review.ts b/frontend/src/types/review.ts index cae033a13..c16f4cd6f 100644 --- a/frontend/src/types/review.ts +++ b/frontend/src/types/review.ts @@ -15,6 +15,7 @@ export interface DetailReviewContent { export interface DetailReviewData { id: number; createdAt: Date; + revieweeName: string; isPublic: boolean; reviewerGroup: { id: number; From 872ff0b77c74362ab5a0d6f5573666b1e34f36d5 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Thu, 1 Aug 2024 09:51:29 +0900 Subject: [PATCH 25/33] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20export=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DetailedReviewPage/components/ReviewDescription/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx index 13c81cbd5..8e4f477de 100644 --- a/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx +++ b/frontend/src/pages/DetailedReviewPage/components/ReviewDescription/index.tsx @@ -6,7 +6,7 @@ import LockToggle from '../LockToggle'; import * as S from './styles'; -export const PROJECT_IMAGE_SIZE = '6rem'; +const PROJECT_IMAGE_SIZE = '6rem'; const DATE_TITLE = '리뷰 작성일'; interface ReviewDescriptionProps extends Omit, Omit { From bc93a517b6712de0affdb6fe8641b3f915efa391 Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Thu, 1 Aug 2024 11:04:37 +0900 Subject: [PATCH 26/33] =?UTF-8?q?chore:=20type=EB=AA=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(RevieweeCommentProps=20=3D>RevieweeCommentsProps)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/RevieweeComments/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/common/RevieweeComments/index.tsx b/frontend/src/components/common/RevieweeComments/index.tsx index 9092ed1cd..7e4c89079 100644 --- a/frontend/src/components/common/RevieweeComments/index.tsx +++ b/frontend/src/components/common/RevieweeComments/index.tsx @@ -1,12 +1,12 @@ import * as S from './styles'; -interface RevieweeCommentProps { +interface RevieweeCommentsProps { comment: string; } const DEFAULT_COMMENTS = '안녕하세요! 리뷰 잘 부탁드립니다.'; -const RevieweeComments = ({ comment }: RevieweeCommentProps) => { +const RevieweeComments = ({ comment }: RevieweeCommentsProps) => { return {comment || DEFAULT_COMMENTS}; }; From 30328743464e41f9ee7f2ef9b9b09b94ff42d6fa Mon Sep 17 00:00:00 2001 From: badahertz52 Date: Thu, 1 Aug 2024 11:32:41 +0900 Subject: [PATCH 27/33] =?UTF-8?q?refactor:=20ErrorSection=EC=9C=BCl=20Butt?= =?UTF-8?q?on=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/error/ErrorSection/index.tsx | 19 +++++++++---------- .../components/error/ErrorSection/styles.ts | 7 ------- 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/error/ErrorSection/index.tsx b/frontend/src/components/error/ErrorSection/index.tsx index 44f80dcc0..89236e0f4 100644 --- a/frontend/src/components/error/ErrorSection/index.tsx +++ b/frontend/src/components/error/ErrorSection/index.tsx @@ -37,16 +37,15 @@ const ErrorSection = ({ errorMessage, handleReload, handleGoHome }: ErrorSection {errorMessage} - {buttons.map((button, index) => ( - -