fix: /make/snowball로 maindeco 통합

front/src/App.tsx

@@ -11,7 +11,6 @@ import {
   Visit,
   Deco,
   Wrong,
-  MainDeco,
   Boostcamp
 } from './pages';
 import { Song } from './components';
@@ -59,7 +58,6 @@ const App = () => {
               >
                 <Route path="" element={<Nickname />} />
                 <Route path="snowball" element={<Snowball />} />
-                <Route path="maindeco" element={<MainDeco />} />
               </Route>
 
               <Route

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/MainDeco/DecoProvider';
+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/MainDeco/DecoProvider';
+import { DecoContext } from '../../pages/Make/Snowball/MainDeco/DecoProvider';
 
 const StyledLetterBox = styled.div`
   width: 80%;

front/src/pages/Make/MainDeco/DecoBox.tsx → 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/deco';
 import { DecoContext } from './DecoProvider';
 
 interface DecoProps {

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

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react';
 import { NavigateFunction, useNavigate } 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/Make/MainDeco/MainDeco.tsx → 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/MainDeco/MakeButton.tsx → 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/MainDeco/MakeSnowballCanvas.tsx → 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 * as Models from '../../../components/SnowGlobeCanvas/models';
-import { CanvasContainer } from '../../../utils';
+import * as Models from '../../../../components/SnowGlobeCanvas/models';
+import { CanvasContainer } from '../../../../utils';
 import { DecoContext } from './DecoProvider';
 
 const MainSnowballCavnas = () => {

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

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

front/src/pages/Make/MainDeco/Steps.tsx → 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,8 +1,8 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 import styled from 'styled-components';
 import { theme } from '../../../utils';
 import { SnowGlobeCanvas, Button } from '../../../components';
+import { MainDeco } from './MainDeco';
 import mock from '../../../mockdata.json'; // temporary
 
 const StyledHeader = styled.div`
@@ -49,37 +49,38 @@ const StyledButtonBox = styled.div`
 `;
 
 const Snowball = () => {
-  const navigate = useNavigate();
   const userName = mock.user_data.nickname;
   const [make, setMake] = useState(false);
 
-  useEffect(() => {
-    make ? navigate('/maindeco') : null;
-  }, [make, navigate]);
-
   return (
     <>
-      <SnowGlobeCanvas />
-      <StyledHeader>
-        <StyledName>{userName}</StyledName>&nbsp;님
-        <StyledWelcome>환영합니다 :&#41;</StyledWelcome>
-      </StyledHeader>
+      {make ? (
+        <MainDeco />
+      ) : (
+        <>
+          <SnowGlobeCanvas />
+          <StyledHeader>
+            <StyledName>{userName}</StyledName>&nbsp;님
+            <StyledWelcome>환영합니다 :&#41;</StyledWelcome>
+          </StyledHeader>
 
-      <StyledBottom>
-        아직 <StyledBall>스노우볼</StyledBall>이 없군요!
-        <br />
-        스노우볼은 소중한 마음을 주고 받는
-        <br />
-        예쁜 선물 상자가 될 거예요.
-      </StyledBottom>
+          <StyledBottom>
+            아직 <StyledBall>스노우볼</StyledBall>이 없군요!
+            <br />
+            스노우볼은 소중한 마음을 주고 받는
+            <br />
+            예쁜 선물 상자가 될 거예요.
+          </StyledBottom>
 
-      <StyledButtonBox>
-        <Button
-          text={'스노우볼 만들기'}
-          color={theme.colors['--primary-red-primary']}
-          view={[make, setMake]}
-        />
-      </StyledButtonBox>
+          <StyledButtonBox>
+            <Button
+              text={'스노우볼 만들기'}
+              color={theme.colors['--primary-red-primary']}
+              view={[make, setMake]}
+            />
+          </StyledButtonBox>
+        </>
+      )}
     </>
   );
 };

front/src/pages/Make/index.tsx

@@ -1,3 +1,2 @@
 export { Nickname } from './Nickname';
 export { Snowball } from './Snowball';
-export { MainDeco } from './MainDeco';

front/src/pages/index.tsx

@@ -1,6 +1,6 @@
 export { Intro } from './Intro';
 export { Visit, Deco } from './Visit';
-export { Nickname, Snowball, MainDeco } from './Make';
+export { Nickname, Snowball } from './Make';
 export { Main } from './Main';
 export { Wrong } from './Wrong';
 export { Boostcamp } from './Boostcamp';