크래프톤 정글 week12, day92 - 잔디 심기, 로그인 회원가입 화면

백준

2231

파이썬

브론즈2

분해합

import sys
input = sys.stdin.readline

n = int(input())
i = 1
sum = 0
    
while True:
    a = i
    sum = i
    while a > 0:
        sum = sum + (a % 10)
        a = a // 10
    if sum == n:
        print(i)
        break
    if i == n:
        print("0")
        break
    i += 1

---

오늘 기획한 디자인대로 로그인 페이지와 회원가입 페이지 퍼블리싱을 어느정도 구현했다.

로그인과 회원가입 페이지는 input이나 버튼 등 공통적으로 쓸 부분이 많아서 components 폴더에 common 폴더를 하나 만들어 그곳에서 작성했다.

common 폴더

각 부분별로 컴포넌트를 나눠 만들고 로그인 페이지와 회원가입 페이지에 import로 끌어다 사용했다.

그리고 현재 두 페이지를 만들고 있어 app.tsx에 route로 묶어 각 주소별로 나뉘게 작성했다.

import Login from './page/login';
import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Signup from './page/signup';

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path='/login' element={<Login />}></Route>
          <Route path='/signup' element={<Signup />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

 

로그인페이지는 useState를 사용해 이메일과 비밀번호 상태관리를 하고 input에 onChange를 사용해 입력값 변경 시 실시간으로 담기게 작성해놨다. 아직 세진이가 데이터베이스를 연동하지 못했지만 미리 요청 보낼 준비를 하기 위해 axios를 사용해 코드 작성만 해놨다. mysql과 express가 연동되면 백엔드와 통신할 계획이다.

import Btn from "../components/common/btn"
import Input from "../components/common/input"
import LogoImg from "../components/common/logoImg"
import Title from "../components/common/title"
import React, {useState, useEffect} from "react";
import axios from "axios";


const Login = () => {
    const [email, setEmail] = useState('');
    const [pw, setPw] = useState('');

    const handleSubmit = (e:any) => {
        e.preventDefault();

        const formData = {
            email,
            pw
        };

        axios.post('localhost:5000/login', formData)
            .then(response => {
                alert('로그인 성공!');
                console.log(response.data);
            })
            .catch(error => {
                console.error('로그인 에러:', error);
            });
    };

    return (
        <>
            <form onSubmit={handleSubmit}>
                <LogoImg />
                <Title mainText="L O G I N" subText="로그인" />
                <Input type="text" placeholder="이메일 아이디" onChange={(e) => {
                        setEmail(e.target.value)
                    }} />
                <Input type="password" placeholder="비밀번호" onChange={(e) => {
                        setPw(e.target.value)
                    }} />
                <Btn type="submit" color="black" fontColor="white" btnText="LOGIN"/>
            </form>
            <a href="/signup">
                <Btn type="button" color="white" fontColor="black" btnText="SIGNUP" />
            </a>
        </>
    )
}
export default Login

 

이미 있는 아이디 인지 잘못된 계정인지는 연동이 성공하고 나서 추가할 예정

 

회원 가입 페이지는 이메일, 이름, 닉네임, 비밀번호, 비밀번호 확인으로 구성되어 있고 백엔드로 보낼 데이터는 비밀번호 확인을 제외한 4개이다. 처음부터 redux toolkit을 사용해서 회원가입 데이터나 게시판 등 여러 데이터를 상태관리 해보려다가 이번 프로젝트의 주 목적은 게시판의 CRUD이기 때문에 이번에는 사용하지 않을 것 같다.

로그인과 같이 useState를 이용해 현재 input의 값을 관리해주고 onChange를 사용해 실시간으로 값이 변경되게 작성했다.

그리고 기본적인 유효성 검사를 집어넣어서 올바르게 입력하지 않으면 🔴을 올바르게 입력했으면 🟢을 띄워주게 했다.

유효성 검사는 테스트 되는지 확인했으니 이 후에 입맛에 맞게 바꿀 예정이다.

회원가입도 로그인과 마찬가지로 axios를 이용해  요청코드를 미리 작성해놨지만 백엔드에서 어떻게 통신할지 확인해야 해서 이후에 수정할 예정이다.

 

< 로그인 화면 >

로그인 화면

 

< 회원가입 화면 >

회원가입 화면

이런 식으로 올바르지 않은 형식으로 입력했거나 처음 상태는 🔴이 되어있다.

올바르게 입력한 이메일 형식

올바르게 입력했을 땐 🟢이 된다.

일단 로그인과 회원가입은 이렇게 작성해놨고 이후 세진이가 백엔드 연동 완료하면 그 떄 더 수정할 계획이다.

내일은 메인페이지인 게시판 페이지 작성하려고 한다.

 

학습 시간 : 10 ~ 24시