Refactor/#339/application submit edit

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;
 };

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,

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 { Question, Title } from "@/components/application";
-import { useToast } from "@/components/ui/use-toast";
+import { usePathname } from "next/navigation";
 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 { Question, Title } from "@/components/containers/application";
+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<HTMLTextAreaElement>,
     index: number,
@@ -113,18 +81,11 @@ const ApplicationEditPage = ({
         ))}
       </Title>
       <div className="flex items-center justify-end gap-20">
-        <Button
-          className={`${buttonSize.sm} bg-st-white`}
-          onClick={() => router.back()}
-        >
-          취소
-        </Button>
-        <Button
-          onClick={handleClickEdit}
-          className={`${buttonSize.sm} bg-st-primary text-st-white`}
-        >
-          수정 완료
-        </Button>
+        <EditButtons
+          survey={survey}
+          applicationId={applicationId}
+          steadyId={steadyId}
+        />
       </div>
     </>
   );

src/app/(steady)/(application)/application/submit/[id]/page.tsx → src/app/(steady)/(application)/application/submit/[steady_id]/page.tsx

@@ -3,14 +3,14 @@
 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 { Question, Title } from "@/components/containers/application";
 import {
   getSteadyDetailsKey,
   getSteadyQuestionsKey,

src/app/(steady)/steady/applicant/[steady_id]/[application_id]/page.tsx

@@ -1,16 +1,10 @@
 "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 ApplicantButtons from "@/components/containers/applicant/ApplicantButtons";
+import { Question } from "@/components/containers/application";
+import { getApplicationDetailsKey } from "@/constants/queryKeys";
 
 const UserApplicantPage = ({
   params,
@@ -19,32 +13,11 @@ const UserApplicantPage = ({
 }) => {
   const applicationId = params.application_id;
   const steadyId = params.steady_id;
-  const queryClient = useQueryClient();
+
   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 (
     <div className="flex w-full flex-col gap-10 overflow-y-scroll pr-30">
@@ -60,42 +33,13 @@ const UserApplicantPage = ({
         </Question>
       ))}
       <div className="mt-auto flex justify-end gap-20">
-        <AlertModal
-          trigger={
-            <Button className={`${buttonSize.sm} bg-st-red text-st-white`}>
-              거절
-            </Button>
-          }
-          actionButton={
-            <Button
-              className={`${buttonSize.sm} bg-st-red text-st-white`}
-              onClick={handleClickReject}
-            >
-              거절
-            </Button>
-          }
-        >
-          <div className="text-18 font-bold">거절 하시겠습니까?</div>
-        </AlertModal>
-        <AlertModal
-          trigger={
-            <Button className={`${buttonSize.sm} bg-st-green text-st-white`}>
-              승인
-            </Button>
-          }
-          actionButton={
-            <Button
-              className={`${buttonSize.sm} bg-st-green text-st-white`}
-              onClick={handleClickAccept}
-            >
-              승인
-            </Button>
-          }
-        >
-          <div className="text-18 font-bold">승인 하시겠습니까?</div>
-        </AlertModal>
+        <ApplicantButtons
+          applicationId={applicationId}
+          steadyId={steadyId}
+        />
       </div>
     </div>
   );
 };
+
 export default UserApplicantPage;

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>
   );
 };