From 9643880492998894f13eb30636980cac0586eb35 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 10 Oct 2024 16:17:39 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=EC=84=B9=EC=85=98=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=9A=94=EC=B2=AD=20=EC=97=94=EB=93=9C?= =?UTF-8?q?=ED=8F=AC=EC=9D=B8=ED=8A=B8=20=EB=B0=8F=20=ED=98=B8=EC=B6=9C=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/endpoints.ts | 1 + frontend/src/apis/review.ts | 19 ++++++++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/frontend/src/apis/endpoints.ts b/frontend/src/apis/endpoints.ts index 5b251ae0e..56d357285 100644 --- a/frontend/src/apis/endpoints.ts +++ b/frontend/src/apis/endpoints.ts @@ -68,6 +68,7 @@ const endPoint = { checkingPassword: `${serverUrl}/${VERSION2}/${REVIEW_PASSWORD_API_PARAMS.resource}/${REVIEW_PASSWORD_API_PARAMS.queryString.check}`, gettingReviewGroupData: (reviewRequestCode: string) => `${REVIEW_GROUP_DATA_API_URL}?${REVIEW_GROUP_DATA_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`, + gettingSectionList: `${serverUrl}/${VERSION2}/sections`, }; export default endPoint; diff --git a/frontend/src/apis/review.ts b/frontend/src/apis/review.ts index 825f70283..e52871b56 100644 --- a/frontend/src/apis/review.ts +++ b/frontend/src/apis/review.ts @@ -1,4 +1,4 @@ -import { DetailReviewData, ReviewList, ReviewWritingFormResult, ReviewWritingFormData } from '@/types'; +import { DetailReviewData, ReviewList, ReviewWritingFormResult, ReviewWritingFormData, GroupedSection } from '@/types'; import createApiErrorMessage from './apiErrorMessageCreator'; import endPoint from './endpoints'; @@ -74,3 +74,20 @@ export const getReviewListApi = async ({ lastReviewId, size }: GetReviewListApi) const data = await response.json(); return data as ReviewList; }; + +export const getSectionList = async () => { + const response = await fetch(endPoint.gettingSectionList, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + credentials: 'include', + }); + + if (!response.ok) { + throw new Error(createApiErrorMessage(response.status)); + } + + const data = await response.json(); + return data as GroupedSection; +}; From 513c7ddb472eeda63b0394969aa72daaf02688a5 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 10 Oct 2024 16:18:05 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20react-query=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20=EC=84=B9=EC=85=98=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=9A=94=EC=B2=AD=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EB=B0=8F=20msw=20=EB=AA=A8=ED=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/queryKey.ts | 2 +- frontend/src/mocks/handlers/review.ts | 14 +++++++++++- .../hooks/useGetSectionList.ts | 22 +++++++++++++++++++ .../src/pages/ReviewCollectionPage/index.tsx | 10 +++++---- 4 files changed, 42 insertions(+), 6 deletions(-) create mode 100644 frontend/src/pages/ReviewCollectionPage/hooks/useGetSectionList.ts diff --git a/frontend/src/constants/queryKey.ts b/frontend/src/constants/queryKey.ts index e89c803dc..3c9cb3656 100644 --- a/frontend/src/constants/queryKey.ts +++ b/frontend/src/constants/queryKey.ts @@ -1,9 +1,9 @@ -// TODO: 내용이 배열이 아니므로 단수형으로 수정하기 export const REVIEW_QUERY_KEY = { detailedReview: 'detailedReview', reviews: 'reviews', writingReviewInfo: 'writingReviewInfo', postReview: 'postReview', + sectionList: 'sectionList', }; export const GROUP_QUERY_KEY = { diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts index 2eb0e3002..9aab7ef19 100644 --- a/frontend/src/mocks/handlers/review.ts +++ b/frontend/src/mocks/handlers/review.ts @@ -16,6 +16,7 @@ import { REVIEW_LIST, MOCK_AUTH_TOKEN_NAME, } from '../mockData'; +import { GROUPED_SECTION_MOCK_DATA } from '../mockData/reviewCollection'; export const PAGE = { firstPageNumber: 1, @@ -90,6 +91,17 @@ const postReview = () => return HttpResponse.json({ message: 'post 성공' }, { status: 201 }); }); -const reviewHandler = [getDetailedReview(), getReviewList(null, 10), getDataToWriteReview(), postReview()]; +const getSectionList = () => + http.get(endPoint.gettingSectionList, async () => { + return HttpResponse.json(GROUPED_SECTION_MOCK_DATA); + }); + +const reviewHandler = [ + getDetailedReview(), + getReviewList(null, 10), + getDataToWriteReview(), + getSectionList(), + postReview(), +]; export default reviewHandler; diff --git a/frontend/src/pages/ReviewCollectionPage/hooks/useGetSectionList.ts b/frontend/src/pages/ReviewCollectionPage/hooks/useGetSectionList.ts new file mode 100644 index 000000000..1e094d068 --- /dev/null +++ b/frontend/src/pages/ReviewCollectionPage/hooks/useGetSectionList.ts @@ -0,0 +1,22 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; + +import { getSectionList } from '@/apis/review'; +import { REVIEW_QUERY_KEY } from '@/constants'; +import { GroupedSection } from '@/types'; + +const useGetSectionList = () => { + const fetchSectionList = async () => { + const result = await getSectionList(); + return result; + }; + + const result = useSuspenseQuery({ + queryKey: [REVIEW_QUERY_KEY.sectionList], + queryFn: () => fetchSectionList(), + staleTime: 60 * 60 * 1000, + }); + + return result; +}; + +export default useGetSectionList; diff --git a/frontend/src/pages/ReviewCollectionPage/index.tsx b/frontend/src/pages/ReviewCollectionPage/index.tsx index 3bd098ace..4226aa0d3 100644 --- a/frontend/src/pages/ReviewCollectionPage/index.tsx +++ b/frontend/src/pages/ReviewCollectionPage/index.tsx @@ -3,9 +3,10 @@ import { useState } from 'react'; import { Accordion, AuthAndServerErrorFallback, Dropdown, ErrorSuspenseContainer, TopButton } from '@/components'; import ReviewDisplayLayout from '@/components/layouts/ReviewDisplayLayout'; import { useGetReviewList } from '@/hooks'; -import { GROUPED_REVIEWS_MOCK_DATA, GROUPED_SECTION_MOCK_DATA } from '@/mocks/mockData/reviewCollection'; +import { GROUPED_REVIEWS_MOCK_DATA } from '@/mocks/mockData/reviewCollection'; import DoughnutChart from './components/DoughnutChart'; +import useGetSectionList from './hooks/useGetSectionList'; import * as S from './styles'; const ReviewCollectionPage = () => { @@ -14,10 +15,11 @@ const ReviewCollectionPage = () => { const { revieweeName, projectName } = data.pages[0]; // TODO: react-query 적용 및 드롭다운 아이템 선택 시 요청 - const reviewSectionList = GROUPED_SECTION_MOCK_DATA.sections.map((section) => { + const { data: reviewSectionList } = useGetSectionList(); + const dropdownSectionList = reviewSectionList.sections.map((section) => { return { text: section.name, value: section.name }; }); - const [reviewSection, setReviewSection] = useState(reviewSectionList[0].value); + const [reviewSection, setReviewSection] = useState(dropdownSectionList[0].value); return ( @@ -25,7 +27,7 @@ const ReviewCollectionPage = () => { setReviewSection(item)} /> From 4005b555790f58c7bd900c27f1704d2f1bc19fa7 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 10 Oct 2024 17:16:24 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=EB=AA=A8=EC=95=84=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=EB=A6=AC=EB=B7=B0=20=EC=97=94=EB=93=9C=ED=8F=AC?= =?UTF-8?q?=EC=9D=B8=ED=8A=B8=20=EB=B0=8F=20=ED=98=B8=EC=B6=9C=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/endpoints.ts | 1 + frontend/src/apis/review.ts | 30 +++++++++++++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/frontend/src/apis/endpoints.ts b/frontend/src/apis/endpoints.ts index 56d357285..96944aa0e 100644 --- a/frontend/src/apis/endpoints.ts +++ b/frontend/src/apis/endpoints.ts @@ -69,6 +69,7 @@ const endPoint = { gettingReviewGroupData: (reviewRequestCode: string) => `${REVIEW_GROUP_DATA_API_URL}?${REVIEW_GROUP_DATA_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`, gettingSectionList: `${serverUrl}/${VERSION2}/sections`, + gettingGroupedReviews: (sectionId: number) => `${serverUrl}/${VERSION2}/reviews/gather?sectionId=${sectionId}`, }; export default endPoint; diff --git a/frontend/src/apis/review.ts b/frontend/src/apis/review.ts index e52871b56..e5aca2fc9 100644 --- a/frontend/src/apis/review.ts +++ b/frontend/src/apis/review.ts @@ -1,4 +1,11 @@ -import { DetailReviewData, ReviewList, ReviewWritingFormResult, ReviewWritingFormData, GroupedSection } from '@/types'; +import { + DetailReviewData, + ReviewList, + ReviewWritingFormResult, + ReviewWritingFormData, + GroupedSection, + GroupedReviews, +} from '@/types'; import createApiErrorMessage from './apiErrorMessageCreator'; import endPoint from './endpoints'; @@ -91,3 +98,24 @@ export const getSectionList = async () => { const data = await response.json(); return data as GroupedSection; }; + +interface GetGroupedReviewsProps { + sectionId: number; +} + +export const getGroupedReviews = async ({ sectionId }: GetGroupedReviewsProps) => { + const response = await fetch(endPoint.gettingGroupedReviews(sectionId), { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + credentials: 'include', + }); + + if (!response.ok) { + throw new Error(createApiErrorMessage(response.status)); + } + + const data = await response.json(); + return data as GroupedReviews; +}; From cf8dbc61d0e424c1a4b5bb5f95bb553221bfaffb Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 10 Oct 2024 17:17:02 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20Dropdown=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EA=B0=80=20=EC=83=81=ED=83=9C=EB=A1=9C=20Dro?= =?UTF-8?q?pdownItem=EC=9D=84=20=EA=B0=80=EC=A7=80=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Dropdown/index.tsx | 14 +++++++------- frontend/src/hooks/useDropdown.ts | 6 ++++-- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/common/Dropdown/index.tsx b/frontend/src/components/common/Dropdown/index.tsx index 8943573f9..9ae816c14 100644 --- a/frontend/src/components/common/Dropdown/index.tsx +++ b/frontend/src/components/common/Dropdown/index.tsx @@ -3,31 +3,31 @@ import useDropdown from '@/hooks/useDropdown'; import * as S from './styles'; -interface DropdownItem { +export interface DropdownItem { text: string; - value: string; + value: string | number; } interface DropdownProps { items: DropdownItem[]; - selectedItem: string; - handleSelect: (item: string) => void; + selectedItem: DropdownItem; + handleSelect: (item: DropdownItem) => void; } -const Dropdown = ({ items, selectedItem: selectedOption, handleSelect }: DropdownProps) => { +const Dropdown = ({ items, selectedItem, handleSelect }: DropdownProps) => { const { isOpened, handleDropdownButtonClick, handleOptionClick, dropdownRef } = useDropdown({ handleSelect }); return ( - {selectedOption} + {selectedItem.text} {isOpened && ( {items.map((item) => { return ( - handleOptionClick(item.value)}> + handleOptionClick(item)}> {item.text} ); diff --git a/frontend/src/hooks/useDropdown.ts b/frontend/src/hooks/useDropdown.ts index da17270ca..f73aeaa82 100644 --- a/frontend/src/hooks/useDropdown.ts +++ b/frontend/src/hooks/useDropdown.ts @@ -1,7 +1,9 @@ import { useEffect, useRef, useState } from 'react'; +import { DropdownItem } from '@/components/common/Dropdown'; + interface UseDropdownProps { - handleSelect: (option: string) => void; + handleSelect: (option: DropdownItem) => void; } const useDropdown = ({ handleSelect }: UseDropdownProps) => { @@ -13,7 +15,7 @@ const useDropdown = ({ handleSelect }: UseDropdownProps) => { setIsOpened((prev) => !prev); }; - const handleOptionClick = (option: string) => { + const handleOptionClick = (option: DropdownItem) => { handleSelect(option); setIsOpened(false); }; From 5a02ec9b57af73bae34050154498a25c7f1973a9 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 10 Oct 2024 17:18:48 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20react-query=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20=EC=84=B9=EC=85=98=EB=B3=84=20?= =?UTF-8?q?=EB=AA=A8=EC=95=84=EB=B3=B4=EA=B8=B0=20=EC=9A=94=EC=B2=AD=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20msw=20?= =?UTF-8?q?=EB=AA=A8=ED=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/queryKey.ts | 1 + frontend/src/mocks/handlers/review.ts | 31 ++++++++++++------- .../hooks/useGetGroupedReviews.ts | 26 ++++++++++++++++ .../src/pages/ReviewCollectionPage/index.tsx | 16 +++++----- 4 files changed, 56 insertions(+), 18 deletions(-) create mode 100644 frontend/src/pages/ReviewCollectionPage/hooks/useGetGroupedReviews.ts diff --git a/frontend/src/constants/queryKey.ts b/frontend/src/constants/queryKey.ts index 3c9cb3656..005c0a84e 100644 --- a/frontend/src/constants/queryKey.ts +++ b/frontend/src/constants/queryKey.ts @@ -4,6 +4,7 @@ export const REVIEW_QUERY_KEY = { writingReviewInfo: 'writingReviewInfo', postReview: 'postReview', sectionList: 'sectionList', + groupedReviews: 'groupedReviews', }; export const GROUP_QUERY_KEY = { diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts index 9aab7ef19..d76779327 100644 --- a/frontend/src/mocks/handlers/review.ts +++ b/frontend/src/mocks/handlers/review.ts @@ -16,7 +16,7 @@ import { REVIEW_LIST, MOCK_AUTH_TOKEN_NAME, } from '../mockData'; -import { GROUPED_SECTION_MOCK_DATA } from '../mockData/reviewCollection'; +import { GROUPED_REVIEWS_MOCK_DATA, GROUPED_SECTION_MOCK_DATA } from '../mockData/reviewCollection'; export const PAGE = { firstPageNumber: 1, @@ -44,16 +44,19 @@ const getDetailedReview = () => }); const getDataToWriteReview = () => - http.get(new RegExp(`^${REVIEW_WRITING_API_URL}`), async ({ request }) => { - //요청 url에서 reviewId, memberId 추출 - const url = new URL(request.url); - const urlRequestCode = url.searchParams.get(REVIEW_WRITING_API_PARAMS.queryString.reviewRequestCode); - - if (REVIEW_REQUEST_CODE === urlRequestCode) { - return HttpResponse.json(REVIEW_QUESTION_DATA); - } - return HttpResponse.json({ error: '잘못된 리뷰 작성 데이터 요청' }, { status: 404 }); - }); + http.get( + new RegExp(`^${REVIEW_WRITING_API_URL}/${REVIEW_WRITING_API_PARAMS.queryString.write}`), + async ({ request }) => { + //요청 url에서 reviewId, memberId 추출 + const url = new URL(request.url); + const urlRequestCode = url.searchParams.get(REVIEW_WRITING_API_PARAMS.queryString.reviewRequestCode); + + if (REVIEW_REQUEST_CODE === urlRequestCode) { + return HttpResponse.json(REVIEW_QUESTION_DATA); + } + return HttpResponse.json({ error: '잘못된 리뷰 작성 데이터 요청' }, { status: 404 }); + }, + ); const getReviewList = (lastReviewId: number | null, size: number) => { return http.get(endPoint.gettingReviewList(lastReviewId, size), async ({ request, cookies }) => { @@ -96,11 +99,17 @@ const getSectionList = () => return HttpResponse.json(GROUPED_SECTION_MOCK_DATA); }); +const getGroupedReviews = (sectionId: number) => + http.get(endPoint.gettingGroupedReviews(sectionId), async () => { + return HttpResponse.json(GROUPED_REVIEWS_MOCK_DATA); + }); + const reviewHandler = [ getDetailedReview(), getReviewList(null, 10), getDataToWriteReview(), getSectionList(), + getGroupedReviews(1), postReview(), ]; diff --git a/frontend/src/pages/ReviewCollectionPage/hooks/useGetGroupedReviews.ts b/frontend/src/pages/ReviewCollectionPage/hooks/useGetGroupedReviews.ts new file mode 100644 index 000000000..be16a1427 --- /dev/null +++ b/frontend/src/pages/ReviewCollectionPage/hooks/useGetGroupedReviews.ts @@ -0,0 +1,26 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; + +import { getGroupedReviews } from '@/apis/review'; +import { REVIEW_QUERY_KEY } from '@/constants'; +import { GroupedReviews } from '@/types'; + +interface UseGetGroupedReviewsProps { + sectionId: number; +} + +const useGetGroupedReviews = ({ sectionId }: UseGetGroupedReviewsProps) => { + const fetchGroupedReviews = async () => { + const result = await getGroupedReviews({ sectionId }); + return result; + }; + + const result = useSuspenseQuery({ + queryKey: [REVIEW_QUERY_KEY.groupedReviews, sectionId], + queryFn: () => fetchGroupedReviews(), + staleTime: 1 * 60 * 1000, + }); + + return result; +}; + +export default useGetGroupedReviews; diff --git a/frontend/src/pages/ReviewCollectionPage/index.tsx b/frontend/src/pages/ReviewCollectionPage/index.tsx index 4226aa0d3..ee40a4bde 100644 --- a/frontend/src/pages/ReviewCollectionPage/index.tsx +++ b/frontend/src/pages/ReviewCollectionPage/index.tsx @@ -1,11 +1,12 @@ import { useState } from 'react'; import { Accordion, AuthAndServerErrorFallback, Dropdown, ErrorSuspenseContainer, TopButton } from '@/components'; +import { DropdownItem } from '@/components/common/Dropdown'; import ReviewDisplayLayout from '@/components/layouts/ReviewDisplayLayout'; import { useGetReviewList } from '@/hooks'; -import { GROUPED_REVIEWS_MOCK_DATA } from '@/mocks/mockData/reviewCollection'; import DoughnutChart from './components/DoughnutChart'; +import useGetGroupedReviews from './hooks/useGetGroupedReviews'; import useGetSectionList from './hooks/useGetSectionList'; import * as S from './styles'; @@ -14,12 +15,13 @@ const ReviewCollectionPage = () => { const { data } = useGetReviewList(); const { revieweeName, projectName } = data.pages[0]; - // TODO: react-query 적용 및 드롭다운 아이템 선택 시 요청 const { data: reviewSectionList } = useGetSectionList(); const dropdownSectionList = reviewSectionList.sections.map((section) => { - return { text: section.name, value: section.name }; + return { text: section.name, value: section.id }; }); - const [reviewSection, setReviewSection] = useState(dropdownSectionList[0].value); + + const [selectedSection, setSelectedSection] = useState(dropdownSectionList[0]); + const { data: groupedReviews } = useGetGroupedReviews({ sectionId: selectedSection.value as number }); return ( @@ -28,12 +30,12 @@ const ReviewCollectionPage = () => { setReviewSection(item)} + selectedItem={dropdownSectionList.find((section) => section.value === selectedSection.value)!} + handleSelect={(item) => setSelectedSection(item)} /> - {GROUPED_REVIEWS_MOCK_DATA.reviews.map((review, index) => { + {groupedReviews.reviews.map((review, index) => { return ( {review.question.type === 'CHECKBOX' ? ( From 003b20486bb6f294e898a5c54028eb5711d8ddf0 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 10 Oct 2024 17:31:00 +0900 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20msw=20handler=EC=97=90=20=EC=BF=A0?= =?UTF-8?q?=ED=82=A4=20=ED=99=95=EC=9D=B8=ED=95=98=EB=8A=94=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=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 | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts index d76779327..f88391636 100644 --- a/frontend/src/mocks/handlers/review.ts +++ b/frontend/src/mocks/handlers/review.ts @@ -95,12 +95,18 @@ const postReview = () => }); const getSectionList = () => - http.get(endPoint.gettingSectionList, async () => { + http.get(endPoint.gettingSectionList, async ({ request, cookies }) => { + // authToken 쿠키 확인 + if (!cookies[MOCK_AUTH_TOKEN_NAME]) return HttpResponse.json({ error: '인증 관련 쿠키 없음' }, { status: 401 }); + return HttpResponse.json(GROUPED_SECTION_MOCK_DATA); }); const getGroupedReviews = (sectionId: number) => - http.get(endPoint.gettingGroupedReviews(sectionId), async () => { + http.get(endPoint.gettingGroupedReviews(sectionId), async ({ request, cookies }) => { + // authToken 쿠키 확인 + if (!cookies[MOCK_AUTH_TOKEN_NAME]) return HttpResponse.json({ error: '인증 관련 쿠키 없음' }, { status: 401 }); + return HttpResponse.json(GROUPED_REVIEWS_MOCK_DATA); }); From 27c52242503e138552322799ccce8e84e9427360 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 10 Oct 2024 17:47:38 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=ED=98=95=EA=B4=91=ED=8E=9C=20?= =?UTF-8?q?=EC=97=90=EB=94=94=ED=84=B0=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F=20?= =?UTF-8?q?=EC=9D=B8=ED=84=B0=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/mocks/mockData/reviewCollection.ts | 10 ++++++++++ frontend/src/pages/ReviewCollectionPage/index.tsx | 4 ++++ frontend/src/types/review.ts | 5 ++++- 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/frontend/src/mocks/mockData/reviewCollection.ts b/frontend/src/mocks/mockData/reviewCollection.ts index 94aa20786..d7ee7b730 100644 --- a/frontend/src/mocks/mockData/reviewCollection.ts +++ b/frontend/src/mocks/mockData/reviewCollection.ts @@ -23,6 +23,7 @@ export const GROUPED_REVIEWS_MOCK_DATA: GroupedReviews = { reviews: [ { question: { + id: 1, name: '커뮤니케이션, 협업 능력에서 어떤 부분이 인상 깊었는지 선택해주세요', type: 'CHECKBOX', }, @@ -39,25 +40,34 @@ export const GROUPED_REVIEWS_MOCK_DATA: GroupedReviews = { }, { question: { + id: 2, name: '위에서 선택한 사항에 대해 조금 더 자세히 설명해주세요', type: 'TEXT', }, answers: [ { + id: 1, content: '장의 시작부분은 짧고 직접적이며, 뒤따라 나올 복잡한 정보를 어떻게 해석해야 할 것인지 프레임을 짜주는 역할을 해야 한다. 그러면 아무리 긴 문장이라도 쉽게 읽힌다.', + highlights: [], }, { + id: 2, content: '고액공제건강보험과 건강저축계좌를 만들어 노동자와 고용주가 세금공제를 받을 수 있도록 하면 결과적으로 노동자의 의료보험 부담이 커진다.', + highlights: [], }, { + id: 3, content: '장의 시작부분은 짧고 직접적이며, 뒤따라 나올 복잡한 정보를 어떻게 해석해야 할 것인지 프레임을 짜주는 역할을 해야 한다. 그러면 아무리 긴 문장이라도 쉽게 읽힌다.', + highlights: [], }, { + id: 4, content: '고액공제건강보험과 건강저축계좌를 만들어 노동자와 고용주가 세금공제를 받을 수 있도록 하면 결과적으로 노동자의 의료보험 부담이 커진다.', + highlights: [], }, ], votes: null, diff --git a/frontend/src/pages/ReviewCollectionPage/index.tsx b/frontend/src/pages/ReviewCollectionPage/index.tsx index 35a3dc458..dff638971 100644 --- a/frontend/src/pages/ReviewCollectionPage/index.tsx +++ b/frontend/src/pages/ReviewCollectionPage/index.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { Accordion, AuthAndServerErrorFallback, Dropdown, ErrorSuspenseContainer, TopButton } from '@/components'; import { DropdownItem } from '@/components/common/Dropdown'; +import HighlightEditor from '@/components/highlight/HighlightEditor'; import ReviewDisplayLayout from '@/components/layouts/ReviewDisplayLayout'; import { useGetReviewList } from '@/hooks'; @@ -42,6 +43,9 @@ const ReviewCollectionPage = () => { ) : ( + {review.answers && ( + + )} {review.answers?.map((answer, index) => { return {answer.content}; })} diff --git a/frontend/src/types/review.ts b/frontend/src/types/review.ts index 00f3a51f3..041d4d731 100644 --- a/frontend/src/types/review.ts +++ b/frontend/src/types/review.ts @@ -1,3 +1,5 @@ +import { ReviewAnswerResponseData } from './highlight'; + export interface Keyword { id: number; content: string; @@ -110,6 +112,7 @@ export interface GroupedReviews { export interface GroupedReview { question: { + id: number; name: string; type: QuestionType; }; @@ -117,7 +120,7 @@ export interface GroupedReview { * CollectedReviewAnswer[] : 주관식 질문에서 답변 모아놓은 배열 * null : 객관식 질문인 경우 */ - answers: ReviewAnswer[] | null; + answers: ReviewAnswerResponseData[] | null; /** * CollectedReviewVotes[] : 객관식 질문에서 옵션-득표수 모아놓은 배열 * null : 주관식 질문인 경우 From f1d821997f4877c20a4f16299d6895cbb1180747 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 10 Oct 2024 17:48:36 +0900 Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/ReviewCollectionPage/index.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/frontend/src/pages/ReviewCollectionPage/index.tsx b/frontend/src/pages/ReviewCollectionPage/index.tsx index dff638971..1c3589378 100644 --- a/frontend/src/pages/ReviewCollectionPage/index.tsx +++ b/frontend/src/pages/ReviewCollectionPage/index.tsx @@ -4,7 +4,6 @@ import { Accordion, AuthAndServerErrorFallback, Dropdown, ErrorSuspenseContainer import { DropdownItem } from '@/components/common/Dropdown'; import HighlightEditor from '@/components/highlight/HighlightEditor'; import ReviewDisplayLayout from '@/components/layouts/ReviewDisplayLayout'; -import { useGetReviewList } from '@/hooks'; import DoughnutChart from './components/DoughnutChart'; import useGetGroupedReviews from './hooks/useGetGroupedReviews'; @@ -12,10 +11,6 @@ import useGetSectionList from './hooks/useGetSectionList'; import * as S from './styles'; const ReviewCollectionPage = () => { - // TODO: 추후 리뷰 그룹 정보를 받아오는 API로 대체 - const { data } = useGetReviewList(); - const { revieweeName, projectName } = data.pages[0]; - const { data: reviewSectionList } = useGetSectionList(); const dropdownSectionList = reviewSectionList.sections.map((section) => { return { text: section.name, value: section.id };