[인프런 워밍업 클럽 0기] 2주차 발자국 👣

이번 발자국은 과제 진행 과정을 작성해 볼 예정이다. 목차는 다음과 같다.

1. 기능 목록 작성
2. 공통 컴포넌트 구현
3. 결과물
4. 고민했던 부분

✅️ 1. 기능 목록 작성

1. 항목 추가/수정할 수 있다.

지출 항목 + 비용을 입력받는다 (조건을 만족할 때까지)
- 지출 항목은 문자열이여야 한다.
- 비용은 숫자여야 한다.
- 지출 항목 + 비용 모두 입력되어야 한다. (공백 제외)
조건을 만족할 경우, 버튼이 enable 된다.
추가/수정을 완료했을 경우, toast 메시지를 띄워준다.

2. 항목 리스트를 보여준다. (테이블 형식)

각 항목(row) 마다 수정/삭제 버튼이 존재한다.
- 수정 버튼을 누른 경우
  - [ 기능목록 1. 항목 추가/수정할 수 있다 ] 로 이동한다.
- 삭제 버튼을 누른 경우
  - 항목이 삭제되며, toast 메시지를 띄워준다.
총 지출 금액을 보여준다.
항목 리스트가 없을 경우, '존재하지 않습니다' 를 보여준다.

3. 모든 항목을 삭제할 수 있다.

목록 지우기 버튼을 누른 경우
- 모든 항목이 삭제되며, toast 메시지를 띄워준다.

✅ 2. 공통 컴포넌트 구현

MUI와 같은 UI 라이브러리를 쓰지 않고, tailwind css로만 구현할 것이기에, 필요한 컴포넌트는 직접 만들어야한다.

먼저 공통된 디자인을 위해 rounded만을 사용하고자 했다. ( 컴포넌트마다 rounded를 다 다르게 사용하지 않는다)
색상은 emerald + slate 만을 최대한 사용했다. 그렇게 해서 필요한 컴포넌트는 다음과 같다.

Outlined Input
1. 시간을 투자한 부분이다. 기본 html의 input은 굉장히 단순하기에 커스텀이 필요했다.
2. focus 했을 때, label 을 input 박스 위로 가게 하고, 부드러운 애니메이션을 넣고자 했다.
Contained Button + Text Button
1. 배경을 채운 Contained Button
2. 오직 text 만 존재하는 Text Button
Table
1. 기본 table에 css만 추가했다.
Toast 메시지
1. success : 초록색 체크 아이콘
  1. 추가, 수정, 삭제가 성공적으로 완료되었음을 표시한다.
2. warn : 노란색 경고 아이콘
  1. 입력값의 유효성검사가 일치하지 않을때 표시한다.

✅ 3. 결과물

✅ 4. 고민했던 부분

지출 항목이 문자여야하는데, 이를 어떻게 판별하는가? 이다.

애매한 부분이 지출 항목이 "맥북 pro 16" 처럼 오직 문자 type으로 이뤄지지 않고, 여러 type이 같이 존재할 수 있다. 그래서 이걸 어떻게 예외처리 해줄지 고민했었는데, 일단은 지출 항목을 절대 숫자로만 이뤄지지는 않을 것 같아서, isNaN()만을 판별했다. 이 부분은 고민이 더 필요할 것 같다..

toast 메시지의 색상을 어떻게 할 것인가? 이다.

상품을 "삭제" 했을 경우, toast 메시지의 아이콘 색상을 고민했었다.

빨간색 -> 부정적 의미 -> 삭제와 연관된다! -> 그러나 error 와도 연관됨 -> 사용자 입장에서 "에러가 났다..!" 로 혼동할 수 있음.
초록색 -> 삭제가 완료되었다! 에 의미를 둠-> 그러나, 추가, 수정, 삭제도 어쨌든 완료
이기에, 다른 기능임에도 아이콘 색상이 같아서 구별이 어렵다는 문제가 존재함.

고민 끝에 error와 연관되는 빨간색보다는 초록색으로 가되, "추가", "수정", "삭제" text 를 크고 두껍게 처리해주는 것으로 합의를 보았다!

후기

UI 라이브러리만 사용하다가, tailwind css로 직접 컴포넌트를 만드니까, 생각보다 시간이 오래 걸렸다. 중간에 계속 애니메이션도 적용된 라이브러리를 사용하고 싶었지만, 이를 css로(비록 tailwind css지만) 직접 완성시켰을때 상당히 뿌듯했다!

또한, 기능목록을 제대로 작성한건지 모르겠다. 조금 더 깔끔하게 작성하고 싶은데, 어디까지 자세하게 적어야하는지, ui 부분도 자세하게 적어야하는지(버튼 색깔이 바뀐다거나)를 잘 모르겠다. 더 공부해봐야겠다!