landing-manager/frontend/landing-admin-notes.md

Landing Admin Page Log

관리자 페이지를 새로 만들거나 기능을 추가할 때마다 페이지별로 기록합니다.

기록 규칙

• 작성 시각
• 페이지 경로
• 목적
• 라우트
• 구성 항목
• 비고/다음 작업

2026-03-03

• 페이지: / 홈 랜딩
• 타입: 기본 페이지(비관리자)
• 노트: 초기 기본 레이아웃을 마크업으로 구성했고, 이후 /admin 계열부터 페이지 단위 기록은 여기서 계속 누적.

2026-03-03

• 페이지: /admin 대시보드
• 타입: 관리자 진입점 + 공통 레이아웃
• 라우트: /admin, /admin/index
• 구성:
  • 사이드바 고정형 레이아웃 (pages/admin.vue) 추가
  • 대시보드 메인 카드 3종(진행중 프로젝트, 전체 프로젝트, 새로운 리드)
  • 진행중 프로젝트 테이블 요약 섹션 추가
• 비고:
  • 1단계 MVP에서 API 연동 없이 정적 상태로 구성
  • 다음 작업: /admin/projects, /admin/pages, /admin/leads 페이지 순차 추가

2026-03-03

• 페이지: /admin 대시보드(레이아웃 개선)
• 타입: 관리자 대시보드 UI 개선
• 라우트: /admin
• 구성:
  • 상단 헤더 + 우측 액션 버튼을 1줄 배치
  • KPI 3개 카드 + 추이 카드/미니 차트 구간을 2열로 구성하여 세로 몰림 완화
  • 하단 목록/빠른 액션 영역을 2열로 나눠 가로형 화면 비중 확대
• 비고: 사용자 요청 반영(“너무 세로로 구성되어 있음” 해결)

2026-03-03

• 페이지: /admin 대시보드 KPI 라인 정렬
• 타입: 카드 배치 조정
• 라우트: /admin
• 구성:
  • KPI 카드 3개(진행중 프로젝트/전체 프로젝트/새로운 리드)를 같은 라인(grid-cols-3)으로 고정 배치
• 비고: 동일 라인 요청 반영

2026-03-04

• 페이지: /admin/projects
• 타입: 프로젝트 그룹 보드
• 라우트: /admin/projects
• 구성:
  • 상단 브레드크럼 + 타이틀 + Create New Group 버튼
  • 검색/상태/정렬/필터 바
  • 카드형 프로젝트 목록(상태 배지, 메트릭 2열, 하단 액션 버튼)
  • Create New Group 대시드 카드
  • 하단 페이지네이션 바
• 비고:
  • 사용자 제공 레퍼런스 이미지 기반으로 다크 보드 스타일 구성
  • 현재는 정적 더미 데이터 기반, 이후 API 연동 예정

2026-03-04

• 페이지: /admin/projects 상태 표시/디자인 톤 보정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 상태 표시를 큰 배지에서 작은 dot + label 형태로 변경
  • 카드 두께/폰트 크기/메트릭 박스 크기 축소로 덜 투박하게 정리
  • Create New Group 원형 아이콘 크기 축소
• 비고: 사용자 피드백(원형 과대, 전체 투박함) 반영

2026-03-04

• 페이지: /admin/projects 메트릭 정렬/상태 텍스트 크기 조정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 카드 내 TOTAL LEADS와 우측 메트릭 박스를 flex 기반 좌우 정렬로 고정
  • 상태 라벨 폰트 크기 축소(text-[10px]) 및 패딩 축소
• 비고: 사용자 피드백(좌우 배치/상태 글자 크기) 반영

2026-03-04

• 페이지: /admin/projects 메트릭 50:50 폭 고정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 카드 메트릭 박스 2개를 w-1/2 basis-1/2로 고정하여 정확히 반반 분할
• 비고: 사용자 피드백(한쪽 쏠림) 반영

2026-03-04

• 페이지: /admin/projects 메트릭 반반 분할 방식 보정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • flex 분할을 grid grid-cols-2로 변경해 gap 포함 상태에서도 정확히 50:50 유지
• 비고: 사용자 피드백(여전히 반반 아님) 재반영

2026-03-04

• 페이지: /admin/projects 메트릭 2열 강제 고정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 메트릭 래퍼에 인라인 display:grid; grid-template-columns: 1fr 1fr; 적용
  • Tailwind 클래스 해석/브레이크포인트 영향 없이 무조건 좌우 반반 유지
• 비고: 사용자 피드백(여전히 위아래 배치됨) 재반영

2026-03-04

• 페이지: /admin/projects 하단 액션/상태 라벨 조정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 카드 하단 Variants Tested 라인과 버튼 간격을 늘려 버튼 위쪽 마진 추가
  • 상태 배지 텍스트를 더 작은 크기로 축소
• 비고: 사용자 요청 반영(“tested copy url variants 버튼 윗쪽 마진, 상태 표시 더 작게")

2026-03-04

• 페이지: /admin/projects 하단 액션 여백 추가 강화
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 하단 액션 래퍼(Variants/Copy URL 버튼 행) 상단 마진을 기존 대비 더 크게(mt-6) 상향
• 비고: “그대로 딱 붙어있다”는 피드백 반영

2026-03-04

• 페이지: /admin/projects 하단 액션 강제 간격 적용
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 하단 버튼 행에 유틸 클래스 기반 mt-을 제거하고 style="margin-top: 48px;" 인라인 마진 강제 적용
  • "tested copy url variants" 구간 분리를 즉시 체감 가능한 수치로 조정
• 비고: 변경사항이 반영 안됐다는 피드백에 대한 재반영

2026-03-04

• 페이지: /admin/projects 하단 액션 간격 과다 완화
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 하단 액션 행 인라인 마진을 48px에서 24px로 축소
• 비고: “너무 많이 떨어짐” 피드백 반영

2026-03-04

• 페이지: /admin/projects 하단 액션 간격 재상향 조정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 하단 액션 행 인라인 마진을 24px에서 28px로 증가
• 비고: “좀더 올려줘” 피드백 반영

2026-03-04

• 페이지: /admin/projects 하단 간격 보장 방식 변경
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • Variants Tested 블록과 하단 액션 행 사이에 고정 높이 공백 블록(h-6) 추가
  • 유틸 클래스/인라인 마진 조합과 함께 간격이 누락되지 않도록 구조적으로 보강
• 비고: 간격 변경이 화면에 반영되지 않는 피드백의 재반영

2026-03-04

• 페이지: /admin/projects 페이지네이션 위치 조정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 페이지네이션(footer) 위쪽에 mt-4 여백 추가
• 비고: 카드 본문보다 약간 아래쪽으로 페이지네이션을 띄우는 요청 반영

2026-03-04

• 페이지: /admin/projects 상태 라벨 크기 추가 축소
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 상태 배지 텍스트 사이즈를 text-[9px]에서 text-[8px]로 축소
• 비고: ACTIVE/ARCHIVED/DRAFT 라벨이 더 작게 보이도록 조정

2026-03-04

• 페이지: /admin/projects 상태 라벨 직접 크기 강제 적용
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 상태 배지에 style="font-size: 8px; line-height: 1;" 직접 지정
• 비고: Tailwind 유틸이 반영 안될 때도 체감되도록 강제 적용

2026-03-04

• 페이지: /admin/projects 상태 라벨 크기 상향 조정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 상태 배지 인라인 폰트 크기를 8px에서 10px로, line-height를 1.1로 조정
• 비고: “너무 작다” 피드백 반영

2026-03-04

• 페이지: /admin/projects 검색/필터 패널 디자인 개선
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 검색 영역을 입력 박스 + 라벨 + 통일된 필터 칩 스타일의 카드형 패널로 교체
  • 검색창에 아이콘 유사 요소 및 focus 보더/그림자 적용
  • 상태/정렬/필터 버튼을 동일한 반원각/톤으로 정돈
• 비고: “위쪽 검색하는 부분 이쁘게” 요청 반영

2026-03-04

• 페이지: /admin/projects 검색/필터 가로 고정 정렬
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 검색/필터 블록을 flex-nowrap 1줄 레이아웃으로 변경
  • 버튼에 shrink-0/whitespace-nowrap 적용해 라인 분리 없이 가로 유지
  • 검색 입력 최소 너비 지정으로 한 줄 안정성 강화
• 비고: “가로로 생겨야지” 요청 반영

2026-03-04

• 페이지: /admin/projects 검색/필터 패널 패딩 보정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 검색 패널 p-4를 p-5, 내부 간격을 gap-4로 강화
  • 검색 라벨 간격 및 입력창 패딩(px-9 py-3) 확장
  • 버튼 패딩(px-5 py-3) 상향으로 시각적 여유 확보
• 비고: “패딩 주고 보기 이쁘게” 요청 반영

2026-03-04

• 페이지: /admin/projects 검색/필터 정렬 조정
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 검색 입력 최소 너비를 360px로 증가
  • 상단 블록을 justify-between 처리 후 버튼 그룹에 ml-auto 적용해 Status~Filter를 오른쪽 정렬
  • Status / Sort / Filter를 한 묶음으로 묶어 오른쪽 정렬 유지
• 비고: “검색란 넓히고 status부터는 오른쪽 정렬” 요청 반영

2026-03-04

• 페이지: /admin/projects Sort/Filter 컨트롤 타입 정리
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • Status를 select 박스로 유지
  • Sort by를 select 박스로 전환
  • Filter는 버튼으로 유지

2026-03-04

• 페이지: /admin/projects Filter 버튼 모양 정리
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • Filter 버튼의 그라디언트 스타일 제거 후, 다른 입력 컨트롤과 톤을 맞춘 플랫 보더 스타일로 통일

2026-03-04

• 페이지: /admin/projects 검색 입력 폭 추가 확대
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • 검색 input 최소 너비를 520px로 상향
• 비고: “검색박스 좀 길게” 요청 반영

2026-03-04

• 페이지: /admin/projects Status 컨트롤 select 전환
• 타입: UI polish
• 라우트: /admin/projects
• 구성:
  • Status: All 버튼을 라벨 + select 박스로 변경
  • 옵션: All / Active / Archived / Draft

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 관리자 페이지 편집
• 라우트: /admin/pages/:id/builder
• 구성:
  • 빌더 열기 버튼을 페이지 목록에서 해당 route로 이동하도록 연결
  • 동적 라우트 페이지 추가
  • 페이지 메타(이름/캠페인/도메인/경로/상태) 표시
  • 모바일 폭 기준 미리보기 카드형 캔버스 + 블록 리스트 영역 구성
  • 블록 추가/위/아래 이동/삭제 인터랙션 추가
  • 빈 상태 시 “페이지를 찾을 수 없음” 대응 처리

2026-03-04

• 페이지: /admin/pages 새 페이지 생성 기능
• 타입: UI/기능 개선
• 라우트: /admin/pages
• 구성:
  • CreatePageModal 컴포넌트 추가
    • 입력 필드: 페이지명, 프로젝트, 도메인, 경로
    • 배경 클릭/닫기 버튼/취소 버튼으로 모달 종료
  • /admin/pages 생성 버튼과 빈 상태 카드의 “바로 만들기”에 모달 연동
  • pages store에 createPage 액션 추가
    • 수동 입력 기반 페이지 생성(상태: draft, 리드/방문자/버전=0/0/1)
  • 기존 createQuickPage는 기본값 기반 호출에서 createPage로 내부 위임

2026-03-04

• 페이지: /admin/pages 페이지 관리
• 타입: 관리자 페이지 기능 확장
• 라우트: /admin/pages
• 구성:
  • Pinia 기반 usePagesStore 추가 (frontend/app/stores/pages.ts)
  • 페이지 목록 UI/검색/필터/Campaign/정렬/생성/삭제 기능 구현
  • 캠페인 카드에서 페이지 관리 버튼 추가 (/admin/pages?campaignId=<projectId>)
  • /admin 좌측 사이드바 링크(/admin/pages)와 동작 연동
• 비고:
  • 현재는 더미 데이터 기반 MVP 운영 화면
  • 빌더 연동은 다음 단계에서 라우트 연계

2026-03-04

• 페이지: /admin/pages, /admin/projects
• 타입: 한글 로컬라이즈
• 라우트: /admin/pages, /admin/projects
• 구성:
  • /admin/pages 제목/버튼/라벨/컬럼/상태/안내문구 한글 전환
  • /admin/projects 영문 노출 라벨 일괄 한국어 전환
  • 페이지 관리 스토어 캠페인명, 샘플 페이지명, 상태 라벨을 한글로 조정
• 비고:
  • 영문 코드는 값 자체 유지(live, draft 등), 화면 텍스트만 한글화

2026-03-04

• 페이지: /admin/leads
• 타입: 리드 조회 페이지 추가
• 라우트: /admin/leads
• 구성:
  • 검색, 상태, 채널, 캠페인 필터 지원
  • 더미 리드 테이블(이름/연락처/이메일/캠페인/페이지/채널/상태/수집일) 표시
  • 엑셀 내보내기 버튼(미구현 액션, UI 우선) 추가
• 비고:
  • 사이드바 링크는 기존 /admin 레이아웃에 이미 존재해 바로 접근 가능

2026-03-04

• 페이지: /admin/projects
• 타입: 새 프로젝트 생성 모달 컴포넌트
• 라우트: /admin/projects
• 구성:
  • 공용 컴포넌트 CreateProjectModal 신규 생성 (frontend/app/components/admin/CreateProjectModal.vue)
    • 프로젝트명, 캠페인 표시명 입력폼 + 닫기/생성 액션
  • 프로젝트 목록 페이지에서 모달 오픈/닫기 상태 관리 및 제출 이벤트 처리 추가
  • useProjectsStore에 createProject 액션 추가 (frontend/app/stores/projects.ts)
  • 새 프로젝트 생성 버튼 및 새 그룹 카드에서 모달 오픈 연동
• 비고:
  • 현재는 더미 데이터 스토어에 unshift로 즉시 반영되는 MVP 동작

2026-03-04

• 페이지: /admin, /admin/projects, /admin/pages
• 타입: 프로젝트/대시보드 라벨 완전 한글화
• 라우트: /admin, /admin/index, /admin/projects, /admin/pages
• 구성:
  • 레이아웃 타이틀을 Campaign & Page Console에서 캠페인·페이지 콘솔로 변경
  • 대시보드 라벨 Dashboard를 대시보드로 변경
  • 프로젝트 스토어 샘플 데이터(title/subtitle/metricLabel) 한글화
    • CONV. RATE → 전환율
    • CTR → 클릭률
    • Final → 종료

2026-03-04

• 페이지: /admin Pinia 런타임
• 타입: 상태 관리 안정화
• 라우트: /admin, /admin/projects
• 구성:
  • frontend/app/plugins/pinia.ts(수동 createPinia() 주입 플러그인) 제거
  • @pinia/nuxt 공식 모듈만 사용하도록 정리
  • useDashboardStore, useProjectsStore를 setup 내에서 호출하되 Pinia 인스턴스가 항상 Nuxt 플러그인으로 주입되도록 정리
• 비고:
  • [🍍] getActivePinia() 경고는 커스텀 플러그인과 공식 모듈 중복 등록 가능성이 원인이라 판단
  • 수정 후 dev 서버 재시작 필요

2026-03-04

• 설정: Pinia 전역 상태 관리 연동
• 타입: 플랫폼 인프라
• 라우트: 전체 관리자 페이지
• 구성:
  • @pinia/nuxt 및 pinia 의존성 추가
  • nuxt.config.ts에 @pinia/nuxt 모듈 등록
• 비고: 요청 반영으로 Pinia 기반 관리 준비

2026-03-04

• 페이지: /admin/projects 프로젝트 데이터 스토어 마이그레이션
• 타입: 상태 관리
• 라우트: /admin/projects
• 구성:
  • app/stores/projects.ts 신규 추가
  • 검색/상태필터/정렬 state 및 filteredProjects getter 적용
  • 상단 검색/Status/Sort 컨트롤을 store 바인딩(v-model) 처리

2026-03-04

• 페이지: /admin 대시보드 데이터 스토어 마이그레이션
• 타입: 상태 관리
• 라우트: /admin
• 구성:
  • app/stores/dashboard.ts 신규 추가
  • KPI 카드, 리드 추이, 진행중 프로젝트 목록을 스토어로 이동
  • admin/index.vue에 storeToRefs(useDashboardStore()) 연동

2026-03-04

• 스타일: 관리자 전체 컬러 톤 강화
• 타입: UI polish
• 라우트: /admin/*
• 구성:
  • 사이드바/네비게이션에 그라데이션 및 포인트 색상(시안/인디고) 적용
  • 메인 영역 배경에 라이트 누출형 radial 컬러 레이어 적용
  • 대시보드/프로젝트 페이지의 헤더, 검색, 필터, 카드, 버튼에 컬러 그라데이션 추가
• 비고: “너무 칙칙한데 컬러 좀 넣어줘” 요청 반영

2026-03-04

• 페이지: /admin/pages
• 타입: 라우팅 구조 보정
• 라우트: /admin/pages
• 구성:
  • 페이지 목록 파일을 frontend/app/pages/admin/pages.vue에서 frontend/app/pages/admin/pages/index.vue로 이동
  • 하위 경로인 /admin/pages/:id/builder 라우트 충돌 가능성 해소

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 빌더 기능 확장
• 라우트: /admin/pages/:id/builder
• 구성:
  • 블록 타입을 html, image로 단일화
  • 이미지 파일 업로드 시 업로드 즉시 이미지 블록 생성
  • 이미지 URL로 블록 생성 기능 추가
  • 블록 순서 이동(위/아래) 및 삭제 유지
  • 헤더 설정 구간 추가: 페이지 제목, 메타 설명/키워드, 파비콘, head 추가코드, body script
  • 저장 버튼에서 메타 + 블록을 조합한 최종 HTML 생성 및 클립보드 복사 영역 제공

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 컴파일 오류 대응 리팩터링
• 라우트: /admin/pages/:id/builder
• 구성:
  • Invalid end tag 원인 분리를 위해 빌더 컴포넌트를 전체 재작성
  • script 태그 문자열 조합을 안전 분할('<' + 'script>' / '</' + 'script>') 방식으로 정리
  • 핵심 편집/미리보기/블록 추가/정렬/삭제/삭제/클립보드 복사 흐름 유지
  • 기존 템플릿/스크립트 충돌 의심 소지를 줄이는 형태로 재구성

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: UI/UX 조정
• 라우트: /admin/pages/:id/builder
• 구성:
  • 헤더 제목/본문 문구/버튼 문구 입력 영역 제거(요청 반영)
  • 최종 생성 HTML에서 기본 문구 블록 제거, 블록 기반 렌더링 중심으로 정리
  • 이미지 업로드에 multiple 적용 및 드래그앤드롭 지원 추가
  • 드롭/선택된 이미지들을 한 번에 최대 10개까지 등록하도록 처리

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 업로드 UX 축소
• 라우트: /admin/pages/:id/builder
• 구성:
  • 로컬 업로드 라벨/이미지 URL 입력 UI 제거
  • 이미지 업로드를 드래그앤드롭 박스 1개와 내부 파일 입력으로만 처리
  • 별도 로컬/URL 선택 패널 UI 제거 후 업로드 영역 단일화

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 미리보기 정합성
• 라우트: /admin/pages/:id/builder
• 구성:
  • 미리보기 패널이 space-y 래핑 때문에 생기던 블록 간 간격을 제거
  • 실제 최종 랜딩 렌더(body) 문자열과 동일한 DOM 기준으로 미리보기 렌더링 적용

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 블록 구성 변경
• 라우트: /admin/pages/:id/builder
• 구성:
  • 폼 블록/카톡 싱크 버튼 블록 생성 버튼을 제거
  • footer HTML 입력 필드 추가 (헤더/메타/바디스크립트 설정과 함께 저장/미리보기에 반영)

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 미리보기 UX
• 라우트: /admin/pages/:id/builder
• 구성:
  • 실제 랜딩 생성 데이터는 유지한 상태로, 미리보기 전용 이미지 렌더 방식을 분리
  • 미리보기에서만 이미지 최대 너비/높이 제한을 적용해 썸네일처럼 작게 표시

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 이미지 블록 목록 UX
• 라우트: /admin/pages/:id/builder
• 구성:
  • 이미지 블록 미리보기에서 둥근 모서리 제거(border-radius:0)
  • 이미지 블록 목록에서 blob URL 텍스트 제거
  • 이미지 블록 목록 항목 좌측에 썸네일 이미지 미리보기 표시

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 블록 종류 확장
• 라우트: /admin/pages/:id/builder
• 구성:
  • 폼 블록 추가 기능(기본 폼 HTML 생성)
  • 카카오 싱크 버튼 블록 추가 기능(카카오 버튼 샘플 HTML 생성)
  • html 블록 옆에 두 액션 버튼 배치(폼/카톡 싱크)

2026-03-04

• 페이지: /admin/pages/[id]/builder
• 타입: 이미지 업로드 정책 변경
• 라우트: /admin/pages/:id/builder
• 구성:
  • 이미지 업로드 최대 장수 제한 제거
  • 드롭/선택한 모든 이미지 파일을 일괄 등록
  • UI 문구에서 “최대 10장” 표현 제거

2026-03-04

• 페이지: /admin/pages/[id]/variants
• 타입: 변형(variant) 관리 페이지
• 라우트: /admin/pages/:id/variants
• 구성:
  • Pinia 스토어 frontend/app/stores/variants.ts 신규 추가
  • 페이지별 변형 목록/생성/삭제/활성-비활성 토글 기능
  • 페이지 목록(/admin/pages) 카드에 “변형 관리” 바로가기 추가
  • 프로젝트 카드의 “변형 관리” 버튼을 페이지별 변형 페이지로 연결
  • 변형 메트릭(총 변형 수, 누적 리드, 총 트래픽 비율), 변형명/설명/비율/리드 수 UI 구성
• 비고:
  • 페이지별 변형 개수는 variants 스토어 기준으로 실시간 계산되어 표시