[ Refactor ] home 화면 QA

apps/client/src/app/@modal/(...)group/[groupId]/solved-detail/components/CommentSection/index.tsx

@@ -45,17 +45,15 @@ const CommentSection = ({ solutionId }: CommentSectionProps) => {
     <div className={sectionWrapper}>
       <ul className={ulStyle} ref={commentRef}>
         <CommentsProvider solutionId={+solutionId}>
-          {comments
-            ?.sort((a, b) => +new Date(a.createdAt) - +new Date(b.createdAt))
-            .map((item) => (
-              <CommentBox
-                key={item.commentId}
-                variant="detail"
-                onDelete={deleteMutate}
-                isMine={item.writerNickname === session?.user?.nickname}
-                {...item}
-              />
-            ))}
+          {comments?.map((item) => (
+            <CommentBox
+              key={item.commentId}
+              variant="detail"
+              onDelete={deleteMutate}
+              isMine={item.writerNickname === session?.user?.nickname}
+              {...item}
+            />
+          ))}
         </CommentsProvider>
       </ul>
       <form onSubmit={handleCommentSubmit} className={commentInputStyle}>

apps/client/src/app/[user]/components/CommentInput/index.css.ts

@@ -7,8 +7,8 @@ export const leaveCommentWrapper = style({
   padding: "0.8rem 2rem",
 });
 
-export const commentFormStyle = style({ width: "100%" });
-
-export const commentInputStyle = style({
-  marginLeft: "1.2rem",
+export const enterSvgStyle = style({
+  marginRight: "0.4rem",
 });
+
+export const commentFormStyle = style({ width: "100%", marginLeft: "1.2rem" });

apps/client/src/app/[user]/components/CommentInput/index.tsx

@@ -1,27 +1,27 @@
+"use client";
+
 import {
   commentFormStyle,
-  commentInputStyle,
+  enterSvgStyle,
   leaveCommentWrapper,
 } from "@/app/[user]/components/CommentInput/index.css";
 import { useCommentMutation } from "@/app/api/comments/mutation";
 import { IcnEnter } from "@/asset/svg";
 import Avatar from "@/common/component/Avatar";
 import Input from "@/common/component/Input";
+import { useSession } from "next-auth/react";
 import { useState } from "react";
 
 interface CommentInputProps {
-  profileUrl?: string;
-  nickname?: string;
   solutionId: number;
   onCommentCountPlus: () => void;
 }
 
 const CommentInput = ({
-  profileUrl,
-  nickname,
   solutionId,
   onCommentCountPlus,
 }: CommentInputProps) => {
+  const { data } = useSession();
   const [comment, setComment] = useState("");
 
   const { mutate: postComment } = useCommentMutation(solutionId);
@@ -40,17 +40,16 @@ const CommentInput = ({
 
   return (
     <section className={leaveCommentWrapper}>
-      <IcnEnter width={24} height={24} aria-hidden />
+      <IcnEnter width={24} height={24} aria-hidden className={enterSvgStyle} />
       <Avatar
         size="small"
-        alt={`${nickname}님의 프로필 사진`}
-        src={profileUrl}
+        alt={`${data?.user?.nickname}님의 프로필 사진`}
+        src={data?.user?.profileImage}
       />
       <form onSubmit={handleCommentSubmit} className={commentFormStyle}>
         <Input
           placeholder="의견을 남겨주세요."
           aria-label="풀이에 대한 의견을 남기는 input"
-          className={commentInputStyle}
           value={comment}
           onChange={handleCommentChange}
         />

apps/client/src/app/[user]/components/FeedItem/index.css.ts

@@ -97,16 +97,19 @@ export const moreCommentWrapper = style({
   padding: "0.6rem 0",
 
   color: "inherit",
-  ...theme.font.Caption1_R_12,
 });
 
+export const moreCommentTextStyle = style({
+  ...theme.font.Caption1_R_12,
+});
 export const moreCommentButtonStyle = style({
   padding: "0.2rem 0.8rem",
 
   backgroundColor: theme.color.mg5,
   borderRadius: "4px",
 
   color: "inherit",
+  ...theme.font.Caption1_R_12,
 
   cursor: "pointer",
 });

apps/client/src/app/[user]/components/FeedItem/index.tsx

@@ -16,12 +16,12 @@ import {
   infoWrapper,
   moreCommentButtonStyle,
   moreCommentContainer,
+  moreCommentTextStyle,
   moreCommentWrapper,
   nameStyle,
   studyNameStyle,
 } from "@/app/[user]/components/FeedItem/index.css";
 import { useCommentListQueryObject } from "@/app/api/comments/query";
-import type { CommentContent } from "@/app/api/comments/type";
 import { useGroupInfoQueryObject } from "@/app/api/groups/query";
 import { useSolutionQueryObject } from "@/app/api/solutions/query";
 import { formatDistanceDate } from "@/common/util/date";
@@ -39,7 +39,7 @@ const DEFAULT_COMMENT_COUNT = 3;
 const FeedItem = ({ solutionId, groupId }: FeedItemProps) => {
   const myAddedCommentsRef = useRef(0);
   const displayedCommentCount =
-    myAddedCommentsRef.current + DEFAULT_COMMENT_COUNT;
+    DEFAULT_COMMENT_COUNT + myAddedCommentsRef.current;
 
   const [{ data: solution }, { data: comments }, { data: group }] =
     useSuspenseQueries({
@@ -51,7 +51,6 @@ const FeedItem = ({ solutionId, groupId }: FeedItemProps) => {
         {
           ...useCommentListQueryObject(solutionId),
           retry: 0,
-          select: (data: CommentContent[]) => [...data].reverse(),
         },
         {
           ...useGroupInfoQueryObject(groupId),
@@ -60,6 +59,11 @@ const FeedItem = ({ solutionId, groupId }: FeedItemProps) => {
       ],
     });
 
+  const displayedComments = comments?.slice(
+    comments.length - displayedCommentCount,
+    comments.length,
+  );
+
   // 피드에 뜨게한 댓글 찾기 - 나를 제외한 최신 댓글
   const triggerComment = useMemo(
     () =>
@@ -122,7 +126,7 @@ const FeedItem = ({ solutionId, groupId }: FeedItemProps) => {
         />
 
         <ul className={commentListStyle}>
-          {comments?.slice(0, displayedCommentCount).map((comment) => (
+          {displayedComments.map((comment) => (
             <li
               key={comment.commentId}
               className={commentItemStyle}
@@ -147,7 +151,9 @@ const FeedItem = ({ solutionId, groupId }: FeedItemProps) => {
             className={moreCommentContainer}
           >
             <div className={moreCommentWrapper}>
-              <span>{`댓글 +${comments?.length - displayedCommentCount}`}</span>
+              <span
+                className={moreCommentTextStyle}
+              >{`댓글 +${comments?.length - displayedCommentCount}`}</span>
               <span className={moreCommentButtonStyle}>더보기</span>
             </div>
           </Link>
@@ -156,8 +162,6 @@ const FeedItem = ({ solutionId, groupId }: FeedItemProps) => {
         <CommentInput
           onCommentCountPlus={handleCommentCountPlus}
           solutionId={solutionId}
-          profileUrl={solution?.profileImage}
-          nickname={solution?.nickname}
         />
       </article>
     </li>

apps/client/src/app/[user]/page.tsx

@@ -17,17 +17,14 @@ import Sidebar from "@/common/component/Sidebar";
 import { prefetchQuery } from "@/shared/util/prefetch";
 import { sidebarWrapper } from "@/styles/shared.css";
 
-import { HydrationBoundary } from "@tanstack/react-query";
-
 import MyFeedSection from "@/app/[user]/components/MyFeedSection";
+import { HydrationBoundary } from "@tanstack/react-query";
 import { HTTPError } from "ky";
 import { notFound } from "next/navigation";
 import { useRecommendStudyQueryObject } from "../api/users/query";
 import UserPageLeftSidebar from "./components/LeftSidebar";
 import RecommendStudySection from "./components/RecommendSection";
 
-export const revalidate = 60;
-
 const UserDashboardPage = async ({ params }: { params: { user: string } }) => {
   const userInfo = await auth();
   const { user } = params;
@@ -77,8 +74,8 @@ const UserDashboardPage = async ({ params }: { params: { user: string } }) => {
       <div className={userHomeWrapper}>
         <HydrationBoundary state={recommendGroups}>
           <RecommendStudySection />
-          <MyFeedSection />
         </HydrationBoundary>
+        <MyFeedSection />
       </div>
       <Sidebar>{/* <div>임시로 만드는 우측 패널</div> */}</Sidebar>
     </main>

apps/client/src/app/api/comments/mutation.ts

@@ -17,7 +17,7 @@ export const useCommentMutation = (solutionId: number) => {
     mutationFn: (content: string) => postCommentInput(solutionId, content),
     onSuccess: async () => {
       await queryClient.invalidateQueries({
-        queryKey: commentQueryKey.all(),
+        queryKey: commentQueryKey.list(solutionId),
       });
     },
     onError: () => {

apps/client/src/app/api/comments/query.ts

@@ -1,3 +1,4 @@
+import type { CommentContent } from "@/app/api/comments/type";
 import { queryOptions } from "@tanstack/react-query";
 import { getCommentList } from "./index";
 
@@ -12,4 +13,5 @@ export const useCommentListQueryObject = (solutionId: number) =>
   queryOptions({
     queryKey: commentQueryKey.list(solutionId),
     queryFn: () => getCommentList(solutionId),
+    select: (data: CommentContent[]) => data.toReversed(),
   });