From ebd1bffe61087c110e1d5b81bf92f04f370ed9e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9C=A4=EC=84=9C=ED=9D=AC?= <appleid21@sookmyung.ac.kr>
Date: Thu, 15 Feb 2024 16:33:27 +0900
Subject: [PATCH] =?UTF-8?q?Style:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button.jsx |   2 +-
 src/pages/Chat.js         |   5 ++
 src/pages/OnBoarding.js   |  21 ++++--
 src/pages/Register.js     | 132 +++++++++++++++++++++++++++-----------
 4 files changed, 116 insertions(+), 44 deletions(-)
 create mode 100644 src/pages/Chat.js

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 2e249bf..c9798f8 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -22,4 +22,4 @@ const Button = (props) => {
   return <StyledButton onClick={onClick}>{title}</StyledButton>;
 };
 
-export default Button;
+export default Button;
\ No newline at end of file
diff --git a/src/pages/Chat.js b/src/pages/Chat.js
new file mode 100644
index 0000000..c485b05
--- /dev/null
+++ b/src/pages/Chat.js
@@ -0,0 +1,5 @@
+const Chat = () => {
+
+}
+
+export default Chat;
\ No newline at end of file
diff --git a/src/pages/OnBoarding.js b/src/pages/OnBoarding.js
index 05b1a88..47d6ede 100644
--- a/src/pages/OnBoarding.js
+++ b/src/pages/OnBoarding.js
@@ -1,6 +1,19 @@
-import React ,{useState} from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import Button from '../components/Button';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  padding-bottom: 20px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 100vh;
+`;
+
 
 const OnBoarding = () => {
   const navigator=useNavigate();
@@ -9,9 +22,9 @@ const OnBoarding = () => {
   }
 
   return (
-    <div>
+    <Container>
       <Button onClick={goSignUp} title="살아봐유 시작하기" />
-    </div>
+    </Container>
   )
 };
 
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 53dfa78..816722d 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -1,7 +1,72 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import Pretendard from '../fonts/fonts.css';
 
-import Button from '../components/Button';
+const Container = styled.div`
+  width: 100%;
+  margin-top: 102px;
+  box-sizing: border-box;
+`;
+
+const Label = styled.label`
+  display: block;
+  margin-bottom: 10px;
+  font-family: 'Pretendard', sans-serif;
+  white-space: pre-wrap;
+  word-break: break-word;
+  text-align: left;
+`;
+
+const InputContainer = styled.div`
+  margin: 16px;
+`;
+
+const Input = styled.input`
+  width: 100%;
+  padding: 10px 0;
+  margin-bottom: 10px;
+  border: none;
+  border-bottom: 1px solid #000;
+  font-family: 'Pretendard', sans-serif;
+  font-weight: 200;
+  transition: border-color 0.3s;
+  display: block;
+
+  &:focus {
+    outline: none;
+    border-color: #864AE1;
+  }
+`;
+
+const Message = styled.p`
+  margin-top: 10px;
+  font-family: 'Pretendard', sans-serif;
+  font-weight: 100;
+  font-size: 14px;
+  display: block;
+  text-align: left;
+  margin-top: 16px;
+`;
+
+const Button = styled.button`
+  width: 100%;
+  height: 44px;
+  padding: 12px;
+  background-color: #864AE1;
+  color: #fff;
+  font-family: 'Pretendard', sans-serif;
+  font-weight: 600;
+  border: none;
+  border-radius: 16px;
+  cursor: pointer;
+  margin: 16px;
+
+  &:disabled {
+    background-color: #ccc;
+    cursor: default;
+  }
+`;
 
 const Register = () => {
   const navigator = useNavigate();
@@ -18,53 +83,42 @@ const Register = () => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    // 로그인처리
     goChat();
-
-    try {
-      const response = await fetch('http://sarabwayu.com/api', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ nickname, password }),
-      });
-
-      if (response.ok) {
-        goChat();
-      } else {
-        console.error('회원가입 실패:', response.statusText);
-      }
-    } catch (error) {
-      console.error('네트워크 오류:', error);
-    }
   };
 
   const goChat = () => {
     navigator('/chat');
   };
+  const isFormValid = nickname && password;
 
   return (
-    <div>
-      <label htmlFor="nickname">회원이신가요? 닉네임과 비밀번호를 입력해주세요</label>
-      <input
-        id="nickname"
-        type="text"
-        placeholder="닉네임을 입력해주세요"
-        value={nickname}
-        onChange={handleNicknameChange}
-        style={{ width: '100%' }}
-      />
-      <input
-        type="password"
-        placeholder="비밀번호를 입력해주세요"
-        value={password}
-        onChange={handlePasswordChange}
-        style={{ width: '100%' }}
-      />
-      <Button type="submit" title="로그인하기" onClick={handleSubmit} />
-    </div>
+    <Container>
+      <form onSubmit={handleSubmit}>
+        <InputContainer>
+          <Label>회원이신가요?{'\n'}닉네임과 비밀번호를 입력해주세요</Label>
+          <Input
+            id="nickname"
+            type="text"
+            placeholder="닉네임을 입력해주세요"
+            value={nickname}
+            onChange={handleNicknameChange}
+            required
+          />
+          <Input
+            id="password"
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+            value={password}
+            onChange={handlePasswordChange}
+            required
+          />
+          <Message>회원이 아니시라면 자동으로 회원가입을 진행합니다</Message>
+        </InputContainer>
+        <Button type="submit" disabled={!isFormValid}>로그인하기</Button>
+      </form>
+    </Container>
   );
-  
 };
 
 export default Register;