[FE] 지출 추가에서 입력된 금액이 없을 시 layout이 변경되는 문제

[Todari]

issue

• close [FE] 지출 추가에서 입력된 금액이 없을 시 layout이 변경되는 문제 #630

구현 목적

지출 추가 시 금액이 없는 경우 Text의 값이 없어 공간을 차지하지 않게 되면서
아래와 같이 layout이 변경됩니다.

2024-09-25.4.08.55.mov

구현 내용

값이 없는 경우에도 "0" 값을 이용하여 가상의 placeholder를 구현하였습니다.
이로 인해 layout이 변경되지 않습니다.

🫡 참고사항

input과 비슷하게 작동을 하는 AmountInput component이지만 NumberKeyboard를 사용하기 때문에 실제 input으로 구현하지는 않았습니다.
하지만 추후 접근성을 위해서라면 input 태그를 사용하는 방식으로 변경해야 할 것 같은데 어떻게 생각하시나요? 이 component는 input일까요? 그냥 값을 보여주는 div일까요?

Top/Linte.tsx와 Top/EditableLine.tsx,
Amount/Amount와 Amount/EditableAmount.tsx의 차이점을 보시면
쉽게 이해가 되실 것이라 생각합니다~

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-rlikufkswo.chromatic.com/

[jinhokim98]

제 생각에는 키패드를 이용해서 값을 입력하는 것이니 input이라 생각됩니다.
접근성을 고려한다면 확실히 input태그를 사용하는 것이 좋아보여요. readonly 속성을 걸어서 키보드로 못 하게 막으면 될 것 같아요

[soi-ha]

input이 맞다고 생각하긴 해요! 근데 또 NumberKeyboard가 아니면 input에 입력을 못해서.. 흠
하지만 일단은? 고냥 div로 박아버립시댜

[pakxe]

접근성을 생각하면 아무래도 input이 좋을 것 같네요