Feat: 모집글 작성 수정 페이지 api연동 제외 (#154)

* Feat:api 연동 셋팅 * Feat:리액트 쿼리 추가 * Feat: 쿼리 셋팅 수정 및 관련 타입 오류해결 - 모집글 작성, 모집글 수정 페이지 쿼리 셋팅 수정 및 관련 타입 오류 해결 - post api 관련 글 작성하기, 수정하기 함수 타입변경 - 드랍다운 관련 상수에 각 value 추가 * Feat:스터디 모집글 작성 유효성 검사 처리 기능 추가 - handleSubmit 함수에 모집글 작성 유효성 처리 기능 추가 (요청 처리 오류시 알림창, 스크롤 최상단으로 이동) * Design:모집글 작성페이지 레이아웃 css수정 * Refactor:타입 수정
co-KKIRI · Mar 25, 2024 · bc651e3 · bc651e3
1 parent cc21a5f
commit bc651e3
Show file tree

Hide file tree

Showing 14 changed files with 258 additions and 153 deletions.
diff --git a/co-kkiri/src/components/commons/DropDowns/DeadlineDropdown/DeadlineDropdown.tsx b/co-kkiri/src/components/commons/DropDowns/DeadlineDropdown/DeadlineDropdown.tsx
@@ -8,7 +8,7 @@ import useOpenToggle from "@/hooks/useOpenToggle";
 import SquareDropButton from "../commons/SquareDropButton";
 import { Calendar } from "./ui/calendar";
 interface DeadlineDropdownProps {
-  placeholder: string;
+  placeholder: string | null;
   selectedOption: string;
   onSelect: (option: string) => void;
 }

diff --git a/co-kkiri/src/components/commons/DropDowns/Dropdown.tsx b/co-kkiri/src/components/commons/DropDowns/Dropdown.tsx
@@ -4,8 +4,8 @@ import DropMenu from "./commons/DropMenu";
 import styled from "styled-components";
 
 interface DropdownProps {
-  placeholder?: string;
-  selectedOption?: string;
+  placeholder: string;
+  selectedOption?: string | null;
   options: string[];
   onSelect: (option: string) => void;
   dropdownRef?: React.RefCallback<HTMLButtonElement>;

diff --git a/co-kkiri/src/components/commons/ReactQuill/index.tsx b/co-kkiri/src/components/commons/ReactQuill/index.tsx
@@ -4,7 +4,7 @@ import "react-quill/dist/quill.snow.css";
 import CustomToolbar from "./CustomToolbar";
 import styled from "styled-components";
 import DESIGN_TOKEN from "@/styles/tokens";
-import { RecruitmentRequest } from "@/types/recruitmentRequestTypes";
+import { RecruitApiRequestDto } from "@/lib/api/post/type";
 
 const formats = [
   "header",
@@ -21,9 +21,9 @@ const formats = [
 ];
 
 export default function QuillEditor({
-  setSelectedOption,
+  setSelectedOptions,
 }: {
-  setSelectedOption: React.Dispatch<React.SetStateAction<RecruitmentRequest>>;
+  setSelectedOptions: React.Dispatch<React.SetStateAction<RecruitApiRequestDto>>;
 }) {
   const modules = useMemo(() => {
     return {
@@ -34,14 +34,14 @@ export default function QuillEditor({
   }, []);
 
   const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedOption((prevOptions) => ({
+    setSelectedOptions((prevOptions) => ({
       ...prevOptions,
       title: e.target.value,
     }));
   };
 
   const handleContentChange = (content: string) => {
-    setSelectedOption((prevOptions) => ({
+    setSelectedOptions((prevOptions) => ({
       ...prevOptions,
       content: content,
     }));

diff --git a/co-kkiri/src/components/commons/RecruitmentRequestLayout/LinkInput.tsx b/co-kkiri/src/components/commons/RecruitmentRequestLayout/LinkInput.tsx
@@ -9,12 +9,12 @@ interface LinkInputProps {
 
 export default function LinkInput({ selectedOption, onChange }: LinkInputProps) {
   const { recruitment } = DROPDOWN_INFO;
-  const optionIndex = recruitment.contactWay.options?.indexOf(selectedOption);
-  const value = recruitment.contactWay.placeholder[optionIndex];
+  const optionIndex = recruitment.contactWay.options.indexOf(selectedOption);
+  const value = selectedOption ? String(recruitment.contactWay.placeholder[optionIndex]) : "";
 
   return (
     <Container>
-      {selectedOption !== "기타" ? <Input placeholder={value} onChange={(e) => onChange(e.target.value)} /> : null}
+      {selectedOption !== "기타" && <Input placeholder={value} onChange={(e) => onChange(e.target.value)} />}
     </Container>
   );
 }

diff --git a/co-kkiri/src/components/commons/RecruitmentRequestLayout/RecruitLayout.styled.ts b/co-kkiri/src/components/commons/RecruitmentRequestLayout/RecruitLayout.styled.ts
@@ -24,12 +24,38 @@ export const Container = styled.form`
   }
 `;
 
+export const SelectContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  width: 77.4rem;
+  gap: 4rem;
+
+  & p {
+    ${typography.font12Medium}
+    color: ${color.red};
+  }
+
+  & h1 {
+    border-bottom: 0.1rem solid ${color.gray[2]};
+    padding-bottom: 2rem;
+  }
+
+  ${mediaQueries.tablet} {
+    width: 46.2rem;
+  }
+
+  ${mediaQueries.mobile} {
+    width: 32rem;
+  }
+`;
+
 export const GirdContainer = styled.div`
   & h3 {
     display: flex;
 
     & span {
       color: ${color.red};
+      margin-left: 0.2rem;
     }
   }
 
@@ -74,10 +100,6 @@ export const RadioButtonBox = styled.div`
     display: flex;
     gap: 3rem;
   }
-
-  & p {
-    margin-top: -1.2rem;
-  }
 `;
 
 export const RadioButtonWarper = styled.div`
@@ -102,16 +124,24 @@ export const SelectBox = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
+  height: 10.1rem;
+
+  & p {
+    position: relative;
+    top: -0.4rem;
+  }
 `;
 
 export const SelectChipBox = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  height: 9.5rem;
 
   & h3 {
     & span {
       color: ${color.red};
+      margin-left: 0.2rem;
     }
   }
 
@@ -122,7 +152,7 @@ export const SelectChipBox = styled.div`
   }
 
   & p {
-    margin-top: -0.95rem;
+    margin-top: -1.2rem;
   }
 `;
 
@@ -142,27 +172,3 @@ export const SubmitButtonBox = styled.div`
   gap: 1.2rem;
   justify-content: end;
 `;
-
-export const SelectContainer = styled.form`
-  display: flex;
-  flex-direction: column;
-  width: 77.4rem;
-  gap: 4rem;
-
-  & p {
-    color: ${color.red};
-  }
-
-  & h1 {
-    border-bottom: 0.1rem solid ${color.gray[2]};
-    padding-bottom: 2rem;
-  }
-
-  ${mediaQueries.tablet} {
-    width: 46.2rem;
-  }
-
-  ${mediaQueries.mobile} {
-    width: 32rem;
-  }
-`;