♻️Refactor: 리펙토링 작업

src/app/(auth)/layout.tsx

@@ -4,7 +4,7 @@ export default function DashboardLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="flex h-full items-center justify-center">
+    <div className="flex h-screen items-center justify-center">
       <div className="flex w-520 flex-col items-center justify-center gap-24 px-0 tablet:px-12">
         {children}
       </div>

src/app/error.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useMounted } from '@hooks/useMounted'
+import Image from 'next/image'
+import { useTheme } from 'next-themes'
+
+export default function ErrorPage({ reset }: { reset?: () => void }) {
+  const { theme, systemTheme } = useTheme()
+  const mounted = useMounted()
+  if (!mounted) return null
+
+  const currentTheme = theme === 'system' ? systemTheme : theme
+  const isDark = currentTheme === 'dark'
+
+  return (
+    <div
+      className={
+        isDark
+          ? 'flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-gray-900 to-gray-800'
+          : 'flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100'
+      }
+    >
+      <div className="flex size-28 items-center justify-center">
+        <Image
+          src={isDark ? '/images/logo-dark.svg' : '/images/logo-light.svg'}
+          alt="logo"
+          fill
+          priority
+          className="object-contain"
+        />
+      </div>
+      <div
+        className={
+          isDark
+            ? 'mt-8 text-4xl font-bold tracking-tight text-blue-300'
+            : 'mt-8 text-4xl font-bold tracking-tight text-blue-600'
+        }
+      >
+        에러가 발생했습니다
+      </div>
+      <div
+        className={
+          isDark
+            ? 'mt-3 text-lg font-normal text-gray-300'
+            : 'mt-3 text-lg font-normal text-gray-600'
+        }
+      >
+        문제가 발생했습니다. 잠시 후 다시 시도해 주세요.
+      </div>
+      <button
+        className={
+          isDark
+            ? 'mt-8 rounded-lg bg-blue-700 px-8 py-3 text-lg font-semibold text-white shadow transition-colors hover:bg-blue-800'
+            : 'mt-8 rounded-lg bg-blue-600 px-8 py-3 text-lg font-semibold text-white shadow transition-colors hover:bg-blue-700'
+        }
+        onClick={() => (reset ? reset() : window.history.back())}
+      >
+        이전 페이지로
+      </button>
+    </div>
+  )
+}

src/app/features/auth/api/authApi.ts

@@ -1,4 +1,5 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
+
 import { User as SignupResponse } from '@/app/shared/types/user.type'
 
 import { LoginRequest, LoginResponse, SignupRequest } from '../types/auth.type'

src/app/features/auth/api/authEndpoint.ts

@@ -1,4 +1,4 @@
 export const AUTH_ENDPOINT = {
-  LOGIN: '/15-2/auth/login',
-  SIGNUP: '/15-2/users',
+  LOGIN: `/${process.env.NEXT_PUBLIC_TEAM_ID}/auth/login`,
+  SIGNUP: `/${process.env.NEXT_PUBLIC_TEAM_ID}/users`,
 }

src/app/features/auth/components/LoginForm.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import Input from '@components/Input'
+import Input from '@components/common/Input/Input'
+import PasswordInput from '@components/common/Input/PasswordInput'
 import { cn } from '@lib/cn'
 import { useForm } from 'react-hook-form'
 
@@ -37,9 +38,8 @@ export default function LoginForm() {
         hasError={!!errors.email}
         errorMessage={errors.email?.message}
       />
-      <Input
+      <PasswordInput
         labelName="비밀번호"
-        type="password"
         placeholder="비밀번호 입력"
         autoComplete="off"
         {...register('password', loginValidation.password)}

src/app/features/auth/components/SignupForm.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import Input from '@components/Input'
-import { useConfirmPasswordValidation } from '@hooks/useConfirmPasswordValidation'
+import Input from '@components/common/Input/Input'
+import PasswordInput from '@components/common/Input/PasswordInput'
 import { cn } from '@lib/cn'
+import { getConfirmPasswordValidation } from '@util/getConfirmPasswordValidation'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 
@@ -29,7 +30,7 @@ export default function SignupForm() {
 
   const [isChecked, setIsChecked] = useState(false)
   const { mutate: signupMtate, isPending } = useSignupMutation()
-  const validation = useConfirmPasswordValidation(() => getValues('password'))
+  const validation = getConfirmPasswordValidation(() => getValues('password'))
 
   function handleAgree() {
     setIsChecked((prev) => !prev)
@@ -60,9 +61,8 @@ export default function SignupForm() {
         hasError={!!errors.nickname}
         errorMessage={errors.nickname?.message}
       />
-      <Input
+      <PasswordInput
         labelName="비밀번호"
-        type="password"
         placeholder="8자 이상 입력해 주세요"
         autoComplete="new-password"
         {...register('password', {
@@ -72,9 +72,8 @@ export default function SignupForm() {
         hasError={!!errors.password}
         errorMessage={errors.password?.message}
       />
-      <Input
+      <PasswordInput
         labelName="비밀번호 확인"
-        type="password"
         placeholder="비밀번호를 한번 더 입력해주세요"
         autoComplete="new-password"
         {...register('confirmPassword', validation)}

src/app/features/auth/hooks/useLoginMutation.ts

@@ -15,10 +15,17 @@ export function useLoginMutation() {
   return useMutation<LoginResponse, AxiosError | Error, LoginRequest>({
     mutationFn: login,
     onSuccess: async (response) => {
+      if (!process.env.NEXT_PUBLIC_TEAM_ID) {
+        throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
+      }
+
       updateAuthState(response)
       showSuccess('로그인에 성공하셨습니다!')
-      await new Promise((resolve) => setTimeout(resolve, 400))
-      router.push('/mydashboard')
+
+      // ✅ 상태 반영을 위해 이벤트 큐로 넘김
+      setTimeout(() => {
+        router.push('/mydashboard')
+      }, 0)
     },
     onError: (error) => {
       if (axios.isAxiosError(error)) {

src/app/features/auth/hooks/useSignupMutation.ts

@@ -10,6 +10,10 @@ import { signup } from '../api/authApi'
 import { SignupRequest } from '../types/auth.type'
 
 export function useSignupMutation() {
+  if (!process.env.NEXT_PUBLIC_TEAM_ID) {
+    throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
+  }
+
   const router = useRouter()
 
   return useMutation<User, AxiosError | Error, SignupRequest>({

src/app/features/dashboard/api/invitation.ts

@@ -1,13 +1,13 @@
 // src/app/features/dashboard/api/invitation.ts
-import api from '@lib/axios'
+import authHttpClient from '@api/axios'
 
 type InvitationRequest = {
   email: string
   dashboardId: number | string
 }
 
 export const inviteUser = async ({ email, dashboardId }: InvitationRequest) => {
-  const response = await api.post(
+  const response = await authHttpClient.post(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards/${dashboardId}/invitations`,
     {
       email,

src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import api from '@lib/axios'
+import authHttpClient from '@api/axios'
 import { showError, showSuccess } from '@lib/toast'
 import { useMutation } from '@tanstack/react-query'
 import { useQueryClient } from '@tanstack/react-query'
@@ -24,7 +24,7 @@ export default function DeleteDashboardButton({
       if (!process.env.NEXT_PUBLIC_TEAM_ID) {
         throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
       }
-      await api.delete(
+      await authHttpClient.delete(
         `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards/${dashboardId}`,
       )
     },

src/app/features/dashboard/components/edit/EditInvitation.tsx

@@ -1,7 +1,7 @@
 'use client'
 
+import authHttpClient from '@api/axios'
 import Tooltip from '@components/common/header/Collaborator/Tooltip'
-import api from '@lib/axios'
 import { cn } from '@lib/cn'
 import { showError, showSuccess } from '@lib/toast'
 import { useModalStore } from '@store/useModalStore'
@@ -43,7 +43,7 @@ export default function EditInvitation() {
     queryKey: ['invitations', teamId, dashboardId],
     queryFn: async () => {
       if (!teamId || !dashboardId) return []
-      const res = await api.get<{ invitations: Invitation[] }>(
+      const res = await authHttpClient.get<{ invitations: Invitation[] }>(
         `/${teamId}/dashboards/${dashboardId}/invitations`,
       )
       return res.data.invitations
@@ -66,7 +66,7 @@ export default function EditInvitation() {
     mutationFn: async (invitationId: number) => {
       if (!teamId || !dashboardId)
         throw new Error('teamId 또는 dashboardId가 없습니다.')
-      await api.delete(
+      await authHttpClient.delete(
         `/${teamId}/dashboards/${dashboardId}/invitations/${invitationId}`,
       )
     },

src/app/features/dashboard/components/edit/EditMember.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import authHttpClient from '@lib/axios'
+import authHttpClient from '@api/axios'
 import { cn } from '@lib/cn'
 import { getTeamId } from '@lib/getTeamId'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'

src/app/features/dashboard_Id/api/deleteCard.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { ApiResponse } from '../type/ApiResponse'
 

src/app/features/dashboard_Id/api/deleteColumn.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 export async function deleteColumn(columnId: number): Promise<void> {
   await authHttpClient.delete(

src/app/features/dashboard_Id/api/deleteComment.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { ApiResponse } from '../type/ApiResponse'
 

src/app/features/dashboard_Id/api/fetchCards.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { CardResponse } from '../type/Card.type'
 

src/app/features/dashboard_Id/api/fetchColumns.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { Column, ColumnsResponse } from '../type/Column.type'
 

src/app/features/dashboard_Id/api/fetchComments.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { CommentsResponse } from '../type/Comment.type'
 

src/app/features/dashboard_Id/api/fetchMembers.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { Member, MembersResponse } from '../type/Member.type'
 

src/app/features/dashboard_Id/api/postCard.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { CardFormData } from '../type/CardFormData.type'
 

src/app/features/dashboard_Id/api/postCardImage.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 // ✅ 카드 이미지 파일 업로드 시 - 카드 생성 요청에(post) 전달 가능한 형태의 데이터로, 응답 받아서 사용할 예정
 export async function postCardImages(

src/app/features/dashboard_Id/api/postColumn.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { CreateColumnRequest, CreateColumnResponse } from '../type/Column.type'
 

src/app/features/dashboard_Id/api/postComment.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { CommentResponse, PutCommentForm } from '../type/CommentFormData.type'
 

src/app/features/dashboard_Id/api/putCard.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { ApiResponse } from '../type/ApiResponse'
 import { CardModifyFormData } from '../type/CardFormData.type'

src/app/features/dashboard_Id/api/putComment.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { CommentResponse, PutCommentForm } from '../type/CommentFormData.type'
 

src/app/features/dashboard_Id/api/updateCardColumn.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 // 카드 이동 - 해당 카드의 컬럼ID를 변경하는 방식(PUT)
 export async function updateCardColumn(

src/app/features/dashboard_Id/api/updateColumn.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
 
 import { UpdateColumnRequest, UpdateColumnResponse } from '../type/Column.type'
 

src/app/features/landing/components/Footer.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import GithubIcon from './GithubIcon'
 
 export default function Footer() {

src/app/features/landing/components/Header.tsx

@@ -4,12 +4,13 @@ import ThemeToggle from '@components/ThemeToggle'
 import Link from 'next/link'
 
 import Logo from './Logo'
+
 export default function Header() {
   return (
     <header className="BG-white Border-bottom sticky inset-x-0 top-0 z-50">
       <nav className="Border-bottom flex h-70 items-center justify-between px-80 py-15 mobile-wide:h-60 mobile-wide:px-24 mobile-wide:py-16 tablet-wide:px-40">
         <Logo />
-        <div className="flex gap-16">
+        <div className="flex items-center justify-center gap-16">
           <Link href="/login">로그인</Link>
           <Link href="/signup">회원가입</Link>
           <ThemeToggle />

src/app/features/landing/components/Landing.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import Footer from './Footer'
+import Header from './Header'
+import Main from './Main'
+
+export default function Landing() {
+  return (
+    <>
+      <Header />
+      <Main />
+      <Footer />
+    </>
+  )
+}

src/app/features/landing/components/Main.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import FeatureCardSection from './FeatureCardSection'
 import HeroSection from './HeroSection'
 import PointSection from './PointSection'

src/app/features/mypage/api/mypageApi.ts

@@ -1,4 +1,4 @@
-import authHttpClient from '@lib/axios'
+import authHttpClient from '@api/axios'
 
 import { User as UserDataResponse } from '@/app/shared/types/user.type'
 
@@ -9,7 +9,7 @@ import {
 } from '../types/mypage.type'
 import { MYPAGE_ENDPOINT } from './mypageEndPoint'
 
-export async function loadUser(): Promise<UserDataResponse> {
+export async function fetchUser(): Promise<UserDataResponse> {
   const response = await authHttpClient.get(MYPAGE_ENDPOINT.USER)
   return response.data
 }