Merge pull request #89 from AJD-Archive/fix/83

#83 대시보드QA
AJD-Archive · Sep 25, 2024 · 50eff1c · 50eff1c
2 parents 8b4686b + 358aec5
commit 50eff1c
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-modal": "^3.16.3",
+    "@types/react-responsive": "^8.0.8",
     "@types/styled-components": "^5.1.34",
     "aos": "^2.3.4",
     "axios": "^1.7.5",
@@ -36,6 +37,7 @@
     "react-intersection-observer": "^9.13.0",
     "react-modal": "^3.16.1",
     "react-paginate": "^8.2.0",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.25.1",
     "react-scripts": "^5.0.1",
     "react-textarea-autosize": "^8.5.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -35,6 +35,9 @@ import { useSSE } from './hooks/useSSE';
 import ProtectedRoute from './components/ProtectedRoute';
 import Error404Page from './pages/Error404Page';
 import Error403Page from './pages/Error403Page';
+import { useMediaQuery } from 'react-responsive';
+import Flex from './components/Flex';
+import { MobileDisplay } from './styles/ErrorPageStyled';
 
 const queryClient = new QueryClient();
 
@@ -222,13 +225,24 @@ const router = (isLoggedIn: boolean) =>
   );
 
 const App: React.FC = () => {
+  const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
   const { isLoggedIn, loading } = useAuth(); // 로그인 여부와 로딩 상태 체크
 
   if (loading) {
     // 로딩 중일 때는 아무것도 렌더링하지 않음
     return <div>Loading...</div>;
   }
 
+  if (isMobile) {
+    return (
+      <MobileDisplay>
+        <Flex justifyContent="center" alignItems="center">
+          데스크톱만 지원 합니다
+        </Flex>
+      </MobileDisplay>
+    );
+  }
+
   return (
     <QueryClientProvider client={queryClient}>
       <AuthProvider>
@@ -247,6 +261,7 @@ const App: React.FC = () => {
         />
         <RouterProvider router={router(isLoggedIn)} />
       </AuthProvider>
+
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   );

diff --git a/src/api/TeamDashBoardApi.tsx b/src/api/TeamDashBoardApi.tsx
@@ -33,13 +33,14 @@ export const patchTeamDashBoard = async (
 // * 팀 대시보드 상세 정보 get
 export const getTeamDashboard = async (
   dashboardId: string
-): Promise<TeamDashboardInfoResDto | undefined> => {
+): Promise<TeamDashboardInfoResDto | null> => {
   try {
     const response = await axiosInstance.get(`/dashboards/team/${dashboardId}`);
     console.log('팀 대시보드 중간 확인', response);
     return response.data.data;
   } catch (error) {
     console.error('팀 대시보드 중간 확인에서 error');
+    return null;
   }
 };
 

diff --git a/src/components/NotStartedDashboard.tsx b/src/components/NotStartedDashboard.tsx
@@ -57,7 +57,6 @@ const NotStartedDashboard = ({ list, id, dashboardId, onLoadMore }: Props) => {
 
   useEffect(() => {
     if (inView) {
-      console.log('되긴함?');
       onLoadMore(); // 부모 컴포넌트에 새로운 데이터 요청
     }
   }, [inView]);

diff --git a/src/components/ProfileUpdateModal.tsx b/src/components/ProfileUpdateModal.tsx
@@ -30,7 +30,7 @@ const ProfileUpdateModal = ({ onModalVisibleFunc, nickname, introduction }: Prop
     e.preventDefault();
 
     if (
-      newNickname.length >= 5 ||
+      newNickname.length >= 7 ||
       newNickname === '' ||
       newDescription.length > 20 ||
       newDescription === ''
@@ -56,7 +56,7 @@ const ProfileUpdateModal = ({ onModalVisibleFunc, nickname, introduction }: Prop
     if (e.target.value === '') {
       setErrMsg('한글자 이상은 작성해주세요!');
     } else if (e.target.value.length > 4) {
-      setErrMsg('닉네임은 4자 이하로 작성해주세요');
+      setErrMsg('닉네임은 6자 이하로 작성해주세요');
     }
     setNewNickname(e.target.value);
   };
@@ -87,7 +87,7 @@ const ProfileUpdateModal = ({ onModalVisibleFunc, nickname, introduction }: Prop
               onChange={onNickNameHandler}
               placeholder="닉네임을 입력해주세요"
             />
-            <p>{newNickname.length >= 5 && errMsg}</p>
+            <p>{newNickname.length >= 7 && errMsg}</p>
             <p>{newNickname.length === 0 && errMsg}</p>
           </label>
 

diff --git a/src/pages/ChallengeCommunityPage.tsx b/src/pages/ChallengeCommunityPage.tsx
@@ -9,6 +9,7 @@ import ChallengeCard from '../components/ChallengeCard';
 import { Link } from 'react-router-dom';
 import { Challenge, ChallengeCategory, ChallengeResponse } from '../types/ChallengeType';
 import { getSearchChallenge } from '../api/ChallengeApi';
+import { NotExistingDocument } from '../styles/TeamDocumentStyled';
 
 const ChallengeCommunityPage = () => {
   const [count, setCount] = useState<number>(1); // 총 페이지 수
@@ -130,17 +131,25 @@ const ChallengeCommunityPage = () => {
           </S.SearchBar>
         </S.SearchContainer>
 
-        <Flex justifyContent="center">
-          <S.ChallengeContainer>
-            {challenges?.map((challenge, index) => (
-              <ChallengeCard key={index} challenge={challenge} />
-            ))}
-          </S.ChallengeContainer>
-        </Flex>
+        {challenges?.length !== 0 ? (
+          <>
+            <Flex justifyContent="center">
+              <S.ChallengeContainer>
+                {challenges?.map((challenge, index) => (
+                  <ChallengeCard key={index} challenge={challenge} />
+                ))}
+              </S.ChallengeContainer>
+            </Flex>
 
-        <S.PaginationWrapper>
-          <Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
-        </S.PaginationWrapper>
+            <S.PaginationWrapper>
+              <Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
+            </S.PaginationWrapper>
+          </>
+        ) : (
+          <Flex justifyContent="center" alignItems="center" height={400}>
+            <NotExistingDocument>해당하는 검색결과가 존재하지 않아요</NotExistingDocument>
+          </Flex>
+        )}
       </S.MainDashBoardContainer>
     </S.MainDashBoardLayout>
   );

diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -193,9 +193,12 @@ const MainPage = () => {
 
   const updateProgress = async () => {
     try {
-      // 완료된 블록의 진행률을 다시 받아옴
-      const updatedDashboardDetail = await getPersonalDashboard(dashboardId);
+      const [updatedDashboardDetail, updatedTeamDashboardDetail] = await Promise.all([
+        getPersonalDashboard(dashboardId),
+        getTeamDashboard(dashboardId),
+      ]);
       setDashboardDetail(updatedDashboardDetail); // 진행률 업데이트
+      setTeamDashboardDetail(updatedTeamDashboardDetail);
     } catch (error) {
       console.error('Error updating progress', error);
     }
@@ -280,8 +283,11 @@ const MainPage = () => {
 
   // 대시보드 상세 정보 가져오기
   const fetchDashboardData = async () => {
-    const data = await getPersonalDashboard(dashboardId);
-    if (data) setDashboardDetail(data);
+    const personalData = await getPersonalDashboard(dashboardId);
+    const teamData = await getTeamDashboard(dashboardId);
+
+    if (personalData) setDashboardDetail(personalData);
+    if (teamData) setTeamDashboardDetail(teamData);
   };
 
   // 유효한 데이터에 따라 mainTitle과 subTitle을 설정

diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
@@ -19,8 +19,6 @@ import { useAtom } from 'jotai';
 import { useQuery } from '@tanstack/react-query';
 import Pagination from '@mui/material/Pagination';
 import { notifications, unreadCount } from '../contexts/sseAtom';
-import useTeamDashBoard from '../hooks/useTeamDashBoard';
-import { postTeamDashboard } from '../api/TeamDashBoardApi';
 
 const MyPage = () => {
   const navigate = useNavigate();
@@ -275,7 +273,13 @@ const MyPage = () => {
                   />
                   <S.MainText>{data?.data.name}</S.MainText>
                 </Flex>
-                <S.CaptionText>{data?.data.introduction}</S.CaptionText>
+                <S.CaptionText>
+                  {data?.data.introduction ? (
+                    data?.data.introduction
+                  ) : (
+                    <span>자기 소개를 작성해주세요</span>
+                  )}
+                </S.CaptionText>
               </Flex>
             </Flex>
 

diff --git a/src/pages/TeamDocumentBoard.tsx b/src/pages/TeamDocumentBoard.tsx
@@ -1,9 +1,7 @@
 import Navbar from '../components/Navbar';
-import Folder from '../components/Folder';
 import Flex from '../components/Flex';
 import * as S from '../styles/TeamDocumentStyled';
 import { useLocation, useNavigate } from 'react-router-dom';
-import folderimg from '../img/folderimg.png';
 import { useEffect, useState } from 'react';
 import addbutton from '../img/addbutton.png';
 import leftarrow from '../img/leftarrow.png';
@@ -116,17 +114,25 @@ const TeamDocumentBoard = () => {
           ))}
         </S.CategoriesContainer>
 
-        {/* 팀 문서 컴포넌트 */}
-        <S.DocumentContainer>
-          {teamDocuments.map((document, index) => (
-            <DocumentCard key={index} document={document} />
-          ))}
-        </S.DocumentContainer>
-
-        {/* 페이지네이션 */}
-        <S.PaginationWrapper>
-          <Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
-        </S.PaginationWrapper>
+        {teamDocuments.length === 0 ? (
+          <Flex justifyContent="center" alignItems="center" height={300}>
+            <S.NotExistingDocument>생성된 팀 문서가 없어요</S.NotExistingDocument>
+          </Flex>
+        ) : (
+          <>
+            {/* 팀 문서 컴포넌트 */}
+            <S.DocumentContainer>
+              {teamDocuments.map((document, index) => (
+                <DocumentCard key={index} document={document} />
+              ))}
+            </S.DocumentContainer>
+
+            {/* 페이지네이션 */}
+            <S.PaginationWrapper>
+              <Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
+            </S.PaginationWrapper>
+          </>
+        )}
       </S.MainDashBoardContainer>
       <Outlet /> {/* 사이드 페이지를 위한 중첩 라우팅 */}
     </S.MainDashBoardLayout>

diff --git a/src/styles/ErrorPageStyled.tsx b/src/styles/ErrorPageStyled.tsx
@@ -37,3 +37,14 @@ export const HomeLink = styled(Content)`
     border-bottom: 1px solid ${theme.color.lightGray};
   }
 `;
+
+export const MobileDisplay = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: darkgray;
+`;
diff --git a/src/styles/TeamDocumentStyled.tsx b/src/styles/TeamDocumentStyled.tsx
@@ -172,3 +172,9 @@ export const FileImgWrapper = styled.div`
 export const FolderContainer = styled.div`
   padding: 1.1875rem 2.125rem;
 `;
+
+export const NotExistingDocument = styled.div`
+  font-size: 1.2rem;
+  color: lightgray;
+  font-weight: 600;
+`;
diff --git a/yarn.lock b/yarn.lock
@@ -2936,6 +2936,13 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
+"@types/react-responsive@^8.0.8":
+  version "8.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react-responsive/-/react-responsive-8.0.8.tgz#e351be7cc4d03bc476075839922bb5f9a3094e76"
+  integrity sha512-HDUZtoeFRHrShCGaND23HmXAB9evOOTjkghd2wAasLkuorYYitm5A1XLeKkhXKZppcMBxqB/8V4Snl6hRUTA8g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-toastify@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@types/react-toastify/-/react-toastify-4.1.0.tgz#604e712855dd677916d5c66af595d3b590f5d95d"
@@ -4602,6 +4609,11 @@ css-loader@^6.5.1:
     postcss-value-parser "^4.2.0"
     semver "^7.5.4"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
+
 css-minimizer-webpack-plugin@^3.2.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz#ab78f781ced9181992fe7b6e4f3422e76429878f"
@@ -6764,6 +6776,11 @@ husky@^9.1.1:
   resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.5.tgz#2b6edede53ee1adbbd3a3da490628a23f5243b83"
   integrity sha512-rowAVRUBfI0b4+niA4SJMhfQwc107VLkBUgEYYAOQAbqDCnra1nYh83hF/MDmhYs9t9n1E3DuKOrs2LYNC+0Ag==
 
+hyphenate-style-name@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
+  integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
+
 [email protected]:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8256,6 +8273,13 @@ markdown-table@^3.0.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.3.tgz#e6331d30e493127e031dd385488b5bd326e4a6bd"
   integrity sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==
 
+matchmediaquery@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.4.2.tgz#22582bd4ae63ad9f54c53001bba80cbed0f7eafa"
+  integrity sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==
+  dependencies:
+    css-mediaquery "^0.1.2"
+
 mdast-util-definitions@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz#9910abb60ac5d7115d6819b57ae0bcef07a3f7a7"
@@ -9973,7 +9997,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15, prop-types@^15.5.6, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15, prop-types@^15.5.6, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10412,6 +10436,16 @@ react-remove-scroll@^2.5.7:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-responsive@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.0.tgz#657c7a90823cd565f43aa5918bd8eb0cd2c91c91"
+  integrity sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==
+  dependencies:
+    hyphenate-style-name "^1.0.0"
+    matchmediaquery "^0.4.2"
+    prop-types "^15.6.1"
+    shallow-equal "^3.1.0"
+
 react-router-dom@^6.25.1:
   version "6.26.2"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.26.2.tgz#a6e3b0cbd6bfd508e42b9342099d015a0ac59680"
@@ -11130,6 +11164,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
+shallow-equal@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec"
+  integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==
+
 [email protected]:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"