계정 보안 페이지 — FE 메인테이너 매뉴얼

라우트와 컴포넌트

• 계정 일반 라우트: /administration/user/account/general
• 계정 일반 본문: src/components/administration/user/account/general/MainOrg.vue
• 라우트: /administration/user/account/security
• 뷰: src/views/administration/user/account/security/IndexView.vue
• 본문: src/components/administration/user/account/security/MainOrg.vue
• 변경 다이얼로그: overlays/SheetUpdatePasswordArt.vue
• 인증 저장소: src/composables/passwordAuthRepo.js
• 세션 종료: src/composables/authSession.js

파일명은 레거시 호환 때문에 SheetUpdatePasswordArt.vue를 유지하지만 실제 표면은 보안 변경에 맞는 dialog다. 현재 패스워드 재인증과 전체 세션 종료가 뒤따르는 고영향 커밋이므로 인라인 편집 대신 다이얼로그 예외를 사용한다.

계정 일반은 단일 정보 카드이므로 반대로 별도 Read/Update 시트를 사용하지 않는다. 카드 footer의 편집이 본문을 정적 테이블에서 field + input-bordered 폼으로 전환하고, dirty && valid일 때만 저장을 허용한다. 취소는 변경분이 있을 때 확인 후 draft를 폐기한다. 같은 규칙을 빌링 계정 기본정보 카드에도 적용한다.

개인·Company·빌링 프로필 6개 페이지는 src/components/administration/shared/InlineProfileSectionsOrg.vue를 공통 소비한다. 이 organism이 disclosure의 read↔edit, 2열 반응형 필드 그리드, 등록번호 등 비편집 필드, footer 제어를 소유한다. 페이지 MainOrg는 섹션과 필드 데이터만 선언하며 Read/Update 시트를 마운트하지 않는다.

상태와 데이터 흐름

1. currentPassword, newPassword, newPasswordConfirmation은 컴포넌트 메모리에만 존재한다.
2. valid는 현재 값 존재, 새 값 8자 이상, 현재 값과 다름, 확인 값 일치를 모두 요구한다.
3. changeCurrentPassword()가 getUser → signInWithPassword → updateUser를 순서대로 실행한다.
4. 성공하면 현재 principal 종류를 먼저 읽고 signOut()한다.
5. 워크스페이스 계정은 /auth/workspace?password=changed, 조직 계정은 /auth/organization?password=changed로 이동한다.
6. 로그인 화면은 성공 안내를 표시하며 새 패스워드를 입력받는다.

다이얼로그 close 이벤트에서 모든 입력·오류·가시성 상태를 초기화한다. 패스워드를 localStorage, URL query, 전역 composable에 넣지 않는다.

디자인 시스템

• 공식 dialog, field, input-group, button, alert 패턴만 사용한다.
• 패스워드 카드의 변경 액션은 대상 바로 아래 card-footer에 둔다.
• 별도 CSS, 로컬 override, !important는 없다.

테스트

• src/composables/__tests__/passwordAuthRepo.spec.js: 재인증·변경·오류 게이트
• src/composables/__tests__/authSession.spec.js: 변경 완료 목적지와 전체 로그아웃
• overlays/__tests__/SheetUpdatePasswordArt.spec.js: 직원·계약 관리자 목적지와 불일치 차단
• user/account/general/__tests__/MainOrg.spec.js: 상세 시트 제거, 인라인 폼 전환, dirty 저장·취소 확인
• shared/__tests__/InlineProfileSectionsOrg.spec.js: 프로필 공통 카드의 비편집 필드, dirty 게이트, 저장 전환