Feat: 스터디상세페이지 작업 80% 진행완료

app/(service)/(my)/my-study/entry-list/page.tsx

@@ -1,5 +1,5 @@
-import EntryList from '@/features/my-page/ui/entry-list';
 import Image from 'next/image';
+import ApplicantList from '@/features/my-page/ui/applicant-list';
 
 export default function EntryPage() {
   return (
@@ -14,7 +14,7 @@ export default function EntryPage() {
         <div className="flex-1 text-center">새로운 신청자 확인하기</div>
       </div>
 
-      <EntryList />
+      <ApplicantList />
     </div>
   );
 }

app/(service)/(nav)/study/[id]/page.tsx

@@ -1,3 +1,24 @@
-export default function StudyPage() {
-  return <div>Study Page</div>;
+import {
+  HydrationBoundary,
+  dehydrate,
+  QueryClient,
+} from '@tanstack/react-query';
+
+import { prefetchGroupStudyDetail } from '@/features/study/group/model/use-study-query';
+
+import StudyDetailPage from '@/features/study/group/ui/group-study-detail-page';
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const id = Number(params.id);
+
+  const qc = new QueryClient();
+
+  // 서버에서 미리 패치 (API 호출이 서버에서 실행됨)
+  await prefetchGroupStudyDetail(qc, id);
+
+  return (
+    <HydrationBoundary state={dehydrate(qc)}>
+      <StudyDetailPage id={id} />
+    </HydrationBoundary>
+  );
 }

app/(service)/layout.tsx

@@ -37,7 +37,7 @@ export default function ServiceLayout({
             {/** 1400 + 48*2 패딩 양옆 48로 임의적용 */}
             <div className="m-auto flex w-[1496px] flex-1 flex-col items-center">
               <Header />
-              <main className="w-full p-600">{children}</main>
+              <main className="w-full px-600">{children}</main>
             </div>
           </div>
         </MainProvider>

src/features/my-page/api/get-entry-list.ts → src/features/application/api/get-applicants-by-status.ts

@@ -1,10 +1,13 @@
 import { axiosInstance } from '@/shared/tanstack-query/axios';
-import { EntryListRequest, GroupStudyApplyListResponse } from './types';
+import {
+  getApplicantsByStatusRequest,
+  getApplicantsByStatusResponse,
+} from './type';
 
-// 그룹 스터디 리스트 조회
-export const getEntryList = async (
-  params: EntryListRequest,
-): Promise<GroupStudyApplyListResponse> => {
+// 상태별 스터디 신청자 조회
+export const getApplicantsByStatus = async (
+  params: getApplicantsByStatusRequest,
+): Promise<getApplicantsByStatusResponse> => {
   const { page, size, status, groupStudyId } = params;
 
   const { data } = await axiosInstance.get(

src/features/application/api/type.ts

@@ -0,0 +1,78 @@
+export type ApplyStatus = 'PENDING' | 'APPROVED' | 'REJECTED';
+
+export type ApplyRole = 'LEADER' | 'PARTICIPANT';
+
+export interface GroupStudyApply {
+  applyId: number;
+  applicantInfo: Applicant;
+  groupStudy: GroupStudy;
+  progressScore: number;
+  role: ApplyRole;
+  lastAccessed: string;
+  answer: string[];
+  status: ApplyStatus;
+  processedAt: string | null;
+  reason: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface Applicant {
+  memberId: number;
+  memberName: string;
+  profileImage: ProfileImage;
+  sincerityTemp: SincerityTemp;
+}
+
+export interface ProfileImage {
+  imageId: number;
+  resizedImages: ResizedImage[];
+}
+
+export interface SincerityTemp {
+  temperature: number;
+  levelId: number;
+  levelName: '1단계' | '2단계' | '3단계' | '4단계'; // 추후 서버 기준에 맞게 확장 가능
+}
+
+export interface GroupStudy {
+  groupStudyId: number;
+  title: string;
+  description: string;
+}
+
+export interface ResizedImage {
+  resizedImageId: number;
+  resizedImageUrl: string;
+  imageSizeType: ImageSizeType;
+}
+
+export interface ImageSizeType {
+  imageTypeName: 'ORIGINAL' | 'SMALL' | 'MEDIUM' | 'LARGE';
+  width: number | null;
+  height: number | null;
+}
+
+// api DTO
+export interface getApplicantsByStatusRequest {
+  groupStudyId: number;
+  page: number;
+  size: number;
+  status: ApplyStatus;
+}
+
+export interface getApplicantsByStatusResponse {
+  content: GroupStudyApply[];
+  page: number;
+  size: number;
+  totalElements: number;
+  totalPages: number;
+  hasNext: boolean;
+  hasPrevious: boolean;
+}
+
+export interface updateApplicantByStatusRequest {
+  applyId: number;
+  groupStudyId: number;
+  status?: ApplyStatus;
+}

src/features/my-page/api/update-entry-status.ts → src/features/application/api/update-applicant-by-status.ts

@@ -1,8 +1,10 @@
 import { axiosInstance } from '@/shared/tanstack-query/axios';
-import { EntryStatusRequest } from './types';
+import { updateApplicantByStatusRequest } from './type';
 
-// 그룹 스터디 리스트 조회
-export const updateEntryStatus = async (params: EntryStatusRequest) => {
+// 스터디 신청자 상태 변경
+export const updateApplicantByStatus = async (
+  params: updateApplicantByStatusRequest,
+) => {
   const { status, groupStudyId, applyId } = params;
 
   const { data } = await axiosInstance.patch(

src/features/application/model/use-applicant-qeury.ts

@@ -0,0 +1,27 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { getApplicantsByStatus } from '../api/get-applicants-by-status';
+import { ApplyStatus } from '../api/type';
+
+export const useApplicantsByStatusQuery = ({
+  groupStudyId,
+  status,
+}: {
+  groupStudyId: number;
+  status: ApplyStatus;
+}) => {
+  return useInfiniteQuery({
+    queryKey: ['entryList', groupStudyId, status],
+    queryFn: ({ pageParam = 0 }) =>
+      getApplicantsByStatus({
+        groupStudyId,
+        page: pageParam,
+        size: 20,
+        status,
+      }),
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) =>
+      lastPage.hasNext ? lastPage.page + 1 : undefined,
+    maxPages: 3,
+    enabled: !!groupStudyId,
+  });
+};

src/features/my-page/api/types.ts

@@ -80,80 +80,3 @@ export interface StudyDashboardResponse {
   studyActivity: StudyActivity;
   growthMetric: GrowthMetric;
 }
-
-export interface EntryListRequest {
-  groupStudyId: number;
-  page: number;
-  size: number;
-  status?: 'PENDING';
-}
-
-export interface EntryStatusRequest {
-  groupStudyId: number;
-  applyId: number;
-  status: 'APPROVED' | 'REJECTED';
-}
-
-export interface ImageSizeType {
-  imageTypeName: 'ORIGINAL' | 'SMALL' | 'MEDIUM' | 'LARGE';
-  width: number | null;
-  height: number | null;
-}
-
-export interface ResizedImage {
-  resizedImageId: number;
-  resizedImageUrl: string;
-  imageSizeType: ImageSizeType;
-}
-
-export interface ProfileImage {
-  imageId: number;
-  resizedImages: ResizedImage[];
-}
-
-export interface SincerityTemp {
-  temperature: number;
-  levelId: number;
-  levelName: '1단계' | '2단계' | '3단계' | '4단계'; // 추후 서버 기준에 맞게 확장 가능
-}
-
-export interface Applicant {
-  memberId: number;
-  memberName: string;
-  profileImage: ProfileImage;
-  sincerityTemp: SincerityTemp;
-}
-
-export interface GroupStudy {
-  groupStudyId: number;
-  title: string;
-  description: string;
-}
-
-export type ApplyRole = 'LEADER' | 'PARTICIPANT';
-export type ApplyStatus = 'PENDING' | 'APPROVED' | 'REJECTED';
-
-export interface GroupStudyApply {
-  applyId: number;
-  applicantInfo: Applicant;
-  groupStudy: GroupStudy;
-  progressScore: number;
-  role: ApplyRole;
-  lastAccessed: string;
-  answer: string[];
-  status: ApplyStatus;
-  processedAt: string | null;
-  reason: string | null;
-  createdAt: string;
-  updatedAt: string;
-}
-
-export interface GroupStudyApplyListResponse {
-  content: GroupStudyApply[];
-  page: number;
-  size: number;
-  totalElements: number;
-  totalPages: number;
-  hasNext: boolean;
-  hasPrevious: boolean;
-}

src/features/my-page/ui/applicant-list.tsx

@@ -0,0 +1,24 @@
+'use client';
+import React from 'react';
+
+import { useApplicantsByStatusQuery } from '@/features/application/model/use-applicant-qeury';
+import ProfileCard from './profile-card';
+
+export default function ApplicantList() {
+  const { data } = useApplicantsByStatusQuery({
+    groupStudyId: 1,
+    status: 'PENDING',
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-500">
+      {data?.pages.map((page, pageIndex) => (
+        <React.Fragment key={pageIndex}>
+          {page.content.map((applicant) => (
+            <ProfileCard key={applicant.applyId} data={applicant} />
+          ))}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

src/features/my-page/ui/entry-card.tsx → src/features/my-page/ui/profile-card.tsx

@@ -4,9 +4,9 @@ import React from 'react';
 import { getSincerityPresetByLevelName } from '@/shared/config/sincerity-temp-presets';
 import { cn } from '@/shared/shadcn/lib/utils';
 import Button from '@/shared/ui/button';
-import { GroupStudyApply } from '../api/types';
+import { GroupStudyApply } from '@/features/application/api/type';
 
-export default function EntryCard(props: { data: GroupStudyApply }) {
+export default function ProfileCard(props: { data: GroupStudyApply }) {
   const { data: applicant } = props;
   const temperPreset = getSincerityPresetByLevelName(
     applicant.applicantInfo.sincerityTemp.levelName as string,
@@ -33,8 +33,6 @@ export default function EntryCard(props: { data: GroupStudyApply }) {
     return `${diffWeek}주 전`;
   };
 
-  const ApplicantStatus = () => {};
-
   return (
     <div className="rounded-100 flex w-full cursor-pointer flex-col gap-150 border border-[#E9EAEB] p-300">
       <div className="flex gap-150">

src/features/my-page/ui/profile-edit-modal.tsx

@@ -16,7 +16,7 @@ import MultiItemSelector from '@/shared/ui/form/multi-item-selector';
 import { BaseInput, TextAreaInput } from '@/shared/ui/input';
 import { Modal } from '@/shared/ui/modal';
 
-import { DEFAULT_OPTIONS, MBTI_OPTIONS } from '../consts/my-page-const';
+import { DEFAULT_OPTIONS, MBTI_OPTIONS } from '../const/my-page-const';
 import {
   ProfileFormSchema,
   type ProfileFormInput,

src/features/study/group/api/get-gruoup-study-detail.ts

@@ -0,0 +1,26 @@
+import { axiosInstance } from '@/shared/tanstack-query/axios';
+import {
+  GroupStudyDetailRequest,
+  GroupStudyDetailResponse,
+} from './group-study-types';
+
+// 그룹 스터디 리스트 조회
+export const getGroupStudyDetail = async (
+  params: GroupStudyDetailRequest,
+): Promise<GroupStudyDetailResponse> => {
+  const { groupStudyId } = params;
+
+  console.log('groupStudyId', groupStudyId);
+
+  try {
+    const { data } = await axiosInstance.get(`/group-studies/${groupStudyId}`);
+
+    if (data.statusCode !== 200) {
+      throw new Error('Failed to fetch group study list');
+    }
+
+    console.log('data', data);
+
+    return data.content;
+  } catch (err) {}
+};