Merge pull request #41 from ds-TopHat/feat/#40/auth

[Feat/#40] 가입, 리이슈, 토큰 로직 변경

Author: hansoojeongsj

package.json

@@ -20,6 +20,7 @@
     "framer-motion": "^12.15.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-error-boundary": "^6.0.0",
     "react-router-dom": "^7.6.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -2,17 +2,20 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { RouterProvider } from 'react-router-dom';
 import { router } from '@routes/router';
+import '@styles/index.css';
 import ThemeProvider from '@styles/themeProvider';
+import { GlobalErrorBoundary } from '@routes/globalErrorBoundary';
 
-import { queryClient } from '@/queryClient';
-import '@styles/index.css';
+import queryClient from './queryClient';
 
 const App = () => {
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider>
-        <RouterProvider router={router} />
-        {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+        <GlobalErrorBoundary>
+          <RouterProvider router={router} />
+          {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+        </GlobalErrorBoundary>
       </ThemeProvider>
     </QueryClientProvider>
   );

public/svg/ic_error.svg

@@ -0,0 +1,29 @@
+import { IcError } from '@components/icons';
+import Button from '@components/button/Button';
+import { useNavigate } from 'react-router-dom';
+import { routePath } from '@routes/routePath';
+
+import * as styles from './error.css';
+
+const Error = () => {
+  const navigate = useNavigate();
+  const goHome = () => {
+    navigate(routePath.HOME);
+  };
+
+  return (
+    <main className={styles.container}>
+      <IcError width={120} height={120} />
+      <h1 className={styles.title}>서비스 이용에 불편을 드려 죄송합니다. </h1>
+      <p className={styles.description}>
+        요청하신 페이지를 처리하는 도중 예기치 못한 에러가 발생했어요. <br />
+        다시 한번 시도하거나 홈으로 이동해 주세요.
+      </p>
+      <div className={styles.buttonWrapper} onClick={goHome}>
+        <Button isActive>홈으로 이동</Button>
+      </div>
+    </main>
+  );
+};
+
+export default Error;

src/App.tsx

@@ -0,0 +1,30 @@
+import { themeVars } from '@styles/theme.css';
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  paddingTop: '14rem',
+  height: '100dvh',
+  background: 'linear-gradient(0deg, #E7F0FF 0%, #FFF 100%)',
+});
+
+export const title = style({
+  margin: '4rem 0 2rem',
+  color: themeVars.color.point,
+  ...themeVars.font.bodyMedium,
+});
+
+export const description = style({
+  textAlign: 'center',
+  color: themeVars.color.gray500,
+  ...themeVars.font.labelSmall,
+});
+
+export const buttonWrapper = style({
+  position: 'fixed',
+  bottom: 0,
+  width: '100%',
+  padding: '2.4rem 2rem',
+});

src/pages/error/Error.tsx

@@ -0,0 +1,15 @@
+import * as styles from './loading.css';
+
+const Loading = () => {
+  return (
+    <main className={styles.container}>
+      <div className={styles.dots}>
+        <span className={styles.dot} />
+        <span className={styles.dot} />
+        <span className={styles.dot} />
+      </div>
+    </main>
+  );
+};
+
+export default Loading;

src/pages/error/error.css.ts

@@ -0,0 +1,34 @@
+import { style, keyframes } from '@vanilla-extract/css';
+import { themeVars } from '@styles/theme.css';
+
+// 위아래로 점프하는 애니메이션
+const bounce = keyframes({
+  '0%, 80%, 100%': { transform: 'translateY(0)' },
+  '40%': { transform: 'translateY(-12px)' },
+});
+
+export const container = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100dvh',
+  background: 'linear-gradient(0deg, #E7F0FF 0%, #FFF 100%)',
+});
+
+export const dots = style({
+  display: 'flex',
+  gap: '0.8rem',
+});
+
+export const dot = style({
+  width: '1rem',
+  height: '1rem',
+  borderRadius: '50%',
+  backgroundColor: themeVars.color.point,
+  animation: `${bounce} 1.4s infinite ease-in-out both`,
+  selectors: {
+    '&:nth-child(1)': { animationDelay: '0s' },
+    '&:nth-child(2)': { animationDelay: '0.2s' },
+    '&:nth-child(3)': { animationDelay: '0.4s' },
+  },
+});

src/pages/loading/Loading.tsx

@@ -14,6 +14,7 @@ export const usePostLogin = () => {
     onSuccess: (data) => {
       if (data.token) {
         tokenService.saveAccessToken(data.token);
+        tokenService.saveRefreshToken(data.refreshToken);
       }
     },
     onError: (error: AxiosError) => {

src/pages/loading/loading.css.ts

@@ -6,6 +6,8 @@ export const formWrapper = style({
   flexDirection: 'column',
   gap: '0.4rem',
   width: '100%',
+  maxWidth: '48rem',
+
   padding: '0 3.6rem',
 });
 
@@ -30,6 +32,8 @@ export const buttonWrapper = style({
   position: 'fixed',
   flexDirection: 'column',
   width: '100%',
+  maxWidth: '48rem',
+
   padding: '0 3.6rem 5rem',
   gap: '1.2rem',
   alignItems: 'center',