From bee1bc9b0bbc9da46095b43cf4c2dce0c733ef22 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Thu, 16 May 2024 21:29:58 +0900
Subject: [PATCH 1/9] feat: Add axios interceptor setup (#83)

---
 src/app/layout.tsx   |  1 +
 src/app/lib/axios.ts | 66 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/app/lib/axios.ts

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index fc4ca1d..109c3b8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import React from 'react';
 import './globals.scss';
+import './lib/axios';
 
 import {
   AuthProvider,
diff --git a/src/app/lib/axios.ts b/src/app/lib/axios.ts
new file mode 100644
index 0000000..0963a95
--- /dev/null
+++ b/src/app/lib/axios.ts
@@ -0,0 +1,66 @@
+'use client';
+
+import axios, {
+  type AxiosError,
+  type AxiosRequestConfig,
+  type AxiosResponse,
+} from 'axios';
+import { useRouter } from 'next/navigation';
+
+import { getUserData, postTokenRefresh, useAuthActions } from '@/features/auth';
+import { load } from '@/shared/storage';
+
+let isRefreshing = false;
+
+axios.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  async (error: AxiosError) => {
+    const router = useRouter();
+    const { login, logout, setAuthUserData } = useAuthActions();
+
+    const { config, response } = error;
+    const originalRequest = config as AxiosRequestConfig;
+
+    const refreshToken = load<string>({
+      type: 'local',
+      key: 'refreshToken',
+    });
+
+    if (
+      response != null &&
+      refreshToken != null &&
+      response.status === 401 &&
+      !isRefreshing
+    ) {
+      isRefreshing = true;
+
+      return await new Promise((resolve, reject) => {
+        postTokenRefresh(refreshToken)
+          .then(({ data }) => {
+            if (originalRequest.headers != null)
+              originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
+
+            login(data);
+            getUserData()
+              .then(({ data: user }) => {
+                setAuthUserData(user);
+              })
+              .catch(err => {
+                console.error(err);
+              });
+
+            resolve(axios(originalRequest));
+          })
+          .catch(err => {
+            router.push('/');
+            logout();
+            reject(err);
+          })
+          .finally(() => {
+            isRefreshing = false;
+          });
+      });
+    }
+    return await Promise.reject(error);
+  },
+);

From f74c96b6d128eb3ac4b2d9ead36106b4108dc5e4 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 22 May 2024 00:51:25 +0900
Subject: [PATCH 2/9] feat: Add a message when there are no recommended mates
 on the main page

---
 src/app/pages/main-page.tsx               | 76 ++++++++++++++++-------
 src/app/pages/mobile/mobile-main-page.tsx | 48 +++++++++-----
 2 files changed, 86 insertions(+), 38 deletions(-)

diff --git a/src/app/pages/main-page.tsx b/src/app/pages/main-page.tsx
index 8b45947..3697bab 100644
--- a/src/app/pages/main-page.tsx
+++ b/src/app/pages/main-page.tsx
@@ -83,6 +83,19 @@ const styles = {
       display: none;
     }
   `,
+  mateRecommendationIsEmpty: styled.div`
+    color: #000;
+    font-family: 'Noto Sans KR';
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    padding-block: 2rem;
+  `,
 };
 
 export function MainPage() {
@@ -146,30 +159,45 @@ export function MainPage() {
           {auth?.user?.name}님의 추천 메이트
         </styles.mateRecommendationTitle>
         <styles.mateRecommendationRow>
-          <CircularButton
-            direction="left"
-            disabled={false}
-            onClick={handleScrollLeft}
-          />
-          <styles.mateRecommendation ref={scrollRef}>
-            {recommendationMates?.data?.map(
-              ({ memberId, score, nickname, location, profileImageUrl }) => (
-                <Link href={`/profile/${memberId}`} key={memberId}>
-                  <UserCard
-                    name={nickname}
-                    percentage={score}
-                    profileImage={profileImageUrl}
-                    location={location}
-                  />
-                </Link>
-              ),
-            )}
-          </styles.mateRecommendation>
-          <CircularButton
-            direction="right"
-            disabled={false}
-            onClick={handleScrollRight}
-          />
+          {recommendationMates?.data != null &&
+          recommendationMates.data.length > 0 ? (
+            <>
+              <CircularButton
+                direction="left"
+                disabled={false}
+                onClick={handleScrollLeft}
+              />
+              <styles.mateRecommendation ref={scrollRef}>
+                {recommendationMates?.data?.map(
+                  ({
+                    memberId,
+                    score,
+                    nickname,
+                    location,
+                    profileImageUrl,
+                  }) => (
+                    <Link href={`/profile/${memberId}`} key={memberId}>
+                      <UserCard
+                        name={nickname}
+                        percentage={score}
+                        profileImage={profileImageUrl}
+                        location={location}
+                      />
+                    </Link>
+                  ),
+                )}
+              </styles.mateRecommendation>
+              <CircularButton
+                direction="right"
+                disabled={false}
+                onClick={handleScrollRight}
+              />
+            </>
+          ) : (
+            <styles.mateRecommendationIsEmpty style={{ alignSelf: 'center' }}>
+              추천되는 메이트가 없습니다.
+            </styles.mateRecommendationIsEmpty>
+          )}
         </styles.mateRecommendationRow>
       </styles.mateRecommendationContainer>
     </styles.container>
diff --git a/src/app/pages/mobile/mobile-main-page.tsx b/src/app/pages/mobile/mobile-main-page.tsx
index b53457a..9071ebc 100644
--- a/src/app/pages/mobile/mobile-main-page.tsx
+++ b/src/app/pages/mobile/mobile-main-page.tsx
@@ -88,6 +88,19 @@ const styles = {
     overflow-x: auto;
     flex-wrap: wrap;
   `,
+  mateRecommendationIsEmpty: styled.div`
+    color: #000;
+    font-family: 'Noto Sans KR';
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    padding-block: 2rem;
+  `,
 };
 
 export function MobileMainPage() {
@@ -136,20 +149,27 @@ export function MobileMainPage() {
         <styles.mateRecommendationTitle>
           <h1>{auth?.user?.name}님의 추천 메이트</h1>
         </styles.mateRecommendationTitle>
-        <styles.mateRecommendation>
-          {recommendationMates?.data?.map(
-            ({ memberId, score, nickname, location, profileImageUrl }) => (
-              <Link href={`/profile/${memberId}`} key={memberId}>
-                <UserCard
-                  name={nickname}
-                  percentage={score}
-                  location={location}
-                  profileImage={profileImageUrl}
-                />
-              </Link>
-            ),
-          )}
-        </styles.mateRecommendation>
+        {recommendationMates?.data != null &&
+        recommendationMates.data.length > 0 ? (
+          <styles.mateRecommendation>
+            {recommendationMates?.data?.map(
+              ({ memberId, score, nickname, location, profileImageUrl }) => (
+                <Link href={`/profile/${memberId}`} key={memberId}>
+                  <UserCard
+                    name={nickname}
+                    percentage={score}
+                    location={location}
+                    profileImage={profileImageUrl}
+                  />
+                </Link>
+              ),
+            )}
+          </styles.mateRecommendation>
+        ) : (
+          <styles.mateRecommendationIsEmpty>
+            추천되는 메이트가 없습니다.
+          </styles.mateRecommendationIsEmpty>
+        )}
       </styles.mateRecommendationContainer>
     </styles.container>
   );

From 7b06fab2556b1a046b0f287b70e72cca2c1d25d6 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 22 May 2024 01:00:31 +0900
Subject: [PATCH 3/9] feat: Add a message when there are no recommended mates
 on the posts page

---
 src/app/pages/main-page.tsx                   |  4 +-
 src/app/pages/mobile/mobile-main-page.tsx     |  4 +-
 .../pages/mobile/mobile-shared-posts-page.tsx | 39 +++++++++++++------
 src/app/pages/shared-posts-page.tsx           | 39 +++++++++++++------
 4 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/src/app/pages/main-page.tsx b/src/app/pages/main-page.tsx
index 3697bab..d58da08 100644
--- a/src/app/pages/main-page.tsx
+++ b/src/app/pages/main-page.tsx
@@ -168,7 +168,7 @@ export function MainPage() {
                 onClick={handleScrollLeft}
               />
               <styles.mateRecommendation ref={scrollRef}>
-                {recommendationMates?.data?.map(
+                {recommendationMates.data.map(
                   ({
                     memberId,
                     score,
@@ -195,7 +195,7 @@ export function MainPage() {
             </>
           ) : (
             <styles.mateRecommendationIsEmpty style={{ alignSelf: 'center' }}>
-              추천되는 메이트가 없습니다.
+              <p>추천되는 메이트가 없습니다.</p>
             </styles.mateRecommendationIsEmpty>
           )}
         </styles.mateRecommendationRow>
diff --git a/src/app/pages/mobile/mobile-main-page.tsx b/src/app/pages/mobile/mobile-main-page.tsx
index 9071ebc..dd49959 100644
--- a/src/app/pages/mobile/mobile-main-page.tsx
+++ b/src/app/pages/mobile/mobile-main-page.tsx
@@ -152,7 +152,7 @@ export function MobileMainPage() {
         {recommendationMates?.data != null &&
         recommendationMates.data.length > 0 ? (
           <styles.mateRecommendation>
-            {recommendationMates?.data?.map(
+            {recommendationMates.data.map(
               ({ memberId, score, nickname, location, profileImageUrl }) => (
                 <Link href={`/profile/${memberId}`} key={memberId}>
                   <UserCard
@@ -167,7 +167,7 @@ export function MobileMainPage() {
           </styles.mateRecommendation>
         ) : (
           <styles.mateRecommendationIsEmpty>
-            추천되는 메이트가 없습니다.
+            <p>추천되는 메이트가 없습니다.</p>
           </styles.mateRecommendationIsEmpty>
         )}
       </styles.mateRecommendationContainer>
diff --git a/src/app/pages/mobile/mobile-shared-posts-page.tsx b/src/app/pages/mobile/mobile-shared-posts-page.tsx
index 0a7905f..b8b8b05 100644
--- a/src/app/pages/mobile/mobile-shared-posts-page.tsx
+++ b/src/app/pages/mobile/mobile-shared-posts-page.tsx
@@ -135,6 +135,16 @@ const styles = {
       justify-content: flex-start;
     }
   `,
+  noRecommendationMates: styled.div`
+    font-family: 'Noto Sans KR';
+    font-size: 0.85rem;
+    font-style: normal;
+    font-weight: 500;
+
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  `,
 };
 
 export function MobileSharedPostsPage() {
@@ -302,17 +312,24 @@ export function MobileSharedPostsPage() {
         </>
       ) : (
         <styles.cards>
-          {recommendationMates?.data?.map(
-            ({ memberId, score, nickname, location, profileImageUrl }) => (
-              <Link href={`/profile/${memberId}`} key={memberId}>
-                <UserCard
-                  name={nickname}
-                  percentage={score}
-                  location={location}
-                  profileImage={profileImageUrl}
-                />
-              </Link>
-            ),
+          {recommendationMates?.data != null &&
+          recommendationMates.data.length > 0 ? (
+            recommendationMates.data.map(
+              ({ memberId, score, nickname, location, profileImageUrl }) => (
+                <Link href={`/profile/${memberId}`} key={memberId}>
+                  <UserCard
+                    name={nickname}
+                    percentage={score}
+                    location={location}
+                    profileImage={profileImageUrl}
+                  />
+                </Link>
+              ),
+            )
+          ) : (
+            <styles.noRecommendationMates>
+              <p>추천되는 메이트가 없습니다.</p>
+            </styles.noRecommendationMates>
           )}
         </styles.cards>
       )}
diff --git a/src/app/pages/shared-posts-page.tsx b/src/app/pages/shared-posts-page.tsx
index 2d1872d..e1c9b4a 100644
--- a/src/app/pages/shared-posts-page.tsx
+++ b/src/app/pages/shared-posts-page.tsx
@@ -113,6 +113,16 @@ const styles = {
     flex-wrap: wrap;
     gap: 2rem 2.62rem;
   `,
+  noRecommendationMates: styled.div`
+    font-family: 'Noto Sans KR';
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 500;
+
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  `,
 };
 
 export function SharedPostsPage() {
@@ -280,17 +290,24 @@ export function SharedPostsPage() {
         </>
       ) : (
         <styles.cards>
-          {recommendationMates?.data?.map(
-            ({ memberId, score, nickname, location, profileImageUrl }) => (
-              <Link href={`/profile/${memberId}`} key={memberId}>
-                <UserCard
-                  name={nickname}
-                  percentage={score}
-                  location={location}
-                  profileImage={profileImageUrl}
-                />
-              </Link>
-            ),
+          {recommendationMates?.data != null &&
+          recommendationMates.data.length > 0 ? (
+            recommendationMates.data.map(
+              ({ memberId, score, nickname, location, profileImageUrl }) => (
+                <Link href={`/profile/${memberId}`} key={memberId}>
+                  <UserCard
+                    name={nickname}
+                    percentage={score}
+                    location={location}
+                    profileImage={profileImageUrl}
+                  />
+                </Link>
+              ),
+            )
+          ) : (
+            <styles.noRecommendationMates>
+              <p>추천되는 메이트가 없습니다.</p>
+            </styles.noRecommendationMates>
           )}
         </styles.cards>
       )}

From 75d5090c2f1782334855d6d0b44a6dd3cad74483 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 22 May 2024 01:11:28 +0900
Subject: [PATCH 4/9] feat: Add a message when there are no recommended posts
 on the posts page

---
 .../pages/mobile/mobile-shared-posts-page.tsx | 60 +++++++------------
 src/app/pages/shared-posts-page.tsx           | 60 +++++++------------
 2 files changed, 40 insertions(+), 80 deletions(-)

diff --git a/src/app/pages/mobile/mobile-shared-posts-page.tsx b/src/app/pages/mobile/mobile-shared-posts-page.tsx
index b8b8b05..a03139e 100644
--- a/src/app/pages/mobile/mobile-shared-posts-page.tsx
+++ b/src/app/pages/mobile/mobile-shared-posts-page.tsx
@@ -22,8 +22,6 @@ import {
   useDormitorySharedPosts,
   usePaging,
   useSharedPosts,
-  type GetDormitorySharedPostsDTO,
-  type GetSharedPostsDTO,
 } from '@/features/shared';
 
 const styles = {
@@ -135,7 +133,7 @@ const styles = {
       justify-content: flex-start;
     }
   `,
-  noRecommendationMates: styled.div`
+  noRecommendation: styled.div`
     font-family: 'Noto Sans KR';
     font-size: 0.85rem;
     font-style: normal;
@@ -153,9 +151,6 @@ export function MobileSharedPostsPage() {
   const auth = useAuthValue();
   const [selected, setSelected] = useState<SharedPostsType>('hasRoom');
   const [totalPageCount, setTotalPageCount] = useState(0);
-  const [prevSharedPosts, setPrevSharedPosts] = useState<
-    GetSharedPostsDTO | GetDormitorySharedPostsDTO | null
-  >(null);
 
   const { filter, derivedFilter, reset: resetFilter } = useSharedPostsFilter();
 
@@ -207,10 +202,8 @@ export function MobileSharedPostsPage() {
   useEffect(() => {
     if (selected === 'hasRoom' && sharedPosts != null) {
       setTotalPageCount(sharedPosts.data.totalPages);
-      setPrevSharedPosts(null);
     } else if (selected === 'dormitory' && dormitorySharedPosts != null) {
       setTotalPageCount(dormitorySharedPosts.data.totalPages);
-      setPrevSharedPosts(null);
     }
   }, [selected, dormitorySharedPosts, sharedPosts]);
 
@@ -234,27 +227,23 @@ export function MobileSharedPostsPage() {
       {selected === 'hasRoom' || selected === 'dormitory' ? (
         <>
           <styles.posts>
-            {prevSharedPosts != null
-              ? prevSharedPosts.data.content.map(post => (
-                  <PostCard
-                    key={post.id}
-                    post={post}
-                    onClick={() => {
-                      router.push(`/shared/${post.id}`);
-                    }}
-                  />
-                ))
-              : posts?.data.content.map(post => (
-                  <PostCard
-                    key={post.id}
-                    post={post}
-                    onClick={() => {
-                      router.push(
-                        `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
-                      );
-                    }}
-                  />
-                ))}
+            {posts?.data != null && posts.data.content.length > 0 ? (
+              posts?.data.content.map(post => (
+                <PostCard
+                  key={post.id}
+                  post={post}
+                  onClick={() => {
+                    router.push(
+                      `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
+                    );
+                  }}
+                />
+              ))
+            ) : (
+              <styles.noRecommendation>
+                <p>추천되는 게시글이 없습니다.</p>
+              </styles.noRecommendation>
+            )}
           </styles.posts>
           {posts?.data.content.length !== 0 && (
             <styles.pagingRow>
@@ -262,9 +251,6 @@ export function MobileSharedPostsPage() {
                 direction="left"
                 disabled={isFirstPage}
                 onClick={() => {
-                  if (sharedPosts != null) {
-                    setPrevSharedPosts(sharedPosts);
-                  }
                   handlePrevPage();
                   window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
@@ -279,9 +265,6 @@ export function MobileSharedPostsPage() {
                   <button
                     type="button"
                     onClick={() => {
-                      if (sharedPosts != null) {
-                        setPrevSharedPosts(sharedPosts);
-                      }
                       handleSetPage(index + 1 + currentSlice * sliceSize);
                       window.scrollTo({ top: 0, behavior: 'smooth' });
                     }}
@@ -300,9 +283,6 @@ export function MobileSharedPostsPage() {
                 direction="right"
                 disabled={isLastPage}
                 onClick={() => {
-                  if (sharedPosts != null) {
-                    setPrevSharedPosts(sharedPosts);
-                  }
                   handleNextPage();
                   window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
@@ -327,9 +307,9 @@ export function MobileSharedPostsPage() {
               ),
             )
           ) : (
-            <styles.noRecommendationMates>
+            <styles.noRecommendation>
               <p>추천되는 메이트가 없습니다.</p>
-            </styles.noRecommendationMates>
+            </styles.noRecommendation>
           )}
         </styles.cards>
       )}
diff --git a/src/app/pages/shared-posts-page.tsx b/src/app/pages/shared-posts-page.tsx
index e1c9b4a..4384a28 100644
--- a/src/app/pages/shared-posts-page.tsx
+++ b/src/app/pages/shared-posts-page.tsx
@@ -22,8 +22,6 @@ import {
   useDormitorySharedPosts,
   usePaging,
   useSharedPosts,
-  type GetDormitorySharedPostsDTO,
-  type GetSharedPostsDTO,
 } from '@/features/shared';
 
 const styles = {
@@ -113,7 +111,7 @@ const styles = {
     flex-wrap: wrap;
     gap: 2rem 2.62rem;
   `,
-  noRecommendationMates: styled.div`
+  noRecommendation: styled.div`
     font-family: 'Noto Sans KR';
     font-size: 1.25rem;
     font-style: normal;
@@ -131,9 +129,6 @@ export function SharedPostsPage() {
   const auth = useAuthValue();
   const [selected, setSelected] = useState<SharedPostsType>('hasRoom');
   const [totalPageCount, setTotalPageCount] = useState(0);
-  const [prevSharedPosts, setPrevSharedPosts] = useState<
-    GetSharedPostsDTO | GetDormitorySharedPostsDTO | null
-  >(null);
 
   const { filter, derivedFilter, reset: resetFilter } = useSharedPostsFilter();
 
@@ -185,10 +180,8 @@ export function SharedPostsPage() {
   useEffect(() => {
     if (selected === 'hasRoom' && sharedPosts != null) {
       setTotalPageCount(sharedPosts.data.totalPages);
-      setPrevSharedPosts(null);
     } else if (selected === 'dormitory' && dormitorySharedPosts != null) {
       setTotalPageCount(dormitorySharedPosts.data.totalPages);
-      setPrevSharedPosts(null);
     }
   }, [selected, dormitorySharedPosts, sharedPosts]);
 
@@ -212,27 +205,23 @@ export function SharedPostsPage() {
       {selected === 'hasRoom' || selected === 'dormitory' ? (
         <>
           <styles.posts>
-            {prevSharedPosts != null
-              ? prevSharedPosts.data.content.map(post => (
-                  <PostCard
-                    key={post.id}
-                    post={post}
-                    onClick={() => {
-                      router.push(`/shared/${post.id}`);
-                    }}
-                  />
-                ))
-              : posts?.data.content.map(post => (
-                  <PostCard
-                    key={post.id}
-                    post={post}
-                    onClick={() => {
-                      router.push(
-                        `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
-                      );
-                    }}
-                  />
-                ))}
+            {posts?.data != null && posts.data.content.length > 0 ? (
+              posts?.data.content.map(post => (
+                <PostCard
+                  key={post.id}
+                  post={post}
+                  onClick={() => {
+                    router.push(
+                      `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
+                    );
+                  }}
+                />
+              ))
+            ) : (
+              <styles.noRecommendation>
+                <p>추천되는 게시글이 없습니다.</p>
+              </styles.noRecommendation>
+            )}
           </styles.posts>
           {posts != null && posts.data.content.length !== 0 && (
             <styles.pagingRow>
@@ -240,9 +229,6 @@ export function SharedPostsPage() {
                 direction="left"
                 disabled={isFirstPage}
                 onClick={() => {
-                  if (sharedPosts != null) {
-                    setPrevSharedPosts(sharedPosts);
-                  }
                   handlePrevPage();
                   window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
@@ -257,9 +243,6 @@ export function SharedPostsPage() {
                   <button
                     type="button"
                     onClick={() => {
-                      if (sharedPosts != null) {
-                        setPrevSharedPosts(sharedPosts);
-                      }
                       handleSetPage(index + 1 + currentSlice * sliceSize);
                       window.scrollTo({ top: 0, behavior: 'smooth' });
                     }}
@@ -278,9 +261,6 @@ export function SharedPostsPage() {
                 direction="right"
                 disabled={isLastPage}
                 onClick={() => {
-                  if (sharedPosts != null) {
-                    setPrevSharedPosts(sharedPosts);
-                  }
                   handleNextPage();
                   window.scrollTo({ top: 0, behavior: 'smooth' });
                 }}
@@ -305,9 +285,9 @@ export function SharedPostsPage() {
               ),
             )
           ) : (
-            <styles.noRecommendationMates>
+            <styles.noRecommendation>
               <p>추천되는 메이트가 없습니다.</p>
-            </styles.noRecommendationMates>
+            </styles.noRecommendation>
           )}
         </styles.cards>
       )}

From 89738916bc521b4bde5cf2f62fab215a77c82f5c Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 22 May 2024 01:13:48 +0900
Subject: [PATCH 5/9] fix: Fix /shared/posts/... API error

---
 src/features/shared/shared.api.ts | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/features/shared/shared.api.ts b/src/features/shared/shared.api.ts
index e415046..c8435fa 100644
--- a/src/features/shared/shared.api.ts
+++ b/src/features/shared/shared.api.ts
@@ -20,21 +20,17 @@ export const getSharedPosts = async ({
     const baseURL = '/maru-api/shared/posts/studio';
     let query = '';
 
-    if (
-      filter != null &&
-      Object.keys(filter).length > 0 &&
-      JSON.stringify(filter).length > 2
-    ) {
-      query += `filter=${JSON.stringify(filter)}`;
+    query += `page=${page}`;
+
+    if (filter != null) {
+      query += `&filter=${JSON.stringify(filter)}`;
     }
 
     if (search != null) {
       query += `&search=${search}`;
     }
 
-    query += `&page=${page}`;
-
-    return `${baseURL}?${encodeURIComponent(query)}&cardOption=${cardOption}`;
+    return `${baseURL}?${encodeURI(query)}&cardOption=${cardOption}`;
   };
 
   return await axios.get<GetSharedPostsDTO>(getURI());
@@ -76,21 +72,17 @@ export const getDormitorySharedPosts = async ({
     const baseURL = '/maru-api/shared/posts/dormitory';
     let query = '';
 
-    if (
-      filter != null &&
-      Object.keys(filter).length > 0 &&
-      JSON.stringify(filter).length > 2
-    ) {
-      query += `filter=${JSON.stringify(filter)}`;
+    query += `page=${page}`;
+
+    if (filter != null) {
+      query += `&filter=${JSON.stringify(filter)}`;
     }
 
     if (search != null) {
       query += `&search=${search}`;
     }
 
-    query += `&page=${page}`;
-
-    return `${baseURL}?${encodeURIComponent(query)}&cardOption=${cardOption}`;
+    return `${baseURL}?${encodeURI(query)}&cardOption=${cardOption}`;
   };
 
   return await axios.get<GetDormitorySharedPostsDTO>(getURI());

From 3fb97ea14747846cc88c878b44e629be0c39d987 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Tue, 28 May 2024 01:57:54 +0900
Subject: [PATCH 6/9] feat: Add loading message when fetching data that
 recommend posts, mates

---
 src/app/pages/shared-posts-page.tsx | 130 +++++++++++++++++-----------
 1 file changed, 79 insertions(+), 51 deletions(-)

diff --git a/src/app/pages/shared-posts-page.tsx b/src/app/pages/shared-posts-page.tsx
index de25632..385e6c9 100644
--- a/src/app/pages/shared-posts-page.tsx
+++ b/src/app/pages/shared-posts-page.tsx
@@ -149,14 +149,19 @@ export function SharedPostsPage() {
     sliceSize: 10,
   });
 
-  const { data: sharedPosts } = useSharedPosts({
-    filter: derivedFilter,
-    cardOption: filter.cardType ?? 'my',
-    enabled: auth?.accessToken != null && selected === 'hasRoom',
-    page: page - 1,
-  });
+  const { isLoading: isSharedPostsLoading, data: sharedPosts } = useSharedPosts(
+    {
+      filter: derivedFilter,
+      cardOption: filter.cardType ?? 'my',
+      enabled: auth?.accessToken != null && selected === 'hasRoom',
+      page: page - 1,
+    },
+  );
 
-  const { data: dormitorySharedPosts } = useDormitorySharedPosts({
+  const {
+    isLoading: isDormitorySharedPostsLoading,
+    data: dormitorySharedPosts,
+  } = useDormitorySharedPosts({
     filter: derivedFilter,
     cardOption: filter.cardType ?? 'my',
     enabled: auth?.accessToken != null && selected === 'dormitory',
@@ -168,10 +173,11 @@ export function SharedPostsPage() {
     [selected, sharedPosts, dormitorySharedPosts],
   );
 
-  const { data: recommendationMates } = useRecommendMates({
-    enabled: auth?.accessToken != null && selected === 'homeless',
-    cardOption: filter.cardType ?? 'my',
-  });
+  const { isLoading: isMatesLoading, data: recommendationMates } =
+    useRecommendMates({
+      enabled: auth?.accessToken != null && selected === 'homeless',
+      cardOption: filter.cardType ?? 'my',
+    });
 
   useEffect(() => {
     resetFilter();
@@ -188,6 +194,66 @@ export function SharedPostsPage() {
     }
   }, [selected, dormitorySharedPosts, sharedPosts]);
 
+  const renderPosts = () => {
+    if (isSharedPostsLoading || isDormitorySharedPostsLoading) {
+      return (
+        <styles.noRecommendation>잠시만 기다려주세요..</styles.noRecommendation>
+      );
+    }
+
+    if (posts?.data == null || posts.data.content.length === 0) {
+      return (
+        <styles.noRecommendation>
+          <p>추천되는 게시글이 없습니다.</p>
+        </styles.noRecommendation>
+      );
+    }
+
+    return posts?.data.content.map(post => (
+      <PostCard
+        key={post.id}
+        post={post}
+        onClick={() => {
+          router.push(
+            `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
+          );
+        }}
+      />
+    ));
+  };
+
+  const renderMates = () => {
+    if (isMatesLoading) {
+      return (
+        <styles.noRecommendation>잠시만 기다려주세요..</styles.noRecommendation>
+      );
+    }
+
+    if (
+      recommendationMates?.data == null ||
+      recommendationMates.data.length === 0
+    ) {
+      return (
+        <styles.noRecommendation>
+          <p>추천되는 메이트가 없습니다.</p>
+        </styles.noRecommendation>
+      );
+    }
+
+    return recommendationMates.data.map(
+      ({ memberId, score, nickname, location, profileImageUrl }) => (
+        <Link href={`/profile/${memberId}`} key={memberId}>
+          <UserCard
+            name={nickname}
+            percentage={score}
+            location={location}
+            profileImage={profileImageUrl}
+          />
+        </Link>
+      ),
+    );
+  };
+
   return (
     <styles.container>
       <styles.SharedPostsMenu selected={selected} handleSelect={setSelected} />
@@ -207,25 +273,7 @@ export function SharedPostsPage() {
       </styles.createButtonRow>
       {selected === 'hasRoom' || selected === 'dormitory' ? (
         <>
-          <styles.posts>
-            {posts?.data != null && posts.data.content.length > 0 ? (
-              posts?.data.content.map(post => (
-                <PostCard
-                  key={post.id}
-                  post={post}
-                  onClick={() => {
-                    router.push(
-                      `/shared/${selected === 'hasRoom' ? 'room' : 'dormitory'}/${post.id}`,
-                    );
-                  }}
-                />
-              ))
-            ) : (
-              <styles.noRecommendation>
-                <p>추천되는 게시글이 없습니다.</p>
-              </styles.noRecommendation>
-            )}
-          </styles.posts>
+          <styles.posts>{renderPosts()}</styles.posts>
           {posts != null && posts.data.content.length !== 0 && (
             <styles.pagingRow>
               <styles.CircularButton
@@ -272,27 +320,7 @@ export function SharedPostsPage() {
           )}
         </>
       ) : (
-        <styles.cards>
-          {recommendationMates?.data != null &&
-          recommendationMates.data.length > 0 ? (
-            recommendationMates.data.map(
-              ({ memberId, score, nickname, location, profileImageUrl }) => (
-                <Link href={`/profile/${memberId}`} key={memberId}>
-                  <UserCard
-                    name={nickname}
-                    percentage={score}
-                    location={location}
-                    profileImage={profileImageUrl}
-                  />
-                </Link>
-              ),
-            )
-          ) : (
-            <styles.noRecommendation>
-              <p>추천되는 메이트가 없습니다.</p>
-            </styles.noRecommendation>
-          )}
-        </styles.cards>
+        <styles.cards>{renderMates()}</styles.cards>
       )}
     </styles.container>
   );

From 35ecc3c043b9d76db1164090842d19a356fc093e Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Tue, 28 May 2024 15:02:40 +0900
Subject: [PATCH 7/9] fix: change render function into useMemo hook

---
 src/app/pages/shared-posts-page.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/shared-posts-page.tsx b/src/app/pages/shared-posts-page.tsx
index 385e6c9..1b9dfbb 100644
--- a/src/app/pages/shared-posts-page.tsx
+++ b/src/app/pages/shared-posts-page.tsx
@@ -194,7 +194,7 @@ export function SharedPostsPage() {
     }
   }, [selected, dormitorySharedPosts, sharedPosts]);
 
-  const renderPosts = () => {
+  const renderPosts = useMemo(() => {
     if (isSharedPostsLoading || isDormitorySharedPostsLoading) {
       return (
         <styles.noRecommendation>잠시만 기다려주세요..</styles.noRecommendation>
@@ -220,9 +220,15 @@ export function SharedPostsPage() {
         }}
       />
     ));
-  };
+  }, [
+    isDormitorySharedPostsLoading,
+    isSharedPostsLoading,
+    posts?.data,
+    router,
+    selected,
+  ]);
 
-  const renderMates = () => {
+  const renderMates = useMemo(() => {
     if (isMatesLoading) {
       return (
         <styles.noRecommendation>잠시만 기다려주세요..</styles.noRecommendation>
@@ -252,7 +258,7 @@ export function SharedPostsPage() {
         </Link>
       ),
     );
-  };
+  }, [isMatesLoading, recommendationMates?.data]);
 
   return (
     <styles.container>
@@ -273,7 +279,7 @@ export function SharedPostsPage() {
       </styles.createButtonRow>
       {selected === 'hasRoom' || selected === 'dormitory' ? (
         <>
-          <styles.posts>{renderPosts()}</styles.posts>
+          <styles.posts>{renderPosts}</styles.posts>
           {posts != null && posts.data.content.length !== 0 && (
             <styles.pagingRow>
               <styles.CircularButton
@@ -320,7 +326,7 @@ export function SharedPostsPage() {
           )}
         </>
       ) : (
-        <styles.cards>{renderMates()}</styles.cards>
+        <styles.cards>{renderMates}</styles.cards>
       )}
     </styles.container>
   );

From e5528a8f859ee470d756eff710295f668a72e369 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Tue, 28 May 2024 15:31:39 +0900
Subject: [PATCH 8/9] fix: Set mini card container max-width in user-input-page

---
 src/app/pages/user-input-page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/pages/user-input-page.tsx b/src/app/pages/user-input-page.tsx
index d605994..b3036ee 100644
--- a/src/app/pages/user-input-page.tsx
+++ b/src/app/pages/user-input-page.tsx
@@ -49,6 +49,7 @@ const styles = {
     flex-direction: column;
     align-items: flex-start;
     min-width: 20rem;
+    max-width: 20rem;
     gap: 1rem;
     align-self: stretch;
   `,

From c9c08ed73f6e56629ca8e690b9d1eef7c12f757d Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Tue, 28 May 2024 17:31:40 +0900
Subject: [PATCH 9/9] feat: Add Authorization Error Handler (#83)

---
 src/app/lib/axios.ts                          | 103 +++++++++---------
 .../lib/providers/InitializationProvider.tsx  |   1 -
 2 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/src/app/lib/axios.ts b/src/app/lib/axios.ts
index 0963a95..0746e6c 100644
--- a/src/app/lib/axios.ts
+++ b/src/app/lib/axios.ts
@@ -1,66 +1,71 @@
 'use client';
 
-import axios, {
-  type AxiosError,
-  type AxiosRequestConfig,
-  type AxiosResponse,
-} from 'axios';
-import { useRouter } from 'next/navigation';
+import axios, { type AxiosError, type AxiosResponse } from 'axios';
 
-import { getUserData, postTokenRefresh, useAuthActions } from '@/features/auth';
-import { load } from '@/shared/storage';
+import { postTokenRefresh } from '@/features/auth';
+import { load, save } from '@/shared/storage';
+import { type FailureDTO } from '@/shared/types';
 
 let isRefreshing = false;
+let refreshSubscribers: Array<(token: string) => void> = [];
+
+const subscribeTokenRefresh = (callback: (token: string) => void) => {
+  refreshSubscribers.push(callback);
+};
+
+const onRefreshed = (token: string) => {
+  refreshSubscribers.forEach(callback => {
+    callback(token);
+  });
+  refreshSubscribers = [];
+};
 
 axios.interceptors.response.use(
   (response: AxiosResponse) => response,
-  async (error: AxiosError) => {
-    const router = useRouter();
-    const { login, logout, setAuthUserData } = useAuthActions();
+  async (error: AxiosError<FailureDTO>) => {
+    if (error.response?.status !== 401 || error.response?.data.code !== 'C002')
+      return await Promise.reject(error);
 
-    const { config, response } = error;
-    const originalRequest = config as AxiosRequestConfig;
-
-    const refreshToken = load<string>({
-      type: 'local',
-      key: 'refreshToken',
-    });
+    const refreshToken = load<string>({ type: 'local', key: 'refreshToken' });
+    if (refreshToken == null) {
+      window.location.href = '/';
+      return await Promise.reject(error);
+    }
 
-    if (
-      response != null &&
-      refreshToken != null &&
-      response.status === 401 &&
-      !isRefreshing
-    ) {
-      isRefreshing = true;
+    if (isRefreshing) {
+      return await new Promise(resolve => {
+        subscribeTokenRefresh((token: string) => {
+          const { config } = error;
+          if (config?.headers != null) {
+            config.headers.Authorization = `Bearer ${token}`;
+            resolve(axios(config));
+          }
+        });
+      });
+    }
 
-      return await new Promise((resolve, reject) => {
-        postTokenRefresh(refreshToken)
-          .then(({ data }) => {
-            if (originalRequest.headers != null)
-              originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
+    isRefreshing = true;
+    try {
+      const {
+        data: { accessToken, refreshToken: newRefreshToken, expiresIn },
+      } = await postTokenRefresh(refreshToken);
 
-            login(data);
-            getUserData()
-              .then(({ data: user }) => {
-                setAuthUserData(user);
-              })
-              .catch(err => {
-                console.error(err);
-              });
+      axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
+      save({ type: 'local', key: 'refreshToken', value: newRefreshToken });
+      save({ type: 'local', key: 'expiresIn', value: `${expiresIn}` });
 
-            resolve(axios(originalRequest));
-          })
-          .catch(err => {
-            router.push('/');
-            logout();
-            reject(err);
-          })
-          .finally(() => {
-            isRefreshing = false;
-          });
-      });
+      const { config } = error;
+      onRefreshed(accessToken);
+      if (config != null) {
+        config.headers.Authorization = `Bearer ${accessToken}`;
+        return await axios(config);
+      }
+    } catch (refreshError) {
+      return await Promise.reject(error);
+    } finally {
+      isRefreshing = false;
     }
+
     return await Promise.reject(error);
   },
 );
diff --git a/src/app/lib/providers/InitializationProvider.tsx b/src/app/lib/providers/InitializationProvider.tsx
index 6f3d806..0acae5e 100644
--- a/src/app/lib/providers/InitializationProvider.tsx
+++ b/src/app/lib/providers/InitializationProvider.tsx
@@ -18,7 +18,6 @@ export function InitialzationProvider({
   const { data: userData } = useUserData(auth?.accessToken != null);
 
   useEffect(() => {
-    console.log(userData);
     if (userData != null) {
       setAuthUserData(userData);
       if (userData.initialized) {