diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index 6d244fb..b43e1e7 100644
--- a/src/app/(auth)/layout.tsx
+++ b/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>
diff --git a/src/app/error.tsx b/src/app/error.tsx
new file mode 100644
index 0000000..3eb337a
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/app/features/auth/api/authApi.ts b/src/app/features/auth/api/authApi.ts
index 49b3576..bd401c1 100644
--- a/src/app/features/auth/api/authApi.ts
+++ b/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'
diff --git a/src/app/features/auth/api/authEndpoint.ts b/src/app/features/auth/api/authEndpoint.ts
index ed55a9c..c2f84f4 100644
--- a/src/app/features/auth/api/authEndpoint.ts
+++ b/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`,
 }
diff --git a/src/app/features/auth/components/LoginForm.tsx b/src/app/features/auth/components/LoginForm.tsx
index ed93927..8ee0e02 100644
--- a/src/app/features/auth/components/LoginForm.tsx
+++ b/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)}
diff --git a/src/app/features/auth/components/SignupForm.tsx b/src/app/features/auth/components/SignupForm.tsx
index c5fff02..368f72b 100644
--- a/src/app/features/auth/components/SignupForm.tsx
+++ b/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)}
diff --git a/src/app/features/auth/hooks/useLoginMutation.ts b/src/app/features/auth/hooks/useLoginMutation.ts
index 76d1fdb..42a741e 100644
--- a/src/app/features/auth/hooks/useLoginMutation.ts
+++ b/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)) {
diff --git a/src/app/features/auth/hooks/useSignupMutation.ts b/src/app/features/auth/hooks/useSignupMutation.ts
index d0c9357..74d1ca8 100644
--- a/src/app/features/auth/hooks/useSignupMutation.ts
+++ b/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>({
diff --git a/src/app/features/dashboard/api/invitation.ts b/src/app/features/dashboard/api/invitation.ts
index c0d9db2..ce54789 100644
--- a/src/app/features/dashboard/api/invitation.ts
+++ b/src/app/features/dashboard/api/invitation.ts
@@ -1,5 +1,5 @@
 // src/app/features/dashboard/api/invitation.ts
-import api from '@lib/axios'
+import authHttpClient from '@api/axios'
 
 type InvitationRequest = {
   email: string
@@ -7,7 +7,7 @@ type InvitationRequest = {
 }
 
 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,
diff --git a/src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx b/src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx
index 63ea45b..c8f7502 100644
--- a/src/app/features/dashboard/components/edit/DeleteDashboardButton.tsx
+++ b/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}`,
       )
     },
diff --git a/src/app/features/dashboard/components/edit/EditInvitation.tsx b/src/app/features/dashboard/components/edit/EditInvitation.tsx
index 58ea12a..311e9e0 100644
--- a/src/app/features/dashboard/components/edit/EditInvitation.tsx
+++ b/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}`,
       )
     },
diff --git a/src/app/features/dashboard/components/edit/EditMember.tsx b/src/app/features/dashboard/components/edit/EditMember.tsx
index 2c05045..e06381b 100644
--- a/src/app/features/dashboard/components/edit/EditMember.tsx
+++ b/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'
diff --git a/src/app/features/dashboard_Id/api/deleteCard.ts b/src/app/features/dashboard_Id/api/deleteCard.ts
index b6adfa1..2db2727 100644
--- a/src/app/features/dashboard_Id/api/deleteCard.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/deleteColumn.ts b/src/app/features/dashboard_Id/api/deleteColumn.ts
index cbed1d8..1a1526f 100644
--- a/src/app/features/dashboard_Id/api/deleteColumn.ts
+++ b/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(
diff --git a/src/app/features/dashboard_Id/api/deleteComment.ts b/src/app/features/dashboard_Id/api/deleteComment.ts
index b4ec240..61ab98b 100644
--- a/src/app/features/dashboard_Id/api/deleteComment.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/fetchCards.ts b/src/app/features/dashboard_Id/api/fetchCards.ts
index 909ee07..6a86d3d 100644
--- a/src/app/features/dashboard_Id/api/fetchCards.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/fetchColumns.ts b/src/app/features/dashboard_Id/api/fetchColumns.ts
index dd741d2..667891e 100644
--- a/src/app/features/dashboard_Id/api/fetchColumns.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/fetchComments.ts b/src/app/features/dashboard_Id/api/fetchComments.ts
index c2f2284..075ce93 100644
--- a/src/app/features/dashboard_Id/api/fetchComments.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/fetchMembers.ts b/src/app/features/dashboard_Id/api/fetchMembers.ts
index ada311c..e95e05c 100644
--- a/src/app/features/dashboard_Id/api/fetchMembers.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/postCard.ts b/src/app/features/dashboard_Id/api/postCard.ts
index fc1d14b..fd01d1b 100644
--- a/src/app/features/dashboard_Id/api/postCard.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/postCardImage.ts b/src/app/features/dashboard_Id/api/postCardImage.ts
index 5188f0b..7a3d108 100644
--- a/src/app/features/dashboard_Id/api/postCardImage.ts
+++ b/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(
diff --git a/src/app/features/dashboard_Id/api/postColumn.ts b/src/app/features/dashboard_Id/api/postColumn.ts
index f5613c0..f67709a 100644
--- a/src/app/features/dashboard_Id/api/postColumn.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/postComment.ts b/src/app/features/dashboard_Id/api/postComment.ts
index 33394ba..5ddcd88 100644
--- a/src/app/features/dashboard_Id/api/postComment.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/putCard.ts b/src/app/features/dashboard_Id/api/putCard.ts
index 6b00802..77c8d86 100644
--- a/src/app/features/dashboard_Id/api/putCard.ts
+++ b/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'
diff --git a/src/app/features/dashboard_Id/api/putComment.ts b/src/app/features/dashboard_Id/api/putComment.ts
index bb2965b..7751792 100644
--- a/src/app/features/dashboard_Id/api/putComment.ts
+++ b/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'
 
diff --git a/src/app/features/dashboard_Id/api/updateCardColumn.ts b/src/app/features/dashboard_Id/api/updateCardColumn.ts
index ba8d4b5..2841553 100644
--- a/src/app/features/dashboard_Id/api/updateCardColumn.ts
+++ b/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(
diff --git a/src/app/features/dashboard_Id/api/updateColumn.ts b/src/app/features/dashboard_Id/api/updateColumn.ts
index e9445e6..48bc89d 100644
--- a/src/app/features/dashboard_Id/api/updateColumn.ts
+++ b/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'
 
diff --git a/src/app/features/landing/components/Footer.tsx b/src/app/features/landing/components/Footer.tsx
index 8225c45..b0ed45b 100644
--- a/src/app/features/landing/components/Footer.tsx
+++ b/src/app/features/landing/components/Footer.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import GithubIcon from './GithubIcon'
 
 export default function Footer() {
diff --git a/src/app/features/landing/components/Header.tsx b/src/app/features/landing/components/Header.tsx
index 0c87979..5fb5aef 100644
--- a/src/app/features/landing/components/Header.tsx
+++ b/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 />
diff --git a/src/app/features/landing/components/Landing.tsx b/src/app/features/landing/components/Landing.tsx
new file mode 100644
index 0000000..dbb9cbd
--- /dev/null
+++ b/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 />
+    </>
+  )
+}
diff --git a/src/app/features/landing/components/Main.tsx b/src/app/features/landing/components/Main.tsx
index 4660779..874baa9 100644
--- a/src/app/features/landing/components/Main.tsx
+++ b/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'
diff --git a/src/app/features/mypage/api/mypageApi.ts b/src/app/features/mypage/api/mypageApi.ts
index 755b4b5..ebf21dd 100644
--- a/src/app/features/mypage/api/mypageApi.ts
+++ b/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
 }
diff --git a/src/app/features/mypage/components/PasswordChangeForm.tsx b/src/app/features/mypage/components/PasswordChangeForm.tsx
index f9d10be..5bb13e2 100644
--- a/src/app/features/mypage/components/PasswordChangeForm.tsx
+++ b/src/app/features/mypage/components/PasswordChangeForm.tsx
@@ -1,19 +1,20 @@
-import Input from '@components/Input'
-import { useConfirmPasswordValidation } from '@hooks/useConfirmPasswordValidation'
+import PasswordInput from '@components/common/Input/PasswordInput'
 import { cn } from '@lib/cn'
+import { showSuccess } from '@lib/toast'
+import { useChangePasswordMutation } from '@mypage/hook/useChangePasswordMutation'
+import { PasswordChangeRequest } from '@mypage/types/mypage.type'
+import { getNewPasswordValidation } from '@mypage/util/getNewPasswordValidation'
+import { getConfirmPasswordValidation } from '@util/getConfirmPasswordValidation'
 import { useForm } from 'react-hook-form'
 
-import { showSuccess } from '@/app/shared/lib/toast'
-
-import { useChangePasswordMutation } from '../hook/useChangePasswordMutation'
-import { useNewPasswordValidation } from '../hook/useNewPasswordValidation'
-import { PasswordChangeRequest } from '../types/mypage.type'
-
 interface PasswordChangeFormData extends PasswordChangeRequest {
   confirmPassword: string
 }
 
 export default function PasswordChangeForm() {
+  if (!process.env.NEXT_PUBLIC_TEAM_ID) {
+    throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
+  }
   const {
     register,
     handleSubmit,
@@ -31,10 +32,10 @@ export default function PasswordChangeForm() {
   })
 
   const { mutate: changePassword, isPending } = useChangePasswordMutation()
-  const newPasswordValidation = useNewPasswordValidation(() =>
+  const newPasswordValidation = getNewPasswordValidation(() =>
     getValues('password'),
   )
-  const confirmPasswordValidation = useConfirmPasswordValidation(() =>
+  const confirmPasswordValidation = getConfirmPasswordValidation(() =>
     getValues('newPassword'),
   )
 
@@ -60,7 +61,7 @@ export default function PasswordChangeForm() {
         onSubmit={handleSubmit(onSubmit)}
         className="flex flex-col justify-between gap-16"
       >
-        <Input
+        <PasswordInput
           labelName="현재 비밀번호"
           type="password"
           placeholder="비밀번호 입력"
@@ -68,7 +69,7 @@ export default function PasswordChangeForm() {
           {...register('password')}
         />
 
-        <Input
+        <PasswordInput
           labelName="새 비밀번호"
           type="password"
           placeholder="새 비밀번호 입력"
@@ -83,7 +84,7 @@ export default function PasswordChangeForm() {
           errorMessage={errors.newPassword?.message}
         />
 
-        <Input
+        <PasswordInput
           labelName="새 비밀번호 확인"
           type="password"
           placeholder="새 비밀번호 입력"
diff --git a/src/app/features/mypage/components/ProfileEditForm.tsx b/src/app/features/mypage/components/ProfileEditForm.tsx
index a6d2eaa..917afd0 100644
--- a/src/app/features/mypage/components/ProfileEditForm.tsx
+++ b/src/app/features/mypage/components/ProfileEditForm.tsx
@@ -1,7 +1,11 @@
 'use client'
 
-import Input from '@components/Input'
+import Input from '@components/common/Input/Input'
 import { showError, showSuccess } from '@lib/toast'
+import { useUpdateMyProfileMutation } from '@mypage/hook/useUpdateMyProfileMutation'
+import { useUploadProfileImageMutation } from '@mypage/hook/useUploadProfileImageMutation'
+import { useUserQuery } from '@mypage/hook/useUserQurey'
+import { mypageValidation } from '@mypage/schemas/mypageValidation'
 import { isAxiosError } from 'axios'
 import { useRouter } from 'next/navigation'
 import { useEffect, useState } from 'react'
@@ -9,10 +13,6 @@ import { Controller, useForm } from 'react-hook-form'
 
 import { useAuthStore } from '@/app/features/auth/store/useAuthStore'
 
-import { useUpdateMyProfileMutation } from '../hook/useUpdateMyProfileMutation'
-import { useUploadProfileImageMutation } from '../hook/useUploadProfileImageMutation'
-import { useUserQuery } from '../hook/useUserQurey'
-import { mypageValidation } from '../schemas/mypageValidation'
 import ProfileImageUpload from './ProfileImageUpload'
 
 interface ProfileFormData {
@@ -111,7 +111,7 @@ export default function ProfileEditForm() {
     >
       <h2 className="text-2xl font-bold">프로필</h2>
 
-      <div className="flex justify-between gap-42 tablet:flex-col">
+      <div className="flex justify-between gap-42 mobile-wide:flex-col tablet-wide:flex-col">
         <Controller
           name="profileImageUrl"
           control={control}
@@ -125,7 +125,7 @@ export default function ProfileEditForm() {
         />
 
         <div className="flex flex-grow flex-col gap-16">
-          <Input labelName="이메일" {...register('email')} readOnly />
+          <Input labelName="이메일" {...register('email')} readOnly disabled />
           <Input
             labelName="닉네임"
             type="text"
diff --git a/src/app/features/mypage/components/ProfileImageUpload.tsx b/src/app/features/mypage/components/ProfileImageUpload.tsx
index b2e2cea..3650523 100644
--- a/src/app/features/mypage/components/ProfileImageUpload.tsx
+++ b/src/app/features/mypage/components/ProfileImageUpload.tsx
@@ -6,7 +6,9 @@ import WhitePenIcon from '@components/common/WhitePenIcon/WhitePenIcon'
 import Image from 'next/image'
 import { useEffect, useRef, useState } from 'react'
 
-interface Props {
+import { cn } from '@/app/shared/lib/cn'
+
+interface ProfileImageUploadProps {
   value: string | null // RHF에서 연결된 이미지 URL 상태 (미리보기용)
   onChange: (url: string | null) => void // RHF 필드 상태 변경 함수
   onFileChange?: (file: File) => void // 실제 업로드할 파일을 상위에서 처리할 수 있게 전달
@@ -16,9 +18,10 @@ export default function ProfileImageUpload({
   value,
   onChange,
   onFileChange,
-}: Props) {
+}: ProfileImageUploadProps) {
   const inputRef = useRef<HTMLInputElement | null>(null)
   const [preview, setPreview] = useState<string | null>(null)
+  const [isHover, setIsHover] = useState(false) // hover/터치 상태
 
   // RHF나 상위 컴포넌트로부터 받은 value가 바뀌면 미리보기를 갱신
   useEffect(() => {
@@ -26,9 +29,12 @@ export default function ProfileImageUpload({
   }, [value])
 
   // 파일이 선택되었을 때 처리
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0]
-    if (!file) return
+    if (!file) {
+      setIsHover(false) // 파일 선택 취소 시 hover 해제
+      return
+    }
 
     const url = URL.createObjectURL(file) // 로컬 미리보기 URL 생성
     setPreview(url)
@@ -39,16 +45,41 @@ export default function ProfileImageUpload({
 
     // 같은 파일 다시 선택할 수 있도록 초기화
     if (inputRef.current) inputRef.current.value = ''
+    setIsHover(false) // 파일 선택 후 hover 해제
   }
 
   // 이미지 삭제 처리
-  const handleDelete = () => {
+  function handleDelete() {
     if (preview && preview.startsWith('blob:')) {
       URL.revokeObjectURL(preview) // 메모리 누수 방지
     }
     setPreview(null)
     onChange(null) // RHF 상태 초기화
     if (inputRef.current) inputRef.current.value = ''
+    setIsHover(false) // 삭제 후 hover 해제
+  }
+
+  // 모바일 터치 이벤트 핸들러
+  function handleTouchStart() {
+    setIsHover(true)
+  }
+  function handleTouchEnd() {
+    setIsHover(false)
+  }
+  function handleTouchCancel() {
+    setIsHover(false)
+  }
+
+  // 데스크탑 환경에서만 hover 적용 (모바일 터치와 충돌 방지)
+  function handleMouseEnter() {
+    if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
+      setIsHover(true)
+    }
+  }
+  function handleMouseLeave() {
+    if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
+      setIsHover(false)
+    }
   }
 
   return (
@@ -57,11 +88,21 @@ export default function ProfileImageUpload({
       <label
         htmlFor="userProfile"
         className="BG-gray group relative flex size-full cursor-pointer items-center justify-center overflow-hidden rounded-lg"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+        onTouchCancel={handleTouchCancel}
       >
         {preview ? (
           <>
-            {/* hover 시 연필 아이콘 */}
-            <div className="absolute inset-0 z-10 flex items-center justify-center bg-black/30 opacity-0 transition-opacity group-hover:opacity-100">
+            {/* hover 또는 터치 시 연필 아이콘 */}
+            <div
+              className={cn(
+                'absolute inset-0 z-10 flex items-center justify-center bg-black/30 transition-opacity',
+                isHover ? 'opacity-100' : 'opacity-0',
+              )}
+            >
               <WhitePenIcon size={30} />
             </div>
             {/* 이미지 미리보기 */}
diff --git a/src/app/features/mypage/hook/useUserQurey.ts b/src/app/features/mypage/hook/useUserQurey.ts
index 14e3a36..6d31194 100644
--- a/src/app/features/mypage/hook/useUserQurey.ts
+++ b/src/app/features/mypage/hook/useUserQurey.ts
@@ -1,10 +1,10 @@
 import { useQuery } from '@tanstack/react-query'
 
-import { loadUser } from '../api/mypageApi'
+import { fetchUser } from '../api/mypageApi'
 
 export function useUserQuery() {
   return useQuery({
-    queryKey: ['loadUser'],
-    queryFn: loadUser,
+    queryKey: ['fetchUser'],
+    queryFn: fetchUser,
   })
 }
diff --git a/src/app/features/mypage/hook/useNewPasswordValidation.ts b/src/app/features/mypage/util/getNewPasswordValidation.ts
similarity index 82%
rename from src/app/features/mypage/hook/useNewPasswordValidation.ts
rename to src/app/features/mypage/util/getNewPasswordValidation.ts
index 8618626..6acbe48 100644
--- a/src/app/features/mypage/hook/useNewPasswordValidation.ts
+++ b/src/app/features/mypage/util/getNewPasswordValidation.ts
@@ -1,6 +1,6 @@
 import { mypageValidation } from '../schemas/mypageValidation'
 
-export function useNewPasswordValidation(getPasswordValue: () => string) {
+export function getNewPasswordValidation(getPasswordValue: () => string) {
   return {
     ...mypageValidation.password,
     validate: (value: string) => {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6afe015..475bea7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,10 +7,35 @@ import { Providers } from './providers'
 import GlobalModalRenderer from './shared/components/common/GlobalModalRender'
 
 export const metadata: Metadata = {
+  metadataBase: new URL('https://coplan.work'),
   title: 'Coplan',
-  description: 'Generated by create next app',
+  description: '팀워크를 더 쉽게 만드는 협업 툴',
   icons: {
     icon: '/favicon.ico',
+    shortcut: '/favicon-16x16.png',
+    apple: '/apple-touch-icon.png',
+  },
+  openGraph: {
+    title: 'Coplan - 팀워크를 더 쉽게',
+    description: '효율적인 협업을 위한 최고의 선택',
+    url: 'https://coplan.work',
+    siteName: 'Coplan',
+    images: [
+      {
+        url: '/banner.png', // 이건 네가 넣을 이미지
+        width: 1200,
+        height: 630,
+        alt: 'Coplan OG 이미지',
+      },
+    ],
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Coplan - 팀워크를 더 쉽게',
+    description: '프로젝트 관리를 위한 스마트한 협업툴',
+    images: ['/banner.png'],
+    creator: '@coplan_team',
   },
 }
 
@@ -20,7 +45,7 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="ko" suppressHydrationWarning>
       <body>
         <Providers>
           {children}
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index 09367d7..d72ec70 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -1,3 +1,43 @@
+'use client'
+
+import { useMounted } from '@hooks/useMounted'
+import Image from 'next/image'
+import { useTheme } from 'next-themes'
+
 export default function Loading() {
-  return <div>Loading...</div>
+  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-200'
+      }
+    >
+      <div className="relative flex size-300 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-2xl font-semibold text-blue-300'
+            : 'mt-8 text-2xl font-semibold text-blue-600'
+        }
+      >
+        로딩 중입니다...
+      </div>
+    </div>
+  )
 }
diff --git a/src/app/mydashboard/api/dashboardApi.ts b/src/app/mydashboard/api/dashboardApi.ts
index d03b7ac..7222d6c 100644
--- a/src/app/mydashboard/api/dashboardApi.ts
+++ b/src/app/mydashboard/api/dashboardApi.ts
@@ -1,4 +1,5 @@
-import authHttpClient from '@/app/shared/lib/axios'
+import authHttpClient from '@api/axios'
+
 import {
   DashboardListResponse,
   InvitationListResponse,
diff --git a/src/app/mydashboard/page.tsx b/src/app/mydashboard/page.tsx
index 0311ade..03b3776 100644
--- a/src/app/mydashboard/page.tsx
+++ b/src/app/mydashboard/page.tsx
@@ -13,17 +13,17 @@ export default function MyDashboardPage() {
       <Sidebar />
 
       {/* 메인 */}
-      <div className="BG-gray tablet:ml-160 mobile:ml-67 ml-300 flex-1">
+      <div className="BG-gray ml-300 flex-1 mobile:ml-67 tablet:ml-160">
         {/* 헤더 */}
         <Header />
 
         {/* 페이지 콘텐츠 */}
-        <main className="tablet:p-24 mobile:p-16 p-40">
+        <main className="p-40 mobile:p-16 tablet:p-24">
           <MyDashboardGrid />
 
           {/* 초대받은 대시보드 섹션 */}
-          <section className="BG-white tablet:w-504 mobile:w-260 tablet:p-24 mobile:p-16 w-1022 rounded-16 p-40 pb-120 pt-24">
-            <h2 className="Text-black tablet:text-20 mobile:text-20 mb-64 text-24 font-bold">
+          <section className="BG-white w-1022 rounded-16 p-40 pb-120 pt-24 mobile:w-260 mobile:p-16 tablet:w-504 tablet:p-24">
+            <h2 className="Text-black mb-64 text-24 font-bold mobile:text-20 tablet:text-20">
               초대받은 대시보드
             </h2>
 
diff --git a/src/app/mypage/layout.tsx b/src/app/mypage/layout.tsx
new file mode 100644
index 0000000..7ba9382
--- /dev/null
+++ b/src/app/mypage/layout.tsx
@@ -0,0 +1,20 @@
+import Header from '@components/common/header/Header'
+
+import Sidebar from '@/app/shared/components/common/sidebar/Sidebar'
+
+export default function MypageLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <Sidebar />
+      {/* Sidebar의 반응형이 적용 될 경우 변경 예정 */}
+      <div className="pl-300 mobile:pl-67 tablet:pl-160">
+        <Header />
+        <main className="BG-gray h-screen">{children}</main>
+      </div>
+    </>
+  )
+}
diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx
index 63f7a1b..1b381a6 100644
--- a/src/app/mypage/page.tsx
+++ b/src/app/mypage/page.tsx
@@ -1,58 +1,22 @@
 'use client'
 
-import { useRouter } from 'next/navigation'
+import BackButton from '@components/common/BackButton/BackButton'
+import PasswordChangeForm from '@mypage/components/PasswordChangeForm'
+import ProfileEditForm from '@mypage/components/ProfileEditForm'
 
-import Header from '@/app/shared/components/common/header/Header'
-import Sidebar from '@/app/shared/components/common/sidebar/Sidebar'
-
-import PasswordChangeForm from '../features/mypage/components/PasswordChangeForm'
-import ProfileEditForm from '../features/mypage/components/ProfileEditForm'
 export default function Mypage() {
-  const router = useRouter()
   return (
     <>
-      <div className="pl-300">
-        <Header />
-      </div>
-
-      <div className="BG-gray h-full">
-        {/* 사이드바 */}
-        <Sidebar />
-        {/* 메인 콘텐츠 영역 */}
-        <div className="ml-300 p-20 tablet:ml-67">
-          {/* 헤더 영역 */}
-          <div className="flex flex-col gap-16">
-            {/* 임시 버튼 (교체 예정) */}
-            <div>
-              <button
-                type="button"
-                onClick={() => router.back()}
-                className="text-xm flex items-center justify-start gap-8"
-              >
-                <svg
-                  width={20}
-                  height={20}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M15 18L9 12L15 6"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                돌아가기
-              </button>
-            </div>
-            {/* 닉네임 프로필 변경 */}
-            <ProfileEditForm />
-            {/* 비밀번호 변경 */}
-            <PasswordChangeForm />
-          </div>
-        </div>
+      <div className="p-20">
+        {/* 헤더 영역 */}
+        <section className="flex flex-col gap-16">
+          {/* 뒤로 가기 버튼 */}
+          <BackButton />
+          {/* 닉네임 프로필 변경 */}
+          <ProfileEditForm />
+          {/* 비밀번호 변경 */}
+          <PasswordChangeForm />
+        </section>
       </div>
     </>
   )
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 697bb30..a2815fb 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,3 +1,62 @@
+'use client'
+
+import { useMounted } from '@hooks/useMounted'
+import Image from 'next/image'
+import { useTheme } from 'next-themes'
+
 export default function NotFound() {
-  return <div>not found...</div>
+  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="relative flex size-300 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'
+        }
+      >
+        404 Not Found
+      </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={() => window.history.back()}
+      >
+        이전 페이지로
+      </button>
+    </div>
+  )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d75e879..de2bde3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,9 @@
-import Footer from './features/landing/components/Footer'
-import Header from './features/landing/components/Header'
-import Main from './features/landing/components/Main'
+import Landing from './features/landing/components/Landing'
 
 export default function Home() {
   return (
     <>
-      <Header />
-      <Main />
-      <Footer />
+      <Landing />
     </>
   )
 }
diff --git a/src/app/shared/lib/axios.ts b/src/app/shared/api/axios.ts
similarity index 100%
rename from src/app/shared/lib/axios.ts
rename to src/app/shared/api/axios.ts
diff --git a/src/app/shared/components/Input.tsx b/src/app/shared/components/Input.tsx
deleted file mode 100644
index 6256958..0000000
--- a/src/app/shared/components/Input.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import Image from 'next/image'
-import { forwardRef, InputHTMLAttributes, useState } from 'react'
-
-import { cn } from '../lib/cn'
-
-interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
-  labelName: string
-  name: string
-  type?: React.HTMLInputTypeAttribute
-  autoComplete?: string
-  placeholder?: string
-  hasError?: boolean
-  errorMessage?: string
-}
-
-const Input = forwardRef<HTMLInputElement, CustomInputProps>(
-  function Input(props, ref) {
-    const {
-      labelName,
-      name,
-      type = 'text',
-      placeholder,
-      hasError,
-      errorMessage,
-      autoComplete,
-      ...rest
-    } = props
-
-    const [showPassword, setShowPassword] = useState(false)
-    const isPassword = type === 'password'
-    const inputType = isPassword && showPassword ? 'text' : type
-
-    return (
-      <div className="flex flex-col gap-8">
-        <label htmlFor={name} className="Text-black text-base font-normal">
-          {labelName}
-        </label>
-
-        {isPassword ? (
-          <div className="relative w-full">
-            <input
-              id={name}
-              className={cn(
-                'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal',
-                hasError ? 'Border-error' : 'Border-btn',
-                props.readOnly && 'Text-gray cursor-default',
-              )}
-              type={inputType}
-              placeholder={placeholder}
-              name={name}
-              autoComplete={autoComplete}
-              {...rest}
-              ref={ref}
-            />
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-16 top-1/2 translate-y-[-50%]"
-            >
-              <Image
-                src={`/images/visibility-${showPassword ? 'on' : 'off'}.svg`}
-                alt={showPassword ? '비밀번호 보기' : '비밀번호 숨기기'}
-                width={24}
-                height={24}
-              />
-            </button>
-          </div>
-        ) : (
-          <input
-            id={name}
-            className={cn(
-              'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal',
-              hasError ? 'Border-error' : 'Border-btn',
-              props.readOnly && 'Text-gray cursor-default',
-            )}
-            type={inputType}
-            placeholder={placeholder}
-            name={name}
-            autoComplete={autoComplete}
-            {...rest}
-            ref={ref}
-          />
-        )}
-
-        {hasError && errorMessage && (
-          <p className="Text-error text-sm font-normal">{errorMessage}</p>
-        )}
-      </div>
-    )
-  },
-)
-
-Input.displayName = 'Input'
-
-export default Input
diff --git a/src/app/shared/components/Redirect.tsx b/src/app/shared/components/Redirect.tsx
index e9f3ff6..983246f 100644
--- a/src/app/shared/components/Redirect.tsx
+++ b/src/app/shared/components/Redirect.tsx
@@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from 'react'
 
 import { useAuthStore } from '@/app/features/auth/store/useAuthStore'
 
+// 로그인 없이 접근 가능한 경로
 const PUBLIC_ROUTES = ['/login', '/signup']
 
 export default function Redirect({ children }: { children: React.ReactNode }) {
@@ -14,12 +15,16 @@ export default function Redirect({ children }: { children: React.ReactNode }) {
   const pathname = usePathname()
   const mounted = useMounted()
   const { isLoggedIn } = useAuthStore()
-  const [redirecting, setRedirecting] = useState(false) // 중복 호출 방지
-  const prevPath = useRef(pathname) // 이전 경로 저장
+  const [redirecting, setRedirecting] = useState(false)
+  const prevPath = useRef(pathname)
 
   const { data: firstDashboardId, isSuccess } = useFirstDashboardIdQuery()
 
-  // pathname 바뀌면 redirecting 초기화
+  // ✅ 경로 파생값 선언 (중복 제거)
+  const isRoot = pathname === '/'
+  const isPublic = PUBLIC_ROUTES.includes(pathname)
+
+  // 경로 변경 시 redirecting 상태 초기화
   useEffect(() => {
     if (prevPath.current !== pathname) {
       setRedirecting(false)
@@ -27,35 +32,38 @@ export default function Redirect({ children }: { children: React.ReactNode }) {
     }
   }, [pathname])
 
+  // 로그인 상태와 경로에 따른 리다이렉트 처리
   useEffect(() => {
-    if (!mounted || redirecting) return // 마운트가 되지 않았거나 리다이렉션 중이 아니면 return
+    if (!mounted || redirecting) return
 
-    const isPublic = PUBLIC_ROUTES.includes(pathname) //로그인 없이 접근 가능한 공개 라우트
+    // 1. 비로그인 + 루트(/): 랜딩 페이지 접근 허용
+    if (!isLoggedIn && isRoot) return
 
-    // 🔒 비로그인 상태에서 private 경로 접근 시 → /login
-    if (!isLoggedIn && !isPublic && pathname !== '/') {
+    // 2. 비로그인 + 보호 경로: 로그인 페이지로 이동
+    if (!isLoggedIn && !isPublic && !isRoot) {
       setRedirecting(true)
       router.replace('/login')
       return
     }
 
-    // 🔐 로그인 상태에서 루트 접근 시 → /dashboard/{id}
-    if (isLoggedIn && pathname === '/') {
+    // 3. 로그인 + 루트(/): 대시보드 또는 마이대시보드로 이동
+    if (isLoggedIn && isRoot) {
+      if (!isSuccess) return
       setRedirecting(true)
-      if (isSuccess && firstDashboardId) {
-        router.replace(`/dashboard/${firstDashboardId}`)
-      } else if (isSuccess && !firstDashboardId) {
-        router.replace('/mydashboard')
-      }
+      router.replace(
+        firstDashboardId ? `/dashboard/${firstDashboardId}` : '/mydashboard',
+      )
       return
     }
 
-    // 🔐 로그인 + 퍼블릭 경로 접근 시 → /mydashboard
+    // 4. 로그인 + 퍼블릭 경로: 마이대시보드로 이동
     if (isLoggedIn && isPublic) {
       setRedirecting(true)
       router.replace('/mydashboard')
       return
     }
+
+    // 5. 나머지는 접근 허용
   }, [
     pathname,
     isLoggedIn,
@@ -64,8 +72,13 @@ export default function Redirect({ children }: { children: React.ReactNode }) {
     router,
     isSuccess,
     firstDashboardId,
+    isRoot,
+    isPublic,
   ])
 
-  if (!mounted) return null
+  // 🔒 깜빡임 방지: 루트 경로만 예외로 즉시 렌더링 허용
+  if (!mounted && !isRoot) return null
+
+  // ✅ 최종 렌더링
   return <>{children}</>
 }
diff --git a/src/app/shared/components/common/BackButton/BackButton.tsx b/src/app/shared/components/common/BackButton/BackButton.tsx
new file mode 100644
index 0000000..b76d45c
--- /dev/null
+++ b/src/app/shared/components/common/BackButton/BackButton.tsx
@@ -0,0 +1,23 @@
+'use client'
+
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+
+export default function BackButton() {
+  const router = useRouter()
+
+  return (
+    <>
+      <div>
+        <button
+          className="flex cursor-pointer items-center gap-12 p-16"
+          type="button"
+          onClick={() => router.back()}
+        >
+          <Image src="/images/back.png" alt="돌아가기" width={8} height={4} />
+          <p>돌아가기</p>
+        </button>
+      </div>
+    </>
+  )
+}
diff --git a/src/app/shared/components/common/Input/Input.tsx b/src/app/shared/components/common/Input/Input.tsx
new file mode 100644
index 0000000..560621f
--- /dev/null
+++ b/src/app/shared/components/common/Input/Input.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { cn } from '@lib/cn'
+import { forwardRef } from 'react'
+
+import { InputProps } from '@/types/input.type'
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  function Input(props, ref) {
+    const {
+      labelName,
+      name,
+      type = 'text',
+      placeholder,
+      hasError,
+      errorMessage,
+      autoComplete,
+      ...rest
+    } = props
+
+    return (
+      <div className="flex flex-col gap-8">
+        <label htmlFor={name} className="Text-black text-base font-normal">
+          {labelName}
+        </label>
+
+        <input
+          id={name}
+          className={cn(
+            'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal',
+            hasError ? 'Border-error' : 'Border-btn',
+            props.readOnly && 'Text-gray cursor-default',
+          )}
+          type={type}
+          placeholder={placeholder}
+          name={name}
+          autoComplete={autoComplete}
+          {...rest}
+          ref={ref}
+        />
+        {hasError && errorMessage && (
+          <p className="Text-error text-sm font-normal">{errorMessage}</p>
+        )}
+      </div>
+    )
+  },
+)
+
+Input.displayName = 'Input'
+
+export default Input
diff --git a/src/app/shared/components/common/Input/PasswordInput.tsx b/src/app/shared/components/common/Input/PasswordInput.tsx
new file mode 100644
index 0000000..5d90373
--- /dev/null
+++ b/src/app/shared/components/common/Input/PasswordInput.tsx
@@ -0,0 +1,71 @@
+'use client'
+
+import { cn } from '@lib/cn'
+import Image from 'next/image'
+import { forwardRef, useState } from 'react'
+
+import { InputProps } from '@/types/input.type'
+
+const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
+  function PasswordInput(props, ref) {
+    const {
+      labelName,
+      name,
+      type = 'password',
+      placeholder,
+      hasError,
+      errorMessage,
+      autoComplete,
+      ...rest
+    } = props
+
+    const [showPassword, setShowPassword] = useState(false)
+    const isPassword = type === 'password'
+    const inputType = isPassword && showPassword ? 'text' : 'password'
+
+    return (
+      <div className="flex flex-col gap-8">
+        <label htmlFor={name} className="Text-black text-base font-normal">
+          {labelName}
+        </label>
+
+        <div className="relative w-full">
+          <input
+            id={name}
+            className={cn(
+              'Text-black h-50 w-full rounded-8 px-16 py-12 text-base font-normal',
+              hasError ? 'Border-error' : 'Border-btn',
+              props.readOnly && 'Text-gray cursor-default',
+            )}
+            type={inputType}
+            placeholder={placeholder}
+            name={name}
+            autoComplete={autoComplete}
+            {...rest}
+            ref={ref}
+          />
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="absolute right-16 top-1/2 translate-y-[-50%]"
+          >
+            <Image
+              src={`/images/visibility-${showPassword ? 'on' : 'off'}.svg`}
+              alt={showPassword ? '비밀번호 보기' : '비밀번호 숨기기'}
+              width={24}
+              height={24}
+            />
+          </button>
+        </div>
+
+        {hasError && errorMessage && (
+          <p className="Text-error text-sm font-normal">{errorMessage}</p>
+        )}
+      </div>
+    )
+  },
+)
+
+PasswordInput.displayName = 'PasswordInput'
+
+export default PasswordInput
diff --git a/src/app/shared/components/common/header/UserDropdown.tsx b/src/app/shared/components/common/header/UserDropdown.tsx
index 85a54af..b0c2317 100644
--- a/src/app/shared/components/common/header/UserDropdown.tsx
+++ b/src/app/shared/components/common/header/UserDropdown.tsx
@@ -17,7 +17,11 @@ export default function UserDropdown() {
 
   function handleLogout() {
     logout()
-    router.push('/login')
+    // ⚠️ 상태 변경(setIsPostLogout)이 반영되기 전에 페이지 이동하면 Redirect가 이상하게 동작함
+    // 따라서 router.push('/')는 이벤트 큐에 넣어 상태가 반영된 후 실행되도록 setTimeout 처리
+    setTimeout(() => {
+      router.push('/')
+    }, 0)
   }
 
   return (
diff --git a/src/app/shared/components/common/modal/CreateDashboardModal.tsx b/src/app/shared/components/common/modal/CreateDashboardModal.tsx
index 2b2616f..ae0a181 100644
--- a/src/app/shared/components/common/modal/CreateDashboardModal.tsx
+++ b/src/app/shared/components/common/modal/CreateDashboardModal.tsx
@@ -60,8 +60,8 @@ export default function CreateDashboardModal() {
       className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
       onClick={handleBackdropClick}
     >
-      <div className="BG-white mobile:h-312 mobile:w-327 mobile:px-20 mobile:py-16 h-344 w-584 rounded-16 p-32">
-        <h2 className="Text-black mobile:text-20 mb-24 text-24 font-bold">
+      <div className="BG-white h-344 w-584 rounded-16 p-32 mobile:h-312 mobile:w-327 mobile:px-20 mobile:py-16">
+        <h2 className="Text-black mb-24 text-24 font-bold mobile:text-20">
           새로운 대시보드
         </h2>
         <DashboardForm
diff --git a/src/app/shared/components/common/sidebar/DashboardItem.tsx b/src/app/shared/components/common/sidebar/DashboardItem.tsx
index 42a788c..641c548 100644
--- a/src/app/shared/components/common/sidebar/DashboardItem.tsx
+++ b/src/app/shared/components/common/sidebar/DashboardItem.tsx
@@ -18,22 +18,22 @@ export default function DashboardItem({
       type="button"
       aria-current={isActive ? 'page' : undefined}
       onClick={handleClick}
-      className={`Text-black tablet:gap-8 tablet:px-8 tablet:py-6 tablet:text-16 mobile:justify-center mobile:px-4 mobile:py-6 BG-Input-hovered flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors ${
+      className={`Text-black BG-Input-hovered flex w-full items-center gap-12 rounded-6 px-12 py-8 text-left text-18 transition-colors mobile:justify-center mobile:px-4 mobile:py-6 tablet:gap-8 tablet:px-8 tablet:py-6 tablet:text-16 ${
         isActive ? 'BG-currentDashboard font-medium' : ''
       }`}
     >
       {/* 컬러 도트 */}
       <div
-        className="tablet:size-6 mobile:size-12 size-8 flex-shrink-0 rounded-full"
+        className="size-8 flex-shrink-0 rounded-full mobile:size-12 tablet:size-6"
         style={{ backgroundColor: dashboard.color }}
       />
 
       {/* 대시보드 제목 */}
-      <span className="mobile:hidden flex-1 truncate">{dashboard.title}</span>
+      <span className="flex-1 truncate mobile:hidden">{dashboard.title}</span>
 
       {/* 내가 만든 대시보드에 왕관 아이콘 */}
       {dashboard.createdByMe && (
-        <div className="tablet:h-10 tablet:w-12 mobile:hidden relative h-12 w-14 flex-shrink-0">
+        <div className="relative h-12 w-14 flex-shrink-0 mobile:hidden tablet:h-10 tablet:w-12">
           <Image
             src="/images/crown.png"
             alt="내가 만든 대시보드"
diff --git a/src/app/shared/components/common/sidebar/Sidebar.tsx b/src/app/shared/components/common/sidebar/Sidebar.tsx
index 21c1dc1..33d8acb 100644
--- a/src/app/shared/components/common/sidebar/Sidebar.tsx
+++ b/src/app/shared/components/common/sidebar/Sidebar.tsx
@@ -52,17 +52,17 @@ export default function Sidebar(): JSX.Element {
     error instanceof Error ? error.message : '대시보드 목록 불러오기 실패'
 
   return (
-    <aside className="BG-white Border-section tablet:w-160 mobile:w-67 fixed left-0 top-0 z-50 flex h-full w-300 flex-col">
+    <aside className="BG-white Border-section fixed left-0 top-0 z-50 flex h-full w-300 flex-col mobile:w-67 tablet:w-160">
       {/* 로고 섹션 */}
-      <div className="tablet:px-12 mobile:px-8 mobile:justify-center flex h-70 flex-shrink-0 items-center px-20">
-        <Link href="/" className="flex items-center gap-8">
-          <div className="tablet:h-30 tablet:w-120 mobile:size-24 relative h-35 w-150">
+      <div className="flex h-70 flex-shrink-0 items-center px-20 mobile:justify-center mobile:px-8 tablet:px-12">
+        <Link href="/mydashboard" className="flex items-center gap-8">
+          <div className="relative h-35 w-150 mobile:size-24 tablet:h-30 tablet:w-120">
             {/* 데스크톱 & 태블릿: 전체 로고 */}
             <Image
               src="/images/logo-light2.svg"
               alt="Coplan logo"
               fill
-              className="mobile:hidden object-contain"
+              className="object-contain mobile:hidden"
               priority
             />
             {/* 모바일: 아이콘만 */}
@@ -70,7 +70,7 @@ export default function Sidebar(): JSX.Element {
               src="/images/logo-icon-light.svg"
               alt="Coplan"
               fill
-              className="mobile:block hidden object-contain"
+              className="hidden object-contain mobile:block"
               priority
             />
           </div>
@@ -78,36 +78,36 @@ export default function Sidebar(): JSX.Element {
       </div>
 
       {/* 대시보드 섹션 */}
-      <div className="tablet:px-12 mobile:px-8 tablet:py-16 mobile:py-12 flex min-h-0 flex-1 flex-col px-20 py-24">
+      <div className="flex min-h-0 flex-1 flex-col px-20 py-24 mobile:px-8 mobile:py-12 tablet:px-12 tablet:py-16">
         {/* 헤더 */}
-        <div className="tablet:mb-16 mobile:hidden mb-24 flex flex-shrink-0 items-center justify-between">
-          <h2 className="Text-gray tablet:text-10 text-12 font-semibold">
+        <div className="mb-24 flex flex-shrink-0 items-center justify-between mobile:hidden tablet:mb-16">
+          <h2 className="Text-gray text-12 font-semibold tablet:text-10">
             Dash Boards
           </h2>
           <CreateDashboardButton onClick={() => openModal('createDashboard')} />
         </div>
 
         {/* 모바일 전용 + 버튼 */}
-        <div className="mobile:flex mb-12 hidden flex-shrink-0 justify-center">
+        <div className="mb-12 hidden flex-shrink-0 justify-center mobile:flex">
           <CreateDashboardButton onClick={() => openModal('createDashboard')} />
         </div>
 
         {/* 스크롤 가능한 대시보드 목록 컨테이너 */}
         <div
           ref={containerRef}
-          className="tablet:space-y-6 mobile:space-y-4 flex-1 space-y-8 overflow-y-auto"
+          className="flex-1 space-y-8 overflow-y-auto mobile:space-y-4 tablet:space-y-6"
           style={{ minHeight: '200px' }}
         >
           {isLoading ? (
-            <div className="tablet:py-12 mobile:py-8 flex items-center justify-center py-20">
-              <div className="Text-gray tablet:text-12 mobile:hidden text-14">
+            <div className="flex items-center justify-center py-20 mobile:py-8 tablet:py-12">
+              <div className="Text-gray text-14 mobile:hidden tablet:text-12">
                 로딩중...
               </div>
               {/* 모바일: 로딩 스피너만 */}
-              <div className="mobile:block hidden size-16 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500" />
+              <div className="hidden size-16 animate-spin rounded-full border-2 border-gray-200 border-t-blue-500 mobile:block" />
             </div>
           ) : error ? (
-            <div className="tablet:py-12 mobile:py-8 flex items-center justify-center py-20">
+            <div className="flex items-center justify-center py-20 mobile:py-8 tablet:py-12">
               <div className="Text-red text-14">{errorMessage}</div>
             </div>
           ) : allDashboards.length > 0 ? (
@@ -124,16 +124,16 @@ export default function Sidebar(): JSX.Element {
 
               {/* 추가 로딩 중일 때 스켈레톤 */}
               {isFetchingNextPage && (
-                <div className="tablet:space-y-6 mobile:space-y-4 space-y-8">
+                <div className="space-y-8 mobile:space-y-4 tablet:space-y-6">
                   {Array.from({ length: 3 }).map((_, index) => (
                     <div
                       key={`skeleton-${index}`}
-                      className="tablet:gap-8 mobile:gap-0 mobile:justify-center tablet:p-8 mobile:p-4 flex items-center gap-12 rounded-6 p-12"
+                      className="flex items-center gap-12 rounded-6 p-12 mobile:justify-center mobile:gap-0 mobile:p-4 tablet:gap-8 tablet:p-8"
                     >
                       {/* 색상 원 스켈레톤 */}
-                      <div className="tablet:size-6 mobile:size-12 size-8 animate-pulse rounded-full bg-gray-200" />
+                      <div className="size-8 animate-pulse rounded-full bg-gray-200 mobile:size-12 tablet:size-6" />
                       {/* 제목 스켈레톤 - 모바일에서 숨김 */}
-                      <div className="tablet:h-14 mobile:hidden h-16 flex-1 animate-pulse rounded-4 bg-gray-200" />
+                      <div className="h-16 flex-1 animate-pulse rounded-4 bg-gray-200 mobile:hidden tablet:h-14" />
                     </div>
                   ))}
                 </div>
@@ -141,12 +141,12 @@ export default function Sidebar(): JSX.Element {
 
               {/* 더 이상 데이터가 없을 때 */}
               {!hasNextPage && allDashboards.length > 0 && (
-                <div className="tablet:py-8 mobile:py-4 py-12 text-center">
-                  <p className="Text-gray tablet:text-10 mobile:hidden text-12">
+                <div className="py-12 text-center mobile:py-4 tablet:py-8">
+                  <p className="Text-gray text-12 mobile:hidden tablet:text-10">
                     모든 대시보드를 확인했습니다.
                   </p>
                   {/* 모바일: 완료 아이콘만 */}
-                  <div className="mobile:block Text-gray hidden text-12">✓</div>
+                  <div className="Text-gray hidden text-12 mobile:block">✓</div>
                 </div>
               )}
             </>
diff --git a/src/app/shared/components/dashboard/DashboardForm.tsx b/src/app/shared/components/dashboard/DashboardForm.tsx
index c6e6ace..02351d4 100644
--- a/src/app/shared/components/dashboard/DashboardForm.tsx
+++ b/src/app/shared/components/dashboard/DashboardForm.tsx
@@ -1,12 +1,11 @@
 'use client'
 
+import Input from '@components/common/Input/Input'
 import Image from 'next/image'
 import React from 'react'
 
 import { DASHBOARD_COLORS } from '@/app/shared/constants/colors'
 
-import Input from '../Input'
-
 type DashboardFormProps = {
   formData: { title: string; color: string }
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
diff --git a/src/app/shared/hooks/useDashboard.ts b/src/app/shared/hooks/useDashboard.ts
index 8cd6563..f18cc2f 100644
--- a/src/app/shared/hooks/useDashboard.ts
+++ b/src/app/shared/hooks/useDashboard.ts
@@ -1,7 +1,7 @@
 // hooks/useDashboard.ts
 'use client'
 
-import api from '@lib/axios'
+import authHttpClient from '@api/axios'
 import { useQuery } from '@tanstack/react-query'
 
 import { DashboardListResponse } from '@/types/dashboard'
@@ -14,7 +14,7 @@ export const useDashboard = () => {
         throw new Error('NEXT_PUBLIC_TEAM_ID 환경변수가 설정되지 않았습니다.')
       }
 
-      const res = await api.get<DashboardListResponse>(
+      const res = await authHttpClient.get<DashboardListResponse>(
         `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards?navigationMethod=infiniteScroll`,
       )
 
diff --git a/src/app/shared/hooks/useDashboardForm.ts b/src/app/shared/hooks/useDashboardForm.ts
index bb528d5..a4469f6 100644
--- a/src/app/shared/hooks/useDashboardForm.ts
+++ b/src/app/shared/hooks/useDashboardForm.ts
@@ -1,6 +1,6 @@
 // hooks/useDashboardForm.ts
+import authHttpClient from '@api/axios'
 import { DASHBOARD_COLORS } from '@constants/colors'
-import api from '@lib/axios'
 import { getTeamId } from '@lib/getTeamId'
 import { showError } from '@lib/toast'
 import { useSelectedDashboardStore } from '@store/useSelectedDashboardStore'
@@ -70,10 +70,13 @@ export function useDashboardForm(mode: Mode) {
       setIsSubmitting(true)
 
       if (mode === 'create') {
-        const response = await api.post(`/${teamId}/dashboards`, formData)
+        const response = await authHttpClient.post(
+          `/${teamId}/dashboards`,
+          formData,
+        )
         router.push(`/dashboard/${response.data.id}`)
       } else if (mode === 'edit' && selectedDashboard?.id) {
-        const response = await api.put(
+        const response = await authHttpClient.put(
           `/${teamId}/dashboards/${selectedDashboard.id}`,
           formData,
         )
diff --git a/src/app/shared/hooks/useDashboardInfinite.ts b/src/app/shared/hooks/useDashboardInfinite.ts
index 488bcf1..9363fc1 100644
--- a/src/app/shared/hooks/useDashboardInfinite.ts
+++ b/src/app/shared/hooks/useDashboardInfinite.ts
@@ -1,8 +1,8 @@
 'use client'
 
+import authHttpClient from '@api/axios'
 import { useInfiniteQuery } from '@tanstack/react-query'
 
-import api from '@/app/shared/lib/axios'
 import { DashboardListResponse } from '@/app/shared/types/dashboard'
 
 /**
@@ -23,7 +23,7 @@ export const useDashboardsInfinite = (size: number = 10) => {
         page: pageParam.toString(),
       })
 
-      const res = await api.get<DashboardListResponse>(
+      const res = await authHttpClient.get<DashboardListResponse>(
         `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards?${params.toString()}`,
       )
 
diff --git a/src/app/shared/hooks/useFirstDashboardIdQuery.ts b/src/app/shared/hooks/useFirstDashboardIdQuery.ts
index ffb2ec9..5eabb10 100644
--- a/src/app/shared/hooks/useFirstDashboardIdQuery.ts
+++ b/src/app/shared/hooks/useFirstDashboardIdQuery.ts
@@ -1,18 +1,20 @@
+import authHttpClient from '@api/axios'
 import { useQuery } from '@tanstack/react-query'
 
-import authHttpClient from '@/app/shared/lib/axios'
+import { useAuthStore } from '@/app/features/auth/store/useAuthStore'
 
 import { DashboardListResponse } from '../types/dashboard'
 
 export function useFirstDashboardIdQuery() {
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn) // ✅ 상태 직접 가져옴
+
   return useQuery<DashboardListResponse, Error, number>({
     queryKey: ['firstDashboardId'],
-    // 임시로 작성(대시보드 ID가 필요한데 해당 API 함수가 중복 될 가능성 고려)
+    enabled: isLoggedIn, // ✅ 로그인 상태일 때만 실행됨
     queryFn: async (): Promise<DashboardListResponse> => {
       const response = await authHttpClient.get(
         `/${process.env.NEXT_PUBLIC_TEAM_ID}/dashboards`,
         {
-          // 필수 값만 호출
           params: {
             navigationMethod: 'infiniteScroll',
           },
diff --git a/src/app/shared/hooks/useMembers.ts b/src/app/shared/hooks/useMembers.ts
index 65ad403..03ee31d 100644
--- a/src/app/shared/hooks/useMembers.ts
+++ b/src/app/shared/hooks/useMembers.ts
@@ -1,6 +1,6 @@
 'use client'
 
-import authHttpClient from '@lib/axios'
+import authHttpClient from '@api/axios'
 import { getTeamId } from '@lib/getTeamId'
 
 export type Member = {
diff --git a/src/app/shared/lib/cn.ts b/src/app/shared/lib/cn.ts
index fed2fe9..d32b0fe 100644
--- a/src/app/shared/lib/cn.ts
+++ b/src/app/shared/lib/cn.ts
@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from 'clsx'
+import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
diff --git a/src/app/shared/types/.gitkeep b/src/app/shared/types/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/shared/types/input.type.ts b/src/app/shared/types/input.type.ts
new file mode 100644
index 0000000..87e37cd
--- /dev/null
+++ b/src/app/shared/types/input.type.ts
@@ -0,0 +1,11 @@
+import { InputHTMLAttributes } from 'react'
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  labelName: string
+  name: string
+  type?: React.HTMLInputTypeAttribute
+  autoComplete?: string
+  placeholder?: string
+  hasError?: boolean
+  errorMessage?: string
+}
diff --git a/src/app/shared/hooks/useConfirmPasswordValidation.ts b/src/app/shared/util/getConfirmPasswordValidation.ts
similarity index 76%
rename from src/app/shared/hooks/useConfirmPasswordValidation.ts
rename to src/app/shared/util/getConfirmPasswordValidation.ts
index eda2ba2..57f8e22 100644
--- a/src/app/shared/hooks/useConfirmPasswordValidation.ts
+++ b/src/app/shared/util/getConfirmPasswordValidation.ts
@@ -1,4 +1,4 @@
-export function useConfirmPasswordValidation(getPasswordValue: () => string) {
+export function getConfirmPasswordValidation(getPasswordValue: () => string) {
   return {
     required: '비밀번호를 한번 더 입력해 주세요.',
     validate: (value: string) =>
diff --git a/tsconfig.json b/tsconfig.json
index b53700b..b5d4282 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,9 +27,12 @@
       "@store/*": ["./src/app/shared/store/*"],
       "@hooks/*": ["./src/app/shared/hooks/*"],
       "@lib/*": ["./src/app/shared/lib/*"],
+      "@api/*": ["./src/app/shared/api/*"],
+      "@util/*": ["./src/app/shared/util/*"],
       "@/types/*": ["./src/app/shared/types/*"],
       "@constants/*": ["./src/app/shared/constants/*"],
-      "@dashboard/*": ["./src/app/features/dashboard/*"]
+      "@dashboard/*": ["./src/app/features/dashboard/*"],
+      "@mypage/*": ["./src/app/features/mypage/*"]
     }
   },
   "include": [