[💎 : refactor] 절대 경로 적용 및 components 폴더 하위 분류

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;

src/components/user-profile.tsx → src/components/profile/user-profile.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
 import { doc, getDoc } from 'firebase/firestore';
-import { auth, db } from '../firebase.ts';
-import * as S from '../styles/profile.ts';
-import * as P from '../styles/popup.ts';
-import { ReactComponent as IconUser } from '../assets/images/i-user.svg';
-import EditProfileForm from './edit-profile-form.tsx';
+import { auth, db } from '@/firebase.ts';
+import EditProfileForm from '@compo/profile/edit-profile-form.tsx';
+import * as S from '@style/profile.ts';
+import * as P from '@style/popup.ts';
+import { ReactComponent as IconUser } from '@img/i-user.svg';
 
 export default function UserProfile() {
   const user = auth.currentUser;

src/components/user-timeline.tsx → src/components/profile/user-timeline.tsx

@@ -8,10 +8,10 @@ import {
   query,
   where,
 } from 'firebase/firestore';
-import { auth, db } from '../firebase.ts';
-import ITweet from '../interfaces/ITweet.ts';
-import Tweet from './tweet.tsx';
-import * as S from '../styles/timeline.ts';
+import { auth, db } from '@/firebase.ts';
+import ITweet from '@type/ITweet.ts';
+import Tweet from '@compo/home/tweet.tsx';
+import * as S from '@style/timeline.ts';
 
 export default function UserTimeline() {
   const user = auth.currentUser;

src/components/protected-route.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Navigate } from 'react-router-dom';
-import { auth } from '../firebase.ts';
+import { auth } from '@/firebase.ts';
 
 export default function ProtectedRoute({
   children,

src/components/search-timeline.tsx → src/components/search-result/search-timeline.tsx

@@ -8,11 +8,11 @@ import {
   where,
 } from 'firebase/firestore';
 import { useRecoilValue } from 'recoil';
-import { db } from '../firebase.ts';
-import { searchKeywordAtom } from '../atoms.tsx';
-import Tweet from './tweet.tsx';
-import * as S from '../styles/timeline.ts';
-import ITweet from '../interfaces/ITweet.ts';
+import { db } from '@/firebase.ts';
+import { searchKeywordAtom } from '@/atoms.tsx';
+import Tweet from '@compo/home/tweet.tsx';
+import ITweet from '@type/ITweet.ts';
+import * as S from '@style/timeline.ts';
 
 export default function SearchTimeline() {
   const [tweets, setTweets] = useState<ITweet[]>([]);

src/components/search.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
-import { searchKeywordAtom } from '../atoms.tsx';
-import WindowTop from './window-top.tsx';
-import * as W from '../styles/window.ts';
-import * as S from '../styles/search.ts';
-import { ReactComponent as IconSearch } from '../assets/images/i-search.svg';
+import { searchKeywordAtom } from '@/atoms.tsx';
+import WindowTop from '@compo/window-top.tsx';
+import * as W from '@style/window.ts';
+import * as S from '@style/search.ts';
+import { ReactComponent as IconSearch } from '@img/i-search.svg';
 
 export default function Search() {
   const navigate = useNavigate();

src/components/window-top.tsx

@@ -1,7 +1,7 @@
-import * as W from '../styles/window.ts';
-import { ReactComponent as IconWindow1 } from '../assets/images/i-window1.svg';
-import { ReactComponent as IconWindow2 } from '../assets/images/i-window2.svg';
-import { ReactComponent as IconWindow3 } from '../assets/images/i-window3.svg';
+import * as W from '@style/window.ts';
+import { ReactComponent as IconWindow1 } from '@img/i-window1.svg';
+import { ReactComponent as IconWindow2 } from '@img/i-window2.svg';
+import { ReactComponent as IconWindow3 } from '@img/i-window3.svg';
 
 export default function WindowTop() {
   return (

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RecoilRoot } from 'recoil';
-import App from './App.tsx';
+import App from '@/App.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

src/routes/auth.tsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { GoogleAuthProvider, GithubAuthProvider } from 'firebase/auth';
-import SignUp from '../components/sign-up.tsx';
-import SignIn from '../components/sign-in.tsx';
-import * as S from '../styles/auth.ts';
-import SocialSignIn from '../components/social-sign-in.tsx';
-import ImageComputer from '../assets/images/logo-big.png';
-import { ReactComponent as IconGoogle } from '../assets/images/i-google.svg';
-import { ReactComponent as IconGithub } from '../assets/images/i-github.svg';
+import SignUp from '@compo/auth/sign-up.tsx';
+import SignIn from '@compo/auth/sign-in.tsx';
+import SocialSignIn from '@compo/auth/social-sign-in.tsx';
+import * as S from '@style/auth.ts';
+import ImageComputer from '@img/logo-big.png';
+import { ReactComponent as IconGoogle } from '@img/i-google.svg';
+import { ReactComponent as IconGithub } from '@img/i-github.svg';
 
 export default function Auth() {
   const [signUpPopup, setSignUpPopup] = useState(false);

src/routes/home.tsx

@@ -1,7 +1,7 @@
-import WindowTop from '../components/window-top.tsx';
-import PostTweetForm from '../components/post-tweet-form.tsx';
-import Timeline from '../components/timeline.tsx';
-import * as W from '../styles/window.ts';
+import WindowTop from '@compo/window-top.tsx';
+import PostTweetForm from '@compo/home/post-tweet-form.tsx';
+import Timeline from '@compo/home/timeline.tsx';
+import * as W from '@style/window.ts';
 
 export default function Home() {
   return (

src/routes/profile.tsx

@@ -1,7 +1,7 @@
-import WindowTop from '../components/window-top.tsx';
-import UserTimeline from '../components/user-timeline.tsx';
-import * as W from '../styles/window.ts';
-import UserProfile from '../components/user-profile.tsx';
+import WindowTop from '@compo/window-top.tsx';
+import UserProfile from '@compo/profile/user-profile.tsx';
+import UserTimeline from '@compo/profile/user-timeline.tsx';
+import * as W from '@style/window.ts';
 
 export default function Profile() {
   return (

src/routes/search-result.tsx

@@ -1,6 +1,6 @@
-import SearchTimeline from '../components/search-timeline.tsx';
-import WindowTop from '../components/window-top.tsx';
-import * as W from '../styles/window.ts';
+import SearchTimeline from '@compo/search-result/search-timeline.tsx';
+import WindowTop from '@compo/window-top.tsx';
+import * as W from '@style/window.ts';
 
 export default function SearchResult() {
   return (

src/styles/auth.ts

@@ -4,8 +4,8 @@ import {
   blackColor,
   primaryColor,
   whiteColor,
-} from './global.ts';
-import { LineButton, SolidButton, Input } from './button.ts';
+} from '@style/global.ts';
+import { LineButton, SolidButton, Input } from '@style/button.ts';
 
 export const Wrapper = styled.div`
   display: flex;

src/styles/button.ts

@@ -1,5 +1,10 @@
 import { styled } from 'styled-components';
-import { blackColor, grayColor, primaryColor, whiteColor } from './global.ts';
+import {
+  blackColor,
+  grayColor,
+  primaryColor,
+  whiteColor,
+} from '@style/global.ts';
 
 const Button = styled.button`
   width: 100%;