chore : API 로깅 강화

Author: 0xC0FFE2

apps/Admission-LTS/src/apis/pdfLogging/index.ts

@@ -1,4 +1,4 @@
-import type { IPdfPreviewFailedRequest, IPdfPreviewSuccessRequest } from './types';
+import type { IPdfPreviewFailedRequest, IPdfPreviewSuccessRequest, IClientErrorRequest } from './types';
 
 // PDF 미리보기 성공 로그를 Meerkat에 전송 (에러 발생 시 메인 애플리케이션에 영향 없음)
 export const sendPdfPreviewSuccess = async (data: IPdfPreviewSuccessRequest) => {
@@ -27,3 +27,17 @@ export const sendPdfPreviewFailed = async (data: IPdfPreviewFailedRequest) => {
     console.error('PDF preview failed logging failed:', error);
   }
 };
+
+// 클라이언트 에러를 Meerkat에 전송 (에러 발생 시 메인 애플리케이션에 영향 없음)
+export const sendClientError = async (data: IClientErrorRequest) => {
+  try {
+    await fetch('https://meeeeercat.ncloud.sbs/v1/error/client', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+  } catch (error) {
+    // 로깅 실패해도 무시 (메인 애플리케이션에 영향 없음)
+    console.error('Client error logging failed:', error);
+  }
+};

apps/Admission-LTS/src/apis/pdfLogging/types.ts

@@ -8,3 +8,15 @@ export interface IPdfPreviewFailedRequest {
   sessionId: string;
   errorMessage: string;
 }
+
+export interface IClientErrorRequest {
+  sessionId: string;
+  pageType: 'ADMIN' | 'USER';
+  errorCategory: string;
+  errorCode: string;
+  message: string;
+  stackTrace?: string;
+  pageUrl: string;
+  componentName: string;
+  userAction?: string;
+}

apps/Admission-LTS/src/pages/applicationCheck/ApplicationPreview.tsx

@@ -7,17 +7,12 @@ import { sendPdfPreviewSuccess, sendPdfPreviewFailed, sendClientError } from '..
 import { useApplicationData } from '@entry/ui';
 import { convertGradeToScore } from '../../hooks';
 import { toast } from 'react-toastify';
-import { Document, Page, pdfjs } from 'react-pdf';
-import workerUrl from 'pdfjs-dist/build/pdf.worker.min.js?url';
-
-// PDF worker 설정을 컴포넌트 외부에서 초기화
-pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
 
 export const ApplicationPreview = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
-  const [numPages, setNumPages] = useState<number | null>(null);
   const hasFetched = useRef(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const formatDate = (arr: (number|string)[], graduationType: string) => {
     // 검정고시는 null 반환
@@ -360,46 +355,30 @@ export const ApplicationPreview = () => {
           </NoticeText>
           <ApplicationContainer>
             {pdfUrl ? (
-              <PdfViewport>
-                <Document
-                  file={pdfUrl}
-                  loading={<Text color={colors.gray[400]}>PDF 로딩중...</Text>}
-                  error={<Text color={colors.gray[400]}>PDF 로딩 실패</Text>}
-                  onLoadError={(error) => {
-                    console.error('PDF 로딩 오류:', error);
-                    toast.error('PDF 로딩 실패');
+              <PdfIframe
+                ref={iframeRef}
+                src={pdfUrl}
+                title="PDF 미리보기"
+                onLoad={() => {
+                  console.log('PDF 로딩 완료');
+                }}
+                onError={(e) => {
+                  console.error('PDF 로딩 오류:', e);
+                  toast.error('PDF 로딩 실패');
 
-                    // PDF 렌더링 오류를 클라이언트 에러로 전송
-                    sendClientError({
-                      sessionId: sessionIdRef.current,
-                      pageType: 'USER',
-                      errorCategory: 'PDF_RENDER_ERROR',
-                      errorCode: 'ERR_PDF_LOAD',
-                      message: error?.message || 'PDF 렌더링 실패',
-                      stackTrace: error?.stack,
-                      pageUrl: window.location.pathname,
-                      componentName: 'ApplicationPreview',
-                      userAction: 'PDF_PREVIEW',
-                    });
-                  }}
-                  onLoadSuccess={(info: { numPages: number }) => setNumPages(info.numPages)}
-                  options={{
-                    standardFontDataUrl: 'https://unpkg.com/[email protected]/standard_fonts/',
-                    cMapUrl: 'https://unpkg.com/[email protected]/cmaps/',
-                    cMapPacked: true,
-                  }}
-                >
-                  {Array.from(new Array(numPages || 0), (_el, index) => (
-                    <Page
-                      key={`page_${index + 1}`}
-                      pageNumber={index + 1}
-                      width={794}
-                      renderTextLayer={false}
-                      renderAnnotationLayer={false}
-                    />
-                  ))}
-                </Document>
-              </PdfViewport>
+                  // PDF 렌더링 오류를 클라이언트 에러로 전송
+                  sendClientError({
+                    sessionId: sessionIdRef.current,
+                    pageType: 'USER',
+                    errorCategory: 'PDF_RENDER_ERROR',
+                    errorCode: 'ERR_PDF_LOAD',
+                    message: 'PDF iframe 로딩 실패',
+                    pageUrl: window.location.pathname,
+                    componentName: 'ApplicationPreview',
+                    userAction: 'PDF_PREVIEW',
+                  });
+                }}
+              />
             ) : (
               <Text color={colors.gray[400]}>PDF를 불러올 수 없습니다.</Text>
             )}
@@ -420,29 +399,20 @@ const Container = styled.div`
 const ApplicationContainer = styled.div`
   width: 100%;
   background-color: ${colors.gray[400]};
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 24px 140px;
   box-sizing: border-box;
-  max-height: 80vh;
-  overflow-y: auto;
+  min-height: 80vh;
 `;
 
-const PdfViewport = styled.div`
+const PdfIframe = styled.iframe`
   width: 100%;
-  max-width: 794px;
+  height: 80vh;
+  border: none;
   background-color: ${colors.extra.realWhite};
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 20px 0;
-  margin: 0 auto;
-  canvas {
-    max-width: 100%;
-    height: auto !important;
-    margin: 0 auto;
-    display: block;
-  }
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 `;
 
 const ApplicationLoadingContainer = styled(Skeleton)`