modal 공통기능 작업

src/components/TodoAdd.tsx

@@ -1,8 +1,8 @@
 import React, { useReducer, useState } from "react";
 import Textarea from "./common/Textarea";
 import Button from "./common/Button";
-import { listBox } from "../styles/todoList.css";
 import { useTodoStore } from "../utils/store";
+import { listBox } from "../styles/todoList.css";
 
 interface stateType {
   stateId: number;
@@ -14,12 +14,16 @@ const TodoAdd = ({ stateId, toggleAdd }: stateType) => {
   const [areaVal, setAreaVal] = useState("");
   const [addActive, setAddActive] = useState(false);
 
+  const cleanUpModal = () => {
+    increaseAddId();
+    setAreaVal("");
+    setAddActive(false);
+  };
+
   const addTodoItem = () => {
     if (addActive) {
       addTodo({ id: itemId, text: areaVal, stateId });
-      increaseAddId();
-      setAreaVal("");
-      setAddActive(false);
+      cleanUpModal();
     }
   };
 

src/components/Todolist.tsx

@@ -1,5 +1,6 @@
-import React, { useReducer, useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 import TodoAdd from "./TodoAdd";
+import { Modal } from "./modal/Modal";
 import { listBox } from "../styles/todoList.css";
 import { useTodoStore } from "../utils/store";
 
@@ -10,7 +11,17 @@ interface TodolistProps {
   }[];
 }
 
+interface TodoItem {
+  id: number;
+  text?: string;
+  stateId: number;
+}
+
 const Todolist = ({ defaultTitle }: TodolistProps) => {
+  const [contentModalOpen, setContentModalOpen] = useState(false);
+  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
+  const [contentState, setContentState] = useState<TodoItem | null>(null);
+  const [confirmState, setConfirmState] = useState<TodoItem | null>(null);
   const { todos, counts, removeTodo } = useTodoStore();
   const [visibleAdd, setVisibelAdd] = useState<{ [key: number]: boolean }>({});
 
@@ -27,23 +38,45 @@ const Todolist = ({ defaultTitle }: TodolistProps) => {
     });
   };
 
-  const removeTodoItem = (id: number, stateId: number) => {
-    const isConfirmed = window.confirm("선택하신 카드를 삭제하시겠습니까?");
-    if (isConfirmed) {
-      removeTodo({ id, stateId });
-    }
+  const removeTodoItem = (
+    event: React.MouseEvent<HTMLElement>,
+    id: number,
+    stateId: number
+  ) => {
+    event.stopPropagation();
+    setConfirmState({ id, stateId });
+    setConfirmModalOpen(true);
+  };
+
+  const contentEdit = (todoItem: TodoItem) => {
+    setContentState(todoItem);
+    setContentModalOpen(true);
+  };
+
+  const closeContentModal = () => {
+    setContentModalOpen(false);
+  };
+
+  const closeConfirmModal = () => {
+    setConfirmModalOpen(false);
   };
 
   const renderTodoItems = (state: string, itemId: number) => {
     if (itemId !== ["todo", "doing", "done"].indexOf(state)) return null;
     return (
       <div key={itemId}>
         {todos[state as "todo" | "doing" | "done"].map((todoItem) => (
-          <div key={todoItem.id} className={listBox.itemList}>
+          <div
+            key={todoItem.id}
+            className={listBox.itemList}
+            onDoubleClick={() => {
+              contentEdit(todoItem);
+            }}
+          >
             <pre className={listBox.itemText}>{todoItem.text}</pre>
             <button
               className={listBox.itemRemove}
-              onClick={() => removeTodoItem(todoItem.id, itemId)}
+              onClick={(event) => removeTodoItem(event, todoItem.id, itemId)}
             >
               삭제
             </button>
@@ -53,6 +86,34 @@ const Todolist = ({ defaultTitle }: TodolistProps) => {
     );
   };
 
+  const renderModal = (modalProps: TodoItem) => {
+    let template = "";
+    let title = "";
+    let isOpen = false;
+    let setIsOpen = () => {};
+
+    if (modalProps === contentState) {
+      template = "editContent";
+      title = "내용수정";
+      isOpen = contentModalOpen;
+      setIsOpen = closeContentModal;
+    } else if (modalProps === confirmState) {
+      template = "confirm";
+      isOpen = confirmModalOpen;
+      setIsOpen = closeConfirmModal;
+    }
+
+    return (
+      <Modal
+        openState={isOpen}
+        setIsOpen={setIsOpen}
+        template={template}
+        title={title}
+        todoContent={modalProps}
+      />
+    );
+  };
+
   return (
     <div className={listBox.list}>
       {defaultTitle.map((item) => (
@@ -82,6 +143,8 @@ const Todolist = ({ defaultTitle }: TodolistProps) => {
           </div>
         </div>
       ))}
+      {contentModalOpen && contentState && renderModal(contentState)}
+      {confirmModalOpen && confirmState && renderModal(confirmState)}
     </div>
   );
 };

src/components/modal/Modal.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from "react";
+import Textarea from "../common/Textarea";
+import Button from "../common/Button";
+import { useTodoStore } from "../../utils/store";
+import { modalBox } from "../../styles/modal.css";
+import { listBox } from "../../styles/todoList.css";
+
+interface TodoItem {
+  id: number;
+  text?: string;
+  stateId: number;
+}
+
+interface ModalType {
+  openState: boolean;
+  setIsOpen: () => void;
+  template: string;
+  todoContent: TodoItem;
+  title?: string;
+}
+
+export const Modal = (props: ModalType) => {
+  const { openState, template, setIsOpen, todoContent, title } = props;
+  const [areaVal, setAreaVal] = useState(
+    todoContent.text ? todoContent.text : ""
+  );
+  const [updateActive, setUpdateActive] = useState(openState);
+  const { updateTodo, removeTodo } = useTodoStore();
+
+  const updateTodoItem = () => {
+    if (updateActive) {
+      updateTodo({
+        id: todoContent.id,
+        text: areaVal,
+        stateId: todoContent.stateId,
+      });
+      setIsOpen();
+    }
+  };
+  const removeTodoItem = () => {
+    if (updateActive) {
+      removeTodo({
+        id: todoContent.id,
+        stateId: todoContent.stateId,
+      });
+      setIsOpen();
+    }
+  };
+
+  const modalContent = () => {
+    if (template) {
+      if (template === "confirm") {
+        return (
+          <div>
+            <p className={modalBox.confirm}>
+              선택하신 카드를 삭제하시겠습니까?
+            </p>
+            <div className={listBox.btnBox}>
+              <Button
+                text={"확인"}
+                name={["active"].filter(Boolean)}
+                onClick={() => {
+                  removeTodoItem();
+                }}
+              />
+              <Button
+                text={"취소"}
+                onClick={() => {
+                  setIsOpen();
+                }}
+              />
+            </div>
+          </div>
+        );
+      } else if (template === "titleContent") {
+        return <div>titleContent</div>;
+      } else if (template === "editContent") {
+        return (
+          <div>
+            <Textarea
+              areaVal={areaVal}
+              setAreaVal={setAreaVal}
+              setAddActive={setUpdateActive}
+            />
+            <div className={listBox.btnBox}>
+              <Button
+                text={"수정"}
+                name={["active", updateActive ? "" : "btnOff"].filter(Boolean)}
+                onClick={() => updateTodoItem()}
+              />
+            </div>
+          </div>
+        );
+      } else if (template === "remove") {
+      }
+    }
+  };
+
+  useEffect(() => {}, [openState]);
+
+  if (template) {
+    return (
+      <div className={modalBox.modalFrame}>
+        <div className={modalBox.modalContent}>
+          {title && (
+            <div className={modalBox.titleBox}>
+              <strong className={modalBox.title}>{title}</strong>
+              <button className={modalBox.itemAdd} onClick={() => setIsOpen()}>
+                닫기
+              </button>
+            </div>
+          )}
+          {modalContent()}
+        </div>
+        <div className={modalBox.modalDim}></div>
+      </div>
+    );
+  }
+};

src/styles/modal.css.ts

@@ -0,0 +1,71 @@
+import { style } from "@vanilla-extract/css";
+import { theme } from "./theme.css";
+
+export const modalBox = {
+  modalFrame: style({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: "1",
+  }),
+  modalContent: style({
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    padding: "15px",
+    minWidth: "300px",
+    maxWidth: "calc(100% - 30px)",
+    maxHeight: "calc(100% - 30px)",
+    background: theme.color.white,
+    borderRadius: "5px",
+    zIndex: "1",
+  }),
+  titleBox: style({
+    position: "relative",
+    marginBottom: "10px",
+    padding: "5px 20px 10px 0",
+    borderBottom: `${theme.borderLine.bottomLine} ${theme.color.blue}`,
+  }),
+  title: style({
+    fontSize: theme.fontSizes.size16,
+    fontWeight: theme.fontWeight.weight500,
+  }),
+  itemAdd: style({
+    position: "absolute",
+    top: "0px",
+    right: "0px",
+    width: "24px",
+    height: "24px",
+    textIndent: "-9999px",
+    background: `${theme.color.coralBlue} url('../assets/icon_remove.png') no-repeat center`,
+    border: theme.borderLine.borderNone,
+    borderRadius: theme.borderRadius.r50,
+    cursor: "pointer",
+    transition: "all ease 0.2s",
+    ":hover": {
+      transform: "rotate(-45deg)",
+    },
+  }),
+  editTitle: style({
+    display: "block",
+    fontSize: theme.fontSizes.size15,
+  }),
+  confirm: style({
+    padding: "10px 0 15px",
+    fontSize: theme.fontSizes.size16,
+    textAlign: "center",
+    color: theme.color.navy,
+  }),
+  modalDim: style({
+    position: "absolute",
+    top: "0",
+    right: "0",
+    left: "0",
+    bottom: "0",
+    background: theme.color.black,
+    opacity: "0.6",
+  }),
+};

src/styles/wrap.css.ts

@@ -3,18 +3,17 @@ import { theme } from "./theme.css";
 
 export const wrapBox = {
   wrap: style({
-    position: "absolute",
+    position: "relative",
     top: "50px",
-    left: "50%",
-    bottom: "50px",
-    transform: "translateX(-50%)",
+    margin: "auto",
     paddingTop: "4px",
     maxWidth: "calc(100% - 100px)",
     width: "1200px",
+    height: "calc(100vh - 100px)",
     borderRadius: theme.borderRadius.r7,
     boxShadow: theme.boxShadow.normal,
-    overflow: "hidden",
     boxSizing: "border-box",
+    overflow: "hidden",
     "::after": {
       content: "",
       position: "absolute",