Fix: lazy load postDetail

7-7-2 · May 31, 2024 · 9e910f8 · 9e910f8
1 parent 0ad5383
commit 9e910f8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
diff --git a/src/components/post/Comment.tsx b/src/components/post/Comment.tsx
@@ -2,7 +2,7 @@ import { useToggle } from '@/hooks/post/useToggle';
 import CommentProto from '@/components/post/CommentProto';
 import CheckReply from '@/components/post/CheckReply';
 import Replies from '@/components/post/Replies';
-import { Comment } from '@/types/types';
+import { CommentType } from '@/types/types';
 
 const Comment = ({
   profileUrl,
@@ -12,7 +12,7 @@ const Comment = ({
   reply_count,
   postNum,
   id
-}: Comment) => {
+}: CommentType) => {
   const { toggle, handleToggle } = useToggle();
   return (
     <>

diff --git a/src/components/post/PostComments.tsx b/src/components/post/PostComments.tsx
@@ -2,12 +2,13 @@ import React from 'react';
 import { useId } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { getComments } from '@/api/post';
-import Comment from '@/components/post/Comment';
 import { styled } from 'styled-system/jsx';
 import { COMMENT_TEXTS, POST_TEXTS } from '@/constants/texts';
 import { PaddingTB60 } from '@/styles/styles';
+import { CommentType } from '@/types/types';
 
 const CTA = React.lazy(() => import('../common/CTA'));
+const Comment = React.lazy(() => import('./Comment'));
 const { count } = COMMENT_TEXTS;
 
 const PostComments = ({
@@ -26,22 +27,6 @@ const PostComments = ({
   });
   const id = useId();
 
-  const mapComment = (comment: Comment, idx: number) => {
-    return (
-      <React.Fragment key={id + idx}>
-        <Comment
-          profileUrl={comment.profileUrl}
-          nickname={comment.nickname}
-          content={comment.content}
-          created_at={comment.created_at}
-          reply_count={comment.reply_count}
-          postNum={postNum}
-          id={comment.id}
-        />
-      </React.Fragment>
-    );
-  };
-
   return (
     <>
       {commentData && commentData.data.length !== 0 && (
@@ -50,7 +35,19 @@ const PostComments = ({
             {commentCount}
             {count}
           </Length>
-          {commentData.data.map(mapComment)}
+          {commentData.data.map((comment: CommentType, idx: number) => {
+            <React.Fragment key={id + idx}>
+              <Comment
+                profileUrl={comment.profileUrl}
+                nickname={comment.nickname}
+                content={comment.content}
+                created_at={comment.created_at}
+                reply_count={comment.reply_count}
+                postNum={postNum}
+                id={comment.id}
+              />
+            </React.Fragment>;
+          })}
         </Container>
       )}
       {commentData && commentData.data.length === 0 && (

diff --git a/src/types/types.ts b/src/types/types.ts
@@ -1,4 +1,3 @@
-import InitialForm from '@/components/start/InitialForm';
 import { Dayjs } from 'dayjs';
 import {
   TouchEventHandler,
@@ -172,7 +171,7 @@ export interface EditProfileImgProps
   profileImg?: string;
 }
 
-export interface Comment {
+export interface CommentType {
   profileUrl: string;
   nickname: string;
   content: string;
@@ -182,13 +181,14 @@ export interface Comment {
   id: number;
 }
 
-export interface CommentPrototype extends Omit<Comment, 'reply_count' | 'postNum'> {
+export interface CommentPrototype
+  extends Omit<CommentType, 'reply_count' | 'postNum'> {
   comment?: boolean;
   postNum?: string;
   parentCommentId?: number;
 }
 export type Reply = Pick<
-  Comment,
+  CommentType,
   'profileUrl' | 'nickname' | 'content' | 'created_at' | 'id'
 >;