- 
+ 
- 이현우
+ {userInfo.data && userInfo.data.name}
인플루언서
-
- 기본 정보
-
- 아이디
- Suppin2024
-
-
- 휴대폰
- 010-1234-5678
-
-
- 이메일
- suppin2024@naver.com
-
-
+ {/* TODO: 스켈레톤 컴포넌트 추가 */}
+ {content}
비밀번호 변경하기
- 회원 탈퇴하기
+
+ {isDeleting ? '탈퇴 중...' : '회원 탈퇴하기'}
+
+ {/* */}
버전 정보
@@ -54,7 +68,6 @@ const Container1 = styled.div`
const SubContainer = styled.div`
display: flex;
- /* justify-content: flex-start; */
align-items: flex-start;
flex-direction: column;
margin-left: 15px;
@@ -79,45 +92,24 @@ const Type = styled.div`
const Container2 = styled.div`
padding: 0px 20px;
`;
-const Information = styled.div`
- ${body1Style}
- color: ${COLORS.Gray1};
- border-bottom: 1px solid ${COLORS.Gray5};
- padding: 30px 0px 30px 0px;
-`;
-
-const BasicInfo = styled.div`
- margin-bottom: 20px;
-`;
-
-const InfoContainer = styled.div`
- display: flex;
- gap: 27px;
-
- a {
- text-decoration: none; /* 밑줄 제거 */
- }
-`;
-const Info = styled.p`
- ${body1Style}
- color: ${COLORS.Gray2};
-`;
-const Id = styled.a`
- color: ${COLORS.Gray2};
- text-decoration: none;
-`;
const Change = styled.div`
padding: 20px 0px;
border-bottom: 1px solid ${COLORS.Gray5};
${body1Style}
color: ${COLORS.Gray1};
`;
-const Leave = styled.div`
+const Leave = styled.button`
padding: 20px 0px;
- /* border-bottom: 1px solid ${COLORS.Gray5}; */
+ border: none;
+ background: none;
+ cursor: pointer;
${body1Style}
color: ${COLORS.Gray1};
+ &:disabled {
+ color: ${COLORS.Gray4};
+ cursor: not-allowed;
+ }
`;
const VersionContainer = styled.div`
border-bottom: 4px solid ${COLORS.Gray6};
diff --git a/web/src/services/apis/user.service.ts b/web/src/services/apis/user.service.ts
index 1dc1a1e..2b413e3 100644
--- a/web/src/services/apis/user.service.ts
+++ b/web/src/services/apis/user.service.ts
@@ -1,7 +1,8 @@
-import { SigninType, SignupType } from '@/lib/schema/auth.schema';
+import { SigninType, SignupPayload } from '@/lib/schema/auth.schema';
import { axiosInstance } from '@/services/axios-instance';
+import { UserResponse } from '@/types/user';
-export const signup = async (payload: SignupType) => {
+export const signup = async (payload: SignupPayload) => {
const { data } = await axiosInstance.post('/members/join', payload);
return data;
};
@@ -33,9 +34,26 @@ export const signin = async (payload: SigninType) => {
return data;
};
+// 아이디 중복 확인 (sign-up3.tsx)
export const checkUserId = async (userId: string) => {
const { data } = await axiosInstance.get('/members/checkUserId', {
params: { userId },
});
return data;
};
+
+// 회원정보 상세 조회
+export const getUserInfo = async (): Promise
=> {
+ const { data } = await axiosInstance.get('/members/me');
+ return data;
+};
+
+// 회원탈퇴
+export const deleteUser = async () => {
+ const { data } = await axiosInstance.delete('/members/delete', {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem('token')}`,
+ },
+ });
+ return data;
+};
diff --git a/web/src/services/axios-instance.ts b/web/src/services/axios-instance.ts
index 8cf8c5b..6c7f5e9 100644
--- a/web/src/services/axios-instance.ts
+++ b/web/src/services/axios-instance.ts
@@ -7,6 +7,7 @@ export const axiosInstance = axios.create({
axiosInstance.interceptors.request.use(
config => {
+ config.headers.Authorization = `Bearer ${window.localStorage.getItem('token')}`;
return config;
},
error => {
@@ -17,6 +18,9 @@ axiosInstance.interceptors.request.use(
axiosInstance.interceptors.response.use(
response => {
+ if (response.config.url === '/members/login') {
+ window.localStorage.setItem('token', response.data.data.token);
+ }
return response;
},
error => {
diff --git a/web/src/services/queries/user.mutation.ts b/web/src/services/queries/user.mutation.ts
index 3e5c508..63d3b45 100644
--- a/web/src/services/queries/user.mutation.ts
+++ b/web/src/services/queries/user.mutation.ts
@@ -1,6 +1,7 @@
import { SigninType, SignupType } from '@/lib/schema/auth.schema';
-import { signin, signup } from '@/services/apis/user.service';
+import { deleteUser, signin, signup } from '@/services/apis/user.service';
import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';
export const useSignup = () => {
@@ -37,9 +38,14 @@ export const useSignin = () => {
}
toast.error('로그인 중 오류가 발생했습니다, 다시 시도해주세요');
},
- // onSuccess: () => {
- // console.log('로그인 성공');
- // },
+ // 로그인 성공 시 token 저장 및 콘솔 출력
+ onSuccess: data => {
+ console.log(data); // 로그인 성공 시 응답 콘솔 출력
+ if (data && data.data && data.data.token) {
+ localStorage.setItem('token', data.data.token); // token을 로컬스토리지에 저장
+ }
+ // toast.success('로그인이 정상처리 되었습니다.');
+ },
});
return {
@@ -47,3 +53,27 @@ export const useSignin = () => {
isSigninLoading,
};
};
+
+export const useDeleteUser = () => {
+ const navigate = useNavigate();
+
+ const { mutateAsync: deleteUserAccount, isPending: isDeleting } = useMutation(
+ {
+ mutationFn: async () => await deleteUser(),
+ onError: error => {
+ console.error('회원 탈퇴 에러:', error);
+ toast.error('회원 탈퇴 중 오류가 발생했습니다, 다시 시도해주세요');
+ },
+ onSuccess: () => {
+ toast.success('회원 탈퇴가 완료되었습니다.');
+ localStorage.removeItem('token');
+ navigate('/auth?authType=in');
+ },
+ }
+ );
+
+ return {
+ deleteUserAccount,
+ isDeleting,
+ };
+};
diff --git a/web/src/services/queries/user.queries.ts b/web/src/services/queries/user.queries.ts
index e69de29..a8afb74 100644
--- a/web/src/services/queries/user.queries.ts
+++ b/web/src/services/queries/user.queries.ts
@@ -0,0 +1,15 @@
+import { queries } from '@/lib/query-keys';
+import { getUserInfo } from '@/services/apis/user.service';
+import { useQuery } from '@tanstack/react-query';
+
+export const useUserInfo = () => {
+ const userInfo = useQuery({
+ queryKey: queries.user.DEFAULT,
+ queryFn: getUserInfo,
+ select: data => data.data,
+ });
+
+ return {
+ userInfo,
+ };
+};
diff --git a/web/src/types/user.ts b/web/src/types/user.ts
index e69de29..9f9d3d0 100644
--- a/web/src/types/user.ts
+++ b/web/src/types/user.ts
@@ -0,0 +1,19 @@
+export type UserResponse = {
+ code: string;
+ message: string;
+ data: {
+ userId: string;
+ name: string;
+ email: string;
+ phoneNumber: string;
+ createdAt: string;
+ };
+};
+
+export type UserInfoType = {
+ userId: string;
+ name: string;
+ email: string;
+ phoneNumber: string;
+ createdAt: string;
+};