feat: 회원가입 api 연결 및 동작 처리 구현

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<MemberForm, 'email' | 'verificationCode'>,
 ) => {
-  const { data } = await axiosInstance.post<string>(
+  const { data } = await axiosInstance.post<ServerResponse>(
     `${END_POINT.EMAIL_VERIFY}`,
     value,
   );
@@ -14,15 +15,15 @@ export const postEmailVerify = async (
 };
 
 export const postEmailRequest = async (email: string) => {
-  const { data } = await axiosInstance.post<string>(
+  const { data } = await axiosInstance.post<ServerResponse>(
     `${END_POINT.EMAIL_REQUEST}`,
     email,
   );
   return data;
 };
 
 export const getFindPw = async (email: string) => {
-  const { data } = await axiosInstance.post<string>(
+  const { data } = await axiosInstance.post<ServerResponse>(
     `${END_POINT.FIND_PW}`,
     email,
   );

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<Member[]> => {
-  const response = await fetch(`${URL}/members`);
-  const result = (await response.json()) as Member[];
-  return result;
-};
-
-export const fetchMember = async (memberId: number): Promise<Member> => {
-  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<Member>(
     `${END_POINT.MEMBER(memberId)}`,
@@ -31,9 +18,9 @@ export const getMemberProfile = async (memberId: number) => {
 };
 
 export const postMember = async (
-  form: Pick<MemberForm, 'nickname' | 'email' | 'password'>,
+  form: Pick<MemberForm, 'nickname' | 'email' | 'password' | 'role'>,
 ) => {
-  const { data } = await axiosInstance.post<string>(
+  const { data } = await axiosInstance.post<ServerResponse>(
     `${END_POINT.SIGN_UP}`,
     form,
   );
@@ -47,15 +34,15 @@ export const deleteMember = async (
     data: form,
   };
 
-  const { data } = await axiosInstance.delete<string>(
+  const { data } = await axiosInstance.delete<ServerResponse>(
     `${END_POINT.ALL_MEMBERS}`,
     params,
   );
   return data;
 };
 
 export const putMemberImage = async (profilePhoto: string) => {
-  const { data } = await axiosInstance.put<string>(
+  const { data } = await axiosInstance.put<ServerResponse>(
     `${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<string>(
+  const { data } = await axiosInstance.put<ServerResponse>(
     `${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<string>(
+  const { data } = await axiosInstance.put<ServerResponse>(
     `${END_POINT.MEMBER_PASSWORD}`,
     pw,
     {
@@ -96,22 +83,29 @@ export const putMemberPw = async (pw: string) => {
 export const postLogin = async (
   form: Pick<MemberForm, 'email' | 'password'>,
 ) => {
-  const { data } = await axiosInstance.post<string>(`${END_POINT.LOGIN}`, form);
+  const { data } = await axiosInstance.post<ServerResponse>(
+    `${END_POINT.LOGIN}`,
+    form,
+  );
   return data;
 };
 
 export const postLogout = async () => {
-  const { data } = await axiosInstance.post<string>(`${END_POINT.LOGOUT}`);
+  const { data } = await axiosInstance.post<ServerResponse>(
+    `${END_POINT.LOGOUT}`,
+  );
   return data;
 };
 
 export const getRefreshToken = async () => {
-  const { data } = await axiosInstance.get<string>(`${END_POINT.REFRESH}`);
+  const { data } = await axiosInstance.get<ServerResponse>(
+    `${END_POINT.REFRESH}`,
+  );
   return data;
 };
 
 export const getNicknameVerify = async (nickname: string) => {
-  const { data } = await axiosInstance.get<string>(
+  const { data } = await axiosInstance.get<ServerResponse>(
     `${END_POINT.NICKNAME_VERIFY}`,
     {
       params: {

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',
+});

src/components/molecules/InputProfileImage/InputProfileImage.tsx

@@ -1,11 +1,13 @@
-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,
 } from '@/hooks/common/inputsUserInfo/useCheckProfileImage';
+import React, { useState } from 'react';
+import DefaultProfileModal from '../DefaultProfileModal/DefaultProfileModal';
 import {
+  defaultProfileModalcenterStyling,
   profileDefaultText,
   profileImageSelectContainer,
   profileImageText,
@@ -18,10 +20,20 @@ const InputProfileImage = ({
 }: InputProfileImageProps) => {
   const { imageSrc, isError, getRootProps, handleDefaultImage } =
     useCheckProfileImage({ setProfilePhoto, imgSrc });
+
+  const [defaultProfileModalOpen, setDefaultProfileModalOpen] =
+    useState<boolean>(false);
+
+  const handleSelectDefaultImage = (selectedImage: string | null) => {
+    if (selectedImage) {
+      handleDefaultImage(selectedImage);
+    }
+    setDefaultProfileModalOpen(false);
+  };
   return (
     <div css={profileImageSelectContainer}>
       <Label>프로필 사진(선택)</Label>
-      <ProfileSignUp
+      <ProfileSetting
         isSetting={!!imageSrc}
         src={imageSrc}
         {...getRootProps()}
@@ -30,14 +42,21 @@ const InputProfileImage = ({
         <button
           type="button"
           css={profileDefaultText}
-          onClick={handleDefaultImage}
+          onClick={() => setDefaultProfileModalOpen(true)}
         >
           기본 이미지로 프로필 설정하기
         </button>
         <span css={profileImageText(isError)}>
           3MB 이하의 사진만 가능합니다.
         </span>
       </div>
+      <div css={defaultProfileModalcenterStyling}>
+        <DefaultProfileModal
+          isOpen={defaultProfileModalOpen}
+          onSelect={handleSelectDefaultImage}
+          onClose={() => setDefaultProfileModalOpen(false)}
+        />
+      </div>
     </div>
   );
 };

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);

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);

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',
+  },
+};

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);
     },

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<HTMLInputElement | null>(null);

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<HTMLInputElement | null>(null);

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<HTMLInputElement | null>(null);

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;