v0.1.44 dev: 로컬 메일 서버 및 댓글 UI 안정화

Made-with: Cursor
2026-04-16 18:19:52 +09:00
parent d2aeeff2fe
commit c6f73c66ee
7 changed files with 38 additions and 7 deletions
--- a/assets/built/tailwind.css
+++ b/assets/built/tailwind.css
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -8,6 +8,24 @@ services:
    environment:
      url: http://localhost:2368
      NODE_ENV: development
+      mail__transport: SMTP
+      mail__from: "Ghost Local <noreply@localhost>"
+      mail__options__host: mailpit
+      mail__options__port: 1025
+      mail__options__secure: "false"
+      mail__options__ignoreTLS: "true"
+      mail__options__auth__user: ""
+      mail__options__auth__pass: ""
    volumes:
      - ./.docker/ghost/content:/var/lib/ghost/content
      - ./.docker/theme/ghost-theme-thred-clone:/var/lib/ghost/content/themes/ghost-theme-thred-clone
+    depends_on:
+      - mailpit
+
+  mailpit:
+    image: axllent/mailpit:latest
+    container_name: ghost-theme-mailpit
+    restart: unless-stopped
+    ports:
+      - "1025:1025"
+      - "8025:8025"
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -54,6 +54,7 @@ npm run dev:watch
 - `npm run dev:ghost:start`는 로컬 Ghost 컨테이너를 시작한다.
 - `npm run dev:watch`는 초기 빌드와 sync를 한 번 수행한 뒤, Tailwind watch와 파일 변경 감지 기반 theme sync를 계속 유지한다.
 - 템플릿이나 자산을 저장한 뒤 브라우저 새로고침만으로 바로 반영 상태를 확인할 수 있다.
+- 로컬 메일 확인은 Mailpit UI(`http://localhost:8025`)에서 확인한다.

 ## 로컬 스타일 빌드
 ```bash
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -17,6 +17,7 @@
 - Tailwind 기본 초기화(`preflight`)를 활성화해 브라우저 기본 마진과 폼 스타일을 리셋
 - Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드
 - `npm run dev:watch`는 초기 `dev:prepare` 실행 후 Tailwind `--watch`와 파일 변경 감지 기반 `dev:sync`를 함께 실행함
+- 로컬 Docker 구성은 Mailpit SMTP(`mailpit:1025`)를 사용하도록 설정되어 멤버/댓글 알림 메일을 로컬 수신함
 - `npm run zip:version`은 현재 `package.json` 버전명을 기준으로 업로드용 zip을 생성함
 - 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
 - 좌측 카테고리 목록은 `data-category-priority-order`에 지정한 태그 slug를 우선순위로 먼저 배치하고, 나머지는 `count.posts desc` 기본 순서를 유지한 뒤 제한 개수만 노출함
@@ -35,6 +36,7 @@
 - 각 카드 항목은 `border-b border-brd` 구분선을 유지하고, 콘텐츠 래퍼는 `min-w-0` 기준으로 줄바꿈 폭을 제어
 - 포스트 상세 헤더는 제목, 메타, 공유 버튼, 대표 이미지를 Tailwind 유틸리티 중심 마크업으로 구성하고 상단 단일 태그 라벨은 표시하지 않음
 - 포스트 본문은 `prose prose-theme` 클래스를 사용하며, Typography 플러그인 대신 Tailwind 입력 파일에서 원본 기준 타이포그래피 규칙을 직접 제공함
+- 포스트 댓글 영역은 `comments` 활성 여부를 우선 기준으로 노출하며, 활성 시 로그인 멤버는 댓글 0개 상태에서도 `{{comments}}` 입력 UI를 사용함
 - 본문 `ul`, `ol`은 전역 리스트 리셋과 별개로 `prose` 범위 안에서 실제 마커와 들여쓰기를 다시 적용함
 - 태그 배지는 `--color-accent` 기반 배경 혼합색(`bg-accent/10`, `hover:bg-accent/5`)을 사용함
 - 홈 Latest, 기본 index, 태그 아카이브, 작성자 아카이브의 목록 영역은 `Load More` 버튼 기반 확장형 페이지네이션을 사용함
--- a/docs/update.md
+++ b/docs/update.md
@@ -5,6 +5,9 @@
 - `docs/spec.md`, `docs/map.md`, `docs/deploy.md` 현재 버전을 `v0.1.43`으로 동기화.
 - `docs/history.md`에 `v0.1.43` 의사결정 이력(`Read next` 태그 우선화) 추가.
 - `partials/site/sidebar-right.hbs` `Read next` 목록을 현재 글 `primary_tag` 기준 관련 글 우선 노출로 변경하고, 결과가 없으면 최신 글(현재 글 제외)로 fallback 처리.
+- `post.hbs` 댓글 영역 분기를 `comments` 활성 여부 우선으로 재조정하고, 로그인 멤버에서 댓글 비활성화 시 전용 안내 문구를 노출하도록 수정.
+- `docker-compose.yml`에 Mailpit 컨테이너를 추가하고 Ghost 메일 전송 설정(`mail__*`)을 로컬 SMTP로 연결.
+- 로컬 멤버 테스트 계정 10개(`localmember01@example.com`~`localmember10@example.com`)를 Ghost DB에 생성.

 ## v0.1.42 - 2026-04-16
 - 좌측 카테고리 목록에 slug 기반 우선순위 정렬 기능 추가.
@@ -23,6 +26,7 @@
 - `page.hbs` 페이지 본문 래퍼의 상하 마진(`mt-6`, `mb-8`)을 제거.
 - `partials/site/topbar.hbs`, `assets/built/screen.css` 좌측 사이드바 토글 아이콘 색상을 `--text`로 통일하고 hover 배경 변경을 제거.
 - `post.hbs` 댓글 비활성 안내 영역의 `Sign up now` 버튼/`Sign in` 링크 색상을 브랜드 계열(`bg-orange-600`, `text-orange-600`)로 보정해 라이트 모드 가독성을 복구.
+- `post.hbs` 댓글 영역 분기 조건을 `comments`에서 `@member`로 변경해 로그인 멤버는 댓글 0개 상태에서도 입력 UI가 노출되도록 수정.

 ## v0.1.41 - 2026-04-16
 - `package.json` 버전을 `0.1.41`로 증가.
--- a/partials/site/topbar.hbs
+++ b/partials/site/topbar.hbs
@@ -1,6 +1,6 @@
 <header class="topbar border-b border-brd bg-bgr/95 supports-[backdrop-filter]:bg-bgr/80">
    <div class="topbar__inner mx-auto">
-        <div class="topbar__brand flex h-full items-center gap-3 px-4">
+        <div class="topbar__brand flex h-full items-center gap-3 px-4 lg:px-0">
            <button class="topbar__sidebar-toggle inline-flex items-center justify-center rounded-theme group" type="button" data-left-sidebar-toggle aria-expanded="true" aria-label="Toggle left sidebar">
                <span class="topbar__sidebar-toggle-icon topbar__sidebar-toggle-icon--open">
                    <i class="icon icon-layout-sidebar size-6 stroke-2" role="presentation">
@@ -40,7 +40,7 @@
                <span class="search-shortcut">/</span>
            </button>
        </div>
-        <div class="topbar__actions relative flex h-full items-center justify-end gap-2 px-4">
+        <div class="topbar__actions relative flex h-full items-center justify-end gap-2 px-4 lg:px-0">
            <button class="icon-button icon-button--user-menu inline-flex items-center justify-center rounded-theme border border-brd bg-bgr hover:bg-bgr-tone overflow-hidden" type="button" aria-label="Open user menu" data-user-menu-toggle>
                {{#if @member}}
                    {{#if @member.avatar_image}}
--- a/post.hbs
+++ b/post.hbs
@@ -71,12 +71,18 @@
    <section class="px-5 sm:px-6 mb-6 border-y py-5 border-brd scroll-mt-14 bg-bgr-tone">
        {{#if comments}}
            {{comments title="Comments" count=true}}
+        {{else if @member}}
+            <div class="flex flex-col items-center py-6 sm:px-8 sm:py-10">
+                <h3 class="mb-[8px] text-center font-sans text-2xl tracking-tight text-typ font-bold">댓글 기능 비활성화</h3>
+                <p class="w-full px-0 text-center font-sans text-lg leading-normal text-typ-tone sm:max-w-screen-sm sm:px-8">현재 사이트 설정에서 댓글 기능이 비활성화되어 있습니다.</p>
+            </div>
        {{else}}
            <div class="flex flex-col items-center py-6 sm:px-8 sm:py-10">
-                <h3 class="mb-[8px] text-center font-sans text-2xl tracking-tight text-typ font-bold">Join the discussion</h3>
-                <p class="mb-[28px] w-full px-0 text-center font-sans text-lg leading-normal text-typ-tone sm:max-w-screen-sm sm:px-8">Become a member of <span class="font-semibold text-typ">{{@site.title}}</span> to start commenting.</p>
-                <a class="text-md mb-[12px] inline-block rounded px-5 py-[14px] font-sans font-medium leading-none text-white transition-all hover:opacity-90 bg-orange-600" href="#/portal/signup">Sign up now</a>
-                <p class="text-md text-center font-sans text-typ-tone"><span class="mr-1 inline-block text-[15px]">Already a member?</span> <a href="#/portal/signin" class="rounded-md text-sm text-orange-600 font-semibold transition-all hover:opacity-90">Sign in</a></p>
+                <h3 class="mb-[8px] text-center font-sans text-2xl tracking-tight text-typ font-bold">댓글 참여하기</h3>
+                <p class="mb-[28px] w-full px-0 text-center font-sans text-lg leading-normal text-typ-tone sm:max-w-screen-sm sm:px-8">멤버가 되어 댓글을 남겨보세요</p>
+                <a class="text-md mb-[12px] inline-block rounded px-5 py-[14px] font-sans font-medium leading-none text-white transition-all hover:opacity-90 bg-orange-600" href="#/portal/signup">회원가입하기</a>
+                <p class="text-md text-center font-sans text-typ-tone"><span class="mr-1 inline-block text-[15px]">이미 가입하셨나요?</span> 
+                <a href="#/portal/signin" class="rounded-md text-sm text-orange-600 font-semibold transition-all hover:opacity-90">로그인하기</a></p>
            </div>
        {{/if}}
    </section>