🛠 Fix(#168): 권한에 따른 페이지 접근 제어

src/components/Modal/ModifyColumnModal.tsx

@@ -92,7 +92,11 @@ export default function ModifyColumnModal({ columnId, columnTitle = '', columns
           <ModalCancelButton type='button' onClick={closeModal}>
             취소
           </ModalCancelButton>
-          <ModalActionButton type='button' onClick={handleModifyClick} disabled={!!errorMessage}>
+          <ModalActionButton
+            type='button'
+            onClick={handleModifyClick}
+            disabled={!!errorMessage || columnTitle === title}
+          >
             변경
           </ModalActionButton>
         </div>

src/components/Modal/TodoCardModal/Comment.tsx

@@ -103,7 +103,8 @@ export default function Comment({ comment }: CommentProps) {
                       취소
                     </button>
                     <button
-                      className='text-black-33 transition-all duration-100 hover:text-violet hover:underline dark:text-dark-10 dark:hover:text-violet-light-hover'
+                      className='text-black-33 transition-all duration-100 hover:text-violet hover:underline disabled:text-gray-9f dark:text-dark-10 dark:hover:text-violet-light-hover dark:disabled:text-gray-9f'
+                      disabled={editedComment === comment.content}
                       onClick={handleSaveEdit}
                     >
                       저장

src/components/Modal/TodoCardModal/TodoCardModal.tsx → src/components/Modal/TodoCardModal/index.tsx

@@ -16,7 +16,7 @@ import { TodoCardModalProps } from '@/types/Modal.interface';
 import { CommentsResponse, CommentForm } from '@/types/post/CommentForm.interface';
 import formatDate from '@/utils/formatDate';
 
-export default function TodoCardModal({ card, column, onClick }: TodoCardModalProps) {
+export default function TodoCardModal({ card, column, isMember, onClick }: TodoCardModalProps) {
   const { data, refetch } = useFetchData<CommentsResponse>(['comments', card.id], () => getComments(card.id));
   const [newComment, setNewComment] = useState('');
   const [isCommentEmpty, setIsCommentEmpty] = useState(true);
@@ -68,9 +68,11 @@ export default function TodoCardModal({ card, column, onClick }: TodoCardModalPr
           {card.title}
         </div>
         <div className='flex'>
-          <div className='relative'>
-            <EditDropdown card={card} column={column} />
-          </div>
+          {isMember && (
+            <div className='relative'>
+              <EditDropdown card={card} column={column} />
+            </div>
+          )}
           <button onClick={handleModalClose} className='transition-all duration-200 hover:opacity-50'>
             <Image src='/icons/x.svg' alt='X 아이콘' width={32} height={32} className='dark:hidden' />
             <Image src='/icons/x-white.svg' alt='X 아이콘' width={32} height={32} className='hidden dark:block' />
@@ -112,12 +114,13 @@ export default function TodoCardModal({ card, column, onClick }: TodoCardModalPr
                   value={newComment}
                   onChange={(e) => setNewComment(e.target.value)}
                   placeholder='댓글을 입력하세요.'
+                  disabled={!isMember}
                 />
 
                 <button
                   className='btn-violet-light dark:btn-white absolute right-1 h-[28px] w-[60px] rounded-[4px] text-[12px] text-violet md:h-[32px] md:w-[78px] lg:w-[84px] dark:rounded-[4px]'
                   type='submit'
-                  disabled={isCommentEmpty}
+                  disabled={isCommentEmpty || !isMember}
                 >
                   입력
                 </button>

src/components/Modal/index.tsx

@@ -8,7 +8,7 @@ import ModifyColumnModal from './ModifyColumnModal';
 import NewColumnModal from './NewColumnModal';
 import NewDashboardModal from './NewDashboardModal';
 import NotificationModal from './NotificationModal';
-import TodoCardModal from './TodoCardModal/TodoCardModal';
+import TodoCardModal from './TodoCardModal';
 
 import useModal from '@/hooks/useModal';
 import { modalSelector } from '@/store/reducers/modalSlice';

src/components/Redirect/index.tsx

@@ -1,23 +1,40 @@
 import { useRouter } from 'next/router';
+import { useSelector } from 'react-redux';
 
-import useRedirectIfAuthenticated from '@/hooks/useRedirectIfAuthenticated';
+import useRedirectIfAuth from '@/hooks/useRedirectIfAuth';
 import useRedirectIfNotAuth from '@/hooks/useRedirectIfNotAuth';
+import { RootState } from '@/store/store';
 
 export default function Redirect({ children }: { children: React.ReactNode }) {
   const router = useRouter();
-  const currentPath = router.asPath;
+  const { user } = useSelector((state: RootState) => state.user);
+  const currentPath = router.pathname;
 
-  if (['/', '/signup', '/signin'].includes(currentPath)) {
-    const isRedirecting = useRedirectIfAuthenticated();
+  const redirectIfAuth = useRedirectIfAuth();
+  const redirectIfNotAuth = useRedirectIfNotAuth();
+
+  if (currentPath === '/' && user) {
+    router.replace('/mydashboard');
+  }
+
+  if (currentPath === '/404') {
+    const nextPath = user ? '/mydashboard' : '/';
+    setTimeout(() => router.push(nextPath), 3000);
+  }
+
+  if (['/signup', '/signin'].includes(currentPath)) {
+    const isRedirecting = redirectIfAuth();
     if (isRedirecting) {
       return <></>;
     }
   }
-  if (['/mypage', '/mydashboard'].includes(currentPath) || currentPath.startsWith('/dashboard')) {
-    const isRedirecting = useRedirectIfNotAuth();
+
+  if (['/mypage', '/mydashboard'].includes(currentPath)) {
+    const isRedirecting = redirectIfNotAuth();
     if (isRedirecting) {
       return <></>;
     }
   }
+
   return children;
 }

src/containers/dashboard/Column.tsx

@@ -14,9 +14,10 @@ interface ColumnProps {
   column: ColumnType;
   columns: ColumnType[];
   index: number;
+  isMember: boolean;
 }
 
-function Column({ column, index, columns }: ColumnProps) {
+function Column({ column, columns, isMember }: ColumnProps) {
   const { openModifyColumnModal, openEditCardModal, openTodoCardModal } = useModal();
   const { data: cardsData, isLoading } = useFetchData<{ cards: CardType[] }>(['cards', column.id], () =>
     getCardsList(column.id),
@@ -41,7 +42,8 @@ function Column({ column, index, columns }: ColumnProps) {
 
           {/* Column Edit Button */}
           <button
-            className='transition duration-300 ease-in-out hover:rotate-90'
+            className='transition duration-300 ease-in-out hover:rotate-90 disabled:rotate-0'
+            disabled={!isMember}
             onClick={() => {
               openModifyColumnModal({ columns, columnId: column.id, columnTitle: column.title });
             }}
@@ -53,6 +55,7 @@ function Column({ column, index, columns }: ColumnProps) {
         {/* Add Card Button */}
         <button
           className='btn-violet-light dark:btn-violet-dark mb-[16px] h-[40px] rounded-[6px] border'
+          disabled={!isMember}
           onClick={() => {
             openEditCardModal({ column: column, isEdit: false });
           }}
@@ -63,26 +66,26 @@ function Column({ column, index, columns }: ColumnProps) {
 
         {/* Card List Section */}
         <div className='scrollbar-hide lg:h-[700px] lg:overflow-y-auto'>
-          <Droppable droppableId={`column-${column.id}`} key={`column-${column.id}`}>
+          <Droppable droppableId={`column-${column.id}`} key={`column-${column.id}`} isDropDisabled={!isMember}>
             {(provided) => (
               <div
                 ref={provided.innerRef}
                 {...provided.droppableProps}
                 style={{ minHeight: '100px' }} // 최소 높이
               >
                 {cards.map((card, index) => (
-                  <Draggable key={`card-${card.id}`} draggableId={`card-${card.id}`} index={index}>
+                  <Draggable
+                    key={`card-${card.id}`}
+                    draggableId={`card-${card.id}`}
+                    index={index}
+                    isDragDisabled={!isMember}
+                  >
                     {(provided) => (
                       <div
                         ref={provided.innerRef}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
-                        onClick={() => {
-                          openTodoCardModal({
-                            card,
-                            column,
-                          });
-                        }}
+                        onClick={() => openTodoCardModal({ card, column, isMember })}
                       >
                         <Card key={`card-${card.id}`} card={card} />
                       </div>

src/containers/dashboard/ColumnsSection.tsx

@@ -1,15 +1,21 @@
 import { useQueryClient } from '@tanstack/react-query';
 import Image from 'next/image';
+import { useState, useEffect } from 'react';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
+import { useSelector } from 'react-redux';
 
 import Column from './Column';
 import ColumnSkeleton from './ColumnSkeleton';
 
 import useFetchData from '@/hooks/useFetchData';
 import useModal from '@/hooks/useModal';
-import { getColumnsList } from '@/services/getService';
+import useRedirectIfNotMember from '@/hooks/useRedirectIfNotMember';
+import instance from '@/services/axios';
+import { getColumnsList, getDashboard } from '@/services/getService';
 import { moveToOtherColumn } from '@/services/putService';
+import { RootState } from '@/store/store';
 import { ColumnsResponse } from '@/types/Column.interface';
+import { checkPublic } from '@/utils/shareAccount';
 
 interface ColumnsSectionProps {
   dashboardId: string;
@@ -18,6 +24,11 @@ interface ColumnsSectionProps {
 export default function ColumnsSection({ dashboardId }: ColumnsSectionProps) {
   const queryClient = useQueryClient();
   const { openNewColumnModal, openNotificationModal } = useModal();
+  const redirectIfNotMember = useRedirectIfNotMember();
+  const { user } = useSelector((state: RootState) => state.user);
+  const [isMember, setIsMember] = useState(true);
+  const [isPublic, setIsPublic] = useState(false);
+
   const {
     data: columns,
     isLoading,
@@ -26,6 +37,35 @@ export default function ColumnsSection({ dashboardId }: ColumnsSectionProps) {
 
   const columnList = columns?.data || [];
 
+  useEffect(() => {
+    const handleRedirect = async () => {
+      try {
+        const newIsPublic = await checkPublic(Number(dashboardId));
+        setIsPublic(newIsPublic);
+        if (!newIsPublic && dashboardId) {
+          await getDashboard(String(dashboardId));
+        }
+      } catch {
+        redirectIfNotMember();
+      }
+    };
+
+    const handleCheckMember = async () => {
+      if (dashboardId) {
+        try {
+          await instance.get(`/dashboards/${dashboardId}`, {
+            headers: { memberTest: true },
+          });
+        } catch {
+          setIsMember(false);
+        }
+      }
+    };
+
+    handleRedirect();
+    handleCheckMember();
+  }, [dashboardId, user]);
+
   const handleNewColumnClick = () => {
     if (columnList.length >= 10) {
       openNotificationModal({ text: '컬럼은 최대 10개까지 생성할 수 있습니다.' });
@@ -62,13 +102,21 @@ export default function ColumnsSection({ dashboardId }: ColumnsSectionProps) {
     <ColumnSkeleton />
   ) : (
     <DragDropContext onDragEnd={onDragEnd}>
-      <section className='block h-full overflow-x-auto lg:flex lg:w-[calc(100dvw-300px)]'>
+      <section
+        className={`block h-full overflow-x-auto lg:flex ${isPublic && !user ? 'lg:w-screen' : 'lg:w-[calc(100dvw-300px)]'}`}
+      >
         <ul className='block lg:flex'>
           {columnList.map((column, index) => (
-            <Droppable droppableId={`column-${column.id}`} key={`column-${column.id}`}>
+            <Droppable droppableId={`column-${column.id}`} key={`column-${column.id}`} isDropDisabled={!isMember}>
               {(provided) => (
                 <li id={`column-${column.id}`} ref={provided.innerRef} {...provided.droppableProps}>
-                  <Column key={`column-${column.id}`} column={column} columns={columnList} index={index} />
+                  <Column
+                    key={`column-${column.id}`}
+                    column={column}
+                    columns={columnList}
+                    index={index}
+                    isMember={isMember}
+                  />
                   {provided.placeholder}
                 </li>
               )}
@@ -79,6 +127,7 @@ export default function ColumnsSection({ dashboardId }: ColumnsSectionProps) {
           <button
             className='btn-violet-light dark:btn-violet-dark mb-4 h-[70px] w-full rounded-[6px] py-[24px] lg:mb-0 lg:w-[354px]'
             onClick={handleNewColumnClick}
+            disabled={!isMember}
           >
             <div className='mr-[12px] text-lg font-bold text-black-33 dark:text-dark-10'>새로운 컬럼 추가하기</div>
             <Image src='/icons/plus-filled.svg' width={22} height={22} alt='카드 추가 아이콘' className='dark:hidden' />

src/containers/dashboard/edit/InvitedMembersSection.tsx

@@ -30,7 +30,7 @@ export default function InvitedMembersSection() {
   const { mutate } = useDeleteData<CancelInvitationInput>({ mutationFn: deleteInvitation, handleSuccess });
   const queryClient = useQueryClient();
 
-  const { data, error } = useFetchData<DashboardInvitationsResponse>(['invitations', id, currentChunk], () =>
+  const { data, isLoading, error } = useFetchData<DashboardInvitationsResponse>(['invitations', id, currentChunk], () =>
     getDashboardInvitations(Number(id), currentChunk, 5),
   );
   const totalPage = data ? Math.max(1, Math.ceil(data.totalCount / 5)) : 1;
@@ -55,6 +55,20 @@ export default function InvitedMembersSection() {
     handleDelete();
   };
 
+  if (isLoading) {
+    return <section className='section align-center h-[395px] animate-pulse bg-gray-f5 md:h-[477px]'></section>;
+  }
+
+  if (error || !data) {
+    return (
+      <section className='section align-center h-[395px] md:h-[477px]'>
+        <p role='alert' className='text-[22px] font-bold text-black-33'>
+          초대내역 정보가 없습니다!
+        </p>
+      </section>
+    );
+  }
+
   return (
     <section className='section h-[395px] pb-4 transition-colors md:h-[477px] md:pb-5 dark:bg-dark'>
       <header className='mb-4 mt-6 flex items-center justify-between md:my-7'>
@@ -80,13 +94,7 @@ export default function InvitedMembersSection() {
       </header>
       <main className='text-sm md:text-base'>
         <h3 className='mb-[29px] text-gray-9f md:mb-6'>이메일</h3>
-        {data ? (
-          <InvitedMemberList invitations={data.invitations} onCancelClick={handleCancelInvitation} />
-        ) : error ? (
-          <p>{`에러가 발생했습니다. \n${error.message}`}</p>
-        ) : (
-          <p>로딩중...</p>
-        )}
+        <InvitedMemberList invitations={data.invitations} onCancelClick={handleCancelInvitation} />
       </main>
     </section>
   );

src/containers/dashboard/edit/MembersSection.tsx

@@ -24,7 +24,7 @@ export default function MembersSection({ onDeleteMember }: MemberSectionProps) {
   const { id } = router.query;
   const [currentChunk, setCurrentChunk] = useState(1);
 
-  const { data, error } = useFetchData<MembersResponse>(['members', id, currentChunk], () =>
+  const { data, isLoading, error } = useFetchData<MembersResponse>(['members', id, currentChunk], () =>
     getMembersList(Number(id), currentChunk, 4),
   );
   const totalPage = data ? Math.max(1, Math.ceil(data.totalCount / 4)) : 1;
@@ -59,6 +59,20 @@ export default function MembersSection({ onDeleteMember }: MemberSectionProps) {
     openConfirmModal({ text: '정말 구성원을 삭제하시겠습니까?', onActionClick: handleDelete });
   };
 
+  if (isLoading) {
+    return <section className='section align-center h-[341px] animate-pulse bg-gray-f5 md:h-[408px]'></section>;
+  }
+
+  if (error || !data) {
+    return (
+      <section className='section align-center h-[341px] md:h-[408px]'>
+        <p role='alert' className='text-[22px] font-bold text-black-33'>
+          구성원 정보가 없습니다!
+        </p>
+      </section>
+    );
+  }
+
   return (
     <section className='section h-[341px] pb-4 transition-colors md:h-[408px] md:pb-5 dark:bg-dark'>
       <header className='mb-[18px] mt-[22px] flex items-center justify-between md:mb-[27px] md:mt-[26px]'>
@@ -72,13 +86,7 @@ export default function MembersSection({ onDeleteMember }: MemberSectionProps) {
       </header>
       <main className='text-sm md:text-base'>
         <h3 className='mb-5 h-[17px] text-gray-9f md:mb-6 md:h-[19px]'>이름</h3>
-        {data ? (
-          <MemberList members={data.members} onDeleteClick={handleDeleteMember} />
-        ) : error ? (
-          <p>{`에러가 발생했습니다. \n${error.message}`}</p>
-        ) : (
-          <p>로딩중...</p>
-        )}
+        <MemberList members={data.members} onDeleteClick={handleDeleteMember} />
       </main>
     </section>
   );