Merge pull request #85 from SWM-FIRE/FIRE-395-fe-방-카드-디자인-변경

Fire 395 fe 방 카드 디자인 변경

Author: haryung-lee

package.json

@@ -10,6 +10,7 @@
     "@types/uuid": "^8.3.4",
     "axios": "^0.27.2",
     "history": "^5.3.0",
+    "lottie-web": "^5.9.6",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/assets/theme/camping.json

@@ -22,6 +22,7 @@ export default function Block({
     event.preventDefault();
     navigate(`/ready/${itemId}`);
   };
+  console.log(theme);
   return (
     <Container main={isMain}>
       <AvatarContainer>
@@ -42,7 +43,7 @@ export default function Block({
           <Theme theme={theme} />
           <Bar />
           <Attend>
-            {total}중 {current}명 참여중
+            🔥 {total}중 {current}명 참여중
           </Attend>
         </Detail>
       </DetailContainer>
@@ -140,7 +141,7 @@ const Detail = styled.div`
 `;
 
 const Attend = styled.div`
-  color: white;
+  color: rgba(255, 255, 255, 0.8);
   font-size: 1.4rem;
 `;
 

src/assets/theme/cosmos.json

@@ -1,56 +1,60 @@
+import { useRef, useEffect } from 'react';
 import styled from 'styled-components';
-import { ReactComponent as Fire } from '../../assets/svg/Room/Fire.svg';
-import { ReactComponent as Cosmos } from '../../assets/svg/Room/Cosmos.svg';
-import { ReactComponent as Camping } from '../../assets/svg/Room/Camping.svg';
-import { ReactComponent as Ocean } from '../../assets/svg/Room/Ocean.svg';
-import { ReactComponent as Travel } from '../../assets/svg/Room/Travel.svg';
+import Lottie from 'lottie-web';
+import fireJson from '../../assets/theme/fire.json';
+import oceanJson from '../../assets/theme/ocean.json';
+import campingJson from '../../assets/theme/camping.json';
+import travelJson from '../../assets/theme/travel.json';
+import cosmosJson from '../../assets/theme/cosmos.json';
 
 export default function Theme({ theme }: { theme: string }) {
-  console.log(theme);
+  let themeName;
+  let themeJson;
+  const themeRef = useRef<HTMLDivElement>(null);
+
   switch (theme) {
     case 'fire':
-      return (
-        <Component>
-          <Fire />
-          <Name>모닥불</Name>
-        </Component>
-      );
-    case 'cosmos':
-      return (
-        <Component>
-          <Cosmos />
-          <Name>우주인</Name>
-        </Component>
-      );
-    case 'camping':
-      return (
-        <Component>
-          <Camping />
-          <Name>캠핑</Name>
-        </Component>
-      );
+      themeName = '모닥불';
+      themeJson = fireJson;
+      break;
     case 'ocean':
-      return (
-        <Component>
-          <Ocean />
-          <Name>바다</Name>
-        </Component>
-      );
+      themeName = '바다';
+      themeJson = oceanJson;
+      break;
+    case 'camping':
+      themeName = '캠핑';
+      themeJson = campingJson;
+      break;
+    case 'cosmos':
+      themeName = '우주인';
+      themeJson = cosmosJson;
+      break;
     case 'travel':
-      return (
-        <Component>
-          <Travel />
-          <Name>여행</Name>
-        </Component>
-      );
+      themeName = '여행';
+      themeJson = travelJson;
+      break;
     default:
-      return (
-        <Component>
-          <Fire />
-          <Name>모닥불</Name>
-        </Component>
-      );
+      themeName = '모닥불';
+      themeJson = fireJson;
   }
+
+  useEffect(() => {
+    Lottie.loadAnimation({
+      container: themeRef.current,
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: themeJson,
+    });
+  }, []);
+  return (
+    <Component>
+      <ThemeImage>
+        <div ref={themeRef} />
+      </ThemeImage>
+      <Name>{themeName}</Name>
+    </Component>
+  );
 }
 
 const Component = styled.div`
@@ -59,6 +63,15 @@ const Component = styled.div`
   gap: 0.4rem;
 `;
 
+const ThemeImage = styled.div`
+  width: 2rem;
+  height: 2rem;
+  div {
+    width: 100%;
+    height: 100%;
+  }
+`;
+
 const Name = styled.span`
   font-family: IBMPlexMonoRegular;
   font-size: 1.4rem;

src/assets/theme/ocean.json

@@ -6221,6 +6221,11 @@ loose-envify@^1.1.0, loose-envify@^1.4.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-web@^5.9.6:
+  version "5.9.6"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.9.6.tgz#62ae68563355d3e04aa75d53dec3dd4bea0e57c9"
+  integrity sha512-JFs7KsHwflugH5qIXBpB4905yC1Sub2MZWtl/elvO/QC6qj1ApqbUZJyjzJseJUtVpgiDaXQLjBlIJGS7UUUXA==
+
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"