가맹몰 추가 이미지는 타일 자체를 잡아 좌우로 옮기고 하단 [저장] 한 번에 반영하는 방식이다
(사용자 확정). 왼쪽 위 손잡이 버튼을 지우고 li가 draggable·tabindex=0이 되어 마우스는
타일을, 키보드는 초점을 둔 항목을 방향키로 옮긴다. 본문 안 버튼·입력에서 올라오는 키는
받지 않는다.
Co-Authored-By: Claude Opus 5
FoxPageHeader에 description을 더한다 — 가맹몰 시안(FOX-PAY_2.0 2805:635)이 제목 아래
한 줄을 두는데 원 시안(page-tit-area)엔 그 자리가 없었다. 글자는 FoxHeadingGroup의
설명과 같은 토큰(body-md · font-neutral-subtle)이고 FoxListContainer가 그대로 넘긴다.
문구는 시안 그대로다 — 목록(BO-MAL-001) / 등록(BO-MAL-002) / 수정(BO-MAL-003) /
메뉴 등록·수정(BO-MAL-004).
Co-Authored-By: Claude Opus 5
가맹몰 상세 등록 화면의 카드들이 title/description을 넘기는데도 children이 있으면
FoxCard가 머리말을 버려 시안(FOX-PAY_2.0 2805:635)의 카드 제목·설명이 보이지 않았다.
contents를 header(gap 2)·body로 나누고 그 사이를 gap 5로 띄운다. 제목·설명만 있는
기존 카드는 모양이 같다.
Co-Authored-By: Claude Opus 5
기획 BO-MAL-001~004(지역상생몰 > 업체관리)를 「가맹몰 상세 관리」로 옮겼다. 백엔드
(15d409a)의 상세는 기존 가맹점(frcsNo)에 1:1로 붙는 구조라 업체를 새로 만들지 않는다 —
목록에 가맹점 전체를 보이고 행에서 [상세 등록]으로 들어가며, 업체명·연락처·주소는 가맹점
원본을 읽기 전용으로 보여 준다(사용자 확정).
- 목록: 업체명·카테고리·노출상태·등록일 검색, 체크박스 일괄 비활성·삭제, 행 관리
- 등록·수정(/[frcsNo]): 기본 정보 + 이미지(대표 1 + 추가 11) + 메뉴 표 + 등록 정보
- 메뉴 등록·수정(/[frcsNo]/products): 이미지·메뉴명·가격·설명·배지·노출·순서
- @fox FoxSortableList 신설 — 네이티브 DnD + 방향키, 상태 없이 onReorder만 (사용자 확정)
- 배지는 코드를 쉼표로 이어 frcsBadge에 싣는다(BEST,MAIN,NEW,SALE — 사용자 확정)
- 파일 저장소 모듈은 바우처용이 없어 잠정 MODULE_VOUCHER (사용자 확정)
백엔드가 아직 주지 않는 값(노출 상태·카테고리·수정 프리필·기간 검색·메뉴 건수·바우처 사용)은
화면을 시안대로 두고 그대로 보낸다(사용자 확정). 목록의 노출 토글만은 예외다 — PUT이 모든
컬럼을 덮어써 단건 조회가 비어 있는 동안 값 없이 보내면 상세가 지워지므로, 조회 결과에
대표이미지가 없으면 거부하고 수정 화면으로 안내한다.
추가 이미지 묶음은 fileSn이 1..n으로 채번되어 순서·삭제·추가 어느 것이든 통째로 다시 올린다.
저장된 장은 백엔드에서 다시 읽어 합친다. 묶음의 장 수를 묻는 API가 없어 HEAD로 더듬는다.
Co-Authored-By: Claude Opus 5
globals.scss가 `*`에 건다. 스크롤이 어디에 생기는지 미리 알 수 없어서다 — 문서 자체,
셸 본문, 사이드바, 표 래퍼, 화면이 나중에 만드는 상자까지 한 번에 덮인다. 특이도가
0,0,0이라 어느 자리든 자기 규칙으로 덮을 수 있다.
@fox 컴포넌트 넷의 `fox.scroll()` 호출은 겹치지만 남긴다 — @fox는 이 파일 없이 다른
프로젝트로 복사돼도 제 모양이 나와야 한다.
카탈로그의 "붙이지 않았을 때" 예시는 뺐다. 전역이 된 뒤로는 같은 모양이라 오해만 준다.
Co-Authored-By: Claude Opus 5
시안 scroll(7341:2675)이다. 컴포넌트가 아니라 스크롤이 생기는 요소에 입히는
외형이라 `fox.scroll()` 믹스인과 `.fox-scroll` 클래스로 냈다.
둘레 4px 여백은 트랙 padding이 아니라 막대의 투명 테두리로 만든다 — padding으로
주면 막대가 트랙 끝까지 가지 못한다. Chrome 121+가 표준 속성을 보면 웹킷 규칙을
통째로 무시하므로 Firefox 대비는 @supports로 갈라 놓았다.
이미 스크롤이 있던 @fox 컴포넌트 넷(셀렉트 목록·칩 셀렉트·모달·파일목록)에 적용했다.
Co-Authored-By: Claude Opus 5
예시안 안에 손으로 그린 SVG 도형이 셋 남아 있었다(DemoIcon·DemoStar·DemoCalendar). 이 화면이
곧 사용법 안내라, 버튼·칩·셀렉트 슬롯에 SVG가 들어가 있으면 "아이콘은 이렇게 넣는다"로 잘못
읽힌다 — 실제로 혼동이 생겼다. 셋 다 `fox-ico` 클래스로 바꾼다(CaretRight·Star·CalendarBlank).
호출부 69곳은 그대로다.
폰트 아이콘은 `width`/`height`가 아니라 `font-size`가 크기를 정한다. FoxSelect 힌트 아이콘
15곳의 `style`도 함께 바꿨다.
아이콘 슬롯 prop 주석도 고친다 — "`currentColor`로 그린 SVG여야 한다"가 다섯 컴포넌트에 남아
있어 같은 혼동을 계속 만든다. 마크업 계약을 그대로 적는다.
`DemoThumb`(320×180)만 SVG로 둔다 — 아이콘이 아니라 카드·모달의 사진 자리를 채우는 그림이다.
확인: 예시안의 버튼 아이콘이 "Fox Icons Regular" 16×16으로 그려지고 글리프가 실린다.
칩의 달력도 CalendarBlank로 나온다. 예시안 어디에도 `
Fox*Icon 컴포넌트 141곳을 fox-ico 클래스로 바꾸고 옛 SVG 모듈을 지웠다.
아이콘 상자 규칙에는 상자 크기를 그대로 둔 채 font-size만 더했다 — 손으로 그린
인라인 svg가 든 자리도 같이 쓰이기 때문이다.
사이드바 메뉴 아이콘의 화이트리스트가 사라졌다. 폰트는 통째로 하나라 이름이 늘어도
번들이 커지지 않아, 백엔드가 주는 kebab 이름을 PascalCase로 바꿔 붙이기만 하면 된다.
@fox 13.3MB → 6.4MB.
Co-Authored-By: Claude Opus 5
디자인팀 요구다. 클래스명 하나로 쓰고 이름은 Figma의 `ico/House`를 대소문자까지
그대로 담는다. 굵기별 @font-face가 따로라 화면이 쓰는 굵기만 내려받는다.
기존 SVG 컴포넌트에서 뽑은 path로 구워 그림이 같다는 것이 데이터 수준에서 보장된다
(글리프 대조 결과 불일치 0.97%, 전부 외곽선 안티에일리어싱).
duotone은 글리프 하나가 두 색을 못 가져 배경겹을 별도 글리프로 넣고 CSS가 겹친다.
Co-Authored-By: Claude Opus 5
본 프로젝트 사이드바처럼 상단에 FoxInput 검색창을 두고, 그 아래 테마 컨트롤을
가운데 세웠다. 제목·부제는 지웠다.
검색은 라벨과 id를 함께 본다(FoxButton / fox-button). 분류 이름이 걸리면 그 아래는
통째로 남기고, 검색 중에는 접힘을 무시한다 — 걸린 항목이 접힌 가지에 숨으면 안 된다.
섹션 개수도 걸린 것만 센다.
Co-Authored-By: Claude Opus 5
FoxSegmentedControl은 inline-flex라 내용만큼만 넓은데, 상단을 세로 flex로 만들면서
기본값 align-items: stretch가 216px로 늘렸다. 마지막 칸은 구분선이 투명이라 남은
78px이 "다크" 칸의 일부처럼 보였다.
Co-Authored-By: Claude Opus 5
admin-sidebar(시안 snb-area 3041:11860)의 규칙을 그대로 옮겼다. 240px 폭,
회색→옅은 파랑 그라데이션, 1depth 알약(multiply)·2depth 흰 카드·3depth 들여쓰기.
@fox 폴더만 복사해도 하니스가 따라가야 해서 app SCSS를 참조하지 않고 옮겨 적었다.
깊이를 맞추려고 트리도 본 프로젝트와 같은 3depth 접힘으로 바꿨다. 상위 분류가 없는
토큰 섹션(Size·Theme·Primitive)은 자식 없는 1depth라 바로 선택된다. 펼침은
useSidebarNav와 같이 "선택 항목에서 파생된 기본값 + 사용자가 누른 값" 2층이다.
시안에 없어 남긴 것: 선택 가능한 행의 개수 배지(캐럿 자리)와 focus-visible 윤곽선.
Co-Authored-By: Claude Opus 5
본문이 길어지면 문서 전체가 스크롤되어 사이드바까지 함께 밀려 올라갔다. shell을 뷰포트 높이로
못박고 overflow를 끊은 뒤, 두 칸이 각자 overflow-y를 갖게 했다(AdminShell과 같은 방식).
좁은 화면에서는 종전처럼 위아래로 쌓이고 문서가 스크롤된다.
사이드바를 디자인 시스템으로 옮겼다 — 손으로 그린 테마 전환 버튼 묶음을 FoxSegmentedControl로,
항목 옆 개수를 FoxBadge로 바꿨다. 대체된 .themeSwitch·.themeButton·.navCount 스타일은 지웠다.
검증 — 1600×900 실측: shell 900·overflow hidden, 문서 전체 스크롤 없음, 사이드바(3237)·
본문(9432) 각각 자체 스크롤.
Co-Authored-By: Claude Opus 5
충돌 2건은 양쪽이 같은 자리에 서로 다른 것을 **더하기만** 한 경우라 합집합으로 풀었다.
- styles/components.scss: hub의 파티셜 목록에 fox-status-indicator·fox-toast를 더했다.
- dev-test/component-registry.tsx: 데모 함수(hub의 ModalDemo·DemoThumb + origin/develop의
ToastDemo)와 카탈로그 항목(45 공통 + hub 5 + origin/develop 6 = 56)을 모두 남겼다.
git이 두 삽입의 공통 꼬리(`…}`)를 맞물려 놓아 마커 그대로는 함수가 끊긴다 — 그래서
마커를 고치지 않고 양쪽 원본에서 함수·항목 단위로 다시 세웠다.
검증: tsc·eslint 무오류, next build 성공(/dev-test/design이 빌드 시 프리렌더되므로 병합된
레지스트리가 실제로 렌더되는 것까지 확인).
Co-Authored-By: Claude Opus 5
