Merge pull request #194 from 5nxtnxtnxt/FE/feature/visit/changeSnowBalls

[오승엽] visit페이지 스노우볼 이동 구현, 메시지 작성 api 예외처리, 새로운 메시지 표시, 메인장식 추가

front/src/App.tsx

@@ -3,29 +3,18 @@ import styled, { ThemeProvider } from 'styled-components';
 import GlobalStyles from './GlobalStyles';
 import { theme } from './utils';
 import { IsLogin, IsSnowballData } from './router';
-import {
-  Intro,
-  Nickname,
-  Snowball,
-  Main,
-  Visit,
-  Deco,
-  Wrong,
-  Boostcamp
-} from './pages';
+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';
 
 const Outer = styled.div`
   position: relative;
-
   left: 50%;
   transform: translateX(-50%);
-
   width: 100%;
   height: 100%;
-  /* ::-webkit-scrollbar {
-    display: none;
-  } */
 
   @media (min-width: ${theme.size['--desktop-min-width']}) {
     width: ${theme.size['--desktop-width']};
@@ -41,11 +30,22 @@ const App = () => {
           <Song />
           <BrowserRouter>
             <Routes>
-              <Route path="/" element={<Intro />} />
+              <Route path="/" element={<Pages.Intro />} />
 
-              <Route path="/visit/:user" element={<Outlet />}>
-                <Route path="" element={<Visit />} />
-                <Route path="deco" element={<Deco />} />
+              <Route
+                path="/visit/:user"
+                element={
+                  <DecoProvider>
+                    <MessageProvider>
+                      <SnowBallProvider>
+                        <Outlet />
+                      </SnowBallProvider>
+                    </MessageProvider>
+                  </DecoProvider>
+                }
+              >
+                <Route path="" element={<Pages.Visit />} />
+                <Route path="deco" element={<Pages.Deco />} />
               </Route>
 
               <Route
@@ -56,21 +56,21 @@ const App = () => {
                   </IsSnowballData>
                 }
               >
-                <Route path="" element={<Nickname />} />
-                <Route path="snowball" element={<Snowball />} />
+                <Route path="" element={<Pages.Nickname />} />
+                <Route path="snowball" element={<Pages.Snowball />} />
               </Route>
 
               <Route
                 path="/main"
                 element={
                   <IsLogin>
-                    <Main />
+                    <Pages.Main />
                   </IsLogin>
                 }
               />
 
-              <Route path="/boostcamp" element={<Boostcamp />} />
-              <Route path="*" element={<Wrong />} />
+              <Route path="/boostcamp" element={<Pages.Boostcamp />} />
+              <Route path="*" element={<Pages.Wrong />} />
             </Routes>
           </BrowserRouter>
         </Outer>

front/src/components/Msg/Msg.tsx

@@ -25,7 +25,8 @@ const StyledLetterBox = styled.div<MsgColor>`
   padding: 1.5rem;
   gap: 1rem;
   background-color: ${props => props.color + '80'};
-  margin: 1rem;
+  margin: 1rem auto;
+  pointer-events: all;
 `;
 
 const StyledLetterPerson = styled.div`
@@ -107,7 +108,7 @@ const StyledFromInput = styled.input`
 
 const Msg = (props: MsgProps): JSX.Element => {
   const [wordCount, setWordCount] = useState(0);
-  const { setContent, setSender } = useContext(DecoContext);
+  const { content, sender, setContent, setSender } = useContext(DecoContext);
   const maxWordCount = 500;
 
   const wordLength = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -131,6 +132,7 @@ const Msg = (props: MsgProps): JSX.Element => {
         <StyledInputBox>
           <StyledTextArea
             rows={1}
+            value={content}
             onChange={wordLength}
             placeholder="편지를 작성해주세요."
           />
@@ -144,6 +146,7 @@ const Msg = (props: MsgProps): JSX.Element => {
           From.
           {props.isInput ? (
             <StyledFromInput
+              value={sender}
               placeholder="이름입력"
               onFocus={e => {
                 e.target.value = '';

front/src/components/SnowGlobeCanvas/SnowGlobeCanvas.tsx

@@ -19,7 +19,7 @@ const SnowGlobeCanvas = () => {
       key={i}
       centerPosition={glassPosition}
       rangeRadius={glassRadius}
-      radius={0.3 + Math.random() * 0.7}
+      radius={0.2 + Math.random() * 0.5}
       model={Math.floor(Math.random() * 3)}
     />
   ));
@@ -35,6 +35,7 @@ const SnowGlobeCanvas = () => {
         color={message.decoration_color}
         sender={message.sender ?? '비공개'}
         letterID={message.letter_id ?? 0}
+        isOpened={message.opened !== null || message.opened !== 'null'}
       />
     );
   });
@@ -75,13 +76,13 @@ const SnowGlobeCanvas = () => {
             position={new THREE.Vector3(0, glassRadius / 2, 0)}
             color={new THREE.Color('white')}
             radius={glassRadius}
-            opacity={0.08}
+            opacity={0.1}
           />
           <Models.MainDeco
             id={snowBallData.main_decoration_id}
             scale={1}
             position={new THREE.Vector3(0, 10, 0)}
-            color={new THREE.Color(snowBallData.main_decoration_color)}
+            color={snowBallData.main_decoration_color}
           />
           <Models.Bottom
             bottomID={snowBallData.bottom_decoration_id}

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

@@ -11,6 +11,7 @@ interface DecoProps {
   color: string;
   sender: string;
   letterID: number;
+  isOpened: boolean;
 }
 
 const Deco = ({
@@ -20,7 +21,8 @@ const Deco = ({
   id,
   color,
   sender,
-  letterID
+  letterID,
+  isOpened
 }: DecoProps) => {
   const deco = useGLTF(DECO[id].fileName).scene.clone();
   const target = { x: 8, z: 0 };
@@ -29,6 +31,14 @@ const Deco = ({
   deco.name = DECO[id].name;
   deco.scale.set(scale, scale, scale);
   deco.position.set(position.x, position.y, position.z);
+
+  if (isOpened) {
+    const newModel = useGLTF('/models/new.glb').scene.clone().children[0];
+    newModel.position.set(0, 1.2, 0);
+    newModel.scale.set(0.1, 0.1, 0.1);
+    deco.add(newModel);
+  }
+
   deco.children.forEach(child => {
     if (child instanceof THREE.Mesh) {
       child.userData.message = message;
@@ -42,6 +52,7 @@ const Deco = ({
     }
   });
   deco.rotateY(Math.PI - test);
+
   return <primitive object={deco} />;
 };
 

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

@@ -10,14 +10,14 @@ interface GlassProps {
 
 const Glass: React.FC<GlassProps> = ({ position, radius, color, opacity }) => {
   return (
-    <mesh position={position} name={"glass"}>
+    <mesh position={position} name={'glass'}>
       <sphereGeometry args={[radius, 36, 32]} />
       <meshStandardMaterial
         transparent={true}
         color={color}
         opacity={opacity}
         roughness={0}
-        metalness={0.5}
+        metalness={1}
       />
     </mesh>
   );

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

@@ -8,7 +8,7 @@ interface GroundProps {
 }
 
 const Ground: React.FC<GroundProps> = ({ scale, position }) => {
-  const ground = useGLTF('/models/ground.glb').scene.clone();
+  const ground = useGLTF('/models/ground1.glb').scene.clone();
 
   ground.scale.set(scale, scale, scale);
   ground.position.set(position.x, position.y, position.z);

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

@@ -3,12 +3,13 @@ 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';
 
 interface MyModelProps {
   id: number;
   scale: number;
   position: THREE.Vector3;
-  color: THREE.Color;
+  color: string;
 }
 
 const fallingModel = (
@@ -37,12 +38,12 @@ const MainDeco = ({ id, scale, position, color }: MyModelProps) => {
   const deco = useGLTF(MAIN[id].fileName).scene.clone();
   const speedRef = useRef(new THREE.Vector3(0, -0.01, 0));
 
-  //run build error 해결용 console model업데이트 후 색상 적용해야됨
-  console.log(color);
   deco.name = MAIN[id].name;
   deco.scale.set(scale, scale, scale);
   deco.position.set(position.x, position.y, position.z);
-  deco.children.forEach(e => (e.castShadow = true));
+  const colorPart = deco.getObjectByName('colorPart') as THREE.Mesh;
+  colorPart.material = makeColorChangedMaterial(colorPart, color);
+  deco.children.forEach(mesh => (mesh.castShadow = true));
   useFrame(() => {
     fallingModel(deco, speedRef);
   });

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

@@ -74,9 +74,7 @@ const Raycaster: React.FC<RaycasterProps> = ({ isClickedRef }) => {
           intersect => intersect.object.userData.message
         );
         if (selectedDeco) {
-          const { message, color, sender, letterColor } =
-            selectedDeco.object.userData;
-          console.log(color);
+          const { message, sender, letterColor } = selectedDeco.object.userData;
           setMessage(message);
           setSender(sender);
           setColor(letterColor);

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

@@ -3,6 +3,7 @@ import { useFrame } from '@react-three/fiber';
 import { useGLTF } from '@react-three/drei';
 
 import * as THREE from 'three';
+import { makeColorChangedMaterial } from '../../../utils/meshUtils';
 
 interface SnowProps {
   radius: number;
@@ -11,6 +12,48 @@ interface SnowProps {
   model: number;
 }
 
+const randomizePosition = (
+  target: THREE.Mesh,
+  centerPosition: THREE.Vector3,
+  radius: number
+) => {
+  target.position.set(
+    centerPosition.x - radius + Math.random() * radius * 2,
+    centerPosition.y + radius + Math.random() * radius * 2,
+    centerPosition.z - radius + Math.random() * radius * 2
+  );
+};
+
+const fallingAnimate = (
+  target: THREE.Mesh,
+  speed: number,
+  centerPosition: THREE.Vector3,
+  radius: number
+) => {
+  if (target.position.y <= -1) {
+    randomizePosition(target, centerPosition, radius);
+    const newScale = 0.2 + Math.random() * 0.5;
+    target.scale.set(newScale, newScale, newScale);
+  }
+  target.position.y -= speed;
+};
+const rotateAnimate = (target: THREE.Mesh, speed: number) => {
+  target.rotation.y += speed;
+};
+const visibleInRange = (
+  target: THREE.Mesh,
+  centerPosition: THREE.Vector3,
+  radius: number
+) => {
+  if (target.position.distanceTo(centerPosition) > radius) {
+    target.visible = false;
+  } else {
+    target.visible = true;
+  }
+};
+
+const snowcolor = ['#99c9fd', '#a5bbd3', '#f1faff'];
+
 const Snow: React.FC<SnowProps> = ({
   radius,
   centerPosition,
@@ -20,7 +63,7 @@ const Snow: React.FC<SnowProps> = ({
   const snowRef = useRef<THREE.Mesh>(null);
   const position = new THREE.Vector3(
     centerPosition.x - rangeRadius + Math.random() * rangeRadius * 2,
-    centerPosition.y + rangeRadius + Math.random() * 2 * rangeRadius,
+    centerPosition.y + rangeRadius + Math.random() * rangeRadius * 2,
     centerPosition.z - rangeRadius + Math.random() * rangeRadius * 2
   );
 
@@ -29,22 +72,21 @@ const Snow: React.FC<SnowProps> = ({
   snow.position.set(position.x, position.y, position.z);
   snow.scale.set(radius, radius, radius);
   snow.rotation.y = Math.random();
+  snow.traverse(obj => {
+    if (obj instanceof THREE.Mesh) {
+      obj.material = makeColorChangedMaterial(
+        obj,
+        snowcolor[Math.floor(Math.random() * 3)]
+      );
+    }
+  });
   useFrame((_, delta) => {
     const snow = snowRef.current;
     const speed = 1 * delta;
     if (snow) {
-      if (snow.position.y <= 0) {
-        snow.position.y =
-          centerPosition.y + rangeRadius + Math.random() * rangeRadius * 2;
-      }
-      snow.position.y -= speed;
-      snow.rotation.y += speed;
-
-      if (snow.position.distanceTo(centerPosition) > rangeRadius - 0.5) {
-        snow.visible = false;
-      } else {
-        snow.visible = true;
-      }
+      fallingAnimate(snow, speed, centerPosition, rangeRadius);
+      rotateAnimate(snow, speed);
+      visibleInRange(snow, centerPosition, rangeRadius - 1);
     }
   });
 

front/src/constants/deco.tsx

@@ -25,8 +25,18 @@ export const MAIN = [
     img: '/models/img/Main/tux.gif'
   },
   {
-    name: '트리',
-    fileName: '/models/tree.glb',
+    name: '산타',
+    fileName: '/models/santa.glb',
+    img: '/models/img/Main/tree.png'
+  },
+  {
+    name: '부캠덕',
+    fileName: '/models/bcduck.glb',
+    img: '/models/img/Main/tree.png'
+  },
+  {
+    name: '안경부캠덕',
+    fileName: '/models/bcduck_glasses.glb',
     img: '/models/img/Main/tree.png'
   }
 ];

front/src/mockdata.json

@@ -2,7 +2,7 @@
   "snowball_data": {
     "id": 1,
     "title": "스노우볼 속 내마음❤️",
-    "main_decoration_id": 1,
+    "main_decoration_id": 2,
     "main_decoration_color": "#ff0000",
     "bottom_decoration_id": 2,
     "bottom_decoration_color": "#ff0000",