-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
297 additions
and
59 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| "use client"; | ||
|
|
||
| import useConfirmModal from "@/hooks/modal/use-confirm-modal"; | ||
| import { useRouter } from "next/navigation"; | ||
| import { CustomModal } from "./custom-modal"; | ||
| import ModalTitle from "./modal-title"; | ||
| import { IconAlertSquareRounded } from "@tabler/icons-react"; | ||
| import { Checkbox } from "../ui/checkbox"; | ||
| import { useState } from "react"; | ||
| import { deleteProfile } from "@/services/profileService"; | ||
| import { toast } from "sonner"; | ||
| import axios from "axios"; | ||
|
|
||
| const ConfirmModal = () => { | ||
| const [loading, setLoading] = useState(false); | ||
| const [checked, setChecked] = useState(false); | ||
|
|
||
| const router = useRouter(); | ||
| const confirmModal = useConfirmModal(); | ||
|
|
||
| const onChange = (open: boolean) => { | ||
| if (!open) { | ||
| confirmModal.onClose(); | ||
| } | ||
| }; | ||
|
|
||
| const handleDelete = async () => { | ||
| if (!confirmModal.uuid) { | ||
| toast.error("프로필을 찾을 수 없습니다."); | ||
| return; | ||
| } | ||
|
|
||
| try { | ||
| setLoading(true); | ||
|
|
||
| const uuid = confirmModal.uuid; | ||
| const response = await deleteProfile(uuid); | ||
|
|
||
| if (!response) { | ||
| throw new Error( | ||
| `이미지 수정에 실패했습니다. 상태 코드: ${response.status}` | ||
| ); | ||
| } | ||
|
|
||
| toast.success("프로필이 삭제되었습니다."); | ||
| confirmModal.onClose(); | ||
| router.refresh(); | ||
| } catch (error) { | ||
| if (axios.isAxiosError(error)) { | ||
| console.error("서버 응답:", error.response); | ||
| toast.error( | ||
| error.response?.data?.message || | ||
| error.response?.data?.detail || | ||
| "프로필 수정 중 오류가 발생했습니다." | ||
| ); | ||
| } else { | ||
| console.error("에러 상세:", error); | ||
| toast.error("프로필 수정 과정에서 오류가 발생했습니다."); | ||
| } | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <CustomModal | ||
| title={ | ||
| <ModalTitle | ||
| icon={<IconAlertSquareRounded className="size-10 p-1" />} | ||
| title="경고" | ||
| /> | ||
| } | ||
| description="이 작업은 되돌릴 수 없습니다. 계속하시겠습니까?" | ||
| isOpen={confirmModal.isOpen} | ||
| onChange={onChange} | ||
| className="p-4 flex flex-col items-center justify-center h-[50%]" | ||
| > | ||
| <div className="flex flex-col items-center justify-center w-full h-full"> | ||
| <div className="flex w-full items-center space-x-2"> | ||
| <Checkbox | ||
| id="check" | ||
| checked={checked} | ||
| onCheckedChange={() => setChecked} | ||
| /> | ||
| <label | ||
| htmlFor="check" | ||
| className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" | ||
| > | ||
| 주의사항을 확인하였으며, 삭제에 동의합니다. | ||
| </label> | ||
| </div> | ||
|
|
||
| <div className="flex items-center justify-around w-full pt-10"> | ||
| <button | ||
| 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="p-[3px] relative" | ||
| onClick={handleDelete} | ||
| disabled={!checked || 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-70"> | ||
| 삭제 | ||
| </div> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </CustomModal> | ||
| ); | ||
| }; | ||
|
|
||
| export default ConfirmModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| "use client" | ||
|
|
||
| import * as React from "react" | ||
| import * as CheckboxPrimitive from "@radix-ui/react-checkbox" | ||
| import { cn } from "@/lib/utils" | ||
| import { CheckIcon } from "@radix-ui/react-icons" | ||
|
|
||
| const Checkbox = React.forwardRef< | ||
| React.ElementRef<typeof CheckboxPrimitive.Root>, | ||
| React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> | ||
| >(({ className, ...props }, ref) => ( | ||
| <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", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| <CheckboxPrimitive.Indicator | ||
| className={cn("flex items-center justify-center text-current")} | ||
| > | ||
| <CheckIcon className="h-4 w-4" /> | ||
| </CheckboxPrimitive.Indicator> | ||
| </CheckboxPrimitive.Root> | ||
| )) | ||
| Checkbox.displayName = CheckboxPrimitive.Root.displayName | ||
|
|
||
| export { Checkbox } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.