모임/지출 생성 UI 관련 QA 반영

[yoouyeon]

📝 관련 이슈

• close 모임/지출 생성 UI 관련 QA 반영 #108

💻 작업 내용

문정님이 올려주신 노션의 UI QA 사항을 반영했습니다!! (내심 신경쓰였던 부분이라 후딱 작업했어용...)

1. 참여자 입력 창에서 input 버튼이 밀려나가던 문제

input의 늘어남 정도를 부모 컴포넌트에 맞추도록 min-width: 0 속성을 넣어주었습니다!
(추가로 지출 입력창에서 보니 너비가 좁아졌을 때 아이콘 사라지는 문제도 있어서, 아이콘은 줄어들지 않도록 해줬어요)

2. 지출 입력창에서 프로필이 작아지는 문제

프로필과 금액 사이의 기본 gap이 너무 넓었어서 발생한 문제라 clamp를 이용해서 반응형으로 gap을 조절하도록 했습니다!
추가로 프로필과 글자 모두 줄어들지 않도록 해줬어요

3. 스크롤이 여백 없이 올라가던 문제

카드를 기준으로 스크롤하던 것을 상단에 더미 컴포넌트를 두고 그쪽을 타겟으로 삼도록 했습니다...! (좋은 방법인진,, 모르겠어요..ㅎㅎㅜ)

📸 스크린샷

AS-IS	TO-BE
Screen_Shot.2025-02-22.02.50.28.mov	Screen_Shot.2025-02-22.03.08.48.mov

AS-IS	TO-BE
Screen_Shot.2025-02-22.03.15.40.mov	Screen_Shot.2025-02-22.03.18.02.mov

[ongheong]

오홍 좋습니다 !! 이전 이후 둘 다 영상 찍어주셔서 차이가 한눈에 확 들어오네요..!!