入出金作成ページを Figma に合わせる

[anko9801]

• InputRadioButton コンポーネントを変更しました。他に入出金詳細ページの編集時のみに使われていて見た目は大丈夫そうです。

入出金作成ページの Figma のリンク

[mehm8128]

修正完了したら再レビュー投げてほしいです

[mehm8128]

/improve

[github-actions]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible issue	取引相手が1人の場合の削除を防ぐロジックを復元する。 handleRemoveTarget 関数で、取引相手が1人の場合に削除を防ぐロジックが削除されました。これにより、取引相手が1人の場合でも削除できてしまいます。このロジックを復元することを提案します。 src/components/newTransaction/NewTransactionTarget.vue [22-25] function handleRemoveTarget(index: number) { + if (props.targets.length === 1) { + alert('取引相手は1人以上必要です'); + return; + } emit( 'input', props.targets.filter((_, i) => i !== index) Suggestion importance[1-10]: 9 Why: The suggestion addresses a critical issue where the logic to prevent deleting the last target was removed. Restoring this logic is important to ensure that at least one target remains, preventing potential user errors.	9
Enhancement	空の取引相手を追加する前に既存の空フィールドをチェックする。 handleAddTarget 関数で新しい取引相手を追加する際に、空の文字列を追加していますが、これによりユーザーが意図しない空の入力フィールドが作成される可能性があります。ユーザーが新しい取引相手を明示的に追加するまでフィールドを追加しないように修正することを提案します。 src/components/newTransaction/NewTransactionTarget.vue [20-21] function handleAddTarget() { - emit('input', [...props.targets, '']) + if (!props.targets.includes('')) { + emit('input', [...props.targets, '']) + } Suggestion importance[1-10]: 8 Why: This suggestion enhances user experience by preventing the addition of unintended empty input fields, which can lead to confusion and clutter in the UI.	8
Best practice	SimpleButton のプロパティの型安全性を向上させる。 SimpleButton コンポーネントの font-size と padding プロパティが文字列で設定されていますが、これは型安全ではなく、予期しない動作を引き起こす可能性があります。適切な型のプロパティを使用するか、型チェックを追加することを提案します。 src/pages/NewTransactionPage.vue [83-87] <SimpleButton :disabled="isSending" - font-size="md" - padding="md" + :font-size="mediumSize" + :padding="mediumPadding" @click.stop="postTransaction"> Suggestion importance[1-10]: 7 Why: Improving type safety for the SimpleButton component properties is a good practice, but it is not critical. It enhances maintainability and reduces the risk of unexpected behavior.	7
Accessibility	新規作成フォームのアクセシビリティを向上させるために id 属性を追加する。 新規作成ページのフォームに id 属性を追加することで、フォームのアクセシビリティを向上させることができます。これにより、スクリーンリーダーや自動テストツールがフォームをより簡単に識別できるようになります。 src/pages/NewTransactionPage.vue [48] -<form class="flex flex-col gap-6"> +<form id="new-transaction-form" class="flex flex-col gap-6"> Suggestion importance[1-10]: 6 Why: Adding an id attribute to the form improves accessibility, making it easier for screen readers and automated testing tools to identify the form. This is a beneficial enhancement but not crucial.	6

[mehm8128]

できればSimpleButton使ってほしいです

[mehm8128]

CI通ったらOKです
ボタンのやつだけissueかPR立てておいてほしいです🙏

[mehm8128]

minとかも明示してたのでどっちでもいいのですが、一応Vueの場合はpropsで明示していないものでも<input-number id="aaa" />ってしたらInputNumberの一番上の要素(今回はinput要素)に勝手に受け継いでくれる気がします

[anko9801]

僕の環境だと受け継がなくて入れた覚えがあります