11.18. 28일차 TIL Team_Project 로그인, 회원가입

오늘은 피그마를 다듬고, 회원가입과 로그인 페이지 기능을 구현하였다.

---

1. 피그마 정리 모습

 

작년에 xd를 사용하여 워크프레임을 만들어 본 경험이 있었는데 피그마도 비슷한 느낌이어서 사용하는 데에 크게 어렵지는 않았다.프로토타입 또한 설정하는 것이 간단해서 좀 재밌었다 ㅋㅋ

---

2. 로그인 기능 구현

오늘은 시간이 없는 관계로.. row_code를 첨부한다 ㅠㅠ 다음에 코드를 리펙토링하며 로직에 대한 해석을 작성할 예정이다.

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import supabase from '../supabase/supabase';
import Home from './Home';

const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState('');

  const onChangeEmail = (e) => {
    setEmail(e.target.value);
  };

  const onChangePassword = (e) => {
    setPassword(e.target.value);
  };

  useEffect(() => {
    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      if (session) {
        setUser(session.user);
      } else {
        setUser(null);
      }
    });

    return () => subscription.unsubscribe();
  }, []);

  const signUpNewUser = async (e) => {
    e.preventDefault();
    const { data, error } = await supabase.auth.signUp({
      email,
      password,
    });
    console.log("signup: ", { data, error }); // data에 뭐 
  };

  const signInUser = async () => {
    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });
    console.log("signin: ", { data, error });
    // setUser(data.user);
  };

  const signOutUser = async () => {
    const { data, error } = await supabase.auth.signOut();
    console.log("signout: ", { data, error }); // data는 
  };

  const navigate = useNavigate();

  const goToSignUp = () => {
    navigate('/sign-up');
  };

  if (!user) {
    return (      
        <div className="login-container">
          <h1>아 몰랑 언젠간 이름이 생길거야 ㅇㅅㅇ</h1>
          <form onSubmit={signUpNewUser}>
            <label>login-id</label>
            <input type="text" placeholder="아이디를 입력해주세요." value={email} onChange={onChangeEmail} required />
            <label>login-pw</label>
            <input
              type="password"
              placeholder="비밀번호를 입력해주세요."
              value={password}
              onChange={onChangePassword}
              required
            />
            <button type="submit" onClick={signInUser}>로그인</button>
          </form>
          <button type="button" onClick={goToSignUp}>
            회원가입
          </button>

          {/* <img src={imgSlide} alt="" size={"cover"}/> */}
        </div>
    );
  }  else {
    return (
      <>
      <Home/>
      <button onClick={signOutUser}>로그아웃</button>
      </>
    );
  }
}
export default LoginPage;

---

3. 회원가입 기능 구현

회원가입 로직을 작성하고 리펙토링 하는 과정이다. 이 또한 row_code를 첨부한다ㅠㅠ

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

const SignUpPage = () => {
  // 1. 회원가입 함수 (auth.signUp)
  const [formData, setFormData] = useState({
    userName: '',
    email: '',
    password: '',
    passwordCheck: '',
  });

  const [user, setUser] = useState(null); // 가입된 사용자 정보를 저장
  
  const handleChange = (e) => {
    const { id, value } = e.target;
    setFormData((prev) => ({ ...prev, [id]: value }));
  };

  // 회원가입 로직
  const signUpNewUser = async (e) => {
    e.preventDefault();

    // 특문 포함시켜야 회원가입가능하게,

    // 비밀번호가 비밀번호 확인 값과 다른 경우 회원가입을 불가 처리
    if (formData.password !== formData.passwordCheck) {
      alert('새 비밀번호가 일치하지 않습니다.');
      return;
    }

    const { data, error } = await supabase.auth.signUp({
      email,
      password,
    });
    
    setUser(data.user);
  };

  return (
    <div className="signUp-container">
      <h1>아 몰랑 언젠간 이름이 생길거야 ㅇㅅㅇ</h1>
      <p>빠르고 쉽게 가입할 수 있습니다.</p>
      <form onSubmit={signUpNewUser}>

        <label htmlFor={formData.userName}>이름</label>
        <input
          type="text"
          id={formData.userName}
          value={formData.userName}
          placeholder="사용하실 이름을 다시 입력해주세요."
          onChange={handleChange}
          required
        />

        <label htmlFor={formData.email}>이메일</label>
        <input
          type="email"
          id={formData.email}
          value={formData.email}
          placeholder="아이디를 다시 입력해주세요."
          onChange={handleChange}
          required
        />

        <label htmlFor={formData.password}>비밀번호</label>
        <input
          type="password"
          id={formData.password}
          value={formData.password}
          autocomplete="off"
          placeholder="비밀번호를 입력해주세요."
          onChange={handleChange}
          required
        />

        <label htmlFor={formData.checkPassword}>비밀번호 확인</label>
        <input
          type="password"
          id={formData.checkPassword}
          value={formData.checkPassword}
          autocomplete="off"
          placeholder="비밀번호를 다시 입력해주세요."
          onChange={handleChange}
          required
        />

        <button type="onSubmit">가입 요청</button>
      </form>
    </div>
  );
};

export default SignUpPage;

---

4. 페이지의 모습

우리는 기능구현을 먼저 다 끝낸 이후 코드를 merge한 이후에 css를 다 같이 작성하기로 하였다. 그래서 현재의 ui는 아직 날 것 그대로이다.

로그인 페이지

회원가입 페이지

---

★ 28일차 소감

 

이번에도 이상한 오류와 씨름을 하다 시간을 많이 소모하였다.. 앞으로는 오류 발생 시 GPT의 적극적으로 받아 소중한 시간이 허비되지 않게 작업해야겠다.. 또 내일 마저 해야할 일을 정리하고 잠에 들려고 한다. 오늘도 시간가는 줄 모르고 코드를 작성하고 로직을 구상하였다. 또한 바닐라스크립트로 작성하던 코드들을 react 문법으로 간결하게 작성하는 재미 또한 느낀다. (특히 슬라이드 기능 구현..) 정말 그리고 제발 무사히 이번 팀프로젝트가 마무리 되었으면 좋겠다!!

• 회원가입 페이지 비밀번호 작성 조건 로직 추가
• 회원가입 페이지 리펙토링 끝내기
• 로그인 페이지 리펙토링 하기
• 로그인 페이지 비밀번호 찾기 기능 추가
• 팀원들이 작성한 코드를 merge 하고 전체적인 ui 구조 확인 및 스타일링
• github에 잘못 업로드된 .env 파일 기록을 찾아 삭제하기