1/30 TIL | 쉼표 작업 일지 #25. 다 놀았니? 이제 할 일을 하자. 예약 화면 완성!

🔙 이전 시리즈

1/19 TIL | 쉼표 작업 일지 #24. 예약 옵션 페이지 스타일링!

---

작업 회고

1. 예약 옵션 (2/2): 객실 선택 페이지 마크업 및 스타일링

예약옵션(2/2): 객실 선택

휴일동안 그래도 조금씩 해왔던 마크업 & 스타일링 작업. 프로그램 예약 시 호스트가 제공하는 객실도 선택할 수 있는데, 객실 종류와 남은 객실 수량을 볼 수 있다. 객실이 1개 남은 경우, 쉼표의 대표 색상을 사용하여 강조해 주었다.

또한, 수량을 증감시키는 + / - 버튼이 존재하는데, 디자인 상으로 큰 버전과 작은 버전이 존재한다. 처음에는 큰 버전만 그냥 해당 컴포넌트 안에서 스타일링했었는데, 작은 버전까지 그냥 한 번에 관리하면 좋겠다는 생각이 들어 컴포넌트 선언부에서 props로 사이즈를 내려주고, 내려받은 사이즈에 따라 큰 버전, 작은 버전을 출력하게끔 재사용성 있게 만들었다.

2. 예약하기 페이지 마크업 및 스타일링

예약하기 페이지

예약 페이지는 생각보다 많은 양이라 처음엔 걱정했는데, 걱정한 것보다 빠르게 작성되었다. 우선 섹션별로 네 개로 쪼개서 컴포넌트를 분리하고, 마크업과 스타일링을 진행하였다. 여기서는 input 태그와 textarea를 재사용할 수 있게 분리하였다.

---

제곧짤..(제목이 곧 짤ㅎㅎ)

장장 9일간의 휴가를 마치고 오랜만에 작성해 보는 블로그!(물론 블로그는 오랜만에 작성하지만, 그렇다고 기록은 쉬지 않았습니다.. 큼큼..) 그래도 휴가 기간 푹 쉬었다고 오늘 작업을 집중력 있게 진행할 수 있었다. 잘 쉬고 놀았으니 이제 MVP 구현만을 위해서 달려보자!💪