refactor: alias 적용

front/src/App.tsx

@@ -1,13 +1,13 @@
 import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
 import styled, { ThemeProvider } from 'styled-components';
 import GlobalStyles from './GlobalStyles';
-import { theme } from './utils';
+import { theme } from '@utils';
+import * as Pages from '@pages';
+import { Song } from '@components';
 import { IsLogin, IsSnowballData } from './router';
-import * as Pages from './pages';
-import { Song } from './components';
-import { SnowBallProvider } from './pages/Visit/SnowBallProvider';
-import { MessageProvider } from './pages/Visit/MessageProvider';
-import { DecoProvider } from './pages/Visit/Deco/DecoProvider';
+import { SnowBallProvider } from '@pages/Visit/SnowBallProvider';
+import { MessageProvider } from '@pages/Visit/MessageProvider';
+import { DecoProvider } from '@pages/Visit/Deco/DecoProvider';
 
 const Outer = styled.div`
   position: relative;

front/src/GlobalStyles.tsx

@@ -1,6 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 import reset from 'styled-reset';
-import { theme } from './utils';
+import { theme } from '@utils';
 
 const GlobalStyles = createGlobalStyle` 
   ${reset}

front/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { LongButton } from '../../utils';
+import { LongButton } from '@utils';
 
 interface ButtonColor {
   color: string;

front/src/components/Button/StepButton.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import styled from 'styled-components';
-import { LongButton } from '../../utils';
-import { DecoContext } from '../../pages/Make/Snowball/MainDeco/DecoProvider';
+import { LongButton } from '@utils';
+import { DecoContext } from '@pages/Make/Snowball/MainDeco/DecoProvider';
 
 interface ButtonColor {
   color: string;

front/src/components/InputSnowball/InputSnowball.tsx

@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import styled from 'styled-components';
-import { DecoContext } from '../../pages/Make/Snowball/MainDeco/DecoProvider';
+import { DecoContext } from '@pages/Make/Snowball/MainDeco/DecoProvider';
 
 const StyledLetterBox = styled.div`
   width: 80%;

front/src/components/Msg/Msg.tsx

@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import styled from 'styled-components';
-import { DecoContext } from '../../pages/Visit/Deco/DecoProvider';
+import { DecoContext } from '@pages/Visit/Deco/DecoProvider';
 
 interface MsgProps {
   color: string;

front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx

@@ -2,11 +2,11 @@ import { useContext, useRef } from 'react';
 import { OrbitControls } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import * as THREE from 'three';
-import { CanvasContainer, getDecoPoisition } from '../../utils';
+import { CanvasContainer, getDecoPoisition } from '@utils';
 import * as Models from './models';
 import { Prev } from '../Prev';
+import { SnowBallContext } from '@pages/Visit/SnowBallProvider';
 import { PrevProvider } from './PrevProvider';
-import { SnowBallContext } from '../../pages/Visit/SnowBallProvider';
 
 const SnowGlobeCanvas = () => {
   const isClicked = useRef<boolean>(false);

front/src/components/SnowGlobeCanvas/models/Bottom.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useGLTF } from '@react-three/drei';
 import * as THREE from 'three';
-import { BOTTOM } from '../../../constants/deco';
-import * as MeshUtils from '../../../utils/meshUtils';
+import * as MeshUtils from '@utils/meshUtils';
+import { BOTTOM } from '@constants';
 
 interface BottomProps {
   scale: number;

front/src/components/SnowGlobeCanvas/models/Deco.tsx

@@ -1,7 +1,7 @@
 import { useGLTF } from '@react-three/drei';
 import * as THREE from 'three';
-import { DECO, MSG_COLOR } from '../../../constants/deco';
-import * as MeshUtils from '../../../utils/meshUtils';
+import * as MeshUtils from '@utils/meshUtils';
+import { DECO, MSG_COLOR } from '@constants';
 
 interface DecoProps {
   id: number;

front/src/components/SnowGlobeCanvas/models/MainDeco.tsx

@@ -2,8 +2,8 @@ import React, { useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { useGLTF } from '@react-three/drei';
 import * as THREE from 'three';
-import { MAIN } from '../../../constants/deco';
-import { makeColorChangedMaterial } from '../../../utils/meshUtils';
+import { makeColorChangedMaterial } from '@utils/meshUtils';
+import { MAIN } from '@constants';
 
 interface MyModelProps {
   id: number;

front/src/components/SnowGlobeCanvas/models/Raycaster.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useContext } from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
-import { MessageContext } from '../../../pages/Visit/MessageProvider';
+import { MessageContext } from '@pages/Visit/MessageProvider';
 import { PrevContext } from '../PrevProvider';
 
 interface RaycasterProps {

front/src/components/SnowGlobeCanvas/models/Snow.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import { useGLTF } from '@react-three/drei';
 import * as THREE from 'three';
-import { makeColorChangedMaterial } from '../../../utils/meshUtils';
+import { makeColorChangedMaterial } from '@utils/meshUtils';
 
 interface SnowProps {
   radius: number;

front/src/pages/Intro/Intro.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { SnowGlobeCanvas, UIContainer } from '../../../src/components';
+import { SnowGlobeCanvas, UIContainer } from '@components';
 import IntroButtonBox from './IntroButtonBox';
 import MsgBox from './MsgBox';
 import { MessageProvider } from '../Visit/MessageProvider';

front/src/pages/Intro/IntroButtonBox.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import styled from 'styled-components';
-import { theme } from '../../utils';
-import { Button } from '../../components';
+import { theme } from '@utils';
+import { Button } from '@components';
 import Introduce from './Introduce';
 import LoginBox from './LoginBox';
 

front/src/pages/Intro/LoginBox.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
-import { BlurBody } from '../../utils';
+import { BlurBody } from '@utils';
 
 interface LoginProps {
   view: [boolean, React.Dispatch<React.SetStateAction<boolean>>];

front/src/pages/Intro/MsgBox.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { Msg } from '../../components';
+import { Msg } from '@components';
 import { MessageContext } from '../Visit/MessageProvider';
 import { SnowBallContext } from '../Visit/SnowBallProvider';
 

front/src/pages/Main/ListMsgs.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import axios from 'axios';
 import styled from 'styled-components';
-import { ListMsg, Prev } from '../../components';
-import { MSG_COLOR } from '../../constants/deco';
+import { ListMsg, Prev } from '@components';
+import { MSG_COLOR } from '@constants';
 
 interface ListMsgProps {
   set: React.Dispatch<React.SetStateAction<boolean>>;

front/src/pages/Main/Main.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import styled from 'styled-components';
-import { SnowGlobeCanvas, UIContainer } from '../../components';
+import { SnowGlobeCanvas, UIContainer } from '@components';
 import MainButtonBox from './MainButtonBox';
 
 const StyledLeft = styled.img`

front/src/pages/Main/MainButtonBox.tsx

@@ -1,10 +1,10 @@
 import { useState, useRef } from 'react';
+import axios from 'axios';
 import styled from 'styled-components';
-import { Container } from '../../utils';
-import { HeaderText } from '../../components';
+import { Container } from '@utils';
+import { HeaderText } from '@components';
 import MenuModal from './MenuModal';
 import ListMsgs from './ListMsgs';
-import axios from 'axios';
 
 const StyledMenu = styled.img`
   position: fixed;

front/src/pages/Main/MenuModal.tsx

@@ -1,6 +1,6 @@
 import { useNavigate, NavigateFunction } from 'react-router-dom';
 import styled from 'styled-components';
-import mock from '../../mockdata.json';
+import mock from '@mock';
 
 interface ModalProps {
   set: React.Dispatch<React.SetStateAction<boolean>>;

front/src/pages/Make/Nickname/Nickname.tsx

@@ -2,8 +2,8 @@ import { useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import styled from 'styled-components';
-import { theme } from '../../../utils';
-import { Button } from '../../../components';
+import { theme } from '@utils';
+import { Button } from '@components';
 
 const StyledWrap = styled.div`
   width: 100%;

front/src/pages/Make/Snowball/MainDeco/DecoBox.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import styled from 'styled-components';
-import { MAIN, BOTTOM } from '../../../../constants/deco';
+import { MAIN, BOTTOM } from '@constants';
 import { DecoContext } from './DecoProvider';
 
 interface DecoProps {

front/src/pages/Make/Snowball/MainDeco/DecoEnroll.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import { NavigateFunction, useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import styled from 'styled-components';
-import { theme, BlurBody } from '../../../../utils';
+import { theme, BlurBody } from '@utils';
 
 interface NaviProps {
   visible: [number, React.Dispatch<React.SetStateAction<number>>];

front/src/pages/Make/Snowball/MainDeco/MainDeco.tsx

@@ -1,4 +1,4 @@
-import { Prev, UIContainer } from '../../../../components';
+import { Prev, UIContainer } from '@components';
 import Steps from './Steps';
 import { DecoProvider } from './DecoProvider';
 import MakeSnowballCanvas from './MakeSnowballCanvas';

front/src/pages/Make/Snowball/MainDeco/MakeButton.tsx

@@ -1,7 +1,7 @@
 import { useState, useContext } from 'react';
 import axios from 'axios';
 import styled from 'styled-components';
-import { LongButton } from '../../../../utils';
+import { LongButton } from '@utils';
 import { DecoContext } from './DecoProvider';
 
 interface MakeButtonProps {

front/src/pages/Make/Snowball/MainDeco/MakeSnowballCanvas.tsx

@@ -2,8 +2,8 @@ import { useContext } from 'react';
 import { Canvas } from '@react-three/fiber';
 import { OrbitControls } from '@react-three/drei';
 import * as THREE from 'three';
-import { CanvasContainer } from '../../../../utils';
-import * as Models from '../../../../components/SnowGlobeCanvas/models';
+import { CanvasContainer } from '@utils';
+import * as Models from '@components/SnowGlobeCanvas/models';
 import { DecoContext } from './DecoProvider';
 
 const MainSnowballCavnas = () => {

front/src/pages/Make/Snowball/MainDeco/MsgBox.tsx

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
-import { DecoContext } from './DecoProvider';
-import { MSG_COLOR } from '../../../../constants/deco';
-import { Msg } from '../../../../components';
 import styled from 'styled-components';
+import { Msg } from '@components';
+import { MSG_COLOR } from '@constants';
+import { DecoContext } from './DecoProvider';
 
 interface MsgBoxProps {
   isInput: boolean;

front/src/pages/Make/Snowball/MainDeco/Steps.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useContext } from 'react';
 import styled from 'styled-components';
-import { theme, Container } from '../../../../utils';
-import { InputSnowball, HeaderText, StepButton } from '../../../../components';
+import { theme, Container } from '@utils';
+import { InputSnowball, HeaderText, StepButton } from '@components';
 import MakeButton from './MakeButton';
 import DecoBox from './DecoBox';
 import DecoEnroll from './DecoEnroll';

front/src/pages/Make/Snowball/Snowball.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import styled from 'styled-components';
-import { theme } from '../../../utils';
-import { SnowGlobeCanvas, Button } from '../../../components';
+import { theme } from '@utils';
+import { SnowGlobeCanvas, Button } from '@components';
+import mock from '@mock';
 import { MainDeco } from './MainDeco';
-import mock from '../../../mockdata.json';
 
 const StyledHeader = styled.div`
   position: absolute;

front/src/pages/Visit/Deco/Deco.tsx

@@ -1,4 +1,4 @@
-import { Prev, UIContainer } from '../../../components';
+import { Prev, UIContainer } from '@components';
 import Steps from './Steps';
 import DecoCavnas from './DecoCanvas/DecoCanvas';
 

front/src/pages/Visit/Deco/DecoBox.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import styled from 'styled-components';
-import { DECO, MSG_COLOR } from '../../../constants/deco';
+import { DECO, MSG_COLOR } from '@constants';
 import { DecoContext } from './DecoProvider';
 
 interface DecoProps {

front/src/pages/Visit/Deco/DecoCanvas/DecoCanvas.tsx

@@ -1,6 +1,6 @@
 import { Canvas } from '@react-three/fiber';
 import { OrbitControls } from '@react-three/drei';
-import { CanvasContainer } from '../../../../utils';
+import { CanvasContainer } from '@utils';
 import DecoModel from './DecoModel';
 
 const DecoCavnas = () => {

front/src/pages/Visit/Deco/DecoCanvas/DecoModel.tsx

@@ -1,8 +1,8 @@
 import { useContext } from 'react';
 import { useGLTF } from '@react-three/drei';
 import * as THREE from 'three';
-import { makeColorChangedMaterial } from '../../../../utils/meshUtils';
-import { DECO } from '../../../../constants/deco';
+import { makeColorChangedMaterial } from '@utils/meshUtils';
+import { DECO } from '@constants';
 import { DecoContext } from '../DecoProvider';
 
 const DecoModel = () => {

front/src/pages/Visit/Deco/DecoEnroll.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { NavigateFunction, useNavigate, useParams } from 'react-router-dom';
 import styled from 'styled-components';
-import { theme, BlurBody } from '../../../utils';
+import { theme, BlurBody } from '@utils';
 
 interface NaviProps {
   visible: [number, React.Dispatch<React.SetStateAction<number>>];

front/src/pages/Visit/Deco/MsgBox.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import styled from 'styled-components';
-import { MSG_COLOR } from '../../../constants/deco';
-import { Msg } from '../../../components';
+import { Msg } from '@components';
+import { MSG_COLOR } from '@constants';
 import { DecoContext } from './DecoProvider';
 import { SnowBallContext } from '../SnowBallProvider';
 

front/src/pages/Visit/Deco/PostButton.tsx

@@ -2,7 +2,7 @@ import { useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import styled from 'styled-components';
-import { LongButton } from '../../../utils';
+import { LongButton } from '@utils';
 import { DecoContext } from './DecoProvider';
 import { SnowBallContext } from '../SnowBallProvider';
 

front/src/pages/Visit/Deco/Steps.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useContext } from 'react';
 import styled from 'styled-components';
-import { theme, Container } from '../../../utils';
-import { HeaderText, StepButton } from '../../../components';
+import { theme, Container } from '@utils';
+import { HeaderText, StepButton } from '@components';
 import DecoBox from './DecoBox';
 import MsgBox from './MsgBox';
 import DecoEnroll from './DecoEnroll';

front/src/pages/Visit/SnowBallProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useState, createContext, useEffect } from 'react';
-import mockData from '../../mockdata.json';
 import { useNavigate, useParams } from 'react-router-dom';
 import axios from 'axios';
+import mockData from '@mock';
 
 interface SnowBallContextType {
   snowBallData: SnowBallData;

front/src/pages/Visit/Visit.tsx

@@ -1,4 +1,4 @@
-import { SnowGlobeCanvas, UIContainer } from '../../components';
+import { SnowGlobeCanvas, UIContainer } from '@components';
 import VisitHeader from './VisitHeader';
 import VisitBody from './VisitBody';
 import VisitBottom from './VisitBottom';

front/src/pages/Visit/VisitBody.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import styled from 'styled-components';
 import axios from 'axios';
-import { Msg } from '../../components';
+import { Msg } from '@components';
 import { MessageContext } from './MessageProvider';
 import { SnowBallContext, SnowBallData } from './SnowBallProvider';
 

front/src/pages/Visit/VisitBottom.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { theme, Container } from '../../utils';
-import { Button } from '../../components';
+import { theme, Container } from '@utils';
+import { Button } from '@components';
 
 const VisitBottom = () => {
   const navigate = useNavigate();