[GDSC/슈파인드] 개발 일지 #1-2주 차

 

✅ 회원가입 페이지 구현

 

[1 Week]
- 가입 폼 페이지 컴포넌트화
- react router 적용하기

[2 Week]
- 디자인 적용

 

 

 

구현해야 하는 디자인

 

---

# 첫 로그인 화면

버튼 클릭 시 모달 컴포넌트 띄우기

 

 

Modal.js

- styled-components CSS-in-JS 라이브러리를 설치해서 버튼 디자인을 했다.

import { useState } from 'react';
import ModalBasic from './ModalBasic';
import styled from 'styled-components';

// 모달을 노출하는 페이지
function Modal() {
    // 모달창 노출 여부 state
    const [modalOpen, setModalOpen] = useState(false);

    // 모달창 노출
    const showModal = () => {
        setModalOpen(true);
    };

    const ModalBg = styled.div`
    color: #AFAFAF;
    width: 10.8rem;
    border-radius: 32px;
    margin: 0 auto;
    margin-top: 2rem;
    font-size: 10px;
    border: 1px solid #C9C9C9;
    padding: 0.5rem 2rem;
`;


    return (
        <div>
            <button onClick={showModal}>
                <ModalBg>로그인에 어려움이 있나요?</ModalBg>
                </button>
            {modalOpen && <ModalBasic setModalOpen={setModalOpen} />}
        </div>
    );
}

export default Modal;

 

 

ModalBasic.js

- 버튼 클릭 시 나오는 모달 화면을 구현했다.

import styles from './ModalBasic.module.css';

function ModalBasic({ setModalOpen }) {
    // 모달 끄기 
    const closeModal = () => {
        setModalOpen(false);
    };

    return (
        <div className={styles.container}>
            <button className={styles.close} onClick={closeModal}>
                    X
            </button>
            <div className={styles.content_wrapper}>
                <h3 className={styles.title}>로그인에 어려움이 있나요?</h3>
                <p className={styles.question}>분명 이 소셜 서비스로 로그인 했었는데 지금은 안 돼요.</p>
                <span className={styles.answer}>- 혹시 로그인헀던 소셜서비스의 계정을 아예 삭제했거나, 비밀번호를 변경했나요? 이경우, 해당 소셜 서비스에서 직접 확인한 후 텍스처에 로그인이 가능합니다.</span>
                <p className={styles.question}>구글 계정으로 로그인 하려는데 절차가 복잡해요.</p>
                <span className={styles.answer}>- 혹시 Google Workspace 계정으로 로그인을 시도하셨나요? 이 경우, Google Device Policy 맴 다운로드 및 해당 앱 로그인 후 모두리 이용이 가능합니다.</span>
                <p className={styles.question}>그래도 문제가 해결되지 않는다면 고객센터로 이메일을 보내주세요. 편리한 이용을 위한 모두리가 되겠습니다.</p>
            </div>
            {/* TODO: onClick={ } 메서드 구현 */}
            <button className={styles.email}>이메일 보내기</button>
        </div>
    );
}
export default ModalBasic;

 

 

 

---

# 닉네임 입력 화면

- 추후 구현: 닉네임 중복 검사

유효성 검사

 

    // TODO: 유효성 검사 세부 수정
    // TODO: 닉네임 중복확인 구현

    if(!values.userNickname) {
        errors.userNickname = "닉네임을 입력해주세요";
    } else if (values.userNickname.length < 3) {
        errors.userNickname = "닉네임을 3자 이상 입력해주세요"
    }

 

SignUpPage.js

import React from 'react'
import useForm from './useForm'
import validate from './validateInfo';
import styles from './SignUpPage.module.css'

const SignUp = ({submitForm}) => {

  const{ handleChange, values, handleSubmit, errors } = useForm(submitForm, validate);

  return ( 
    <div className={styles.wrapper}>
        <form className="form" onSubmit={handleSubmit} noValidate>
            <div className={styles.form_inputs}>
              <label htmlFor="userNickname" className={styles.form_label}>닉네임을 입력해주세요</label>
              <p className={styles.input_subTitle}>닉네임</p>
              <input id="userNickname" type="text" name = "userNickname" className={styles.nickname_input} placeholder="ex) 슈파인더" 
              value={values.userNickname} onChange={handleChange} />
              {errors.userNickname && <p>{errors.userNickname}</p>}
            </div>
            <button className={styles.confirmBtn} type="submit">확인</button>
        </form>
    </div> 
  )
}

export default SignUp

 

SignUp.js

import React, { useState } from 'react'
import SignUpPage from './SignUpPage';
import FormSuccess from './FormSuccess';


const Form = () => {
  const [isSubmitted, setIsSubmitted] = useState(false);

  function submitForm() {
    setIsSubmitted(true);
  }

  return (
    <>
    <div>
        {!isSubmitted ? (
          <SignUpPage submitForm={submitForm} />
        ) : (
          <FormSuccess />
        )}
    </div>
    </>
  )
}

export default Form