feat: add pdf viewer logic and portfolio link

GSM-MSG · Jul 11, 2024 · 8b0c21b · 8b0c21b
1 parent 5630610
commit 8b0c21b
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 18 deletions.
diff --git a/packages/app/src/features/student/molecules/PDFViewer/index.tsx b/packages/app/src/features/student/molecules/PDFViewer/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Document, Page, pdfjs } from 'react-pdf'
+import * as S from './style'
 
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css'
 import 'react-pdf/dist/esm/Page/TextLayer.css'
@@ -9,26 +10,25 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   import.meta.url
 ).toString()
 
-const PDFViewer = () => {
+interface Props {
+  pdfUrl: string
+}
+
+const PDFViewer = ({ pdfUrl }: Props) => {
   const [numPages, setNumPages] = useState<number | null>(null)
 
   const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
     setNumPages(numPages)
   }
 
   return (
-    <div>
-      <Document
-        file={
-          'https://s3.ap-northeast-2.amazonaws.com/sms-bucket-104/sms-test-server/%2F2301_김동학_포트폴리오.pdf'
-        }
-        onLoadSuccess={onDocumentLoadSuccess}
-      >
-        {Array.from(new Array(numPages), (el, index) => (
+    <S.Wrapper>
+      <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess}>
+        {Array.from(new Array(numPages), (_, index) => (
           <Page key={`page_${index + 1}`} pageNumber={index + 1} />
         ))}
       </Document>
-    </div>
+    </S.Wrapper>
   )
 }
 

diff --git a/packages/app/src/features/student/molecules/PDFViewer/style.ts b/packages/app/src/features/student/molecules/PDFViewer/style.ts
@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+export const Wrapper = styled.div`
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 2rem 0 0 0;
+`
+export const PDFWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`
diff --git a/packages/app/src/features/student/molecules/StudentDetail/index.tsx b/packages/app/src/features/student/molecules/StudentDetail/index.tsx
@@ -6,6 +6,7 @@ import StudentInfo from '@features/student/atoms/StudentInfo'
 import ProfileSharingModal from '@features/student/molecules/ProfileSharingModal'
 import { BlurPortal } from '@features/modal/portals'
 import useLoggedInQuery from '@features/auth/queries/useLoggedInQuery'
+import { useModal } from '@features/modal/hooks'
 import * as S from './style'
 import Role from '@/types/Role'
 
@@ -17,6 +18,10 @@ interface Props {
 const StudentDetail = ({ student, studentId }: Props) => {
   const { data } = useLoggedInQuery()
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const { onClose } = useModal()
+  const portfolioUrl =
+    student?.portfolioUrl ||
+    (student?.portfolioFileUrl ? `/student/${studentId}/portfolio` : null)
 
   const toggleModal = () => {
     setIsModalOpen(!isModalOpen)
@@ -47,8 +52,10 @@ const StudentDetail = ({ student, studentId }: Props) => {
       <PrizesDetail prizes={student?.prizes} />
       <ProjectDetail projects={student?.projects} />
       <S.PortfolioWrapper>
-        {student?.portfolioUrl && (
-          <S.PortfolioButton href='/'>포트폴리오</S.PortfolioButton>
+        {portfolioUrl && (
+          <S.PortfolioButton onClick={() => onClose()} href={portfolioUrl}>
+            포트폴리오
+          </S.PortfolioButton>
         )}
         {data?.isLoggedIn && data.role === Role.ROLE_HOMEROOM && (
           <S.ShareButton onClick={toggleModal}>공유</S.ShareButton>

diff --git a/packages/app/src/features/student/templates/PortfolioTemplate/index.tsx b/packages/app/src/features/student/templates/PortfolioTemplate/index.tsx
@@ -1,10 +1,14 @@
 import PDFViewer from '@features/student/molecules/PDFViewer'
 import * as S from './style'
 
-const PortfolioTemplate = () => {
+interface Props {
+  portfolioFileUrl: string | undefined
+}
+
+const PortfolioTemplate = ({ portfolioFileUrl }: Props) => {
   return (
     <S.Wrapper>
-      <PDFViewer />
+      {portfolioFileUrl ? <PDFViewer pdfUrl={portfolioFileUrl} /> : null}
     </S.Wrapper>
   )
 }

diff --git a/packages/app/src/features/student/templates/PortfolioTemplate/style.ts b/packages/app/src/features/student/templates/PortfolioTemplate/style.ts
@@ -2,6 +2,6 @@ import styled from '@emotion/styled'
 
 export const Wrapper = styled.div`
   width: 100%;
-  height: 100%;
   display: flex;
+  background: var(--N10);
 `
diff --git a/packages/app/src/pages/student/[studentId]/portfolio.tsx b/packages/app/src/pages/student/[studentId]/portfolio.tsx
@@ -11,20 +11,22 @@ const StudentDetailPortfolioPage = () => {
   const { data, isFetched } = useStudentDetailQuery({ studentId })
 
   useEffect(() => {
-    if ((!data || typeof studentId !== 'string') && isFetched) {
+    if (
+      (!data?.portfolioFileUrl || typeof studentId !== 'string') &&
+      isFetched
+    ) {
       router.push('/', '/')
       return
     }
   }, [])
-
   return (
     <>
       <SEO
         title={data?.name.replace('**', '소금') + ' 포트폴리오'}
         description={data?.introduce}
         image={data?.profileImgUrl}
       />
-      <PortfolioTemplate />
+      <PortfolioTemplate portfolioFileUrl={data?.portfolioFileUrl} />
     </>
   )
 }

diff --git a/packages/app/src/types/StudentDetail.d.ts b/packages/app/src/types/StudentDetail.d.ts
@@ -10,6 +10,7 @@ interface StudentDetail {
   introduce: string
   dreamBookFileUrl?: string
   portfolioUrl?: string // null 가능
+  portfolioFileUrl?: string
   grade?: number
   classNum?: number
   number?: number