feat: UseCommentReducer 개선 및 Comment UI 추가(#80)

src/components/Comment/CommentChild/index.tsx

@@ -0,0 +1,31 @@
+import { ListItem, ListItemText, Typography } from '@mui/material';
+import { Comment } from '../../../types/comment';
+
+type Props = {
+  data: Comment;
+};
+
+const CommentChild = ({ data }: Props) => {
+  return (
+    <ListItem>
+      <ListItemText
+        // primary="Brunch this weekend?"
+        secondary={
+          <>
+            <Typography
+              sx={{ display: 'inline' }}
+              component="span"
+              variant="body2"
+              color="text.primary"
+            >
+              {data.writer} -
+            </Typography>
+            {data.content}
+          </>
+        }
+      />
+    </ListItem>
+  );
+};
+
+export default CommentChild;

src/components/Comment/CommentItem/index.tsx

@@ -0,0 +1,72 @@
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import {
+  Avatar,
+  Button,
+  Collapse,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Stack,
+  Typography,
+} from '@mui/material';
+import React from 'react';
+import { UIComment } from '../../../types/comment';
+import CommentChild from '../CommentChild';
+
+type Props = {
+  data: UIComment;
+  expand: (id: number) => void;
+  unexpand: (id: number) => void;
+};
+
+const CommentItem = ({ data, expand, unexpand }: Props) => {
+  const handleExpand = () => expand(data.id);
+  const handleUnExpand = () => unexpand(data.id);
+
+  return (
+    <>
+      <ListItem>
+        <ListItemAvatar>
+          <Avatar alt="Remy Sharp" src={data.pictureUrl} />
+        </ListItemAvatar>
+        <Stack direction="column">
+          <ListItemText
+            primary={data.writer}
+            secondary={
+              <>
+                {/* <Typography
+                sx={{ display: 'inline' }}
+                component="span"
+                variant="body2"
+                color="text.primary"
+              >
+                Ali Connors
+              </Typography> */}
+                {data.content}
+              </>
+            }
+          />
+          {data.hasChild ? (
+            data.isExpand ? (
+              <Button onClick={handleUnExpand}>감추기...</Button>
+            ) : (
+              //<ExpandMore />
+              // <ExpandLess />
+              <Button onClick={handleExpand}>더보기...</Button>
+            )
+          ) : undefined}
+        </Stack>
+      </ListItem>
+      <Collapse in={data.isExpand} timeout="auto" unmountOnExit>
+        <List component="div" disablePadding>
+          {data.children?.map((child) => (
+            <CommentChild key={child.id} data={child} />
+          ))}
+        </List>
+      </Collapse>
+    </>
+  );
+};
+
+export default React.memo(CommentItem);

src/components/Comment/index.tsx

@@ -1,5 +1,10 @@
-import { useRef } from 'react';
+import { debounce, List } from '@mui/material';
+import CommentItem from './CommentItem';
 import useCommentReducer, { Operator } from '../../hooks/useCommentReducer';
+import CommentRepo from '../../utils/commentRepo';
+import { useEffect } from 'react';
+import { useWindowEvent } from '../../hooks/useWindowEvent';
+import { isBottomPosIn } from '../../utils/scroll';
 
 type Props = {
   articleId: any;
@@ -8,24 +13,46 @@ type Props = {
 //#region Fetch Logic
 const operator: Operator = {
   async fetchTopLevelComment(articleId, page) {
-    return [];
+    return CommentRepo.page(articleId, page, 15);
   },
   async fetchChildrenComment(commentId) {
-    return [];
+    return CommentRepo.search(commentId);
   },
 };
 
 //#endregion
 
 const Comment = ({ articleId }: Props) => {
-  const ctRef = useRef(null);
-
   const { state, fetchComment, expand, unexpand } = useCommentReducer(
     articleId,
     operator,
   );
 
-  return <div ref={ctRef}></div>;
+  useEffect(() => {
+    fetchComment(1);
+  }, []);
+
+  // useWindowEvent(
+  //   ['scroll'],
+  //   debounce((_) => {
+  //     if (isBottomPosIn(50) && isNext()) {
+  //       fetchNext();
+  //     }
+  //   }, 100),
+  // );
+
+  return (
+    <List sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
+      {state.comments.map((comment) => (
+        <CommentItem
+          key={comment.id}
+          data={comment}
+          expand={expand}
+          unexpand={unexpand}
+        />
+      ))}
+    </List>
+  );
 };
 
 export default Comment;

src/hooks/useCommentReducer.tsx

@@ -1,14 +1,5 @@
 import { Dispatch, useReducer } from 'react';
-import { Comment } from '../types/comment';
-
-/**
- *  For 2 depth
- */
-export interface UIComment extends Comment {
-  isExpand: boolean;
-  alreadyFetch: boolean;
-  children: Comment[] | undefined;
-}
+import { Comment, UIComment } from '../types/comment';
 
 export type Action = {
   type: keyof typeof ActionType;
@@ -23,12 +14,12 @@ export type State = {
 };
 
 export const ActionType = {
-  ASSIGN: 'assign',
-  LOADING: 'loading',
-  ERROR: 'error',
-  DONE: 'done',
+  ASSIGN: 'ASSIGN',
+  LOADING: 'LOADING',
+  ERROR: 'ERROR',
+  DONE: 'DONE',
   // 미완
-  SORT: 'sort',
+  SORT: 'SORT',
 };
 
 export const INITIAL_STATE: State = {
@@ -105,8 +96,11 @@ function handleFromDispatch(
     async fetchComment(page: number) {
       // 로딩 상태
       dispatch({ type: 'LOADING' });
-      const comming = await operator.fetchTopLevelComment(articleId, page);
-      dispatch({ type: 'ASSIGN', payload: [...state.comments, ...comming] });
+      const coming = await operator.fetchTopLevelComment(articleId, page);
+      dispatch({
+        type: 'ASSIGN',
+        payload: [...state.comments, ...coming.map(commentMapping)],
+      });
     },
     async expand(commentId: number) {
       const [selected, index] = getUIComment(state.comments, commentId);

src/main.tsx

@@ -6,6 +6,7 @@ import TestChildrenPage from './pages/TestChildren';
 import TextEditor from './pages/TextEditor';
 import InfiniteScroll from './pages/InfiniteScroll';
 import { RecoilRoot } from 'recoil';
+import CommentPage from './pages/CommentPage';
 
 const router = createBrowserRouter([
   {
@@ -25,6 +26,10 @@ const router = createBrowserRouter([
     path: 'infinite',
     element: <InfiniteScroll />,
   },
+  {
+    path: 'comment',
+    element: <CommentPage />,
+  },
 ]);
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

src/pages/CommentPage/index.tsx

@@ -0,0 +1,11 @@
+import Comment from '../../components/Comment';
+
+const CommentPage = () => {
+  return (
+    <div>
+      <Comment articleId={0} />
+    </div>
+  );
+};
+
+export default CommentPage;

src/types/comment.d.ts

@@ -1,3 +1,15 @@
 export interface Comment {
   id: number;
+  pictureUrl: string;
+  writer: string;
+  content: string;
+  postAt: string | Date;
+  hasChild: boolean;
+  parentId: number; // -1 = no parent
+}
+
+export interface UIComment extends Comment {
+  isExpand: boolean;
+  alreadyFetch: boolean;
+  children: Comment[] | undefined;
 }