Skip to content

Commit 0bc21f3

Browse files
game240game240
authored
Merge pull request #396 from Podo-Store/feat/resize-script-pdf
feat: 대본 열람 pdf 화면 비율에 맞게 크기 조정 및 확대 로직 수정
2 parents 39dfd9f + 1f5216b commit 0bc21f3

File tree

1 file changed

+34
-38
lines changed

1 file changed

+34
-38
lines changed

‎src/pages/work/PostView.tsx‎

Lines changed: 34 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,14 @@ const PostView: React.FC = () => {
3030
const navigate = useNavigate();
3131
const accessToken = Cookies.get("accessToken");
3232
const barHeight = window.innerHeight * 0.07; // 하단바 높이(px), 필요시 Tailwind 단위로 환산 가능
33-
const getPdfWidth = () => {
34-
const width = window.innerWidth;
35-
if (width <= 320) return 320;
36-
if (width <= 768) return width;
37-
return 653;
38-
};
33+
const getPdfWidth = () => window.innerWidth;
3934
const HEADER_HEIGHT = 179; // 헤더 높이
4035

4136
const [numPages, setNumPages] = useState<number | null>(null);
4237
const [isFooterVisible, setIsFooterVisible] = useState(false);
4338
const [isMoreBtn, setIsMoreBtn] = useState(false);
4439
const [currentPage, setCurrentPage] = useState(1);
4540
const [isControlVisible, setIsControlVisible] = useState(true);
46-
const [scale, setScale] = useState(1.0);
4741
const [pdfBlobUrl, setPdfBlobUrl] = useState<string | null>(null);
4842
const [isLiked, setIsLiked] = useState<boolean>(false);
4943
const [loading, setLoading] = useState(true);
@@ -52,6 +46,7 @@ const PostView: React.FC = () => {
5246
const [offset, setOffset] = useState(barHeight);
5347
const [pdfWidth, setPdfWidth] = useState(getPdfWidth());
5448
const [showWarningModal, setShowWarningModal] = useState(true);
49+
const [zoom, setZoom] = useState(1); // 1 = 100%
5550

5651
const lastScrollY = useRef(0);
5752
const topControlRef = useRef<HTMLDivElement>(null);
@@ -280,19 +275,19 @@ const PostView: React.FC = () => {
280275
const handleZoom = (direction: "in" | "out") => {
281276
isProgrammaticScroll.current = true;
282277

283-
setScale((prev) => {
278+
setZoom((prev) => {
284279
const next =
285280
direction === "in"
286281
? Math.min(2.0, +(prev + 0.1).toFixed(1))
287-
: Math.max(0.8, +(prev - 0.1).toFixed(1));
282+
: Math.max(0.5, +(prev - 0.1).toFixed(1));
288283
return next;
289284
});
290285

291286
// 일정 시간 후 다시 스크롤 이벤트 허용
292287
if (scrollTimeout.current) clearTimeout(scrollTimeout.current);
293288
scrollTimeout.current = setTimeout(() => {
294289
isProgrammaticScroll.current = false;
295-
}, 600); // 확대/축소에 따른 layout 변화가 마무리되는 시간
290+
}, 600);
296291
};
297292

298293
if (loading) {
@@ -335,35 +330,36 @@ const PostView: React.FC = () => {
335330
<span className="absolute z-100 w-[200vw] border border-[var(--purple7)] left-[-50%]" />
336331
</div>
337332

338-
<div className="relative w-full pt-[179px] ">
333+
<div className="relative w-full pt-[179px]">
339334
{showWarningModal && (
340335
<>
341336
<WarningModal onClose={() => setShowWarningModal(false)} />
342337
</>
343338
)}
344339
{pdfBlobUrl ? (
345-
<div className="mx-auto w-fit">
346-
<PdfDocument
347-
file={pdfBlobUrl}
348-
onLoadSuccess={onDocumentLoadSuccess}
349-
loading={<div className="mt-10 text-center">로딩 중...</div>}
350-
>
351-
{Array.from(new Array(numPages), (_, index) => (
352-
<div
353-
className="z-0 "
354-
id={`page-${index + 1}`}
355-
key={`page-${index + 1}`}
356-
>
357-
<Page
358-
pageNumber={index + 1}
359-
width={pdfWidth}
360-
scale={scale}
361-
renderTextLayer={false}
362-
renderAnnotationLayer={false}
363-
/>
364-
</div>
365-
))}
366-
</PdfDocument>
340+
<div className="w-screen overflow-x-auto">
341+
<div className="mx-auto w-fit">
342+
<PdfDocument
343+
file={pdfBlobUrl}
344+
onLoadSuccess={onDocumentLoadSuccess}
345+
loading={<div className="mt-10 text-center">로딩 중...</div>}
346+
>
347+
{Array.from(new Array(numPages), (_, index) => (
348+
<div
349+
className="z-0"
350+
id={`page-${index + 1}`}
351+
key={`page-${index + 1}`}
352+
>
353+
<Page
354+
pageNumber={index + 1}
355+
width={pdfWidth * zoom}
356+
renderTextLayer={false}
357+
renderAnnotationLayer={false}
358+
/>
359+
</div>
360+
))}
361+
</PdfDocument>
362+
</div>
367363
</div>
368364
) : (
369365
<div className="mt-10 text-center">PDF를 불러오는 중입니다...</div>
@@ -414,16 +410,16 @@ const PostView: React.FC = () => {
414410
>
415411
<path
416412
d="M13.5938 9.375H6.40625C6.32031 9.375 6.25 9.44531 6.25 9.53125V10.4688C6.25 10.5547 6.32031 10.625 6.40625 10.625H13.5938C13.6797 10.625 13.75 10.5547 13.75 10.4688V9.53125C13.75 9.44531 13.6797 9.375 13.5938 9.375Z"
417-
fill={`${scale === 0.8 ? "#BABABA" : "black"}`}
413+
fill={`${zoom === 0.5 ? "#BABABA" : "black"}`}
418414
/>
419415
<path
420416
d="M10 1.25C5.16797 1.25 1.25 5.16797 1.25 10C1.25 14.832 5.16797 18.75 10 18.75C14.832 18.75 18.75 14.832 18.75 10C18.75 5.16797 14.832 1.25 10 1.25ZM10 17.2656C5.98828 17.2656 2.73438 14.0117 2.73438 10C2.73438 5.98828 5.98828 2.73438 10 2.73438C14.0117 2.73438 17.2656 5.98828 17.2656 10C17.2656 14.0117 14.0117 17.2656 10 17.2656Z"
421-
fill={`${scale === 0.8 ? "#BABABA" : "black"}`}
417+
fill={`${zoom === 0.5 ? "#BABABA" : "black"}`}
422418
/>
423419
</svg>
424420
</button>
425421
<span className="p-large-medium ">
426-
{Math.round(scale * 100)}%
422+
{Math.round(zoom * 100)}%
427423
</span>
428424
<button onClick={() => handleZoom("in")}>
429425
<svg
@@ -435,11 +431,11 @@ const PostView: React.FC = () => {
435431
>
436432
<path
437433
d="M13.5938 9.375H10.625V6.40625C10.625 6.32031 10.5547 6.25 10.4688 6.25H9.53125C9.44531 6.25 9.375 6.32031 9.375 6.40625V9.375H6.40625C6.32031 9.375 6.25 9.44531 6.25 9.53125V10.4688C6.25 10.5547 6.32031 10.625 6.40625 10.625H9.375V13.5938C9.375 13.6797 9.44531 13.75 9.53125 13.75H10.4688C10.5547 13.75 10.625 13.6797 10.625 13.5938V10.625H13.5938C13.6797 10.625 13.75 10.5547 13.75 10.4688V9.53125C13.75 9.44531 13.6797 9.375 13.5938 9.375Z"
438-
fill={`${scale === 2.0 ? "#BABABA" : "black"}`}
434+
fill={`${zoom === 2.0 ? "#BABABA" : "black"}`}
439435
/>
440436
<path
441437
d="M10 1.25C5.16797 1.25 1.25 5.16797 1.25 10C1.25 14.832 5.16797 18.75 10 18.75C14.832 18.75 18.75 14.832 18.75 10C18.75 5.16797 14.832 1.25 10 1.25ZM10 17.2656C5.98828 17.2656 2.73438 14.0117 2.73438 10C2.73438 5.98828 5.98828 2.73438 10 2.73438C14.0117 2.73438 17.2656 5.98828 17.2656 10C17.2656 14.0117 14.0117 17.2656 10 17.2656Z"
442-
fill={`${scale === 2.0 ? "#BABABA" : "black"}`}
438+
fill={`${zoom === 2.0 ? "#BABABA" : "black"}`}
443439
/>
444440
</svg>
445441
</button>

0 commit comments

Comments
 (0)