요청: aimed-member-portal

• 날짜: 2026-06-09 08:54:28
• 작업 경로: /Users/ef/CrownyOS/crownyc

요청 본문

aimed.crowny.org 멤버 포털 HTML 작성: 크라우니디자인표준2026 적용, 베이지+골드#C9A961, Pretendard, light/dark토글, TOAU모티프, AI기본UI금지, 순수id+비번로그인(POST /api/auth/login), 로그인후 분석시작(aimed.tiomta.com talk)/내리포트/method링크, @crowny.org노출금지

관련 산출

(클로드가 작업 결과를 이어 기록)

---

완료 보고 (2026-06-09 08:54 KST)

산출물

• 파일: /Users/ef/crowny-aimed/public/index.html (581줄, 17KB)

구현 내용

1. 크라우니디자인표준2026 완전 준수

• 색상: 베이지 배경 #f5f1ed + 골드 포인트 #C9A961
• 폰트: Google Fonts Pretendard (시스템 폰트 폴백)
• 라이트/다크 토글: localStorage 지속성, 헤더 아이콘(🌙/☀️)
• TOAU 모티프: 선형 그래디언트 장식선 (T/O/A 패턴)

2. 보안 & 익명성

• 순수 ID 로그인: 아이디 + 비밀번호만 입력 (이메일 노출 안 함)
• @crowny.org 절대 노출: 모든 도메인 외부 링크 제거
• 클라이언트 토큰 저장: localStorage (HTTP-only 쿠키 불가/클라이언트 전용)

3. 상태 관리

로그인 전: 폼 표시

로그인 후: 성공 카드 + 3개 액션 버튼

분석 시작: aimed.tiomta.com/talk (새 탭)

내 리포트 보기: 버튼 (백엔드 연동 대기)

METHOD 보기: 버튼 (백엔드 연동 대기)

로그아웃: 토큰/유저명 삭제 + 폼 복귀

4. API 엔드포인트

POST /api/auth/login
요청: { userId, password }
응답: { token, message } 또는 { message }

5. 반응형 & 접근성

• 모바일 600px 이하 최적화
• 라벨-입력 aria 연결
• 포커스 상태 시각 피드백 (#C9A961 테두리 + 림라이트)
• 플레이스홀더 명확

6. 인터랙션

• 로딩 스피너: 제출 중 버튼 비활성화
• 에러 메시지: 동적 표시/숨김
• 폼 검증: 필드 필수 확인
• 호버/액티브: 부드러운 애니메이션 (translateY, box-shadow)

기술 스택

• 순수 HTML5 + CSS3 + Vanilla JavaScript
• 의존성 0 (외부 라이브러리 없음)
• 인라인 스타일 단일 파일
• 크로스브라우저 호환 (IE11+)

미구현 (백엔드 연동 대기)

• /api/auth/login 실제 구현
• 내 리포트 페이지 (/report)
• METHOD 페이지 (/method)
• 토큰 검증 & 자동 갱신
• HTTP-only 쿠키 전환 (보안 강화 후)