[48기 박동철] 로그인, 회원가입 기능 구현 (백엔드 API서버와 통신 및 DB 저장 확인.)

public/data/userData.json

@@ -0,0 +1,16 @@
+[
+  {
+    "email": "[email protected]",
+    "password": "12345678",
+    "phoneNumber": "010-4023-6890",
+    "nickname": "박동철",
+    "birthday": "1998-01-04"
+  },
+  {
+    "email": "[email protected]",
+    "password": "12345678",
+    "phoneNumber": "010-1234-5678",
+    "nickname": "김유저",
+    "birthday": "2003-08-13"
+  }
+]

src/Router.js

@@ -1,11 +1,18 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import PostList from './pages/PostList/PostList';
+import Login from './pages/Login/Login';
+import JoinInfo from './pages/Join/JoinInfo';
+import JoinDone from './pages/Join/JoinDone';
 
 const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/" element={<Login />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/join-info" element={<JoinInfo />} />
+        <Route path="/join-done" element={<JoinDone />} />
         <Route path="/post-list" element={<PostList />} />
       </Routes>
     </BrowserRouter>

src/components/Button.jsx

@@ -1,7 +1,11 @@
 import React from 'react';
 
-const Button = () => {
-  return <div>Button</div>;
+const Button = ({ text, onClick, className, disabled }) => {
+  return (
+    <button onClick={onClick} disabled={disabled} className={className}>
+      {text}
+    </button>
+  );
 };
 
 export default Button;

src/components/Input.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Input = ({ placeholder, name, value, onChange, type, className }) => {
+  return (
+    <input
+      className={className}
+      type={type}
+      placeholder={placeholder}
+      name={name}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};
+
+export default Input;

src/pages/Join/BackButtonContainer.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function BackButtonContainer() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="backButtonContainer">
+      <button
+        onClick={() => {
+          navigate(-1);
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="40"
+          height="40"
+          viewBox="0 0 40 40"
+          fill="none"
+        >
+          <path
+            d="M22.5 10L12.5 20L22.5 30"
+            stroke="black"
+            strokeWidth="2"
+            strokeMiterlimit="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        뒤로
+      </button>
+    </div>
+  );
+}

src/pages/Join/Birthday.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+
+export default function Birthday({ onBirthdayChange }) {
+  const years = Array.from({ length: 120 }, (_, i) => (2023 - i).toString());
+  const months = Array.from({ length: 12 }, (_, i) =>
+    (i + 1).toString().padStart(2, '0'),
+  );
+  const days = Array.from({ length: 31 }, (_, i) =>
+    (i + 1).toString().padStart(2, '0'),
+  );
+
+  const [selectedYear, setSelectedYear] = useState('');
+  const [selectedMonth, setSelectedMonth] = useState('');
+  const [selectedDay, setSelectedDay] = useState('');
+
+  useEffect(() => {
+    if (selectedYear && selectedMonth && selectedDay) {
+      const formattedBirthday = `${selectedYear}-${selectedMonth}-${selectedDay}`;
+      onBirthdayChange(formattedBirthday);
+    }
+  }, [selectedYear, selectedMonth, selectedDay]);
+
+  return (
+    <>
+      <select
+        className="birthdaySelect"
+        value={selectedYear}
+        onChange={e => setSelectedYear(e.target.value)}
+      >
+        {years.map(year => (
+          <option key={year} value={year}>
+            {year}년
+          </option>
+        ))}
+      </select>
+      <select
+        className="birthdaySelect"
+        value={selectedMonth}
+        onChange={e => setSelectedMonth(e.target.value)}
+      >
+        {months.map(month => (
+          <option key={month} value={month}>
+            {month}월
+          </option>
+        ))}
+      </select>
+      <select
+        className="birthdaySelect"
+        value={selectedDay}
+        onChange={e => setSelectedDay(e.target.value)}
+      >
+        {days.map(day => (
+          <option key={day} value={day}>
+            {day}일
+          </option>
+        ))}
+      </select>
+    </>
+  );
+}

src/pages/Join/JoinDone.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import BackButtonContainer from './BackButtonContainer';
+import Button from '../../components/Button';
+import './JoinInfo.scss';
+import './JoinDone.scss';
+
+export default function JoinDone() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="joinDone">
+      <BackButtonContainer />
+      <div className="joinSuccessContainer">
+        <svg
+          className="checkMarkSvg"
+          xmlns="http://www.w3.org/2000/svg"
+          width="120"
+          height="120"
+          viewBox="0 0 120 120"
+          fill="none"
+        >
+          <path
+            d="M46.3636 58.0165L58.2645 69.9173L79.0909 49.0909"
+            stroke="black"
+            strokeWidth="2"
+            strokeMiterlimit="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <circle cx="60" cy="60" r="53.5455" stroke="black" strokeWidth="2" />
+        </svg>
+        <div className="joinSuccessMessage">
+          <h1>회원 가입되었습니다!</h1>
+          <p>이제 로그인해주세요.</p>
+        </div>
+      </div>
+      <Button
+        text="확인"
+        onClick={() => navigate('/login')}
+        className="loginButton"
+      />
+    </div>
+  );
+}

src/pages/Join/JoinDone.scss

@@ -0,0 +1,76 @@
+@import '../../style/variables.scss';
+
+.joinDone {
+  display: flex;
+  width: 100%;
+  height: 80vh;
+  padding: 0px 0px 40px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  .backButtonContainer {
+    width: 100%;
+    display: flex;
+    button {
+      display: flex;
+      height: 56px;
+      padding: 8px 497px 8px 0px;
+      align-items: center;
+      flex-shrink: 0;
+      align-self: stretch;
+      border: none;
+      background-color: white;
+      font-size: 20px;
+      line-height: 28px;
+      cursor: pointer;
+    }
+  }
+  .joinSuccessContainer {
+    display: flex;
+    padding-bottom: 0px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+    flex: 1 0 0;
+    align-self: stretch;
+    margin: auto 0;
+    .joinSuccessMessage {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      h1 {
+        font-family: Apple SD Gothic Neo;
+        font-size: 24px;
+        font-weight: 800;
+      }
+      p {
+        font-family: Apple SD Gothic Neo;
+        font-size: 20px;
+      }
+    }
+  }
+  .checkMarkSvg {
+    width: 136px;
+    height: 136px;
+  }
+
+  .loginButton {
+    width: 528px;
+    margin: 0 auto;
+    display: flex;
+    height: 56px;
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 6px;
+    background: $blue;
+    border: 1px solid $blue;
+    cursor: pointer;
+    font-family: Apple SD Gothic Neo;
+    font-size: 18px;
+    font-weight: 800;
+    color: white;
+  }
+}