From a8f3c40367b21e6adfe630f584c869b4265a01b2 Mon Sep 17 00:00:00 2001
From: stopmin <geemin0@naver.com>
Date: Wed, 17 Jul 2024 05:37:17 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B8=B0=EC=82=AC=EC=86=8D=20=EA=B2=BD?=
 =?UTF-8?q?=EB=8B=A8=EC=96=B4=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#38
---
 package.json                   |  3 +-
 src/components/CommentList.tsx | 55 ++++++++++++++++++++++++++++------
 yarn.lock                      | 25 +++++-----------
 3 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 0250d82..595f9a0 100644
--- 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
index d5dd17a..a2d7c45 100644
--- 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
index d1e8040..10c9ee1 100644
--- 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==