[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';
@@ -13,17 +16,17 @@ import useGet from '../../apiHooks/useGet';
 
 interface AuthorityRadioContainer {
   isPrivate: boolean;
-  isAll: boolean;
+  isPublic: boolean;
   authorizedMemberIds: number[];
   setIsPrivate: React.Dispatch<React.SetStateAction<boolean>>;
   setIsAll: React.Dispatch<React.SetStateAction<boolean>>;
   setAuthorizedMemberIds: React.Dispatch<React.SetStateAction<number[]>>;
-  permissionedMembers?: TopicAuthorMemberWithId[];
+  permissionedMembers?: TopicAuthorMemberWithAuthorId[];
 }
 
 const AuthorityRadioContainer = ({
   isPrivate,
-  isAll,
+  isPublic,
   authorizedMemberIds,
   setIsPrivate,
   setIsAll,
@@ -34,6 +37,8 @@ const AuthorityRadioContainer = ({
   const { fetchGet } = useGet();
 
   const [members, setMembers] = useState<TopicAuthorMember[]>([]);
+  const viewPrevAuthorMembersCondition =
+    authorizedMemberIds.length === 0 && !isPublic;
 
   useEffect(() => {
     fetchGet<TopicAuthorMember[]>(
@@ -108,7 +113,7 @@ const AuthorityRadioContainer = ({
           <input
             type="radio"
             id="permission-all"
-            checked={isAll}
+            checked={isPublic}
             onChange={onChangeInitAuthMembersWithSetIsAll}
             tabIndex={5}
           />
@@ -125,10 +130,10 @@ const AuthorityRadioContainer = ({
         <input
           type="radio"
           id="permission-group"
-          checked={!isAll}
+          checked={!isPublic}
           onChange={onChangeInitAuthMembers}
           onClick={() => {
-            isAll === false && openModal('newTopic');
+            isPublic === false && openModal('newTopic');
           }}
           tabIndex={5}
         />
@@ -162,25 +167,31 @@ const AuthorityRadioContainer = ({
         </>
       )}
 
-      {authorizedMemberIds.length === 0 && permissionedMembers && (
+      {permissionedMembers && viewPrevAuthorMembersCondition && (
         <>
           <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

@@ -47,7 +47,7 @@ const UpdatedTopicInfo = ({
   const [topicAuthorInfo, setTopicAuthorInfo] =
     useState<TopicAuthorInfo | null>(null);
   const [isPrivate, setIsPrivate] = useState(false); // 혼자 볼 지도 :  같이 볼 지도
-  const [isAll, setIsAll] = useState(true); // 모두 : 지정 인원
+  const [isPublic, setIsPublic] = useState(true); // 모두 : 지정 인원
   const [authorizedMemberIds, setAuthorizedMemberIds] = useState<number[]>([]);
 
   const updateTopicInfo = async () => {
@@ -59,9 +59,9 @@ const UpdatedTopicInfo = ({
           image,
           description: formValues.description,
           publicity: isPrivate ? 'PRIVATE' : 'PUBLIC',
-          permissionType: isAll && !isPrivate ? 'ALL_MEMBERS' : 'GROUP_ONLY',
+          permissionType: isPublic && !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);
-        }
+        setIsPublic(response.permissionedMembers.length === 0);
       },
     );
   }, []);
@@ -142,12 +140,12 @@ const UpdatedTopicInfo = ({
 
       <AuthorityRadioContainer
         isPrivate={isPrivate}
-        isAll={isAll}
+        isPublic={isPublic}
         authorizedMemberIds={authorizedMemberIds}
         setIsPrivate={setIsPrivate}
-        setIsAll={setIsAll}
+        setIsAll={setIsPublic}
         setAuthorizedMemberIds={setAuthorizedMemberIds}
-        permissionedMembers={topicAuthorInfo?.permissionMembers}
+        permissionedMembers={topicAuthorInfo?.permissionedMembers}
       />
 
       <Space size={6} />

frontend/src/pages/NewTopic.tsx

@@ -35,7 +35,7 @@ const NewTopic = () => {
     });
 
   const [isPrivate, setIsPrivate] = useState(false); // 혼자 볼 지도 :  같이 볼 지도
-  const [isAll, setIsAll] = useState(true); // 모두 : 지정 인원
+  const [isPublic, setIsPublic] = useState(true); // 모두 : 지정 인원
   const [authorizedMemberIds, setAuthorizedMemberIds] = useState<number[]>([]);
 
   const goToBack = () => {
@@ -77,7 +77,7 @@ const NewTopic = () => {
         description: formValues.description,
         pins: pulledPinIds ? pulledPinIds.split(',') : [],
         publicity: isPrivate ? 'PRIVATE' : 'PUBLIC',
-        permissionType: isAll && !isPrivate ? 'ALL_MEMBERS' : 'GROUP_ONLY',
+        permissionType: isPublic && !isPrivate ? 'ALL_MEMBERS' : 'GROUP_ONLY',
       },
       errorMessage:
         '지도 생성에 실패하였습니다. 입력하신 항목들을 다시 확인해주세요.',
@@ -88,7 +88,7 @@ const NewTopic = () => {
   };
 
   const addAuthorityToTopicWithGroupPermission = async (topicId: number) => {
-    if (isAll) return;
+    if (isPublic) return;
 
     fetchPost({
       url: '/permissions',
@@ -161,10 +161,10 @@ const NewTopic = () => {
 
         <AuthorityRadioContainer
           isPrivate={isPrivate}
-          isAll={isAll}
+          isPublic={isPublic}
           authorizedMemberIds={authorizedMemberIds}
           setIsPrivate={setIsPrivate}
-          setIsAll={setIsAll}
+          setIsAll={setIsPublic}
           setAuthorizedMemberIds={setAuthorizedMemberIds}
         />
 

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;
 }