From d572a3a239f6f296bc882d89ef59b022711f047a Mon Sep 17 00:00:00 2001 From: yunsusu Date: Wed, 17 Apr 2024 22:43:02 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix=20:=20=EA=B5=AC=EA=B8=80=20=EC=86=8C?= =?UTF-8?q?=EC=85=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Oauth2/SocialSignupForm/index.tsx | 270 +++++++++++++++++++ pages/login/index.tsx | 4 +- pages/oauth2/signup/index.tsx | 2 +- 3 files changed, 274 insertions(+), 2 deletions(-) create mode 100644 components/Oauth2/SocialSignupForm/index.tsx diff --git a/components/Oauth2/SocialSignupForm/index.tsx b/components/Oauth2/SocialSignupForm/index.tsx new file mode 100644 index 0000000..033cbf0 --- /dev/null +++ b/components/Oauth2/SocialSignupForm/index.tsx @@ -0,0 +1,270 @@ +import "react-datepicker/dist/react-datepicker.css"; + +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import { Controller, useForm } from "react-hook-form"; + +import DatePickerInput from "@/components/Form/Input/DatePickerInput"; +import ImageUpload from "@/components/Form/Input/ImageUploadInput"; +import IntroTextarea from "@/components/Form/Input/IntroTextarea"; +import RadioInput from "@/components/Form/Input/RadioInput"; +import TagInput from "@/components/Form/Input/TagInput"; +import Modal from "@/components/Modal"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import axios from "@/lib/api/axios"; + +interface SignUp { + bio?: string; + confirmPassword: string; + dayOfBirth: string; + favoriteSpots?: string[]; + gender: "MALE" | "FEMALE"; + nickname: string; + password: string; + profile?: string; +} + +function SocialSignUpForm() { + const { + register, + handleSubmit, + control, + formState: { errors, isValid }, + watch, + } = useForm({ mode: "onBlur" }); + + const router = useRouter(); + + const password = watch("password", ""); + + const [passwordShown, setPasswordShown] = useState(false); + const [confirmPasswordShown, setConfirmPasswordShown] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isCheckEmailModalOpen, setIsCheckEmailModalOpen] = useState(false); + + const [oauthEmail, setOauthEmail] = useState("default@email.com"); + + const togglePasswordVisiblity = () => { + setPasswordShown(passwordShown => !passwordShown); + }; + + const toggleConfirmPasswordVisibility = () => { + setConfirmPasswordShown(confirmPasswordShown => !confirmPasswordShown); + }; + + const onSubmit = async (data: SignUp) => { + const formData = new FormData(); + + const { confirmPassword, profile, ...submitData } = data; + formData.append( + "request", + new Blob([JSON.stringify(submitData)], { type: "application/json" }), + ); + + if (data.profile) { + formData.append("profile", data.profile); + } + + try { + const res = await axios.post("/oauth2/signup", formData, { + headers: { + "Content-Type": "multipart/form-data", + }, + }); + setIsModalOpen(true); + } catch (error) { + console.error("회원가입 실패:", error); + } + }; + + const handleFormSubmit = (data: SignUp) => { + onSubmit(data); + }; + + useEffect(() => { + const getOauthEmail = async () => { + try { + const response = await axios.get("/oauth2/token"); + console.log(response); + setOauthEmail(response.data.email); + console.log("oauth2 이메일 조회 성공! ", response.data); + } catch (error) { + console.error("oauth2 이메일 조회 실패", error); + } + }; + + getOauthEmail(); + }, [oauthEmail, router]); + + return ( + <> +
+
+
+
+
+ 필수 정보 입력 +
+
+
+
+
+ + +
+
+ + + {errors.nickname && errors.nickname.type === "required" && ( + + 닉네임을 입력해 주세요 + + )} + {errors.nickname && errors.nickname.type === "minLength" && ( + + 닉네임은 최소 2글자 입니다 + + )} + {errors.nickname && errors.nickname.type === "maxLength" && ( + + 닉네임은 최대 8글자 입니다 + + )} +
+ +
+ + ( + field.onChange(gender)} + value={field.value} + pageType="singUp" + id={"gender"} + /> + )} + /> +
+
+ + ( + field.onChange(date)} + value={field.value} + id={"date"} + /> + )} + /> +
+
+
+
+
+ 추가 정보 입력 +
+
+
+
+ ( + field.onChange(profile)} + value={field.value ?? ""} + /> + )} + /> +
+ + ( + field.onChange(tags)} + value={field.value} + formType={"signUp"} + id={"tags"} + /> + )} + /> +
+
+ + ( + field.onChange(text)} + value={field.value ?? ""} + id={"bio"} + /> + )} + /> +
+
+
+
+ +
+
+ {isModalOpen && ( + { + setIsModalOpen(false); + router.push("/login"); + }} + /> + )} + {isCheckEmailModalOpen && ( + { + setIsCheckEmailModalOpen(false); + }} + /> + )} + + ); +} + +export default SocialSignUpForm; diff --git a/pages/login/index.tsx b/pages/login/index.tsx index 0a07649..11a58b8 100644 --- a/pages/login/index.tsx +++ b/pages/login/index.tsx @@ -191,7 +191,9 @@ export default function Login() {