[Feat/#22] 영수증 인식 정보 수정 UI 제작

[sikkzz]

• [Feature] 영수증 인식 정보 수정 UI 제작 #22

💡 변경사항 & 이슈

영수증 인식 정보 수정 UI 제작

✍️ 관련 설명

ui랑 일부 기능들만 구성했는데 이후에 좀 바뀔 부분들이 있을 수도 있을 거 같아

우선 이전에 논의했던게 이 페이지에서 오는 정보가 꼭 가게명, 음식명이 아닌 경우도 있을 거라 했거든? 그래서 이 부분에 대한 정책이 확정나면
컴포넌트 렌더링 방식이나 로직이 좀 변경 될 여지가 있어

그리고 focus 로직은 현재 방식이 최선인 거 같아서 일단 구성을 했는데, 이 input의 경우 primary variant만 해당되는 내용인데 input 밖으로
div 박스가 하나 덮고 있는데 focus시 border가 div 전체가 바뀌어야 해서 input에서 기본적으로 제공하는 focus 로직을 못쓰겠더라구?
그래서 state로 관리하는 방식으로 구성했는데 혹시 더 좋은 의견이나 개선점 있으면 얘기해줘!

그리고 Title 부분도 디자인 정책상 원하는게 가게 이름에 말줄임표를 원하는 거 같아서 Text 컴포넌트를 분리해서 구성할 수 밖에 없었는데 이거도 더 좋은 방법이 있으면 얘기해줘!

수정 시 키보드가 올라오고 위에 버튼도 정상적으로 올라오는지는 이후에 네이티브에서 다시 확인을 해봐야 할 거 같아~~

전체적으로 컴포넌트를 좀 더 분리해서 렌더링 최적화도 할 수 있겠지만 이건 이후에 api 연결되고 data 가공 과정에서 한번 더 리팩토링 할 생각이야 우선은 UI 요구사항에 맞춰놓은 상태인거로 이해하면 될 거 같아

⭐️ Review point

• focus 관련 로직 개선점
• title 관련 로직 개선점
• 이외 추가 의견

📷 Demo

[github-actions]

🧷 Storybook: https://6798a432c75b75bf6b81bc26-isbrmyntxd.chromatic.com/

⏰ Update: 2025년 02월 01일 16시 20분

[lgrin-byte]

선생님,,, 진도가 넘 빨라요,,오빠 이제 쉬어도 될 거 같애,,, 수고많았어!!!