feat: 기사속 경단어 애니메이션 추가

#38
Gyeongdan · Jul 16, 2024 · a8f3c40 · a8f3c40
1 parent 00e1a54
commit a8f3c40
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "@mui/material": "^5.15.20",
     "next": "14.2.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-intersection-observer": "^9.13.0"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/src/components/CommentList.tsx b/src/components/CommentList.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useInView } from 'react-intersection-observer';
 
 import { Box } from '@mui/material';
 
@@ -12,19 +13,55 @@ interface CommentListProps {
   isChat?: boolean;
 }
 
+interface CommentItemProps {
+  comment: { id: string; content: string };
+  index: number;
+  isCharacter?: boolean;
+  isChat?: boolean;
+  isStroke?: boolean;
+  isFilled?: boolean;
+}
+
+const CommentItem = ({ comment, index, isCharacter, isChat, isStroke, isFilled }: CommentItemProps) => {
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+  });
+
+  return (
+    <Box
+      ref={ref}
+      mb={index === 0 ? 0 : 1.3}
+      sx={{
+        opacity: inView ? 1 : 0,
+        transform: inView ? 'translateY(0)' : 'translateY(20px)',
+        transition: 'opacity 0.6s ease-out, transform 0.6s ease-out',
+      }}
+    >
+      <CommentCard
+        animate
+        content={comment.content}
+        isCharacter={isCharacter && index === 0}
+        isChat={isChat}
+        isFilled={isFilled}
+        isStroke={isStroke}
+      />
+    </Box>
+  );
+};
+
 const CommentList = ({ comments, isCharacter, isChat, isStroke, isFilled }: CommentListProps) => {
   return (
     <div>
       {comments.map((comment, index) => (
-        <Box key={comment.id} mb={index === 0 ? 0 : 1.3}>
-          <CommentCard
-            content={comment.content}
-            isCharacter={isCharacter && index === 0}
-            isChat={isChat}
-            isFilled={isFilled}
-            isStroke={isStroke}
-          />
-        </Box>
+        <CommentItem
+          key={comment.id}
+          comment={comment}
+          index={index}
+          isCharacter={isCharacter}
+          isChat={isChat}
+          isFilled={isFilled}
+          isStroke={isStroke}
+        />
       ))}
     </div>
   );

diff --git a/yarn.lock b/yarn.lock
@@ -2577,6 +2577,11 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-intersection-observer@^9.13.0:
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.13.0.tgz#ee10827954cf6ccc204d027f8400a6ddb8df163a"
+  integrity sha512-y0UvBfjDiXqC8h0EWccyaj4dVBWMxgEx0t5RGNzQsvkfvZwugnKwxpu70StY4ivzYuMajavwUDjH4LJyIki9Lw==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -2791,16 +2796,7 @@ streamsearch@^1.1.0:
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -2872,14 +2868,7 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==