From 1630328f8e53e6278dc8fa0f4dbf4b77694294e0 Mon Sep 17 00:00:00 2001
From: SeongOh Park <qkrtjddh1212@naver.com>
Date: Sun, 22 May 2022 17:05:43 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20postDetail=EC=97=90=EC=84=9C=EC=9D=98?=
 =?UTF-8?q?=20=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=B7=B0=EC=96=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/board/postDetail/PostDetailPage.tsx | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/pages/board/postDetail/PostDetailPage.tsx b/src/pages/board/postDetail/PostDetailPage.tsx
index d1b3fbff..a8ccf6c1 100644
--- a/src/pages/board/postDetail/PostDetailPage.tsx
+++ b/src/pages/board/postDetail/PostDetailPage.tsx
@@ -1,6 +1,7 @@
 import { observer } from 'mobx-react-lite';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Route, Switch, useParams } from 'react-router-dom';
+import ImageViewer from 'react-simple-image-viewer';
 
 import {
   CommentInput,
@@ -31,6 +32,14 @@ const PostDetailPage: React.FC = observer(() => {
   const { fetch, reset, setScreenRef, boardName, post } = usePageUiStore<PageUiStore.PostDetail>();
   const ref = useRef<HTMLDivElement | null>(null);
 
+  const [visible, setVisible] = useState(false);
+  function openImageViewer() {
+    setVisible(true);
+  }
+  function closeImageViewer() {
+    setVisible(false);
+  }
+
   useEffect(() => {
     fetch(postId);
     return () => reset();
@@ -55,6 +64,7 @@ const PostDetailPage: React.FC = observer(() => {
               <PostAuthor model={post.author} date={post.formatedCreatedAt} />
               <div className="ql-snow">
                 <PostContent
+                  onClick={openImageViewer}
                   className="ql-editor"
                   dangerouslySetInnerHTML={{ __html: post.content }}
                 />
@@ -67,6 +77,22 @@ const PostDetailPage: React.FC = observer(() => {
             </BodyScreen>
           </PageBody>
           <CommentInput />
+
+          {console.log(post.content)}
+
+          {visible ? (
+            <ImageViewer
+              backgroundStyle={{ zIndex: 10001 }}
+              src={[
+                `${(document.querySelector('.ql-editor p img') as HTMLImageElement | null)?.src}`,
+                // TODO : post.content에서 가져와야됨
+              ]}
+              currentIndex={0}
+              disableScroll={false}
+              closeOnClickOutside={false}
+              onClose={closeImageViewer}
+            />
+          ) : null}
         </>
       ) : (
         <>{/* TODO: 페이지 스켈레톤 */}</>