myCalendar 개발일지

myCalendar 프로젝트

회원가입 페이지 개발 및 공동 컴포넌트 활용

오늘은 myCalendar 프로젝트에 React를 통해 회원가입 페이지를 구현하였습니다. 회원가입 기능을 만들어둠으로써 로그인 기능을 구현할 때에도 더욱 편리하게 진행할 수 있습니다.

회원가입 페이지 구조

회원가입 페이지의 구조는 로그인 페이지와 비슷하게 구성되었습니다. 아래는 회원가입 페이지의 주요 컴포넌트입니다.

SignupPage 컴포넌트

import {SetStateAction, useState} from "react";
import {Link} from "react-router-dom";

import InputTag from "../Public/Desktop/Input/InputTag";
import SubmitBtn from "../Public/Desktop/Button/SubmitBtn";
import SocialGroup from "../Public/SocialGroup/SocialGroup";
import LoginHeader from "../Public/Header/LoginHeader";

import classes from "./SignUp.module.css";

function SignUp() {
    const [password, setPassword] = useState('')
    const [passwordCheck, setPasswordCheck] = useState("")
    const [nickName, setNickName] = useState("")

    function checkSignUp() {
        if (password.length === 0 || passwordCheck.length === 0 || nickName.length === 0) return

        console.log(password)
        console.log(passwordCheck)
        console.log(nickName)
    }

    function savePassword(event: { target: { value: SetStateAction<string>; }; }) {
        setPassword(event.target.value)
    }

    function savePasswordCheck(event: { target: { value: SetStateAction<string>; }; }) {
        setPasswordCheck(event.target.value)
    }

    function saveNickName(event: { target: { value: SetStateAction<string>; }; }) {
        setNickName(event.target.value)
    }

    return (
        <div className={classes.content}>
            <LoginHeader/>
            <div className={classes.title}>
                회원가입
            </div>
            <div className={classes.socialLoginText}>
                SNS계정으로 간편 회원가입
            </div>
            <div className={classes.socialArea}>
                <SocialGroup/>
            </div>
            <hr className={classes.line}/>

            <div className={classes.inputArea}>
                <InputTag title="비밀번호" type="password" onChange={savePassword} disabled={false} errorMsg={""} value={password}/>
                <InputTag title="비밀번호 확인" type="password" onChange={savePasswordCheck} disabled={false} errorMsg={""} value={passwordCheck}/>
                <InputTag title="닉네임" type="text" onChange={saveNickName} disabled={false} errorMsg={""} value={nickName}/>
            </div>

            <div className={classes.checkBox}>
                <div className={classes.checkBoxBtn}>
                    ✓
                </div>
                <div className={classes.checkBoxText}>
                    <div>
                        myCalendar
                    </div>
                    <div>
                        서비스 이용 약관
                    </div>
                    <div>
                        에 동의합니다.
                    </div>
                </div>
            </div>

            <SubmitBtn text="다음" flag={password.length === 0 || passwordCheck.length === 0 || nickName.length === 0} eventBtn={checkSignUp}/>

            <div className={classes.signInArea}>
                <div>
                    이미 회원가입 하셨나요?
                </div>
                <Link to={"/login"}>
                    로그인 하기
                </Link>
            </div>
        </div>
    );
}

export default SignUp;

회원가입 페이지에서도 useState 훅을 사용하여 이메일, 비밀번호, 그리고 비밀번호 확인에 대한 상태를 관리하였습니다. 사용자가 이메일과 비밀번호를 입력한 후에 "회원가입" 버튼을 클릭하면 checkSignUp 함수가 실행되어 회원가입 요청을 처리할 것입니다.

공동 컴포넌트의 활용

회원가입 페이지를 만들 때, 로그인 페이지에서 이미 만들어 놓은 공동 컴포넌트가 많이 도움이 되었습니다. 로그인 페이지와 회원가입 페이지에서 사용되는 입력 폼과 버튼 같은 공통된 UI 요소들은 공동 컴포넌트로 분리하여 재사용성을 높였습니다. 이를 통해 코드의 중복을 줄이고 유지 보수를 용이하게 만들었습니다.

작성한 로그인 코드 설명

회원가입 페이지를 구현하면서 작성한 코드에 대해 간단하게 설명드리겠습니다. 로그인 페이지와 마찬가지로 회원가입 페이지에서도 상태 관리를 위해 useState 훅을 활용하였습니다. checkSignUp 함수는 아직 실제로 회원가입 요청을 처리하는 부분은 구현되지 않았습니다. 추후에 서버와 통신하여 사용자의 인증 정보를 저장하고, 회원가입이 완료되었을 때 다음 단계로 이동하도록 구현될 예정입니다.

결과물

다음 일차에서의 계획

다음 일차에서는 Spring Boot를 사용하여 회원가입 기능과 로그인 기능을 서버와 연결할 계획입니다. 회원가입 정보를 서버로 전송하고, 서버에서는 해당 정보를 데이터베이스에 저장하여 사용자 인증에 활용할 수 있도록 구현할 것입니다. 이를 통해 로그인 기능과 회원가입 기능이 상호작용하여 사용자들에게 더욱 편리한 서비스를 제공하도록 할 것입니다.

회원가입 기능의 구현으로 더욱 발전된 myCalendar 서비스를 제공하기 위해 지속적으로 노력하겠습니다. 감사합니다!