Merge pull request #246 from ssu-student-union/hotfix/response-interc…

…eptors-fix Hotfix/response interceptors fix
ssu-student-union · Oct 18, 2024 · bef022c · bef022c
2 parents f5098ff + f5ffbcb
commit bef022c
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 116 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -30,5 +30,6 @@ module.exports = {
         endOfLine: 'auto',
       },
     ],
+    'tailwindcss/classnames-order': 'off',
   },
 };
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/src/apis/client.ts b/src/apis/client.ts
@@ -13,10 +13,13 @@ export const client = axios.create({
 
 client.interceptors.request.use(
   (config: CustomInternalAxiosRequestConfig) => {
+    // console.log(config);
     if (config.requireAuth && localStorage.getItem('accessToken')) {
       const accessToken = localStorage.getItem('accessToken');
       config.headers = config.headers || {};
       config.headers.Authorization = `Bearer ${accessToken}`;
+    } else {
+      return config;
     }
     return config;
   },
@@ -25,6 +28,29 @@ client.interceptors.request.use(
   }
 );
 
+client.interceptors.response.use(
+  (response: AxiosResponse) => {
+    return response;
+  },
+  (error) => {
+    console.log(error.response.data);
+    if (error.response) {
+      console.error('Response error:', error.response.status);
+
+      /* 액세스 토큰 만료 시 로직 처리 */
+      if (error.response.data.code === 'TOKEN_003') {
+        localStorage.clear();
+        window.location.href = '/';
+      }
+    } else if (error.request) {
+      console.error('Request error:', error.request);
+    } else {
+      console.error('Error:', error.message);
+    }
+    return Promise.reject(error);
+  }
+);
+
 export const clientAuth = <T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> => {
   return client({
     ...config,

diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
@@ -64,7 +64,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      'data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp w-full md:absolute md:w-auto',
+      'w-full data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown md:absolute md:w-auto',
       className
     )}
     {...props}

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+// import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  // <React.StrictMode>
+  <App />
+  // </React.StrictMode>
 );
diff --git a/src/pages/main/containers/LostArticleSection.tsx b/src/pages/main/containers/LostArticleSection.tsx
@@ -55,54 +55,63 @@ const LostArticleSection = () => {
         />
       </div>
       <Spacing size={18} direction="vertical" />
+      <div className="flex w-full gap-[1.5rem] overflow-x-scroll scrollbar-hide xs:pr-[1.5rem] sm:pr-[1.5rem]">
+        {data?.data.pageInfo.totalElements ? (
+          <>
+            {/* xs */}
+            {width < 390 && (
+              <>
+                {data?.data.postListResDto.map((item) => (
+                  <PostCardWrapper
+                    key={item.postId}
+                    postId={item.postId}
+                    title={item.title}
+                    subtitle={item.content}
+                    imgUrl={item.thumbNail}
+                    date={item.date}
+                  />
+                ))}
+              </>
+            )}
 
-      {/* xs */}
-      {width < 390 && (
-        <div className="flex w-[calc(100dvw-3.125rem)] gap-[1.063rem] overflow-x-scroll pr-[1.063rem] scrollbar-hide">
-          {data?.data.postListResDto.map((item) => (
-            <PostCardWrapper
-              key={item.postId}
-              postId={item.postId}
-              title={item.title}
-              subtitle={item.content}
-              imgUrl={item.thumbNail}
-              date={item.date}
-            />
-          ))}
-        </div>
-      )}
+            {/* sm, md */}
+            {width >= 390 && width < 1080 && (
+              <>
+                {data?.data.postListResDto.map((item) => (
+                  <PostCardWrapper
+                    key={item.postId}
+                    postId={item.postId}
+                    title={item.title}
+                    subtitle={item.content}
+                    imgUrl={item.thumbNail}
+                    date={item.date}
+                  />
+                ))}
+              </>
+            )}
 
-      {/* sm, md */}
-      {width >= 390 && width < 1080 && (
-        <div className="flex w-[calc(100dvw-3.125rem)] gap-[1.063rem] overflow-x-scroll pr-[1.063rem] scrollbar-hide">
-          {data?.data.postListResDto.map((item) => (
-            <PostCardWrapper
-              key={item.postId}
-              postId={item.postId}
-              title={item.title}
-              subtitle={item.content}
-              imgUrl={item.thumbNail}
-              date={item.date}
-            />
-          ))}
-        </div>
-      )}
-
-      {/* xxl, xl, lg */}
-      {width >= 1080 && (
-        <div className="flex w-[calc(100dvw-3.125rem)] gap-[1.063rem] overflow-x-scroll pr-[1.063rem] scrollbar-hide">
-          {data?.data.postListResDto.map((item) => (
-            <PostCardWrapper
-              key={item.postId}
-              postId={item.postId}
-              title={item.title}
-              subtitle={item.content}
-              imgUrl={item.thumbNail}
-              date={item.date}
-            />
-          ))}
-        </div>
-      )}
+            {/* xxl, xl, lg */}
+            {width >= 1080 && (
+              <>
+                {data?.data.postListResDto.map((item) => (
+                  <PostCardWrapper
+                    key={item.postId}
+                    postId={item.postId}
+                    title={item.title}
+                    subtitle={item.content}
+                    imgUrl={item.thumbNail}
+                    date={item.date}
+                  />
+                ))}
+              </>
+            )}
+          </>
+        ) : (
+          <p className="flex h-[24.25rem] w-full items-center justify-center text-gray-600">
+            등록된 게시물이 없습니다.
+          </p>
+        )}
+      </div>
     </section>
   );
 };

diff --git a/src/pages/main/containers/NoticeSection.tsx b/src/pages/main/containers/NoticeSection.tsx
@@ -7,34 +7,21 @@ import { useResize } from '@/hooks/useResize';
 import { MainNotices, MainNoticesType } from '@/types/boardSelector';
 import { useNavigate } from 'react-router-dom';
 import { formatYYYYMMDD } from '@/utils/formatYYYYMMDD';
-import { useEffect, useState } from 'react';
-import { useNoticePost } from '../hook/useNoticePost';
-import { useTodayPost } from '../hook/useTodayPost';
 import { ArrowUpRight } from 'lucide-react';
+import { useTodayPost } from '../hook/useTodayPost';
 
 const NoticeSection = () => {
   const { selectedSubcategories, onSubcategorySelect } = useBoardSelect<MainNoticesType>(MainNotices[0]);
   const { width } = useResize();
   const navigate = useNavigate();
-  const [take, setTake] = useState(4);
-
-  useEffect(() => {
-    if (width >= 1440) {
-      setTake(4);
-    } else if (width >= 1080) {
-      setTake(3);
-    } else if (width >= 720 || width >= 390) {
-      setTake(2);
-    }
-  }, [width]);
 
-  const { data, noticeCount } = useNoticePost({
+  const { data, todayPostCount } = useTodayPost({
     boardCode: '공지사항게시판',
+    take: 10,
+    page: 0,
     groupCode: '중앙기구',
     memberCode: selectedSubcategories === '전체' ? '' : selectedSubcategories,
-    take,
   });
-  const todayPostCount = useTodayPost(selectedSubcategories === '전체' ? '' : selectedSubcategories);
 
   return (
     <section className="w-full whitespace-nowrap">
@@ -54,7 +41,7 @@ const NoticeSection = () => {
       <Spacing size={11} direction="vertical" />
       <p className="font-bold">
         <span>오늘 </span>
-        <span className="text-primary">{`${todayPostCount.todayPostCount}개`}</span>
+        <span className="text-primary">{`${todayPostCount}개`}</span>
         <span>{`의 공지가 올라왔어요!`}</span>
       </p>
       <Spacing size={21} direction="vertical" />
@@ -65,42 +52,93 @@ const NoticeSection = () => {
       />
       <Spacing size={width > 390 ? 32 : 22} direction="vertical" />
       <div className="flex flex-col md:items-center lg:items-center xl:items-center xxl:items-center">
-        {noticeCount ? (
-          <div className="flex w-[calc(100dvw-3.125rem)] items-start justify-start gap-[1.063rem] overflow-x-scroll pl-0 pr-[1.063rem] pt-[0.625rem] scrollbar-hide lg:px-[11.0rem] xl:px-[11.0rem] xxl:px-[11.0rem]">
-            {data?.data.postListResDto.map((notice) => {
-              let thumbnail = notice.thumbNail || undefined;
-              if (notice.status === '긴급공지' && thumbnail === undefined) {
-                thumbnail = `image/default/thumbnail/thumbnail_299px.png`;
-              }
-              return (
-                <PostCardNotice
-                  key={notice.postId}
-                  onClick={() => navigate(`/notice/${notice.postId}`, { state: { postId: notice.postId } })}
-                  badgeType={notice.status}
-                  imgUrl={thumbnail}
-                  title={notice.title}
-                  date={formatYYYYMMDD(notice.date)}
-                  profileName={notice.author}
-                />
-              );
-            })}
-          </div>
+        {data?.data.pageInfo.totalElements ? (
+          <>
+            {/* xs, sm, md */}
+            {width < 1080 && (
+              <div className="flex w-[calc(100dvw-3.125rem)] items-start justify-start gap-[1.063rem] overflow-x-scroll pl-0 pr-[1.063rem] pt-[0.625rem] scrollbar-hide lg:px-[11.0rem] xl:px-[11.0rem] xxl:px-[11.0rem]">
+                {data?.data.postListResDto.slice(0, 2).map((notice) => {
+                  let thumbnail = notice.thumbNail || undefined;
+                  if (notice.status === '긴급공지' && thumbnail === undefined) {
+                    thumbnail = `image/default/thumbnail/thumbnail_299px.png`;
+                  }
+                  return (
+                    <PostCardNotice
+                      key={notice.postId}
+                      onClick={() => navigate(`/notice/${notice.postId}`, { state: { postId: notice.postId } })}
+                      badgeType={notice.status}
+                      imgUrl={thumbnail}
+                      title={notice.title}
+                      date={formatYYYYMMDD(notice.date)}
+                      profileName={notice.author}
+                    />
+                  );
+                })}
+              </div>
+            )}
+
+            {/* lg */}
+            {width >= 1080 && width < 1440 && (
+              <div className="flex w-[calc(100dvw-3.125rem)] items-start justify-start gap-[1.063rem] overflow-x-scroll pl-0 pr-[1.063rem] pt-[0.625rem] scrollbar-hide lg:px-[11.0rem] xl:px-[11.0rem] xxl:px-[11.0rem]">
+                {data?.data.postListResDto.slice(0, 3).map((notice) => {
+                  let thumbnail = notice.thumbNail || undefined;
+                  if (notice.status === '긴급공지' && thumbnail === undefined) {
+                    thumbnail = `image/default/thumbnail/thumbnail_299px.png`;
+                  }
+                  return (
+                    <PostCardNotice
+                      key={notice.postId}
+                      onClick={() => navigate(`/notice/${notice.postId}`, { state: { postId: notice.postId } })}
+                      badgeType={notice.status}
+                      imgUrl={thumbnail}
+                      title={notice.title}
+                      date={formatYYYYMMDD(notice.date)}
+                      profileName={notice.author}
+                    />
+                  );
+                })}
+              </div>
+            )}
+
+            {/* xl, xxl */}
+            {width >= 1440 && (
+              <div className="flex w-[calc(100dvw-3.125rem)] items-start justify-start gap-[1.063rem] overflow-x-scroll pl-0 pr-[1.063rem] pt-[0.625rem] scrollbar-hide lg:px-[11.0rem] xl:px-[11.0rem] xxl:px-[11.0rem]">
+                {data?.data.postListResDto.slice(0, 4).map((notice) => {
+                  let thumbnail = notice.thumbNail || undefined;
+                  if (notice.status === '긴급공지' && thumbnail === undefined) {
+                    thumbnail = `image/default/thumbnail/thumbnail_299px.png`;
+                  }
+                  return (
+                    <PostCardNotice
+                      key={notice.postId}
+                      onClick={() => navigate(`/notice/${notice.postId}`, { state: { postId: notice.postId } })}
+                      badgeType={notice.status}
+                      imgUrl={thumbnail}
+                      title={notice.title}
+                      date={formatYYYYMMDD(notice.date)}
+                      profileName={notice.author}
+                    />
+                  );
+                })}
+              </div>
+            )}
+            <Spacing size={68} direction="vertical" />
+            {width >= 720 && (
+              <Button
+                onClick={() => {
+                  navigate(`/notice`);
+                }}
+                className="h-fit w-fit rounded-full px-[1rem] py-[0.5rem] text-[1rem]"
+              >
+                더 알아보기
+              </Button>
+            )}
+          </>
         ) : (
           <p className="flex h-[24.25rem] w-full items-center justify-center text-gray-600">
             등록된 게시물이 없습니다.
           </p>
         )}
-        <Spacing size={68} direction="vertical" />
-        {width >= 720 && (
-          <Button
-            onClick={() => {
-              navigate(`/notice`);
-            }}
-            className="h-fit w-fit rounded-full px-[1rem] py-[0.5rem] text-[1rem]"
-          >
-            더 알아보기
-          </Button>
-        )}
       </div>
     </section>
   );

diff --git a/src/pages/main/containers/PetitionSection.tsx b/src/pages/main/containers/PetitionSection.tsx
@@ -11,6 +11,7 @@ const PetitionSection = () => {
     navigate(`/petition-notice/${id}`);
     window.scrollTo(0, 0);
   };
+  // console.log('청원' + data);
 
   return (
     <section className="w-full">
@@ -28,9 +29,17 @@ const PetitionSection = () => {
       </div>
       <Spacing size={18} direction="vertical" />
       <div className="flex w-full gap-[1.5rem] overflow-x-scroll scrollbar-hide xs:pr-[1.5rem] sm:pr-[1.5rem]">
-        {data?.data.postListResDto.map((petitionData) => (
-          <PostTextPetition data={petitionData} key={petitionData.postId} onClick={handlePostDetail} />
-        ))}
+        {data?.data.pageInfo.totalElements ? (
+          <>
+            {data?.data.postListResDto.map((petitionData) => (
+              <PostTextPetition data={petitionData} key={petitionData.postId} onClick={handlePostDetail} />
+            ))}
+          </>
+        ) : (
+          <p className="flex h-[24.25rem] w-full items-center justify-center text-gray-600">
+            등록된 게시물이 없습니다.
+          </p>
+        )}
       </div>
     </section>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,5 +30,6 @@ module.exports = { @@
             endOfLine: 'auto',
           },
         ],
+        'tailwindcss/classnames-order': 'off',
       },
     };