전체 경로 절대 경로로 변경

.eslintrc.cjs

@@ -18,4 +18,9 @@ module.exports = {
     ],
     'no-console': 'off',
   },
+  settings: {
+    'import/resolver': {
+      typescript: {},
+    },
+  },
 };

package.json

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@svgr/rollup": "^8.1.0",
+    "@types/node": "^20.10.5",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@types/styled-components": "^5.1.32",
@@ -32,6 +33,7 @@
     "eslint": "^8.53.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",

src/App.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useState, lazy, Suspense } from 'react';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-import { auth } from './firebase.ts';
-import LoadingSpinner from './components/loading-spinner.tsx';
-import * as S from './styles/global.ts';
+import { auth } from '@/firebase.ts';
+import LoadingSpinner from '@compo/loading-spinner.tsx';
+import * as S from '@style/global.ts';
 
-const ProtectedRoute = lazy(() => import('./components/protected-route.tsx'));
-const Home = lazy(() => import('./routes/home.tsx'));
-const Profile = lazy(() => import('./routes/profile.tsx'));
-const SearchResult = lazy(() => import('./routes/search-result.tsx'));
-const Auth = lazy(() => import('./routes/auth.tsx'));
-const Layout = lazy(() => import('./components/layout.tsx'));
+const ProtectedRoute = lazy(() => import('@compo/protected-route.tsx'));
+const Home = lazy(() => import('@page/home.tsx'));
+const Profile = lazy(() => import('@page/profile.tsx'));
+const SearchResult = lazy(() => import('@page/search-result.tsx'));
+const Auth = lazy(() => import('@page/auth.tsx'));
+const Layout = lazy(() => import('@compo/layout.tsx'));
 
 const router = createBrowserRouter([
   {

src/atoms.tsx

@@ -1,8 +1,11 @@
 import { atom } from 'recoil';
 
+export const signInUserAtom = atom({
+  key: 'signInUser',
+  default: null,
+});
+
 export const searchKeywordAtom = atom({
   key: 'searchKeyword',
   default: '',
 });
-
-export const tmp = '';

src/components/sign-in.tsx → src/components/auth/sign-in.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { FirebaseError } from 'firebase/app';
 import { signInWithEmailAndPassword } from 'firebase/auth';
-import { auth } from '../firebase.ts';
-import useEscClose from '../utils/use-esc-close.tsx';
-import * as S from '../styles/auth.ts';
-import * as P from '../styles/popup.ts';
-import ImageComputer from '../assets/images/logo-small.png';
-import { ReactComponent as LoadingSpinner } from '../assets/images/loading-spinner-mini.svg';
+import ImageComputer from '@img/logo-small.png';
+import { ReactComponent as LoadingSpinner } from '@img/loading-spinner-mini.svg';
+import { auth } from '@/firebase.ts';
+import useEscClose from '@util/use-esc-close.tsx';
+import * as S from '@style/auth.ts';
+import * as P from '@style/popup.ts';
 
 interface ISignInProps {
   onClose: () => void;

src/components/sign-up.tsx → src/components/auth/sign-up.tsx

@@ -3,12 +3,12 @@ import { useNavigate } from 'react-router-dom';
 import { FirebaseError } from 'firebase/app';
 import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
 import { doc, setDoc } from 'firebase/firestore';
-import { auth, db } from '../firebase.ts';
-import useEscClose from '../utils/use-esc-close.tsx';
-import * as S from '../styles/auth.ts';
-import * as P from '../styles/popup.ts';
-import ImageComputer from '../assets/images/logo-small.png';
-import { ReactComponent as LoadingSpinner } from '../assets/images/loading-spinner-mini.svg';
+import { auth, db } from '@/firebase.ts';
+import useEscClose from '@util/use-esc-close.tsx';
+import * as S from '@style/auth.ts';
+import * as P from '@style/popup.ts';
+import ImageComputer from '@img/logo-small.png';
+import { ReactComponent as LoadingSpinner } from '@img/loading-spinner-mini.svg';
 
 interface ISignUpProps {
   onClose: () => void;

src/components/social-sign-in.tsx → src/components/auth/social-sign-in.tsx

@@ -3,8 +3,8 @@ import { useNavigate } from 'react-router-dom';
 import { FirebaseError } from 'firebase/app';
 import { AuthProvider, signInWithPopup } from 'firebase/auth';
 import { doc, setDoc } from 'firebase/firestore';
-import { auth, db } from '../firebase.ts';
-import * as S from '../styles/auth.ts';
+import { auth, db } from '@/firebase.ts';
+import * as S from '@style/auth.ts';
 
 interface ISocialButton {
   provider: AuthProvider;

src/components/edit-tweet-form.tsx → src/components/home/edit-tweet-form.tsx

@@ -6,13 +6,13 @@ import {
   ref,
   uploadBytes,
 } from 'firebase/storage';
-import { auth, db, storage } from '../firebase.ts';
-import ITweet from '../interfaces/ITweet.ts';
-import CompressImage from '../utils/compress-image.tsx';
-import useEscClose from '../utils/use-esc-close.tsx';
-import * as S from '../styles/tweet-form.ts';
-import { ReactComponent as IconPhoto } from '../assets/images/i-photo.svg';
-import { ReactComponent as LoadingSpinner } from '../assets/images/loading-spinner-mini.svg';
+import { auth, db, storage } from '@/firebase.ts';
+import ITweet from '@type/ITweet.ts';
+import CompressImage from '@util/compress-image.tsx';
+import useEscClose from '@util/use-esc-close.tsx';
+import * as S from '@style/tweet-form.ts';
+import { ReactComponent as IconPhoto } from '@img/i-photo.svg';
+import { ReactComponent as LoadingSpinner } from '@img/loading-spinner-mini.svg';
 
 interface IEditTweetForm extends Pick<ITweet, 'id' | 'tweet' | 'photo'> {
   onClose: () => void;

src/components/post-tweet-form.tsx → src/components/home/post-tweet-form.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { addDoc, collection, updateDoc } from 'firebase/firestore';
 import { getDownloadURL, ref, uploadBytes } from 'firebase/storage';
-import { auth, db, storage } from '../firebase.ts';
-import CompressImage from '../utils/compress-image.tsx';
-import * as S from '../styles/tweet-form.ts';
-import { ReactComponent as IconPhoto } from '../assets/images/i-photo.svg';
-import { ReactComponent as LoadingSpinner } from '../assets/images/loading-spinner-mini.svg';
+import { auth, db, storage } from '@/firebase.ts';
+import CompressImage from '@util/compress-image.tsx';
+import * as S from '@style/tweet-form.ts';
+import { ReactComponent as IconPhoto } from '@img/i-photo.svg';
+import { ReactComponent as LoadingSpinner } from '@img/loading-spinner-mini.svg';
 
 export default function PostTweetForm() {
   const [isLoading, setLoading] = useState(false);

src/components/timeline.tsx → src/components/home/timeline.tsx

@@ -7,10 +7,10 @@ import {
   orderBy,
   query,
 } from 'firebase/firestore';
-import { db } from '../firebase.ts';
-import Tweet from './tweet.tsx';
-import * as S from '../styles/timeline.ts';
-import ITweet from '../interfaces/ITweet.ts';
+import { db } from '@/firebase.ts';
+import Tweet from '@compo/home/tweet.tsx';
+import * as S from '@style/timeline.ts';
+import ITweet from '@type/ITweet.ts';
 
 export default function Timeline() {
   const [tweets, setTweets] = useState<ITweet[]>([]);

src/components/tweet.tsx → src/components/home/tweet.tsx

@@ -1,14 +1,14 @@
 import { useEffect, useState } from 'react';
 import { deleteDoc, doc, getDoc } from 'firebase/firestore';
 import { deleteObject, ref } from 'firebase/storage';
-import { auth, db, storage } from '../firebase.ts';
-import ITweet from '../interfaces/ITweet.ts';
-import FormatDate from '../utils/format-date.tsx';
-import EditTweetForm from './edit-tweet-form.tsx';
-import * as S from '../styles/tweet.ts';
-import * as P from '../styles/popup.ts';
-import { ReactComponent as IconUser } from '../assets/images/i-user.svg';
-import { ReactComponent as IconEdit } from '../assets/images/i-edit.svg';
+import { auth, db, storage } from '@/firebase.ts';
+import ITweet from '@type/ITweet.ts';
+import FormatDate from '@util/format-date.tsx';
+import EditTweetForm from '@compo/home/edit-tweet-form.tsx';
+import * as S from '@style/tweet.ts';
+import * as P from '@style/popup.ts';
+import { ReactComponent as IconUser } from '@img/i-user.svg';
+import { ReactComponent as IconEdit } from '@img/i-edit.svg';
 
 export default function Tweet({
   id,

src/components/layout.tsx

@@ -1,7 +1,7 @@
 import { Outlet } from 'react-router-dom';
-import Wrapper from '../styles/layout.ts';
-import Menu from './menu.tsx';
-import Search from './search.tsx';
+import Wrapper from '@style/layout.ts';
+import Menu from '@compo/menu.tsx';
+import Search from '@compo/search.tsx';
 
 export default function Layout() {
   return (

src/components/loading-spinner.tsx

@@ -1,5 +1,5 @@
-import Wrapper from '../styles/loading-spinner.ts';
-import { ReactComponent as Spinner } from '../assets/images/loading-spinner.svg';
+import Wrapper from '@style/loading-spinner.ts';
+import { ReactComponent as Spinner } from '@img/loading-spinner.svg';
 
 export default function LoadingSpinner() {
   return (

src/components/menu.tsx

@@ -1,14 +1,14 @@
 import { Link, useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { auth } from '../firebase.ts';
-import WindowTop from './window-top.tsx';
-import * as W from '../styles/window.ts';
-import * as S from '../styles/menu.ts';
-import * as P from '../styles/popup.ts';
-import ImageComputer from '../assets/images/logo-small.png';
-import { ReactComponent as IconUser } from '../assets/images/i-user.svg';
-import { ReactComponent as IconHome } from '../assets/images/i-home.svg';
-import { ReactComponent as IconLogout } from '../assets/images/i-arrowleft.svg';
+import { auth } from '@/firebase.ts';
+import WindowTop from '@compo/window-top.tsx';
+import * as W from '@style/window.ts';
+import * as S from '@style/menu.ts';
+import * as P from '@style/popup.ts';
+import ImageComputer from '@img/logo-small.png';
+import { ReactComponent as IconUser } from '@img/i-user.svg';
+import { ReactComponent as IconHome } from '@img/i-home.svg';
+import { ReactComponent as IconLogout } from '@img/i-arrowleft.svg';
 
 export default function Menu() {
   const navigate = useNavigate();

src/components/edit-profile-form.tsx → src/components/profile/edit-profile-form.tsx

@@ -7,13 +7,13 @@ import {
   ref,
   uploadBytes,
 } from 'firebase/storage';
-import { auth, db, storage } from '../firebase.ts';
-import IUser from '../interfaces/IUser.ts';
-import CompressImage from '../utils/compress-image.tsx';
-import useEscClose from '../utils/use-esc-close.tsx';
-import * as S from '../styles/profile-form.ts';
-import { ReactComponent as IconUser } from '../assets/images/i-user.svg';
-import { ReactComponent as LoadingSpinner } from '../assets/images/loading-spinner-mini.svg';
+import { auth, db, storage } from '@/firebase.ts';
+import IUser from '@type/IUser.ts';
+import CompressImage from '@util/compress-image.tsx';
+import useEscClose from '@util/use-esc-close.tsx';
+import * as S from '@style/profile-form.ts';
+import { ReactComponent as IconUser } from '@img/i-user.svg';
+import { ReactComponent as LoadingSpinner } from '@img/loading-spinner-mini.svg';
 
 interface IEditProfileForm extends Pick<IUser, 'userAvatar' | 'userName'> {
   onClose: () => void;