Files

zenn 10c5a099fc v1.4.3: 관리자 UI·홈·미디어 개선

- 관리자 라이트 테마 격리, 대시보드 활성 링크, 로그인 우측 정렬
- 대시보드 통계 추이 차트·툴팁, 홈 Latest/Featured 보정
- 미디어 종류·미사용 필터, 비디오 프레임 썸네일
- NAS 운영 업데이트 절차 문서 추가

2026-05-21 18:30:50 +09:00

2.6 KiB

Raw Blame History

코딩 컨벤션

언어

JavaScript (TypeScript 미사용)
JSDoc으로 타입 명시
Zod로 스키마 검증

문법

세미콜론 미사용
const/let 사용 (var 미사용)
화살표 함수 우선

네이밍

Vue 컴포넌트: PascalCase (SiteHeader.vue)
일반 파일/폴더: kebab-case
Vue 컴포넌트 파일: PascalCase
CSS 클래스: kebab-case
고유 클래스명 필수 (Tailwind 외)
Nuxt 컴포넌트 자동 import는 경로 prefix 없이 파일명 기준으로 사용

스타일

TailwindCSS 기본 사용
다크 인증(signin/signup/admin/login)의 텍스트 입력에는 auth-form-input 클래스를 붙여 main.css의 글자색·캐럿·placeholder를 적용한다(폼 컨트롤은 부모 color를 상속하지 않는 경우가 많음).
관리자 레이아웃(admin-layout)은 공개 사이트 테마와 분리된 라이트 UI로 고정하며, 글쓰기 화면을 제외한 관리자 일반 폼 컨트롤은 main.css의 .admin-layout--light-controls input/textarea/select 스코프 기준을 따른다.
Tailwind 엔트리는 nuxt.config.js의 tailwindcss.cssPath: '~/assets/css/main.css'로 통일한다(@nuxtjs/tailwindcss 기본 assets/css/tailwind.css 부재 시 패키지 tailwind.css가 중복 주입될 수 있음).
관리자 글 에디터는 Markdown-first textarea 편집을 기준으로 하며 저장 값은 기존 마크다운 문자열을 유지
관리자 미디어 화면에서 모달에 가릴 수 있는 오류·안내는 useAdminToast의 showToast로 우측 상단(z-[100])에 표시한다.
관리자 메뉴 관리는 상단/하단 탭으로 나누고, 순서는 드래그로 조정한다(상단은 동일 부모의 형제끼리만).

<main class="site-main w-full max-w-full lg:max-w-[720px]">

주석

JSDoc 형식
한국어 작성

/**
 * 게시물 목록 조회
 * @param {Object} options - 조회 옵션
 * @param {number} options.page - 페이지 번호
 * @param {number} options.limit - 페이지당 개수
 * @returns {Promise<Post[]>} 게시물 목록
 */

설정

경로/URL/키값: .env로 관리
하드코딩 금지
로컬 개발 설정과 NAS 운영 설정은 별도 환경 파일로 분리
운영 DB 접속 정보는 개발용 .env에 기록하지 않음
운영 환경에서는 DATABASE_URL과 MEMBER_SESSION_SECRET 누락을 허용하지 않음

검증

npm run lint: JavaScript 파일 문법 점검
npm run test: Nuxt 프로덕션 빌드 기반 회귀 검증
npm run verify: 문법 점검과 빌드를 함께 실행

2.6 KiB Raw Blame History

코딩 컨벤션

언어

문법

네이밍

스타일

주석

설정

검증

2.6 KiB

Raw Blame History