物品返却時の画面作成 #64

oER4 · 2025-06-11T10:24:08Z

やったこと

ページの作成
figma上でのロゴのインポート
コンポーネント・テキストの配置

やってないこと

ボタンを種別に当てはめるスタイルを変える工程(colorとweight)
Textinputの挿入(実装待ち)

cp-20

いくつかコメントしましたー

cp-20 · 2025-06-11T10:47:37Z

public/550 1.jpg

名前に空白入るの良くなさそう & もっと分かりやすい名前にすると良さそう & jpg どこでも使ってなさそう

cp-20 · 2025-06-11T10:48:30Z

src/router/index.ts

@@ -1,6 +1,8 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { createRouter, createWebHistory } from 'vue-router';
 import registerView from '@/pages/registerView.vue';
+import returnCheck from '@/pages/ReturnCheck.vue';
+import returnCheckok from '@/pages/ReturnCheckOK.vue';


コンポーネントはパスカルケースの方が良いかも (ReturnCheckOK みたいな)

これ他のも統一しちゃうね

cp-20 · 2025-06-11T10:49:20Z

src/pages/ReturnCheckOK.vue

+
+<script lang="ts" setup>
+import MainHeader from '@/shared/lib/components/MainHeader.vue';
+import returnSvg from '/mdi_check-circle.svg';


import するなら public フォルダではなく src/assets 配下に入れておくのが良いかも

cp-20 · 2025-06-11T10:57:36Z

src/router/index.ts

@@ -15,6 +17,16 @@ const routes: RouteRecordRaw[] = [
    name: 'register',
    component: registerView,
  },
+  {
+    path: '/return-check',
+    name: 'return-check',


パスに物品IDとかは含まないのかな？

含むべきではある、けどAPI完成してないから単に加えていないだけだね

最初からAPI完成してる前提のルーティングしておいた方が良さそう

productTitle は衝突しないことが保証されてるのかな？

cp-20 · 2025-06-11T10:59:43Z

src/pages/ReturnCheckOK.vue

+<template>
+  <div><MainHeader></MainHeader></div>
+  <div :class="$style['svgContainer']">
+    <img :src="returnSvg" alt="QR Code" :class="$style['svgImage']" />


alt="QR Code" はどういう意図なんだろう？　たぶん alt="" にしておくのが良いと思います

あ、alt(空白)可能なのを知らんかったです

alt はその画像をそのテキストに置換したときに意味が伝わるものにすることを意識して決めると良いです👍

(逆に装飾目的の画像なら alt="" で良い)

cp-20 · 2025-06-11T11:01:27Z

src/pages/ReturnCheck.vue

+
+// APIが完成するまでのダミーデータ
+const userName = 'o_ER4';
+const bookTitle = 'Vue.js入門';


book ではなく product の方が良いかな？　本以外にも物品はあるので

cp-20 · 2025-06-11T11:01:55Z

src/pages/ReturnCheck.vue

+        <ChipCard :label="label1" />
+        <ChipCard :label="label2" />


ここでラベルが変数化されてるのはどういう意図があるんだろう？ (ここにどういう文言が入り得る？)

なんかAPI値習得するかとか頭バグって考えていそう(今見れば深い意味ないのでlabelは直書きしちゃいます)

oER4 · 2025-06-11T14:34:04Z

おきもち程度にAPIとの接合部分書きました
あまりAPIとの接合に慣れていないので、指摘があったら欲しいです

cp-20

API周りについてちょっとコメントしましたー

cp-20 · 2025-06-11T15:20:37Z

public/returnicon.svg

return-icon みたいな感じでケバブケースにしても良いかも (もう1つのアイコンも同じく)

cp-20 · 2025-06-11T15:34:46Z

src/pages/ReturnCheck.vue

+      <strong v-if="userName">{{ userName }}</strong>
+      <span v-else>ユーザー情報</span> さんに「<strong v-if="productTitle">{{


userName === '' の時の挙動は「ユーザー情報」と表示されるのはユーザーにとってはあんまり嬉しくなさそう？　userName === '' はAPIから値を取得中のときだと思うんだけど、その時にどういう表示になってるとユーザーが嬉しいかを考えてみると良さそう

他の部分も同じく

以下いくつかアイデア　それぞれのメリットデメリットは自分で考えてみてください

取得中は画面全体を表示しない

一瞬白い画面を許容する

取得中はこのメッセージを表示しない

画面に後からポッと出てくる感じ

メッセージごとに個別に出てくるのか、一緒に出てくるのかはまた考える必要がある

メッセージにスケルトンを入れる

スケルトン = この部分が読み込み中ですよー、というのをユーザーに示すためのもの

今はこの実装っぽくなってそうだけど、「ユーザー情報」という文字列を見てユーザーはスケルトンと認識できなさそう...？

cp-20 · 2025-06-11T15:35:32Z

src/router/index.ts

@@ -15,6 +17,16 @@ const routes: RouteRecordRaw[] = [
    name: 'register',
    component: registerView,
  },
+  {
+    path: '/return-check',
+    name: 'return-check',


productTitle は衝突しないことが保証されてるのかな？

cp-20 · 2025-06-11T15:36:30Z

src/router/index.ts

+    path: '/return-check/ok',
+    name: 'return-check-ok',
+    component: ReturnCheckOk,


/return-check と同じくだけど、こっちは必ず /return-check/ok に返ってくるという実装でも良さそう (ユーザーごとのデータとかを表示しないなら)

cp-20 · 2025-06-11T15:37:37Z

src/pages/ReturnCheckOK.vue

+  <div :class="$style['svgContainer']">
+    <img :src="returnSvg" alt="QR Code" :class="$style['svgImage']" />
+  </div>
+  <div>返却されました</div>


デザインにないことを注文して申し訳ないんだけど、もし良かったら物品詳細への動線とかを置いておくと良さそう

らじゃ、作ったらfigmaのデザインにも反映させときます
あと多分その手の変更がほかにも生じそう
今ありそうなのはreturncheckの返却における処理失敗の表示とか

cp-20

API周りについてちょっとコメントしましたー

create page

91c0498

oER4 requested a review from cp-20 June 11, 2025 10:25

fix format

fee1eab

cp-20 reviewed Jun 11, 2025

View reviewed changes

oER4 added 4 commits June 11, 2025 23:13

fix name

f0be5fc

add querypass

31d2e86

fix root param

a62155d

fix param

5176c2c

remove css

0621a8c

cp-20 reviewed Jun 11, 2025

View reviewed changes

		<strong v-if="userName">{{ userName }}</strong>
		<span v-else>ユーザー情報</span> さんに「<strong v-if="productTitle">{{

物品返却時の画面作成 #64

Are you sure you want to change the base?

物品返却時の画面作成 #64

Uh oh!

Conversation

oER4 commented Jun 11, 2025

やったこと

やってないこと

Uh oh!

cp-20 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oER4 commented Jun 11, 2025

Uh oh!

cp-20 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cp-20 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!