[Issue] WritePage 내역 작성 페이지 구현

[ahddl]

✅ 내역 작성 페이지 구현

📌 위치
WritePage.vue

📝 설명
지출 수입 내역 추가 페이지 (날짜, 카테고리, 금액, 메모 입력)

📋 Todo

• UI 구성

• 수입 / 지출 선택 토글 버튼 구현

• 금액 입력 필드 구성 (숫자만 입력 가능하도록 제한)

• 카테고리 선택 구현

• 지출 장소 입력 필드 구성

• 메모(코멘트) 입력 필드 구현

• 날짜 선택 컴포넌트 구현 (v-date-picker 등 활용)

• Continue 버튼 구성 (입력 완료 후 저장)

• 입력값 검증 및 동작

• 저장 버튼 클릭 시 입력 데이터 저장 처리

• 저장 후 입력 폼 초기화

• 필수 항목 입력 확인 (날짜, 금액, 수입/지출 구분)

• 리스트 출력

• 선택한 날짜 기준 수입/지출 내역 리스트 렌더링

• 리스트 항목에 아이콘, 날짜, 카테고리, 금액, 메모 표시

• 리스트 정렬 (최신순 또는 시간순)

• 각 항목 수정 버튼 구현 (클릭 시 기존 값 입력폼에 세팅)

• 각 항목 삭제 버튼 구현 (삭제 확인 후 제거)

• 수입은 파란색, 지출은 빨간색 등 색상으로 구분

• 기타 UX/UI 개선

• 금액 입력 시 천 단위 쉼표 자동 추가

• 저장 완료 시 Toast 메시지 출력 (예: “저장되었습니다!”)