Merge pull request #72 from boostcampwm-2024/feature-fe-#71

삭제 모달 UI 개선, 새 페이지 작성 버튼 색상 변경

Author: yewonJin

frontend/public/warning-icon.png

@@ -10,10 +10,7 @@ export default function Button({ className, onClick, children }: ButtonProps) {
   return (
     <button
       onClick={onClick}
-      className={cn(
-        "rounded-md px-6 py-2 shadow-md transition-colors",
-        className,
-      )}
+      className={cn("rounded-md px-8 py-2 transition-colors", className)}
     >
       {children}
     </button>

frontend/src/components/commons/button/index.tsx

@@ -9,14 +9,22 @@ function DialogTitle({ children }: DialogTitleProps) {
   return <h2 className="text-lg font-semibold">{children}</h2>;
 }
 
+interface DialogDescriptionProps {
+  children: React.ReactNode;
+}
+
+function DialogDescription({ children }: DialogDescriptionProps) {
+  return <div className="text-neutral-500">{children}</div>;
+}
+
 interface DialogCloseButtonProps {
   onCloseModal: () => void;
 }
 
 function DialogCloseButton({ onCloseModal }: DialogCloseButtonProps) {
   return (
     <button
-      className="absolute right-4 top-4 text-neutral-400 transition-colors hover:text-neutral-700"
+      className="absolute right-3 top-3 text-neutral-400 transition-colors hover:text-neutral-700"
       onClick={onCloseModal}
     >
       <X width={16} height={16} />
@@ -49,7 +57,7 @@ function DialogMain({ isOpen, onCloseModal, children }: DialogMainProps) {
 
   return (
     <dialog
-      className="rounded-xl"
+      className="w-80 rounded-xl"
       open={isOpen}
       ref={dialogRef}
       onClick={() => {
@@ -58,7 +66,7 @@ function DialogMain({ isOpen, onCloseModal, children }: DialogMainProps) {
       }}
     >
       <div
-        className="flex flex-col gap-4 px-12 py-10"
+        className="flex flex-col gap-2 p-8"
         onClick={(e) => e.stopPropagation()}
       >
         {children}
@@ -69,5 +77,6 @@ function DialogMain({ isOpen, onCloseModal, children }: DialogMainProps) {
 
 export const Dialog = Object.assign(DialogMain, {
   Title: DialogTitle,
+  Description: DialogDescription,
   CloseButton: DialogCloseButton,
 });

frontend/src/components/commons/dialog/index.tsx

@@ -34,7 +34,7 @@ export default function NoteList({ className }: NoteListProps) {
         <button
           onClick={() => handleNoteClick(id)}
           key={id}
-          className="group flex flex-row justify-between rounded-sm px-2 py-1 hover:bg-neutral-100"
+          className="group flex flex-row justify-between rounded-sm px-3 py-1 hover:bg-neutral-100"
         >
           <div className="flex flex-row gap-1">
             <div>{title}</div>

frontend/src/components/sidebar/NoteList.tsx

@@ -1,5 +1,6 @@
 import Button from "../commons/button";
 import { Dialog } from "../commons/dialog";
+import WarningIcon from "@/../public/warning-icon.png";
 
 type RemoveNoteModalProps = {
   isOpen: boolean;
@@ -14,22 +15,28 @@ export default function RemoveNoteModal({
 }: RemoveNoteModalProps) {
   return (
     <Dialog isOpen={isOpen} onCloseModal={onCloseModal}>
-      <Dialog.Title>페이지를 삭제하시겠습니까?</Dialog.Title>
-      <Dialog.CloseButton onCloseModal={onCloseModal} />
-      <div className="flex flex-row justify-center gap-2">
-        <Button
-          className="bg-red-500 text-neutral-200 hover:bg-red-600"
-          onClick={onConfirm}
-        >
-          삭제
-        </Button>
-        <Button
-          className="text-neutral-700 hover:bg-neutral-100"
-          onClick={onCloseModal}
-        >
-          취소
-        </Button>
+      <div className="flex flex-col items-center gap-4">
+        <div className="flex flex-col items-center gap-1.5">
+          <img src={WarningIcon} alt="warning" className="h-16 w-16" />
+          <Dialog.Title>페이지 삭제</Dialog.Title>
+          <Dialog.Description>정말 삭제하시겠습니까?</Dialog.Description>
+        </div>
+        <div className="flex w-full flex-row justify-between gap-2">
+          <Button
+            className="w-full rounded-lg bg-[#fd5b56] text-neutral-100 hover:bg-red-500"
+            onClick={onConfirm}
+          >
+            삭제
+          </Button>
+          <Button
+            className="w-full rounded-lg bg-[#f4f4f5] text-neutral-700 hover:bg-neutral-200"
+            onClick={onCloseModal}
+          >
+            취소
+          </Button>
+        </div>
       </div>
+      <Dialog.CloseButton onCloseModal={onCloseModal} />
     </Dialog>
   );
 }

frontend/src/components/sidebar/RemoveNoteModal.tsx

@@ -24,7 +24,7 @@ export default function Tools() {
             content: [
               {
                 type: "paragraph",
-                content: [{ type: "text", text: "This is page 1" }],
+                content: [{ type: "text", text: "" }],
               },
             ],
           },
@@ -35,9 +35,9 @@ export default function Tools() {
       }}
     >
       <div>
-        <PencilLine width={20} height={20} widths={1} />
+        <PencilLine width={20} height={20} widths={1} color="#7f796d" />
       </div>
-      <div>새 페이지 작성</div>
+      <div className="text-neutral-600">새 페이지 작성</div>
     </button>
   );
 }