fix(post): 상세 섹션 패딩 중복 제거

- 레이아웃 그리드 패딩과 섹션 px 중복을 제거하고, 댓글 구분선은 full-bleed로 표시.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-05-11 16:34:01 +09:00
parent 1b00dac21c
commit 2cb5c1a281
4 changed files with 16 additions and 10 deletions

View File

@@ -212,8 +212,8 @@ useHead(() => ({
<template>
<div class="post-detail">
<section class="px-4 mt-6 mb-8 sm:px-5">
<div class="mx-auto flex max-w-[720px] flex-col gap-2.5">
<section class="mt-6 mb-8">
<div class="mx-auto flex max-w-[720px] flex-col gap-2.5 px-4 sm:px-5">
<h1 class="text-xl font-semibold leading-[1.125] sm:text-2xl">
{{ post.title }}
</h1>
@@ -266,16 +266,16 @@ useHead(() => ({
</div>
</section>
<section class="px-4 sm:px-5">
<div class="mx-auto max-w-[720px]">
<section>
<div class="mx-auto max-w-[720px] px-4 sm:px-5">
<ContentRenderer>
<ContentMarkdownRenderer class="post-detail__content" :content="post.content" />
</ContentRenderer>
</div>
</section>
<section id="comments" class="mb-6 border-y border-[var(--site-line)] bg-[var(--site-panel-strong)] px-5 py-5 scroll-mt-14 sm:px-6">
<div class="mx-auto max-w-[720px] text-sm">
<section id="comments" class="mb-6 border-y border-[var(--site-line)] bg-[var(--site-panel-strong)] py-5 scroll-mt-14">
<div class="mx-auto max-w-[720px] px-4 text-sm sm:px-5">
<p class="font-medium">Comments</p>
<p class="mt-2 site-muted">
댓글 UI는 추후 연결 예정입니다.
@@ -283,8 +283,8 @@ useHead(() => ({
</div>
</section>
<section class="mb-6 px-5 sm:px-6" aria-label="Previous and next post">
<div class="mx-auto max-w-[720px]">
<section class="mb-6" aria-label="Previous and next post">
<div class="mx-auto max-w-[720px] px-4 sm:px-5">
<div class="grid gap-4 text-sm font-medium leading-tight md:grid-cols-2">
<NuxtLink v-if="previousPost" :to="previousPost.to" class="flex flex-col items-start gap-1 hover:opacity-75">
<span class="flex items-center gap-1 text-[0.7rem] font-medium uppercase opacity-75 site-muted">