Coding Garden - Planning

구현 목표

• 포스트

  • 마크다운 에디터
    • 마크다운 형식의 글 작성 가능
  • 강조효과
    • 텍스트 하이라이트 기능
  • AI 자동 요약
    • 작성된 내용을 바탕으로 ai가 요약문을 생성하여 위에 띄움
  • 듀얼 프리뷰 / 맞춤법 검사
    • 작성중 실시간 프리뷰 화면 제공

• 소셜

  • 댓글 시스템
  • "좋아요" 기능

• 사용자

  • 본인이 작성한 글 목록 확인 가능

---

추가 기능

• 목차(Table of Contents, TOC) 자동 생성

  • 작성한 마크다운의 헤더(#, ##)를 분석해서 우측에 자동으로 목차를 만들어주는 기능
    • 프론트엔드에서 마크다운을 파싱할 때 헤더 태그에 id를 부여하고,
    • 스크롤 위치에 따라 목차의 하이라이트가 바뀌는
      • 'Intersection Observer' API를 사용

• 임시 저장 (Auto Save)

  • 글을 쓰다가 브라우저가 꺼지거나 실수를 해도 내용이 날아가지 않도록
    • 작성 중인 내용을 주기적으로 저장
  • 간단 버전: 브라우저의 localStorage에 10초마다 저장
  • 고급 버전: DB에 is_published=false 상태로 저장하고 drafts 테이블을 따로 관리

• 태그(HashTag) 및 시리즈 관리

  • 게시글에 #React #Project 같은 태그를 달거나, 연재 글을 묶는 '시리즈' 기능
    • 작성한 글 내용을 AI에게 던져서 "적절한 태그 3개 추천해줘" 라고 요청하는 기능
      • 추가 고민

• 이미지 드래그 앤 드롭 & 붙여넣기

  • 마크다운은 기본적으로 이미지를 URL로 넣어야 해서 불편
    • 에디터에 이미지를 드래그하거나 캡처 후 Ctrl+V 했을 때 자동으로 서버에 업로드되고
    • 마크다운 이미지 문법(![](url))으로 변환되는 기능

• 소셜 로그인 (특히 GitHub)

  • 이메일 가입 외에 GitHub나 Google 계정으로 로그인하는 기능

---

기획문서 작성

테이블 명세서

• index

PK (Primary Key): PK_[테이블명]_IDX

UK (Unique Key): UK_[테이블명]_[컬럼명]

IDX (일반 인덱스): IDX_[테이블명]_[컬럼명]

• 시리즈

  • User (주인) 1 ─── N Series (폴더) 1 ─── N Post (내용물)
    • Users: 여러 개의 시리즈를 만들 수 있다
    • Series: 특정 유저(user_id)의 것이며, 여러 포스트가 담긴다.
    • Posts: 특정 시리즈(series_id)에 소속되어 있고
      • 그 안에서 몇 번째 순서(series_order)인지 안다.

---

요구사항 정의서

---

api명세서

---

ERD

---

프론트 고민

HTMX

• 복잡한 JavaScript 코드 없이, HTML 속성만으로 AJAX 통신을 하게 해주는 라이브러리
  • 백엔드 개발자들이 가장 사랑하는 프론트 기술

# "좋아요" 기능
<button hx-post="/blog/1/like" hx-swap="outerHTML">
  좋아요
</button>