브랜딩 업데이트
개요
CRM 로고 및/또는 제목을 변경합니다. 로고는 두 가지 테마로 다섯 화면(데스크톱 + 모바일 헤더, 로그인, 회원가입, 확인)에 표시되며, 제목은 세 곳에 하드코딩되어 있어 단일 파일만 수정하면 나머지가 업데이트되지 않습니다. 아래 단계에서는 이 모든 것을 처리합니다. 종료 기준: 로고가 두 테마 모두에서 다섯 화면에 올바르게 렌더링되고, 제목이 헤더, 브라우저 탭, PWA 이름에서 일관되게 표시되어야 합니다.
사용 시기
- 사용자가 CRM 로고 및/또는 제목/이름을 변경, 교체, 리브랜딩하려는 경우.
- 선택적으로, 파비콘 또는 PWA 앱 아이콘 업데이트를 요청한 경우에도 사용합니다.
테마 색상이나 컴포넌트 스타일링의 경우 Skill({skill: "shadcn-customization"})을 참조하세요.
로고: 두 가지 에셋 패밀리
사용자가 어떤 것을 의도하는지 확인하세요 — 대부분의 요청은 #1만 의미합니다.
- 앱 로고 / 워드마크 (일반적) —
src/components/atomic-crm/root/logos/에 위치하며,defaultConfiguration.ts에서 모듈 에셋으로 가져옵니다(Vite가 JS 청크를 기준으로 URL을 해석하므로/oauth/consent와 같은 중첩 경로 및 하위 경로 배포에서도 정상 작동합니다).logo_atomic_crm_dark.svg는 어두운 모드 + 모든 인증 페이지에서 표시되는 밝은 색상의 이미지이며,logo_atomic_crm_light.svg는 라이트 모드에서 표시되는 어두운 색상의 이미지입니다.(사용되지 않는 독립logo_atomic_crm.svg가 여전히public/logos/에 있습니다.)파일 이름은 색상이 아닌 표시되는 모드를 기준으로 지정됩니다 — "다크 모드" 로고는 어두운 배경에서 읽을 수 있어야 합니다.
- 파비콘 + PWA 아이콘 — 요청 시에만 처리합니다. 훨씬 큽니다(34개의 PNG); 아래 파비콘 및 앱 아이콘(선택 사항)을 참조하세요.
코드 기본값과 런타임 설정 — 충돌
- 코드 기본값(이 스킬):
defaultConfiguration.ts+ 에셋을 편집합니다. 커밋되며, 모든 곳에 적용되고 브라우저 탭 제목/파비콘/PWA 아이콘을 변경하는 유일한 방법입니다. - 설정 UI(
/settings→ 브랜딩,SettingsPage.tsx): 로그인한 사용자가 제목을 편집하고 로고를 업로드하며, 브라우저별로 설정이localStorage에CRM.app.configuration으로 저장되고(로고는 base64), 커밋되지 않습니다. 인앱 로고 + 헤더 제목만 다룹니다.
⚠️ 스토어가 코드를 가립니다.
useConfigurationContext는{ ...defaultConfiguration, ...storedConfig }를 반환합니다(ConfigurationContext.tsx)./settings를 통해 브랜딩이 저장된 적이 있다면defaultConfiguration.ts편집 내용이 해당 브라우저에 표시되지 않습니다 —CRM.app.configurationlocalStorage 키를 지우세요. 코드 변경이 시각적 효과가 없을 때마다 이를 의심하세요.
단계
- 에셋을 수집하세요. 파일/URL, 형식(SVG 대 PNG), 라이트/다크 변형이 별도로 있는지 아니면 하나의 이미지만 있는지 물어보세요.
- 변형이 하나인 경우 → 두 설정 키 모두에 설정하고, 하나의 테마에서 대비가 나쁠 수 있음을 경고하세요(인증 페이지는 항상 다크 모드 키를 사용합니다).
- 단일 채움 SVG인 경우 → 채움색을 교체하여(
흰색↔검은색) 다른 변형을 유도하세요.
- 파일을 배치하세요.
src/components/atomic-crm/root/logos/에:- 드롭인(가장 간단함):
logo_atomic_crm_dark.svg/logo_atomic_crm_light.svg를 정확한 파일 이름 +.svg를 유지하며 덮어씁니다.defaultConfiguration.ts의 가져오기 문이 이미 이곳을 가리킵니다 — 완료입니다.(SVG만 해당.) - 새 이름/형식(예: PNG): 기존 파일 옆에 새 파일로 저장한 다음,
defaultConfiguration.ts상단의 두import문을 업데이트합니다(이들은defaultDarkModeLogo/defaultLightModeLogo를 제공하며, 모듈 상대 경로이므로"./logos/<file>"형식입니다). 절대 이를 단순 공개 경로 문자열로 되돌리지 마세요 — 이는 issue #291을 재발시킵니다.
- 드롭인(가장 간단함):
- 제목 업데이트(이름이 변경된 경우) 세 곳 모두에서 —
defaultTitle은 첫 번째만 제어합니다:defaultConfiguration.ts→defaultTitle— 헤더<h1>+ 로고alt.index.html→<title>— 브라우저 탭 제목(하드코딩, 런타임에 설정되지 않음).public/manifest.json→short_name+name— 설치된 PWA 이름.
소비자(설정 키를 유지하면 편집 불필요): layout/Header.tsx + dashboard/MobileDashboard.tsx는 두 변형을 모두 렌더링하고(CSS 전환, h-6), login/{LoginPage,SignupPage,ConfirmationRequired}.tsx는 오직 darkModeLogo만 렌더링합니다.
합리화
| 합리화 | 현실 |
|---|---|
| "로고 파일만 바꾸면 그게 전부입니다." | 로고는 두 테마로 다섯 화면에 표시되고 제목은 세 파일에 있습니다. 하나만 수정하면 오래된 변형이 남습니다. |
| "코드 변경이 시각적 효과가 없으므로 적용되지 않았습니다." | /settings 스토어가 브라우저별로 defaultConfiguration.ts를 가립니다. CRM.app.configuration localStorage 키를 지우세요. |
| "하나의 이미지로 두 테모에 충분합니다." | 인증 페이지는 항상 다크 모드 키를 사용합니다. 단일 에셋은 한 배경에서 잘못 읽힙니다. 경고하거나 두 번째 변형을 유도하세요. |
| "파비콘 크기 몇 개만 다시 생성하겠습니다." | PWA 세트는 34개의 PNG입니다. 하나의 소스에서 모든 크기를 다시 생성하거나 세트 전체를 요청하세요. 일부만 수동 편집하지 마세요. |
위험 신호
- 로고 에셋 키 중 하나만 편집하거나 라이트/다크 파일을 바꾸는 경우.
defaultConfiguration.ts에서 제목을 변경했지만index.html과manifest.json에서는 변경하지 않은 경우.- 코드 변경이 시각적 효과가 없는데
CRM.app.configuration스토어를 지우지 않은 경우. - 전체 세트를 다시 생성하는 대신 파비콘/PWA 크기 일부를 수동 편집하는 경우.
- 요청되지 않은 문서 사이트 로고(
doc/)를 건드리는 경우.
확인
make typecheck는 설정 키 오타만 잡아냅니다. 그런 다음 make start를 실행하고 확인하세요: 두 테마 모두의 헤더, 데스크톱 + 모바일; 로그인/회원가입 페이지(어두운 배경); 제목이 변경된 경우 헤더 <h1>, 브라우저 탭, PWA 이름. 정확히 한 테마에서 로고가 잘못 표시되면 두 키가 하나의 에셋을 가리키거나 라이트/다크 파일이 바뀐 것입니다.
- 두 로고 변형이 올바른 라이트/다크 에셋(색상이 아닌 표시 모드로 이름 지정)을 가리킵니다.
- 로고가 두 테마 모두, 데스크톱 + 모바일, 로그인/회원가입/확인 페이지에 렌더링됩니다.
- 이름이 변경된 경우 제목이
defaultConfiguration.ts,index.html,manifest.json에서 업데이트됩니다. - 시각적 효과가 없으면
CRM.app.configurationlocalStorage 키가 지워졌습니다. - 파비콘/PWA 아이콘이 명시적으로 요청된 경우에만 전체 세트로 다시 생성되었습니다.
파비콘 및 앱 아이콘 (선택 사항)
요청 시에만 처리합니다. index.html + public/manifest.json에서 참조: public/favicon.ico 및 public/appIcon/*.png (maskable_icon* 포함 34개 크기). 하나의 정사각형 소스(sharp / pwa-asset-generator)에서 모든 크기를 다시 생성하거나 사용자에게 세트를 요청하세요 — 일부만 수동 편집하지 마세요. 먼저 범위를 확인하세요. manifest.json의 theme_color/background_color도 업데이트해야 할 수 있습니다.
문서 사이트 로고(
doc/astro.config.mjs→doc/public/logo_atomic_crm_*.svg)는 별도의 Astro 사이트입니다 — 요청하지 않는 한 건드리지 마세요.