v1.0.0

.eslintrc.json

@@ -49,6 +49,12 @@
       {
         "endOfLine": "auto"
       }
+    ],
+    "jsx-a11y/label-has-associated-control": [
+      2,
+      {
+        "labelAttributes": ["htmlFor"]
+      }
     ]
   }
 }

.github/workflows/chromatic.yml

@@ -3,11 +3,11 @@ name: 'Chromatic Deployment'
 
 on:
   pull_request:
-    branches: [main]
+    branches: [main, dev]
     paths:
       - '**.stories.tsx'
   push:
-    branches: [main]
+    branches: [main, dev]
     paths:
       - '**.stories.tsx'
 

.vscode/settings.json

@@ -12,5 +12,6 @@
     "source.fixAll.stylelint": "explicit",
     "source.addMissingImports": "explicit"
   },
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "cSpell.words": ["bandiboodi", "bandi", "boodi"]
 }

src/app/error/page.tsx

@@ -1,7 +1,7 @@
-import { ErrorPageLayout } from '@/features/customErrors/components';
+import { DefaultErrorPage } from '@/features/customErrors/components';
 
 const ErrorPage = () => {
-  return <ErrorPageLayout statusCode={500} />;
+  return <DefaultErrorPage statusCode={500} />;
 };
 
 export default ErrorPage;

src/app/feed/layout.tsx

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from 'react';
+
+const FeedPageLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="w-full h-[100dvh] bg-white">
+      <div className="flex flex-col pt-5xs">{children}</div>
+    </div>
+  );
+};
+
+export default FeedPageLayout;

src/app/feed/page.tsx

@@ -0,0 +1,14 @@
+import { BottomNavigation } from '@/components/molecules/bottomNavigation';
+import { FeedBody, FeedHeader } from '@/features/feed';
+
+const FeedPage = () => {
+  return (
+    <>
+      <FeedHeader />
+      <FeedBody />
+      <BottomNavigation />
+    </>
+  );
+};
+
+export default FeedPage;

src/app/globals.css

@@ -12,3 +12,8 @@
     @apply max-w-[var(--layout-max-w)] min-h-[var(--layout-min-h)] w-full mx-auto;
   }
 }
+
+::-webkit-scrollbar {
+  /* 가로 스크롤바 보이지 않도록 */
+  display: none;
+}

src/app/goal/detail/layout.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 
 const layout = ({ children }: PropsWithChildren) => {
-  return <main className="relative h-screen">{children}</main>;
+  return <main className="relative h-[100dvh]">{children}</main>;
 };
 
 export default layout;

src/app/goal/new/layout.tsx

@@ -12,7 +12,7 @@ import CreateGoalFormProvider from '@/features/goal/contexts/CreateGoalFormProvi
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <CreateGoalFormProvider>
-      <div className="w-full h-screen bg-gradient1 relative">
+      <div className="w-full h-[100dvh] bg-gradient1 relative">
         <SpeechBubble className="absolute top-[-4%] w-full" />
         <Stars className="absolute top-[28%] left-1/4 w-1/2" />
         <Image

src/app/goal/update/[id]/page.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+import GoalUpdateForm from '@/features/goal/components/update/GoalUpdateForm';
+import { useGetGoal } from '@/hooks/reactQuery/goal';
+
+interface ParamsProps {
+  params: {
+    id: string;
+  };
+}
+
+const UpdateGoalPage = ({ params }: ParamsProps) => {
+  const goalId = +params['id'];
+  const { data: goal } = useGetGoal({ goalId });
+  const router = useRouter();
+
+  useEffect(() => {
+    if (goal?.isMyGoal === false) {
+      router.push(`/goal/detail/${goalId}`);
+    }
+  }, [goal, goalId, router]);
+
+  return goal?.isMyGoal && <GoalUpdateForm goalId={goalId} goal={goal} />;
+};
+
+export default UpdateGoalPage;

src/app/goal/update/layout.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import type { PropsWithChildren } from 'react';
+
+const UpdateGoalLayout = ({ children }: PropsWithChildren) => {
+  return <div className="w-full bg-[#F8FBFF]">{children}</div>;
+};
+
+export default UpdateGoalLayout;

src/app/home/[username]/error.tsx

@@ -1,9 +1,28 @@
 'use client';
 
-import { ErrorPageLayout } from '@/features/customErrors/components';
+import Image from 'next/image';
+import type { AxiosError } from 'axios';
 
-const Error = ({ error }: { error: Error & { digest?: string } }) => {
-  return <ErrorPageLayout statusCode={403} />;
+import NullUserErrorImage from '@/assets/images/error/close.png';
+import { DefaultErrorPage } from '@/features/customErrors/components';
+import { ErrorPageLayout } from '@/features/customErrors/components/errorPageLayout';
+import { ResetButton } from '@/features/customErrors/components/errorPageLayout/ResetButton';
+
+const ERROR_STATUS_CODE = {
+  public: 403,
+  nullUser: 404,
+};
+
+const Error = ({ error }: { error: AxiosError & { digest?: string } }) => {
+  if (error.status === ERROR_STATUS_CODE.public) return <DefaultErrorPage statusCode={403} />;
+  if (error.status === ERROR_STATUS_CODE.nullUser)
+    return (
+      <ErrorPageLayout
+        TopComponent={<Image src={NullUserErrorImage} width={146} height={189} alt="null_user_error" />}
+        title={`앗, 존재하지 않는 인생지도에요. \n 페이지 주소를 다시 확인해주세요.`}
+        footer={<ResetButton statusCode={403} />}
+      />
+    );
 };
 
 export default Error;

src/app/home/[username]/layout.tsx

@@ -11,10 +11,10 @@ export const generateMetadata = async ({ params: { username } }: HomeRouteParams
 
 const HomeLayout = ({ children }: PropsWithChildren) => {
   return (
-    <main className="relative flex justify-center bg-gradient1">
+    <main className="relative flex justify-center">
       <div className="absolute right-0 w-full h-[125px] bg-gradientPurpleBlur" />
       <div className="w-full h-[100dvh]">
-        <div className="w-full h-[100dvh] flex flex-col items-center justify-between pb-xs">{children}</div>
+        <div className="w-full h-[100dvh] flex flex-col items-center justify-between">{children}</div>
       </div>
     </main>
   );

src/app/loading.tsx

@@ -0,0 +1,11 @@
+import { Loading as LoadingComponent } from '@/components/molecules/loading';
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center h-screen bg-gradient1">
+      <div className="w-[160px] h-[160px] rounded-[12px] shadow-thumb bg-white">
+        <LoadingComponent />
+      </div>
+    </div>
+  );
+}

src/app/my/layout.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 
 const MyLayout = ({ children }: PropsWithChildren) => {
-  return <div className="w-full h-[100dvh] bg-gradient1">{children}</div>;
+  return <div className="w-full h-[100dvh]">{children}</div>;
 };
 
 export default MyLayout;

src/app/my/page.tsx

@@ -1,7 +1,13 @@
+import { BottomNavigation } from '@/components/molecules/bottomNavigation';
 import { MyPageLayout } from '@/features/my/components';
 
 const MyPage = () => {
-  return <MyPageLayout />;
+  return (
+    <>
+      <MyPageLayout />
+      <BottomNavigation />
+    </>
+  );
 };
 
 export default MyPage;

src/app/not-found.tsx

@@ -1,7 +1,7 @@
-import { ErrorPageLayout } from '@/features/customErrors/components';
+import { DefaultErrorPage } from '@/features/customErrors/components';
 
 const NotFoundPage = () => {
-  return <ErrorPageLayout statusCode={404} />;
+  return <DefaultErrorPage statusCode={404} />;
 };
 
 export default NotFoundPage;

src/app/oauth2/token/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect } from 'react';
+import type { Route } from 'next';
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import { useAuth } from '@/hooks';
@@ -21,7 +22,14 @@ const OAuthTokenPage = () => {
 
   useEffect(() => {
     if (isLoggedIn && memberData) {
-      router.push(isLoggedIn ? `/home/${memberData.username}` : '/onboarding');
+      const prevPath = sessionStorage.getItem('savedPathBeforeLogin') as Route;
+      if (prevPath?.startsWith('/') && prevPath !== '/') {
+        router.push(prevPath);
+        sessionStorage.removeItem('savedPathBeforeLogin');
+      } else {
+        router.push(isLoggedIn ? `/home/${memberData.username}` : '/onboarding');
+      }
+
       localStorage.setItem('username', memberData.username);
     }
   }, [memberData, router, isLoggedIn]);

src/app/template.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import type { PropsWithChildren } from 'react';
+import { m } from 'framer-motion';
+
+const variants = {
+  enter: { opacity: 1, x: 0, y: 0 },
+  hidden: { opacity: 0, x: -200, y: 0 },
+};
+
+export default function Template({ children }: PropsWithChildren) {
+  return (
+    <m.main
+      variants={variants}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ type: 'spring' }}
+    >
+      {children}
+    </m.main>
+  );
+}