[S2]-Display Presentation PDF & images

[dusunax]

Display Presentation

route: /gallery, /gallery/[...arg]?option=*
list: list with 0 index image thumbnail

A: pdf file

• slide name is file name
• date is placed at end of the file name

B: images

• slide name is dir name
• images with file extensions '.png'
• date is placed at first of the folder name

[dusunax]

1. 이미지

이미지 경로문제 해결하기

• 현재 PPT 관련 이미지 리소스는 public 폴더가 아닌, ./sub-docs/라는 서브 모듈 디렉토리에 위치하고 있음
• Next.js는 /public 폴더를 기준으로 상대 경로를 설정한다
• 현재 sub-docs 서브모듈을 public 폴더를 이동하거나, public로 리소스를 복사하고 싶지 않음
  • => ~해결할 방안 찾기~

데이터 형태

• 디렉토리를 바탕으로 생성한 리소스 객체형태
  • filePath를 사용할 수 있음

    {
    name: 'pixel-art-for-beginner_220824',
    files: [
    '1.png',
    '2.png',
    '3.png',
    '4.png',
    '5.png',
    '6.png',
    'class-dismissed.png'
    ],
    filePath: 'sub-docs/ppts/design/pixel-art-for-beginner_220824'
    }[]

이미지 경로 작업하기

1. ❌ ~public 폴더 내의 "public/1.png"를 "/1.png"로 불러오기 - 이렇게 작업하고 싶지 않음(서브모듈 위치를 그대로 두고, 자동으로 업데이트하고, 중복 데이터 만들지 않기)~
2. ❌ public 폴더 외의 리소스를 import하여 사용하기 - 함수 내에서 list의 파일 주소를 mapping 할 것

문제해결

• 레퍼런스와 공식문서에서 api 폴더를 사용한 미들웨어 형식으로 /public이 아닌 경로에서 정적 파일을 가져오는 방법을 찾아보았으나, 의도대로 작동하지 않음.
• 1번 방안으로 작업하는 것이 오늘 내에 문제를 해결할 수 있는 방법이라 생각되어 서브모듈(리소스)의 위치를 '/public' 내부로 수정하게 되었습니다..

2. PDF

출력 방법

• iframe: 간단하고 쉬움, 브라우저 자체 처리, 일관되지 않은 뷰, 기능 제어 어려움
• embed: 간단하고 쉬움, 일부 브라우저 호환성 문제, 기능 제어 어려움 (iframe과 동일 뷰)
• 이미지로 변환 후 출력: 서버x 추가로드x
• PDF.js: 라이브러리A. 다소 복잡
• react-pdf: 라이브러리B. 리액트 특화 👈 이 방향으로 구현함

[dusunax]

240505 작업 내용

• 두 가지 형태의 파일 타겟 (1)폴더 경로 내의 png 이미지 (2) 폴더 경로 내의 단일 pdf 파일
• 두 가지 파일의 타입을 각각 FileType[]로 가져옴
  • 각 getPdfFileList(), getDirFileList() 작성
• 각 리스트 출력

상세 이슈

• 6

[dusunax]

240506 작업 내용

• slide 상세 페이지 추가
• 파일 다운로드 button 추가
• 썸네일 태그 박스 정리
• item createdAt
  • attribute 추가, 리스트 정렬 추가

상세 이슈

• 7

[dusunax]

240509 작업 내용

• 이미지 최적화
  • 로컬 이미지에 blur placeholder 추가
  • AVIF 사용하도록 설정
• 이미지 로딩 레이아웃 쉬프트 개선
  • witdh, hight 조정

상세 이슈

• 8

[dusunax]

240525 작업 내용

• PDF 슬라이드 아이템 마무리
  • 썸네일 이미지 추가, 페이지 number 제거
  • ppt 디렉토리에 typescript 슬라이드 추가
• 작업 마무리
  • react-pdf 라이브러리 제거
  • quiz 라우트 제거

상세 이슈

• 11