# 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=`) - `/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>'` / `''`) 방식으로 정리 - 핵심 편집/미리보기/블록 추가/정렬/삭제/삭제/클립보드 복사 흐름 유지 - 기존 템플릿/스크립트 충돌 의심 소지를 줄이는 형태로 재구성 ## 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` 스토어 기준으로 실시간 계산되어 표시