[feat] 스터디 신청 목록/스터디 후기 운영 서버 반영

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

Dockerfile

@@ -1,7 +1,7 @@
 # 운영환경(main branch)에서 사용하는 Dockerfile
 
 # 1단계: build
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 
 COPY . .
@@ -12,7 +12,7 @@ COPY .env .env
 RUN yarn install && yarn build
 
 # 2단계: production
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production

Dockerfile.dev

@@ -1,7 +1,7 @@
 # 운영환경(main branch)에서 사용하는 Dockerfile
 
 # 1단계: build
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 
 COPY . .
@@ -12,7 +12,7 @@ COPY .env .env
 RUN yarn install && yarn build
 
 # 2단계: production
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
@@ -26,6 +26,9 @@ COPY --from=builder /app/next.config.ts ./next.config.ts
 # 런타임시점에도 .env 파일 복사
 COPY --from=builder /app/.env .env
 
+# 빌드 시 Node 힙 메모리를 4GB까지 허용 (4096 = 4GB)
+ENV NODE_OPTIONS="--max-old-space-size=4096"
+
 # devDependencies는 설치하지 않고 dependencies만 설치
 RUN yarn install --production 
 

Dockerfile.prod

@@ -1,7 +1,7 @@
 # 운영환경(main branch)에서 사용하는 Dockerfile
 
 # 1단계: build
-FROM node:18-alpine AS builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 
 COPY . .
@@ -12,7 +12,7 @@ COPY .env .env
 RUN yarn install && yarn build
 
 # 2단계: production
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
@@ -26,6 +26,9 @@ COPY --from=builder /app/next.config.ts ./next.config.ts
 # 런타임시점에도 .env 파일 복사
 COPY --from=builder /app/.env .env
 
+# 빌드 시 Node 힙 메모리를 4GB까지 허용 (4096 = 4GB)
+ENV NODE_OPTIONS="--max-old-space-size=4096"
+
 # devDependencies는 설치하지 않고 dependencies만 설치
 RUN yarn install --production 
 

app/(my)/my-study-review/page.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import Image from 'next/image';
+import { useState } from 'react';
+import KeywordReview from '@/entities/user/ui/keyword-review';
+import { MyReviewItem } from '@/features/study/api/types';
+import {
+  useMyNegativeKeywordsQuery,
+  useMyReviewsInfinityQuery,
+  useUserPositiveKeywordsQuery,
+} from '@/features/study/model/use-review-query';
+import { formatKoreaRelativeTime } from '@/shared/lib/time';
+
+export default function MyStudyReview() {
+  const { data: positiveKeywordsData } = useUserPositiveKeywordsQuery({
+    pageSize: 5,
+  });
+  const { data: negativeKeywordsData } = useMyNegativeKeywordsQuery({
+    pageSize: 5,
+  });
+  const {
+    data: myReviewsData,
+    fetchNextPage,
+    hasNextPage,
+  } = useMyReviewsInfinityQuery();
+
+  const positiveKeywords = positiveKeywordsData?.keywords || [];
+  const negativeKeywords = negativeKeywordsData?.keywords || [];
+
+  const positiveKeywordsCount = positiveKeywordsData?.totalCount || 0;
+  const negativeKeywordsCount = negativeKeywordsData?.totalCount || 0;
+
+  const totalKeywordsCount = positiveKeywordsCount + negativeKeywordsCount;
+
+  const myReviews = myReviewsData?.reviews || [];
+
+  return (
+    <>
+      <section>
+        <div className="mb-200">
+          <div className="flex items-center gap-100">
+            <div className="font-designer-20b text-text-default">받은 평가</div>
+            <div className="font-designer-20b text-text-default">
+              {totalKeywordsCount}
+            </div>
+          </div>
+
+          <span className="font-designer-14r text-text-subtle">
+            개선이 필요한 점은 나에게만 보여요
+          </span>
+        </div>
+
+        <div className="mb-400 grid grid-cols-2 gap-300">
+          <div className="rounded-100 border-border-subtle min-h-[280px] border p-200">
+            <div className="mb-200 flex justify-between">
+              <h3 className="font-designer-16b text-text-default">좋았던 점</h3>
+
+              {positiveKeywords.length > 5 && (
+                <button className="font-designer-12m text-text-subtlest cursor-pointer">
+                  더보기
+                </button>
+              )}
+            </div>
+
+            <ul className="flex flex-col gap-50">
+              {positiveKeywords.length > 0 ? (
+                positiveKeywords.map((keyword) => (
+                  <KeywordReview
+                    key={keyword.id}
+                    content={keyword.content}
+                    count={keyword.count}
+                  />
+                ))
+              ) : (
+                <span className="text-text-subtle font-designer-14r text-center">
+                  아직 받은 평가가 없습니다.
+                </span>
+              )}
+            </ul>
+          </div>
+
+          <div className="rounded-100 border-border-subtle min-h-[280px] border p-200">
+            <div className="mb-200 flex justify-between">
+              <h3 className="font-designer-16b text-text-default">
+                개선이 필요한 점
+              </h3>
+
+              {negativeKeywords.length > 5 && (
+                <button className="font-designer-12m text-text-subtlest cursor-pointer">
+                  더보기
+                </button>
+              )}
+            </div>
+
+            <ul className="flex flex-col gap-50">
+              {negativeKeywords.length > 0 ? (
+                negativeKeywords.map((keyword) => (
+                  <KeywordReview
+                    key={keyword.id}
+                    content={keyword.content}
+                    count={keyword.count}
+                  />
+                ))
+              ) : (
+                <span className="text-text-subtle font-designer-14r text-center">
+                  아직 받은 평가가 없습니다.
+                </span>
+              )}
+            </ul>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div className="flex items-center gap-100">
+          <div className="font-designer-20b text-text-default">후기</div>
+          <div className="font-designer-20b text-text-default">
+            {myReviewsData?.totalCount || 0}
+          </div>
+        </div>
+
+        <span className="font-designer-14r text-text-subtle">
+          모든 후기는 나에게만 보여요
+        </span>
+
+        <ul>
+          {myReviews.length > 0 ? (
+            myReviews.map((review) => <Review key={review.id} data={review} />)
+          ) : (
+            <div className="text-text-subtle font-designer-14r flex h-[200px] items-center justify-center text-center">
+              아직까지 받은 후기가 없습니다.
+            </div>
+          )}
+
+          {hasNextPage && (
+            <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()}
+            >
+              <span>더보기</span>
+
+              <Image
+                src="/icons/arrow-down.svg"
+                width={20}
+                height={20}
+                alt="후기 더보기"
+              />
+            </button>
+          )}
+        </ul>
+      </section>
+    </>
+  );
+}
+
+function Review({ data }: { data: MyReviewItem }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <li className="border-b-border-subtle flex flex-col gap-150 border-b py-250">
+      <div className="flex items-center gap-150">
+        <Image
+          src={data.writer.profileImageUrl || '/profile-default.svg'}
+          width={32}
+          height={32}
+          alt={`${data.writer.memberName} 프로필 이미지`}
+          className="rounded-full"
+        />
+
+        <div>
+          <span className="font-designer-14b text-text-default mr-50">
+            {data.writer.memberName}
+          </span>
+          <span className="font-designer-14r text-text-subtle mr-50">·</span>
+          <span className="font-designer-14r text-text-subtle">
+            {formatKoreaRelativeTime(data.reviewedAt)}
+          </span>
+        </div>
+      </div>
+
+      <div>
+        <p
+          className={`text-text-default font-designer-15r ${expanded ? 'line-clamp-none' : 'line-clamp-3'}`}
+        >
+          {data.content}
+        </p>
+        <button
+          className="font-designer-14r text-text-subtlest cursor-pointer"
+          onClick={() => setExpanded(!expanded)}
+        >
+          {expanded ? '접기' : '더보기'}
+        </button>
+      </div>
+
+      <div>
+        <div className="text-text-subtle">
+          <span className="font-designer-14b mr-100">스터디 기간</span>
+          <span className="font-designer-13r">
+            {data.startDate.replace(/-/g, '.')} ~{' '}
+            {data.endDate.replace(/-/g, '.')}
+          </span>
+        </div>
+        <div className="text-text-subtle">
+          <span className="font-designer-14b mr-100">스터디 주제</span>
+          <span className="font-designer-13r">
+            {data.studySubjects.join(', ')}
+          </span>
+        </div>
+      </div>
+    </li>
+  );
+}

app/global.css

@@ -192,6 +192,10 @@ https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%E
   --color-background-brand-default: var(--color-rose-500);
   --color-background-brand-strong: var(--color-rose-700);
 
+  --color-background-neutral-subtle: var(--color-gray-200);
+  --color-background-neutral-default: var(--color-gray-500);
+  --color-background-neutral-strong: var(--color-gray-900);
+
   --color-background-accent-blue-subtle: var(--color-blue-50);
   --color-background-accent-blue-default: var(--color-blue-100);
   --color-background-accent-blue-strong: var(--color-blue-600);
@@ -226,6 +230,10 @@ https://velog.io/@oneook/tailwindcss-4.0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%E
   --color-background-accent-yellow-default: var(--color-yellow-100);
   --color-background-accent-yellow-strong: var(--color-yellow-600);
 
+  --color-background-success-subtle: var(--color-green-300);
+  --color-background-success-default: var(--color-green-500);
+  --color-background-success-strong: var(--color-green-700);
+
   --color-fill-brand-default-default: var(--color-rose-500);
   --color-fill-brand-default-hover: var(--color-rose-600);
   --color-fill-brand-default-pressed: var(--color-rose-700);

next.config.ts

@@ -15,6 +15,11 @@ const nextConfig: NextConfig = {
         hostname: 'test-api.zeroone.it.kr',
         pathname: '/profile-image/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'api.zeroone.it.kr',
+        pathname: '/profile-image/**',
+      },
       {
         protocol: 'https',
         hostname: 'lh3.googleusercontent.com',

package.json

@@ -18,6 +18,7 @@
     "api:logs": "docker-compose -f ../study-platform-mvp/docker-compose.yml logs -f mvp-app"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.1",
     "@next/third-parties": "^15.3.3",
     "@radix-ui/react-avatar": "^1.1.9",
     "@radix-ui/react-dialog": "^1.1.10",
@@ -37,10 +38,12 @@
     "react": "^19.0.0",
     "react-day-picker": "9.4.3",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.62.0",
     "tailwind-merge": "^3.2.0",
     "tailwindcss": "^4.0.6",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.2.5",
+    "zod": "^4.0.17",
     "zustand": "^5.0.3"
   },
   "devDependencies": {

src/entities/user/ui/keyword-review.tsx

@@ -0,0 +1,14 @@
+export default function KeywordReview({
+  content,
+  count,
+}: {
+  content: string;
+  count: number;
+}) {
+  return (
+    <li className="bg-background-accent-gray-default text-text-default rounded-50 flex justify-between px-200 py-100">
+      <span className="font-designer-14r">{content}</span>
+      <span className="font-designer-14b">{count}</span>
+    </li>
+  );
+}

src/widgets/my-page/profileinfo-card.tsx → src/entities/user/ui/profile-info-card.tsx

@@ -6,7 +6,7 @@ interface Props {
 export default function ProfileInfoCard({ title, content }: Props) {
   return (
     <div className="rounded-75 bg-background-alternative flex gap-400 p-250">
-      <div className="font-designer-16b text-text-default w-1/5 shrink-0">
+      <div className="font-designer-16b text-text-default w-[132px] shrink-0">
         {title}
       </div>
       <div className="font-designer-15r text-text-default flex-1">