Merge pull request #72 from capstone-maru/feat/shared

feat: Apply changes to the Shared API, Add the create mate card form when writing a post
capstone-maru · May 5, 2024 · 765074b · 765074b
2 parents c635c0a + 0378d7c
commit 765074b
Show file tree

Hide file tree

Showing 23 changed files with 1,092 additions and 502 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -53,8 +53,9 @@
     ],
     "no-empty-pattern": ["warn", { "allowObjectPatternsAsParameters": true }],
     "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-floating-promises": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-empty-function": ["warn", {}],
+    "@typescript-eslint/no-empty-function": ["off", {}],
     "react/no-array-index-key": "warn",
     "react/require-default-props": "off",
     "react/jsx-no-useless-fragment": "off",

diff --git a/public/kakao-login.png b/public/kakao-login.png
diff --git a/public/landing-page-image.png b/public/landing-page-image.png
diff --git a/public/naver-login.png b/public/naver-login.png
diff --git 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 '@/app/lib/axios-interceptor';
 
 import {
   AuthProvider,

diff --git a/src/app/lib/axios-interceptor.ts b/src/app/lib/axios-interceptor.ts
@@ -0,0 +1,56 @@
+'use client';
+
+import axios, { type AxiosRequestConfig, isAxiosError } from 'axios';
+
+import { postTokenRefresh } from '@/features/auth';
+import { load, save } from '@/shared/storage';
+
+interface AxiosRequestConfigWithRetryCount extends AxiosRequestConfig {
+  retryCount?: number;
+}
+
+axios.interceptors.response.use(
+  response => response,
+  async error => {
+    if (!isAxiosError(error)) return await Promise.reject(error);
+
+    const refreshToken = load<string>({ type: 'local', key: 'refreshToken' });
+    const config = error.config as AxiosRequestConfigWithRetryCount;
+    if (
+      error.response?.status === 401 &&
+      refreshToken != null &&
+      (config?.retryCount ?? 0) < 3
+    ) {
+      config.retryCount = (config?.retryCount ?? 0) + 1;
+      try {
+        const response = await postTokenRefresh(refreshToken);
+
+        axios.defaults.headers.common.Authorization = `Bearer ${response.data.accessToken}`;
+        save({
+          type: 'local',
+          key: 'refreshToken',
+          value: response.data.refreshToken,
+        });
+        save({
+          type: 'local',
+          key: 'expiresIn',
+          value: `${response.data.expiresIn}`,
+        });
+
+        const token = response.data.accessToken;
+        const newConfig = {
+          ...config,
+          headers: {
+            ...config.headers,
+            Authorization: `Bearer ${token}`,
+          },
+        };
+
+        return await axios(newConfig);
+      } catch (refreshError) {
+        return await Promise.reject(refreshError);
+      }
+    }
+    return await Promise.reject(error);
+  },
+);
diff --git a/src/app/lib/providers/AuthProvider.tsx b/src/app/lib/providers/AuthProvider.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { isAxiosError } from 'axios';
 import { usePathname, useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
@@ -8,7 +9,7 @@ import {
   useAuthActions,
   useAuthValue,
 } from '@/features/auth';
-import { load } from '@/shared/storage';
+import { load, remove } from '@/shared/storage';
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const auth = useAuthValue();
@@ -22,26 +23,28 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
       return;
     }
 
-    if (auth === null) {
+    if (auth == null) {
       const refreshToken = load<string>({ type: 'local', key: 'refreshToken' });
-      if (refreshToken !== null) {
+      if (refreshToken != null) {
         postTokenRefresh(refreshToken)
           .then(({ data }) => {
             login({
               accessToken: data.accessToken,
-              refreshToken,
+              refreshToken: data.refreshToken,
               expiresIn: data.expiresIn,
             });
           })
-          .catch(err => {
-            console.error(err);
-            router.replace('/');
+          .catch((err: Error) => {
+            if (isAxiosError(err)) {
+              remove({ type: 'local', key: 'refreshToken' });
+              if (pathName !== '/') router.replace('/');
+            }
           });
       } else {
         router.replace('/');
       }
     }
-  }, [auth, login, router, pathName]);
+  });
 
   return <>{children}</>;
 }
diff --git a/src/app/pages/landing-page.tsx b/src/app/pages/landing-page.tsx
@@ -169,10 +169,7 @@ export function LandingPage() {
   return (
     <styles.container>
       <styles.section1>
-        <styles.img
-          alt="Brazuca Date Night"
-          src="https://s3-alpha-sig.figma.com/img/cee1/f195/09c0e7edb4b99b5d73a56afd3391e70c?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=mGbLX64XEb4~I8MnA4qswCUMllOL~P7U2jkKUuzLYa6x3Fr2kB6NFyORGvAhWNjkQ1PGIkTB9bul-F4o2hdS-jE5~1y0Ss1sLqK-j8bFMsFvJSm7qqTShNsBKHYXnbXA0d8tl74LDrhwNADsVQbR2p7xG~syVQ3l-NSmzaGaeEF3g0tnUIB3dybwZY1llwLcazj7yBXhVY-NMWg8ekFaFNU7ZRsK7HhK81bQJb1CBNughUXF1O1xDvQZjh3IKx~f2TP5qJAkB5Z1Nw9i5SoZF9YEo-odhDSrvzy7Gbfqw9W0xyXesJVGTRF~AZ3z8D5Zn2E~aZDvg5i3SWJHfFuFXg__"
-        />
+        <styles.img alt="Brazuca Date Night" src="/landing-page-image.png" />
         <styles.description>
           <h1>공동주거생활의 A to Z</h1>
           <p>
@@ -183,18 +180,12 @@ export function LandingPage() {
             <a
               href={`${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_URL}/login`}
             >
-              <img
-                alt="kakao"
-                src="https://s3-alpha-sig.figma.com/img/3d3c/d1f5/021fb8c1c71bbfcfdbd58571b78fafa3?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Jgm070ukGhSkHRxajO10LZQixoKIVm2S6l7xuP6MY0UJD54Rosq2xvca-UgdiThbu-TLnIu2xuoP0gOXtw-L4PDccdMPBnaURCuygfJSH6ELelnq12~hR9YuwNLifCAl48tAnjwwkCZCPlGlbK1HiUIhAZ5HnF2qXc2PQjq4Zfu0WBZOhttWhRRlZhmHOFFrus--5xYMq4lIw6n0Or8aGJ~Amf9HDlVQmj4ioeSG9HZB3DAEpoIcgqhzzSjqG64Z-U5k~cYZc8V~y5qmm3bVX1n3HCfKi4F~25zmS3A9tNX~y2VcaS-L018gcMtHVke9Qb6C0B9foBMZI6TobWy-Ng__"
-              />
+              <img alt="kakao" src="/kakao-login.png" />
             </a>
             <a
               href={`${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/naver?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_URL}/login`}
             >
-              <img
-                alt="naver"
-                src="https://s3-alpha-sig.figma.com/img/bc24/1c57/afda23776f60b331a41aa67a9eaaf66c?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=dk8rQuwlcSV6HVLJZQ3SI4Cf5tGL8HbnfAisVrT5kE5-rqlQ71CKGQtz0xTKX-7bt4OVOOsMaaQX5IsqhHnX2ZEudp4AN2M6lGQf9lE9iLvKT~5uAnYiwMHCXIJ-zuu6qLpDu~rDAPZ92ki8Bc6Dp-OIxkWU75wb54T7erfxNZgATHwEBre-5I7~pPWo-GETubNWL7zF~QFP97Cqf34gORT7GlRg~qPHnBJfeER7AcExfyXG8CXyqjkk5uudH5FD7zU3a9PGunNQDRdComHZRx6MOQBltHa6mPT78MBB8mPyDlJxuRNrpkyFJKDa3I3JWwL-Ns-qJlwBW0WDnPsYQA__"
-              />
+              <img alt="naver" src="/naver-login.png" />
             </a>
           </styles.loginButtons>
         </styles.description>

diff --git a/src/app/pages/setting-page.tsx b/src/app/pages/setting-page.tsx
@@ -133,8 +133,9 @@ const styles = {
 };
 
 interface SelectedState {
-  smoking: string | undefined;
-  room: string | undefined;
+  smoking?: string;
+  room?: string;
+  mateAge?: string;
 }
 
 interface UserProps {
@@ -167,25 +168,22 @@ export function SettingPage({ cardId }: { cardId: number }) {
   }, [user.data]);
 
   const card = useUserCard(cardId);
-  const [features, setFeatures] = useState<string[] | null>(null);
+  const [features, setFeatures] = useState<string[] | undefined>(undefined);
 
   useEffect(() => {
     if (isMySelf) {
       if (card !== undefined) {
-        const featuresData = card.data?.data.myFeatures ?? null;
+        const featuresData = card.data?.data.myFeatures ?? undefined;
         setFeatures(featuresData);
       }
     }
   }, [card, isMySelf]);
 
-  const [selectedState, setSelectedState] = useState<SelectedState>({
-    smoking: undefined,
-    room: undefined,
-  });
+  const [selectedState, setSelectedState] = useState<SelectedState>({});
 
   useEffect(() => {
     if (isMySelf) {
-      if (features !== null) {
+      if (features != null) {
         setSelectedState({
           ...selectedState,
           smoking: features[0].split(':')[1],
@@ -204,7 +202,7 @@ export function SettingPage({ cardId }: { cardId: number }) {
 
   useEffect(() => {
     if (isMySelf) {
-      if (features !== null) {
+      if (features != null) {
         const initialOptions: SelectedOptions = {};
         const optionsString = features[3].split(':')[1];
         const budgetIdx = optionsString.indexOf('[');

diff --git a/src/app/pages/user-input-page.tsx b/src/app/pages/user-input-page.tsx
@@ -476,7 +476,7 @@ export function UserInputPage() {
             gender={user?.gender}
             birthYear={user?.birthYear}
             location={undefined}
-            vitalFeatures={null}
+            vitalFeatures={undefined}
             onFeatureChange={handleFeatureChange}
             onLocationChange={setLocation}
             onMateAgeChange={() => {}}
@@ -488,7 +488,7 @@ export function UserInputPage() {
             mbti={undefined}
             major={undefined}
             budget={undefined}
-            optionFeatures={null}
+            optionFeatures={undefined}
             onFeatureChange={handleOptionClick}
             onMbtiChange={setMbti}
             onMajorChange={setMajor}
@@ -502,7 +502,7 @@ export function UserInputPage() {
             gender={user?.gender}
             birthYear={undefined}
             location={locationInput}
-            vitalFeatures={null}
+            vitalFeatures={undefined}
             onFeatureChange={handleMateFeatureChange}
             onLocationChange={setLocation}
             onMateAgeChange={setMateAge}
@@ -514,7 +514,7 @@ export function UserInputPage() {
             mbti={undefined}
             major={undefined}
             budget={undefined}
-            optionFeatures={null}
+            optionFeatures={undefined}
             onFeatureChange={handleMateOptionClick}
             onMbtiChange={setMateMbti}
             onMajorChange={setMateMajor}