From 907a4d5ad71aa9a9faba32acc20840cd4e748087 Mon Sep 17 00:00:00 2001 From: Malloc72P Date: Mon, 29 Jun 2026 22:29:33 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix(blog):=20#118=20=EB=B3=B8=EB=AC=B8=20?= =?UTF-8?q?=ED=92=80=ED=8F=AD=C2=B7=EC=9D=B8=EB=9D=BC=EC=9D=B8=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=ED=9A=8C=EC=83=89=20=EB=B0=B0=EA=B2=BD=C2=B7?= =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=A4=84=EA=B0=84=EA=B2=A9=20?= =?UTF-8?q?=EB=B3=B5=EC=9B=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 세 가지 스타일 회귀를 원인 커밋 기준으로 바로잡는다. 1. 본문 단락 풀폭 (원인: #70 0b0d8d1) p { max-width: 70ch }가 본문을 약 70자 폭으로 가둬 1024px 칼럼 좌측에 쏠려 보였다. 데스크톱 70ch와 그 짝인 모바일 max-width:none을 함께 제거해 단락이 본문 칼럼 전체 폭을 쓰도록 복원한다. 2. 인라인 코드 회색 배경 (원인: #96 ebf8e35) rehype-pretty-code 옵션 defaultLang을 문자열 'text'로 주면 코드블록뿐 아니라 인라인 코드(백틱 1개)의 기본 언어로도 적용된다. 그 결과 shiki가 인라인 코드를 github-dark로 하이라이팅하고 keepBackground가 다크 배경을 inline style로 주입해 CSS의 --color-gray-100(연회색)을 덮었다. defaultLang: { block: 'text' }로 한정해 코드블록 라인넘버 동작은 유지하면서 인라인 코드는 plain 로 남겨 회색 배경을 회복한다. 3. 모바일 본문 줄간격 (원인: #70 0b0d8d1) 모바일 폰트를 12→14px로 키우면서 line-height는 20→22px에 그쳐 줄간격 비율이 1.67→1.57로 좁아졌다. 데스크톱(28px/16px≈1.75)과 같은 비율이 되도록 25px로 복원한다. Co-Authored-By: Claude Opus 4.8 --- apps/blog/next.config.mjs | 4 +++- .../src/components/post-detail/post-detail.module.scss | 8 +++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/blog/next.config.mjs b/apps/blog/next.config.mjs index b9a003b..6cdcdb3 100644 --- a/apps/blog/next.config.mjs +++ b/apps/blog/next.config.mjs @@ -18,7 +18,9 @@ const withMDX = createMDX({ keepBackground: true, // 언어를 명시하지 않은 코드블록도 동일하게 grid/라인 처리되도록 기본 언어를 지정한다. // (이전 Prism 구현은 모든 블록에 라인넘버를 붙였으므로 그 동작을 보존한다.) - defaultLang: 'text', + // block 키로 한정한다: 문자열로 주면 인라인 코드(백틱 1개)에도 적용돼 + // shiki가 다크 배경을 inline style로 주입(keepBackground) → 회색 배경이 덮인다. + defaultLang: { block: 'text' }, }, ], ], diff --git a/apps/blog/src/components/post-detail/post-detail.module.scss b/apps/blog/src/components/post-detail/post-detail.module.scss index 8b90ee5..31c9770 100644 --- a/apps/blog/src/components/post-detail/post-detail.module.scss +++ b/apps/blog/src/components/post-detail/post-detail.module.scss @@ -23,9 +23,6 @@ padding-bottom: 24px; line-height: 28px; word-break: keep-all; - // 데스크톱에서 한 줄이 지나치게 길어지지 않도록 가독 권장 폭(약 70자)으로 제한한다. - // 코드블록/이미지/표는 아래에서 풀폭을 유지하므로 영향받지 않는다. - max-width: 70ch; } ul, @@ -137,10 +134,11 @@ p { padding-top: 8px; padding-bottom: 12px; - line-height: 22px; + // 본문 14px 기준 가독 line-height. 폰트가 12→14px로 커졌는데 22px에 머물러 + // 줄간격 비율이 좁아졌던 것을 데스크톱(28px/16px≈1.75)과 같은 비율로 복원한다. + line-height: 25px; font-size: 14px; // 모바일 가독성을 위해 12px에서 14px로 상향 word-break: keep-all; - max-width: none; // 모바일은 화면이 좁아 측정폭 제한이 불필요하므로 해제 } ul, From 9328eb594cd6e69aeae462d812b718ffe997e0ad Mon Sep 17 00:00:00 2001 From: Malloc72P Date: Mon, 29 Jun 2026 22:39:19 +0900 Subject: [PATCH 2/2] =?UTF-8?q?docs(blog):=20#118=20=EB=A6=AC=EB=B7=B0=20?= =?UTF-8?q?=EB=B0=98=EC=98=81=20=E2=80=94=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?line-height=20=EC=A3=BC=EC=84=9D=20=EB=B9=84=EC=9C=A8=20?= =?UTF-8?q?=ED=91=9C=EA=B8=B0=20=EB=B3=B4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 리뷰 nit: 적용값 25px/14px≈1.79를 데스크톱과 '같은 비율(1.75)'이라 적었으나 실제로는 근사이므로, 주석을 '데스크톱 비율(1.75)에 근접(≈1.79)'으로 정정한다. 값(25px) 자체는 픽셀 정합·가독성상 유지한다. Co-Authored-By: Claude Opus 4.8 --- apps/blog/src/components/post-detail/post-detail.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/blog/src/components/post-detail/post-detail.module.scss b/apps/blog/src/components/post-detail/post-detail.module.scss index 31c9770..dce9bd1 100644 --- a/apps/blog/src/components/post-detail/post-detail.module.scss +++ b/apps/blog/src/components/post-detail/post-detail.module.scss @@ -135,7 +135,7 @@ padding-top: 8px; padding-bottom: 12px; // 본문 14px 기준 가독 line-height. 폰트가 12→14px로 커졌는데 22px에 머물러 - // 줄간격 비율이 좁아졌던 것을 데스크톱(28px/16px≈1.75)과 같은 비율로 복원한다. + // 줄간격 비율이 1.57로 좁아졌던 것을, 데스크톱 비율(28px/16px≈1.75)에 근접하게 복원한다(25/14≈1.79). line-height: 25px; font-size: 14px; // 모바일 가독성을 위해 12px에서 14px로 상향 word-break: keep-all;