[FE] 카드 수정 기능

frontend/src/components/common/Buttons.tsx

@@ -10,13 +10,15 @@ const Buttons = styled(
     value,
     type,
     onClick,
+    disabled
   }: {
     className?: string;
     icon?: string;
     text?: string;
     value?: string;
     type?: "button" | "reset" | "submit";
     onClick?: () => void;
+    disabled?: boolean;
   }) => {
     return (
       <button
@@ -25,6 +27,7 @@ const Buttons = styled(
           value: value ? value : undefined,
           onClick: onClick ? () => onClick() : undefined,
           type: type ? type : undefined,
+          disabled
         }}
       >
         <span className="container">
@@ -52,6 +55,10 @@ const Buttons = styled(
   svg {
     display: block;
   }
+  &:hover {
+    cursor: pointer;
+    opacity: .8;
+  }
 
   ${({ theme, $Flexible, $Type, $ElementPattern, $States }) => {
     const { font, border } = theme;

frontend/src/components/main/board/Board.tsx

@@ -7,6 +7,7 @@ import Column from "./column/Column";
 
 const Board = styled(({ className }: { className?: string }) => {
   const [columns, setColumns] = useState<TColumn[]>([]);
+  const [activeCardFormIdentifier, setActiveCardFormIdentifier] = useState<{ cardId: number; categoryId: number }>({ cardId: 0, categoryId: 0 });
 
   useEffect(() => {
     updateColumns();
@@ -25,12 +26,26 @@ const Board = styled(({ className }: { className?: string }) => {
     );
   };
 
+  const toggleAddForm = (categoryId: number) => {
+    setActiveCardFormIdentifier((c) => {
+      return c.categoryId === categoryId ? { cardId: 0, categoryId: 0 } : { cardId: 0, categoryId: categoryId };
+    });
+  };
+
+  const openEditForm = (cardId: number, categoryId: number) => {
+    setActiveCardFormIdentifier({ cardId, categoryId });
+  };
+
+  const closeCardForm = () => {
+    setActiveCardFormIdentifier({ cardId: 0, categoryId: 0 });
+  };
+
   return (
     <ul className={className}>
       {columns.map((column) => {
         return (
           <li key={column.categoryId}>
-            <Column {...{ ...column, onCardChanged: updateColumns }} />
+            <Column {...{ ...column, onCardChanged: updateColumns, activeCardFormIdentifier, toggleAddForm, openEditForm, closeCardForm }} />
           </li>
         );
       })}

frontend/src/components/main/board/column/Column.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { styled } from "styled-components";
 import TCard from "../../../../types/TCard";
 import TTheme from "../../../../types/TTheme";
@@ -13,25 +12,22 @@ const Column = styled(
     categoryId,
     categoryName,
     cards,
+    activeCardFormIdentifier,
+    toggleAddForm,
+    openEditForm,
+    closeCardForm,
     onCardChanged,
   }: {
     className?: string;
     categoryId: number;
     categoryName: string;
     cards: TCard[];
+    activeCardFormIdentifier: { cardId: number; categoryId: number };
+    toggleAddForm: (categoryId: number) => void;
+    openEditForm: (cardId: number, categoryId: number) => void;
+    closeCardForm: () => void;
     onCardChanged: () => Promise<void>;
   }) => {
-    const [isAddFormOpen, setIsAddFormOpen] = useState(false);
-    const [cardIdUnderEdit, setCardIdUnderEdit] = useState(0);
-
-    const toggleAddForm = () => {
-      setIsAddFormOpen((i) => !i);
-    };
-
-    const closeAddForm = () => {
-      setIsAddFormOpen(false);
-    };
-
     const addCard = async ({ title, content }: { title: string; content: string }) => {
       await fetchData(
         `/api/cards?categoryId=${categoryId}`,
@@ -43,7 +39,7 @@ const Column = styled(
           body: JSON.stringify({ title, content }),
         },
         () => {
-          closeAddForm();
+          closeCardForm();
           onCardChanged();
         }
       );
@@ -78,26 +74,33 @@ const Column = styled(
           }),
         },
         () => {
+          closeCardForm();
           onCardChanged();
         }
       );
     };
 
+    const isActiveAddForm = activeCardFormIdentifier.cardId === 0 && activeCardFormIdentifier.categoryId === categoryId;
+
+    const isActiveEditForm = (cardId: number) => {
+      return cardId === activeCardFormIdentifier.cardId && categoryId === activeCardFormIdentifier.categoryId;
+    };
+
     return (
       <article className={className}>
-        <ColumnTitle title={categoryName} count={cards.length} handlePlusButtonClick={toggleAddForm} />
+        <ColumnTitle title={categoryName} count={cards.length} handlePlusButtonClick={() => toggleAddForm(categoryId)} />
         <ul className="card-list">
-          {isAddFormOpen && (
+          {isActiveAddForm && (
             <li>
-              <CardForm mode="add" handleCancelButtonClick={closeAddForm} handleSubmitButtonClick={addCard} />
+              <CardForm mode="add" handleCancelButtonClick={closeCardForm} handleSubmitButtonClick={addCard} />
             </li>
           )}
           {cards.map((card) => (
             <li key={card.id}>
-              {cardIdUnderEdit === card.id ? (
-                <CardForm mode="edit" originalContent={card} handleCancelButtonClick={closeAddForm} handleSubmitButtonClick={editCard} />
+              {isActiveEditForm(card.id) ? (
+                <CardForm mode="edit" originalContent={card} handleCancelButtonClick={closeCardForm} handleSubmitButtonClick={editCard} />
               ) : (
-                <Card {...card} onDelete={() => deleteCard(card.id)} />
+                <Card {...card} onDelete={() => deleteCard(card.id)} onEdit={() => openEditForm(card.id, categoryId)} />
               )}
             </li>
           ))}

frontend/src/components/main/board/column/card/Card.tsx

@@ -7,7 +7,7 @@ import Buttons from "../../../../common/Buttons";
 type TMode = "Default" | "Add/Edit" | "Drag" | "Place";
 
 const Card = styled(
-  ({ className, title, content, onDelete }: { className?: string; title: string; content: string; onDelete: () => Promise<void> }) => {
+  ({ className, title, content, onDelete, onEdit }: { className?: string; title: string; content: string; onDelete: () => Promise<void>, onEdit: () => void }) => {
     const [mode, setMode] = useState<TMode>("Default");
 
     function editFormSubmitHandler(event: FormEvent<HTMLFormElement>): void {
@@ -37,7 +37,7 @@ const Card = styled(
                 />
               </li>
               <li>
-                <Buttons $Flexible="" $Type="Ghost" $ElementPattern="Icon Only" $States="Enable" icon="Edit" onClick={() => setMode("Add/Edit")} />
+                <Buttons $Flexible="" $Type="Ghost" $ElementPattern="Icon Only" $States="Enable" icon="Edit" onClick={onEdit} />
               </li>
             </menu>
           </div>

frontend/src/components/main/board/column/card/CardForm.tsx

@@ -68,11 +68,12 @@ function CardForm<T extends "edit" | "add">({
             $Flexible=""
             $Type="Contained"
             $ElementPattern="Text Only"
-            $States="Enable"
+            $States={isSubmitBtnClickable ?  "Enable" :"Disabled"}
             text={mode === "add" ? "등록" : "저장"}
             onClick={() => {
               handleSubmitButtonClick({ title, content }, originalContent.id);
             }}
+            disabled={!isSubmitBtnClickable}
           />
         </li>
       </ul>

frontend/src/mocks/handlers.ts

@@ -150,13 +150,13 @@ const allData = [
     categoryName: "doing",
     cards: [
       {
-        id: 1,
+        id: 3,
         title: "title1",
         content: "content",
         nickname: "nickname",
       },
       {
-        id: 2,
+        id: 4,
         title: "title2",
         content: "content2",
         nickname: "nickname2",