From 5a01f76defe2779674d5dd8afba3310f3317f87e Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 21:52:45 +0900 Subject: [PATCH 01/21] =?UTF-8?q?=F0=9F=94=A8=20Refactor(#338):=20?= =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EC=84=9C=20=EC=A0=9C=EC=B6=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=84=B0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../submit/{[id] => [steady_id]}/page.tsx | 72 +++++-------------- .../applicationSubmit/SubmitButtons.tsx | 70 ++++++++++++++++++ 2 files changed, 87 insertions(+), 55 deletions(-) rename src/app/(steady)/(application)/application/submit/{[id] => [steady_id]}/page.tsx (59%) create mode 100644 src/components/containers/applicationSubmit/SubmitButtons.tsx diff --git a/src/app/(steady)/(application)/application/submit/[id]/page.tsx b/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx similarity index 59% rename from src/app/(steady)/(application)/application/submit/[id]/page.tsx rename to src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx index bae2def4..1246ba52 100644 --- a/src/app/(steady)/(application)/application/submit/[id]/page.tsx +++ b/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx @@ -4,27 +4,25 @@ import type { ChangeEvent } from "react"; import { useEffect, useState } from "react"; import { usePathname, useRouter } from "next/navigation"; import { Question, Title } from "@/components/application"; -import { useToast } from "@/components/ui/use-toast"; import { TextArea } from "@radix-ui/themes"; import { useSuspenseQuery } from "@tanstack/react-query"; -import submitApplication from "@/services/application/submitApplication"; import getSteadyDetails from "@/services/steady/getSteadyDetails"; import getSteadyQuestions from "@/services/steady/getSteadyQuestions"; -import Button, { buttonSize } from "@/components/_common/Button"; +import SubmitButtons from "@/components/containers/applicationSubmit/SubmitButtons"; import { getSteadyDetailsKey, getSteadyQuestionsKey, } from "@/constants/queryKeys"; -interface pageParams { - id: string; -} - -const ApplicationSubmitPage = ({ params }: { params: pageParams }) => { - const router = useRouter(); +const ApplicationSubmitPage = ({ + params, +}: { + params: { steady_id: string }; +}) => { const pathname = usePathname(); - const steadyId = params.id; + const steadyId = params.steady_id; const pageType = pathname.split("/")[2]; + const router = useRouter(); const { data: steadyQuestionsData } = useSuspenseQuery({ queryKey: getSteadyQuestionsKey(steadyId), queryFn: () => getSteadyQuestions(steadyId), @@ -36,14 +34,12 @@ const ApplicationSubmitPage = ({ params }: { params: pageParams }) => { answer: "", })), ); - const { toast } = useToast(); - const { data: steadyDetailsData, refetch: steadyDetailsRefetch } = - useSuspenseQuery({ - queryKey: getSteadyDetailsKey(steadyId), - queryFn: () => getSteadyDetails(steadyId), - staleTime: 10000, - }); + const { data: steadyDetailsData } = useSuspenseQuery({ + queryKey: getSteadyDetailsKey(steadyId), + queryFn: () => getSteadyDetails(steadyId), + staleTime: 10000, + }); useEffect(() => { if (steadyDetailsData.applicationId !== null) { @@ -63,32 +59,6 @@ const ApplicationSubmitPage = ({ params }: { params: pageParams }) => { ); }; - const onSubmitAnswers = async () => { - const checkInvalidAnswers = applicationData.some( - (item) => !item.answer.length, - ); - if (checkInvalidAnswers) { - toast({ - description: "입력되지 않은 항목이 있습니다.", - variant: "red", - }); - } else { - try { - await submitApplication(steadyId, applicationData); - toast({ - description: "스테디 참여 신청서 제출 성공!", - variant: "green", - }); - steadyDetailsRefetch(); - } catch (error) { - toast({ - description: "스테디 참여 신청서 제출 실패!", - variant: "red", - }); - } - } - }; - return ( <> { ))}
- - +
); diff --git a/src/components/containers/applicationSubmit/SubmitButtons.tsx b/src/components/containers/applicationSubmit/SubmitButtons.tsx new file mode 100644 index 00000000..d7f96287 --- /dev/null +++ b/src/components/containers/applicationSubmit/SubmitButtons.tsx @@ -0,0 +1,70 @@ +import { useRouter } from "next/navigation"; +import { useToast } from "@/components/ui/use-toast"; +import { useSuspenseQuery } from "@tanstack/react-query"; +import submitApplication from "@/services/application/submitApplication"; +import getSteadyDetails from "@/services/steady/getSteadyDetails"; +import Button, { buttonSize } from "@/components/_common/Button"; +import { getSteadyDetailsKey } from "@/constants/queryKeys"; + +interface SubmitButtonsProps { + applicationData: { + question: string; + answer: string; + }[]; + steadyId: string; +} + +const SubmitButtons = ({ applicationData, steadyId }: SubmitButtonsProps) => { + const router = useRouter(); + const { toast } = useToast(); + const { refetch: steadyDetailsRefetch } = useSuspenseQuery({ + queryKey: getSteadyDetailsKey(steadyId), + queryFn: () => getSteadyDetails(steadyId), + staleTime: 10000, + }); + + const onSubmitAnswers = async () => { + const checkInvalidAnswers = applicationData.some( + (item) => !item.answer.length, + ); + if (checkInvalidAnswers) { + toast({ + description: "입력되지 않은 항목이 있습니다.", + variant: "red", + }); + } else { + try { + await submitApplication(steadyId, applicationData); + toast({ + description: "스테디 참여 신청서 제출 성공!", + variant: "green", + }); + steadyDetailsRefetch(); + } catch (error) { + toast({ + description: "스테디 참여 신청서 제출 실패!", + variant: "red", + }); + } + } + }; + + return ( + <> + + + + ); +}; + +export default SubmitButtons; From 0462ffc7be8a77859f148a8140888fb1cc2a0da9 Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 21:58:11 +0900 Subject: [PATCH 02/21] =?UTF-8?q?=F0=9F=94=A8=20Refactor(#339):=20?= =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EC=84=9C=20=EC=88=98=EC=A0=95=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=84=B0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[steady_id]/[application_id]/page.tsx | 61 +++------------- .../applicationEdit/EditButtons.tsx | 71 +++++++++++++++++++ 2 files changed, 82 insertions(+), 50 deletions(-) create mode 100644 src/components/containers/applicationEdit/EditButtons.tsx diff --git a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx index 1469ff67..71799b7a 100644 --- a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx +++ b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx @@ -2,15 +2,13 @@ import type { ChangeEvent } from "react"; import { useState } from "react"; -import { usePathname, useRouter } from "next/navigation"; +import { usePathname } from "next/navigation"; import { Question, Title } from "@/components/application"; -import { useToast } from "@/components/ui/use-toast"; import { TextArea } from "@radix-ui/themes"; import { useSuspenseQuery } from "@tanstack/react-query"; -import editApplication from "@/services/application/editApplication"; import getApplicationDetails from "@/services/application/getApplicationDetails"; import getSteadyDetails from "@/services/steady/getSteadyDetails"; -import Button, { buttonSize } from "@/components/_common/Button"; +import EditButtons from "@/components/containers/applicationEdit/EditButtons"; import { getApplicationDetailsKey, getSteadyDetailsKey, @@ -23,15 +21,12 @@ const ApplicationEditPage = ({ }) => { const applicationId = params.application_id; const steadyId = params.steady_id; - const router = useRouter(); const pathname = usePathname(); const pageType = pathname.split("/")[2]; - const { toast } = useToast(); - const { data: applicationData, refetch: applicationRefetch } = - useSuspenseQuery({ - queryKey: getApplicationDetailsKey(applicationId), - queryFn: () => getApplicationDetails(applicationId), - }); + const { data: applicationData } = useSuspenseQuery({ + queryKey: getApplicationDetailsKey(applicationId), + queryFn: () => getApplicationDetails(applicationId), + }); const { data: steadyDetailsData } = useSuspenseQuery({ queryKey: getSteadyDetailsKey(steadyId), @@ -46,33 +41,6 @@ const ApplicationEditPage = ({ })), ); - const handleClickEdit = async () => { - const checkInvalidAnswers = survey.some((item) => !item.answer.length); - if (checkInvalidAnswers) { - toast({ - description: "입력되지 않은 항목이 있습니다.", - variant: "red", - }); - } else { - try { - await editApplication(applicationId, { - answers: survey.map((item) => item.answer), - }); - toast({ - description: "스테디 신청서 수정 성공!", - variant: "green", - }); - await applicationRefetch(); - router.replace(`/steady/detail/${steadyId}`); - } catch (error) { - toast({ - description: "스테디 신청서 수정 실패!", - variant: "red", - }); - } - } - }; - const handleChangeAnswer = ( event: ChangeEvent, index: number, @@ -113,18 +81,11 @@ const ApplicationEditPage = ({ ))}
- - +
); diff --git a/src/components/containers/applicationEdit/EditButtons.tsx b/src/components/containers/applicationEdit/EditButtons.tsx new file mode 100644 index 00000000..5bedff2d --- /dev/null +++ b/src/components/containers/applicationEdit/EditButtons.tsx @@ -0,0 +1,71 @@ +import { useRouter } from "next/navigation"; +import { useToast } from "@/components/ui/use-toast"; +import { useSuspenseQuery } from "@tanstack/react-query"; +import editApplication from "@/services/application/editApplication"; +import getApplicationDetails from "@/services/application/getApplicationDetails"; +import Button, { buttonSize } from "@/components/_common/Button"; +import { getApplicationDetailsKey } from "@/constants/queryKeys"; + +interface EditButtonsProps { + survey: { + question: string; + answer: string; + }[]; + applicationId: string; + steadyId: string; +} + +const EditButtons = ({ survey, applicationId, steadyId }: EditButtonsProps) => { + const { toast } = useToast(); + const router = useRouter(); + const { refetch: applicationRefetch } = useSuspenseQuery({ + queryKey: getApplicationDetailsKey(applicationId), + queryFn: () => getApplicationDetails(applicationId), + }); + + const handleClickEdit = async () => { + const checkInvalidAnswers = survey.some((item) => !item.answer.length); + if (checkInvalidAnswers) { + toast({ + description: "입력되지 않은 항목이 있습니다.", + variant: "red", + }); + } else { + try { + await editApplication(applicationId, { + answers: survey.map((item) => item.answer), + }); + toast({ + description: "스테디 신청서 수정 성공!", + variant: "green", + }); + await applicationRefetch(); + router.replace(`/steady/detail/${steadyId}`); + } catch (error) { + toast({ + description: "스테디 신청서 수정 실패!", + variant: "red", + }); + } + } + }; + + return ( + <> + + + + ); +}; + +export default EditButtons; From 5fbfb9ab1547142e286009ada0e25e3e1c52c22d Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 20:59:11 +0900 Subject: [PATCH 03/21] =?UTF-8?q?=F0=9F=94=A8=20Refactor(#337):=20?= =?UTF-8?q?=EC=8A=B9=EC=9D=B8,=20=EA=B1=B0=EC=A0=88=20=EC=8B=A0=EC=B2=AD?= =?UTF-8?q?=EC=9E=90=20=EA=B4=80=EB=A6=AC=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[steady_id]/[application_id]/page.tsx | 36 ++++------------- .../applicant/hooks/useManageApplicant.ts | 39 +++++++++++++++++++ 2 files changed, 46 insertions(+), 29 deletions(-) create mode 100644 src/components/containers/applicant/hooks/useManageApplicant.ts diff --git a/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx index 9831a92a..c5b834bb 100644 --- a/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx +++ b/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx @@ -1,16 +1,12 @@ "use client"; -import { useRouter } from "next/navigation"; import { Question } from "@/components/application"; -import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query"; -import changeApplicationStatus from "@/services/application/changeApplicationStatus"; +import { useSuspenseQuery } from "@tanstack/react-query"; import getApplicationDetails from "@/services/application/getApplicationDetails"; import Button, { buttonSize } from "@/components/_common/Button"; import { AlertModal } from "@/components/_common/Modal"; -import { - getApplicantListKey, - getApplicationDetailsKey, -} from "@/constants/queryKeys"; +import { useManageApplicant } from "@/components/containers/applicant/hooks/useManageApplicant"; +import { getApplicationDetailsKey } from "@/constants/queryKeys"; const UserApplicantPage = ({ params, @@ -19,32 +15,14 @@ const UserApplicantPage = ({ }) => { const applicationId = params.application_id; const steadyId = params.steady_id; - const queryClient = useQueryClient(); + const { handleClickAccept, handleClickReject } = useManageApplicant({ + applicationId, + steadyId, + }); const { data: applicationDetailsData } = useSuspenseQuery({ queryKey: getApplicationDetailsKey(applicationId), queryFn: () => getApplicationDetails(applicationId), }); - const router = useRouter(); - - const handleClickAccept = async () => { - await changeApplicationStatus(applicationId, { - status: "ACCEPTED", - }); - await queryClient.invalidateQueries({ - queryKey: getApplicantListKey(steadyId), - }); - router.replace(`/steady/applicant/${steadyId}`); - }; - - const handleClickReject = async () => { - await changeApplicationStatus(applicationId, { - status: "REJECTED", - }); - await queryClient.invalidateQueries({ - queryKey: getApplicantListKey(steadyId), - }); - router.replace(`/steady/applicant/${steadyId}`); - }; return (
diff --git a/src/components/containers/applicant/hooks/useManageApplicant.ts b/src/components/containers/applicant/hooks/useManageApplicant.ts new file mode 100644 index 00000000..8f2f6eab --- /dev/null +++ b/src/components/containers/applicant/hooks/useManageApplicant.ts @@ -0,0 +1,39 @@ +import { useRouter } from "next/navigation"; +import { useQueryClient } from "@tanstack/react-query"; +import changeApplicationStatus from "@/services/application/changeApplicationStatus"; +import { getApplicantListKey } from "@/constants/queryKeys"; + +interface ManageApplicantProps { + applicationId: string; + steadyId: string; +} + +export const useManageApplicant = ({ + applicationId, + steadyId, +}: ManageApplicantProps) => { + const router = useRouter(); + const queryClient = useQueryClient(); + + const handleClickAccept = async () => { + await changeApplicationStatus(applicationId, { + status: "ACCEPTED", + }); + await queryClient.invalidateQueries({ + queryKey: getApplicantListKey(steadyId), + }); + router.replace(`/steady/applicant/${steadyId}`); + }; + + const handleClickReject = async () => { + await changeApplicationStatus(applicationId, { + status: "REJECTED", + }); + await queryClient.invalidateQueries({ + queryKey: getApplicantListKey(steadyId), + }); + router.replace(`/steady/applicant/${steadyId}`); + }; + + return { handleClickAccept, handleClickReject }; +}; From a368af42adb5543a85c061e45efc8a9fd518aeaa Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 21:03:26 +0900 Subject: [PATCH 04/21] =?UTF-8?q?=F0=9F=93=9D=20Chore(#337):=20interface?= =?UTF-8?q?=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containers/applicant/hooks/useManageApplicant.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/containers/applicant/hooks/useManageApplicant.ts b/src/components/containers/applicant/hooks/useManageApplicant.ts index 8f2f6eab..44a11805 100644 --- a/src/components/containers/applicant/hooks/useManageApplicant.ts +++ b/src/components/containers/applicant/hooks/useManageApplicant.ts @@ -3,15 +3,13 @@ import { useQueryClient } from "@tanstack/react-query"; import changeApplicationStatus from "@/services/application/changeApplicationStatus"; import { getApplicantListKey } from "@/constants/queryKeys"; -interface ManageApplicantProps { - applicationId: string; - steadyId: string; -} - export const useManageApplicant = ({ applicationId, steadyId, -}: ManageApplicantProps) => { +}: { + applicationId: string; + steadyId: string; +}) => { const router = useRouter(); const queryClient = useQueryClient(); From 69314bf2a011eacacf8c3189f835ac7525190d44 Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 21:06:31 +0900 Subject: [PATCH 05/21] =?UTF-8?q?=F0=9F=94=A8=20Refactor(#337):=20?= =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EC=9E=90=20=EC=8A=B9=EB=9D=BD=20=EA=B1=B0?= =?UTF-8?q?=EC=A0=88=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[steady_id]/[application_id]/page.tsx | 47 ++------------- .../containers/applicant/ApplicantButtons.tsx | 57 +++++++++++++++++++ 2 files changed, 63 insertions(+), 41 deletions(-) create mode 100644 src/components/containers/applicant/ApplicantButtons.tsx diff --git a/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx index c5b834bb..6f3e586a 100644 --- a/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx +++ b/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx @@ -3,9 +3,7 @@ import { Question } from "@/components/application"; import { useSuspenseQuery } from "@tanstack/react-query"; import getApplicationDetails from "@/services/application/getApplicationDetails"; -import Button, { buttonSize } from "@/components/_common/Button"; -import { AlertModal } from "@/components/_common/Modal"; -import { useManageApplicant } from "@/components/containers/applicant/hooks/useManageApplicant"; +import ApplicantButtons from "@/components/containers/applicant/ApplicantButtons"; import { getApplicationDetailsKey } from "@/constants/queryKeys"; const UserApplicantPage = ({ @@ -15,10 +13,7 @@ const UserApplicantPage = ({ }) => { const applicationId = params.application_id; const steadyId = params.steady_id; - const { handleClickAccept, handleClickReject } = useManageApplicant({ - applicationId, - steadyId, - }); + const { data: applicationDetailsData } = useSuspenseQuery({ queryKey: getApplicationDetailsKey(applicationId), queryFn: () => getApplicationDetails(applicationId), @@ -38,40 +33,10 @@ const UserApplicantPage = ({ ))}
- - 거절 - - } - actionButton={ - - } - > -
거절 하시겠습니까?
- - - 승인 - - } - actionButton={ - - } - > -
승인 하시겠습니까?
- +
); diff --git a/src/components/containers/applicant/ApplicantButtons.tsx b/src/components/containers/applicant/ApplicantButtons.tsx new file mode 100644 index 00000000..93c7ebc3 --- /dev/null +++ b/src/components/containers/applicant/ApplicantButtons.tsx @@ -0,0 +1,57 @@ +import Button, { buttonSize } from "@/components/_common/Button"; +import { AlertModal } from "@/components/_common/Modal"; +import { useManageApplicant } from "./hooks/useManageApplicant"; + +const ApplicantButtons = ({ + applicationId, + steadyId, +}: { + applicationId: string; + steadyId: string; +}) => { + const { handleClickAccept, handleClickReject } = useManageApplicant({ + applicationId, + steadyId, + }); + + return ( + <> + + 거절 + + } + actionButton={ + + } + > +
거절 하시겠습니까?
+ + + 승인 + + } + actionButton={ + + } + > +
승인 하시겠습니까?
+ + + ); +}; + +export default ApplicantButtons; From 686c08bf3085bf1b2ff02f57071a17dbda54c786 Mon Sep 17 00:00:00 2001 From: Musix Date: Wed, 13 Dec 2023 19:08:40 +0900 Subject: [PATCH 06/21] =?UTF-8?q?=F0=9F=9A=A8=20Fix(#326):=20=ED=85=9C?= =?UTF-8?q?=ED=94=8C=EB=A6=BF=20=ED=8E=98=EC=9D=B4=EC=A7=80=20QA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mypage/template/edit/[id]/page.tsx | 37 ++++++++----------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx b/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx index 61331d6d..1dbdb2f3 100644 --- a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx +++ b/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx @@ -19,8 +19,7 @@ interface QuestionType { const EditTemplatePage = () => { const [question, setQuestion] = useState([]); - const [count, setCount] = useState(1); - const [content, setContent] = useState(""); + const [content, setContent] = useState("0"); const [isModalOpen, setIsModalOpen] = useState(false); const pathname = usePathname(); const templateId = pathname.split("/")[4]; @@ -34,7 +33,6 @@ const EditTemplatePage = () => { useEffect(() => { if (data) { - setCount(data.questions.length + 1); setQuestion( data.questions.map((item, index) => ({ id: index, value: item })), ); @@ -55,25 +53,29 @@ const EditTemplatePage = () => { }; const addQuestion = () => { - const newQuestion = { - id: count, - value: "", - }; - setQuestion((prev) => [...prev, newQuestion]); - setCount(count + 1); + setQuestion((prev) => [ + ...prev, + { id: prev[prev.length - 1].id + 1, value: "" }, + ]); }; const removeQuestion = (id: number) => { - setCount(count - 1); + if (question.length === 1) { + toast({ + description: "질문은 최소 1개 이상이어야 합니다.", + variant: "red", + }); + return; + } setQuestion((prev) => prev.filter((item) => item.id !== id)); }; - const handlePostTemplate = (title: string) => { + const handlePostTemplate = async (title: string) => { const json = { title: title, questions: question.map((item) => item.value), }; - updateTemplate(data?.id.toString() as string, json); + await updateTemplate(data?.id.toString() as string, json); router.push("/mypage/template"); }; @@ -157,16 +159,7 @@ const EditTemplatePage = () => { {isModify && (
{ - if (count === 2) { - toast({ - description: "질문은 최소 1개 이상이어야 합니다.", - variant: "red", - }); - } else { - removeQuestion(item.id); - } - }} + onClick={() => removeQuestion(item.id)} > Date: Sat, 16 Dec 2023 20:16:39 +0900 Subject: [PATCH 07/21] =?UTF-8?q?=F0=9F=9A=A8=20Fix(#326):=20=ED=85=9C?= =?UTF-8?q?=ED=94=8C=EB=A6=BF=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mypage/template/edit/[id]/page.tsx | 74 ++++++++++++------- 1 file changed, 48 insertions(+), 26 deletions(-) diff --git a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx b/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx index 1dbdb2f3..82021b0c 100644 --- a/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx +++ b/src/app/(user-menu)/mypage/template/edit/[id]/page.tsx @@ -4,6 +4,7 @@ import { useEffect, useState } from "react"; import { usePathname, useRouter } from "next/navigation"; import { toast } from "@/components/ui/use-toast"; import { useQuery } from "@tanstack/react-query"; +import { Command } from "cmdk"; import deleteTemplate from "@/services/template/deleteTemplate"; import getTemplateDetail from "@/services/template/getTemplateDetail"; import updateTemplate from "@/services/template/updateTemplate"; @@ -39,6 +40,15 @@ const EditTemplatePage = () => { } }, [data]); + useEffect(() => { + if (question.length !== 0) { + const curInput = question.reduce((prev, cur) => { + return cur.id > prev.id ? cur : prev; + }); + document.getElementById(`question-${curInput.id}`)?.focus(); + } + }, [question.length]); + const handleAddQuestion = (content: string) => { if (content === "") { toast({ @@ -98,6 +108,15 @@ const EditTemplatePage = () => { router.push("/mypage/template"); }; + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.nativeEvent.isComposing) { + return; + } + if (event.key === "Enter") { + addQuestion(); + } + }; + const openModal = () => { setIsModalOpen(true); }; @@ -142,33 +161,36 @@ const EditTemplatePage = () => {
- {question.map((item, index) => ( -
( + -
- handleInputChange(event, item.id)} - className="h-50 w-5/6 bg-st-white text-15 text-st-black outline-none lg:text-20" - /> - {isModify && ( -
removeQuestion(item.id)} - > - -
- )} -
+
+
+ handleInputChange(event, item.id)} + className="h-50 w-5/6 bg-st-white text-15 text-st-black outline-none lg:text-20" + /> + {isModify && ( +
removeQuestion(item.id)} + > + +
+ )} +
+ ))}
From ac4ea44c462b561ddda94f5d22396f114c319489 Mon Sep 17 00:00:00 2001 From: sscoderati Date: Fri, 15 Dec 2023 16:04:49 +0900 Subject: [PATCH 08/21] =?UTF-8?q?=F0=9F=9A=A8=20Fix(#333):=20=ED=8F=AC?= =?UTF-8?q?=EC=A7=80=EC=85=98=EA=B3=BC=20=EC=8A=A4=ED=83=9D=20=EC=B5=9C?= =?UTF-8?q?=EC=86=8C=201=EA=B0=9C=20=EC=9D=B4=EC=83=81=20=ED=8F=AC?= =?UTF-8?q?=ED=95=A8=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/schemas/steadySchema.ts | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/schemas/steadySchema.ts b/src/schemas/steadySchema.ts index b3bd5078..6cdaef36 100644 --- a/src/schemas/steadySchema.ts +++ b/src/schemas/steadySchema.ts @@ -33,12 +33,16 @@ export const SteadySchema = z.object({ content: z.string({ required_error: "스테디의 모집글 내용을 입력해주세요.", }), - positions: z.array(number(), { - required_error: "스테디의 모집 분야를 선택해주세요.", - }), - stacks: z.array(number(), { - required_error: "스테디의 기술 스택을 선택해주세요.", - }), + positions: z + .array(number(), { + required_error: "스테디의 모집 분야를 선택해주세요.", + }) + .min(1, { message: "스테디의 모집 분야를 1개 이상 선택해주세요." }), + stacks: z + .array(number(), { + required_error: "스테디의 기술 스택을 선택해주세요.", + }) + .min(1, { message: "스테디의 기술 스택을 1개 이상 선택해주세요." }), contact: z.union([ z .string({ required_error: "스테디의 연락 수단 정보를 입력해주세요." }) From 5c6ae41e6b8a467873bc249a0a3d569f7f14c751 Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 19:05:56 +0900 Subject: [PATCH 09/21] =?UTF-8?q?=F0=9F=9A=A8=20Fix(#332):=20queryClient?= =?UTF-8?q?=EC=9D=98=20clear=EB=A1=9C=20=EC=97=90=EB=9F=AC=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20reset=20=EC=98=A4=EB=A5=98=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(auth)/logout/page.tsx | 3 +++ src/app/error.tsx | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/(auth)/logout/page.tsx b/src/app/(auth)/logout/page.tsx index 5a5b965b..18573de6 100644 --- a/src/app/(auth)/logout/page.tsx +++ b/src/app/(auth)/logout/page.tsx @@ -3,12 +3,14 @@ import { useRouter } from "next/navigation"; import useAuthStore from "@/stores/isAuth"; import useLoginStepsStore from "@/stores/loginSteps"; +import { useQueryClient } from "@tanstack/react-query"; import { deleteCookie } from "cookies-next"; const Logout = () => { const router = useRouter(); const { setIsAuth } = useAuthStore(); const { setSteps } = useLoginStepsStore(); + const queryClient = useQueryClient(); // useEffect(() => { // axios.get("https://steady-client.vercel.app/api/logout").then(() => { // deleteCookie("access_token", { @@ -33,6 +35,7 @@ const Logout = () => { }); setSteps(0); setIsAuth(false); + queryClient.clear(); router.replace("/"); return null; }; diff --git a/src/app/error.tsx b/src/app/error.tsx index c6a2b635..dab519f9 100644 --- a/src/app/error.tsx +++ b/src/app/error.tsx @@ -11,6 +11,7 @@ import Button, { buttonSize } from "@/components/_common/Button"; const Error = ({ error, + reset, }: { error: AxiosError; reset: VoidFunction; @@ -46,7 +47,7 @@ const Error = ({
From 165dd5beedb3a241d59e49cd5c0741fedc8ff5a2 Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 19:16:29 +0900 Subject: [PATCH 10/21] =?UTF-8?q?=F0=9F=93=9D=20Chore(#332):=20application?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20containers=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=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 --- .../[steady_id]/[application_id]/page.tsx | 2 +- .../[steady_id]/[application_id]/page.tsx | 2 +- .../application/submit/[steady_id]/page.tsx | 74 ++++++++++++++----- .../[steady_id]/[application_id]/page.tsx | 2 +- .../{ => containers}/application/Question.tsx | 0 .../{ => containers}/application/Title.tsx | 0 .../{ => containers}/application/index.ts | 0 7 files changed, 59 insertions(+), 21 deletions(-) rename src/components/{ => containers}/application/Question.tsx (100%) rename src/components/{ => containers}/application/Title.tsx (100%) rename src/components/{ => containers}/application/index.ts (100%) diff --git a/src/app/(steady)/(application)/application/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/(application)/application/[steady_id]/[application_id]/page.tsx index edb395dc..9ebebf9b 100644 --- a/src/app/(steady)/(application)/application/[steady_id]/[application_id]/page.tsx +++ b/src/app/(steady)/(application)/application/[steady_id]/[application_id]/page.tsx @@ -1,11 +1,11 @@ "use client"; import { usePathname, useRouter } from "next/navigation"; -import { Question, Title } from "@/components/application"; import { useSuspenseQuery } from "@tanstack/react-query"; import getApplicationDetails from "@/services/application/getApplicationDetails"; import getSteadyDetails from "@/services/steady/getSteadyDetails"; import Button, { buttonSize } from "@/components/_common/Button"; +import { Question, Title } from "@/components/containers/application"; import useApplicationListQuery from "@/hooks/query/useApplicationListQuery"; import { getApplicationDetailsKey, diff --git a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx index 71799b7a..7970428c 100644 --- a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx +++ b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx @@ -3,11 +3,11 @@ import type { ChangeEvent } from "react"; import { useState } from "react"; import { usePathname } from "next/navigation"; -import { Question, Title } from "@/components/application"; import { TextArea } from "@radix-ui/themes"; import { useSuspenseQuery } from "@tanstack/react-query"; import getApplicationDetails from "@/services/application/getApplicationDetails"; import getSteadyDetails from "@/services/steady/getSteadyDetails"; +import { Question, Title } from "@/components/containers/application"; import EditButtons from "@/components/containers/applicationEdit/EditButtons"; import { getApplicationDetailsKey, diff --git a/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx b/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx index 1246ba52..47e74c55 100644 --- a/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx +++ b/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx @@ -3,26 +3,28 @@ import type { ChangeEvent } from "react"; import { useEffect, useState } from "react"; import { usePathname, useRouter } from "next/navigation"; -import { Question, Title } from "@/components/application"; +import { useToast } from "@/components/ui/use-toast"; import { TextArea } from "@radix-ui/themes"; import { useSuspenseQuery } from "@tanstack/react-query"; +import submitApplication from "@/services/application/submitApplication"; import getSteadyDetails from "@/services/steady/getSteadyDetails"; import getSteadyQuestions from "@/services/steady/getSteadyQuestions"; -import SubmitButtons from "@/components/containers/applicationSubmit/SubmitButtons"; +import Button, { buttonSize } from "@/components/_common/Button"; +import { Question, Title } from "@/components/containers/application"; import { getSteadyDetailsKey, getSteadyQuestionsKey, } from "@/constants/queryKeys"; -const ApplicationSubmitPage = ({ - params, -}: { - params: { steady_id: string }; -}) => { +interface pageParams { + id: string; +} + +const ApplicationSubmitPage = ({ params }: { params: pageParams }) => { + const router = useRouter(); const pathname = usePathname(); - const steadyId = params.steady_id; + const steadyId = params.id; const pageType = pathname.split("/")[2]; - const router = useRouter(); const { data: steadyQuestionsData } = useSuspenseQuery({ queryKey: getSteadyQuestionsKey(steadyId), queryFn: () => getSteadyQuestions(steadyId), @@ -34,12 +36,14 @@ const ApplicationSubmitPage = ({ answer: "", })), ); + const { toast } = useToast(); - const { data: steadyDetailsData } = useSuspenseQuery({ - queryKey: getSteadyDetailsKey(steadyId), - queryFn: () => getSteadyDetails(steadyId), - staleTime: 10000, - }); + const { data: steadyDetailsData, refetch: steadyDetailsRefetch } = + useSuspenseQuery({ + queryKey: getSteadyDetailsKey(steadyId), + queryFn: () => getSteadyDetails(steadyId), + staleTime: 10000, + }); useEffect(() => { if (steadyDetailsData.applicationId !== null) { @@ -59,6 +63,32 @@ const ApplicationSubmitPage = ({ ); }; + const onSubmitAnswers = async () => { + const checkInvalidAnswers = applicationData.some( + (item) => !item.answer.length, + ); + if (checkInvalidAnswers) { + toast({ + description: "입력되지 않은 항목이 있습니다.", + variant: "red", + }); + } else { + try { + await submitApplication(steadyId, applicationData); + toast({ + description: "스테디 참여 신청서 제출 성공!", + variant: "green", + }); + steadyDetailsRefetch(); + } catch (error) { + toast({ + description: "스테디 참여 신청서 제출 실패!", + variant: "red", + }); + } + } + }; + return ( <> <div className="flex items-center justify-end gap-20"> - <SubmitButtons - applicationData={applicationData} - steadyId={steadyId} - /> + <Button + className={`${buttonSize.sm} bg-st-white`} + onClick={() => router.back()} + > + 취소 + </Button> + <Button + onClick={onSubmitAnswers} + className={`${buttonSize.sm} bg-st-primary text-st-white`} + > + 제출 완료 + </Button> </div> </> ); diff --git a/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx index 6f3e586a..606cbae5 100644 --- a/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx +++ b/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx @@ -1,9 +1,9 @@ "use client"; -import { Question } from "@/components/application"; import { useSuspenseQuery } from "@tanstack/react-query"; import getApplicationDetails from "@/services/application/getApplicationDetails"; import ApplicantButtons from "@/components/containers/applicant/ApplicantButtons"; +import { Question } from "@/components/containers/application"; import { getApplicationDetailsKey } from "@/constants/queryKeys"; const UserApplicantPage = ({ diff --git a/src/components/application/Question.tsx b/src/components/containers/application/Question.tsx similarity index 100% rename from src/components/application/Question.tsx rename to src/components/containers/application/Question.tsx diff --git a/src/components/application/Title.tsx b/src/components/containers/application/Title.tsx similarity index 100% rename from src/components/application/Title.tsx rename to src/components/containers/application/Title.tsx diff --git a/src/components/application/index.ts b/src/components/containers/application/index.ts similarity index 100% rename from src/components/application/index.ts rename to src/components/containers/application/index.ts From 58fdfb608e9587af4793c155a25bb2899ae2e08f Mon Sep 17 00:00:00 2001 From: JiYoon <angella990825@gmail.com> Date: Sat, 16 Dec 2023 20:17:36 +0900 Subject: [PATCH 11/21] =?UTF-8?q?=E2=9C=A8=20Feat(#332):=20Title=20?= =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/_common/Title/index.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/components/_common/Title/index.tsx diff --git a/src/components/_common/Title/index.tsx b/src/components/_common/Title/index.tsx new file mode 100644 index 00000000..8c74681d --- /dev/null +++ b/src/components/_common/Title/index.tsx @@ -0,0 +1,9 @@ +const Title = ({ title }: { title: string }) => { + return ( + <div className="min-w-fit px-40 py-20 font-bold sm:text-20 md:text-25 lg:text-30"> + {title} + </div> + ); +}; + +export default Title; From e1f79de6e3e3568b6d8e55f29811350d6a321968 Mon Sep 17 00:00:00 2001 From: JiYoon <angella990825@gmail.com> Date: Sat, 16 Dec 2023 20:18:34 +0900 Subject: [PATCH 12/21] =?UTF-8?q?=F0=9F=93=9D=20Chore(#332):=20=EB=82=B4?= =?UTF-8?q?=EC=8A=A4=ED=85=8C=EB=94=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=ED=95=84=ED=84=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(user-menu)/mysteady/page.tsx | 56 ++++++------------- .../containers/mysteady/SteadyFilter.tsx | 27 +++++++++ .../containers/mysteady/constants/index.ts | 14 +++++ 3 files changed, 57 insertions(+), 40 deletions(-) create mode 100644 src/components/containers/mysteady/SteadyFilter.tsx create mode 100644 src/components/containers/mysteady/constants/index.ts diff --git a/src/app/(user-menu)/mysteady/page.tsx b/src/app/(user-menu)/mysteady/page.tsx index 7f74eb1f..0138d2d9 100644 --- a/src/app/(user-menu)/mysteady/page.tsx +++ b/src/app/(user-menu)/mysteady/page.tsx @@ -13,24 +13,13 @@ import Button from "@/components/_common/Button"; import ContactTag from "@/components/_common/ContactTag"; import Dropdown from "@/components/_common/Dropdown"; import Icon from "@/components/_common/Icon"; +import Title from "@/components/_common/Title"; +import SteadyFilter from "@/components/containers/mysteady/SteadyFilter"; +import { filterOptions } from "@/components/containers/mysteady/constants"; +import { emptySteadiesMessage } from "@/components/containers/mysteady/utils/emptySteadiesMessage"; import { useMySteadiesQuery } from "@/hooks/query/useMySteadiesQuery"; import { useScrollTo } from "@/hooks/useScrollTo"; -const filterOptions = [ - { - label: "전체", - linkTo: "/mysteady", - }, - { - label: "참여", - linkTo: "/mysteady?status=recruiting", - }, - { - label: "종료", - linkTo: "/mysteady?status=finished", - }, -]; - const MySteadyPage = () => { const searchParams = useSearchParams(); const search = searchParams.get("status") ?? undefined; @@ -90,33 +79,20 @@ const MySteadyPage = () => { } }; - const emptySteadiesMessage = () => { - switch (search) { - case "finished": - return "종료된 "; - case "recruiting" || "closed": - return "참여중인 "; - default: - return "참여중이거나 종료된 "; - } - }; - return ( <div className="flex flex-col max-sm:w-400 sm:w-500 md:w-600 lg:w-800 xl:w-1000"> <div className="flex items-center justify-between"> - <div className="min-w-fit px-40 py-20 font-bold sm:text-20 md:text-25 lg:text-30"> - 내 스테디 목록 - </div> - <Dropdown options={filterOptions}> - <div className="flex gap-10 text-16 text-st-black"> - 필터 - <Icon - name="chevron-down" - size={20} - color="" - /> - </div> - </Dropdown> + <Title title={"내 스테디 목록"} /> + <SteadyFilter + title={"필터"} + options={filterOptions} + > + <Icon + name="chevron-down" + size={20} + color="" + /> + </SteadyFilter> </div> <Separator className="h-5 w-full bg-st-gray-400" /> <div @@ -166,7 +142,7 @@ const MySteadyPage = () => { key={`${pageIndex}`} > <div className="max-sm:text-22 sm:text-22 md:text-25 lg:text-28 xl:text-30"> - {emptySteadiesMessage()} + {search && emptySteadiesMessage(search)} 스테디가 없습니다. </div> <Link href="/steady/create"> diff --git a/src/components/containers/mysteady/SteadyFilter.tsx b/src/components/containers/mysteady/SteadyFilter.tsx new file mode 100644 index 00000000..6ee56d7e --- /dev/null +++ b/src/components/containers/mysteady/SteadyFilter.tsx @@ -0,0 +1,27 @@ +import type { PropsWithChildren } from "react"; +import Dropdown from "@/components/_common/Dropdown"; + +interface SteadyFilterProps { + options: { + label: string; + linkTo: string; + }[]; + title: string; +} + +const SteadyFilter = ({ + options, + title, + children, +}: PropsWithChildren<SteadyFilterProps>) => { + return ( + <Dropdown options={options}> + <div className="flex gap-10 text-16 text-st-black"> + {title} + {children} + </div> + </Dropdown> + ); +}; + +export default SteadyFilter; diff --git a/src/components/containers/mysteady/constants/index.ts b/src/components/containers/mysteady/constants/index.ts new file mode 100644 index 00000000..6b1a8bd4 --- /dev/null +++ b/src/components/containers/mysteady/constants/index.ts @@ -0,0 +1,14 @@ +export const filterOptions = [ + { + label: "전체", + linkTo: "/mysteady", + }, + { + label: "참여", + linkTo: "/mysteady?status=recruiting", + }, + { + label: "종료", + linkTo: "/mysteady?status=finished", + }, +]; From 011405768a0e674207eb154193200ff98407aa94 Mon Sep 17 00:00:00 2001 From: JiYoon <angella990825@gmail.com> Date: Sat, 16 Dec 2023 20:19:22 +0900 Subject: [PATCH 13/21] =?UTF-8?q?=F0=9F=94=A8=20Refactor(#332):=20?= =?UTF-8?q?=EB=B9=88=EB=A9=94=EC=8B=9C=EC=A7=80=20utils=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containers/mysteady/utils/emptySteadiesMessage.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/components/containers/mysteady/utils/emptySteadiesMessage.ts diff --git a/src/components/containers/mysteady/utils/emptySteadiesMessage.ts b/src/components/containers/mysteady/utils/emptySteadiesMessage.ts new file mode 100644 index 00000000..8b68e15a --- /dev/null +++ b/src/components/containers/mysteady/utils/emptySteadiesMessage.ts @@ -0,0 +1,10 @@ +export const emptySteadiesMessage = (search: string) => { + switch (search) { + case "finished": + return "종료된 "; + case "recruiting" || "closed": + return "참여중인 "; + default: + return "참여중이거나 종료된 "; + } +}; From 4dc3d497481b8fccd079a9f2b754bb8ede00bb82 Mon Sep 17 00:00:00 2001 From: JiYoon <angella990825@gmail.com> Date: Sat, 16 Dec 2023 20:33:59 +0900 Subject: [PATCH 14/21] =?UTF-8?q?=F0=9F=94=A8=20Refactor(#332):=20?= =?UTF-8?q?=EB=82=B4=EC=8A=A4=ED=85=8C=EB=94=94=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=EC=9E=88=EB=8A=94=20=EA=B2=BD=EC=9A=B0=EC=99=80=20=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(user-menu)/mysteady/page.tsx | 92 ++----------------- .../containers/mysteady/EmptySteady.tsx | 21 +++++ .../containers/mysteady/Steadies.tsx | 90 ++++++++++++++++++ 3 files changed, 118 insertions(+), 85 deletions(-) create mode 100644 src/components/containers/mysteady/EmptySteady.tsx create mode 100644 src/components/containers/mysteady/Steadies.tsx diff --git a/src/app/(user-menu)/mysteady/page.tsx b/src/app/(user-menu)/mysteady/page.tsx index 0138d2d9..c4afb694 100644 --- a/src/app/(user-menu)/mysteady/page.tsx +++ b/src/app/(user-menu)/mysteady/page.tsx @@ -2,21 +2,15 @@ import { Fragment } from "react"; import InfiniteScroll from "react-infinite-scroller"; -import Link from "next/link"; import { useSearchParams } from "next/navigation"; -import { useToast } from "@/components/ui/use-toast"; import { cn } from "@/lib/utils"; import { Separator } from "@radix-ui/themes"; -import { format } from "date-fns"; -import type { MySteadyContentType } from "@/services/types"; -import Button from "@/components/_common/Button"; -import ContactTag from "@/components/_common/ContactTag"; -import Dropdown from "@/components/_common/Dropdown"; import Icon from "@/components/_common/Icon"; import Title from "@/components/_common/Title"; +import EmptySteady from "@/components/containers/mysteady/EmptySteady"; +import Steadies from "@/components/containers/mysteady/Steadies"; import SteadyFilter from "@/components/containers/mysteady/SteadyFilter"; import { filterOptions } from "@/components/containers/mysteady/constants"; -import { emptySteadiesMessage } from "@/components/containers/mysteady/utils/emptySteadiesMessage"; import { useMySteadiesQuery } from "@/hooks/query/useMySteadiesQuery"; import { useScrollTo } from "@/hooks/useScrollTo"; @@ -28,56 +22,6 @@ const MySteadyPage = () => { direction: "desc", }); const ref = useScrollTo<HTMLDivElement>({ top: 0 }, [search]); - const { toast } = useToast(); - - const renderIcon = (steady: MySteadyContentType) => { - if (search === "finished") { - return <div className="h-20 w-20" />; - } - if (steady.isLeader && search !== "finished") { - return ( - <Dropdown - options={[ - { - label: "스테디 수정", - linkTo: `/steady/edit/${steady.steadyId}`, - }, - { - label: "스테디 질문 수정", - linkTo: `/steady/edit/questions/${steady.steadyId}`, - }, - { - label: "스테디 운영", - linkTo: `/steady/manage/${steady.steadyId}`, - }, - ]} - > - <div className="cursor-pointer"> - <Icon - name="gear" - size={20} - color="text-st-black" - /> - </div> - </Dropdown> - ); - } - if (!steady.isLeader && (search === "recruiting" || search === "closed")) { - return ( - <div - onClick={() => - toast({ description: "준비중인 기능입니다!", variant: "blue" }) - } - > - <Icon - name="exit" - size={20} - color="text-st-black" - /> - </div> - ); - } - }; return ( <div className="flex flex-col max-sm:w-400 sm:w-500 md:w-600 lg:w-800 xl:w-1000"> @@ -115,24 +59,10 @@ const MySteadyPage = () => { "flex min-h-140 w-full cursor-pointer items-center justify-between border-b-1 border-st-gray-200 hover:bg-st-gray-50 max-sm:px-20 sm:px-20 md:px-30 lg:px-50 xl:px-50", )} > - <Link - href={`/steady/detail/${steady.steadyId}`} - className="flex h-full w-fit flex-grow" - > - <div className="text-black flex w-full items-center text-center font-bold sm:text-15 md:text-20 lg:text-25"> - {steady.isLeader - ? `👑 ${steady.name}` - : `${steady.name}`} - </div> - </Link> - <div className="flex items-center justify-center gap-20"> - <ContactTag contactUrl={steady.contact} /> - <div className="text-bold max-w-fit text-15 text-st-gray-100 max-sm:hidden"> - {steady.isLeader ? "생성일: " : "참여일: "} - {format(new Date(steady.joinedAt), "yyyy.MM.dd")} - </div> - {renderIcon(steady)} - </div> + <Steadies + steady={steady} + search={search} + /> </div> ))} </Fragment> @@ -141,15 +71,7 @@ const MySteadyPage = () => { className="flex h-1000 flex-col items-center justify-center gap-20 text-30 font-bold" key={`${pageIndex}`} > - <div className="max-sm:text-22 sm:text-22 md:text-25 lg:text-28 xl:text-30"> - {search && emptySteadiesMessage(search)} - 스테디가 없습니다. - </div> - <Link href="/steady/create"> - <Button className="h-50 w-200 bg-st-primary text-20 text-st-white"> - 스테디 생성하기 - </Button> - </Link> + <EmptySteady search={search} /> </div> ), )} diff --git a/src/components/containers/mysteady/EmptySteady.tsx b/src/components/containers/mysteady/EmptySteady.tsx new file mode 100644 index 00000000..6dead6dd --- /dev/null +++ b/src/components/containers/mysteady/EmptySteady.tsx @@ -0,0 +1,21 @@ +import Link from "next/link"; +import Button from "@/components/_common/Button"; +import { emptySteadiesMessage } from "./utils/emptySteadiesMessage"; + +const EmptySteady = ({ search }: { search?: string }) => { + return ( + <> + <div className="max-sm:text-22 sm:text-22 md:text-25 lg:text-28 xl:text-30"> + {search && emptySteadiesMessage(search)} + 스테디가 없습니다. + </div> + <Link href="/steady/create"> + <Button className="h-50 w-200 bg-st-primary text-20 text-st-white"> + 스테디 생성하기 + </Button> + </Link> + </> + ); +}; + +export default EmptySteady; diff --git a/src/components/containers/mysteady/Steadies.tsx b/src/components/containers/mysteady/Steadies.tsx new file mode 100644 index 00000000..58ed30d3 --- /dev/null +++ b/src/components/containers/mysteady/Steadies.tsx @@ -0,0 +1,90 @@ +import Link from "next/link"; +import { useToast } from "@/components/ui/use-toast"; +import { format } from "date-fns"; +import type { MySteadyContentType } from "@/services/types"; +import ContactTag from "@/components/_common/ContactTag"; +import Dropdown from "@/components/_common/Dropdown"; +import Icon from "@/components/_common/Icon"; + +const Steadies = ({ + steady, + search, +}: { + steady: MySteadyContentType; + search?: string; +}) => { + const { toast } = useToast(); + + const renderIcon = () => { + if (search === "finished") { + return <div className="h-20 w-20" />; + } + if (steady.isLeader && search !== "finished") { + return ( + <Dropdown + options={[ + { + label: "스테디 수정", + linkTo: `/steady/edit/${steady.steadyId}`, + }, + { + label: "스테디 질문 수정", + linkTo: `/steady/edit/questions/${steady.steadyId}`, + }, + { + label: "스테디 운영", + linkTo: `/steady/manage/${steady.steadyId}`, + }, + ]} + > + <div className="cursor-pointer"> + <Icon + name="gear" + size={20} + color="text-st-black" + /> + </div> + </Dropdown> + ); + } + if (!steady.isLeader && (search === "recruiting" || search === "closed")) { + return ( + <div + onClick={() => + toast({ description: "준비중인 기능입니다!", variant: "blue" }) + } + > + <Icon + name="exit" + size={20} + color="text-st-black" + /> + </div> + ); + } + return <div className="h-20 w-20" />; + }; + + return ( + <> + <Link + href={`/steady/detail/${steady.steadyId}`} + className="flex h-full w-fit flex-grow" + > + <div className="text-black flex w-full items-center text-center font-bold sm:text-15 md:text-20 lg:text-25"> + {steady.isLeader ? `👑 ${steady.name}` : `${steady.name}`} + </div> + </Link> + <div className="flex items-center justify-center gap-20"> + <ContactTag contactUrl={steady.contact} /> + <div className="text-bold max-w-fit text-15 text-st-gray-100 max-sm:hidden"> + {steady.isLeader ? "생성일: " : "참여일: "} + {format(new Date(steady.joinedAt), "yyyy.MM.dd")} + </div> + {renderIcon()} + </div> + </> + ); +}; + +export default Steadies; From 832d5e4e5266bbc7139930d8a14ef67be0daf79a Mon Sep 17 00:00:00 2001 From: JiYoon <angella990825@gmail.com> Date: Sat, 16 Dec 2023 20:41:26 +0900 Subject: [PATCH 15/21] =?UTF-8?q?=F0=9F=92=84=20Style(#332):=20hover?= =?UTF-8?q?=EC=8B=9C=20scale=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(user-menu)/mysteady/page.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/(user-menu)/mysteady/page.tsx b/src/app/(user-menu)/mysteady/page.tsx index c4afb694..95ea3197 100644 --- a/src/app/(user-menu)/mysteady/page.tsx +++ b/src/app/(user-menu)/mysteady/page.tsx @@ -1,6 +1,5 @@ "use client"; -import { Fragment } from "react"; import InfiniteScroll from "react-infinite-scroller"; import { useSearchParams } from "next/navigation"; import { cn } from "@/lib/utils"; @@ -51,12 +50,15 @@ const MySteadyPage = () => { > {mySteadyData.pages.map((steadies, pageIndex) => steadies.content.length ? ( - <Fragment key={pageIndex}> + <div + key={pageIndex} + className="flex w-full flex-col gap-5" + > {steadies.content.map((steady, steadyIndex) => ( <div key={`${pageIndex}-${steadyIndex}`} className={cn( - "flex min-h-140 w-full cursor-pointer items-center justify-between border-b-1 border-st-gray-200 hover:bg-st-gray-50 max-sm:px-20 sm:px-20 md:px-30 lg:px-50 xl:px-50", + "flex min-h-140 w-full cursor-pointer items-center justify-between border-b-1 border-st-gray-200 transition hover:scale-105 hover:bg-st-gray-50 max-sm:px-20 sm:px-20 md:px-30 lg:px-50 xl:px-50", )} > <Steadies @@ -65,7 +67,7 @@ const MySteadyPage = () => { /> </div> ))} - </Fragment> + </div> ) : ( <div className="flex h-1000 flex-col items-center justify-center gap-20 text-30 font-bold" From 0a537d2050e3aa7f0eafb89793c7a59d8634c6cb Mon Sep 17 00:00:00 2001 From: JIY00N2 <angella990825@gmail.com> Date: Wed, 20 Dec 2023 15:11:27 +0900 Subject: [PATCH 16/21] =?UTF-8?q?=F0=9F=9A=A8=20=20Fix(#337):=20import=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../steady/applicant/[steady_id]/[application_id]/page.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx index 606cbae5..21b99101 100644 --- a/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx +++ b/src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx @@ -41,4 +41,5 @@ const UserApplicantPage = ({ </div> ); }; + export default UserApplicantPage; From d52d4ec9147a449b853c2915820202baea5fd1b2 Mon Sep 17 00:00:00 2001 From: JiYoon <angella990825@gmail.com> Date: Sat, 16 Dec 2023 21:26:54 +0900 Subject: [PATCH 17/21] =?UTF-8?q?=F0=9F=94=A8=20Refactor(#338):=20?= =?UTF-8?q?=EB=82=B4=EA=B0=80=20=EB=B0=9B=EC=9D=80=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=9B=EC=9D=80=20=EC=B9=B4?= =?UTF-8?q?=EB=93=9C,=20=ED=95=9C=20=EC=A4=84=20=ED=8F=89=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(user-menu)/mypage/reviews/page.tsx | 105 ++---------------- .../containers/myReviews/MyCardReview.tsx | 46 ++++++++ .../containers/myReviews/MyCommentReview.tsx | 80 +++++++++++++ 3 files changed, 137 insertions(+), 94 deletions(-) create mode 100644 src/components/containers/myReviews/MyCardReview.tsx create mode 100644 src/components/containers/myReviews/MyCommentReview.tsx diff --git a/src/app/(user-menu)/mypage/reviews/page.tsx b/src/app/(user-menu)/mypage/reviews/page.tsx index 66690101..e5ac6356 100644 --- a/src/app/(user-menu)/mypage/reviews/page.tsx +++ b/src/app/(user-menu)/mypage/reviews/page.tsx @@ -1,16 +1,9 @@ "use client"; -import { useState } from "react"; -import Image from "next/image"; -import { cn } from "@/lib/utils"; -import { Tooltip } from "@radix-ui/themes"; -import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query"; -import changeReviewStatus from "@/services/review/changeReviewStatus"; +import { useSuspenseQuery } from "@tanstack/react-query"; import getMyReviews from "@/services/review/getMyReviews"; -import Icon from "@/components/_common/Icon"; -import { SingleSelector } from "@/components/_common/Selector"; -import { CardTooltip } from "@/constants/cardTooltip"; -import { subBoxStyles, subMyPageTextStyles } from "@/constants/commonStyle"; +import MyCardReview from "@/components/containers/myReviews/MyCardReview"; +import MyCommentReview from "@/components/containers/myReviews/MyCommentReview"; import { MyReviewKey } from "@/constants/queryKeys"; const MyReviewsPage = () => { @@ -19,96 +12,20 @@ const MyReviewsPage = () => { queryFn: () => getMyReviews(), staleTime: 10000, }); - const [selectedId, setSelectedId] = useState<string | null>(null); - const queryClient = useQueryClient(); - - const selectedReviews = myReviewData.reviews.find( - (review) => review.steadyId === Number(selectedId), - ); - - const handlePublicReview = async (reviewId: number) => { - await changeReviewStatus(reviewId.toString()); - queryClient.invalidateQueries({ queryKey: MyReviewKey }); - }; return ( <div className="flex h-full flex-col gap-50 max-sm:w-400 sm:w-500 md:w-400 lg:w-600 xl:w-750"> <div className="font-bold max-sm:text-22 sm:text-22 md:text-25 lg:text-28 xl:text-30"> 내가 받은 리뷰 </div> - <div className={cn("flex flex-col gap-30")}> - <div className={cn(subMyPageTextStyles.title)}>받은 카드</div> - <div className={cn(subBoxStyles, "justify-evenly")}> - {myReviewData.userCards.map((card, index) => ( - <div - key={card.cardId} - className={cn( - subMyPageTextStyles.content, - "flex h-full flex-col items-center justify-center gap-5", - )} - > - <Tooltip content={CardTooltip[index]}> - <Image - src={card.imageUrl} - alt="카드 이미지" - width={40} - height={80} - /> - </Tooltip> - - <div className={cn(subMyPageTextStyles.content)}> - {`( ${card.count} )`} - </div> - </div> - ))} - </div> - </div> - <div className={cn("flex w-full flex-col gap-30")}> - <div className={cn(subMyPageTextStyles.title)}>한 줄 평</div> - <SingleSelector - items={myReviewData.reviews.map((review) => ({ - value: review.steadyId.toString(), - label: review.steadyName, - }))} - initialLabel="전체" - onSelectedChange={(value) => setSelectedId(value)} - className="h-60" - /> - <div - className={`${ - selectedReviews - ? "border-2 border-st-gray-100" - : "items-center justify-center" - } flex h-230 flex-col gap-20 overflow-auto px-10 py-5`} - > - {selectedReviews && - selectedReviews.reviews.map((review) => ( - <div - key={review.reviewId} - className="flex items-center justify-between" - > - <div className="text-ellipsis text-15 font-bold"> - {review.comment} - </div> - <button onClick={() => handlePublicReview(review.reviewId)}> - {review.isPublic ? ( - <Icon - name="eye" - size={25} - color="text-black" - /> - ) : ( - <Icon - name="eye-none" - size={25} - color="text-black" - /> - )} - </button> - </div> - ))} - </div> - </div> + <MyCardReview + title={"받은 카드"} + myReviewData={myReviewData} + /> + <MyCommentReview + title={"한 줄 평"} + myReviewData={myReviewData} + /> </div> ); }; diff --git a/src/components/containers/myReviews/MyCardReview.tsx b/src/components/containers/myReviews/MyCardReview.tsx new file mode 100644 index 00000000..8c3c9bbd --- /dev/null +++ b/src/components/containers/myReviews/MyCardReview.tsx @@ -0,0 +1,46 @@ +import Image from "next/image"; +import { cn } from "@/lib/utils"; +import { Tooltip } from "@radix-ui/themes"; +import type { MyReviewsType } from "@/services/types"; +import { CardTooltip } from "@/constants/cardTooltip"; +import { subBoxStyles, subMyPageTextStyles } from "@/constants/commonStyle"; + +const MyCardReview = ({ + myReviewData, + title, +}: { + myReviewData: MyReviewsType; + title: string; +}) => { + return ( + <div className={cn("flex flex-col gap-30")}> + <div className={cn(subMyPageTextStyles.title)}>{title}</div> + <div className={cn(subBoxStyles, "justify-evenly")}> + {myReviewData.userCards.map((card, index) => ( + <div + key={card.cardId} + className={cn( + subMyPageTextStyles.content, + "flex h-full flex-col items-center justify-center gap-5", + )} + > + <Tooltip content={CardTooltip[index]}> + <Image + src={card.imageUrl} + alt="카드 이미지" + width={40} + height={80} + /> + </Tooltip> + + <div className={cn(subMyPageTextStyles.content)}> + {`( ${card.count} )`} + </div> + </div> + ))} + </div> + </div> + ); +}; + +export default MyCardReview; diff --git a/src/components/containers/myReviews/MyCommentReview.tsx b/src/components/containers/myReviews/MyCommentReview.tsx new file mode 100644 index 00000000..6cfc0149 --- /dev/null +++ b/src/components/containers/myReviews/MyCommentReview.tsx @@ -0,0 +1,80 @@ +import { useState } from "react"; +import { cn } from "@/lib/utils"; +import { useQueryClient } from "@tanstack/react-query"; +import changeReviewStatus from "@/services/review/changeReviewStatus"; +import type { MyReviewsType } from "@/services/types"; +import Icon from "@/components/_common/Icon"; +import { SingleSelector } from "@/components/_common/Selector"; +import { subMyPageTextStyles } from "@/constants/commonStyle"; +import { MyReviewKey } from "@/constants/queryKeys"; + +const MyCommentReview = ({ + myReviewData, + title, +}: { + myReviewData: MyReviewsType; + title: string; +}) => { + const [selectedId, setSelectedId] = useState<string | null>(null); + const queryClient = useQueryClient(); + + const selectedReviews = myReviewData.reviews.find( + (review) => review.steadyId === Number(selectedId), + ); + + const handlePublicReview = async (reviewId: number) => { + await changeReviewStatus(reviewId.toString()); + queryClient.invalidateQueries({ queryKey: MyReviewKey }); + }; + + return ( + <div className={cn("flex w-full flex-col gap-30")}> + <div className={cn(subMyPageTextStyles.title)}>{title}</div> + <SingleSelector + items={myReviewData.reviews.map((review) => ({ + value: review.steadyId.toString(), + label: review.steadyName, + }))} + initialLabel="전체" + onSelectedChange={(value) => setSelectedId(value)} + className="h-60" + /> + <div + className={`${ + selectedReviews + ? "border-2 border-st-gray-100" + : "items-center justify-center" + } flex h-230 flex-col gap-20 overflow-auto px-10 py-5`} + > + {selectedReviews && + selectedReviews.reviews.map((review) => ( + <div + key={review.reviewId} + className="flex items-center justify-between" + > + <div className="text-ellipsis text-15 font-bold"> + {review.comment} + </div> + <button onClick={() => handlePublicReview(review.reviewId)}> + {review.isPublic ? ( + <Icon + name="eye" + size={25} + color="text-black" + /> + ) : ( + <Icon + name="eye-none" + size={25} + color="text-black" + /> + )} + </button> + </div> + ))} + </div> + </div> + ); +}; + +export default MyCommentReview; From 7e3f644bb713b26b53ce8015c5d68d82f17ae943 Mon Sep 17 00:00:00 2001 From: JiYoon <angella990825@gmail.com> Date: Sat, 16 Dec 2023 21:52:45 +0900 Subject: [PATCH 18/21] =?UTF-8?q?=F0=9F=94=A8=20Refactor(#338):=20?= =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EC=84=9C=20=EC=A0=9C=EC=B6=9C=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=84=B0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../application/submit/[steady_id]/page.tsx | 72 +++++-------------- 1 file changed, 17 insertions(+), 55 deletions(-) diff --git a/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx b/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx index 47e74c55..219cb15e 100644 --- a/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx +++ b/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx @@ -3,28 +3,26 @@ import type { ChangeEvent } from "react"; import { useEffect, useState } from "react"; import { usePathname, useRouter } from "next/navigation"; -import { useToast } from "@/components/ui/use-toast"; import { TextArea } from "@radix-ui/themes"; import { useSuspenseQuery } from "@tanstack/react-query"; -import submitApplication from "@/services/application/submitApplication"; import getSteadyDetails from "@/services/steady/getSteadyDetails"; import getSteadyQuestions from "@/services/steady/getSteadyQuestions"; -import Button, { buttonSize } from "@/components/_common/Button"; import { Question, Title } from "@/components/containers/application"; +import SubmitButtons from "@/components/containers/applicationSubmit/SubmitButtons"; import { getSteadyDetailsKey, getSteadyQuestionsKey, } from "@/constants/queryKeys"; -interface pageParams { - id: string; -} - -const ApplicationSubmitPage = ({ params }: { params: pageParams }) => { - const router = useRouter(); +const ApplicationSubmitPage = ({ + params, +}: { + params: { steady_id: string }; +}) => { const pathname = usePathname(); - const steadyId = params.id; + const steadyId = params.steady_id; const pageType = pathname.split("/")[2]; + const router = useRouter(); const { data: steadyQuestionsData } = useSuspenseQuery({ queryKey: getSteadyQuestionsKey(steadyId), queryFn: () => getSteadyQuestions(steadyId), @@ -36,14 +34,12 @@ const ApplicationSubmitPage = ({ params }: { params: pageParams }) => { answer: "", })), ); - const { toast } = useToast(); - const { data: steadyDetailsData, refetch: steadyDetailsRefetch } = - useSuspenseQuery({ - queryKey: getSteadyDetailsKey(steadyId), - queryFn: () => getSteadyDetails(steadyId), - staleTime: 10000, - }); + const { data: steadyDetailsData } = useSuspenseQuery({ + queryKey: getSteadyDetailsKey(steadyId), + queryFn: () => getSteadyDetails(steadyId), + staleTime: 10000, + }); useEffect(() => { if (steadyDetailsData.applicationId !== null) { @@ -63,32 +59,6 @@ const ApplicationSubmitPage = ({ params }: { params: pageParams }) => { ); }; - const onSubmitAnswers = async () => { - const checkInvalidAnswers = applicationData.some( - (item) => !item.answer.length, - ); - if (checkInvalidAnswers) { - toast({ - description: "입력되지 않은 항목이 있습니다.", - variant: "red", - }); - } else { - try { - await submitApplication(steadyId, applicationData); - toast({ - description: "스테디 참여 신청서 제출 성공!", - variant: "green", - }); - steadyDetailsRefetch(); - } catch (error) { - toast({ - description: "스테디 참여 신청서 제출 실패!", - variant: "red", - }); - } - } - }; - return ( <> <Title @@ -117,18 +87,10 @@ const ApplicationSubmitPage = ({ params }: { params: pageParams }) => { ))}
- - +
); From 54482c0a55cdd861aefc5f7a7c260131166c6917 Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 19:16:29 +0900 Subject: [PATCH 19/21] =?UTF-8?q?=F0=9F=93=9D=20Chore(#332):=20application?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20containers=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=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 --- .../edit/[steady_id]/[application_id]/page.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx index 7970428c..afe2d03f 100644 --- a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx +++ b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx @@ -2,13 +2,23 @@ import type { ChangeEvent } from "react"; import { useState } from "react"; +<<<<<<< HEAD import { usePathname } from "next/navigation"; +======= +import { usePathname, useRouter } from "next/navigation"; +import { useToast } from "@/components/ui/use-toast"; +>>>>>>> 51a33bf (📝 Chore(#332): application 컴포넌트 containers폴더로 이동) import { TextArea } from "@radix-ui/themes"; import { useSuspenseQuery } from "@tanstack/react-query"; import getApplicationDetails from "@/services/application/getApplicationDetails"; import getSteadyDetails from "@/services/steady/getSteadyDetails"; +<<<<<<< HEAD import { Question, Title } from "@/components/containers/application"; import EditButtons from "@/components/containers/applicationEdit/EditButtons"; +======= +import Button, { buttonSize } from "@/components/_common/Button"; +import { Question, Title } from "@/components/containers/application"; +>>>>>>> 51a33bf (📝 Chore(#332): application 컴포넌트 containers폴더로 이동) import { getApplicationDetailsKey, getSteadyDetailsKey, From 05f78fa86359296efb62e7afa8466c462e33bbad Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 21:58:11 +0900 Subject: [PATCH 20/21] =?UTF-8?q?=F0=9F=94=A8=20Refactor(#339):=20?= =?UTF-8?q?=EC=8B=A0=EC=B2=AD=EC=84=9C=20=EC=88=98=EC=A0=95=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8C=A9=ED=84=B0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../edit/[steady_id]/[application_id]/page.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx index afe2d03f..7970428c 100644 --- a/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx +++ b/src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx @@ -2,23 +2,13 @@ import type { ChangeEvent } from "react"; import { useState } from "react"; -<<<<<<< HEAD import { usePathname } from "next/navigation"; -======= -import { usePathname, useRouter } from "next/navigation"; -import { useToast } from "@/components/ui/use-toast"; ->>>>>>> 51a33bf (📝 Chore(#332): application 컴포넌트 containers폴더로 이동) import { TextArea } from "@radix-ui/themes"; import { useSuspenseQuery } from "@tanstack/react-query"; import getApplicationDetails from "@/services/application/getApplicationDetails"; import getSteadyDetails from "@/services/steady/getSteadyDetails"; -<<<<<<< HEAD import { Question, Title } from "@/components/containers/application"; import EditButtons from "@/components/containers/applicationEdit/EditButtons"; -======= -import Button, { buttonSize } from "@/components/_common/Button"; -import { Question, Title } from "@/components/containers/application"; ->>>>>>> 51a33bf (📝 Chore(#332): application 컴포넌트 containers폴더로 이동) import { getApplicationDetailsKey, getSteadyDetailsKey, From 1ec29addf5795ecf0678f4a2f0941c839493f6e5 Mon Sep 17 00:00:00 2001 From: JiYoon Date: Sat, 16 Dec 2023 19:16:29 +0900 Subject: [PATCH 21/21] =?UTF-8?q?=F0=9F=93=9D=20Chore(#332):=20application?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20containers=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=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 --- .../application/submit/[steady_id]/page.tsx | 72 ++++++++++++++----- 1 file changed, 55 insertions(+), 17 deletions(-) diff --git a/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx b/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx index 219cb15e..47e74c55 100644 --- a/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx +++ b/src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx @@ -3,26 +3,28 @@ import type { ChangeEvent } from "react"; import { useEffect, useState } from "react"; import { usePathname, useRouter } from "next/navigation"; +import { useToast } from "@/components/ui/use-toast"; import { TextArea } from "@radix-ui/themes"; import { useSuspenseQuery } from "@tanstack/react-query"; +import submitApplication from "@/services/application/submitApplication"; import getSteadyDetails from "@/services/steady/getSteadyDetails"; import getSteadyQuestions from "@/services/steady/getSteadyQuestions"; +import Button, { buttonSize } from "@/components/_common/Button"; import { Question, Title } from "@/components/containers/application"; -import SubmitButtons from "@/components/containers/applicationSubmit/SubmitButtons"; import { getSteadyDetailsKey, getSteadyQuestionsKey, } from "@/constants/queryKeys"; -const ApplicationSubmitPage = ({ - params, -}: { - params: { steady_id: string }; -}) => { +interface pageParams { + id: string; +} + +const ApplicationSubmitPage = ({ params }: { params: pageParams }) => { + const router = useRouter(); const pathname = usePathname(); - const steadyId = params.steady_id; + const steadyId = params.id; const pageType = pathname.split("/")[2]; - const router = useRouter(); const { data: steadyQuestionsData } = useSuspenseQuery({ queryKey: getSteadyQuestionsKey(steadyId), queryFn: () => getSteadyQuestions(steadyId), @@ -34,12 +36,14 @@ const ApplicationSubmitPage = ({ answer: "", })), ); + const { toast } = useToast(); - const { data: steadyDetailsData } = useSuspenseQuery({ - queryKey: getSteadyDetailsKey(steadyId), - queryFn: () => getSteadyDetails(steadyId), - staleTime: 10000, - }); + const { data: steadyDetailsData, refetch: steadyDetailsRefetch } = + useSuspenseQuery({ + queryKey: getSteadyDetailsKey(steadyId), + queryFn: () => getSteadyDetails(steadyId), + staleTime: 10000, + }); useEffect(() => { if (steadyDetailsData.applicationId !== null) { @@ -59,6 +63,32 @@ const ApplicationSubmitPage = ({ ); }; + const onSubmitAnswers = async () => { + const checkInvalidAnswers = applicationData.some( + (item) => !item.answer.length, + ); + if (checkInvalidAnswers) { + toast({ + description: "입력되지 않은 항목이 있습니다.", + variant: "red", + }); + } else { + try { + await submitApplication(steadyId, applicationData); + toast({ + description: "스테디 참여 신청서 제출 성공!", + variant: "green", + }); + steadyDetailsRefetch(); + } catch (error) { + toast({ + description: "스테디 참여 신청서 제출 실패!", + variant: "red", + }); + } + } + }; + return ( <> <div className="flex items-center justify-end gap-20"> - <SubmitButtons - applicationData={applicationData} - steadyId={steadyId} - /> + <Button + className={`${buttonSize.sm} bg-st-white`} + onClick={() => router.back()} + > + 취소 + </Button> + <Button + onClick={onSubmitAnswers} + className={`${buttonSize.sm} bg-st-primary text-st-white`} + > + 제출 완료 + </Button> </div> </> );