Merge branch 'develop'

# Conflicts: # README.md # src/pages/SurveyPage.tsx
donga-it-club · Aug 15, 2024 · d649143 · d649143
2 parents 08e5bec + 6779bf4
commit d649143
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 47 deletions.
diff --git a/README.md b/README.md
@@ -23,9 +23,9 @@
 
 <div align="center">
 
-|                                                                **공정민**                                                                 |                                                                 **임희정**                                                                  |                                                            **김예나**                                                            |                                                                  **배금빈**                                                                  |
-| :---------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------: |
-| [<img src="https://avatars.githubusercontent.com/u/102538362?v=4" height=150 width=150> <br/> @jeongmin59](https://github.com/jeongmin59) | [<img src="https://avatars.githubusercontent.com/u/138123134?v=4" height=150 width=150> <br/> @heejung0413](https://github.com/heejung0413) | [<img src="https://avatars.githubusercontent.com/u/76564438?v=4" height=150 width=150> <br/> @yeneua](https://github.com/yeneua) | [<img src="https://avatars.githubusercontent.com/u/84950772?v=4" height=150 width=150> <br/> @sunflower888](https://github.com/sunflower888) |
+|                                                                 **임희정**                                                                  |                                                            **김예나**                                                            |                                                                **공정민**                                                                 |                                                                  **배금빈**                                                                  |
+| :-----------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------: |
+| [<img src="https://avatars.githubusercontent.com/u/138123134?v=4" height=150 width=150> <br/> @heejung0413](https://github.com/heejung0413) | [<img src="https://avatars.githubusercontent.com/u/76564438?v=4" height=150 width=150> <br/> @yeneua](https://github.com/yeneua) | [<img src="https://avatars.githubusercontent.com/u/102538362?v=4" height=150 width=150> <br/> @jeongmin59](https://github.com/jeongmin59) | [<img src="https://avatars.githubusercontent.com/u/84950772?v=4" height=150 width=150> <br/> @sunflower888](https://github.com/sunflower888) |
 
 </div>
 
@@ -56,7 +56,7 @@
   - 변수 타입을 지정하고 javascript로 컴파일되어 실행할 수 있습니다.
   - 컴파일 과정에서 타입을 지정함으로써, 에러 예방과 손쉬운 디버깅이 가능했습니다.
 
-### styled-component, Chakra UI
+### styled-components, Chakra UI
 
 - styled-component
   - props를 이용한 조건부 스타일링을 활용하여 상황에 알맞은 스타일을 적용시킬 수 있었습니다.
@@ -65,7 +65,7 @@
 - Chakra UI
   - React 애플리케이션을 빌드하는데 필요한 블록을 간단하고 모듈적이며 접근 가능하게 만들 수 있는 UI 컴포넌트 라이브러리입니다.
 
-### eslint, prettier
+### Eslint, Prettier
 
 - 정해진 규칙에 따라 자동적으로 코드 스타일을 정리해 코드의 일관성을 유지하고자 했습니다.
 - 코드 품질 관리는 eslint에, 코드 포맷팅은 prettier에 일임해 사용했습니다.
@@ -76,16 +76,6 @@
 
 ## 3. 역할 분담
 
-### 🤩공정민
-
-- **UI**
-  - 페이지 : 회고 생성 페이지, 프로필 페이지, 설문조사 페이지
-  - 공통 컴포넌트 : 팀원 초대 모달
-- **기능**
-  - Cognito 인증 처리
-  - Amplify ui를 활용한 로그인 및 회원가입 페이지 구현
-  - 개발환경 구축 (webpack 사용)
-
 <br>
 
 ### 👻임희정
@@ -96,6 +86,8 @@
 - **기능**
   - 백엔드에서 주어진 API 타입 작성, API 비동기 함수 객체 설정
   - 회고 카드 작성 페이지 전반적 작업 ( 댓글 기능, 좋아요, 회고 카드 작성 및 수정)
+  - 알림 기능
+- **개발환경 구축**
   - MSW 설정
   - ESLint, Prettier 정책 설정
   - Chakra UI 공통 theme 설정 및 브랜드 컬러 커스텀
@@ -106,12 +98,25 @@
 
 - **UI**
 
-  - 페이지: RetroList 페이지, Main 화면 서브 페이지 디자인, Action Items 담당자 지정 창
+  - 페이지: RetroList 페이지, Main 화면 서브 페이지 디자인, Action Items 담당자 지정 창, 그룹화 페이지
 
 - **기능**
   - 메인 페이지 react-fullpage 라이브러리 적용
   - RetroList API 연결
   - Action Items 담당자 지정 창 API 연결
+  - 그룹화 기능 구현
+
+<br>
+
+### 🤩공정민
+
+- **UI**
+  - 페이지 : 회고 생성 페이지, 프로필 페이지, 설문조사 페이지
+  - 공통 컴포넌트 : 팀원 초대 모달
+- **기능**
+  - Cognito 인증 처리
+  - Amplify ui를 활용한 로그인 및 회원가입 페이지 구현
+  - 개발환경 구축 (webpack 사용)
 
 <br>
 
@@ -123,6 +128,7 @@
   - 설문조사 페이지 API 연결
   - 메인 페이지 Contact API 연결
   - 데이터 분석을 위한 버튼 Id 값 입력
+  - 공지사항 게시판 전반적인 기능 구현
 
 <br>
 
@@ -265,3 +271,11 @@
 | ![invited](https://github.com/donga-it-club/past-forward-frontend/assets/138123134/fa2f03f1-07ef-4cf3-bb07-07e64de20dc3) |
 
 <br>
+
+#### 5. 그룹화 페이지
+
+- 생성한 회고들을 그룹화 시킬 수 있습니다.
+
+| 그룹화페이지                                                                              |
+| ----------------------------------------------------------------------------------------- |
+| ![group](https://github.com/user-attachments/assets/a8d746c4-4621-417a-9092-7a428518ef7a) |
diff --git a/src/api/inviteTeamApi/postInviteTeam.tsx b/src/api/inviteTeamApi/postInviteTeam.tsx
@@ -1,7 +1,19 @@
 // import { PostInviteTeamRequest } from '../@types/InviteTeam';
 import axiosInstance from '../axiosConfig';
 
-const postInviteTeam = async (invitationId: string) => {
+export interface InviteTeamData {
+  teamId: number;
+  userId: number;
+  role: string;
+}
+
+export interface InviteTeamResponse {
+  code: number;
+  message: string;
+  data: InviteTeamData;
+}
+
+const postInviteTeam = async (invitationId: string): Promise<InviteTeamResponse> => {
   try {
     const response = await axiosInstance.post('/teams/accept-invitation', {
       invitationCode: invitationId, // useParams 로 받아온 코드

diff --git a/src/components/RetroList/ContentsList.tsx b/src/components/RetroList/ContentsList.tsx
@@ -104,7 +104,6 @@ const ContentList: React.FC<ContentListProps> = ({ data, viewMode, searchData, s
             filename: item.thumbnail,
             method: 'GET',
           });
-          // console.log('s3 사진 받아오기 성공', imageResponse.data.preSignedUrl);
           setImage(prevImage => ({
             ...prevImage,
             [item.id]: imageResponse.data.preSignedUrl,

diff --git a/src/components/alarm/Alarm.tsx b/src/components/alarm/Alarm.tsx
@@ -76,8 +76,10 @@ const Alarm = () => {
     try {
       if (user && user.userId) {
         await NotificationServices.delete({ userId: user.userId });
-        setRender(prev => !prev);
       }
+      setRender(prev => !prev);
+      setOtherNotification([]);
+      setTodayNotification([]);
     } catch {
       toast.error('전체 삭제가 처리되지 않았습니다.');
     }
@@ -87,15 +89,23 @@ const Alarm = () => {
     try {
       await NotificationServices.readPost({ notificationId: notificationId });
       setRender(prev => !prev);
+      const isOtherNotification = otherNotification.some(
+        notification => notification.notificationId === notificationId,
+      );
+      if (isOtherNotification) {
+        setOtherNotification([]);
+      } else {
+        setTodayNotification([]);
+      }
     } catch {
       console.error('error');
     }
   };
 
   useEffect(() => {
-    fetchNotification();
     fetchUser();
-  }, [render]);
+    fetchNotification();
+  }, [todayNotification.length, otherNotification.length, render]);
 
   useEffect(() => {
     if (notification) {
@@ -108,11 +118,11 @@ const Alarm = () => {
       <PopoverTrigger>
         <S.IconStyle border-radius="50%">
           <Bell size={20} />
-          {notification && notification.length > 0 && (
+          {todayNotification.concat(otherNotification).length > 0 ? (
             <>
               <S.notificationBadge>{todayNotification.concat(otherNotification).length}</S.notificationBadge>
             </>
-          )}
+          ) : null}
         </S.IconStyle>
       </PopoverTrigger>
       <Portal>
@@ -208,9 +218,6 @@ const Alarm = () => {
                 <S.MenuText style={{ margin: '0 auto' }}>알림 없음</S.MenuText>
               )}
             </Flex>
-
-            {/* <S.MenuText>어제 받은 알림</S.MenuText>
-            <S.AlarmContents>이채연님이 회고보드에 댓글을 작성했습니다 </S.AlarmContents> */}
           </PopoverFooter>
         </PopoverContent>
       </Portal>

diff --git a/src/components/inviteTeam/AcceptInvite.tsx b/src/components/inviteTeam/AcceptInvite.tsx
@@ -45,6 +45,11 @@ const AcceptInvite: React.FC = () => {
             toast.error('리더는 초대 수락을 할 수 없습니다.');
           }
 
+          if (response.code == 400) {
+            toast.error('유효하지 않은 초대 메세지입니다.');
+            navigate('/');
+          }
+
           if (response.data.role === 'MEMBER') {
             setInviteSuccess(true); // 초대 요청이 성공했을 때 상태를 true로 변경
           } else {

diff --git a/src/components/layout/parts/ProfileNavBar.tsx b/src/components/layout/parts/ProfileNavBar.tsx
@@ -1,4 +1,3 @@
-import { Gear } from 'react-bootstrap-icons';
 import { GiHamburgerMenu } from 'react-icons/gi';
 import { useNavigate } from 'react-router-dom';
 import { Button, Drawer, DrawerContent, DrawerOverlay, Flex, useDisclosure } from '@chakra-ui/react';
@@ -67,9 +66,6 @@ const PageNavBar = () => {
                 </div>
               </S.IconStyle>
               <Flex display={{ base: 'none', md: 'flex' }}>
-                <S.IconStyle border-radius="45%">
-                  <Gear />
-                </S.IconStyle>
                 <Alarm />
               </Flex>
               <Button style={{ marginRight: '0.3rem' }} variant="ghost" onClick={handleLoginOrLogout}>

diff --git a/src/components/user/UserNickname.tsx b/src/components/user/UserNickname.tsx
@@ -13,7 +13,6 @@ const UserNickname: React.FC<Props> = ({ setUserNickname }) => {
   async function handleFetchUserAttributes() {
     try {
       const userAttributes = await fetchUserAttributes();
-      console.log(userAttributes);
       setUserNickname(userAttributes.nickname || null);
     } catch (err) {
       console.log(err);

diff --git a/src/components/writeRetro/layout/AddTask.tsx b/src/components/writeRetro/layout/AddTask.tsx
@@ -1,5 +1,6 @@
 import { FC, useState } from 'react';
 import { AiFillPlusCircle } from 'react-icons/ai';
+import { Button, Flex } from '@chakra-ui/react';
 import { SectionServices } from '@/api/services/Section';
 import { useCustomToast } from '@/hooks/useCustomToast';
 import * as S from '@/styles/writeRetroStyles/Layout.style';
@@ -11,15 +12,17 @@ interface Props {
 }
 
 export const AddTask: FC<Props> = ({ retrospectiveId, template, setRendering }) => {
-  const [isVisible, setIsVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
   const toast = useCustomToast();
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [content, setContent] = useState<string>('');
 
   const handleClick = () => {
     setIsVisible(isVisible => !isVisible);
   };
 
   const handleAddSection = async () => {
+    setIsDisabled(true);
     try {
       if (retrospectiveId) {
         await SectionServices.create({
@@ -28,6 +31,7 @@ export const AddTask: FC<Props> = ({ retrospectiveId, template, setRendering })
           sectionContent: content,
         });
       }
+      setTimeout(() => setIsDisabled(false), 1500);
       toast.success('회고 카드가 추가되었습니다.');
       setRendering(prev => !prev);
       setContent('');
@@ -56,10 +60,18 @@ export const AddTask: FC<Props> = ({ retrospectiveId, template, setRendering })
               }}
               placeholder="내용을 입력해주세요"
               rows={1}
-            ></S.InputTask>
-            <S.InputButton style={{ marginTop: '10px', marginLeft: '60%' }} onClick={handleAddSection}>
-              확인
-            </S.InputButton>
+            />
+            <Flex flexDirection="row-reverse">
+              {isDisabled ? (
+                <Button marginTop={10} margin="5px 10px" colorScheme="blue" isLoading loadingText="Loading">
+                  로딩 중
+                </Button>
+              ) : (
+                <Button marginTop={10} margin="5px 10px" colorScheme="brand" onClick={handleAddSection}>
+                  확인
+                </Button>
+              )}
+            </Flex>
           </S.InputTaskBox>
         )}
       </S.AddTaskButtonStyle>

diff --git a/src/components/writeRetro/task/ReviseCommentModal.tsx b/src/components/writeRetro/task/ReviseCommentModal.tsx
@@ -17,14 +17,12 @@ import * as S from '@/styles/writeRetroStyles/Layout.style';
 interface Props {
   comment: CommentData;
   setRendering: React.Dispatch<React.SetStateAction<boolean>>;
-  section: CommentData;
 }
 
-const ReviseCommentModal: FC<Props> = ({ comment, setRendering, section }) => {
+const ReviseCommentModal: FC<Props> = ({ comment, setRendering }) => {
   // Input 높이 자동 조절
   const [value, setValue] = useState('');
   const toast = useCustomToast();
-  console.log(section);
 
   const ChangeContent = async () => {
     try {

diff --git a/src/components/writeRetro/task/TeamTask.tsx b/src/components/writeRetro/task/TeamTask.tsx
@@ -77,7 +77,7 @@ const TeamTask: FC<Props> = ({ section, setRendering, teamId, imageURL, user, fe
       setRendering(prev => !prev);
       toast.info('회고 카드가 삭제되었습니다.');
     } catch {
-      toast.error('존재하지 않는 회고 카드입니다.');
+      toast.error('회고 카드가 삭제되지 않았습니다.');
     }
   };
 

diff --git a/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx b/src/components/writeRetro/task/taskMessage/TeamTaskMessage.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, FC, useEffect, useState } from 'react';
 import { CgProfile } from 'react-icons/cg';
-import { Center, Flex, Spinner } from '@chakra-ui/react';
+import { Button, Center, Flex, Spinner } from '@chakra-ui/react';
 import DeleteData from '../DeleteData';
 import ReviseCommentModal from '../ReviseCommentModal';
 import { CommentData, sectionData } from '@/api/@types/Section';
@@ -23,15 +23,18 @@ const TeamTaskMessage: FC<Props> = ({ section, setRendering, user, teamId }) =>
   const toast = useCustomToast();
   const [image, setImage] = useState<{ [key: number]: string }>('');
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [isImageLoaded, setIsImageLoaded] = useState(false);
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setValue(e.target.value);
   };
 
   const handlePostComment = async () => {
+    setIsDisabled(true);
     try {
       await CommentService.post({ sectionId: section.sectionId, commentContent: value });
+      setTimeout(() => setIsDisabled(false), 1500);
       setRendering(prev => !prev);
       setIsLoading(false);
       setValue('');
@@ -151,7 +154,13 @@ const TeamTaskMessage: FC<Props> = ({ section, setRendering, user, teamId }) =>
         {/* AddMessage */}
         <Flex>
           <S.InputMessage value={value} onChange={handleChange} placeholder="내용을 입력해주세요" rows={1} />
-          <S.InputButton onClick={handlePostComment}>확인</S.InputButton>
+          {isDisabled ? (
+            <Button marginTop={10} margin="5px 10px" colorScheme="blue" isLoading loadingText="Loading">
+              로딩 중
+            </Button>
+          ) : (
+            <S.InputButton onClick={handlePostComment}>확인</S.InputButton>
+          )}
         </Flex>
       </S.TaskMessageBoxStyle>
     </>

diff --git a/src/pages/SurveyPage.tsx b/src/pages/SurveyPage.tsx
@@ -28,7 +28,7 @@ const SurveyPage: React.FC = () => {
 
   const handleSurvey = async () => {
     try {
-      const SurveyRequest = await PostSurvey({
+      await PostSurvey({
         age: numAge,
         gender: gender,
         occupation: job,
@@ -37,7 +37,6 @@ const SurveyPage: React.FC = () => {
         purposes: purpose,
         emailConsents: emailConsents,
       });
-      console.log('설문조사 전송 성공', SurveyRequest);
       alert('설문조사가 전송되었습니다.');
       // 회고 작성 페이지로 이동
       navigate('/create');

diff --git a/src/styles/writeRetroStyles/Layout.style.ts b/src/styles/writeRetroStyles/Layout.style.ts
@@ -280,9 +280,6 @@ export const TaskText = styled.p`
   margin: 20px 0;
   margin-right: 10px;
   margin-top: 20px;
-  &:hover {
-    cursor: pointer;
-  }
 `;
 
 export const ReviseText = styled.p`