Style: 스타일 수정

src/components/Button.jsx

@@ -22,4 +22,4 @@ const Button = (props) => {
   return <StyledButton onClick={onClick}>{title}</StyledButton>;
 };
 
-export default Button;
+export default Button;

src/pages/Chat.js

@@ -0,0 +1,5 @@
+const Chat = () => {
+
+}
+
+export default Chat;

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

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;