release: v0.7.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/globals.scss

@@ -5,7 +5,7 @@
 :root,
 body {
   min-height: 100dvh;
-  min-width: 90rem;
+  min-width: 1194px;
   max-width: 100dvw;
 
   @media (max-width: 768px) {

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,

src/app/lib/axios.ts

@@ -0,0 +1,71 @@
+'use client';
+
+import axios, { type AxiosError, type AxiosResponse } from 'axios';
+
+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<FailureDTO>) => {
+    if (error.response?.status !== 401 || error.response?.data.code !== 'C002')
+      return await Promise.reject(error);
+
+    const refreshToken = load<string>({ type: 'local', key: 'refreshToken' });
+    if (refreshToken == null) {
+      window.location.href = '/';
+      return await Promise.reject(error);
+    }
+
+    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));
+          }
+        });
+      });
+    }
+
+    isRefreshing = true;
+    try {
+      const {
+        data: { accessToken, refreshToken: newRefreshToken, expiresIn },
+      } = await postTokenRefresh(refreshToken);
+
+      axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
+      save({ type: 'local', key: 'refreshToken', value: newRefreshToken });
+      save({ type: 'local', key: 'expiresIn', value: `${expiresIn}` });
+
+      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);
+  },
+);

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) {

src/app/pages/landing-page.tsx

@@ -11,6 +11,7 @@ const styles = {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    align-items: center;
     padding: 0rem 13.75rem;
   `,
   img: styled.img`
@@ -24,9 +25,9 @@ const styles = {
   description: styled.div`
     display: flex;
     flex-direction: column;
-    align-items: end;
+    align-items: flex-end;
     gap: 1.75rem;
-    width: 27.8125rem;
+    width: 21.875rem;
     margin-top: 6.25rem;
     flex-shrink: 0;
 
@@ -38,8 +39,8 @@ const styles = {
       font-style: normal;
       font-weight: 700;
       line-height: normal;
-      margin-bottom: 2rem;
     }
+
     p {
       color: #000;
       text-align: right;
@@ -48,7 +49,6 @@ const styles = {
       font-style: normal;
       font-weight: 500;
       line-height: normal;
-      margin-bottom: 6.5rem;
     }
   `,
   loginButtons: styled.div`
@@ -71,19 +71,15 @@ const styles = {
       object-fit: cover;
     }
   `,
-  section2: styled.div`
-    position: relative;
-    width: 100dvw;
-    height: 31.25rem;
-    flex-shrink: 0;
-    background: #f7f6f9;
-  `,
   section3: styled.div`
     display: flex;
-    justify-content: end;
+    height: 30rem;
+    padding-left: 50%;
+    justify-content: center;
+    align-items: center;
 
-    height: 31.25rem;
-    padding-right: 21.25rem;
+    background: #f7f6f9;
+    overflow-y: hidden;
   `,
   imageBox: styled.div`
     display: flex;
@@ -112,35 +108,7 @@ const styles = {
     flex-shrink: 0;
 
     border-radius: 16px;
-    background: rgba(247, 246, 249, 0.5);
-  `,
-  section4: styled.div`
-    display: flex;
-    position: relative;
-    width: 100dvw;
-    height: 17.9375rem;
-    padding: 10.0625rem 38.71875rem 5.0625rem 39.90625rem;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    background: #f7f6f9;
-  `,
-  findMateButton: styled.button`
-    all: unset;
-    flex-shrink: 0;
-    padding: 0.5rem 1.5rem;
-    flex-shrink: 0;
-
-    border-radius: 8px;
-    background: #e15637;
-
-    color: #fff;
-    font-family: 'Noto Sans KR';
-    font-size: 1.25rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    cursor: pointer;
+    background: white;
   `,
 };
 
@@ -191,7 +159,6 @@ export function LandingPage() {
           </styles.loginButtons>
         </styles.description>
       </styles.section1>
-      <styles.section2 />
       <styles.section3>
         <styles.imageBox>
           {images.map((column, i) => (
@@ -209,9 +176,6 @@ export function LandingPage() {
           ))}
         </styles.imageBox>
       </styles.section3>
-      <styles.section4>
-        <styles.findMateButton>메이트 찾아보기</styles.findMateButton>
-      </styles.section4>
     </styles.container>
   );
 }

src/app/pages/main-page.tsx

@@ -20,7 +20,7 @@ const styles = {
   `,
   map: styled.div`
     width: 100%;
-    height: 50dvh;
+    height: 30rem;
 
     display: flex;
     flex-direction: column;
@@ -49,9 +49,7 @@ const styles = {
     width: 100%;
     display: flex;
     flex-direction: column;
-    gap: 2.6875rem;
-
-    margin-bottom: 5rem;
+    gap: 3rem;
   `,
   mateRecommendationTitle: styled.h1`
     color: #000;
@@ -67,14 +65,14 @@ const styles = {
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    gap: 2.12rem;
-    padding: 0 2.5rem;
+    gap: 2rem;
+    padding: 0 2.25rem;
   `,
   mateRecommendation: styled.div`
     display: flex;
     flex-grow: 1;
     flex-direction: row;
-    gap: 2.625rem;
+    gap: 2rem;
     overflow-x: auto;
 
     -ms-overflow-style: none;
@@ -83,6 +81,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 +157,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' }}>
+              <p>추천되는 메이트가 없습니다.</p>
+            </styles.mateRecommendationIsEmpty>
+          )}
         </styles.mateRecommendationRow>
       </styles.mateRecommendationContainer>
     </styles.container>