feat : lottie 추가

#8

Author: Chaeyeon1

frontend/app/room/[roomId]/page.tsx

@@ -1,12 +1,17 @@
 'use client';
 import { Layout } from '@/app/(root)/_related/root.styled';
 import Button from '@/app/_components/Button';
+import { ModalContainer } from '@/app/_components/common';
 import PigHeader from '@/app/_components/Header';
 import { useStartGameFirebaseRoomRoomIdStartPut } from '@/app/api/room/hooks/useMutationSession';
 import { GlobalContext } from '@/app/GlobalContext';
+import Knife from '@/public/knife.json';
+import Night from '@/public/night-morning.json';
+import Vote from '@/public/vote.json';
 import { useParams, useRouter } from 'next/navigation';
 import { enqueueSnackbar } from 'notistack';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import Lottie from 'react-lottie-player';
 import { ChatContext } from './_related/ChatProvider';
 import { SessionContentContainer } from './_related/session.styled';
 import Chatting from './_sections/Chatting';
@@ -16,10 +21,12 @@ import Users from './_sections/Users';
 const Page = () => {
   const { roomId } = useParams<{ roomId: string }>();
   const { userId } = useContext(GlobalContext);
-  const { handleLeaveRoom, roomInfo } = useContext(ChatContext);
+  const { handleLeaveRoom, roomInfo, background, gameInfo } =
+    useContext(ChatContext);
   const router = useRouter();
   const { mutateAsync: startGame } = useStartGameFirebaseRoomRoomIdStartPut();
-
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const isMeLiar = gameInfo?.wolf === userId;
   useEffect(() => {
     if (typeof window === 'undefined') return;
     if (!userId) {
@@ -28,6 +35,15 @@ const Page = () => {
     }
   }, [userId]);
 
+  const handleLottieJson = () => {
+    setIsModalOpen(true);
+  };
+
+  useEffect(() => {
+    if (!background?.state) return;
+    handleLottieJson();
+  }, [background?.state]);
+
   if (!roomId) return;
 
   const handleGotoBack = () => {
@@ -55,6 +71,51 @@ const Page = () => {
         <Chatting />
         <ChattingInput />
       </SessionContentContainer>
+      {isModalOpen && (
+        <ModalContainer
+          style={{
+            left: '50%',
+            top: '60%',
+            transform: 'translate(-50%, -50%)',
+            backgroundColor: 'transparent',
+            position: 'absolute',
+          }}
+        >
+          {background?.state === 'dayTime' ? (
+            <Lottie
+              animationData={Night}
+              segments={[500, 60]} // 1초(60프레임)에서 10초(600프레임) 구간 재생
+              play
+              direction={-1}
+              onComplete={() => setIsModalOpen(false)}
+            />
+          ) : background?.state === 'vote' ? (
+            <Lottie
+              animationData={Vote}
+              segments={[100, 600]} // 1초(60프레임)에서 10초(600프레임) 구간 재생
+              play
+              onComplete={() => setIsModalOpen(false)}
+            />
+          ) : (
+            background?.state === 'night' &&
+            (isMeLiar ? (
+              <Lottie
+                animationData={Knife}
+                segments={[100, 600]} // 1초(60프레임)에서 10초(600프레임) 구간 재생
+                play
+                onComplete={() => setIsModalOpen(false)}
+              />
+            ) : (
+              <Lottie
+                animationData={Night}
+                segments={[100, 600]} // 1초(60프레임)에서 10초(600프레임) 구간 재생
+                play
+                onComplete={() => setIsModalOpen(false)}
+              />
+            ))
+          )}
+        </ModalContainer>
+      )}
     </Layout>
   );
 };

frontend/package.json

@@ -13,6 +13,7 @@
     "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-lottie-player": "^2.1.0",
     "styled-components": "^6.1.13",
     "swagger-typescript-api": "^13.0.23"
   },

frontend/public/knife.json

@@ -0,0 +1 @@
+{"v":"5.6.8","fr":29.9700012207031,"ip":0,"op":60.0000024438501,"w":1080,"h":1080,"nm":"07 KNife","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Layer 1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":10,"s":[580.17,528.389,0],"to":[-13.333,14.667,0],"ti":[-18,18,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":15,"s":[500.17,616.389,0],"to":[18,-18,0],"ti":[-13.333,14.667,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":20,"s":[688.17,420.389,0],"to":[13.333,-14.667,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[580.17,528.389,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":30,"s":[688.17,420.389,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":35,"s":[580.17,528.389,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":40,"s":[688.17,420.389,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":45,"s":[580.17,528.389,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":50,"s":[688.17,420.389,0],"to":[0,0,0],"ti":[18,-18,0]},{"t":55.0000022401959,"s":[580.17,528.389,0]}],"ix":2},"a":{"a":0,"k":[407.841,415.314,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[45.143,-43.625],[-45.144,43.625]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0.19199999641,0.328999986836,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[497.231,303.754],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[233.874,-104.406],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[93.07,238.76]],"v":[[-51.543,287.664],[-135.91,325.325],[-293.046,168.068],[199.976,-325.325]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.169000004787,0.2,0.258999992819,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[492.636,355.325],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[23.871,-23.332],[31.442,32.199],[-30.907,31.279],[0,0],[0,0],[0,0]],"o":[[-31.906,31.186],[-31.111,-31.859],[0,0],[0,0],[0,0],[11.584,29.443]],"v":[[7.371,124.379],[-107.322,122.544],[-107.487,8.824],[56.779,-155.566],[138.433,-72.005],[25.891,36.98]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.19199999641,0.328999986836,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[138.683,674.812],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":60.0000024438501,"st":0,"bm":0}],"markers":[]}

frontend/public/night-morning.json

@@ -457,6 +457,11 @@ eta@^2.2.0:
   resolved "https://registry.yarnpkg.com/eta/-/eta-2.2.0.tgz#eb8b5f8c4e8b6306561a455e62cd7492fe3a9b8a"
   integrity sha512-UVQ72Rqjy/ZKQalzV5dCCJP80GrmPrMxh6NlNf+erV6ObL0ZFkhCstWRawS85z3smdr3d2wXPsZEY7rDPfGd2g==
 
+fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
 fast-safe-stringify@^2.0.7:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
@@ -548,6 +553,11 @@ loose-envify@^1.1.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.12.2:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 [email protected]:
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -726,6 +736,15 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-lottie-player@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-lottie-player/-/react-lottie-player-2.1.0.tgz#3a3a726d183337197a34c0c0944461ac2469c30c"
+  integrity sha512-rxSNIVVLWYnwzsIow377vZsh7GDbReu70V7IDD9TbbcdcJWons4pSh3nyuEa4QWIZw0ZBIieoZRTsiqnb6MZ3g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    lottie-web "^5.12.2"
+    rfdc "^1.3.0"
+
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -748,6 +767,11 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+rfdc@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
+  integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
+
 scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"