Merge pull request #2 from noSPkeepgoing/ChoiSunPa

회원가입 새로운 유저 인증 생성

src/components/SignUp/SignUpNext.tsx

@@ -0,0 +1,124 @@
+import { IHandleChange, IHandleNothing, IUser } from 'pages/SignUp';
+import React, { useState } from 'react';
+import { createUser } from 'data/user';
+
+interface ISignUpNextProps {
+  user: IUser;
+  handleInputChange: IHandleChange;
+  handleTogglePage: IHandleNothing;
+}
+
+export function SignUpNext({
+  user,
+  handleInputChange,
+  handleTogglePage,
+}: ISignUpNextProps) {
+  const [isChecked, setIsChecked] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const handleCheck = () => {
+    setIsChecked((prev) => !prev);
+  };
+
+  //   데이터 추가!
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const { password, repassword } = user;
+    if (password !== repassword) {
+      setErrorMessage('비밀번호가 일치하지 않습니다.');
+      return;
+    }
+    if (!isChecked) {
+      setErrorMessage('개인정보 약관에 동의해주세요.');
+      return;
+    }
+    await createUserAuth();
+  };
+
+  // user auth 생성
+  const createUserAuth = async () => {
+    const { email, password, nickname } = user;
+    try {
+      await createUser(email, password);
+      alert(`${nickname}님 반갑습니다!`);
+      console.log(user);
+    } catch (error: any) {
+      handleError(error);
+    }
+  };
+
+  // error 핸들링
+  const handleError = (error: any) => {
+    switch (error.code) {
+      case 'auth/email-already-in-use':
+        setErrorMessage('이미 존재하는 이메일입니다.');
+        break;
+      case 'auth/weak-password':
+        setErrorMessage('비밀번호는 6자리 이상이어야 합니다.');
+        break;
+      default:
+        setErrorMessage('알 수 없는 오류가 발생했어요.');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="name">
+        <input
+          type="text"
+          name="username"
+          value={user.username}
+          onChange={handleInputChange}
+          placeholder="* 이름"
+          required
+        />
+      </div>
+      <div className="email">
+        <input
+          type="email"
+          name="email"
+          value={user.email}
+          onChange={handleInputChange}
+          placeholder="* 이메일"
+          required
+        />
+      </div>
+      <div className="password">
+        <input
+          type="password"
+          name="password"
+          value={user.password}
+          onChange={handleInputChange}
+          placeholder="* 비밀번호"
+          required
+        />
+        <input
+          type="password"
+          name="repassword"
+          value={user.repassword}
+          onChange={handleInputChange}
+          placeholder="* 비밀번호 재입력"
+          required
+        />
+      </div>
+      <div className="checkbox">
+        <input
+          type="checkbox"
+          onChange={handleCheck}
+          id="agree"
+          checked={isChecked}
+        />
+        <label htmlFor="agree">
+          이용약관 개인정보 수집 및 정보이용에 동의합니다.
+        </label>
+      </div>
+      {errorMessage ?? <p>{errorMessage}</p>}
+      <div className="button">
+        <button type="button" onClick={handleTogglePage}>
+          이전으로
+        </button>
+        <button type="submit">제출하기</button>
+      </div>
+    </form>
+  );
+}

src/components/SignUp/SignUpPrev.tsx

@@ -0,0 +1,82 @@
+import { createNickname, uploadUserImage } from 'data/user';
+import { IHandleChange, IHandleNothing, IUser } from 'pages/SignUp';
+import React, { useState, ChangeEvent, useEffect } from 'react';
+
+interface ISignUpPrevProps {
+  user: IUser;
+  handleTogglePage: IHandleNothing;
+  updateUserData: (name: string, value: string) => void;
+}
+
+export function SignUpPrev({
+  user,
+  handleTogglePage,
+  updateUserData,
+}: ISignUpPrevProps) {
+  const [imageFileName, setImageFileName] = useState('');
+  const [imageUrl, setImageUrl] = useState(user.image);
+  const [nickname, setNickname] = useState(user.nickname);
+
+  useEffect(() => {
+    setImageFileName(Date.now().toString());
+  }, []);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setNewNickname();
+    handleTogglePage();
+  };
+
+  // 사용자 프로필 사진 설정
+  const handleImageInputChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.currentTarget.files![0];
+    const imageUrl = await uploadUserImage(imageFileName, file);
+    setImageUrl(imageUrl);
+    user.image = imageUrl;
+  };
+
+  // 사용자 닉네임 설정
+  const setNewNickname = () => {
+    updateUserData('nickname', nickname);
+  };
+
+  // 사용자 닉네임 추천해주기
+  const handleClickNicknameButton = async () => {
+    const nickname = await createNickname();
+    setNickname(nickname);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="image">
+        <label htmlFor="img">
+          <span>프로필 사진 변경하기</span>
+        </label>
+        <input
+          type="file"
+          id="img"
+          accept="image/*"
+          hidden
+          onChange={handleImageInputChange}
+        />
+        <img src={imageUrl} />
+      </div>
+      <div className="nickname">
+        <input
+          type="text"
+          name="nickname"
+          value={nickname}
+          placeholder="* 닉네임"
+          readOnly
+          required
+        />
+        <button type="button" onClick={handleClickNicknameButton}>
+          추천받기!
+        </button>
+      </div>
+      <div className="button">
+        <button type="submit">다음으로</button>
+      </div>
+    </form>
+  );
+}