Merge branch 'develop' of https://github.com/BDD-CLUB/01-doo-re-front …

…into Feature/#371-학습자료_상세_조회_에러_처리
BDD-CLUB · Feb 11, 2025 · 6d76d9f · 6d76d9f
2 parents e167933 + d90ef16
commit 6d76d9f
Show file tree

Hide file tree

Showing 17 changed files with 128 additions and 28 deletions.
diff --git a/src/app/team/[teamId]/document/page.tsx b/src/app/team/[teamId]/document/page.tsx
@@ -36,6 +36,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
       </Flex>
       <Documents teamId={params.teamId} groupId={params.teamId} category="teams" refetchTrigger={openCreateModal} />
       <CreateDocumentModal
+        isTeam
         isOpen={openCreateModal}
         onClose={() => setOpenCreateModal(false)}
         categoryData={categoryData}

diff --git a/src/app/team/[teamId]/page.tsx b/src/app/team/[teamId]/page.tsx
@@ -251,6 +251,7 @@ const Page = ({ params }: { params: { teamId: number } }) => {
         studyInfo={null}
       />
       <CreateDocumentModal
+        isTeam
         isOpen={isCreateDocumentModalOpen}
         onClose={() => setIsCreateDocumentModalOpen(false)}
         categoryData={categoryData}

diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx
@@ -9,6 +9,7 @@ import { MdOutlineArrowForwardIos } from 'react-icons/md';
 
 import { getDocumentList } from '@/app/api/document';
 import { getStudy, getStudyMembers } from '@/app/api/study';
+import { useGetTeamInfoQuery } from '@/app/api/team';
 import DocumentCard from '@/components/DocumentCard';
 import Title from '@/components/Title';
 import CreateDocumentModal from '@/containers/study/CreateDocumentModal';
@@ -28,6 +29,7 @@ import useGetUser from '@/hooks/useGetUser';
 import { DocumentList, ParticipantType, Study, StudyMember } from '@/types';
 
 const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
+  const { data: teamInfo } = useGetTeamInfoQuery(params.teamId);
   const [studyData, setStudyData] = useState<Study>();
   const [isEditModalOpen, setIsEditModalOpen] = useState<boolean>(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState<boolean>(false);
@@ -40,6 +42,8 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
   const router = useRouter();
   const user = useGetUser();
   const myTeam = useGetMyTeam();
+  const [isTeamLeader, setIsTeamLeader] = useState<boolean>(false);
+  const [isStudyLeader, setIsStudyLeader] = useState<boolean>(false);
   if (user && !user.isLogin) router.replace(`/team/${params.teamId}`);
   if (myTeam && !myTeam.some((id) => id === +params.teamId)) router.replace(`/team/${params.teamId}`);
 
@@ -55,6 +59,16 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
       }) as ParticipantType,
   );
 
+  useEffect(() => {
+    if (!user || !teamInfo) return;
+    setIsTeamLeader(user.memberId === teamInfo.body.teamLeaderId);
+  }, [user, teamInfo, result]);
+
+  useEffect(() => {
+    if (!user || !studyData) return;
+    setIsStudyLeader(user.memberId === studyData.studyLeaderId);
+  }, [user, studyData, result]);
+
   useEffect(() => {
     getStudy(params.studyId).then((data) => {
       setStudyData(data.body);
@@ -176,11 +190,12 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
             {/* <Feed /> */}
             <Flex align="right" direction="column" rowGap="3">
-              {studyData && user && user.memberId === studyData.studyLeaderId && (
+              {studyData && user && (isTeamLeader || isStudyLeader) && (
                 <StudyParticipantMenu
                   studyId={params.studyId}
                   teamId={studyData?.teamReference.id}
                   leaderId={studyData?.studyLeaderId}
+                  isTeamLeader={isTeamLeader}
                   studyMembers={result || []}
                   refetchMembers={handleRefetchMembers}
                 />

diff --git a/src/components/DocumentCard/index.tsx b/src/components/DocumentCard/index.tsx
@@ -8,6 +8,7 @@ import DocumentModal from '@/containers/study/DocumentModal';
 import { DocumentList } from '@/types';
 
 const DocumentCard = ({
+  isTeam = false,
   teamId,
   studyId,
   id,
@@ -50,6 +51,7 @@ const DocumentCard = ({
       rounded="xl"
     >
       <DocumentModal
+        isTeam={isTeam}
         teamId={teamId}
         studyId={studyId}
         id={id}

diff --git a/src/components/ParticipantMenu/ParticipantItem/index.tsx b/src/components/ParticipantMenu/ParticipantItem/index.tsx
@@ -4,7 +4,16 @@ import { RiAddLine, RiCloseFill, RiVipCrownLine } from 'react-icons/ri';
 import { ParticipantItemProps } from '@/components/ParticipantMenu/types';
 import colors from '@/theme/foundations/colors';
 
-const ParticipantItem = ({ member, type, isLeader, onAdd, onMandateLeader, onRemove }: ParticipantItemProps) => {
+const ParticipantItem = ({
+  member,
+  type,
+  isLeader,
+  isTeamLeader,
+  category,
+  onAdd,
+  onMandateLeader,
+  onRemove,
+}: ParticipantItemProps) => {
   const handleDeleteMember = () => {
     onRemove(member);
   };
@@ -43,7 +52,7 @@ const ParticipantItem = ({ member, type, isLeader, onAdd, onMandateLeader, onRem
           {member.name}
         </Text>
       </Flex>
-      {isLeader && type === 'INCLUDE' && (
+      {isTeamLeader && !isLeader && type === 'LEADER' && (
         <Flex
           gap="2"
           ml="auto"
@@ -61,15 +70,37 @@ const ParticipantItem = ({ member, type, isLeader, onAdd, onMandateLeader, onRem
             onClick={handleDeleteMember}
             size="icon_sm"
           />
+        </Flex>
+      )}
+      {isLeader && type === 'INCLUDE' && (
+        <Flex
+          gap="2"
+          ml="auto"
+          _groupHover={{
+            visibility: 'visible',
+          }}
+          visibility="hidden"
+        >
           <IconButton
             color="orange_dark"
             _hover={{ bgColor: 'transparent' }}
             aria-label=""
             bgColor="transparent"
-            icon={<RiVipCrownLine />}
-            onClick={handleMandateLeader}
+            icon={<RiCloseFill />}
+            onClick={handleDeleteMember}
             size="icon_sm"
           />
+          {(category !== 'studies' || !isTeamLeader || isLeader) && (
+            <IconButton
+              color="orange_dark"
+              _hover={{ bgColor: 'transparent' }}
+              aria-label=""
+              bgColor="transparent"
+              icon={<RiVipCrownLine />}
+              onClick={handleMandateLeader}
+              size="icon_sm"
+            />
+          )}
         </Flex>
       )}
       {isLeader && type === 'EXCLUDE' && (

diff --git a/src/components/ParticipantMenu/index.tsx b/src/components/ParticipantMenu/index.tsx
@@ -17,6 +17,8 @@ const ParticipantMenu = ({
   excludeMembers = [],
   children,
   isOpen,
+  isTeamLeader,
+  category,
   setIsOpen,
   onRemove = defaultFunction,
   onAdd = defaultFunction,
@@ -30,6 +32,7 @@ const ParticipantMenu = ({
   const searchedLeader = leader?.name.includes(search) ? leader : null;
   const searchedIncludeMember = includeMembers.filter((member) => member.name.includes(search));
   const searchedExcludeMember = excludeMembers.filter((member) => member.name.includes(search));
+  const isLeader = user?.memberId === leader?.id;
 
   useEffect(() => {
     const handleOutsideClose = (e: MouseEvent) => {
@@ -80,6 +83,9 @@ const ParticipantMenu = ({
                 key={searchedLeader.id}
                 member={searchedLeader}
                 type="LEADER"
+                isLeader={isLeader}
+                isTeamLeader={isTeamLeader}
+                category={category}
                 onRemove={onRemove}
                 onAdd={onAdd}
                 onMandateLeader={onMandateLeader}
@@ -90,24 +96,31 @@ const ParticipantMenu = ({
                 key={member.id}
                 member={member}
                 type="INCLUDE"
-                isLeader={user?.memberId === searchedLeader?.id}
-                onRemove={onRemove}
-                onAdd={onAdd}
-                onMandateLeader={onMandateLeader}
-              />
-            ))}
-            {searchedExcludeMember && searchedExcludeMember.length > 0 && <Divider />}
-            {searchedExcludeMember.map((member: Member) => (
-              <ParticipantItem
-                key={member.id}
-                member={member}
-                type="EXCLUDE"
-                isLeader={user?.memberId === searchedLeader?.id}
+                isLeader={isLeader}
+                isTeamLeader={isTeamLeader}
+                category={category}
                 onRemove={onRemove}
                 onAdd={onAdd}
                 onMandateLeader={onMandateLeader}
               />
             ))}
+            {(isLeader || !isTeamLeader) && searchedExcludeMember?.length > 0 && (
+              <>
+                <Divider />
+                {searchedExcludeMember.map((member: Member) => (
+                  <ParticipantItem
+                    key={member.id}
+                    member={member}
+                    type="EXCLUDE"
+                    isLeader={isLeader}
+                    category={category}
+                    onRemove={onRemove}
+                    onAdd={onAdd}
+                    onMandateLeader={onMandateLeader}
+                  />
+                ))}
+              </>
+            )}
           </Flex>
         </Flex>
       </Flex>

diff --git a/src/components/ParticipantMenu/types.ts b/src/components/ParticipantMenu/types.ts
@@ -9,6 +9,8 @@ export interface ParticipantMenuProps extends FlexProps {
   excludeMembers?: Member[];
   children: ReactNode;
   isOpen: boolean;
+  isTeamLeader?: boolean;
+  category: 'teams' | 'studies';
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   onRemove?: (member: Member) => void;
   onAdd?: (member: Member) => void;
@@ -19,6 +21,8 @@ export interface ParticipantItemProps {
   member: Member;
   type: 'LEADER' | 'INCLUDE' | 'EXCLUDE';
   isLeader?: boolean;
+  isTeamLeader?: boolean;
+  category: 'teams' | 'studies';
   onRemove: (member: Member) => void;
   onAdd: (member: Member) => void;
   onMandateLeader: (member: Member) => void;

diff --git a/src/containers/document/Documents/index.tsx b/src/containers/document/Documents/index.tsx
@@ -37,6 +37,7 @@ const Documents = ({ teamId, groupId, category, refetchTrigger = false }: Docume
           <Grid gap={{ sm: '2', md: '4', xl: '8' }} templateColumns={`repeat(${itemsPerPage / 2}, 1fr)`} w="100%">
             {currentData.map((data) => (
               <DocumentCard
+                isTeam={category === 'teams'}
                 teamId={teamId}
                 id={data.id}
                 key={data.id}

diff --git a/src/containers/study/CreateDocumentModal/index.tsx b/src/containers/study/CreateDocumentModal/index.tsx
@@ -25,7 +25,7 @@ const DocumentBoxIcon = {
 
 const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
 
-const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: DocumentModalProps) => {
+const CreateDocumentModal = ({ isTeam = false, isOpen, onClose, categoryData, category }: DocumentModalProps) => {
   const [doctype, setDocType] = useState<DocumentType>('IMAGE');
   const [docList, setDocList] = useState<DocumentList>({
     IMAGE: [],
@@ -38,6 +38,7 @@ const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: Docume
   const [title, setTitle] = useState<string>('');
   const [description, setDescription] = useState<string>('');
   const [selectedValue, setSelectedValue] = useState<DocumentAccessType>('ALL');
+  const [confirmPending, setConfirmPending] = useState<boolean>(false);
 
   const createDocs = useMutateWithToken(postDocument);
   const postDocs = useMutateWithToken(putDocument);
@@ -65,11 +66,24 @@ const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: Docume
       URL: [],
     });
     setDocType('IMAGE');
+    setConfirmPending(false);
   };
 
   const user = useGetUser();
 
   const onConfirmButtonClick = () => {
+    if (confirmPending) return;
+    if (
+      category === 'create' &&
+      ((doctype === 'IMAGE' && docList.IMAGE.length === 0) ||
+        (doctype === 'DOCUMENT' && docList.DOCUMENT.length === 0) ||
+        (doctype === 'URL' && docList.URL.length === 0))
+    ) {
+      alert('학습 자료를 업로드해주세요.');
+      return;
+    }
+    setConfirmPending(true);
+
     const createDocumentInfo: Document = {
       title,
       description,
@@ -328,14 +342,16 @@ const CreateDocumentModal = ({ isOpen, onClose, categoryData, category }: Docume
             </Flex>
           </>
         )}
-        <StyledRadioGroup
-          title="공개 범위"
-          defaultValue={category === 'create' ? 'ALL' : (categoryData as DocumentDetail).accessType}
-          onChange={handleChange}
-        >
-          <StyledRadio value="ALL">전체 공개</StyledRadio>
-          <StyledRadio value="TEAM">팀 공개</StyledRadio>
-        </StyledRadioGroup>
+        {isTeam && (
+          <StyledRadioGroup
+            title="공개 범위"
+            defaultValue={category === 'create' ? 'ALL' : (categoryData as DocumentDetail).accessType}
+            onChange={handleChange}
+          >
+            <StyledRadio value="ALL">전체 공개</StyledRadio>
+            <StyledRadio value="TEAM">팀 공개</StyledRadio>
+          </StyledRadioGroup>
+        )}
       </Flex>
     </ActionModal>
   );

diff --git a/src/containers/study/CreateDocumentModal/type.ts b/src/containers/study/CreateDocumentModal/type.ts
@@ -12,6 +12,7 @@ export interface UpdateDocument {
 }
 
 export interface DocumentModalProps {
+  isTeam?: boolean;
   isOpen: boolean;
   onClose: () => void;
   categoryData: CreateDocument | DocumentDetail | undefined;

diff --git a/src/containers/study/DocumentModal/index.tsx b/src/containers/study/DocumentModal/index.tsx
@@ -21,6 +21,7 @@ import { DocumentDetail, Member } from '@/types';
 import { DocumentModalProps } from './types';
 
 const DocumentModal = ({
+  isTeam = false,
   teamId,
   studyId,
   id,
@@ -142,7 +143,13 @@ const DocumentModal = ({
             ))}
         </Flex>
       </Box>
-      <CreateDocumentModal isOpen={createDocsModalOpen} onClose={EditDocs} categoryData={document} category="update" />
+      <CreateDocumentModal
+        isTeam={isTeam}
+        isOpen={createDocsModalOpen}
+        onClose={EditDocs}
+        categoryData={document}
+        category="update"
+      />
     </ActionModal>
   );
 };

diff --git a/src/containers/study/DocumentModal/types.ts b/src/containers/study/DocumentModal/types.ts
@@ -8,6 +8,7 @@ export interface DocumentData {
 export interface DocumentModalProps {
   readonly teamId: number;
   readonly studyId?: number;
+  isTeam?: boolean;
   id: number;
   isOpen: boolean;
   category: 'studies' | 'teams';

diff --git a/src/containers/study/StudyParticipantMenu/index.tsx b/src/containers/study/StudyParticipantMenu/index.tsx
@@ -15,6 +15,7 @@ const StudyParticipantMenu = ({
   studyId,
   teamId,
   leaderId,
+  isTeamLeader,
   studyMembers: originStudyMembers,
   refetchMembers = () => {},
 }: StudyParticipantMenuProps) => {
@@ -67,6 +68,8 @@ const StudyParticipantMenu = ({
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       leader={leader}
+      isTeamLeader={isTeamLeader}
+      category="studies"
       includeMembers={includeMembers}
       excludeMembers={excludeMembers}
       onAdd={handleAddMember}

diff --git a/src/containers/study/StudyParticipantMenu/types.ts b/src/containers/study/StudyParticipantMenu/types.ts
@@ -4,6 +4,7 @@ export interface StudyParticipantMenuProps {
   studyId: number;
   teamId: number;
   leaderId: number;
+  isTeamLeader: boolean;
   studyMembers: StudyMember[];
   refetchMembers?: () => void;
 }
diff --git a/src/containers/team/DocumentGridView/index.tsx b/src/containers/team/DocumentGridView/index.tsx
@@ -10,6 +10,7 @@ const DocumentGridView = ({ teamId, documentArray, setReload = () => {} }: Docum
       {documentArray?.map((document) => {
         return (
           <DocumentCard
+            isTeam
             teamId={teamId}
             key={document.id}
             id={document.id}

diff --git a/src/containers/team/teamMember/index.tsx b/src/containers/team/teamMember/index.tsx
@@ -68,6 +68,7 @@ const TeamMember = ({ teamId, teamName }: { teamId: number; teamName: string })
         leader={teamLeader}
         includeMembers={teamMembers}
         isOpen={isOpen}
+        category="teams"
         setIsOpen={setIsOpen}
         onRemove={handleRemoveButtonClick}
         onMandateLeader={handleMandateLeaderButtonClick}