Merge pull request #90 from capstone-maru/dev

release: v0.6.0

.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",

next.config.mjs

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // reactStrictMode: false,
-  reactStrictMode: true,
+  reactStrictMode: false,
   compiler: {
     styledComponents: true,
   },
@@ -14,6 +13,14 @@ const nextConfig = {
     ];
   },
   trailingSlash: false /* 만약, 후행 슬래시가 필요하다면 true, default → false */,
+  webpack: config => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    return config;
+  },
 };
 
 export default nextConfig;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@react-hook/media-query": "^1.1.1",
+    "@stomp/stompjs": "^7.0.0",
     "@tanstack/react-query": "^5.25.0",
     "@tanstack/react-query-devtools": "^5.25.0",
     "axios": "^1.6.7",
@@ -18,14 +20,17 @@
     "react-redux": "^9.1.0",
     "recoil": "^0.7.7",
     "sass": "^1.71.1",
-    "styled-components": "^6.1.8"
+    "styled-components": "^6.1.8",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
     "@tanstack/eslint-plugin-query": "^5.20.1",
     "@types/navermaps": "^3.7.4",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
     "@typescript-eslint/parser": "^7.1.0",
     "eslint": "^8.2.0",

src/app/chat/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { MobileChattingBox } from '@/components/chat';
+
+export default function Page() {
+  return <MobileChattingBox />;
+}

src/app/globals.scss

@@ -7,6 +7,10 @@ body {
   min-height: 100dvh;
   min-width: 90rem;
   max-width: 100dvw;
+
+  @media (max-width: 768px) {
+    min-width: 390px;
+  }
 }
 
 * {
@@ -29,6 +33,11 @@ main {
   margin-top: 4.5rem;
   display: flex;
   justify-content: center;
+
+  @media (max-width: 768px) {
+    justify-content: flex-start;
+    main: 100vw;
+  }
 }
 
 a {

src/app/layout.tsx

@@ -5,6 +5,7 @@ import './globals.scss';
 
 import {
   AuthProvider,
+  InitialzationProvider,
   RecoilRootProvider,
   StyledComponentsRegistry,
   TanstackQueryProvider,
@@ -37,12 +38,16 @@ export default function RootLayout({
         <TanstackQueryProvider>
           <RecoilRootProvider>
             <StyledComponentsRegistry>
-              <AuthProvider>
+              <InitialzationProvider>
                 <NavigationBar />
-                <main>{children}</main>
-                <FloatingChatting />
-                <ToastProvider />
-              </AuthProvider>
+                <AuthProvider>
+                  <main>
+                    {children}
+                    <FloatingChatting />
+                  </main>
+                  <ToastProvider />
+                </AuthProvider>
+              </InitialzationProvider>
             </StyledComponentsRegistry>
           </RecoilRootProvider>
         </TanstackQueryProvider>

src/app/lib/providers/AuthProvider.tsx

@@ -1,47 +1,90 @@
 'use client';
 
+import { isAxiosError } from 'axios';
 import { usePathname, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useCallback, useLayoutEffect, useState } from 'react';
 
 import {
+  getUserData,
   postTokenRefresh,
   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();
-  const { login } = useAuthActions();
+  const { setAuthUserData, login } = useAuthActions();
 
   const router = useRouter();
   const pathName = usePathname();
+  const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    if (pathName === '/login') {
+  const handleLoginSuccess = useCallback(
+    (data: {
+      accessToken: string;
+      refreshToken: string;
+      expiresIn: number;
+    }) => {
+      login({
+        accessToken: data.accessToken,
+        refreshToken: data.refreshToken,
+        expiresIn: data.expiresIn,
+      });
+    },
+    [login],
+  );
+
+  const handleLoginError = useCallback(
+    (err: Error) => {
+      if (isAxiosError(err)) {
+        remove({ type: 'local', key: 'refreshToken' });
+        if (pathName !== '/') router.replace('/');
+      }
+    },
+    [router, pathName],
+  );
+
+  const checkAndRefreshToken = useCallback(() => {
+    if (pathName === '/login' || auth != null || isLoading) return;
+
+    const refreshToken = load<string>({ type: 'local', key: 'refreshToken' });
+    if (refreshToken == null) {
+      router.replace('/');
       return;
     }
 
-    if (auth === null) {
-      const refreshToken = load<string>({ type: 'local', key: 'refreshToken' });
-      if (refreshToken !== null) {
-        postTokenRefresh(refreshToken)
-          .then(({ data }) => {
-            login({
-              accessToken: data.accessToken,
-              refreshToken,
-              expiresIn: data.expiresIn,
-            });
+    setIsLoading(true);
+    postTokenRefresh(refreshToken)
+      .then(({ data }) => {
+        handleLoginSuccess(data);
+        getUserData()
+          .then(res => {
+            setAuthUserData(res.data);
           })
           .catch(err => {
             console.error(err);
-            router.replace('/');
           });
-      } else {
-        router.replace('/');
-      }
-    }
-  }, [auth, login, router, pathName]);
+      })
+      .catch(handleLoginError)
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [
+    pathName,
+    auth,
+    isLoading,
+    handleLoginError,
+    router,
+    handleLoginSuccess,
+    setAuthUserData,
+  ]);
+
+  useLayoutEffect(() => {
+    checkAndRefreshToken();
+  });
 
+  if (pathName !== '/' && pathName !== '/login' && (isLoading || auth == null))
+    return <></>;
   return <>{children}</>;
 }

src/app/lib/providers/InitializationProvider.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+import { useAuthActions, useAuthValue, useUserData } from '@/features/auth';
+
+export function InitialzationProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+
+  const auth = useAuthValue();
+  const { setAuthUserData } = useAuthActions();
+
+  const { data: userData } = useUserData(auth?.accessToken != null);
+
+  useEffect(() => {
+    console.log(userData);
+    if (userData != null) {
+      setAuthUserData(userData);
+      if (userData.initialized) {
+        router.replace('/profile');
+      }
+    }
+  }, [userData, router, setAuthUserData]);
+
+  return <>{children}</>;
+}

src/app/lib/providers/index.ts

@@ -1,4 +1,5 @@
 export * from './AuthProvider';
+export * from './InitializationProvider';
 export * from './RecoilRootProvider';
 export * from './StyledComponentsRegistry';
 export * from './TanstackQueryProvider';

src/app/page.tsx

@@ -1,10 +1,21 @@
 'use client';
 
 import { LandingPage, MainPage } from './pages';
+import { MobileLandingPage, MobileMainPage } from './pages/mobile';
 
 import { useAuthIsLogin } from '@/features/auth';
+import { useIsMobile } from '@/shared/mobile';
 
 export default function Home() {
   const isLogin = useAuthIsLogin();
-  return <>{isLogin ? <MainPage /> : <LandingPage />}</>;
+  const isMobile = useIsMobile();
+  return (
+    <>
+      {isLogin ? (
+        <>{isMobile ? <MobileMainPage /> : <MainPage />}</>
+      ) : (
+        <>{isMobile ? <MobileLandingPage /> : <LandingPage />}</>
+      )}
+    </>
+  );
 }