2025년 09월 26일 개발 회고록

error-606·2025년 9월 26일

📋 오늘 작업한 내용

1. PhoneVerificationForm → EmailVerificationForm 리팩토링

  • 목적: 휴대폰 인증에서 이메일 인증으로 기능 변경
  • 작업: 컴포넌트명, 파일명, 폴더명 일괄 변경
  • 결과: 이메일 기반 비밀번호 찾기 기능으로 전환 완료

2. PhoneVerificationPage → EmailVerificationPage 리팩토링

  • 목적: 페이지명도 이메일 인증에 맞게 변경
  • 작업: 폴더명, 컴포넌트명, 라우트 참조 변경
  • 결과: 일관된 네이밍 컨벤션 적용

3. 모달 컴포넌트 아토믹 디자인 패턴 적용

  • 목적: 피그마 디자인에 맞는 모달 시스템 구축
  • 작업: Alert Atom → AlertContent/AlertText Molecule → EmailVerificationSuccessModal Organism 구조 생성

발생한 오류들과 해결 과정

오류 1: 모달 컨텐츠 가운데 정렬 문제

문제: 모달 내부 컨텐츠가 왼쪽으로 쏠려서 표시됨
원인:

  • align-self: stretch 속성으로 인해 컨텐츠가 전체 너비를 차지
  • AlertContainer에 flex 속성이 누락

해결 과정:
1. AlertContainer에 display: flex, align-items: center 추가
2. AlertContent에서 align-self: stretch 제거
3. ButtonContainer에서도 align-self: stretch 제거

결과: 모든 모달 요소가 완벽하게 가운데 정렬됨

오류 2: 아토믹 디자인 원칙 위반

문제: Atom 컴포넌트에서 고정 크기 설정
원인: 피그마 디자인을 그대로 Atom에 적용

해결 과정:
1. Alert, AlertContent, AlertText에서 모든 고정 크기 제거
2. EmailVerificationSuccessModal Organism에서만 구체적 크기 설정
3. 재사용 가능한 Atom/Molecule 구조 완성

결과: 아토믹 디자인 원칙 준수, 재사용성 향상

오류 3: 모달 닫기 동작 문제

문제: 배경 클릭이나 ESC 키로 모달이 닫힘
요구사항: 확인 버튼을 통해서만 모달 닫기

해결 과정:
1. ESC 키 이벤트 리스너 주석 처리
2. AlertOverlay의 onClick에서 preventDefault(), stopPropagation() 적용
3. 사용자 의도적 닫기만 허용

결과: 중요한 알림을 놓치지 않도록 UX 개선

🚀 개선된 점들

1. 아토믹 디자인 패턴 완전 적용

Before: 복잡한 Modal 구조 (Header, Body, Footer 분리)
After: 단순한 Alert 구조 (아이콘 + 컨텐츠)

  • 재사용성 향상
  • 유지보수성 개선
  • 컴포넌트 계층 구조 명확화

2. 피그마 디자인 완벽 구현

Before: 임의의 모달 디자인
After: 피그마 스펙 100% 반영

  • 374px × 234px 정확한 크기
  • 24px border-radius
  • 정확한 색상값 (#0070FF, #151619 등)
  • Pretendard JP 폰트 적용

3. 사용자 경험 개선

Before: 실수로 모달이 닫힐 수 있음
After: 의도적 확인만으로 닫기

  • 중요한 알림 놓침 방지
  • 사용자 의도 명확화

4. 코드 품질 향상

  • TypeScript 타입 안정성
  • CSS Module을 통한 스타일 격리
  • 컴포넌트 재사용성 극대화
  • 린트 에러 0개 달성

다음 개선 사항

1. 모달 애니메이션 개선

  • 현재: 단순 scale + translateY
  • 개선: 더 부드러운 애니메이션, 배경 블러 효과

2. 접근성 개선

  • ARIA 라벨 추가
  • 키보드 네비게이션 강화
  • 스크린 리더 지원

3. 반응형 디자인

  • 모바일 환경에서의 모달 크기 조정
  • 터치 인터랙션 최적화

학습한 점

  1. 아토믹 디자인: Atom은 크기 설정 없이 기본 기능만, Organism에서 구체적 구현
  2. CSS Flexbox: align-self: stretch의 영향력과 align-items: center의 중요성
  3. 사용자 경험: 중요한 액션은 의도적으로만 실행되도록 설계
  4. 컴포넌트 설계: 재사용성과 특수성을 적절히 분리하는 방법
profile
error-606
프론트엔드 연습생
이전 포스트

2025년 9월 25일 개발 회고록

0개의 댓글