Fix: 모집글 작성, 수정하기 페이지 공통 레이아웃 라디오 버튼 수정 (#318)

* Feat:라디오 버튼 컴포넌트 수정 * Fix:selectedOptions type 초깃값 수정
co-KKIRI · Apr 4, 2024 · cefceb7 · cefceb7
1 parent 7e6e9ca
commit cefceb7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/co-kkiri/src/components/commons/RadioButton.tsx b/co-kkiri/src/components/commons/RadioButton.tsx
@@ -5,14 +5,14 @@ import styled from "styled-components";
 interface RadioButtonProps {
   children?: ReactNode;
   value: string;
-  defaultChecked?: boolean;
   onClick?: () => void;
+  checked: boolean;
 }
 
-export default function RadioButton({ children, value, defaultChecked, onClick }: RadioButtonProps) {
+export default function RadioButton({ children, value, checked, onClick }: RadioButtonProps) {
   return (
     <Label>
-      <RadioInput onClick={onClick} type="radio" name="invite" value={value} defaultChecked={defaultChecked} />
+      <RadioInput onClick={onClick} type="radio" name="invite" value={value} checked={checked} />
       {children}
     </Label>
   );

diff --git a/co-kkiri/src/components/commons/RecruitmentRequestLayout/StudyProjectRadioButton.tsx b/co-kkiri/src/components/commons/RecruitmentRequestLayout/StudyProjectRadioButton.tsx
@@ -12,7 +12,7 @@ export default function StudyProjectRadioButton({ selectedValue, onChange }: Stu
     <Container>
       <RadioButtonBox>
         <RadioButton
-          defaultChecked={selectedValue === "STUDY" ? true : false}
+          checked={selectedValue === "STUDY"}
           value="STUDY"
           onClick={() => {
             onChange("STUDY");
@@ -22,7 +22,7 @@ export default function StudyProjectRadioButton({ selectedValue, onChange }: Stu
       </RadioButtonBox>
       <RadioButtonBox>
         <RadioButton
-          defaultChecked={selectedValue === "PROJECT" ? true : false}
+          checked={selectedValue === "PROJECT"}
           value="PROJECT"
           onClick={() => {
             onChange("PROJECT");

diff --git a/co-kkiri/src/lib/api/post/type.ts b/co-kkiri/src/lib/api/post/type.ts
@@ -4,7 +4,7 @@ import { PageMeta, PaginationOptions } from "../pageMetaType";
 
 /**스터디모집하기, 수정하기 (연락 링크 추가 예정)*/
 export type RecruitApiRequestDto = {
-  type: CategoryList;
+  type: CategoryList | "";
   recruitEndAt: string;
   progressPeriod: string;
   capacity: number;

diff --git a/co-kkiri/src/pages/Edit.tsx b/co-kkiri/src/pages/Edit.tsx
@@ -2,7 +2,7 @@ import RecruitmentRequestLayout from "@/components/commons/RecruitmentRequestLay
 import * as S from "@/pages/Recruit/styled";
 import { RecruitApiRequestDto } from "@/lib/api/post/type";
 import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { getPostDetail } from "@/lib/api/post";
 import { useNavigate, useParams } from "react-router-dom";
 import usePostMutation from "@/hooks/useMutation/usePostMutation";
@@ -14,7 +14,7 @@ const { serverError, unauthorized } = TOAST;
 
 export default function Edit() {
   const [selectedOptions, setSelectedOptions] = useState<RecruitApiRequestDto>({
-    type: "STUDY",
+    type: "",
     recruitEndAt: "",
     progressPeriod: "",
     capacity: 999,
@@ -32,6 +32,7 @@ export default function Edit() {
   const postId = Number(id);
   const { editMutation } = usePostMutation();
   const pushToast = useToast();
+  const queryClient = useQueryClient();
 
   const { data } = useQuery({
     queryKey: ["postEdit", postId],
@@ -45,6 +46,7 @@ export default function Edit() {
         onSuccess: () => {
           pushToast("포스트가 성공적으로 업로드되었습니다.", "success");
           navigate(`/list/${postId}`);
+          queryClient.invalidateQueries();
         },
         onError: (error) => {
           pushToast(serverError.message, serverError.type);
@@ -78,13 +80,15 @@ export default function Edit() {
   }, [data]);
 
   return (
-    <S.Container>
-      <RecruitmentRequestLayout
-        isLoading={editMutation.isPending}
-        selectedOptions={selectedOptions}
-        onSubmitClick={handleSubmit}
-        buttonText="수정하기"
-      />
-    </S.Container>
+    data && (
+      <S.Container>
+        <RecruitmentRequestLayout
+          isLoading={editMutation.isPending}
+          selectedOptions={selectedOptions}
+          onSubmitClick={handleSubmit}
+          buttonText="수정하기"
+        />
+      </S.Container>
+    )
   );
 }