From 864ad4ac41a93b5a601afcd5a3e36b5541ef531b Mon Sep 17 00:00:00 2001 From: JeongwooSeo <98446924+ShipFriend0516@users.noreply.github.com> Date: Sat, 30 Aug 2025 00:49:59 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=84=A4=EB=AA=85=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=9D=B4?= =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=B0=91=EC=97=90=20=EB=A0=8C=EB=8D=94?= =?UTF-8?q?=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/entities/post/detail/PostBody.tsx | 41 +++++++++++++++++++++++++++ app/globals.css | 11 ++++++- 2 files changed, 51 insertions(+), 1 deletion(-) diff --git a/app/entities/post/detail/PostBody.tsx b/app/entities/post/detail/PostBody.tsx index 5a654ef..21cd935 100644 --- a/app/entities/post/detail/PostBody.tsx +++ b/app/entities/post/detail/PostBody.tsx @@ -42,6 +42,42 @@ const PostBody = ({ content, tags, loading }: Props) => { } }; + const addDescriptionUnderImage = ( + node: any, + index?: number, + parent?: Element + ) => { + if (node.type === 'element' && node.tagName === 'img') { + const altText = node.properties.alt; + if (altText) { + const descriptionNode = { + type: 'element', + tagName: 'span', + properties: { + className: 'image-description', + }, + children: [ + { + type: 'text', + value: altText, + }, + ], + }; + + if ( + index !== undefined && + parent && + parent.children && + Array.isArray(parent.children) + ) { + parent.children.splice(index + 1, 0, descriptionNode); + } + } + } + + return null; + }; + const renderOpenGraph = (node: any, index?: number, parent?: Element) => { if (node.type === 'element' && node.tagName === 'p' && node.children) { const aTag = node.children.find( @@ -253,6 +289,11 @@ const PostBody = ({ content, tags, loading }: Props) => { parent as Element | undefined ); addImageClickHandler(node); + addDescriptionUnderImage( + node, + index, + parent as Element | undefined + ); }} /> diff --git a/app/globals.css b/app/globals.css index 930e76f..48c594c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -82,7 +82,7 @@ article.post .post-body p:has(img) { } article.post .post-body img { - max-width: 100%; + max-width: 80%; height: auto; margin: 1em 0; border-radius: 1em; @@ -175,6 +175,15 @@ article.post .post-body pre { box-shadow: 0 0 4px rgba(0, 0, 0, 0.05); } +article.post .image-description { + text-align: center; + font-size: 0.75em; + color: var(--text-weak); + margin-top: -0.5em; + margin-bottom: 1em; + display: block; +} + .shadow-top { box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), From d5eeb2beab6ef466a13945bad7f205871013dccd Mon Sep 17 00:00:00 2001 From: JeongwooSeo <98446924+ShipFriend0516@users.noreply.github.com> Date: Sat, 30 Aug 2025 00:50:57 +0900 Subject: [PATCH 2/4] =?UTF-8?q?style:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=B5=9C=EB=8C=80=20=ED=81=AC=EA=B8=B0=2090%=EB=A1=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/globals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/globals.css b/app/globals.css index 48c594c..ad2507a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -82,7 +82,7 @@ article.post .post-body p:has(img) { } article.post .post-body img { - max-width: 80%; + max-width: 90%; height: auto; margin: 1em 0; border-radius: 1em; From f24a459d136aaa1345d724a7b4e89686a028d602 Mon Sep 17 00:00:00 2001 From: JeongwooSeo <98446924+ShipFriend0516@users.noreply.github.com> Date: Sat, 30 Aug 2025 00:53:07 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20div=EB=A1=9C=20=ED=95=9C=EB=B2=88?= =?UTF-8?q?=20=EA=B0=90=EC=8B=BC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=9D=98=20?= =?UTF-8?q?=ED=81=AC=EA=B8=B0=EB=8A=94=2050%=EB=A1=9C=20=EC=A0=9C=ED=95=9C?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/globals.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/globals.css b/app/globals.css index ad2507a..c655b22 100644 --- a/app/globals.css +++ b/app/globals.css @@ -89,6 +89,10 @@ article.post .post-body img { box-shadow: 0 0 4px rgba(0, 0, 0, 0.05); } +article.post .post-body div > div img { + max-width: 50%; +} + article.post .post-body .zoomBox img { border-radius: 0; } From 09d43608afb2302d1fd0b3bbf219d1c14bf5a25f Mon Sep 17 00:00:00 2001 From: JeongwooSeo <98446924+ShipFriend0516@users.noreply.github.com> Date: Sat, 30 Aug 2025 01:07:29 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor:=20Overlay=20HOC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20maxWidth=20Prop=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=EB=A1=9C=20=EC=B5=9C=EB=8C=80=EB=84=88?= =?UTF-8?q?=EB=B9=84=20=EC=9C=A0=EC=97=B0=ED=95=98=EA=B2=8C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Overlay/Image/ImageZoomOverlayContainer.tsx | 4 ++-- app/entities/common/Overlay/Overlay.tsx | 8 +++++++- app/entities/post/detail/PostBody.tsx | 6 +++++- app/globals.css | 4 ++++ 4 files changed, 18 insertions(+), 4 deletions(-) diff --git a/app/entities/common/Overlay/Image/ImageZoomOverlayContainer.tsx b/app/entities/common/Overlay/Image/ImageZoomOverlayContainer.tsx index 41b0ae1..2a3d7bb 100644 --- a/app/entities/common/Overlay/Image/ImageZoomOverlayContainer.tsx +++ b/app/entities/common/Overlay/Image/ImageZoomOverlayContainer.tsx @@ -14,7 +14,7 @@ const ImageZoomOverlayContainer = ({ if (!selectedImage) return null; return ( -
+
); diff --git a/app/entities/common/Overlay/Overlay.tsx b/app/entities/common/Overlay/Overlay.tsx index e084823..45089ae 100644 --- a/app/entities/common/Overlay/Overlay.tsx +++ b/app/entities/common/Overlay/Overlay.tsx @@ -4,11 +4,13 @@ interface OverlayProps { overlayOpen: boolean; setOverlayOpen: (open: boolean) => void; children: ReactNode; + maxWidth?: 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | number; } const Overlay = ({ overlayOpen = false, setOverlayOpen, children, + maxWidth = '2xl', }: OverlayProps) => { const overlayRef = useRef(null); useEffect(() => { @@ -24,13 +26,17 @@ const Overlay = ({ }; }, []); + const isMaxWidthTypeNumber = typeof maxWidth === 'number'; + return ( overlayOpen && (
-
+
{children}
diff --git a/app/entities/post/detail/PostBody.tsx b/app/entities/post/detail/PostBody.tsx index 21cd935..707a997 100644 --- a/app/entities/post/detail/PostBody.tsx +++ b/app/entities/post/detail/PostBody.tsx @@ -262,7 +262,11 @@ const PostBody = ({ content, tags, loading }: Props) => {
) : ( <> - + div img { max-width: 50%; } +article.post .post-body div > div.zoomBox img { + max-width: 100%; +} + article.post .post-body .zoomBox img { border-radius: 0; }