Leyve Docs

다크모드

프로필 관리 — FE 메인테이너 ​

라우트와 구성 ​

적용 라우트는 다음 6개다.

  • /administration/organization/profile/{general,business}
  • /administration/user/profile/{general,business}
  • /administration/billing/profile/{general,business}

각 IndexView.vue는 도메인별 HeaderOrg.vue와 MainOrg.vue를 조합한다.

  • 공통 헤더: src/components/administration/shared/ProfileHeaderOrg.vue
  • 공통 카드 편집: src/components/administration/shared/InlineProfileSectionsOrg.vue
  • 모바일 Company 메뉴: src/components/headquarters/AppAsideOrg.vue

EDS v1 적용 규칙 ​

  • @leysys/eds@1.0.0의 page-header, tabs-list, badge, disclosure, table, field, button 어휘를 사용한다.
  • 헤더 메타는 page-header-meta 안에서 모바일 1열·sm 이상 2열인 유틸리티 그리드로 조합한다. 고정 2열 meta-description을 모바일에 직접 사용해 내부 가로 스크롤을 만들지 않는다.
  • 모든 flex 스크롤 경계에는 min-w-0를 두고 페이지 본문은 overflow-x-hidden으로 화면 전체 좌우 이동을 막는다.
  • 완료 표시는 주 행동이 아니므로 badge-success-subtle을 사용한다. badge-success-bold로 탭 선택 상태와 경쟁시키지 않는다.
  • 정적 프로필 표는 table-md를 사용하고, 첫 열은 모바일 w-1/3, sm 이상 w-1/5로 유지한다.
  • 카드별 편집 컨트롤은 disclosure-footer 한 곳에 둔다. 안내문은 줄바꿈할 수 있고 버튼 묶음은 shrink-0로 유지한다.
  • 사이드바 메뉴는 v1 sidebar-menu-md 바깥 여백을 제품 레이아웃의 px-2로 확보한다. DS 내부 선택자나 토큰을 덮어쓰지 않는다.

상태 흐름 ​

InlineProfileSectionsOrg.vue는 섹션별 editing, 필드별 draftValue를 소유한다.

  • 편집: 원본을 draft로 동기화
  • 취소: dirty이면 확인 후 draft 초기화
  • 저장: dirty && valid일 때만 원본 값 갱신
  • 읽기 전용 필드: 입력을 비활성화하고 dirty·valid 계산에서 변경 대상으로 보지 않음

테스트 ​

  • src/components/administration/shared/__tests__/ProfileHeaderOrg.spec.js
  • src/components/administration/shared/__tests__/InlineProfileSectionsOrg.spec.js

모바일 수동 검증은 360px 폭에서 헤더 메타 가로 스크롤 부재, 카드 내 긴 주소 줄바꿈, 푸터 편집 버튼 정렬, 본사 메뉴 우측 화살표 여백을 확인한다.