1:1 스터디 리뷰 통계·후기 목록 추가 및 그룹 스터디 수정 스키마 분리

src/app/(service)/(my)/my-study-review/_components/completed-study-review-page.tsx

@@ -5,10 +5,6 @@ import dayjs from 'dayjs';
 import dynamic from 'next/dynamic';
 import { useMemo, useState } from 'react';
 import { axiosInstance } from '@/api/client/axios';
-import type {
-  GroupStudyBasicInfoResponseDto,
-  GroupStudyDetailInfoResponseDto,
-} from '@/api/openapi';
 import GroupStudyReviewModal from '@/components/common/modals/group-study-review-modal';
 import Pagination from '@/components/common/ui/pagination';
 import { useAuthReady } from '@/hooks/common/use-auth';
@@ -32,6 +28,8 @@ interface CompletedStudyReviewPageProps {
   basePath: string;
   studyType: 'GROUP_STUDY' | 'PREMIUM_STUDY' | 'ONE_ON_ONE_STUDY';
   studyTypeName: string;
+  hideTabNav?: boolean;
+  hideEmptyMessage?: boolean;
 }
 
 interface StudyRoleSectionProps {
@@ -51,10 +49,8 @@ function StudyRoleSection({
 }: StudyRoleSectionProps) {
   return (
     <section className="flex flex-col gap-200">
-      <div className="flex flex-col gap-50">
-        <div className="flex items-center gap-100">
-          <h2 className="font-designer-20b text-text-default">{title}</h2>
-        </div>
+      <div className="flex items-center gap-100">
+        <h2 className="font-designer-20b text-text-default">{title}</h2>
       </div>
 
       {studies.length > 0 ? (
@@ -81,6 +77,8 @@ export default function CompletedStudyReviewPage({
   basePath,
   studyType,
   studyTypeName,
+  hideTabNav = false,
+  hideEmptyMessage = false,
 }: CompletedStudyReviewPageProps) {
   const [page, setPage] = useState(1);
   const [reviewStudy, setReviewStudy] = useState<MemberStudyItem | null>(null);
@@ -162,17 +160,30 @@ export default function CompletedStudyReviewPage({
   };
 
   const activeReviewStudyId = reviewStudy?.studyId;
+
+  const handleSubmitSuccess = () => {
+    if (activeReviewStudyId === undefined) return;
+    setSubmittedStudyIds((prev) =>
+      prev.includes(activeReviewStudyId)
+        ? prev
+        : [...prev, activeReviewStudyId],
+    );
+    setTimeout(() => setShowCompletionModal(true), 300);
+  };
+
   const emptyParticipatedMessage = `아직 참여한 ${studyTypeName}가 없습니다.`;
   const emptyLedMessage = `아직 개설한 ${studyTypeName}가 없습니다.`;
 
   return (
     <div className="flex flex-col gap-400">
-      <StudyReviewTabNav />
+      {!hideTabNav && <StudyReviewTabNav />}
 
       {completedStudies.length === 0 ? (
-        <div className="font-designer-14r text-text-subtle flex h-200 items-center justify-center text-center">
-          {emptyParticipatedMessage}
-        </div>
+        !hideEmptyMessage && (
+          <div className="font-designer-14r text-text-subtle flex h-200 items-center justify-center text-center">
+            {emptyParticipatedMessage}
+          </div>
+        )
       ) : (
         <>
           <StudyRoleSection
@@ -184,7 +195,7 @@ export default function CompletedStudyReviewPage({
           />
 
           <StudyRoleSection
-            title="종료된 스터디"
+            title="운영한 스터디"
             studies={leaderStudies}
             basePath={basePath}
             emptyMessage={emptyLedMessage}
@@ -200,56 +211,34 @@ export default function CompletedStudyReviewPage({
 
       {activeReviewStudyId !== undefined &&
         reviewStudy &&
-        studyType !== 'ONE_ON_ONE_STUDY' && (
-          <GroupStudyReviewModal
+        (studyType === 'ONE_ON_ONE_STUDY' ? (
+          <StudyReviewModal
             open={!!reviewStudy}
             onOpenChange={(open) => {
               if (!open) {
                 setReviewStudy(null);
               }
             }}
-            groupStudyId={activeReviewStudyId}
-            detailInfo={
-              { title: reviewStudy.title } as GroupStudyDetailInfoResponseDto
-            }
-            basicInfo={
-              {
-                startDate: dayjs(reviewStudy.startTime).format('YYYY.MM.DD'),
-                endDate: dayjs(reviewStudy.endTime).format('YYYY.MM.DD'),
-              } as GroupStudyBasicInfoResponseDto
-            }
-            onSubmitSuccess={() => {
-              setSubmittedStudyIds((prev) =>
-                prev.includes(activeReviewStudyId)
-                  ? prev
-                  : [...prev, activeReviewStudyId],
-              );
-              setTimeout(() => setShowCompletionModal(true), 300);
-            }}
+            targetStudySpaceId={activeReviewStudyId}
+            onSubmitSuccess={handleSubmitSuccess}
           />
-        )}
-
-      {activeReviewStudyId !== undefined &&
-        reviewStudy &&
-        studyType === 'ONE_ON_ONE_STUDY' && (
-          <StudyReviewModal
+        ) : (
+          <GroupStudyReviewModal
             open={!!reviewStudy}
             onOpenChange={(open) => {
               if (!open) {
                 setReviewStudy(null);
               }
             }}
-            targetStudySpaceId={activeReviewStudyId}
-            onSubmitSuccess={() => {
-              setSubmittedStudyIds((prev) =>
-                prev.includes(activeReviewStudyId)
-                  ? prev
-                  : [...prev, activeReviewStudyId],
-              );
-              setTimeout(() => setShowCompletionModal(true), 300);
+            groupStudyId={activeReviewStudyId}
+            detailInfo={{ title: reviewStudy.title }}
+            basicInfo={{
+              startDate: dayjs(reviewStudy.startTime).format('YYYY.MM.DD'),
+              endDate: dayjs(reviewStudy.endTime).format('YYYY.MM.DD'),
             }}
+            onSubmitSuccess={handleSubmitSuccess}
           />
-        )}
+        ))}
 
       <StudyCompletionModal
         open={showCompletionModal}

src/app/(service)/(my)/my-study-review/group/[groupStudyId]/_components/evaluation-section.tsx

@@ -83,8 +83,8 @@ export default function EvaluationSection({
   studyTypeName,
 }: EvaluationSectionProps) {
   const emptyMessage = studyTypeName
-    ? `아직 받은 ${studyTypeName} 평가가 없습니다`
-    : '아직 받은 평가가 없습니다';
+    ? `아직 받은 ${studyTypeName} 평가가 없습니다.`
+    : '아직 받은 평가가 없습니다.';
   const goodItems = statistics?.goodItems ?? [];
   const disappointedItems = statistics?.disappointedItems ?? [];
   const goodTotalCount = goodItems.reduce(

src/app/(service)/(my)/my-study-review/group/[groupStudyId]/page.tsx

@@ -62,7 +62,7 @@ export default function GroupStudyReviewDetailPage() {
         aria-label="뒤로가기"
       >
         <ChevronLeft className="text-text-subtle" size={20} />
-        <span className="font-designer-13r text-text-subtle">
+        <span className="text-text-subtle font-designer-14m flex cursor-pointer items-center gap-50 hover:text-text-default">
           그룹 스터디 목록
         </span>
       </button>
@@ -100,7 +100,7 @@ export default function GroupStudyReviewDetailPage() {
             ))}
           </ul>
         ) : (
-          <div className="font-designer-14r text-text-subtle flex h-200 items-center justify-center text-center">
+          <div className="flex flex-col font-designer-14r text-text-subtle h-200 items-center justify-center text-center">
             아직 받은 {studyTypeName} 후기가 없습니다.
           </div>
         )}

src/app/(service)/(my)/my-study-review/one-to-one/[studySpaceId]/_components/one-to-one-review-card.tsx → src/app/(service)/(my)/my-study-review/one-to-one/_components/one-to-one-review-card.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/components/common/ui/(shadcn)/lib/utils';
 import Avatar from '@/components/common/ui/avatar';
 import type { MyReviewItem } from '@/types/api/review.types';
 import { formatDateTimeDot } from '@/utils/time';
-import { useExpandableContent } from '../../../_components/use-expandable-content';
+import { useExpandableContent } from '../../_components/use-expandable-content';
 
 export default function OneToOneReviewCard({
   review,

src/app/(service)/(my)/my-study-review/one-to-one/_utils.ts

@@ -0,0 +1,26 @@
+import type { GroupStudyReviewStatistics } from '@/types/api/group-study-review.types';
+
+interface ReviewStatisticsProps {
+  id: number;
+  content: string;
+  count: number;
+}
+
+export function buildEvaluationStatistics(
+  positiveKeywords: ReviewStatisticsProps[],
+  negativeKeywords: ReviewStatisticsProps[],
+): GroupStudyReviewStatistics {
+  const filterAndMap = (keywords: ReviewStatisticsProps[]) =>
+    keywords
+      .filter((keyword) => keyword.count > 0)
+      .map((keyword) => ({
+        id: keyword.id,
+        label: keyword.content,
+        count: keyword.count,
+      }));
+
+  return {
+    goodItems: filterAndMap(positiveKeywords),
+    disappointedItems: filterAndMap(negativeKeywords),
+  };
+}

src/app/(service)/(my)/my-study-review/one-to-one/page.tsx

@@ -1,13 +1,81 @@
 'use client';
 
+import {
+  useMyNegativeKeywordsQuery,
+  useMyReviewsInfinityQuery,
+  useUserPositiveKeywordsQuery,
+} from '@/hooks/queries/use-review-query';
+
+import { buildEvaluationStatistics } from './_utils';
 import CompletedStudyReviewPage from '../_components/completed-study-review-page';
+import StudyReviewTabNav from '../_components/study-review-tab-nav';
+import OneToOneReviewCard from './_components/one-to-one-review-card';
+import EvaluationSection from '../group/[groupStudyId]/_components/evaluation-section';
 
 export default function OneToOneReviewPage() {
+  const { data: positiveData } = useUserPositiveKeywordsQuery({});
+  const { data: negativeData } = useMyNegativeKeywordsQuery({});
+  const {
+    data: reviewData,
+    fetchNextPage,
+    hasNextPage,
+  } = useMyReviewsInfinityQuery();
+
+  const statistics = buildEvaluationStatistics(
+    positiveData?.keywords ?? [],
+    negativeData?.keywords ?? [],
+  );
+
+  const reviews = reviewData?.reviews ?? [];
+  const totalCount = reviewData?.totalCount ?? 0;
+
   return (
-    <CompletedStudyReviewPage
-      basePath="/my-study-review/one-to-one"
-      studyType="ONE_ON_ONE_STUDY"
-      studyTypeName="1:1스터디"
-    />
+    <div className="flex flex-col gap-400">
+      <StudyReviewTabNav />
+
+      <EvaluationSection statistics={statistics} />
+
+      <section className="flex flex-col gap-200">
+        <div className="flex items-center gap-100">
+          <h2 className="font-designer-20b text-text-default">후기</h2>
+          <span className="font-designer-20b text-text-default">
+            {totalCount}
+          </span>
+        </div>
+        <span className="font-designer-14r text-text-subtle">
+          모든 후기는 나에게만 보여요.
+        </span>
+
+        {reviews.length > 0 ? (
+          <ul className="flex flex-col">
+            {reviews.map((review) => (
+              <OneToOneReviewCard key={review.id} review={review} />
+            ))}
+          </ul>
+        ) : (
+          <div className="text-text-subtle font-designer-14r flex h-200 items-center justify-center text-center">
+            아직까지 받은 후기가 없습니다.
+          </div>
+        )}
+
+        {hasNextPage && (
+          <button
+            type="button"
+            className="font-designer-14m text-text-subtle hover:bg-background-accent-gray-default rounded-50 flex w-full cursor-pointer items-center justify-center py-200"
+            onClick={() => fetchNextPage()}
+          >
+            더보기
+          </button>
+        )}
+      </section>
+
+      <CompletedStudyReviewPage
+        basePath="/my-study-review/one-to-one"
+        studyType="ONE_ON_ONE_STUDY"
+        studyTypeName="1:1스터디"
+        hideTabNav
+        hideEmptyMessage
+      />
+    </div>
   );
 }