목차

🥊 클론 코딩 챌린지 - 멀티 스텝 폼

현재 진행중인 프론트엔드 스터디에서 JavaScript 회차에 들어온 상황에, 기존에 했던 챌린지들은 React로 만들어갔다면 다시금 기초를 다지기 위해 JavaScript로 페이지를 구현하는 연습을 해보고 싶었다.

이번 챌린지는 바로 그 순수 JavaScript와 CSS의 프레임워크였던 Tailwind CSS를 이용해 멀티 스텝 폼을 만드는 연습을 시도해봤다.

제공된 챌린지 예시 1 - 데스크탑 화면

제공된 챌린지 예시 2 - 데스크탑 내 활성될 조건

챌린지 내용에는 모바일 화면도 함께 구현하는 게 원칙이라, 아래의 모바일 화면도 구현했다.

제공된 챌린지 예시 3 - 모바일 기본 화면

제공된 챌린지 예시 4 - 옵션 선택 화면

이번에도 진행에 앞서 제작할 때 고려할 사항들을 간단하게 일부 정리해봤다.

• 모바일
  • 모바일 영역에서는 스텝 안내 영역이 좌측이 아닌 상단으로 향함.
  • 이전, 다음 페이지로 이동하는 영역이 하단 bar로 고정됨.
  • step1 유효성 검사에서 label 옆에 나오는 영역에 과연 모든 에러 메시지가 다 출력이 될까?
• PC 브라우저
  • 모바일 영역에서는 스텝 안내 영역이 상단이 아닌 좌측으로 향함.
  • 이전, 다음 페이지로 이동하는 영역이 문서 내부로 고정됨.
• 추가로 고려해볼 것
  • step2의 연 구독 ↔ 월 구독 전환을 Tailwind CSS를 통해 어떻게 하면 animation을 부여할 수 있을지?
  • 페이지별로 유저가 선택한 사항에 따라 조건들이 시시각각 변화하고 각 페이지별로 다 적용되어야 하는데 어떻게 하면 구현할 수 있을지?
  • step4에 유저가 선택한 모든 정보가 출력되어야 함.

이외에도 다양하게 고려했던 사항이 있지만, 크게 봤던 부분들은 이 정도였던 것 같다. 이 점들을 우선적으로 생각하면서 이번 챌린지 구현을 진행했다.

✅ 챌린지한 결과

이번 챌린지의 가장 큰 단점이라면 시간을 질질 끌었다라는 것이었다. 아르바이트로 인한 피로 누적, 그리고 집중력 저하와 놀고 싶었던 마음이 가득해서 그런지 챌린지를 시작한 이후로 한동안 계속 방치해두고 딴 짓을 많이 하고 있었다.

그래서 레포지토리를 파두고 2-3주나 방치해서 좀 죄책감이 있었지만.. 집중력이 다시 오른 이후부터는 위에 생각한 조건들을 어떻게 풀어나가면 좋을지 고민하면서 제작해봤다.