Revert "[FE] Fix/#472 토픽 수정 시 권한 수정 보류 (#477)"

This reverts commit cd9eb67.
woowacourse-teams · Sep 21, 2023 · a241398 · a241398
1 parent bc7ba08
commit a241398
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 67 deletions.
diff --git a/frontend/src/components/AuthorityRadioContainer/index.tsx b/frontend/src/components/AuthorityRadioContainer/index.tsx
@@ -16,20 +16,20 @@ import useGet from '../../apiHooks/useGet';
 
 interface AuthorityRadioContainer {
   isPrivate: boolean;
-  isAllPermissioned: boolean;
+  isPublic: boolean;
   authorizedMemberIds: number[];
   setIsPrivate: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsAllPermissioned: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsPublic: React.Dispatch<React.SetStateAction<boolean>>;
   setAuthorizedMemberIds: React.Dispatch<React.SetStateAction<number[]>>;
   permissionedMembers?: TopicAuthorMemberWithAuthorId[];
 }
 
 const AuthorityRadioContainer = ({
   isPrivate,
-  isAllPermissioned,
+  isPublic,
   authorizedMemberIds,
   setIsPrivate,
-  setIsAllPermissioned,
+  setIsPublic,
   setAuthorizedMemberIds,
   permissionedMembers,
 }: AuthorityRadioContainer) => {
@@ -38,7 +38,7 @@ const AuthorityRadioContainer = ({
 
   const [members, setMembers] = useState<TopicAuthorMember[]>([]);
   const viewPrevAuthorMembersCondition =
-    authorizedMemberIds.length === 0 && !isAllPermissioned;
+    authorizedMemberIds.length === 0 && !isPublic;
 
   useEffect(() => {
     fetchGet<TopicAuthorMember[]>(
@@ -51,13 +51,13 @@ const AuthorityRadioContainer = ({
   }, []);
 
   const onChangeInitAuthMembers = () => {
-    setIsAllPermissioned(false);
+    setIsPublic(false);
     openModal('newTopic');
     setAuthorizedMemberIds([]);
   };
 
-  const onChangeInitAuthMembersWithSetIsAllPermissioned = () => {
-    setIsAllPermissioned(true);
+  const onChangeInitAuthMembersWithSetIsPublic = () => {
+    setIsPublic(true);
     setAuthorizedMemberIds([]);
   };
 
@@ -113,8 +113,8 @@ const AuthorityRadioContainer = ({
           <input
             type="radio"
             id="permission-all"
-            checked={isAllPermissioned}
-            onChange={onChangeInitAuthMembersWithSetIsAllPermissioned}
+            checked={isPublic}
+            onChange={onChangeInitAuthMembersWithSetIsPublic}
             tabIndex={5}
           />
           <Space size={1} />
@@ -130,10 +130,10 @@ const AuthorityRadioContainer = ({
         <input
           type="radio"
           id="permission-group"
-          checked={!isAllPermissioned}
+          checked={!isPublic}
           onChange={onChangeInitAuthMembers}
           onClick={() => {
-            isAllPermissioned === false && openModal('newTopic');
+            isPublic === false && openModal('newTopic');
           }}
           tabIndex={5}
         />
@@ -242,7 +242,7 @@ const AuthorityRadioContainer = ({
               variant="secondary"
               onClick={() => {
                 closeModal('newTopic');
-                setIsAllPermissioned(true);
+                setIsPublic(true);
                 setAuthorizedMemberIds([]);
               }}
             >

diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx
@@ -109,7 +109,7 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => {
           </RouteButton>
         </Flex>
       </Modal>
-    </>
+    </Wrapper>
   );
 };
 

diff --git a/frontend/src/components/Modal/index.tsx b/frontend/src/components/Modal/index.tsx
@@ -130,7 +130,7 @@ const Wrapper = styled.div<ModalWrapperType>`
   left: ${({ left }) => left && left};
   z-index: 2;
 
-  @media (max-width: 1076px) {
+  @media (max-width: 744px) {
     ${getModalPosition('bottom')};
     width: 100%;
     height: inherit;

diff --git a/frontend/src/components/TopicInfo/UpdatedTopicInfo.tsx b/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 [isAllPermissioned, setIsAllPermissioned] = useState(true); // 모두 : 지정 인원
+  const [isPublic, setIsPublic] = useState(true); // 모두 : 지정 인원
   const [authorizedMemberIds, setAuthorizedMemberIds] = useState<number[]>([]);
 
   const updateTopicInfo = async () => {
@@ -59,39 +59,27 @@ const UpdatedTopicInfo = ({
           image,
           description: formValues.description,
           publicity: isPrivate ? 'PRIVATE' : 'PUBLIC',
-          permissionType:
-            isAllPermissioned && !isPrivate ? 'ALL_MEMBERS' : 'GROUP_ONLY',
+          permissionType: isPublic && !isPrivate ? 'ALL_MEMBERS' : 'GROUP_ONLY',
         },
         errorMessage: `권한은 '공개 ➡️ 비공개', '모두 ➡️ 친구', '친구 ➡️ 혼자' 로 변경할 수 없습니다.`,
         isThrow: true,
       });
 
-      // // TODO : 수정해야하는 로직
-      // if (authorizedMemberIds.length === 0) {
-      //   await deleteTopicPermissionMembers();
-      // }
-
-      // if (authorizedMemberIds.length > 0) {
-      //   await deleteTopicPermissionMembers();
-      //   await updateTopicPermissionMembers();
-      // }
+      if (authorizedMemberIds.length > 0) await updateTopicAuthority();
 
       showToast('info', '지도를 수정하였습니다.');
       setIsUpdate(false);
     } catch {}
   };
 
-  const deleteTopicPermissionMembers = async () => {
-    if (topicAuthorInfo && topicAuthorInfo.permissionedMembers[0]) {
-      await fetchDelete({
-        url: `/permissions/${topicAuthorInfo.permissionedMembers[0].id}`,
-        errorMessage: '권한 삭제에 실패했습니다.',
-        isThrow: true,
-      });
-    }
-  };
+  const updateTopicAuthority = async () => {
+    // topicAuthorInfo api 구조 이상으로 권한 설정 자체에 대한 id를 사용 (topicId 아님)
+    await fetchDelete({
+      url: `/permissions/${topicAuthorInfo?.permissionedMembers[0].id}`,
+      errorMessage: '권한 삭제에 실패했습니다.',
+      isThrow: true,
+    });
 
-  const updateTopicPermissionMembers = async () => {
     await fetchPost({
       url: '/permissions',
       payload: {
@@ -115,7 +103,7 @@ const UpdatedTopicInfo = ({
         setTopicAuthorInfo(response);
         setIsPrivate(response.publicity === 'PRIVATE');
 
-        setIsAllPermissioned(response.permissionedMembers.length === 0);
+        setIsPublic(response.permissionedMembers.length === 0);
       },
     );
   }, []);
@@ -150,15 +138,15 @@ const UpdatedTopicInfo = ({
         maxLength={100}
       />
 
-      {/* <AuthorityRadioContainer
+      <AuthorityRadioContainer
         isPrivate={isPrivate}
-        isAllPermissioned={isAllPermissioned}
+        isPublic={isPublic}
         authorizedMemberIds={authorizedMemberIds}
         setIsPrivate={setIsPrivate}
-        setIsAllPermissioned={setIsAllPermissioned}
+        setIsPublic={setIsPublic}
         setAuthorizedMemberIds={setAuthorizedMemberIds}
         permissionedMembers={topicAuthorInfo?.permissionedMembers}
-      /> */}
+      />
 
       <Space size={6} />
 

diff --git a/frontend/src/pages/NewPin.tsx b/frontend/src/pages/NewPin.tsx
@@ -269,14 +269,11 @@ const NewPin = () => {
           <Space size={5} />
 
           <Text color="black" $fontSize="default" $fontWeight="normal">
-            장소 사진
-          </Text>
-          <Text color="gray" $fontSize="small" $fontWeight="normal">
-            장소에 대한 사진을 추가해주세요.
+            사진 선택
           </Text>
           <Space size={0} />
           <Flex>
-            <ImageInputLabel htmlFor="file">파일 찾기</ImageInputLabel>
+            <ImageInputLabel htmlFor="file">파일찾기</ImageInputLabel>
             <ImageInputButton
               id="file"
               type="file"

diff --git a/frontend/src/pages/NewTopic.tsx b/frontend/src/pages/NewTopic.tsx
@@ -38,7 +38,7 @@ const NewTopic = () => {
   const { compressImage } = useCompressImage();
 
   const [isPrivate, setIsPrivate] = useState(false); // 혼자 볼 지도 :  같이 볼 지도
-  const [isAllPermissioned, setIsAllPermissioned] = useState(true); // 모두 : 지정 인원
+  const [isPublic, setIsPublic] = useState(true); // 모두 : 지정 인원
   const [authorizedMemberIds, setAuthorizedMemberIds] = useState<number[]>([]);
 
   const [showImage, setShowImage] = useState<string>('');
@@ -86,8 +86,7 @@ const NewTopic = () => {
       description: formValues.description,
       pins: pulledPinIds ? pulledPinIds.split(',') : [],
       publicity: isPrivate ? 'PRIVATE' : 'PUBLIC',
-      permissionType:
-        isAllPermissioned && !isPrivate ? 'ALL_MEMBERS' : 'GROUP_ONLY',
+      permissionType: isPublic && !isPrivate ? 'ALL_MEMBERS' : 'GROUP_ONLY',
     };
 
     const data = JSON.stringify(objectData);
@@ -107,13 +106,13 @@ const NewTopic = () => {
   };
 
   const addAuthorityToTopicWithGroupPermission = async (topicId: number) => {
-    if (isAllPermissioned) return;
+    if (isPublic) return;
 
     fetchPost({
       url: '/permissions',
       payload: {
         topicId,
-        memberIds: authorizedMemberIds,
+        memberIds: isPrivate ? [] : authorizedMemberIds,
       },
       errorMessage: `${formValues.name} 지도의 권한 설정에 실패했습니다.`,
     });
@@ -151,21 +150,15 @@ const NewTopic = () => {
         <Space size={5} />
 
         <Text color="black" $fontSize="default" $fontWeight="normal">
-          지도 사진
+          지도 선택
         </Text>
-        <Text color="gray" $fontSize="small" $fontWeight="normal">
-          지도를 대표할 수 있는 사진을 추가해주세요.
-        </Text>
-        <Space size={0} />
+
+        <Space size={2} />
+
         <Flex>
-          {showImage && (
-            <>
-              <ShowImage src={showImage} alt={`사진 이미지`} />{' '}
-              <Space size={2} />{' '}
-            </>
-          )}
-
-          <ImageInputLabel htmlFor="file">파일 찾기</ImageInputLabel>
+          {showImage && <ShowImage src={showImage} alt={`사진 이미지`} />}
+          <Space size={2} />
+          <ImageInputLabel htmlFor="file">파일업로드</ImageInputLabel>
           <ImageInputButton
             id="file"
             type="file"
@@ -208,10 +201,10 @@ const NewTopic = () => {
 
         <AuthorityRadioContainer
           isPrivate={isPrivate}
-          isAllPermissioned={isAllPermissioned}
+          isPublic={isPublic}
           authorizedMemberIds={authorizedMemberIds}
           setIsPrivate={setIsPrivate}
-          setIsAllPermissioned={setIsAllPermissioned}
+          setIsPublic={setIsPublic}
           setAuthorizedMemberIds={setAuthorizedMemberIds}
         />
-Original file line number
+Diff line change
@@ Expand Up / @@ -109,7 +109,7 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => { @@
               </RouteButton>
             </Flex>
           </Modal>
-        </>
+        </Wrapper>
       );
     };
@@ Expand Down @@