From c25f9fa78190f848087aa8dba551f6ef26c447d6 Mon Sep 17 00:00:00 2001 From: hsgh085 Date: Sat, 17 Aug 2024 19:40:51 +0900 Subject: [PATCH 1/9] =?UTF-8?q?style:=20=EB=B3=80=EC=88=98=EB=AA=85=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../molecules/InputProfileImage/InputProfileImage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/molecules/InputProfileImage/InputProfileImage.tsx b/src/components/molecules/InputProfileImage/InputProfileImage.tsx index c0415fa5..6ffa99cb 100644 --- a/src/components/molecules/InputProfileImage/InputProfileImage.tsx +++ b/src/components/molecules/InputProfileImage/InputProfileImage.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Label from '@/components/atoms/Label/Label'; -import ProfileSignUp from '@/components/atoms/ProfileSetting/ProfileSetting'; +import ProfileSetting from '@/components/atoms/ProfileSetting/ProfileSetting'; import { InputProfileImageProps, useCheckProfileImage, @@ -21,7 +21,7 @@ const InputProfileImage = ({ return (
- Date: Sat, 14 Sep 2024 02:37:19 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=84=9C=EB=B2=84=20=EA=B2=BD=EB=A1=9C=20?= =?UTF-8?q?=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/constants/image.ts | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/constants/image.ts diff --git a/src/constants/image.ts b/src/constants/image.ts new file mode 100644 index 00000000..1a9ba2bb --- /dev/null +++ b/src/constants/image.ts @@ -0,0 +1,32 @@ +export const DEFAULT_PROFILE_URL = { + OCTOPUS: { + CLIENT: '/octopus-profile.png', + SERVER: + 'https://picko-image.s3.ap-northeast-2.amazonaws.com/member/2c132b00-e37a-4f71-bbf2-e064bd181915_octopus_profile.jpg', + }, + JELLYFISH: { + CLIENT: '/jellyfish-profile.png', + SERVER: + 'https://picko-image.s3.ap-northeast-2.amazonaws.com/member/8fcc5073-d977-4b91-a4d1-e242e3eb2efa_jellyfilsh_profile.jpg', + }, + RAY: { + CLIENT: '/ray-profile.png', + SERVER: + 'https://picko-image.s3.ap-northeast-2.amazonaws.com/member/0c6c471d-420a-4632-ae9b-20be5a52097c_ray_profile.jpg', + }, + EEL: { + CLIENT: '/eel-profile.png', + SERVER: + 'https://picko-image.s3.ap-northeast-2.amazonaws.com/member/873fad2f-1cf5-4429-9cd0-626656b894d3_eel_profile.jpg', + }, + TURTLE: { + CLIENT: '/turtle-profile.png', + SERVER: + 'https://picko-image.s3.ap-northeast-2.amazonaws.com/member/4239508d-f9b3-4a3e-91be-3777024ea05a_turtle_profile.jpg', + }, + RABBIT: { + CLIENT: '/rabbit-profile.png', + SERVER: + 'https://picko-image.s3.ap-northeast-2.amazonaws.com/member/68f736cf-0f65-4f12-bb44-4f54c448eddc_rabbit_profile.jpg', + }, +}; From 83e03d9e1b290249ed2a37423bd4cfb6c31aa7b7 Mon Sep 17 00:00:00 2001 From: hsgh085 Date: Sat, 14 Sep 2024 02:38:27 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=84=A0=ED=83=9D=20=EB=AA=A8=EB=8B=AC?= =?UTF-8?q?=EC=B0=BD=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../InputProfileImage.style.ts | 8 +++ .../InputProfileImage/InputProfileImage.tsx | 23 +++++++- .../inputsUserInfo/useCheckProfileImage.ts | 52 ++++++++++++++----- src/hooks/signup/useSignupForm.ts | 3 +- src/types/member.ts | 3 +- 5 files changed, 72 insertions(+), 17 deletions(-) diff --git a/src/components/molecules/InputProfileImage/InputProfileImage.style.ts b/src/components/molecules/InputProfileImage/InputProfileImage.style.ts index 5c8b3bd4..d0d3cb0d 100644 --- a/src/components/molecules/InputProfileImage/InputProfileImage.style.ts +++ b/src/components/molecules/InputProfileImage/InputProfileImage.style.ts @@ -33,3 +33,11 @@ export const profileImageText = (isError: boolean) => css(typo.Comment.Regular, { color: isError ? color.RED : color.GY[1], }); + +export const defaultProfileModalcenterStyling = css({ + position: 'fixed', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + zIndex: '1000', +}); diff --git a/src/components/molecules/InputProfileImage/InputProfileImage.tsx b/src/components/molecules/InputProfileImage/InputProfileImage.tsx index 6ffa99cb..3b083ed6 100644 --- a/src/components/molecules/InputProfileImage/InputProfileImage.tsx +++ b/src/components/molecules/InputProfileImage/InputProfileImage.tsx @@ -1,11 +1,13 @@ -import React from 'react'; import Label from '@/components/atoms/Label/Label'; import ProfileSetting from '@/components/atoms/ProfileSetting/ProfileSetting'; import { InputProfileImageProps, useCheckProfileImage, } from '@/hooks/common/inputsUserInfo/useCheckProfileImage'; +import React, { useState } from 'react'; +import DefaultProfileModal from '../DefaultProfileModal/DefaultProfileModal'; import { + defaultProfileModalcenterStyling, profileDefaultText, profileImageSelectContainer, profileImageText, @@ -18,6 +20,16 @@ const InputProfileImage = ({ }: InputProfileImageProps) => { const { imageSrc, isError, getRootProps, handleDefaultImage } = useCheckProfileImage({ setProfilePhoto, imgSrc }); + + const [defaultProfileModalOpen, setDefaultProfileModalOpen] = + useState(false); + + const handleSelectDefaultImage = (selectedImage: string | null) => { + if (selectedImage) { + handleDefaultImage(selectedImage); + } + setDefaultProfileModalOpen(false); + }; return (
@@ -30,7 +42,7 @@ const InputProfileImage = ({ @@ -38,6 +50,13 @@ const InputProfileImage = ({ 3MB 이하의 사진만 가능합니다.
+
+ setDefaultProfileModalOpen(false)} + /> +
); }; diff --git a/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts b/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts index bf3a7519..e4ad3a4e 100644 --- a/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts +++ b/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts @@ -1,6 +1,5 @@ -import { postFile } from '@/api/file'; -import { UploadedImage } from '@/types/file'; -import { useMutation } from '@tanstack/react-query'; +import { DEFAULT_PROFILE_URL } from '@/constants/image'; +import { useFileUploadMutation } from '@/hooks/api/file/useFileUploadMutation'; import { useCallback, useState } from 'react'; import { useDropzone } from 'react-dropzone'; @@ -15,13 +14,8 @@ export const useCheckProfileImage = ({ }: InputProfileImageProps) => { const [imageSrc, setImageSrc] = useState(imgSrc || ''); const [isError, setIsError] = useState(false); + const { mutate: fileUpload } = useFileUploadMutation(); - const fileUpload = useMutation({ - mutationFn: postFile, - onSuccess: (res: UploadedImage) => { - setProfilePhoto('profilePhoto', res.storedName); - }, - }); const onDrop = useCallback( (acceptedFiles: File[]) => { if (acceptedFiles.length) { @@ -33,10 +27,18 @@ export const useCheckProfileImage = ({ setIsError(false); const frm = new FormData(); frm.append('file', acceptedFiles[0], acceptedFiles[0].name); - fileUpload.mutate(frm); + // fileUpload.mutate(frm); + fileUpload( + { formData: frm, params: { type: 'MEMBER' } }, + { + onSuccess: (res) => { + setProfilePhoto('profileImgUrl', res.imgUrls[0]); + }, + }, + ); } else { setIsError(true); - setProfilePhoto('profilePhoto', ''); + setProfilePhoto('profileImgUrl', ''); } }, [fileUpload, setProfilePhoto], @@ -50,8 +52,32 @@ export const useCheckProfileImage = ({ maxSize: 3145728, // 3MB }); - const handleDefaultImage = () => { - setImageSrc(''); + const handleDefaultImage = (src: string) => { + let profileImgUrl = ''; + switch (src) { + case DEFAULT_PROFILE_URL.OCTOPUS.CLIENT: + profileImgUrl = DEFAULT_PROFILE_URL.OCTOPUS.SERVER; + break; + case DEFAULT_PROFILE_URL.JELLYFISH.CLIENT: + profileImgUrl = DEFAULT_PROFILE_URL.JELLYFISH.SERVER; + break; + case DEFAULT_PROFILE_URL.RAY.CLIENT: + profileImgUrl = DEFAULT_PROFILE_URL.RAY.SERVER; + break; + case DEFAULT_PROFILE_URL.EEL.CLIENT: + profileImgUrl = DEFAULT_PROFILE_URL.EEL.SERVER; + break; + case DEFAULT_PROFILE_URL.TURTLE.CLIENT: + profileImgUrl = DEFAULT_PROFILE_URL.TURTLE.SERVER; + break; + case DEFAULT_PROFILE_URL.RABBIT.CLIENT: + profileImgUrl = DEFAULT_PROFILE_URL.RABBIT.SERVER; + break; + default: + break; + } + setImageSrc(src); + setProfilePhoto('profileImgUrl', profileImgUrl); }; return { imageSrc, isError, getRootProps, handleDefaultImage }; diff --git a/src/hooks/signup/useSignupForm.ts b/src/hooks/signup/useSignupForm.ts index 3ff0bbd6..fc121729 100644 --- a/src/hooks/signup/useSignupForm.ts +++ b/src/hooks/signup/useSignupForm.ts @@ -13,7 +13,8 @@ const initialState: MemberForm = { nickname: '', password: '', passwordCheck: '', - profilePhoto: '', + profileImgUrl: '', + role: 'USER', }; const successState: MemberSuccesForm = { diff --git a/src/types/member.ts b/src/types/member.ts index 8853eba0..7baaa4fa 100644 --- a/src/types/member.ts +++ b/src/types/member.ts @@ -14,7 +14,8 @@ export interface MemberForm { nickname: string; password: string; passwordCheck: string; - profilePhoto: string; + profileImgUrl: string; + role: 'USER'; } export interface MemberSuccesForm { From bf06ffe019a40357afeffe31b671a7f552ac8480 Mon Sep 17 00:00:00 2001 From: hsgh085 Date: Sat, 14 Sep 2024 02:43:57 +0900 Subject: [PATCH 4/9] =?UTF-8?q?style:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/common/inputsUserInfo/useCheckProfileImage.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts b/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts index e4ad3a4e..b1cdebc4 100644 --- a/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts +++ b/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts @@ -27,7 +27,6 @@ export const useCheckProfileImage = ({ setIsError(false); const frm = new FormData(); frm.append('file', acceptedFiles[0], acceptedFiles[0].name); - // fileUpload.mutate(frm); fileUpload( { formData: frm, params: { type: 'MEMBER' } }, { From a7c7e4adf06f8f1e6236fda60d8a657ef9fe2e01 Mon Sep 17 00:00:00 2001 From: hsgh085 Date: Sat, 14 Sep 2024 04:13:02 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/email.ts | 7 ++-- src/api/member.ts | 42 ++++++++----------- src/hooks/api/member/useSignUpMutation.ts | 8 +--- .../common/inputsUserInfo/useCheckEmail.ts | 4 +- src/hooks/signup/useSignupForm.ts | 18 ++++++-- 5 files changed, 39 insertions(+), 40 deletions(-) diff --git a/src/api/email.ts b/src/api/email.ts index 0815464c..9e699630 100644 --- a/src/api/email.ts +++ b/src/api/email.ts @@ -1,11 +1,12 @@ import { END_POINT } from '@/constants/api'; +import { ServerResponse } from '@/types/api'; import { MemberForm } from '@/types/member'; import { axiosInstance } from './interceptor'; export const postEmailVerify = async ( value: Pick, ) => { - const { data } = await axiosInstance.post( + const { data } = await axiosInstance.post( `${END_POINT.EMAIL_VERIFY}`, value, ); @@ -14,7 +15,7 @@ export const postEmailVerify = async ( }; export const postEmailRequest = async (email: string) => { - const { data } = await axiosInstance.post( + const { data } = await axiosInstance.post( `${END_POINT.EMAIL_REQUEST}`, email, ); @@ -22,7 +23,7 @@ export const postEmailRequest = async (email: string) => { }; export const getFindPw = async (email: string) => { - const { data } = await axiosInstance.post( + const { data } = await axiosInstance.post( `${END_POINT.FIND_PW}`, email, ); diff --git a/src/api/member.ts b/src/api/member.ts index ea69ed53..da4513c6 100644 --- a/src/api/member.ts +++ b/src/api/member.ts @@ -1,21 +1,8 @@ import { END_POINT } from '@/constants/api'; +import { ServerResponse } from '@/types/api'; import { Member, MemberForm } from '@/types/member'; import { axiosInstance } from './interceptor'; -const URL = process.env.API_URL; - -export const fetchMembers = async (): Promise => { - const response = await fetch(`${URL}/members`); - const result = (await response.json()) as Member[]; - return result; -}; - -export const fetchMember = async (memberId: number): Promise => { - const response = await fetch(`${URL}/members/${memberId}`); - const result = (await response.json()) as Member; - return result; -}; - export const getMember = async (memberId: number) => { const { data } = await axiosInstance.get( `${END_POINT.MEMBER(memberId)}`, @@ -31,9 +18,9 @@ export const getMemberProfile = async (memberId: number) => { }; export const postMember = async ( - form: Pick, + form: Pick, ) => { - const { data } = await axiosInstance.post( + const { data } = await axiosInstance.post( `${END_POINT.SIGN_UP}`, form, ); @@ -47,7 +34,7 @@ export const deleteMember = async ( data: form, }; - const { data } = await axiosInstance.delete( + const { data } = await axiosInstance.delete( `${END_POINT.ALL_MEMBERS}`, params, ); @@ -55,7 +42,7 @@ export const deleteMember = async ( }; export const putMemberImage = async (profilePhoto: string) => { - const { data } = await axiosInstance.put( + const { data } = await axiosInstance.put( `${END_POINT.MEMBER_IMAGE}`, profilePhoto, { @@ -68,7 +55,7 @@ export const putMemberImage = async (profilePhoto: string) => { }; export const putMemberNickname = async (nickname: string) => { - const { data } = await axiosInstance.put( + const { data } = await axiosInstance.put( `${END_POINT.MEMBER_NICKNAME}`, nickname, { @@ -81,7 +68,7 @@ export const putMemberNickname = async (nickname: string) => { }; export const putMemberPw = async (pw: string) => { - const { data } = await axiosInstance.put( + const { data } = await axiosInstance.put( `${END_POINT.MEMBER_PASSWORD}`, pw, { @@ -96,22 +83,29 @@ export const putMemberPw = async (pw: string) => { export const postLogin = async ( form: Pick, ) => { - const { data } = await axiosInstance.post(`${END_POINT.LOGIN}`, form); + const { data } = await axiosInstance.post( + `${END_POINT.LOGIN}`, + form, + ); return data; }; export const postLogout = async () => { - const { data } = await axiosInstance.post(`${END_POINT.LOGOUT}`); + const { data } = await axiosInstance.post( + `${END_POINT.LOGOUT}`, + ); return data; }; export const getRefreshToken = async () => { - const { data } = await axiosInstance.get(`${END_POINT.REFRESH}`); + const { data } = await axiosInstance.get( + `${END_POINT.REFRESH}`, + ); return data; }; export const getNicknameVerify = async (nickname: string) => { - const { data } = await axiosInstance.get( + const { data } = await axiosInstance.get( `${END_POINT.NICKNAME_VERIFY}`, { params: { diff --git a/src/hooks/api/member/useSignUpMutation.ts b/src/hooks/api/member/useSignUpMutation.ts index 4021c5f3..ec2d374e 100644 --- a/src/hooks/api/member/useSignUpMutation.ts +++ b/src/hooks/api/member/useSignUpMutation.ts @@ -1,17 +1,11 @@ -import { useNavigate } from 'react-router-dom'; import { AxiosErrorResponse } from '@/api/interceptor'; import { postMember } from '@/api/member'; import { useMutation } from '@tanstack/react-query'; -import { PATH } from '@/constants/path'; export const useSignUpMutation = () => { - const navigate = useNavigate(); return useMutation({ mutationFn: postMember, - onSuccess: () => { - navigate(`/${PATH.LOGIN}`); - alert('회원가입에 성공했습니다😀'); - }, + onSuccess: () => {}, onError: (err: AxiosErrorResponse) => { console.error(err); }, diff --git a/src/hooks/common/inputsUserInfo/useCheckEmail.ts b/src/hooks/common/inputsUserInfo/useCheckEmail.ts index ff7794fa..37159da7 100644 --- a/src/hooks/common/inputsUserInfo/useCheckEmail.ts +++ b/src/hooks/common/inputsUserInfo/useCheckEmail.ts @@ -1,12 +1,12 @@ import { getFindPw, postEmailRequest } from '@/api/email'; import { AxiosErrorResponse } from '@/api/interceptor'; import { HTTP_STATUS_CODE } from '@/constants/api'; +import { ERROR, SUCCESS } from '@/constants/message'; import { PATH } from '@/constants/path'; +import { isEmptyString } from '@/utils/validator'; import { useMutation } from '@tanstack/react-query'; import { useRef, useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { ERROR, SUCCESS } from '../../../constants/message'; -import { isEmptyString } from '../../../utils/validator'; export const useCheckEmail = (type: string, value: string) => { const inputRef = useRef(null); diff --git a/src/hooks/signup/useSignupForm.ts b/src/hooks/signup/useSignupForm.ts index fc121729..76250f0e 100644 --- a/src/hooks/signup/useSignupForm.ts +++ b/src/hooks/signup/useSignupForm.ts @@ -1,6 +1,7 @@ +import { PATH } from '@/constants/path'; import { MemberForm, MemberSuccesForm } from '@/types/member'; import { isAllTrue } from '@/utils/validator'; -import { ChangeEvent } from 'react'; +import { ChangeEvent, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useSignUpMutation } from '../api/member/useSignUpMutation'; import { useActiveSubmit } from '../common/useActiveSubmit'; @@ -26,6 +27,7 @@ const successState: MemberSuccesForm = { }; export const useSignupForm = () => { + const [signupSuccess, setSignupSuccess] = useState(false); const { form, onChange, setEach } = useInputs(initialState); const { successForm, onSuccessChange } = useActiveSubmit(successState); @@ -37,7 +39,7 @@ export const useSignupForm = () => { return newForm; }; - const signup = useSignUpMutation(); + const { mutate: signup } = useSignUpMutation(); const navigate = useNavigate(); @@ -45,9 +47,16 @@ export const useSignupForm = () => { e.preventDefault(); if (isAllTrue(successForm)) { const newForm = createNewForm(form); - signup.mutate(newForm); + signup(newForm, { + onSuccess: () => { + setSignupSuccess(true); + setTimeout(() => { + navigate(`/${PATH.LOGIN}`); + }, 2000); + }, + }); } else { - console.log(form); + // console.log(form); focus(e); } }; @@ -57,6 +66,7 @@ export const useSignupForm = () => { }; return { + signupSuccess, form, onChange, setEach, From 330e0a9e732865d9bae3ae76c262c10e3dc1f4e3 Mon Sep 17 00:00:00 2001 From: hsgh085 Date: Sat, 14 Sep 2024 04:13:24 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=ED=86=A0=EC=8A=A4=ED=8A=B8=EC=B0=BD=20=EB=9D=84?= =?UTF-8?q?=EC=9A=B0=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/SignUpPage/SignUpPage.style.ts | 10 ++++++--- src/pages/SignUpPage/SignUpPage.tsx | 27 ++++++++++++------------ 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/pages/SignUpPage/SignUpPage.style.ts b/src/pages/SignUpPage/SignUpPage.style.ts index 246f7592..7380a191 100644 --- a/src/pages/SignUpPage/SignUpPage.style.ts +++ b/src/pages/SignUpPage/SignUpPage.style.ts @@ -7,11 +7,9 @@ export const signupContainer = css({ flexDirection: 'column', alignItems: 'center', width: '100%', - height: '100%', - padding: '30px 0px', + padding: '50px 0px', gap: '30px', background: color.GY[3], - overflow: 'auto', }); export const signUpHeadingStyling = css(typo.Component.Bold, { @@ -38,3 +36,9 @@ export const btnSignup = css({ width: '100%', borderRadius: '50px', }); + +export const signupToastModalStyling = css({ + zIndex: 1, + position: 'fixed', + top: '130px', +}); diff --git a/src/pages/SignUpPage/SignUpPage.tsx b/src/pages/SignUpPage/SignUpPage.tsx index d421c6ef..c1c7759f 100644 --- a/src/pages/SignUpPage/SignUpPage.tsx +++ b/src/pages/SignUpPage/SignUpPage.tsx @@ -1,5 +1,6 @@ import React from 'react'; import Button from '@/components/atoms/Button/Button'; +import ToastModal from '@/components/atoms/ToastModal/ToastModal'; import InputCode from '@/components/molecules/InputCode/InputCode'; import InputEmail from '@/components/molecules/InputEmail/InputEmail'; import InputNickname from '@/components/molecules/InputNickname/InputNickname'; @@ -7,16 +8,11 @@ import InputProfileImage from '@/components/molecules/InputProfileImage/InputPro import InputPw from '@/components/molecules/InputPw/InputPw'; import InputPwCheck from '@/components/molecules/InputPwCheck/InputPwCheck'; import { useSignupForm } from '@/hooks/signup/useSignupForm'; -import { - btnContainer, - btnSignup, - inputContainer, - signupContainer, - signUpHeadingStyling, -} from './SignUpPage.style'; +import * as S from './SignUpPage.style'; const SignUpPage = () => { const { + signupSuccess, form, onChange, onSuccessChange, @@ -25,10 +21,15 @@ const SignUpPage = () => { handleCancle, } = useSignupForm(); return ( -
- SIGN UP + + {signupSuccess && ( +
+ 회원가입 완료! +
+ )} + SIGN UP -
+
{ pw={form.password} />
-
- From dbd46e14ea480a4a87a9b632beba7ac159c319ca Mon Sep 17 00:00:00 2001 From: hsgh085 Date: Sat, 14 Sep 2024 04:13:53 +0900 Subject: [PATCH 7/9] =?UTF-8?q?style:=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/signup/useSignupForm.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/signup/useSignupForm.ts b/src/hooks/signup/useSignupForm.ts index 76250f0e..b8370002 100644 --- a/src/hooks/signup/useSignupForm.ts +++ b/src/hooks/signup/useSignupForm.ts @@ -56,7 +56,6 @@ export const useSignupForm = () => { }, }); } else { - // console.log(form); focus(e); } }; From ee5aa112dfa0549385df135496657e0c527e059c Mon Sep 17 00:00:00 2001 From: hsgh085 Date: Sat, 14 Sep 2024 04:39:11 +0900 Subject: [PATCH 8/9] =?UTF-8?q?fix:=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?= =?UTF-8?q?=EA=B2=80=EC=82=AC=20=EC=A6=89=EA=B0=81=EC=A0=81=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=8B=A4=ED=96=89=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/molecules/InputPw/InputPw.tsx | 6 ++++++ src/components/molecules/InputPwCheck/InputPwCheck.tsx | 6 ++++++ src/hooks/common/inputsUserInfo/useCheckNickname.ts | 4 ++-- src/hooks/common/inputsUserInfo/useCheckPassword.ts | 4 ++-- src/hooks/common/inputsUserInfo/useCheckPasswordCheck.ts | 4 ++-- 5 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/components/molecules/InputPw/InputPw.tsx b/src/components/molecules/InputPw/InputPw.tsx index df245f94..9f197125 100644 --- a/src/components/molecules/InputPw/InputPw.tsx +++ b/src/components/molecules/InputPw/InputPw.tsx @@ -16,6 +16,12 @@ const InputPw = ({ value, onChange, onSuccessChange }: InputPwProps) => { const { inputRef, isError, errorMessage, handleVerify } = useCheckPassword(value); + useEffect(() => { + if (isError) { + handleVerify(); + } + }, [value]); + useEffect(() => { if (value && onSuccessChange) { onSuccessChange('password', !isError); diff --git a/src/components/molecules/InputPwCheck/InputPwCheck.tsx b/src/components/molecules/InputPwCheck/InputPwCheck.tsx index 89ca65aa..f6b184cc 100644 --- a/src/components/molecules/InputPwCheck/InputPwCheck.tsx +++ b/src/components/molecules/InputPwCheck/InputPwCheck.tsx @@ -21,6 +21,12 @@ const InputPwCheck = ({ const { inputRef, isError, errorMessage, handleVerify } = useCheckPasswordCheck({ value, pw }); + useEffect(() => { + if (isError) { + handleVerify(); + } + }, [value]); + useEffect(() => { if (value && onSuccessChange) { onSuccessChange('passwordCheck', !isError); diff --git a/src/hooks/common/inputsUserInfo/useCheckNickname.ts b/src/hooks/common/inputsUserInfo/useCheckNickname.ts index 65fee43f..5f8bd244 100644 --- a/src/hooks/common/inputsUserInfo/useCheckNickname.ts +++ b/src/hooks/common/inputsUserInfo/useCheckNickname.ts @@ -1,10 +1,10 @@ import { AxiosErrorResponse } from '@/api/interceptor'; import { getNicknameVerify } from '@/api/member'; import { HTTP_STATUS_CODE } from '@/constants/api'; +import { ERROR, SUCCESS } from '@/constants/message'; +import { isEmptyString } from '@/utils/validator'; import { useMutation } from '@tanstack/react-query'; import { useRef, useState } from 'react'; -import { ERROR, SUCCESS } from '../../../constants/message'; -import { isEmptyString } from '../../../utils/validator'; export const useCheckNickname = (value: string) => { const inputRef = useRef(null); diff --git a/src/hooks/common/inputsUserInfo/useCheckPassword.ts b/src/hooks/common/inputsUserInfo/useCheckPassword.ts index f91e8959..52f43ce7 100644 --- a/src/hooks/common/inputsUserInfo/useCheckPassword.ts +++ b/src/hooks/common/inputsUserInfo/useCheckPassword.ts @@ -1,7 +1,7 @@ import { INPUT_LIMIT } from '@/constants/input'; +import { ERROR } from '@/constants/message'; +import { isEmptyString } from '@/utils/validator'; import { useRef, useState } from 'react'; -import { ERROR } from '../../../constants/message'; -import { isEmptyString } from '../../../utils/validator'; export const useCheckPassword = (value: string) => { const inputRef = useRef(null); diff --git a/src/hooks/common/inputsUserInfo/useCheckPasswordCheck.ts b/src/hooks/common/inputsUserInfo/useCheckPasswordCheck.ts index fc4f0fe2..af402b41 100644 --- a/src/hooks/common/inputsUserInfo/useCheckPasswordCheck.ts +++ b/src/hooks/common/inputsUserInfo/useCheckPasswordCheck.ts @@ -1,6 +1,6 @@ +import { ERROR } from '@/constants/message'; +import { isEmptyString } from '@/utils/validator'; import { useRef, useState } from 'react'; -import { isEmptyString } from '../../../utils/validator'; -import { ERROR } from '../../../constants/message'; interface CheckPwChkProps { value: string; From e60897eb230885345be6e2023ca2db8e462e21ae Mon Sep 17 00:00:00 2001 From: hsgh085 Date: Wed, 18 Sep 2024 20:56:35 +0900 Subject: [PATCH 9/9] =?UTF-8?q?refactor:=20=EA=B8=B0=EC=A1=B4=20=ED=94=84?= =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20handling=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20-=20useCallback=EC=82=AC=EC=9A=A9,=20?= =?UTF-8?q?=EA=B0=9D=EC=B2=B4=20=EB=A7=A4=ED=95=91=20=EB=B0=A9=EC=8B=9D?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../inputsUserInfo/useCheckProfileImage.ts | 47 ++++++++----------- 1 file changed, 20 insertions(+), 27 deletions(-) diff --git a/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts b/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts index b1cdebc4..f1937d97 100644 --- a/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts +++ b/src/hooks/common/inputsUserInfo/useCheckProfileImage.ts @@ -51,33 +51,26 @@ export const useCheckProfileImage = ({ maxSize: 3145728, // 3MB }); - const handleDefaultImage = (src: string) => { - let profileImgUrl = ''; - switch (src) { - case DEFAULT_PROFILE_URL.OCTOPUS.CLIENT: - profileImgUrl = DEFAULT_PROFILE_URL.OCTOPUS.SERVER; - break; - case DEFAULT_PROFILE_URL.JELLYFISH.CLIENT: - profileImgUrl = DEFAULT_PROFILE_URL.JELLYFISH.SERVER; - break; - case DEFAULT_PROFILE_URL.RAY.CLIENT: - profileImgUrl = DEFAULT_PROFILE_URL.RAY.SERVER; - break; - case DEFAULT_PROFILE_URL.EEL.CLIENT: - profileImgUrl = DEFAULT_PROFILE_URL.EEL.SERVER; - break; - case DEFAULT_PROFILE_URL.TURTLE.CLIENT: - profileImgUrl = DEFAULT_PROFILE_URL.TURTLE.SERVER; - break; - case DEFAULT_PROFILE_URL.RABBIT.CLIENT: - profileImgUrl = DEFAULT_PROFILE_URL.RABBIT.SERVER; - break; - default: - break; - } - setImageSrc(src); - setProfilePhoto('profileImgUrl', profileImgUrl); - }; + const handleDefaultImage = useCallback( + (src: string) => { + const defaultProfileUrlMapping: { [key: string]: string } = { + [DEFAULT_PROFILE_URL.OCTOPUS.CLIENT]: + DEFAULT_PROFILE_URL.OCTOPUS.SERVER, + [DEFAULT_PROFILE_URL.JELLYFISH.CLIENT]: + DEFAULT_PROFILE_URL.JELLYFISH.SERVER, + [DEFAULT_PROFILE_URL.RAY.CLIENT]: DEFAULT_PROFILE_URL.RAY.SERVER, + [DEFAULT_PROFILE_URL.EEL.CLIENT]: DEFAULT_PROFILE_URL.EEL.SERVER, + [DEFAULT_PROFILE_URL.TURTLE.CLIENT]: DEFAULT_PROFILE_URL.TURTLE.SERVER, + [DEFAULT_PROFILE_URL.RABBIT.CLIENT]: DEFAULT_PROFILE_URL.RABBIT.SERVER, + }; + + const profileImgUrl = defaultProfileUrlMapping[src] || ''; + + setImageSrc(src); + setProfilePhoto('profileImgUrl', profileImgUrl); + }, + [setImageSrc, setProfilePhoto], + ); return { imageSrc, isError, getRootProps, handleDefaultImage }; };