From fa2f959206e1c58253758af4d33e013e54ff9f87 Mon Sep 17 00:00:00 2001
From: parkseyoung <hellosy76@naver.com>
Date: Mon, 14 Oct 2024 12:56:41 +0900
Subject: [PATCH 1/2] =?UTF-8?q?test:=20pr=20=ED=85=8C=EC=8A=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Select.jsx            | 27 +++++++++++++++++++++++++++
 src/component/styles/Select.scss    | 16 ++++++++++++++++
 src/containers/SignupForm.jsx       | 17 +++++++++++++----
 src/containers/SignupForm_kakao.jsx |  1 -
 4 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 src/component/Select.jsx
 create mode 100644 src/component/styles/Select.scss

diff --git a/src/component/Select.jsx b/src/component/Select.jsx
new file mode 100644
index 0000000..19291e3
--- /dev/null
+++ b/src/component/Select.jsx
@@ -0,0 +1,27 @@
+//Select.jsx
+
+import PropTypes from "prop-types";
+import "./styles/Select.scss";
+
+const Select = ({ options, onChange, placeholder }) => {
+  return (
+    <select className="custom-select" onChange={onChange} defaultValue="">
+      <option value="" disabled hidden>
+        {placeholder}
+      </option>
+      {options.map((option, index) => (
+        <option key={index} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+Select.propTypes = {
+  options: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string.isRequired,
+};
+
+export default Select;
diff --git a/src/component/styles/Select.scss b/src/component/styles/Select.scss
new file mode 100644
index 0000000..8c7e632
--- /dev/null
+++ b/src/component/styles/Select.scss
@@ -0,0 +1,16 @@
+.custom-select {
+  width: 430px;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: white;
+  font-size: 16px;
+  color: #3d3d3d;
+  font-family: "Goorm Sans", sans-serif;
+
+  @media (max-width: 767px) {
+    width: 200px;
+    font-size: 10px;
+  }
+}
diff --git a/src/containers/SignupForm.jsx b/src/containers/SignupForm.jsx
index f72893b..18c5eae 100644
--- a/src/containers/SignupForm.jsx
+++ b/src/containers/SignupForm.jsx
@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import Sidebar from "./SideForm";
 import Button from "../component/Button";
 import Input from "../component/Input";
-import MemberCard from "../component/MemberCard";
+import Select from "../component/Select";
 import ProfileUpload from "../component/ProfileUpload";
 import "./styles/SignupForm.scss";
 
@@ -17,6 +17,11 @@ const SignupForm = () => {
     navigate("/kakaosignup");
   };
 
+  const handleFieldChange = (e) => {
+    console.log("Selected field:", e.target.value);
+    // 여기에 선택된 필드를 처리하는 로직을 추가할 수 있습니다.
+  };
+
   return (
     <div className="start-container">
       <div className="sidebar-area">
@@ -25,10 +30,14 @@ const SignupForm = () => {
       <div className="content-wrapper">
         <div className="signup-area">
           <ProfileUpload />
-          <MemberCard />
-          <Input type="text" placeholder="회원번호" />
           <Input type="text" placeholder="아이디" />
-          <Input type="text" placeholder="이름" />
+          <Input type="text" placeholder="이름(한글)" />
+          <Input type="text" placeholder="이름(영문)" />
+          <Select
+            options={["풀스택", "클라우드", "인공지능"]}
+            onChange={handleFieldChange}
+            placeholder="분야 선택"
+          />
           <Input type="password" placeholder="비밀번호" />
           <Input type="password" placeholder="비밀번호 확인" />
           <Button text="회원가입" />
diff --git a/src/containers/SignupForm_kakao.jsx b/src/containers/SignupForm_kakao.jsx
index 1b90442..027ced2 100644
--- a/src/containers/SignupForm_kakao.jsx
+++ b/src/containers/SignupForm_kakao.jsx
@@ -15,7 +15,6 @@ const SignupForm_kakao = () => {
         <div className="signup-area">
           <ProfileUpload />
           <MemberCard />
-          <Input type="text" placeholder="회원번호" />
           <Input type="text" placeholder="이름" />
 
           <Button text="회원가입" />

From f67766447914941307bc2b9a774e9cce1eb10cbb Mon Sep 17 00:00:00 2001
From: parkseyoung <hellosy76@naver.com>
Date: Mon, 14 Oct 2024 13:04:42 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20kakao=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=B6=94=EA=B0=80=20=EC=9E=85=EB=A0=A5=EC=9A=94?=
 =?UTF-8?q?=EC=86=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/SignupForm_kakao.jsx | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/containers/SignupForm_kakao.jsx b/src/containers/SignupForm_kakao.jsx
index 027ced2..0f943d2 100644
--- a/src/containers/SignupForm_kakao.jsx
+++ b/src/containers/SignupForm_kakao.jsx
@@ -1,11 +1,23 @@
+import { useNavigate } from "react-router-dom";
 import Sidebar from "./SideForm";
 import Button from "../component/Button";
 import Input from "../component/Input";
-import MemberCard from "../component/MemberCard";
+import Select from "../component/Select";
 import ProfileUpload from "../component/ProfileUpload";
 import "./styles/SignupForm.scss";
 
 const SignupForm_kakao = () => {
+  const navigate = useNavigate();
+
+  const handleLogin = () => {
+    navigate("/login");
+  };
+
+  const handleFieldChange = (e) => {
+    console.log("Selected field:", e.target.value);
+    // 여기에 선택된 필드를 처리하는 로직을 추가할 수 있습니다.
+  };
+
   return (
     <div className="start-container">
       <div className="sidebar-area">
@@ -14,10 +26,17 @@ const SignupForm_kakao = () => {
       <div className="content-wrapper">
         <div className="signup-area">
           <ProfileUpload />
-          <MemberCard />
-          <Input type="text" placeholder="이름" />
-
+          <Input type="text" placeholder="이름(한글)" />
+          <Input type="text" placeholder="이름(영문)" />
+          <Select
+            options={["풀스택", "클라우드", "인공지능"]}
+            onChange={handleFieldChange}
+            placeholder="분야 선택"
+          />
           <Button text="회원가입" />
+          <p className="re-login" onClick={handleLogin}>
+            아이디로 로그인
+          </p>
         </div>
       </div>
     </div>