[Refactor][Comment] 댓글페이지 개선

App.tsx

@@ -34,7 +34,6 @@ import InsightSampleScreen from './src/screens/onboarding/InsightSampleScreen';
 import Tabs from './src/screens/Main/Tabs';
 import ChallengeParticipationScreen from './src/screens/Main/challenge/ChallengeParticipationScreen';
 import ShareScreen from './src/screens/detailedPost/ShareScreen';
-import CommentsScreen from './src/screens/detailedPost/CommentsScreen';
 import ProfileEditScreen from './src/screens/Main/mypage/ProfileEditScreen';
 import NicknameEditingScreen from './src/screens/Main/mypage/NicknameEditingScreen';
 import IntroductionEditingScreen from './src/screens/Main/mypage/IntroductionEditingScreen';
@@ -466,15 +465,6 @@ export default function App() {
                           headerStyle: { backgroundColor: '#F1F1E9' },
                         }}
                       />
-                      <Stack.Screen
-                        name={'Comments'}
-                        component={CommentsScreen}
-                        options={{
-                          ...headerOptions,
-                          cardStyle: { backgroundColor: 'white' },
-                          title: '댓글',
-                        }}
-                      />
                       <Stack.Screen
                         name={'Statistics'}
                         component={StatisticsScreen}

package.json

@@ -27,7 +27,7 @@
     "@react-navigation/stack": "^6.3.17",
     "@tanstack/react-query": "^4.14.3",
     "axios": "^0.27.2",
-    "expo": "^48.0.0",
+    "expo": "^49.0.0",
     "expo-app-loading": "~2.1.1",
     "expo-asset": "~8.9.1",
     "expo-blur": "~12.2.2",

src/components/comments/CommentInput.tsx

@@ -15,7 +15,6 @@ interface CommentInputProps {
   replyInfo?: ReplyInfo;
   onCancelReply: () => void;
   onCreate: (response: CommentCreateResponse) => void;
-  setComment: Dispatch<SetStateAction<Comment[]>>;
 }
 
 export type ReplyInfo = {
@@ -27,25 +26,13 @@ const bottom = Platform.OS === 'ios' ? 80 : 0;
 
 const CommentInput = forwardRef(
   (
-    { insightId, replyInfo, onCancelReply, onCreate, setComment }: CommentInputProps,
+    { insightId, replyInfo, onCancelReply, onCreate }: CommentInputProps,
     ref: React.LegacyRef<TextInput>,
   ) => {
     const [input, setInput] = useState<string>('');
     const { mutate: createComment } = useMutation(InsightAPI.createComment, {
       onSuccess: (response) => {
         onCreate(response);
-        setComment((prev) => {
-          if (replyInfo) {
-            const index = prev.findIndex((comment) => comment.id === replyInfo.id);
-            const updatedReply = {
-              ...prev[index],
-              replies: [response.data as Reply, ...(prev[index].replies ?? [])],
-            };
-
-            return [...prev.slice(0, index), updatedReply, ...prev.slice(index + 1)];
-          }
-          return [response.data, ...prev] as Comment[];
-        });
       },
     });
 

src/screens/detailedPost/CommentList.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Comment from '../../components/comments/Comment';
+import { ReplyInfo } from '../../components/comments/CommentInput';
+import ReplyList from './ReplyList';
+
+interface CommentListProps {
+  insightId: number;
+  authorId: number;
+  handleReplyClick: (info: ReplyInfo) => void;
+  commentList?: Comment[];
+}
+
+const CommentList = ({ insightId, authorId, handleReplyClick, commentList }: CommentListProps) => {
+  return (
+    <>
+      {commentList?.flatMap((item, index) => (
+        <>
+          <Comment
+            key={`${item.id} ${index}`}
+            content={item.content}
+            nickname={item.writer?.name}
+            title={item.writer?.title}
+            createdAt={item.createdAt}
+            isInsightWriter={item.writer?.id === authorId}
+            commentWriterId={item.writer?.id}
+            image={item.writer?.image}
+            isReply={false}
+            onReply={() => handleReplyClick({ id: item.id, nickname: item.writer?.name ?? '' })}
+            commentId={item.id}
+          />
+          <ReplyList insightId={insightId} parentId={item.id} authorId={authorId} />
+        </>
+      ))}
+    </>
+  );
+};
+
+export default CommentList;