From 35112a216616b978639054fbed2e119370cab500 Mon Sep 17 00:00:00 2001
From: choi <cejewe@naver.com>
Date: Mon, 23 Dec 2024 22:47:56 +0900
Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/user/[userId]/page.tsx         |  4 +--
 src/components/modal/confirm-modal.tsx | 40 ++++++++++++++------------
 src/components/ui/checkbox.tsx         |  2 +-
 src/services/profileService.ts         |  2 +-
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/app/user/[userId]/page.tsx b/src/app/user/[userId]/page.tsx
index 6e2744e..166e083 100644
--- a/src/app/user/[userId]/page.tsx
+++ b/src/app/user/[userId]/page.tsx
@@ -105,12 +105,12 @@ export default function UserPage() {
                     <DropdownMenuTrigger asChild>
                       <IconDotsVertical className="size-6 hover:opacity-75" />
                     </DropdownMenuTrigger>
-                    <DropdownMenuContent className="w-20 items-center justify-center flex flex-col">
+                    <DropdownMenuContent className="w-20 items-center justify-start flex flex-col">
                       <DropdownMenuItem onClick={profileEditModal.onOpen}>
                         프로필 편집
                       </DropdownMenuItem>
                       <DropdownMenuItem
-                        className="text-red-500"
+                        className="text-red-500 focus:text-red-300"
                         onClick={() => handleConfirm(profileData?.uuid || "")}
                       >
                         프로필 삭제
diff --git a/src/components/modal/confirm-modal.tsx b/src/components/modal/confirm-modal.tsx
index c036e33..c7142b3 100644
--- a/src/components/modal/confirm-modal.tsx
+++ b/src/components/modal/confirm-modal.tsx
@@ -35,7 +35,9 @@ const ConfirmModal = () => {
       const uuid = confirmModal.uuid;
       const response = await deleteProfile(uuid);
 
-      if (!response?.data) {
+      console.log(response);
+
+      if (!response) {
         throw new Error("프로필 삭제에 실패했습니다.");
       }
 
@@ -48,11 +50,11 @@ const ConfirmModal = () => {
         toast.error(
           error.response?.data?.message ||
             error.response?.data?.detail ||
-            "프로필 삭제 중 오류가 발생했습니다."
+            "프로필 수정 중 오류가 발생했습니다."
         );
       } else {
         console.error("에러 상세:", error);
-        toast.error("프로필 삭제 과정에서 오류가 발생했습니다.");
+        toast.error("프로필 수정 과정에서 오류가 발생했습니다.");
       }
     } finally {
       setLoading(false);
@@ -63,47 +65,49 @@ const ConfirmModal = () => {
     <CustomModal
       title={
         <ModalTitle
-          icon={<IconAlertSquareRounded className="size-10 text-red-500" />}
-          title="프로필 삭제"
+          icon={<IconAlertSquareRounded className="size-10 p-1" />}
+          title="경고"
         />
       }
-      description="이 작업은 되돌릴 수 없습니다. 삭제된 프로필은 복구할 수 없습니다."
+      description="이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?"
       isOpen={confirmModal.isOpen}
       onChange={onChange}
-      className="p-6 flex flex-col items-center justify-center max-w-md mx-auto"
+      className="p-4 flex flex-col items-center justify-center h-[50%]"
     >
-      <div className="flex flex-col items-center justify-center w-full space-y-6">
-        <div className="flex w-full items-start space-x-3">
+      <div className="flex flex-col items-center justify-center w-full">
+        <div className="flex w-full items-center justify-center space-x-3">
           <Checkbox
             id="check"
             checked={checked}
             onCheckedChange={() => setChecked(!checked)}
             disabled={loading}
-            className="mt-1"
           />
           <label
             htmlFor="check"
-            className="text-sm leading-relaxed cursor-pointer select-none"
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
           >
-            주의사항을 확인하였으며, 프로필 삭제에 동의합니다. 이 작업은 취소할
-            수 없습니다.
+            주의사항을 확인하였으며, 삭제에 동의합니다.
           </label>
         </div>
 
-        <div className="flex items-center justify-end w-full space-x-4">
+        <div className="flex items-center justify-around w-full pt-20">
           <button
-            className="px-6 py-2 rounded-lg bg-gray-200 hover:bg-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-gray-800"
+            className="p-[3px] relative"
             onClick={confirmModal.onClose}
             disabled={loading}
           >
-            취소
+            <div className="px-8 py-2 bg-white rounded-xl relative group text-black hover:bg-neutral-100 text-sm dark:bg-black/95 dark:text-white dark:hover:bg-neutral-800">
+              이전
+            </div>
           </button>
           <button
-            className="px-6 py-2 rounded-lg bg-red-500 hover:bg-red-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-white"
+            className="p-[3px] relative"
             onClick={handleDelete}
             disabled={!checked || loading}
           >
-            {loading ? "삭제 중..." : "삭제"}
+            <div className="px-8 py-2  bg-[#FF3F8F] rounded-xl relative group transition duration-200 text-white hover:bg-opacity-75 text-sm disabled:cursor-not-allowed disabled:opacity-50">
+              삭제
+            </div>
           </button>
         </div>
       </div>
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index f941ea7..936cf4f 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-neutral-200 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 dark:border-neutral-800 dark:focus-visible:ring-neutral-300 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
+      "peer h-4 w-4 shrink-0 rounded-sm border dark:border-neutral-200 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=checked]:text-neutral-50 border-neutral-800 dark:focus-visible:ring-neutral-300 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=checked]:text-neutral-900",
       className
     )}
     {...props}
diff --git a/src/services/profileService.ts b/src/services/profileService.ts
index b9cbe23..32d50a4 100644
--- a/src/services/profileService.ts
+++ b/src/services/profileService.ts
@@ -38,7 +38,7 @@ export const deleteProfile = async (uuid: string) => {
     const response = await api.delete(`/profile/${uuid}`);
 
     if (response.status >= 200 && response.status < 300) {
-      return response.data;
+      return response.status;
     }
 
     return null;