From 16a1d188c623c961ff7c7269b3f43223e4c37526 Mon Sep 17 00:00:00 2001
From: gracekim527 <lemonherb0323@naver.com>
Date: Sun, 3 Nov 2024 01:17:45 +0900
Subject: [PATCH 1/2] =?UTF-8?q?:lipstick:=20Style:=20=EC=A0=95=EB=B3=B4=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20(#10)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Router.tsx                              |   2 +
 src/components/common/dropdown/Dropdown.tsx |  97 +++++++++++++++
 src/components/common/input/style.ts        |   1 +
 src/components/common/radio/Radio.tsx       | 123 ++++++++++++++++++++
 src/components/common/textarea/Textarea.tsx |  36 ++++++
 src/components/personal/ImgInput.tsx        |  74 ++++++++++++
 src/pages/personal/Personal.tsx             | 121 +++++++++++++++++++
 7 files changed, 454 insertions(+)
 create mode 100644 src/components/common/dropdown/Dropdown.tsx
 create mode 100644 src/components/common/radio/Radio.tsx
 create mode 100644 src/components/common/textarea/Textarea.tsx
 create mode 100644 src/components/personal/ImgInput.tsx
 create mode 100644 src/pages/personal/Personal.tsx

diff --git a/src/Router.tsx b/src/Router.tsx
index 8f0e161..64031fa 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -4,6 +4,7 @@ import Login from "./pages/login/Login";
 import Create from "@pages/create/Create";
 import Test from "@pages/test/Test";
 import Invite from "@pages/invite/Invite";
+import Personal from "@pages/personal/Personal";
 
 const Router: React.FC = () => {
   return (
@@ -13,6 +14,7 @@ const Router: React.FC = () => {
         <Route path="/create" element={<Create />} />
         <Route path="test/:page" element={<Test />} />
         <Route path="/invite" element={<Invite />} />
+        <Route path="/personal" element={<Personal />} />
       </Routes>
     </BrowserRouter>
   );
diff --git a/src/components/common/dropdown/Dropdown.tsx b/src/components/common/dropdown/Dropdown.tsx
new file mode 100644
index 0000000..e615d64
--- /dev/null
+++ b/src/components/common/dropdown/Dropdown.tsx
@@ -0,0 +1,97 @@
+import React from "react";
+import styled from "styled-components";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface DropdownProps {
+  label: string;
+  essential: boolean;
+  options: Option[];
+  selectedOption: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+const Dropdown: React.FC<DropdownProps> = ({
+  label,
+  essential,
+  options,
+  selectedOption,
+  onChange,
+  placeholder,
+}) => {
+  const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(event.target.value);
+  };
+
+  return (
+    <Container>
+      <TitleWrapper>
+        <InputTitle>{label}</InputTitle>
+        {essential && <EssentialIcon>*</EssentialIcon>}
+      </TitleWrapper>
+      <SelectBox value={selectedOption} onChange={handleSelectChange}>
+        <option value="">{placeholder || "Select an option"}</option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </SelectBox>
+    </Container>
+  );
+};
+
+export default Dropdown;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const SelectBox = styled.select`
+  width: 340px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  background: #fff;
+  padding: 10px;
+  color: #343a40;
+  outline: none;
+  color: #495057;
+  font-family: Pretendard;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px; /* 100% */
+  letter-spacing: -0.1px;
+`;
+
+const InputTitle = styled.label`
+  color: #343a40;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+`;
+
+const EssentialIcon = styled.span`
+  color: #f5535e;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.1px;
+`;
diff --git a/src/components/common/input/style.ts b/src/components/common/input/style.ts
index e7a8eda..345e264 100644
--- a/src/components/common/input/style.ts
+++ b/src/components/common/input/style.ts
@@ -7,6 +7,7 @@ interface InputWrapProps {
 export const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
+  gap: 10px;
 `;
 
 export const InputTitleWrapper = styled.div`
diff --git a/src/components/common/radio/Radio.tsx b/src/components/common/radio/Radio.tsx
new file mode 100644
index 0000000..3f46e34
--- /dev/null
+++ b/src/components/common/radio/Radio.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface RadioGroupProps {
+  label: string;
+  options: Option[];
+  selectedOption: string;
+  onChange: (value: string) => void;
+}
+
+interface LabelProps {
+  isSelected: boolean;
+}
+
+const RadioGroup: React.FC<RadioGroupProps> = ({
+  label,
+  options,
+  selectedOption,
+  onChange,
+}) => {
+  return (
+    <Container>
+      <TitleWrapper>
+        <InputTitle>{label}</InputTitle>
+        <EssentialIcon>*</EssentialIcon>
+      </TitleWrapper>
+      <RadioGroupContainer>
+        {options.map((option) => (
+          <Label
+            key={option.value}
+            isSelected={selectedOption === option.value}
+          >
+            <RadioInput
+              type="radio"
+              name="radioGroup"
+              value={option.value}
+              checked={selectedOption === option.value}
+              onChange={() => onChange(option.value)}
+            />
+            {option.label}
+          </Label>
+        ))}
+      </RadioGroupContainer>
+    </Container>
+  );
+};
+
+export default RadioGroup;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const RadioGroupContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const Label = styled.label<LabelProps>`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: #495057;
+  font-family: Pretendard;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px; /* 100% */
+  letter-spacing: -0.1px;
+  width: 160px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  background: #fff;
+
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      background: #bfd8af;
+      border-color: #868e96;
+      color: #495057;
+      font-weight: 600;
+    `}
+`;
+
+const RadioInput = styled.input`
+  margin-right: 8px;
+  accent-color: #6c757d;
+  cursor: pointer;
+  opacity: 0;
+`;
+
+const TitleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+const InputTitle = styled.label`
+  color: #343a40;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+`;
+
+export const EssentialIcon = styled.span`
+  color: #f5535e;
+
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.1px;
+`;
diff --git a/src/components/common/textarea/Textarea.tsx b/src/components/common/textarea/Textarea.tsx
new file mode 100644
index 0000000..34794e3
--- /dev/null
+++ b/src/components/common/textarea/Textarea.tsx
@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+export default function Textarea() {
+  return (
+    <Container>
+      <Title>개발 언어 / 스택</Title>
+      <TextArea />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const Title = styled.label`
+  color: #343a40;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: -0.1px;
+`;
+
+const TextArea = styled.textarea`
+  width: 340px;
+  height: 120px;
+  border-radius: 8px;
+  border: 1px solid #ced4da;
+  background: #fff;
+  padding: 10px;
+  resize: none;
+  outline: none;
+`;
diff --git a/src/components/personal/ImgInput.tsx b/src/components/personal/ImgInput.tsx
new file mode 100644
index 0000000..5c15ecc
--- /dev/null
+++ b/src/components/personal/ImgInput.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+interface ImgInputProps {
+  initialImgSrc?: string;
+}
+
+const ImgInput: React.FC<ImgInputProps> = ({ initialImgSrc }) => {
+  const [imgSrc, setImgSrc] = useState<string | undefined>(initialImgSrc);
+
+  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const previewUrl = URL.createObjectURL(file);
+      setImgSrc(previewUrl);
+    }
+  };
+
+  return (
+    <ImageBox>
+      <input
+        type="file"
+        accept="image/*"
+        onChange={handleImageChange}
+        style={{ display: "none" }}
+        id="image-upload"
+      />
+      <Label htmlFor="image-upload">
+        {imgSrc ? (
+          <ImgPreview src={imgSrc} alt="Uploaded Image" />
+        ) : (
+          "이미지 업로드"
+        )}
+      </Label>
+    </ImageBox>
+  );
+};
+
+export default ImgInput;
+
+const ImageBox = styled.div`
+  width: 120px;
+  height: 120px;
+  border-radius: 8px;
+  background: #adb5bd;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  &:hover {
+    border-color: #6c757d;
+  }
+`;
+
+const Label = styled.label`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #6c757d;
+  font-size: 14px;
+  text-align: center;
+`;
+
+const ImgPreview = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
diff --git a/src/pages/personal/Personal.tsx b/src/pages/personal/Personal.tsx
new file mode 100644
index 0000000..13e47fc
--- /dev/null
+++ b/src/pages/personal/Personal.tsx
@@ -0,0 +1,121 @@
+// Personal.tsx
+
+import Dropdown from "@components/common/dropdown/Dropdown";
+import HintText from "@components/common/hintText/HintText2";
+import DateInput from "@components/common/input/DateInput";
+import Input from "@components/common/input/Input";
+import RadioGroup from "@components/common/radio/Radio";
+import Textarea from "@components/common/textarea/Textarea";
+import Button from "@components/common/button/Button";
+import ImgInput from "@components/personal/ImgInput";
+import { useState } from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  margin: 40px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+`;
+
+const InputForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+
+const parts = [
+  { value: "1", label: "기획" },
+  { value: "2", label: "디자인" },
+  { value: "3", label: "백엔드" },
+  { value: "4", label: "웹 프론트엔드" },
+  { value: "4", label: "AI" },
+  { value: "4", label: "앱" },
+];
+
+const radio1 = [
+  { value: "window", label: "Window" },
+  { value: "MacOS", label: "MacOS" },
+];
+
+const radio2 = [
+  { value: "light", label: "라이트모드" },
+  { value: "dark", label: "다크모드" },
+];
+
+const radio3 = [
+  { value: "quiet", label: "조용한 열람실" },
+  { value: "noise", label: "시끌시끌한 카페" },
+];
+
+const radio4 = [
+  { value: "offline", label: "오프라인 모각코" },
+  { value: "online", label: "온라인 모각코" },
+];
+
+const Personal: React.FC = () => {
+  const [selectedOption, setSelectedOption] = useState("");
+  const [selectedRadio1, setSelectedRadio1] = useState("");
+  const [selectedRadio2, setSelectedRadio2] = useState("");
+  const [selectedRadio3, setSelectedRadio3] = useState("");
+  const [selectedRadio4, setSelectedRadio4] = useState("");
+  return (
+    <>
+      <Container>
+        <HintText
+          headline="내 정보 등록하기"
+          paragraph="나는 어떤 사람인지 팀원들에게 알려주는 시간!"
+        />
+        <InputForm>
+          <ImgInput />
+          <Input label="이름" essential hint="" />
+          <DateInput />
+          <Input label="연락처" essential hint="" />
+          <Dropdown
+            label="참여 분야"
+            essential={true}
+            options={parts}
+            selectedOption={selectedOption}
+            onChange={setSelectedOption}
+            placeholder="파트를 선택해주세요."
+          />
+          <Input
+            label="사는 곳"
+            essential={false}
+            hint="ex) 신림역, 서울대입구역 등.."
+          />
+          <Input label="소속" essential hint="" />
+          <Input label="MBTI" essential={false} hint="" />
+          <Textarea />
+          <RadioGroup
+            label="선호하는 운영체제는?"
+            options={radio1}
+            selectedOption={selectedRadio1}
+            onChange={setSelectedRadio1}
+          />
+          <RadioGroup
+            label="선호하는 코드 편집기 모드는?"
+            options={radio2}
+            selectedOption={selectedRadio2}
+            onChange={setSelectedRadio2}
+          />
+          <RadioGroup
+            label="선호하는 작업 환경은?"
+            options={radio3}
+            selectedOption={selectedRadio3}
+            onChange={setSelectedRadio3}
+          />
+          <RadioGroup
+            label="선호하는 협업 환경은?"
+            options={radio4}
+            selectedOption={selectedRadio4}
+            onChange={setSelectedRadio4}
+          />
+        </InputForm>
+        <Button link="#" name="팀원들과 동기화하기" />
+      </Container>
+    </>
+  );
+};
+
+export default Personal;

From 0d2841d15b1e2b864fe762218fb18d361452f096 Mon Sep 17 00:00:00 2001
From: gracekim527 <lemonherb0323@naver.com>
Date: Sun, 3 Nov 2024 01:41:39 +0900
Subject: [PATCH 2/2] =?UTF-8?q?:sparkles:=20Feat:=20=EA=B0=9C=EC=9D=B8=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=93=B1=EB=A1=9D=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20(#10)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/input/Input.tsx       |  12 +-
 src/components/common/textarea/Textarea.tsx |  15 +-
 src/pages/personal/Personal.tsx             | 153 ++++++++++++++------
 3 files changed, 130 insertions(+), 50 deletions(-)

diff --git a/src/components/common/input/Input.tsx b/src/components/common/input/Input.tsx
index 3023703..222bcdd 100644
--- a/src/components/common/input/Input.tsx
+++ b/src/components/common/input/Input.tsx
@@ -6,9 +6,17 @@ interface InputProps {
   label: string;
   essential: boolean;
   hint: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const Input: React.FC<InputProps> = ({ label, essential = true, hint }) => {
+const Input: React.FC<InputProps> = ({
+  label,
+  essential = true,
+  hint,
+  value,
+  onChange,
+}) => {
   return (
     <S.InputContainer>
       <S.InputTitleWrapper>
@@ -17,7 +25,7 @@ const Input: React.FC<InputProps> = ({ label, essential = true, hint }) => {
       </S.InputTitleWrapper>
       {hint && <S.InputHint>{hint}</S.InputHint>}
       <S.InputWrap>
-        <S.TextInput type="text" />
+        <S.TextInput type="text" value={value} onChange={onChange} />
       </S.InputWrap>
     </S.InputContainer>
   );
diff --git a/src/components/common/textarea/Textarea.tsx b/src/components/common/textarea/Textarea.tsx
index 5082b73..f9fb703 100644
--- a/src/components/common/textarea/Textarea.tsx
+++ b/src/components/common/textarea/Textarea.tsx
@@ -1,13 +1,22 @@
+// Textarea.tsx
+import React from "react";
 import styled from "styled-components";
 
-export default function Textarea() {
+interface TextareaProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
+
+const Textarea: React.FC<TextareaProps> = ({ value, onChange }) => {
   return (
     <Container>
       <Title>개발 언어 / 스택</Title>
-      <TextArea />
+      <TextArea value={value} onChange={onChange} />
     </Container>
   );
-}
+};
+
+export default Textarea;
 
 const Container = styled.div`
   display: flex;
diff --git a/src/pages/personal/Personal.tsx b/src/pages/personal/Personal.tsx
index 7c8d823..1e4dd04 100644
--- a/src/pages/personal/Personal.tsx
+++ b/src/pages/personal/Personal.tsx
@@ -1,5 +1,7 @@
 // Personal.tsx
 
+import React, { useState } from "react";
+import styled from "styled-components";
 import Dropdown from "@components/common/dropdown/Dropdown";
 import HintText from "@components/common/hintText/HintText2";
 import DateInput from "@components/common/input/DateInput";
@@ -8,8 +10,6 @@ import RadioGroup from "@components/common/radio/Radio";
 import Textarea from "@components/common/textarea/Textarea";
 import Button from "@components/common/button/Button";
 import ImgInput from "@components/personal/ImgInput";
-import { useState } from "react";
-import styled from "styled-components";
 import { Container } from "@components/common/container/style";
 
 const InputForm = styled.form`
@@ -28,32 +28,66 @@ const parts = [
   { value: "6", label: "앱" },
 ];
 
-const radio1 = [
-  { value: "window", label: "Window" },
-  { value: "MacOS", label: "MacOS" },
-];
+const radioOptions = {
+  radio1: [
+    { value: "window", label: "Window" },
+    { value: "MacOS", label: "MacOS" },
+  ],
+  radio2: [
+    { value: "light", label: "라이트모드" },
+    { value: "dark", label: "다크모드" },
+  ],
+  radio3: [
+    { value: "quiet", label: "조용한 열람실" },
+    { value: "noise", label: "시끌시끌한 카페" },
+  ],
+  radio4: [
+    { value: "offline", label: "오프라인 모각코" },
+    { value: "online", label: "온라인 모각코" },
+  ],
+};
 
-const radio2 = [
-  { value: "light", label: "라이트모드" },
-  { value: "dark", label: "다크모드" },
-];
+const Personal: React.FC = () => {
+  // 상태 객체에 모든 폼 데이터 관리
+  const [formData, setFormData] = useState({
+    name: "",
+    dateOfBirth: "",
+    contact: "",
+    location: "",
+    affiliation: "",
+    mbti: "",
+    description: "",
+    selectedOption: "",
+    selectedRadio1: "",
+    selectedRadio2: "",
+    selectedRadio3: "",
+    selectedRadio4: "",
+  });
 
-const radio3 = [
-  { value: "quiet", label: "조용한 열람실" },
-  { value: "noise", label: "시끌시끌한 카페" },
-];
+  const handleChange = (field: string, value: string) => {
+    setFormData((prevData) => ({ ...prevData, [field]: value }));
+  };
 
-const radio4 = [
-  { value: "offline", label: "오프라인 모각코" },
-  { value: "online", label: "온라인 모각코" },
-];
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    try {
+      const response = await fetch("backendURL", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      });
+      if (!response.ok) {
+        throw new Error("데이터 전송 실패");
+      }
+      alert("성공적으로 데이터가 제출되었습니다.");
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
-const Personal: React.FC = () => {
-  const [selectedOption, setSelectedOption] = useState("");
-  const [selectedRadio1, setSelectedRadio1] = useState("");
-  const [selectedRadio2, setSelectedRadio2] = useState("");
-  const [selectedRadio3, setSelectedRadio3] = useState("");
-  const [selectedRadio4, setSelectedRadio4] = useState("");
   return (
     <>
       <Container>
@@ -61,53 +95,82 @@ const Personal: React.FC = () => {
           headline="내 정보 등록하기"
           paragraph="나는 어떤 사람인지 팀원들에게 알려주는 시간!"
         />
-        <InputForm>
+        <InputForm onSubmit={handleSubmit}>
           <ImgInput />
-          <Input label="이름" essential hint="" />
+          <Input
+            label="이름"
+            essential
+            hint=""
+            value={formData.name}
+            onChange={(e) => handleChange("name", e.target.value)}
+          />
           <DateInput />
-          <Input label="연락처" essential hint="" />
+          <Input
+            label="연락처"
+            essential
+            hint=""
+            value={formData.contact}
+            onChange={(e) => handleChange("contact", e.target.value)}
+          />
           <Dropdown
             label="참여 분야"
             essential={true}
             options={parts}
-            selectedOption={selectedOption}
-            onChange={setSelectedOption}
+            selectedOption={formData.selectedOption}
+            onChange={(value) => handleChange("selectedOption", value)}
             placeholder="파트를 선택해주세요."
           />
           <Input
             label="사는 곳"
             essential={false}
             hint="ex) 신림역, 서울대입구역 등.."
+            value={formData.location}
+            onChange={(e) => handleChange("location", e.target.value)}
+          />
+          <Input
+            label="소속"
+            essential
+            hint=""
+            value={formData.affiliation}
+            onChange={(e) => handleChange("affiliation", e.target.value)}
+          />
+          <Input
+            label="MBTI"
+            essential={false}
+            hint=""
+            value={formData.mbti}
+            onChange={(e) => handleChange("mbti", e.target.value)}
+          />
+          <Textarea
+            value={formData.description}
+            onChange={(e) => handleChange("description", e.target.value)}
           />
-          <Input label="소속" essential hint="" />
-          <Input label="MBTI" essential={false} hint="" />
-          <Textarea />
           <RadioGroup
             label="선호하는 운영체제는?"
-            options={radio1}
-            selectedOption={selectedRadio1}
-            onChange={setSelectedRadio1}
+            options={radioOptions.radio1}
+            selectedOption={formData.selectedRadio1}
+            onChange={(value) => handleChange("selectedRadio1", value)}
           />
           <RadioGroup
             label="선호하는 코드 편집기 모드는?"
-            options={radio2}
-            selectedOption={selectedRadio2}
-            onChange={setSelectedRadio2}
+            options={radioOptions.radio2}
+            selectedOption={formData.selectedRadio2}
+            onChange={(value) => handleChange("selectedRadio2", value)}
           />
           <RadioGroup
             label="선호하는 작업 환경은?"
-            options={radio3}
-            selectedOption={selectedRadio3}
-            onChange={setSelectedRadio3}
+            options={radioOptions.radio3}
+            selectedOption={formData.selectedRadio3}
+            onChange={(value) => handleChange("selectedRadio3", value)}
           />
           <RadioGroup
             label="선호하는 협업 환경은?"
-            options={radio4}
-            selectedOption={selectedRadio4}
-            onChange={setSelectedRadio4}
+            options={radioOptions.radio4}
+            selectedOption={formData.selectedRadio4}
+            onChange={(value) => handleChange("selectedRadio4", value)}
           />
+          <Button type="submit" name="팀원들과 동기화하기" />
         </InputForm>
-        <Button link="#" name="팀원들과 동기화하기" />
       </Container>
     </>
   );