Merge pull request #15 from Kakaotech-10/feature/Signup

✨ 카카오 회원가입시 추가 입력 구현

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;

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

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="회원가입" />

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,11 +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="이름(한글)" />
+          <Input type="text" placeholder="이름(영문)" />
+          <Select
+            options={["풀스택", "클라우드", "인공지능"]}
+            onChange={handleFieldChange}
+            placeholder="분야 선택"
+          />
           <Button text="회원가입" />
+          <p className="re-login" onClick={handleLogin}>
+            아이디로 로그인
+          </p>
         </div>
       </div>
     </div>