자동 PR: feature-km-my-page-edit-profile → dev

src/features/user/components/account-settings-dialog.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
@@ -16,7 +15,7 @@ import { ChangePasswordForm } from './account-settings/change-password-form';
  * 계정 설정 모달 컴포넌트
  *
  * 계정 설정 모달에서 비밀번호를 변경할 수 있다.
- * 
+ *
  * @returns 계정 설정 모달 컴포넌트
  */
 export const AccountSettingsDialog = () => {
@@ -28,22 +27,25 @@ export const AccountSettingsDialog = () => {
 
   return (
     <>
-        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogTrigger asChild>
-            <Button variant="outline" type="button">
-              계정 설정
-            </Button>
-          </DialogTrigger>
-          <DialogContent className="sm:max-w-[425px]">
-            <DialogHeader>
-              <DialogTitle>계정 설정</DialogTitle>
-              <DialogDescription>
-                비밀번호를 변경할 수 있습니다.
-              </DialogDescription>
-            </DialogHeader>
-            <div className="flex flex-col divide-y-1 divide-gray-200">
-              <ChangePasswordForm closeDialog={closeDialog} />
-            </div>
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogTrigger asChild>
+          <button
+            type="button"
+            className="inline-flex items-center gap-x-1 text-sm font-medium text-gray-500 cursor-pointer"
+          >
+            계정 설정
+          </button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>계정 설정</DialogTitle>
+            <DialogDescription>
+              비밀번호를 변경할 수 있습니다.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex flex-col divide-y-1 divide-gray-200">
+            <ChangePasswordForm closeDialog={closeDialog} />
+          </div>
         </DialogContent>
       </Dialog>
     </>

src/features/user/components/account-settings/change-password-form.tsx

@@ -14,7 +14,7 @@ const schema = z.object({
       message:
         '영어 대/소문자, 숫자, 특수문자를 혼합하여 8자리 이상 입력해주세요.',
     }),
-  confirmPassword: z
+  currentPassword: z
     .string()
     .nonempty({ message: '기존 비밀번호를 입력해주세요' }),
 });
@@ -36,7 +36,7 @@ export const ChangePasswordForm = ({
     resolver: zodResolver(schema),
     defaultValues: {
       newPassword: '',
-      confirmPassword: '',
+      currentPassword: '',
     },
   });
 
@@ -46,7 +46,7 @@ export const ChangePasswordForm = ({
     try {
       await changePassword({
         newPassword: data.newPassword,
-        confirmPassword: data.confirmPassword,
+        currentPassword: data.currentPassword,
       });
       closeDialog();
     } catch (error) {
@@ -62,7 +62,7 @@ export const ChangePasswordForm = ({
       >
         <InputTextField
           label="기존 비밀번호"
-          name="confirmPassword"
+          name="currentPassword"
           form={formMethods}
           type="password"
         />

src/features/user/components/current-user-profile.tsx

@@ -4,9 +4,10 @@ import { Avatar } from '@/components/atoms/avatar';
 import useAuthStore from '@/stores/useAuthStore';
 import { getSkill } from '@/types/enums';
 import { EditUserProfileDialog } from '@/features/user/components/edit-user-profile-dialog';
-// import { AccountSettingsDialog } from '@/features/user/components/account-settings-dialog';
-// import { WithdrawDialog } from '@/features/user/components/withdraw-dialog';
+import { AccountSettingsDialog } from '@/features/user/components/account-settings-dialog';
+import { WithdrawDialog } from '@/features/user/components/withdraw-dialog';
 import { getDisplayNickname, getDisplayProfileImage } from '@/utils/fallback';
+import { Separator } from '@/components/ui/separator';
 
 /**
  * 현재 로그인 한 유저의 프로필 컴포넌트
@@ -37,7 +38,7 @@ export const CurrentUserProfile = () => {
           <EditUserProfileDialog />
         </div>
         <div className="flex flex-col gap-y-9 mt-4 flex-1 min-w-0">
-          <div className='h-[28px] flex items-center'>
+          <div className="h-[28px] flex items-center">
             <span className="font-semibold">
               {getDisplayNickname(nickname, email)}
             </span>
@@ -68,6 +69,11 @@ export const CurrentUserProfile = () => {
                 {email}
               </span>
             </div>
+            <div className="flex gap-x-1.5 justify-end mr-3">
+              <AccountSettingsDialog />
+              <Separator orientation="vertical" />
+              <WithdrawDialog />
+            </div>
           </div>
         </div>
       </div>

src/features/user/components/withdraw-dialog.tsx

@@ -3,7 +3,6 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
-import { Button } from '@/components/ui/button';
 import {
   AlertDialog,
   AlertDialogTrigger,
@@ -51,9 +50,9 @@ export const WithdrawDialog = () => {
     <>
       <AlertDialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <AlertDialogTrigger asChild>
-          <Button variant="destructive" type="button">
+          <button type="button" className="text-sm font-medium cursor-pointer text-gray-500 underline underline-offset-3">
             회원 탈퇴
-          </Button>
+          </button>
         </AlertDialogTrigger>
         <AlertDialogContent>
           <AlertDialogHeader>
@@ -63,7 +62,7 @@ export const WithdrawDialog = () => {
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
-            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogCancel className='border-gray-300 text-gray-600'>취소</AlertDialogCancel>
             <AlertDialogAction onClick={withdrawButtonClickHandler}>
               탈퇴
             </AlertDialogAction>

src/features/user/hooks/useChangePassword.ts

@@ -9,18 +9,24 @@ export const useChangePassword = () => {
   return useMutation({
     mutationFn: ({
       newPassword,
-      confirmPassword,
+      currentPassword,
     }: {
       newPassword: string;
-      confirmPassword: string;
+      currentPassword: string;
     }) => {
-      const formData = new FormData();
-      formData.append('newPassword', newPassword);
-      formData.append('confirmPassword', confirmPassword);
-
-      return request.patch('/v1/user/edit', {}, formData, {
-        credentials: 'include',
-      });
+      return request.patch(
+        '/v1/user/password-change',
+        {
+          'Content-Type': 'application/json',
+        },
+        {
+          newPassword,
+          confirmPassword: currentPassword,
+        },
+        {
+          credentials: 'include',
+        },
+      );
     },
     onSuccess() {
       toast.success('비밀번호 변경 성공', {