feature(graduation): 파일 미리보기 기능 구현

apps/community/next.config.ts

@@ -43,6 +43,14 @@ const nextConfig: NextConfig = {
     '@aics-client/design-system',
     '@aics-client/design-system/styles',
   ],
+  webpack: (config) => {
+    // canvas는 jsdom의 서버 전용 네이티브 의존성이므로 클라이언트 번들에서 제외
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      canvas: false,
+    };
+    return config;
+  },
 };
 
 export default withVanillaExtract(nextConfig);

apps/graduate/package.json

@@ -13,6 +13,8 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "@react-pdf-viewer/core": "^3.12.0",
+    "@react-pdf-viewer/default-layout": "^3.12.0",
     "@tanstack/react-devtools": "^0.7.0",
     "@tanstack/react-query": "^5.74.4",
     "@tanstack/react-query-devtools": "^5.74.6",
@@ -26,6 +28,7 @@
     "dayjs": "^1.11.18",
     "lucide-react": "^0.503.0",
     "motion": "^12.23.24",
+    "pdfjs-dist": "3.11.174",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.56.1",

apps/graduate/src/pages/admin/all/types/allManagement.ts

@@ -29,4 +29,5 @@ export interface StageData {
   createdAt: string | null;
   isSubmitted: boolean;
   isApproved: boolean;
+  fileId: number | null;
 }

apps/graduate/src/pages/admin/all/ui/AllManagementPage.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import { useSearch, useNavigate } from '@tanstack/react-router';
+import { useState, useEffect } from 'react';
 
 import { DataTable, Header, Pagination, Toolbar } from '~/shared/components';
 import {
@@ -26,6 +27,8 @@ import { extractPeriodData, getStatusLabel } from '../utils';
 import UserDetailModal from './UserDetailModal.tsx';
 
 export default function AllManagementPage() {
+  const navigate = useNavigate();
+  const searchParams = useSearch({ from: '/_afterLogin/all' });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
@@ -34,6 +37,18 @@ export default function AllManagementPage() {
   const { toast, confirm } = useToast();
   const [selectedStudentId, setSelectedStudentId] = useState<number>();
 
+  useEffect(() => {
+    if (searchParams?.graduationUserId) {
+      setSelectedStudentId(Number(searchParams.graduationUserId));
+      setIsModalOpen(true);
+      navigate({
+        to: '/all',
+        search: {},
+        replace: true,
+      });
+    }
+  }, [searchParams, navigate]);
+
   const { data: schedules, error: scheduleError } = useScheduleList();
 
   if (scheduleError) {

apps/graduate/src/pages/admin/all/ui/UserDetailModal.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from '@tanstack/react-router';
 import { Descriptions, Modal, Spin, Table } from 'antd';
 
 import { Header } from '~/shared/components';
@@ -27,6 +28,7 @@ export default function UserDetailModal({
   graduationUserId,
   period,
 }: UserDetailModalProps) {
+  const navigate = useNavigate();
   const {
     data: studentDetail,
     isLoading,
@@ -50,27 +52,32 @@ export default function UserDetailModal({
       dataIndex: 'stage',
       key: 'stage',
       render: (_: string, record: StageData) => {
-        if (record.isSubmitted) {
-          return (
-            <button
-              type='button'
-              style={{
-                background: 'none',
-                border: 'none',
-                padding: 0,
-                cursor: 'pointer',
-                color: vars.colors.main,
-                textDecoration: 'underline',
-              }}
-              onClick={() => {
-                console.log('미리보기 구현');
-              }}
-            >
-              {record.stage}
-            </button>
-          );
-        }
-        return record.stage;
+        return record.isSubmitted && status ? (
+          <button
+            type='button'
+            style={{
+              background: 'none',
+              border: 'none',
+              padding: 0,
+              cursor: 'pointer',
+              color: vars.colors.main,
+              textDecoration: 'underline',
+            }}
+            onClick={() => {
+              navigate({
+                to: '/file-preview',
+                search: {
+                  fileId: record.fileId!,
+                  type: status.type,
+                },
+              });
+            }}
+          >
+            {record.stage}
+          </button>
+        ) : (
+          <span>{record.stage}</span>
+        );
       },
     },
     { title: '일정', dataIndex: 'period', key: 'period' },
@@ -133,17 +140,15 @@ export default function UserDetailModal({
           </Descriptions>
         </Container>
 
-        {status && (
-          <Container style={{ padding: '0px' }}>
-            <Table
-              dataSource={stageData}
-              columns={columns}
-              pagination={false}
-              bordered
-              rowKey='key'
-            />
-          </Container>
-        )}
+        <Container style={{ padding: '0px' }}>
+          <Table
+            dataSource={stageData}
+            columns={columns}
+            pagination={false}
+            bordered
+            rowKey='key'
+          />
+        </Container>
       </>
     );
   };

apps/graduate/src/pages/admin/all/utils/buildStageData.ts

@@ -27,6 +27,7 @@ export function buildStageData(
         createdAt: status.certificate.createdAt,
         isSubmitted: status.certificate.submitted,
         isApproved: status.certificate.approval,
+        fileId: status.certificate.fileId,
       },
     ];
   } else {
@@ -38,6 +39,7 @@ export function buildStageData(
         createdAt: status.midThesis.createdAt,
         isSubmitted: status.midThesis.submitted,
         isApproved: status.midThesis.approval,
+        fileId: status.midThesis.fileId,
       },
       {
         key: 'finalthesis',
@@ -46,6 +48,7 @@ export function buildStageData(
         createdAt: status.finalThesis.createdAt,
         isSubmitted: status.finalThesis.submitted,
         isApproved: status.finalThesis.approval,
+        fileId: status.finalThesis.fileId,
       },
     ];
   }

apps/graduate/src/pages/admin/filePreview/hooks/index.ts

@@ -0,0 +1 @@
+export { useFile } from './useFile';

apps/graduate/src/pages/admin/filePreview/hooks/useFile.ts

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCertificateFile, getThesisFile } from '~/shared/api/file';
+import { KEYS } from '~/shared/constants';
+
+import { transformCertificateResponse } from '../util/transformCertificateFileResponse';
+import { transformThesisResponse } from '../util/transformThesisFileResponse';
+
+type FileType = 'CERTIFICATE' | 'THESIS';
+
+export function useFile(fileId: number, type: FileType) {
+  return useQuery({
+    queryKey: [KEYS.STUDENT_FILE, type.toLowerCase(), fileId],
+    queryFn: async () => {
+      if (type === 'CERTIFICATE') {
+        const response = await getCertificateFile(fileId);
+        return transformCertificateResponse(response.data);
+      } else {
+        const response = await getThesisFile(fileId);
+        return transformThesisResponse(response.data);
+      }
+    },
+    enabled: !!fileId,
+  });
+}

apps/graduate/src/pages/admin/filePreview/index.ts

@@ -0,0 +1 @@
+export { default as FilePreviewPage } from './ui/FilePreviewPage';

apps/graduate/src/pages/admin/filePreview/model/filePreview.ts

@@ -0,0 +1,9 @@
+export interface FileItem {
+  graduationUserid: number;
+  scheduleId: number;
+  approval: boolean;
+  file: {
+    fileId: number;
+    physicalPath: string;
+  };
+}

apps/graduate/src/pages/admin/filePreview/styles/FilePreviewContent.css.ts

@@ -0,0 +1,30 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '~/vars.css';
+
+export const loading = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  fontSize: vars.font.size.lg,
+  color: vars.colors.subText,
+});
+
+export const error = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  fontSize: vars.font.size.lg,
+  color: vars.colors.error,
+});
+
+export const empty = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  fontSize: vars.font.size.lg,
+  color: vars.colors.subDark,
+});

apps/graduate/src/pages/admin/filePreview/styles/FilePreviewToolbar.css.ts

@@ -0,0 +1,28 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '~/vars.css';
+
+export const toolbar = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gridTemplateRows: 'auto auto',
+  gap: vars.spacing.sm,
+  padding: vars.spacing.md,
+  backgroundColor: vars.colors.white,
+  border: `1px solid ${vars.colors.border}`,
+  borderRadius: vars.radius.md,
+  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+});
+
+export const infoItem = style({
+  fontSize: vars.font.size.md,
+  color: vars.colors.label,
+  fontWeight: vars.font.weight.medium,
+  display: 'flex',
+  alignItems: 'center',
+  padding: vars.spacing.xs,
+});
+
+export const button = style({
+  width: '100%',
+});

apps/graduate/src/pages/admin/filePreview/styles/PreviewPage.css.ts

@@ -0,0 +1,45 @@
+import { style } from '@vanilla-extract/css';
+
+import { vars } from '~/vars.css';
+
+export const root = style({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100vh',
+  width: '100vw',
+  overflow: 'hidden',
+  backgroundColor: vars.colors.sub,
+});
+export const container = style({
+  padding: vars.spacing.xl,
+  maxWidth: '1200px',
+  margin: '0 auto',
+});
+export const backButtonWrapper = style({
+  marginBottom: vars.spacing.sm,
+});
+
+export const filePreviewContainer = style({
+  position: 'relative',
+  width: '100%',
+  height: 'calc(100vh - 200px)',
+  overflow: 'auto',
+  backgroundColor: vars.colors.sub,
+});
+
+export const toolbarWrapper = style({
+  position: 'absolute',
+  bottom: vars.spacing.lg,
+  left: '50%',
+  transform: 'translateX(-50%)',
+  zIndex: 10,
+  transition: 'opacity 0.3s ease-in-out',
+  opacity: 1,
+  pointerEvents: 'auto',
+  selectors: {
+    '&[data-visible="false"]': {
+      opacity: 0,
+      pointerEvents: 'none',
+    },
+  },
+});