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

[Feat, Refactor, Style] 게스트 모드 추가 / Loading 상태 관리 전역화 / RandomProfile: 색상 고정 / ToDoModal: 컴포넌트 병합

Author: ozen0718

src/api/card.ts

@@ -94,7 +94,7 @@ export const getDashboardMembers = async ({
 };
 
 /** 4. 카드 수정 */
-export const EditCard = async (cardId: number, data: EditCardPayload) => {
+export const editCard = async (cardId: number, data: EditCardPayload) => {
   const response = await axiosInstance.put(apiRoutes.cardDetail(cardId), data);
   return response.data;
 };

src/components/button/CardButton.tsx

@@ -79,7 +79,10 @@ const CardButton: React.FC<CardButtonProps> = ({
         <svg width="8" height="8" viewBox="0 0 8 8" fill={color}>
           <circle cx="4" cy="4" r="4" />
         </svg>
-        <span className="text-black3 text-[14px] sm:text-[16px] truncate max-w-[120px]">
+        <span
+          className="flex-1 text-black3 text-[14px] sm:text-[16px]
+        truncate min-w-0"
+        >
           {title}
         </span>
         {showCrown && (
@@ -96,7 +99,7 @@ const CardButton: React.FC<CardButtonProps> = ({
 
       {/* 오른쪽: 수정/삭제 버튼 또는 아이콘 */}
       {isEditMode ? (
-        <div className="flex flex-col gap-2">
+        <div className="flex flex-col gap-2 ml-3 flex-shrink-0 whitespace-nowrap">
           {createdByMe && (
             <button
               onClick={handleEdit}

src/components/button/GuestModeButton.tsx

@@ -0,0 +1,42 @@
+import { useRouter } from "next/router";
+import useUserStore from "@/store/useUserStore";
+import { postAuthData } from "@/api/auth";
+import { getUserInfo } from "@/api/users";
+import { toast } from "react-toastify";
+
+const GUEST_CREDENTIALS = {
+  email: "guest@gmail.com",
+  password: "qwer1155",
+};
+
+export default function GuestModeButton() {
+  const router = useRouter();
+  const setUser = useUserStore((state) => state.setUser);
+
+  const handleGuestLogin = async () => {
+    try {
+      const response = await postAuthData(GUEST_CREDENTIALS);
+      const token = response.accessToken;
+      localStorage.setItem("accessToken", token);
+
+      const userData = await getUserInfo();
+      setUser(userData);
+      router.push("/mydashboard");
+      toast.success("게스트 모드로 로그인되었습니다.");
+    } catch (error) {
+      toast.error("게스트 로그인에 실패했습니다.");
+    }
+  };
+
+  return (
+    <button
+      onClick={handleGuestLogin}
+      className="flex items-center justify-center
+      sm:w-[220px] w-[280px] h-[54px]
+      rounded-lg bg-white cursor-pointer
+      text-[var(--primary)] font-medium sm:text-[18px] text-[16px]"
+    >
+      게스트 모드
+    </button>
+  );
+}

src/components/card/ChangePassword.tsx

@@ -2,13 +2,16 @@ import { useState } from "react";
 import { changePassword } from "@/api/changepassword";
 import Input from "@/components/input/Input";
 import { toast } from "react-toastify";
+import { useUserPermission } from "@/hooks/useUserPermission";
 
 export default function ChangePassword() {
   const [password, setPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [checkNewpassword, setCheckNewPassword] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const isGuest = useUserPermission();
+
   const isPasswordMismatch =
     !!checkNewpassword && checkNewpassword !== newPassword;
   const isDisabled =
@@ -21,6 +24,11 @@ export default function ChangePassword() {
   const handleChangePassword = async () => {
     if (isDisabled) return;
 
+    if (isGuest) {
+      toast.error("게스트 계정은 정보를 변경할 수 없습니다.");
+      return;
+    }
+
     setIsSubmitting(true);
 
     const result = await changePassword({ password, newPassword });

src/components/card/Profile.tsx

@@ -4,6 +4,7 @@ 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";
 
 export const ProfileCard = () => {
   const { user, updateNickname, updateProfileImage } = useUserStore();
@@ -12,6 +13,8 @@ export const ProfileCard = () => {
   const [email, setEmail] = useState("");
   const [preview, setPreview] = useState<string | null>(null);
 
+  const isGuest = useUserPermission();
+
   const fetchUserData = async () => {
     try {
       const data = await getUserInfo();
@@ -28,6 +31,11 @@ export const ProfileCard = () => {
   ) => {
     const MAX_IMAGE_SIZE = 3.5 * 1024 * 1024;
 
+    if (isGuest) {
+      toast.error("게스트 계정은 정보를 변경할 수 없습니다.");
+      return;
+    }
+
     if (event.target.files && event.target.files[0]) {
       const file = event.target.files[0];
 
@@ -54,6 +62,11 @@ export const ProfileCard = () => {
   const handleSave = async () => {
     if (!nickname) return;
 
+    if (isGuest) {
+      toast.error("게스트 계정은 정보를 변경할 수 없습니다.");
+      return;
+    }
+
     try {
       const payload: { nickname: string; profileImageUrl?: string } = {
         nickname,

src/components/columnCard/Card.tsx

@@ -1,7 +1,7 @@
 import { AssigneeType, CardType } from "@/types/task";
 import Image from "next/image";
 import { getTagColor } from "../modalInput/chips/ColorTagChip";
-import RandomProfile from "../table/member/RandomProfile";
+import RandomProfile from "@/components/common/RandomProfile";
 
 type CardProps = CardType & {
   imageUrl?: string | null;
@@ -109,7 +109,11 @@ export default function Card({
                 className="sm:w-[24px] sm:h-[24px] w-[22px] h-[22px] rounded-full
                 overflow-hidden flex items-center justify-center"
               >
-                <RandomProfile name={assignee.nickname} />
+                <RandomProfile
+                  userId={assignee.id}
+                  name={assignee.nickname}
+                  className="sm:w-[24px] sm:h-[24px] w-[22px] h-[22px]"
+                />
               </div>
             )}
           </div>

src/components/columnCard/Column.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useState, useRef } from "react";
 import Image from "next/image";
 import { CardType } from "@/types/task";
-import TodoModal from "@/components/modalInput/ToDoModal";
+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";
@@ -14,12 +14,14 @@ import { CardList } from "./CardList";
 import CardDetailModal from "@/components/modalDashboard/CardDetailModal";
 import { CardDetailType } from "@/types/cards";
 import { toast } from "react-toastify";
+import { useDashboardPermission } from "@/hooks/useDashboardPermission";
 
 type ColumnProps = {
   columnId: number;
   title?: string;
   tasks?: CardType[];
   dashboardId: number;
+  createdByMe: boolean;
   columnDelete: (columnId: number) => void;
   fetchColumnsAndCards: () => void;
 };
@@ -29,13 +31,16 @@ export default function Column({
   title = "new Task",
   tasks = [],
   dashboardId,
+  createdByMe,
   columnDelete,
   fetchColumnsAndCards,
 }: ColumnProps) {
+  const { canEditColumns } = useDashboardPermission(dashboardId, createdByMe);
+
   const [columnTitle, setColumnTitle] = useState(title);
   const [isColumnModalOpen, setIsColumnModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
-  const [isTodoModalOpen, setIsTodoModalOpen] = useState(false);
+  const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
   const [isCardDetailModalOpen, setIsCardDetailModalOpen] = useState(false);
   const [selectedCard, setSelectedCard] = useState<CardDetailType | null>(null);
   const [members, setMembers] = useState<
@@ -71,6 +76,7 @@ export default function Column({
       toast.error("칼럼 제목을 입력해 주세요.");
       return;
     }
+    setIsColumnModalOpen(false);
 
     try {
       const updated = await updateColumn({ columnId, title: newTitle });
@@ -132,7 +138,13 @@ export default function Column({
           {/* 오른쪽: 생성 버튼 + 설정 버튼 */}
           <div className="flex items-center gap-2">
             <div
-              onClick={() => setIsTodoModalOpen(true)}
+              onClick={() => {
+                if (!canEditColumns) {
+                  toast.error("읽기 전용 대시보드입니다.");
+                  return;
+                }
+                setIsTaskModalOpen(true);
+              }}
               className="block lg:hidden"
             >
               <ShortTodoButton />
@@ -144,14 +156,26 @@ export default function Column({
                 fill
                 priority
                 className="object-contain cursor-pointer"
-                onClick={() => setIsColumnModalOpen(true)}
+                onClick={() => {
+                  if (!canEditColumns) {
+                    toast.error("읽기 전용 대시보드입니다.");
+                    return;
+                  }
+                  setIsColumnModalOpen(true);
+                }}
               />
             </div>
           </div>
         </div>
         <div className="flex items-center justify-center">
           <div
-            onClick={() => setIsTodoModalOpen(true)}
+            onClick={() => {
+              if (!canEditColumns) {
+                toast.error("읽기 전용 대시보드입니다.");
+                return;
+              }
+              setIsTaskModalOpen(true);
+            }}
             className="mb-2 hidden lg:block"
           >
             <TodoButton />
@@ -177,16 +201,19 @@ export default function Column({
         </div>
       </div>
 
-      {/* Todo 모달 */}
-      {isTodoModalOpen && (
-        <TodoModal
-          isOpen={isTodoModalOpen}
-          onClose={() => setIsTodoModalOpen(false)}
-          teamId={TEAM_ID}
+      {/* 카드 생성 모달 */}
+      {isTaskModalOpen && (
+        <TaskModal
+          mode="create"
+          isOpen={isTaskModalOpen}
+          onClose={() => setIsTaskModalOpen(false)}
           dashboardId={dashboardId}
           columnId={columnId}
           members={members}
-          onChangeCard={fetchColumnsAndCards}
+          initialData={{
+            status: columnTitle,
+          }}
+          onSubmit={fetchColumnsAndCards}
         />
       )}
 
@@ -220,6 +247,7 @@ export default function Column({
             setSelectedCard(null);
           }}
           onChangeCard={fetchColumnsAndCards}
+          createdByMe={createdByMe}
         />
       )}
     </div>

src/components/common/GlobalRouteLoadingWatcher.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import useLoadingStore from "@/store/useLoadingStore";
+
+export default function GlobalRouteLoadingWatcher() {
+  const router = useRouter();
+  const { startLoading, stopLoading } = useLoadingStore();
+
+  useEffect(() => {
+    router.events.on("routeChangeStart", startLoading);
+    router.events.on("routeChangeComplete", stopLoading);
+    router.events.on("routeChangeError", stopLoading);
+
+    return () => {
+      router.events.off("routeChangeStart", startLoading);
+      router.events.off("routeChangeComplete", stopLoading);
+      router.events.off("routeChangeError", stopLoading);
+    };
+  }, [router]);
+
+  return null;
+}

src/components/common/LoadingSpinner.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 const LoadingSpinner = () => {
   return (
-    <div className="flex justify-center items-center w-full h-screen bg-white">
+    <div
+      className="fixed inset-0 z-60 flex justify-center items-center
+    bg-white transition-opacity duration-300"
+    >
       <div className="w-12 h-12 border-6 border-[var(--primary)] border-solid rounded-full animate-spin border-t-transparent" />
     </div>
   );

src/components/common/RandomProfile.tsx

@@ -0,0 +1,32 @@
+interface RandomProfileProps {
+  userId: number;
+  name: string;
+  className?: string;
+}
+
+// 4개의 고정된 색상 배열
+const colors = ["bg-[#C4B1A2]", "bg-[#9DD7ED]", "bg-[#FDD446]", "bg-[#FFC85A]"];
+
+// id 숫자 기반 고정 색상 인덱스 생성
+function numberToIndex(id: number, length: number): number {
+  return id % length;
+}
+
+export default function RandomProfile({
+  userId,
+  name,
+  className,
+}: RandomProfileProps) {
+  const index = numberToIndex(userId, colors.length);
+  const bgColor = colors[index];
+
+  return (
+    <div
+      className={`flex items-center justify-center
+        leading-none text-white font-medium
+        rounded-full ${bgColor} ${className}`}
+    >
+      {name[0]}
+    </div>
+  );
+}