[FE] Fix/permission 토픽 권한 수정 오류 해결

frontend/cypress.config.ts

@@ -3,6 +3,6 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
   e2e: {
     baseUrl: 'http://localhost:3000',
-    defaultCommandTimeout: 10000,
+    defaultCommandTimeout: 20000,
   },
 });

frontend/cypress/e2e/mapbefine.cy.ts

@@ -69,7 +69,7 @@ describe('토픽 상세 페이지', () => {
         if (index === 0) $el.click();
       });
 
-    cy.wait(3000);
+    cy.wait(5000);
 
     cy.get('span').each(($el, index) => {
       if (index === 6) $el.click();
@@ -87,7 +87,7 @@ describe('토픽 상세 페이지', () => {
         if (index === 0) $el.click();
       });
 
-    cy.wait(2000);
+    cy.wait(5000);
 
     cy.get('span').each(($el, index) => {
       if (index === 6) $el.click();

frontend/src/components/AuthorityRadioContainer/index.tsx

@@ -3,7 +3,10 @@ import Text from '../common/Text';
 import Space from '../common/Space';
 import Flex from '../common/Flex';
 import { useContext, useEffect, useState } from 'react';
-import { TopicAuthorMember, TopicAuthorMemberWithId } from '../../types/Topic';
+import {
+  TopicAuthorMember,
+  TopicAuthorMemberWithAuthorId,
+} from '../../types/Topic';
 import { ModalContext } from '../../context/ModalContext';
 import Box from '../common/Box';
 import Modal from '../Modal';
@@ -18,7 +21,7 @@ interface AuthorityRadioContainer {
   setIsPrivate: React.Dispatch<React.SetStateAction<boolean>>;
   setIsAll: React.Dispatch<React.SetStateAction<boolean>>;
   setAuthorizedMemberIds: React.Dispatch<React.SetStateAction<number[]>>;
-  permissionedMembers?: TopicAuthorMemberWithId[];
+  permissionedMembers?: TopicAuthorMemberWithAuthorId[];
 }
 
 const AuthorityRadioContainer = ({
@@ -62,6 +65,10 @@ const AuthorityRadioContainer = ({
     );
   };
 
+  const whenViewingPreviousAuthorMember = () => {
+    return authorizedMemberIds.length === 0 && !isAll;
+  };
+
   return (
     <>
       <Text color="black" $fontSize="default" $fontWeight="normal">
@@ -162,25 +169,31 @@ const AuthorityRadioContainer = ({
         </>
       )}
 
-      {authorizedMemberIds.length === 0 && permissionedMembers && (
+      {permissionedMembers && whenViewingPreviousAuthorMember() && (
         <>
           <Space size={5} />
           <Space size={0} />
           <Box>
             <Text color="black" $fontSize="default" $fontWeight="normal">
-              기존에 선택한 친구들
+              이전에 권한을 부여한 친구들
             </Text>
             <Space size={1} />
-            {permissionedMembers.map((member) => (
-              <Text
-                color="black"
-                $fontSize="default"
-                $fontWeight="normal"
-                key={member.id}
-              >
-                • {member.memberResponse.nickName}
+            {permissionedMembers.length > 0 ? (
+              permissionedMembers.map((member) => (
+                <Text
+                  color="black"
+                  $fontSize="default"
+                  $fontWeight="normal"
+                  key={member.id}
+                >
+                  • {member.memberResponse.nickName}
+                </Text>
+              ))
+            ) : (
+              <Text color="black" $fontSize="default" $fontWeight="normal">
+                • 없음
               </Text>
-            ))}
+            )}
           </Box>
         </>
       )}

frontend/src/components/TopicInfo/UpdatedTopicInfo.tsx

@@ -61,7 +61,7 @@ const UpdatedTopicInfo = ({
           publicity: isPrivate ? 'PRIVATE' : 'PUBLIC',
           permissionType: isAll && !isPrivate ? 'ALL_MEMBERS' : 'GROUP_ONLY',
         },
-        errorMessage: `'공개 ➡️ 비공개', '모두 ➡️ 친구들', '친구들 ➡️ 혼자' 로 변경할 수 없습니다.`,
+        errorMessage: `권한은 '공개 ➡️ 비공개', '모두 ➡️ 친구', '친구 ➡️ 혼자' 로 변경할 수 없습니다.`,
         isThrow: true,
       });
 
@@ -75,7 +75,7 @@ const UpdatedTopicInfo = ({
   const updateTopicAuthority = async () => {
     // topicAuthorInfo api 구조 이상으로 권한 설정 자체에 대한 id를 사용 (topicId 아님)
     await fetchDelete({
-      url: `/permissions/${topicAuthorInfo?.permissionMembers[0].id}`,
+      url: `/permissions/${topicAuthorInfo?.permissionedMembers[0].id}`,
       errorMessage: '권한 삭제에 실패했습니다.',
       isThrow: true,
     });
@@ -103,9 +103,7 @@ const UpdatedTopicInfo = ({
         setTopicAuthorInfo(response);
         setIsPrivate(response.publicity === 'PRIVATE');
 
-        if (topicAuthorInfo) {
-          setIsAll(topicAuthorInfo?.permissionMembers.length === 0);
-        }
+        setIsAll(response.permissionedMembers.length === 0);
       },
     );
   }, []);
@@ -147,7 +145,7 @@ const UpdatedTopicInfo = ({
         setIsPrivate={setIsPrivate}
         setIsAll={setIsAll}
         setAuthorizedMemberIds={setAuthorizedMemberIds}
-        permissionedMembers={topicAuthorInfo?.permissionMembers}
+        permissionedMembers={topicAuthorInfo?.permissionedMembers}
       />
 
       <Space size={6} />

frontend/src/pages/SelectedTopic.tsx

@@ -126,7 +126,7 @@ const SelectedTopic = () => {
         {topicDetails.map((topicDetail, idx) => (
           <Fragment key={topicDetail.id}>
             <PinsOfTopic
-              topicId={topicId}
+              topicId={topicId.split(',')[idx]}
               idx={idx}
               topicDetail={topicDetail}
               setSelectedPinId={setSelectedPinId}

frontend/src/types/Topic.ts

@@ -40,10 +40,10 @@ export interface ModalTopicCardProps {
 
 export interface TopicAuthorInfo {
   publicity: 'PUBLIC' | 'PRIVATE';
-  permissionMembers: TopicAuthorMemberWithId[];
+  permissionedMembers: TopicAuthorMemberWithAuthorId[];
 }
 
-export interface TopicAuthorMemberWithId {
+export interface TopicAuthorMemberWithAuthorId {
   id: number;
   memberResponse: TopicAuthorMember;
 }