[Design] #28 견주정보 입력 UI 제작

[kimjuyoung99]

✅ PR Checklist

• 불필요한 코드 중복이 없습니다.
• 민감한 정보를 포함하지 않았습니다.
• 불필요한 콘솔 로그나 주석을 포함하지 않았습니다.
• 컴포넌트 key값에 고유한 값을 할당했습니다.

📝 Summary

🔗 ISSUE : #28

• 견주정보 입력 UI 제작
• 아바타 svg 파일 10개를 하나씩 불러오는 것이 불필요하다 느껴 Barrel 패턴을 적용하여 assets 디렉토리에 index파일을 하나 만들어 한꺼번에 export 하였습니다
• 아바타 선택 전 : 버튼 비활성화 / 선택 후 : 버튼 활성화, 컬러 변경
• 아바타 변경 시 아바타 모달에 직전에 선택한 캐릭터 체크표시 유지
• svg파일 몇개가 미묘하게 크기가 작아 따로 스타일 컴포넌트에서 조정 작업 했습니다.
• 성별선택 공통컴포넌트, 스크롤 바 커스텀
• 내일 토스트, 예외처리, 위치등록 구현하겠습니다

🖼️ Screenshots

[github-actions]

⚡ Lighthouse Reports

http://localhost:4173/

Performance Metrics

Category	Score
Performance	🟠 82
Accessibility	🟢 95
Best Practices	🟢 100
SEO	🟢 100

Detailed Metrics

Metric	Value
First Contentful Paint	🟠 2.8 s
Largest Contentful Paint	🔴 4.1 s
Total Blocking Time	🟢 0 ms
Cumulative Layout Shift	🟢 0.008
Speed Index	🟢 2.8 s

Security Checks

Check	Status	Details
CSP-XSS	⚠️	Ensure CSP is effective against XSS attacks

http://localhost:4173/log

Performance Metrics

Category	Score
Performance	🟠 89
Accessibility	🟢 95
Best Practices	🟢 100
SEO	🟢 100

Detailed Metrics

Metric	Value
First Contentful Paint	🟢 1.6 s
Largest Contentful Paint	🟠 3.7 s
Total Blocking Time	🟢 10 ms
Cumulative Layout Shift	🟢 0
Speed Index	🟢 1.6 s

Security Checks

Check	Status	Details
CSP-XSS	⚠️	Ensure CSP is effective against XSS attacks

http://localhost:4173/login

Performance Metrics

Category	Score
Performance	🟢 95
Accessibility	🟢 97
Best Practices	🟢 100
SEO	🟢 92

Detailed Metrics

Metric	Value
First Contentful Paint	🟢 1.6 s
Largest Contentful Paint	🟠 2.8 s
Total Blocking Time	🟢 10 ms
Cumulative Layout Shift	🟢 0.006
Speed Index	🟢 1.6 s

Security Checks

Check	Status	Details
CSP-XSS	⚠️	Ensure CSP is effective against XSS attacks

http://localhost:4173/mypage

Performance Metrics

Category	Score
Performance	🟠 82
Accessibility	🟢 95
Best Practices	🟢 100
SEO	🟢 92

Detailed Metrics

Metric	Value
First Contentful Paint	🟠 1.9 s
Largest Contentful Paint	🔴 4.7 s
Total Blocking Time	🟢 20 ms
Cumulative Layout Shift	🟢 0.002
Speed Index	🟢 1.9 s

Security Checks

Check	Status	Details
CSP-XSS	⚠️	Ensure CSP is effective against XSS attacks

[kimjuyoung99]

@saseungmin
멘토님 리뷰 살짝 부탁드립니다! 특별히 막히는 부분은 없고 그냥 UI 하나 짠 건데 컴포넌트 구조나 CSS 상대단위 잘 쓰고 있는게 맞는지 궁금합니다..!

[saseungmin]

고생하셨어요! 😊