From 1f81b71388c976329d26b1f3fdfb2ad4c957f0e2 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 16:33:27 +0900 Subject: [PATCH 01/22] =?UTF-8?q?refactor:=20=EC=A7=88=EB=AC=B8=EC=A7=80?= =?UTF-8?q?=20QuestionList=20=ED=83=80=EC=9E=85=EC=9D=84=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/api/question-list/getQuestionList.ts | 35 ++++++++++++++++--- .../QuestionListPage/types/QuestionList.d.ts | 8 +++++ 2 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 frontend/src/pages/QuestionListPage/types/QuestionList.d.ts diff --git a/frontend/src/api/question-list/getQuestionList.ts b/frontend/src/api/question-list/getQuestionList.ts index 8bdd78ec..95560747 100644 --- a/frontend/src/api/question-list/getQuestionList.ts +++ b/frontend/src/api/question-list/getQuestionList.ts @@ -1,12 +1,17 @@ -import axios from "axios"; +import { api } from "@/api/config/axios.ts"; +import type { QuestionList } from "@/pages/QuestionListPage/types/QuestionList"; interface QuestionListProps { - page: number; - limit: number; + page?: number; + limit?: number; + categoryName?: string; } -export const getQuestionList = async ({ page, limit }: QuestionListProps) => { - const response = await axios.get("/api/question-list", { +export const getQuestionList = async ({ + page, + limit, +}: QuestionListProps): Promise => { + const response = await api.get("/api/question-list", { params: { page, limit, @@ -15,3 +20,23 @@ export const getQuestionList = async ({ page, limit }: QuestionListProps) => { return response.data.data.allQuestionLists; }; + +export const getQuestionListWithCategory = async ({ + categoryName, + page, + limit, +}: QuestionListProps): Promise => { + const response = await api.post( + `/api/question-list/category`, + { + categoryName, + }, + { + params: { + page, + limit, + }, + } + ); + return response.data.data.allQuestionLists; +}; diff --git a/frontend/src/pages/QuestionListPage/types/QuestionList.d.ts b/frontend/src/pages/QuestionListPage/types/QuestionList.d.ts new file mode 100644 index 00000000..19578230 --- /dev/null +++ b/frontend/src/pages/QuestionListPage/types/QuestionList.d.ts @@ -0,0 +1,8 @@ +export interface QuestionList { + id: number; + title: string; + usage: number; + isStarred?: boolean; + questionCount: number; + categoryNames: string[]; +} From 86f2c97a2c1be145b0a7049c3311c44af690aff2 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 16:33:48 +0900 Subject: [PATCH 02/22] =?UTF-8?q?refactor:=20=EC=A7=88=EB=AC=B8=EC=A7=80?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20API=20=EB=A6=AC=EC=95=A1=ED=8A=B8=20?= =?UTF-8?q?=EC=BF=BC=EB=A6=AC=EB=A1=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/api/useGetQuestionList.ts | 22 +++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/frontend/src/hooks/api/useGetQuestionList.ts b/frontend/src/hooks/api/useGetQuestionList.ts index 4968950d..62fb4e55 100644 --- a/frontend/src/hooks/api/useGetQuestionList.ts +++ b/frontend/src/hooks/api/useGetQuestionList.ts @@ -1,22 +1,30 @@ -import { getQuestionList } from "@/api/question-list/getQuestionList"; +import { + getQuestionList, + getQuestionListWithCategory, +} from "@/api/question-list/getQuestionList"; import { useQuery } from "@tanstack/react-query"; interface UseGetQuestionListProps { - page: number; - limit: number; + page?: number; + limit?: number; + category: string; } -export const useCreateQuestionList = ({ +export const useQuestionList = ({ page, limit, + category = "전체", }: UseGetQuestionListProps) => { const { data, isLoading, error } = useQuery({ - queryKey: ["questions", page, limit], - queryFn: () => getQuestionList({ page, limit }), + queryKey: ["questions", page, limit, category], + queryFn: () => + category !== "전체" + ? getQuestionListWithCategory({ categoryName: category, page, limit }) + : getQuestionList({ page, limit }), }); return { - questions: data, + data, isLoading, error, }; From 23edf6bd1c580203a063ee74fbaf73f53330dde2 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 16:34:12 +0900 Subject: [PATCH 03/22] =?UTF-8?q?refactor:=20=EC=A7=88=EB=AC=B8=EC=A7=80?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=EB=A5=BC=20pages/QuestionListPage=20?= =?UTF-8?q?=EB=82=B4=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../QuestionListPage.tsx | 71 ++++++++----------- frontend/src/routes.tsx | 2 +- 2 files changed, 29 insertions(+), 44 deletions(-) rename frontend/src/pages/{ => QuestionListPage}/QuestionListPage.tsx (63%) diff --git a/frontend/src/pages/QuestionListPage.tsx b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx similarity index 63% rename from frontend/src/pages/QuestionListPage.tsx rename to frontend/src/pages/QuestionListPage/QuestionListPage.tsx index 4d940c33..1657bf90 100644 --- a/frontend/src/pages/QuestionListPage.tsx +++ b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx @@ -6,28 +6,25 @@ import { useEffect, useState } from "react"; import LoadingIndicator from "@components/common/LoadingIndicator.tsx"; import { IoMdAdd } from "react-icons/io"; import { useNavigate, useSearchParams } from "react-router-dom"; -import axios from "axios"; import CreateButton from "@components/common/CreateButton.tsx"; import { options } from "@/constants/CategoryData.ts"; - -interface QuestionList { - id: number; - title: string; - usage: number; - isStarred?: boolean; - questionCount: number; - categoryNames: string[]; -} +import { useQuestionList } from "@hooks/api/useGetQuestionList.ts"; +import ErrorBlock from "@components/common/Error/ErrorBlock.tsx"; const QuestionList = () => { - const [questionList, setQuestionList] = useState([]); - const [questionLoading, setQuestionLoading] = useState(true); + // const [questionList, setQuestionList] = useState([]); + // const [questionLoading, setQuestionLoading] = useState(true); const navigate = useNavigate(); const [selectedCategory, setSelectedCategory] = useState("전체"); const [searchParams, setSearchParams] = useSearchParams(); + const { + data: questionList, + error, + isLoading: questionLoading, + } = useQuestionList({ category: selectedCategory }); + useEffect(() => { - getQuestionList(selectedCategory); if (selectedCategory !== "전체") { console.log("selectedCategory", selectedCategory); setSearchParams({ category: selectedCategory }); @@ -40,23 +37,6 @@ const QuestionList = () => { } }, [searchParams]); - const getQuestionList = async (category?: string) => { - try { - const response = - category !== "전체" - ? await axios.post(`/api/question-list/category`, { - categoryName: category, - }) - : await axios.get("/api/question-list"); - const data = response.data.data.allQuestionLists ?? []; - setQuestionList(data); - setQuestionLoading(false); - } catch (error) { - console.error("질문지 리스트 불러오기 실패", error); - setQuestionList([]); - } - }; - const handleNavigateDetail = (id: number) => { navigate(`/questions/${id}`); }; @@ -85,25 +65,30 @@ const QuestionList = () => {
- {questionList.map((list) => ( - handleNavigateDetail(list.id)} - /> - ))} + {questionList && + questionList.map((list) => ( + handleNavigateDetail(list.id)} + /> + ))}
- {!questionLoading && questionList.length === 0 && ( + {!questionLoading && questionList?.length === 0 && (
이런! 아직 질문지가 없습니다! 처음으로 생성해보시는 것은 어떤가요? ☃️
)} + ); diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx index 35969791..3272b2c4 100644 --- a/frontend/src/routes.tsx +++ b/frontend/src/routes.tsx @@ -6,7 +6,7 @@ import SessionListPage from "./pages/SessionListPage/SessionListPage.tsx"; import SessionPage from "./pages/SessionPage"; import ErrorPage from "@/pages/ErrorPage.tsx"; import LoginPage from "@/pages/Login/LoginPage.tsx"; -import QuestionListPage from "@/pages/QuestionListPage.tsx"; +import QuestionListPage from "@/pages/QuestionListPage/QuestionListPage.tsx"; import AuthCallbackPage from "@/pages/Login/AuthCallbackPage.tsx"; import MyPage from "@/pages/MyPage/index.tsx"; import ProtectedRouteLayout from "@components/layout/ProtectedRouteLayout.tsx"; From 0c8ea2a61f480e754e8304919b64eaa958b0f9f1 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 16:44:34 +0900 Subject: [PATCH 04/22] =?UTF-8?q?refactor:=20=EC=A7=88=EB=AC=B8=EC=A7=80?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../QuestionListPage/QuestionListPage.tsx | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx index 1657bf90..83187e8e 100644 --- a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx +++ b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx @@ -1,6 +1,5 @@ import Sidebar from "@components/common/Sidebar.tsx"; import SearchBar from "@components/common/SearchBar.tsx"; -import QuestionsPreviewCard from "@components/questions/QuestionsPreviewCard.tsx"; import Select from "@components/common/Select.tsx"; import { useEffect, useState } from "react"; import LoadingIndicator from "@components/common/LoadingIndicator.tsx"; @@ -10,8 +9,9 @@ import CreateButton from "@components/common/CreateButton.tsx"; import { options } from "@/constants/CategoryData.ts"; import { useQuestionList } from "@hooks/api/useGetQuestionList.ts"; import ErrorBlock from "@components/common/Error/ErrorBlock.tsx"; +import QuestionList from "@/pages/QuestionListPage/view/QuestionList.tsx"; -const QuestionList = () => { +const QuestionListPage = () => { // const [questionList, setQuestionList] = useState([]); // const [questionLoading, setQuestionLoading] = useState(true); const navigate = useNavigate(); @@ -64,21 +64,8 @@ const QuestionList = () => { -
- {questionList && - questionList.map((list) => ( - handleNavigateDetail(list.id)} - /> - ))} -
+ + {!questionLoading && questionList?.length === 0 && (
이런! 아직 질문지가 없습니다! 처음으로 생성해보시는 것은 어떤가요? @@ -94,4 +81,4 @@ const QuestionList = () => { ); }; -export default QuestionList; +export default QuestionListPage; From 45fd8c01b08023b62049326c7bfbe4ad2e258b46 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 16:46:40 +0900 Subject: [PATCH 05/22] =?UTF-8?q?refactor:=20=EC=A7=88=EB=AC=B8=EC=A7=80?= =?UTF-8?q?=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20=EB=B0=A9=EC=8B=9D=20navigate=EC=97=90?= =?UTF-8?q?=EC=84=9C=20Link=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 --- .../questions/QuestionsPreviewCard.tsx | 10 +++---- .../QuestionListPage/QuestionListPage.tsx | 9 +------ .../QuestionListPage/view/QuestionList.tsx | 27 +++++++++++++++++++ 3 files changed, 33 insertions(+), 13 deletions(-) create mode 100644 frontend/src/pages/QuestionListPage/view/QuestionList.tsx diff --git a/frontend/src/components/questions/QuestionsPreviewCard.tsx b/frontend/src/components/questions/QuestionsPreviewCard.tsx index 72d41dbe..9e43a0da 100644 --- a/frontend/src/components/questions/QuestionsPreviewCard.tsx +++ b/frontend/src/components/questions/QuestionsPreviewCard.tsx @@ -1,4 +1,5 @@ import { FaStar, FaUsers } from "react-icons/fa6"; +import { Link } from "react-router-dom"; interface QuestionCardProps { id: number; @@ -7,21 +8,20 @@ interface QuestionCardProps { usage: number; isStarred?: boolean; category: string; - onClick: () => void; } const QuestionCard = ({ + id, title, questionCount, usage, isStarred = false, category, - onClick, }: QuestionCardProps) => { return ( -
@@ -50,7 +50,7 @@ const QuestionCard = ({ {usage}
-
+ ); }; diff --git a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx index 83187e8e..6609ccf0 100644 --- a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx +++ b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx @@ -4,7 +4,7 @@ import Select from "@components/common/Select.tsx"; import { useEffect, useState } from "react"; import LoadingIndicator from "@components/common/LoadingIndicator.tsx"; import { IoMdAdd } from "react-icons/io"; -import { useNavigate, useSearchParams } from "react-router-dom"; +import { useSearchParams } from "react-router-dom"; import CreateButton from "@components/common/CreateButton.tsx"; import { options } from "@/constants/CategoryData.ts"; import { useQuestionList } from "@hooks/api/useGetQuestionList.ts"; @@ -12,9 +12,6 @@ import ErrorBlock from "@components/common/Error/ErrorBlock.tsx"; import QuestionList from "@/pages/QuestionListPage/view/QuestionList.tsx"; const QuestionListPage = () => { - // const [questionList, setQuestionList] = useState([]); - // const [questionLoading, setQuestionLoading] = useState(true); - const navigate = useNavigate(); const [selectedCategory, setSelectedCategory] = useState("전체"); const [searchParams, setSearchParams] = useSearchParams(); @@ -37,10 +34,6 @@ const QuestionListPage = () => { } }, [searchParams]); - const handleNavigateDetail = (id: number) => { - navigate(`/questions/${id}`); - }; - return (
diff --git a/frontend/src/pages/QuestionListPage/view/QuestionList.tsx b/frontend/src/pages/QuestionListPage/view/QuestionList.tsx new file mode 100644 index 00000000..4f38d560 --- /dev/null +++ b/frontend/src/pages/QuestionListPage/view/QuestionList.tsx @@ -0,0 +1,27 @@ +import QuestionsPreviewCard from "@components/questions/QuestionsPreviewCard.tsx"; +import type { QuestionList } from "@/pages/QuestionListPage/types/QuestionList.ts"; + +interface QuestionListProps { + questionList?: QuestionList[]; +} + +const QuestionList = ({ questionList }: QuestionListProps) => { + return ( +
+ {questionList && + questionList.map((list) => ( + + ))} +
+ ); +}; + +export default QuestionList; From 56c6dae1cfcaa3c9fc88c7fe9414708c61a1eca2 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 16:48:34 +0900 Subject: [PATCH 06/22] =?UTF-8?q?refactor:=20=EC=A7=88=EB=AC=B8=EC=A7=80?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/QuestionListPage/QuestionListPage.tsx | 12 ++++-------- .../src/pages/QuestionListPage/view/QuestionList.tsx | 9 ++++++++- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx index 6609ccf0..248be7a8 100644 --- a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx +++ b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx @@ -57,14 +57,10 @@ const QuestionListPage = () => { - - - {!questionLoading && questionList?.length === 0 && ( -
- 이런! 아직 질문지가 없습니다! 처음으로 생성해보시는 것은 어떤가요? - ☃️ -
- )} + { +const QuestionList = ({ questionList, questionLoading }: QuestionListProps) => { return (
{questionList && @@ -20,6 +21,12 @@ const QuestionList = ({ questionList }: QuestionListProps) => { usage={list.usage} /> ))} + + {!questionLoading && questionList?.length === 0 && ( +
+ 이런! 아직 질문지가 없습니다! 처음으로 생성해보시는 것은 어떤가요? ☃️ +
+ )}
); }; From 1837eb7ca53adaf7a28d9405e0d46c1b8797ad12 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 16:55:50 +0900 Subject: [PATCH 07/22] =?UTF-8?q?refactor:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=84=A0=ED=83=9D=EA=B3=BC=20searchParams=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=EC=9D=84=20useCategory=EC=97=90=20=EC=9C=84?= =?UTF-8?q?=EC=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../QuestionListPage/QuestionListPage.tsx | 24 +++-------------- .../QuestionListPage/hooks/useCategory.ts | 27 +++++++++++++++++++ ...stionList.tsx => QuestionsPreviewList.tsx} | 7 +++-- 3 files changed, 36 insertions(+), 22 deletions(-) create mode 100644 frontend/src/pages/QuestionListPage/hooks/useCategory.ts rename frontend/src/pages/QuestionListPage/view/{QuestionList.tsx => QuestionsPreviewList.tsx} (88%) diff --git a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx index 248be7a8..0168fc95 100644 --- a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx +++ b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx @@ -1,39 +1,23 @@ import Sidebar from "@components/common/Sidebar.tsx"; import SearchBar from "@components/common/SearchBar.tsx"; import Select from "@components/common/Select.tsx"; -import { useEffect, useState } from "react"; import LoadingIndicator from "@components/common/LoadingIndicator.tsx"; import { IoMdAdd } from "react-icons/io"; -import { useSearchParams } from "react-router-dom"; import CreateButton from "@components/common/CreateButton.tsx"; import { options } from "@/constants/CategoryData.ts"; import { useQuestionList } from "@hooks/api/useGetQuestionList.ts"; import ErrorBlock from "@components/common/Error/ErrorBlock.tsx"; -import QuestionList from "@/pages/QuestionListPage/view/QuestionList.tsx"; +import QuestionsPreviewList from "@/pages/QuestionListPage/view/QuestionsPreviewList.tsx"; +import useCategory from "@/pages/QuestionListPage/hooks/useCategory.ts"; const QuestionListPage = () => { - const [selectedCategory, setSelectedCategory] = useState("전체"); - const [searchParams, setSearchParams] = useSearchParams(); - + const { selectedCategory, setSelectedCategory } = useCategory(); const { data: questionList, error, isLoading: questionLoading, } = useQuestionList({ category: selectedCategory }); - useEffect(() => { - if (selectedCategory !== "전체") { - console.log("selectedCategory", selectedCategory); - setSearchParams({ category: selectedCategory }); - } - }, [selectedCategory]); - - useEffect(() => { - if (searchParams.get("category")) { - setSelectedCategory(searchParams.get("category") ?? "전체"); - } - }, [searchParams]); - return (
@@ -57,7 +41,7 @@ const QuestionListPage = () => { - diff --git a/frontend/src/pages/QuestionListPage/hooks/useCategory.ts b/frontend/src/pages/QuestionListPage/hooks/useCategory.ts new file mode 100644 index 00000000..0ffc4d2d --- /dev/null +++ b/frontend/src/pages/QuestionListPage/hooks/useCategory.ts @@ -0,0 +1,27 @@ +import { useEffect, useState } from "react"; +import { useSearchParams } from "react-router-dom"; + +const useCategory = () => { + const [selectedCategory, setSelectedCategory] = useState("전체"); + const [searchParams, setSearchParams] = useSearchParams(); + + useEffect(() => { + if (selectedCategory !== "전체") { + console.log("selectedCategory", selectedCategory); + setSearchParams({ category: selectedCategory }); + } + }, [selectedCategory]); + + useEffect(() => { + if (searchParams.get("category")) { + setSelectedCategory(searchParams.get("category") ?? "전체"); + } + }, [searchParams]); + + return { + selectedCategory, + setSelectedCategory, + }; +}; + +export default useCategory; diff --git a/frontend/src/pages/QuestionListPage/view/QuestionList.tsx b/frontend/src/pages/QuestionListPage/view/QuestionsPreviewList.tsx similarity index 88% rename from frontend/src/pages/QuestionListPage/view/QuestionList.tsx rename to frontend/src/pages/QuestionListPage/view/QuestionsPreviewList.tsx index b7df9e65..67a0025b 100644 --- a/frontend/src/pages/QuestionListPage/view/QuestionList.tsx +++ b/frontend/src/pages/QuestionListPage/view/QuestionsPreviewList.tsx @@ -6,7 +6,10 @@ interface QuestionListProps { questionLoading?: boolean; } -const QuestionList = ({ questionList, questionLoading }: QuestionListProps) => { +const QuestionsPreviewList = ({ + questionList, + questionLoading, +}: QuestionListProps) => { return (
{questionList && @@ -31,4 +34,4 @@ const QuestionList = ({ questionList, questionLoading }: QuestionListProps) => { ); }; -export default QuestionList; +export default QuestionsPreviewList; From 9236032f7c4e1f335648899f737fe7a8ae543758 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 17:00:19 +0900 Subject: [PATCH 08/22] =?UTF-8?q?fix:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=EA=B0=80=20=EC=A0=84=EC=B2=B4=EC=9D=BC=EB=95=8C=20sea?= =?UTF-8?q?rchParams=20=EC=97=86=EC=95=A0=EB=8F=84=EB=A1=9D=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/pages/QuestionListPage/QuestionListPage.tsx | 2 +- frontend/src/pages/QuestionListPage/hooks/useCategory.ts | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx index 0168fc95..98c061d0 100644 --- a/frontend/src/pages/QuestionListPage/QuestionListPage.tsx +++ b/frontend/src/pages/QuestionListPage/QuestionListPage.tsx @@ -21,7 +21,7 @@ const QuestionListPage = () => { return (
-
+

질문지 목록 diff --git a/frontend/src/pages/QuestionListPage/hooks/useCategory.ts b/frontend/src/pages/QuestionListPage/hooks/useCategory.ts index 0ffc4d2d..b9a4d9b5 100644 --- a/frontend/src/pages/QuestionListPage/hooks/useCategory.ts +++ b/frontend/src/pages/QuestionListPage/hooks/useCategory.ts @@ -7,8 +7,9 @@ const useCategory = () => { useEffect(() => { if (selectedCategory !== "전체") { - console.log("selectedCategory", selectedCategory); setSearchParams({ category: selectedCategory }); + } else { + setSearchParams({}); } }, [selectedCategory]); From 0c53f1962c97bf6dcf0046d40c43eb9c4e007193 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 17:03:20 +0900 Subject: [PATCH 09/22] =?UTF-8?q?style:=20=ED=98=B8=EB=B2=84=EC=8B=9C=20?= =?UTF-8?q?=EA=B7=B8=EB=A6=BC=EC=9E=90=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/questions/QuestionsPreviewCard.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/components/questions/QuestionsPreviewCard.tsx b/frontend/src/components/questions/QuestionsPreviewCard.tsx index 9e43a0da..1deab40f 100644 --- a/frontend/src/components/questions/QuestionsPreviewCard.tsx +++ b/frontend/src/components/questions/QuestionsPreviewCard.tsx @@ -21,7 +21,7 @@ const QuestionCard = ({ return (
@@ -35,11 +35,9 @@ const QuestionCard = ({ }`} />
-

{title}

-
{questionCount} From 269f0c314f250d09260ed8c939ad447b546c5b27 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 17:24:08 +0900 Subject: [PATCH 10/22] =?UTF-8?q?feat:=20=EC=A7=88=EB=AC=B8=EC=A7=80=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=9E=98=ED=95=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/CreateQuestionPage.tsx | 31 +++++++++++++---------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/frontend/src/pages/CreateQuestionPage.tsx b/frontend/src/pages/CreateQuestionPage.tsx index 2da7d5f7..55dc7ec2 100644 --- a/frontend/src/pages/CreateQuestionPage.tsx +++ b/frontend/src/pages/CreateQuestionPage.tsx @@ -1,23 +1,26 @@ import QuestionForm from "@/components/questions/create/QuestionForm"; import { IoArrowBackSharp } from "react-icons/io5"; import { Link } from "react-router-dom"; +import SidebarPageLayout from "@components/layout/SidebarPageLayout.tsx"; const CreateQuestionPage = () => { return ( -
- - - 면접 리스트로 돌아가기 - -

새로운 면접 질문 리스트 만들기

-

- 면접 스터디를 위한 새로운 질문지를 생성합니다. -

- -
+ +
+ + + 면접 리스트로 돌아가기 + +

새로운 면접 질문 리스트 만들기

+

+ 면접 스터디를 위한 새로운 질문지를 생성합니다. +

+ +
+ ); }; From 82520e212beb8f11c0c56665926416fbe1824ca5 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 17:25:05 +0900 Subject: [PATCH 11/22] =?UTF-8?q?feat:=20=EC=A7=88=EB=AC=B8=EC=A7=80=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EB=A0=88=EC=9D=B4?= =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=9E=98=ED=95=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/QuestionDetailPage.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/QuestionDetailPage.tsx b/frontend/src/pages/QuestionDetailPage.tsx index 9bbab5c2..6074cdfb 100644 --- a/frontend/src/pages/QuestionDetailPage.tsx +++ b/frontend/src/pages/QuestionDetailPage.tsx @@ -1,11 +1,10 @@ import { useNavigate, useParams } from "react-router-dom"; -import Sidebar from "@/components/common/Sidebar"; -import { sectionWithSidebar } from "@/constants/LayoutConstant.ts"; import QuestionTitle from "@/components/questions/detail/QuestionTitle.tsx"; import QuestionList from "@/components/questions/detail/QuestionList.tsx"; import { useGetQuestionContent } from "@/hooks/api/useGetQuestionContent"; import ButtonSection from "@/components/questions/detail/ButtonSection.tsx"; import { useEffect } from "react"; +import SidebarPageLayout from "@components/layout/SidebarPageLayout.tsx"; const QuestionDetailPage = () => { const navigate = useNavigate(); @@ -28,8 +27,7 @@ const QuestionDetailPage = () => { if (!question) return null; return ( -
- +
{
-
+ ); }; From fb1760ff4a0b43d183186c04c0c3c29274bb36eb Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 17:34:21 +0900 Subject: [PATCH 12/22] =?UTF-8?q?chore:=20=EC=BD=98=EC=86=94=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/SessionListPage/view/list/SessionList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/pages/SessionListPage/view/list/SessionList.tsx b/frontend/src/pages/SessionListPage/view/list/SessionList.tsx index 551079dd..b0f2f0f4 100644 --- a/frontend/src/pages/SessionListPage/view/list/SessionList.tsx +++ b/frontend/src/pages/SessionListPage/view/list/SessionList.tsx @@ -16,7 +16,6 @@ const SessionList = ({ sessionList, }: SessionListProps) => { const toast = useToast(); - console.log(sessionList); const renderSessionList = () => { return sessionList.map((session) => { return ( From d158efadc799454b2de08a000d2b81960ab1d3d8 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 19:17:23 +0900 Subject: [PATCH 13/22] =?UTF-8?q?feat:=20button=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=ED=98=B8=EB=B2=84=EC=8B=9C=20=ED=88=AC?= =?UTF-8?q?=EB=AA=85=EB=8F=84=20=EC=82=B4=EC=A7=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Button/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/common/Button/index.tsx b/frontend/src/components/common/Button/index.tsx index 66b008cf..fb188af2 100644 --- a/frontend/src/components/common/Button/index.tsx +++ b/frontend/src/components/common/Button/index.tsx @@ -15,7 +15,7 @@ const Button = ({ text, type, icon: Icon, onClick }: ButtonProps) => { return (
- +
+ 작성자 {question.username} • {question.contents.length}개의 질문 - +
{question.usage} From 4c870c27cddd7a7f708205438e2377d6619edfc9 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 19:59:30 +0900 Subject: [PATCH 15/22] =?UTF-8?q?style:=20=EC=A7=88=EB=AC=B8=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20flex=20direction=20col=20->=20row=EB=A1=9C?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../questions/detail/QuestionList.tsx/QuestionItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx b/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx index b427e8c0..3344e718 100644 --- a/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx +++ b/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx @@ -5,8 +5,8 @@ interface QuestionItemProps { const QuestionItem = ({ index, content }: QuestionItemProps) => { return ( -
-

Q{index + 1}

+
+

Q{index + 1}.

{content}

); From 5ca9f7fab82c7b180e53edab12586ba4334d61a9 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 20:31:09 +0900 Subject: [PATCH 16/22] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=9E=A9=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EB=B0=8F=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TODO: isScrapped 상태 필요 --- .../detail/ButtonSection.tsx/index.tsx | 22 ++++-- frontend/src/pages/QuestionDetailPage.tsx | 46 ------------ .../QuestionDetailPage/QuestionDetailPage.tsx | 73 +++++++++++++++++++ frontend/src/routes.tsx | 2 +- 4 files changed, 90 insertions(+), 53 deletions(-) delete mode 100644 frontend/src/pages/QuestionDetailPage.tsx create mode 100644 frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx diff --git a/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx b/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx index 0bf0b306..bdf7b25c 100644 --- a/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx +++ b/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx @@ -1,16 +1,26 @@ import Button from "@components/common/Button"; -import { FaBookmark } from "react-icons/fa"; +import { FaBookmark, FaRegBookmark } from "react-icons/fa"; import { IoMdShare } from "react-icons/io"; -const ButtonSection = () => { +interface ButtonSectionProps { + scrapQuestionList: () => void; + unScrapQuestionList: () => void; + isScrapped: boolean; +} + +const ButtonSection = ({ + scrapQuestionList, + unScrapQuestionList, + isScrapped, +}: ButtonSectionProps) => { return (
); diff --git a/frontend/src/pages/QuestionDetailPage.tsx b/frontend/src/pages/QuestionDetailPage.tsx deleted file mode 100644 index 6074cdfb..00000000 --- a/frontend/src/pages/QuestionDetailPage.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useNavigate, useParams } from "react-router-dom"; -import QuestionTitle from "@/components/questions/detail/QuestionTitle.tsx"; -import QuestionList from "@/components/questions/detail/QuestionList.tsx"; -import { useGetQuestionContent } from "@/hooks/api/useGetQuestionContent"; -import ButtonSection from "@/components/questions/detail/ButtonSection.tsx"; -import { useEffect } from "react"; -import SidebarPageLayout from "@components/layout/SidebarPageLayout.tsx"; - -const QuestionDetailPage = () => { - const navigate = useNavigate(); - const { questionId } = useParams(); - - const { - data: question, - isLoading, - error, - } = useGetQuestionContent(Number(questionId!)); - - useEffect(() => { - if (!questionId) { - navigate("/questions"); - } - }, [questionId, navigate]); - - if (isLoading) return
로딩 중
; - if (error) return
에러가 발생
; - if (!question) return null; - - return ( - -
-
- - - -
-
- - ); -}; - -export default QuestionDetailPage; diff --git a/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx b/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx new file mode 100644 index 00000000..61a72900 --- /dev/null +++ b/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx @@ -0,0 +1,73 @@ +import { useNavigate, useParams } from "react-router-dom"; +import QuestionTitle from "@components/questions/detail/QuestionTitle.tsx"; +import QuestionList from "@components/questions/detail/QuestionList.tsx"; +import { useGetQuestionContent } from "@hooks/api/useGetQuestionContent.ts"; +import ButtonSection from "@components/questions/detail/ButtonSection.tsx"; +import { useEffect, useState } from "react"; +import SidebarPageLayout from "@components/layout/SidebarPageLayout.tsx"; +import { api } from "@/api/config/axios.ts"; + +const QuestionDetailPage = () => { + const navigate = useNavigate(); + const { questionId } = useParams(); + const [isScrapped, setIsScrapped] = useState(false); + // TODO: isScrapped 상태를 서버에서 가져오는 로직이 추가되면 해당 로직을 추가 + + const { + data: question, + isLoading, + error, + } = useGetQuestionContent(Number(questionId!)); + + useEffect(() => { + if (!questionId) { + navigate("/questions"); + } + }, [questionId, navigate]); + + if (isLoading) return
로딩 중
; + if (error) return
에러가 발생
; + if (!question) return null; + + const postScrapQuestionList = async (id: string) => { + const response = await api.post("/api/question-list/scrap", { + questionListId: id, + }); + if (response.data.success) { + setIsScrapped(true); + } + }; + + const deleteScrapQuestionList = async (id: string) => { + const response = await api.delete("/api/question-list/scrap", { + data: { + questionListId: id, + }, + }); + if (response.data.success) { + setIsScrapped(false); + } + }; + + return ( + +
+
+ + + postScrapQuestionList(questionId!)} + unScrapQuestionList={() => deleteScrapQuestionList(questionId!)} + /> +
+
+ + ); +}; + +export default QuestionDetailPage; diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx index 3272b2c4..235f4639 100644 --- a/frontend/src/routes.tsx +++ b/frontend/src/routes.tsx @@ -1,7 +1,7 @@ import App from "./App.tsx"; import CreateQuestionPage from "./pages/CreateQuestionPage.tsx"; import CreateSessionPage from "./pages/CreateSessionPage.tsx"; -import QuestionDetailPage from "./pages/QuestionDetailPage.tsx"; +import QuestionDetailPage from "./pages/QuestionDetailPage/QuestionDetailPage.tsx"; import SessionListPage from "./pages/SessionListPage/SessionListPage.tsx"; import SessionPage from "./pages/SessionPage"; import ErrorPage from "@/pages/ErrorPage.tsx"; From 54c42991b99bf5a98a7e510e2063af88c422f86f Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 20:48:34 +0900 Subject: [PATCH 17/22] =?UTF-8?q?fix:=20=EC=96=B8=EC=8A=A4=ED=81=AC?= =?UTF-8?q?=EB=9E=A9=20API=20params=EB=A5=BC=20=EC=93=B0=EB=8F=84=EB=A1=9D?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/QuestionDetailPage/api/scrapAPI.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 frontend/src/pages/QuestionDetailPage/api/scrapAPI.ts diff --git a/frontend/src/pages/QuestionDetailPage/api/scrapAPI.ts b/frontend/src/pages/QuestionDetailPage/api/scrapAPI.ts new file mode 100644 index 00000000..ac0edeb1 --- /dev/null +++ b/frontend/src/pages/QuestionDetailPage/api/scrapAPI.ts @@ -0,0 +1,13 @@ +import { api } from "@/api/config/axios.ts"; + +export const postScrapQuestionList = async (id: string) => { + const response = await api.post("/api/question-list/scrap", { + questionListId: id, + }); + return response.data.success; +}; + +export const deleteScrapQuestionList = async (id: string) => { + const response = await api.delete(`/api/question-list/scrap/${id}`); + return response.data.success; +}; From b8c460ca56542e6ee2ed2539274e046a277a6e0f Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 20:50:45 +0900 Subject: [PATCH 18/22] =?UTF-8?q?refactor:=20isScrapped=20=EC=83=9D?= =?UTF-8?q?=EA=B8=B8=EB=95=8C=EA=B9=8C=EC=A7=80=EB=A7=8C=20=EC=9D=BC?= =?UTF-8?q?=ED=9A=8C=EC=84=B1=20=EC=83=81=ED=83=9C=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../QuestionDetailPage/QuestionDetailPage.tsx | 37 +++++++------------ 1 file changed, 14 insertions(+), 23 deletions(-) diff --git a/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx b/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx index 61a72900..5f2f6377 100644 --- a/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx +++ b/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx @@ -5,7 +5,10 @@ import { useGetQuestionContent } from "@hooks/api/useGetQuestionContent.ts"; import ButtonSection from "@components/questions/detail/ButtonSection.tsx"; import { useEffect, useState } from "react"; import SidebarPageLayout from "@components/layout/SidebarPageLayout.tsx"; -import { api } from "@/api/config/axios.ts"; +import { + deleteScrapQuestionList, + postScrapQuestionList, +} from "@/pages/QuestionDetailPage/api/scrapAPI.ts"; const QuestionDetailPage = () => { const navigate = useNavigate(); @@ -29,26 +32,6 @@ const QuestionDetailPage = () => { if (error) return
에러가 발생
; if (!question) return null; - const postScrapQuestionList = async (id: string) => { - const response = await api.post("/api/question-list/scrap", { - questionListId: id, - }); - if (response.data.success) { - setIsScrapped(true); - } - }; - - const deleteScrapQuestionList = async (id: string) => { - const response = await api.delete("/api/question-list/scrap", { - data: { - questionListId: id, - }, - }); - if (response.data.success) { - setIsScrapped(false); - } - }; - return (
@@ -61,8 +44,16 @@ const QuestionDetailPage = () => { postScrapQuestionList(questionId!)} - unScrapQuestionList={() => deleteScrapQuestionList(questionId!)} + scrapQuestionList={async () => { + if (await postScrapQuestionList(questionId!)) { + setIsScrapped(true); + } + }} + unScrapQuestionList={async () => { + if (await deleteScrapQuestionList(questionId!)) { + setIsScrapped(false); + } + }} />
From 004147428af9aa492237cfebddde314b518aa325 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 20:53:58 +0900 Subject: [PATCH 19/22] =?UTF-8?q?feat:=20=EA=B3=B5=EC=9C=A0=ED=95=98?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../questions/detail/ButtonSection.tsx/index.tsx | 9 ++++++++- .../src/pages/QuestionDetailPage/QuestionDetailPage.tsx | 8 ++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx b/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx index bdf7b25c..299ff042 100644 --- a/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx +++ b/frontend/src/components/questions/detail/ButtonSection.tsx/index.tsx @@ -6,16 +6,23 @@ interface ButtonSectionProps { scrapQuestionList: () => void; unScrapQuestionList: () => void; isScrapped: boolean; + shareQuestionList: () => void; } const ButtonSection = ({ scrapQuestionList, unScrapQuestionList, isScrapped, + shareQuestionList, }: ButtonSectionProps) => { return (
-
From dcc32a45f51d89d52553a24f11eaf7afcc0c491f Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 21:04:13 +0900 Subject: [PATCH 20/22] =?UTF-8?q?refactor:=20=EB=A1=9C=EB=94=A9,=20?= =?UTF-8?q?=EC=97=90=EB=9F=AC=EC=B2=98=EB=A6=AC=20=EA=B0=95=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../detail/QuestionList.tsx/index.tsx | 12 ++++- .../detail/QuestionTitle.tsx/index.tsx | 9 +++- .../QuestionDetailPage/QuestionDetailPage.tsx | 47 +++++++++++-------- 3 files changed, 45 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/questions/detail/QuestionList.tsx/index.tsx b/frontend/src/components/questions/detail/QuestionList.tsx/index.tsx index 5eafc6b7..01f9f658 100644 --- a/frontend/src/components/questions/detail/QuestionList.tsx/index.tsx +++ b/frontend/src/components/questions/detail/QuestionList.tsx/index.tsx @@ -1,5 +1,7 @@ import { useGetQuestionContent } from "@/hooks/api/useGetQuestionContent"; import QuestionItem from "./QuestionItem"; +import ErrorBlock from "@components/common/Error/ErrorBlock.tsx"; +import LoadingIndicator from "@components/common/LoadingIndicator.tsx"; const QuestionList = ({ questionId }: { questionId: string }) => { const { @@ -8,8 +10,14 @@ const QuestionList = ({ questionId }: { questionId: string }) => { error, } = useGetQuestionContent(Number(questionId)); - if (isLoading) return
로딩 중
; - if (error) return
에러가 발생
; + if (isLoading) return ; + if (error) + return ( + + ); if (!question) return null; return ( diff --git a/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx b/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx index e04c0106..a600560c 100644 --- a/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx +++ b/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx @@ -2,6 +2,7 @@ import { useGetQuestionContent } from "@/hooks/api/useGetQuestionContent"; import { MdEdit } from "react-icons/md"; import { RiDeleteBin6Fill } from "react-icons/ri"; import { FaRegBookmark, FaRegUser } from "react-icons/fa"; +import ErrorBlock from "@components/common/Error/ErrorBlock.tsx"; const QuestionTitle = ({ questionId }: { questionId: string }) => { const { @@ -11,7 +12,13 @@ const QuestionTitle = ({ questionId }: { questionId: string }) => { } = useGetQuestionContent(Number(questionId)); if (isLoading) return
로딩 중
; - if (error) return
에러 발생
; + if (error) + return ( + + ); if (!question) return null; return ( diff --git a/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx b/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx index 7a652ba6..d7fc510e 100644 --- a/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx +++ b/frontend/src/pages/QuestionDetailPage/QuestionDetailPage.tsx @@ -10,6 +10,8 @@ import { postScrapQuestionList, } from "@/pages/QuestionDetailPage/api/scrapAPI.ts"; import useToast from "@hooks/useToast.ts"; +import ErrorBlock from "@components/common/Error/ErrorBlock.tsx"; +import LoadingIndicator from "@components/common/LoadingIndicator.tsx"; const QuestionDetailPage = () => { const navigate = useNavigate(); @@ -30,13 +32,11 @@ const QuestionDetailPage = () => { } }, [questionId, navigate]); - if (isLoading) return
로딩 중
; - if (error) return
에러가 발생
; - if (!question) return null; - const shareQuestionList = () => { - navigator.clipboard.writeText(window.location.href); - toast.success(`${question.title} 질문지가 클립보드에 복사되었습니다.`); + if (question) { + navigator.clipboard.writeText(window.location.href); + toast.success(`${question.title} 질문지가 클립보드에 복사되었습니다.`); + } }; return ( @@ -47,22 +47,29 @@ const QuestionDetailPage = () => { "flex flex-col gap-4 w-47.5 p-8 bg-gray-white rounded-custom-l shadow-16" } > + + - { - if (await postScrapQuestionList(questionId!)) { - setIsScrapped(true); - } - }} - unScrapQuestionList={async () => { - if (await deleteScrapQuestionList(questionId!)) { - setIsScrapped(false); - } - }} - shareQuestionList={shareQuestionList} - /> + {question && ( + { + if (await postScrapQuestionList(questionId!)) { + setIsScrapped(true); + } + }} + unScrapQuestionList={async () => { + if (await deleteScrapQuestionList(questionId!)) { + setIsScrapped(false); + } + }} + shareQuestionList={shareQuestionList} + /> + )}
From 9466b6fd34e2618c856cb9c5b03c94e51dec0fb8 Mon Sep 17 00:00:00 2001 From: JeongwooSeo Date: Sat, 30 Nov 2024 21:07:37 +0900 Subject: [PATCH 21/22] =?UTF-8?q?chore:=20=EC=A7=88=EB=AC=B8=EC=A7=80=20?= =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=8B=80=20=EB=A1=9C=EB=94=A9=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/questions/detail/QuestionTitle.tsx/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx b/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx index a600560c..ad1caca3 100644 --- a/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx +++ b/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx @@ -11,7 +11,7 @@ const QuestionTitle = ({ questionId }: { questionId: string }) => { error, } = useGetQuestionContent(Number(questionId)); - if (isLoading) return
로딩 중
; + if (isLoading) return
; if (error) return ( Date: Sat, 30 Nov 2024 21:20:47 +0900 Subject: [PATCH 22/22] =?UTF-8?q?style:=20=EC=83=81=EC=84=B8=EB=B3=B4?= =?UTF-8?q?=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=8B=A4=ED=81=AC?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EC=A7=80=EC=9B=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../questions/detail/QuestionList.tsx/QuestionItem.tsx | 2 +- .../questions/detail/QuestionTitle.tsx/index.tsx | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx b/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx index 3344e718..1099858d 100644 --- a/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx +++ b/frontend/src/components/questions/detail/QuestionList.tsx/QuestionItem.tsx @@ -6,7 +6,7 @@ interface QuestionItemProps { const QuestionItem = ({ index, content }: QuestionItemProps) => { return (
-

Q{index + 1}.

+

Q{index + 1}.

{content}

); diff --git a/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx b/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx index ad1caca3..20930ac5 100644 --- a/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx +++ b/frontend/src/components/questions/detail/QuestionTitle.tsx/index.tsx @@ -25,17 +25,17 @@ const QuestionTitle = ({ questionId }: { questionId: string }) => {

{question.title}

-
+
-
+
작성자 {question.username} • {question.contents.length}개의 질문