feat: add routing

front/src/App.tsx

@@ -14,7 +14,7 @@ const App = () => {
         <Routes>
           <Route path="/" element={<Intro />} />
 
-          <Route path="/visit/" element={<Outlet />}>
+          <Route path="/visit/:user" element={<Outlet />}>
             <Route path="" element={<Visit />} />
             <Route path="deco" element={<Deco />} />
           </Route>

front/src/components/Button/PostButton.tsx

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import theme from '../../utils/theme';
+
+interface ButtonColor {
+  color: string;
+}
+
+interface ButtonProps {
+  text: string;
+  color: string;
+  view: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  visible: [number, React.Dispatch<React.SetStateAction<number>>];
+  disabled?: boolean;
+}
+
+const StyledButton = styled.button<ButtonColor>`
+  background-color: ${props => props.color};
+  font: ${theme.font['--normal-button-font']};
+  border-radius: 10px;
+  width: 66.6667%;
+  height: 48px;
+  padding: 10px;
+  margin: 4px;
+  color: white;
+  border: 1px solid ${theme.colors['--white-primary']};
+
+  @media (min-width: ${theme.size.maxWidth}) {
+    width: 600px;
+  }
+`;
+
+const PostButton = (props: ButtonProps) => {
+
+  const ClickedPost = () => {
+    props.view[1](!props.view[0]);
+    props.visible[1](-1);
+  };
+
+  return (
+    <StyledButton
+      color={props.color}
+      onClick={ClickedPost}
+      disabled={props.disabled}
+    >
+      {props.text}
+    </StyledButton>
+  );
+};
+
+export default PostButton;

front/src/components/Button/StepButton.tsx

@@ -10,7 +10,6 @@ interface ButtonProps {
   color: string;
   step: string;
   view: [number, React.Dispatch<React.SetStateAction<number>>];
-  visible: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
   disabled?: boolean;
 }
 
@@ -34,7 +33,6 @@ const StyledButton = styled.button<ButtonColor>`
 
 
 const StepButton = (props: ButtonProps) => {
-  console.log(props);
   const ClickStep = () => {
     if (props.step === 'increase') {
       props.view[1](props.view[0] + 1);

front/src/components/Button/index.tsx

@@ -1,2 +1,3 @@
 export { default as Button } from './Button';
 export { default as StepButton } from './StepButton';
+export { default as PostButton } from './PostButton';

front/src/components/index.tsx

@@ -1,6 +1,6 @@
 export { Song } from './Song';
 export { SnowGlobeCanvas } from './SnowGlobeCanvas';
-export { Button, StepButton } from './Button';
+export { Button, StepButton, PostButton } from './Button';
 export { HeaderText } from './HeaderText';
 export { Prev } from './Prev';
 export { Msg } from './Msg';

front/src/constants/deco.tsx

@@ -1,25 +1,26 @@
-const DECO = [
+export const DECO = [
   {
     name: '선물상자',
-    fileName: 'models/ribonBox.glb'
+    fileName: '/models/ribonBox.glb'
   },
   {
     name: '붕어빵',
-    fileName: 'models/fishBread.glb'
+    fileName: '/models/fishBread.glb'
   },
   {
     name: '진저브레드',
-    fileName: 'models/gingerBread.glb'
+    fileName: '/models/gingerBread.glb'
   }
 ];
-const MAIN = [
+
+export const MAIN = [
   {
     name: '턱스',
-    fileName: 'models/tux.glb'
+    fileName: '/models/tux.glb'
   },
   {
     name: '트리',
-    fileName: 'models/tree.glb'
+    fileName: '/models/tree.glb'
   }
 ];
-export { DECO, MAIN };
+

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

@@ -0,0 +1,174 @@
+import React, { useState, useRef } from 'react';
+import { NavigateFunction, useNavigate, useParams } from 'react-router-dom';
+import styled from 'styled-components';
+import theme from '../../../utils/theme';
+
+interface LoginProps {
+  visible : [number, React.Dispatch<React.SetStateAction<number>>]
+  view: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+}
+
+interface SocialLogin {
+  social: '카카오' | '네이버' | '구글';
+}
+
+const StyledBody = styled.div`
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(217, 217, 217, 0.2);
+`;
+
+const StyledLoginBox = styled.div`
+  background-color: ${theme.colors['--primary-black']};
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 100%;
+  height: 35%;
+  padding: 2% 5%;
+  padding-bottom: 5%;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  animation: fadeInUp 0.5s forwards;
+
+  @media (min-width: ${theme.size['--desktop-min-width']}) {
+    width: ${theme.size['--desktop-width']};
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translate3d(-50%, 100%, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+  }
+
+  @keyframes fadeOutDown {
+    from {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(-50%, 100%, 0);
+    }
+  }
+`;
+
+const StyledLogin = styled.button<SocialLogin>`
+  font: ${theme.font['--normal-login-font']};
+  height: 20%;
+  margin: 1% 0;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: ${props =>
+    props.social === '카카오'
+      ? '#FEE500'
+      : props.social === '네이버'
+      ? '#00C73C'
+      : 'white'};
+`;
+
+const StyledLogo = styled.img`
+  position: absolute;
+  left: 0;
+  height: 100%;
+  width: auto;
+  margin-left: 2%;
+`;
+
+const StyledSocial = styled.span`
+  font-weight: 700;
+  margin-left: 5%;
+`;
+
+const CloseLogin = (
+  props: LoginProps,
+  closeRef: React.RefObject<HTMLDivElement>,
+  setIsFocus: React.Dispatch<React.SetStateAction<boolean>>,
+  navigate: NavigateFunction,
+  user : string
+) => {
+
+
+  const onAnimationEnd = () => {
+    if (closeRef.current) {
+      setIsFocus(false);
+      props.view[1](!props.view[0]);
+      closeRef.current.removeEventListener('animationend', onAnimationEnd);
+      navigate(`/visit/${user}`);
+    }
+  };
+
+  if (closeRef.current) {
+
+    closeRef.current.addEventListener('animationend', onAnimationEnd);
+    closeRef.current.style.setProperty(
+      'animation',
+      'fadeOutDown 0.5s forwards'
+    );
+  }
+};
+
+// const validLogin = (
+//   props: SocialLogin,
+//   setValid: React.Dispatch<React.SetStateAction<boolean>>
+// ) => {
+//   // valid 체크!
+//   console.log(props.social);
+//   setValid(true);
+// };
+
+// const LoginUI = (props: SocialLogin) => {
+//   const [valid, setValid] = useState(false);
+//   const navigate = useNavigate();
+
+//   useEffect(() => {
+//     valid ? navigate('/make') : null;
+//   }, [valid, navigate]);
+
+//   return (
+//     <StyledLogin
+//       social={props.social}
+//       onClick={() => validLogin(props, setValid)}
+//     >
+//       {props.social === '카카오' ? (
+//         <StyledLogo src={'/socialLogin/kakao.svg'} />
+//       ) : props.social === '네이버' ? (
+//         <StyledLogo src={'/socialLogin/naver.svg'} />
+//       ) : (
+//         <StyledLogo src={'/socialLogin/google.svg'} />
+//       )}
+//       <StyledSocial>{props.social}</StyledSocial>로 시작하기
+//     </StyledLogin>
+//   );
+// };
+
+const DecoEnroll = (props: LoginProps) => {
+  const [isFocus, setIsFocus] = useState(true);
+  const closeRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+  const { user } = useParams();
+  return (
+    <StyledBody onClick={() => CloseLogin(props, closeRef, setIsFocus, navigate, user)}>
+      {isFocus ? (
+        <StyledLoginBox ref={closeRef}>
+
+        </StyledLoginBox>
+      ) : null}
+    </StyledBody>
+  );
+};
+
+export default DecoEnroll;