Merge pull request #213 from part3-4team-Taskify/minji

[Fix, Refactor, Style] FormModal: 공통 모달 컴포넌트 생성 / Column: 수정 시 중복 네이밍 버그 fix & 제목 20자 제한 추가

Author: ozen0718

src/components/card/Profile.tsx

@@ -3,8 +3,8 @@ import useUserStore from "@/store/useUserStore";
 import Image from "next/image";
 import { getUserInfo, updateProfile, uploadProfileImage } from "@/api/users";
 import Input from "@/components/input/Input";
-import { toast } from "react-toastify";
 import { useUserPermission } from "@/hooks/useUserPermission";
+import { toast } from "react-toastify";
 
 export const ProfileCard = () => {
   const { user, updateNickname, updateProfileImage } = useUserStore();
@@ -23,6 +23,7 @@ export const ProfileCard = () => {
       setEmail(data.email);
     } catch (err) {
       console.error("유저 정보 불러오기 실패:", err);
+      toast.error("유저 정보를 불러올 수 없습니다.");
     }
   };
 

src/components/columnCard/AddColumnModal.tsx

@@ -4,7 +4,6 @@ import Image from "next/image";
 import { CardType } from "@/types/task";
 import TaskModal from "@/components/modalInput/TaskModal";
 import { TodoButton, ShortTodoButton } from "@/components/button/TodoButton";
-import ColumnManageModal from "@/components/columnCard/ColumnManageModal";
 import ColumnDeleteModal from "@/components/columnCard/ColumnDeleteModal";
 import { updateColumn, deleteColumn } from "@/api/columns";
 import { getDashboardMembers, getCardDetail } from "@/api/card";
@@ -15,6 +14,7 @@ import CardDetailModal from "@/components/modalDashboard/CardDetailModal";
 import { CardDetailType } from "@/types/cards";
 import { toast } from "react-toastify";
 import { useDashboardPermission } from "@/hooks/useDashboardPermission";
+import FormModal from "@/components/modal/FormModal";
 
 type ColumnProps = {
   columnId: number;
@@ -38,6 +38,8 @@ export default function Column({
   const { canEditColumns } = useDashboardPermission(dashboardId, createdByMe);
 
   const [columnTitle, setColumnTitle] = useState(title);
+  const [editTitle, setEditTitle] = useState(columnTitle);
+  const [titleLength, setTitleLength] = useState<number>(0);
   const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
@@ -47,6 +49,8 @@ export default function Column({
     { id: number; userId: number; nickname: string }[]
   >([]);
 
+  const maxColumnTitleLength = 20;
+
   // 카드리스트의 스크롤을 칼럼 영역으로 이동
   const scrollRef = useRef<HTMLDivElement | null>(null);
 
@@ -83,6 +87,7 @@ export default function Column({
       setColumnTitle(updated.title);
       setIsColumnModalOpen(false);
       toast.success("칼럼 제목이 변경되었습니다.");
+      fetchColumnsAndCards();
     } catch (error) {
       console.error("칼럼 제목 수정 실패:", error);
       toast.error("칼럼 제목 변경에 실패했습니다.");
@@ -161,6 +166,8 @@ export default function Column({
                     toast.error("읽기 전용 대시보드입니다.");
                     return;
                   }
+                  setEditTitle(columnTitle);
+                  setTitleLength(columnTitle.length);
                   setIsColumnModalOpen(true);
                 }}
               />
@@ -218,16 +225,36 @@ export default function Column({
       )}
 
       {/* 칼럼 관리 모달 */}
-      <ColumnManageModal
-        isOpen={isColumnModalOpen}
-        onClose={() => setIsColumnModalOpen(false)}
-        onDeleteClick={() => {
-          setIsColumnModalOpen(false);
-          setIsDeleteModalOpen(true);
-        }}
-        columnTitle={columnTitle}
-        onEditSubmit={handleEditColumn}
-      />
+      {isColumnModalOpen && (
+        <FormModal
+          title="칼럼 이름 수정"
+          inputLabel="이름"
+          inputPlaceholder="변경할 이름을 입력해 주세요"
+          inputValue={editTitle}
+          onInputChange={(value) => {
+            if (value.length <= maxColumnTitleLength) {
+              setEditTitle(value);
+              setTitleLength(value.length);
+            }
+          }}
+          isInputValid={columnTitle.trim().length > 0}
+          charCount={{
+            current: titleLength,
+            max: maxColumnTitleLength,
+          }}
+          onSubmit={() => {
+            handleEditColumn(editTitle);
+            setIsColumnModalOpen(false);
+          }}
+          submitText="변경"
+          leftButtonText="삭제"
+          onLeftButtonClick={() => {
+            setIsColumnModalOpen(false);
+            setIsDeleteModalOpen(true);
+          }}
+          onClose={() => setIsColumnModalOpen(false)}
+        />
+      )}
 
       {/* 칼럼 삭제 확인 모달 */}
       <ColumnDeleteModal

src/components/columnCard/Column.tsx

@@ -21,7 +21,9 @@ export default function ColumnDeleteModal({
       height="h-[160px] sm:h-[174px]"
     >
       <div className="flex flex-col sm:gap-10 gap-6 text-center">
-        <p className="text-xl mt-1.5">칼럼의 모든 카드가 삭제됩니다.</p>
+        <p className="text-black3 font-medium sm:text-[20px] text-[18px] mt-1.5">
+          칼럼의 모든 카드가 삭제됩니다.
+        </p>
         <div className="flex justify-between gap-3">
           <CustomBtn variant="outlineDisabled" onClick={onClose}>
             취소

src/components/columnCard/ColumnDeleteModal.tsx

@@ -5,9 +5,10 @@ import { ToastContainer, Slide } from "react-toastify";
 const CustomToastContainer = () => {
   return (
     <ToastContainer
+      limit={2}
       position="top-center"
       autoClose={3000}
-      newestOnTop
+      newestOnTop={false}
       closeButton={false}
       pauseOnHover={false}
       hideProgressBar={true}

src/components/columnCard/ColumnManageModal.tsx

@@ -0,0 +1,104 @@
+import Image from "next/image";
+import Input from "@/components/input/Input";
+
+interface FormModalProps {
+  title: string;
+  inputLabel: string;
+  inputValue: string;
+  inputPlaceholder: string;
+  isInputValid: boolean;
+  onInputChange: (value: string) => void;
+  onSubmit: () => void;
+  onClose: () => void;
+  submitText: string;
+  leftButtonText?: string;
+  onLeftButtonClick?: () => void;
+  errorMessage?: string;
+  charCount?: {
+    current: number;
+    max: number;
+  };
+}
+
+export default function FormModal({
+  title,
+  inputLabel,
+  inputValue,
+  inputPlaceholder,
+  isInputValid,
+  onInputChange,
+  onSubmit,
+  onClose,
+  submitText,
+  leftButtonText = "취소",
+  onLeftButtonClick,
+  errorMessage,
+  charCount,
+}: FormModalProps) {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black/35 z-50">
+      <div className="bg-white p-6 rounded-lg shadow-lg w-[327px] sm:w-[568px] min-h-[280px]">
+        <div className="flex justify-between items-center">
+          <h2 className="text-[20px] sm:text-[24px] font-bold text-black3">
+            {title}
+          </h2>
+          <Image
+            src="/svgs/close-white.svg"
+            alt="닫기"
+            width={25}
+            height={25}
+            className="cursor-pointer"
+            onClick={onClose}
+          ></Image>
+        </div>
+
+        <div className="relative w-full">
+          <Input
+            type="text"
+            value={inputValue}
+            onChange={onInputChange}
+            label={inputLabel}
+            labelClassName="font-medium text-black3 sm:text-[18px] text-[16px] mt-6"
+            placeholder={inputPlaceholder}
+            className="max-w-[620px] mb-1 pr-14
+          text-black3 font-normal sm:text-[16px] text-[14px]
+          placeholder:sm:text-[16px] placeholder:text-[14px]"
+          />
+          {charCount && (
+            <span
+              className="absolute right-3 top-2/5 translate-y-6.5 font-light
+            text-[12px] sm:text-[14px] text-[var(--color-gray1)] sm:pr-1.5"
+            >
+              {charCount.current} / {charCount.max}
+            </span>
+          )}
+        </div>
+        {errorMessage && (
+          <p className="font-14r block text-[var(--color-red)] mt-1">
+            {errorMessage}
+          </p>
+        )}
+
+        <div className="mt-8 gap-2 flex justify-between">
+          <button
+            onClick={onLeftButtonClick || onClose}
+            className="cursor-pointer
+            sm:w-[256px] sm:h-[54px] w-[144px] h-[54px] rounded-[8px]
+            border border-[var(--color-gray3)] text-[var(--color-gray1)]"
+          >
+            {leftButtonText}
+          </button>
+          <button
+            onClick={onSubmit}
+            disabled={!inputValue || !isInputValid}
+            className={`cursor-pointer sm:w-[256px] sm:h-[54px] w-[144px] h-[54px] rounded-[8px] 
+                border border-[var(--color-gray3)] text-[var(--color-white)] 
+                ${!inputValue || !isInputValid ? "bg-gray-300 cursor-not-allowed" : "bg-[var(--primary)]"}`}
+          >
+            {submitText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}