wecode-bootcamp-korea · Hsoohyeon · Oct 16, 2023 · Oct 16, 2023 · Oct 18, 2023 · Oct 18, 2023
diff --git a/README.md b/README.md
@@ -4,4 +4,5 @@
 
 ---
 
-Front : 김개발, 코드킴
+Front : 최민지 황수현
+Back : 유진서, 김문영, 노범석
diff --git a/public/images/Back_arrow.png b/public/images/Back_arrow.png
diff --git a/public/images/Logo.png b/public/images/Logo.png
diff --git a/public/images/Select_arrow.png b/public/images/Select_arrow.png
diff --git a/public/images/banner-square.png b/public/images/banner-square.png
diff --git a/public/images/logo_wecode.png b/public/images/logo_wecode.png
diff --git a/public/images/pic.png b/public/images/pic.png
diff --git a/public/index.html b/public/index.html
@@ -3,10 +3,14 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Weread</title>
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>React App</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/Router.js b/src/Router.js
@@ -1,14 +1,25 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import KimCodeLogin from './pages/KimCode/Login/Login';
-import KimCodeMain from './pages/KimCode/Main/Main';
+import Login from './pages/Hwangsoohyeon/Login/Login';
+import Join from './pages/Hwangsoohyeon/Join/Join';
+import JoinOk from './pages/Hwangsoohyeon/JoinOk/JoinOk';
+import Main from './pages/Hwangsoohyeon/Main/Main';
+import PostDetail from './pages/Hwangsoohyeon/PostDetail/PostDetail';
+import PostAdd from './pages/Hwangsoohyeon/PostAdd/PostAdd';
+import PostEdit from './pages/Hwangsoohyeon/PostEdit/PostEdit';
 
 const Router = () => {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/kimcode-login" element={<KimCodeLogin />} />
-        <Route path="/kimcode-main" element={<KimCodeMain />} />
+        <Route path="/" element={<Login />} />
+        <Route path="/Hwangsoohyeon.Login" element={<Login />} />
+        <Route path="/Hwangsoohyeon.join" element={<Join />} />
+        <Route path="/Hwangsoohyeon.joinOk" element={<JoinOk />} />
+        <Route path="/Hwangsoohyeon.Main" element={<Main />} />
+        <Route path="/Hwangsoohyeon.PostDetail" element={<PostDetail />} />
+        <Route path="/Hwangsoohyeon.PostADD" element={<PostAdd />} />
+        <Route path="/Hwangsoohyeon.PostEdit" element={<PostEdit />} />
       </Routes>
     </BrowserRouter>
   );

diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import Router from './Router';
 import './styles/reset.scss';
 import './styles/common.scss';
-import Router from './Router';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(<Router />);
diff --git a/src/pages/Hwangsoohyeon/Join/Join.js b/src/pages/Hwangsoohyeon/Join/Join.js
@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import './Join.scss';
+
+const Join = () => {
+  const navigate = useNavigate();
+  const [inputId, setInputId] = useState('');
+  const [inputPw, setInputPw] = useState('');
+  const [reInputPw, setReInputPW] = useState('');
+  const [inputNickName, setInputNickName] = useState('');
+
+  const goToLogin = () => {
+    navigate('/Hwangsoohyeon.Login');
+  };
+
+  const goToJoinOk = () => {
+    // navigate('/Login');
+    fetch('http://10.58.52.70:8000/users/signup', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json;charset=utf-8',
+      },
+      body: JSON.stringify({
+        email: inputId,
+        password: inputPw,
+        nickname: inputNickName,
+      }),
+    })
+      .then((res) => res.json())
+      .then((data) => navigate('/Hwangsoohyeon.JoinOk'));
+  };
+
+  const able = inputId.indexOf('@' && '.') !== -1 && inputPw.length >= 10;
+
+  return (
+    <div>
+      <div className="Back">
+        <div className="Backicon">
+          <img
+            className="BackArrow"
+            src="./images/Back_arrow.png"
+            alt="Back_arrow"
+            onClick={goToLogin}
+          />
+        </div>
+        <header>뒤로</header>
+      </div>
+      <div className="Join1">
+        <div className="info">
+          <h1>회원가입</h1>
+
+          <div className="info1">
+            <div className="info_label">
+              <h2>기본정보</h2>
+              <label>필수사항</label>
+            </div>
+            <input
+              type="text"
+              placeholder="이메일"
+              onChange={(e) => setInputId(e.target.value)}
+              value={inputId}
+            />
+            <input
+              type="password"
+              placeholder="비밀번호"
+              onChange={(e) => setInputPw(e.target.value)}
+              value={inputPw}
+            />
+            <input
+              type="password"
+              placeholder="비밀번호 확인"
+              onChange={(e) => setReInputPW(e.target.value)}
+              value={reInputPw}
+            />
+          </div>
+
+          <div className="info2">
+            <div className="info_label">
+              <h2>닉네임과 프로필이미지</h2>
+              <label>선택 사항</label>
+            </div>
+            <input
+              type="text"
+              placeholder="닉네임"
+              onChange={(e) => setInputNickName(e.target.value)}
+              value={inputNickName}
+            />
+            <input type="file" />
+          </div>
+
+          <div className="info3">
+            <div className="info_label">
+              <h2>전화번호</h2>
+              <label>선택 사항</label>
+            </div>
+            <div className="phone">
+              <select name="phone_number" className="phoneNumber">
+                <option value="010" selected="selected">
+                  010
+                </option>
+                <option value="011">011</option>
+                <option value="070">070</option>
+              </select>
+              <input type="tel" placeholder="휴대폰번호를 입력해주세요." />
+            </div>
+          </div>
+
+          <div className="info4">
+            <div className="info_label">
+              <h2>생일</h2>
+              <label>선택 사항</label>
+            </div>
+            <div className="birth">
+              <select name="birth_year" className="birthYear">
+                <option value="">년도</option>
+                <option value="1988년" selected="selected">
+                  1988년
+                </option>
+                <option value="1989년">1989년</option>
+                <option value="1990년">1990년</option>
+              </select>
+              <select name="birth_month" className="birthMonth">
+                <option value="">월</option>
+                <option value="1월" selected="selected">
+                  1월
+                </option>
+                <option value="2월">2월</option>
+                <option value="3월">3월</option>
+              </select>
+              <select name="birth_day" className="birthDay">
+                <option value="">일</option>
+                <option value="1일" selected="selected">
+                  1일
+                </option>
+                <option value="2일">2일</option>
+                <option value="3일">3일</option>
+              </select>
+            </div>
+          </div>
+
+          <button disabled={!able} className="JoinBtn" onClick={goToJoinOk}>
+            회원가입
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Join;
diff --git a/src/pages/Hwangsoohyeon/Join/Join.scss b/src/pages/Hwangsoohyeon/Join/Join.scss
@@ -0,0 +1,182 @@
+.Back {
+  display: flex;
+  width: 100%;
+  height: 56px;
+  // padding: 8px 497px 8px 0px;
+  align-items: center;
+  margin: 24px 0px 0px;
+
+  .BackArrow {
+    width: 40px;
+    height: 40px;
+  }
+  header {
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    width: 35px;
+    height: 28px;
+  }
+}
+
+.Join1 {
+  width: 100%;
+  height: calc(100vh - 74px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  select {
+    color: #999;
+    font-size: 16px;
+    font-weight: 400;
+    border-radius: 6px;
+    border: 1px solid #e0e0e0;
+    background-color: #fff;
+  }
+
+  h2 {
+    font-size: 16px;
+    font-weight: 400;
+    color: black;
+    width: 147px;
+    height: 22px;
+    padding-bottom: 0%;
+  }
+
+  input {
+    display: flex;
+    padding: 19px 0px 15px 16px;
+    align-items: center;
+    width: 100%;
+    border-radius: 6px;
+    border: 1px solid #e0e0e0;
+    margin-top: 8px;
+    &::placeholder {
+      font-size: 16px;
+      font-weight: 400;
+    }
+  }
+
+  .info {
+    width: 100%;
+    padding: 0px 24px 0px 24px;
+
+    h1 {
+      font-size: 24px;
+      font-weight: 800;
+      width: 84px;
+      height: 17px;
+    }
+
+    .info1 {
+      margin-top: 24px;
+      .info_label {
+        color: red;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+    .info2 {
+      margin-top: 24px;
+      input {
+        display: flex;
+        padding: 19px 0px 15px 16px;
+        align-items: center;
+        width: 100%;
+      }
+      .info_label {
+        color: #999;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+    .info3 {
+      margin-top: 24px;
+      .phone {
+        display: flex;
+        justify-content: space-between;
+        input {
+          width: 100%;
+          display: flex;
+          padding: 19px 0px 15px 16px;
+          align-items: center;
+          margin-left: 8px;
+        }
+      }
+      .phoneNumber {
+        display: flex;
+        width: 136px;
+        padding: 16px 14px 15px 16px;
+        margin-top: 8px;
+        justify-content: center;
+        align-items: flex-end;
+      }
+      .info_label {
+        color: #999;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+    .info4 {
+      margin-top: 24px;
+      .birth {
+        width: 100%;
+        height: 56px;
+        display: flex;
+        align-items: flex-start;
+
+        .birthYear {
+          display: flex;
+          width: 136px;
+          padding: 16px 14px 15px 16px;
+          justify-content: center;
+          align-items: flex-end;
+        }
+
+        .birthMonth {
+          width: 100%;
+          display: flex;
+          padding: 16px 14px 15px 16px;
+          justify-content: center;
+          align-items: flex-end;
+          margin-left: 8px;
+          margin-right: 8px;
+        }
+
+        .birthDay {
+          width: 100%;
+          display: flex;
+          padding: 16px 14px 15px 16px;
+          justify-content: center;
+          align-items: flex-end;
+          margin-right: 8px;
+        }
+      }
+      .info_label {
+        color: #999;
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        font-weight: 400;
+      }
+    }
+  }
+  .JoinBtn {
+    font-size: 18px;
+    color: white;
+    width: 100%;
+    height: 56px;
+    background-color: #2d71f7;
+    border-radius: 6px;
+    margin-top: 24px;
+    margin-bottom: 40px;
+    &:hover {
+      background-color: #083e7f;
+    }
+    &:disabled {
+      background-color: #ccc;
+    }
+  }
+}