birthdayPageの作成 #89
birthdayPageの作成 #89
Conversation
github-actions
bot
added
frontend
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateCalendar
value={birthday}
onChange={(newBirthday) => setBirthday(newBirthday)}
/>
</LocalizationProvider>
<Button variant="contained"
|
ryuseifujisaki
force-pushed
the
feature/fujisaki/87-create-birthdat.tsx
branch
from
dc47081
to
2977a0d
Compare
ryuseifujisaki
force-pushed
the
feature/fujisaki/87-create-birthdat.tsx
branch
from
2977a0d
to
5b7f15c
Compare
|
コメントされたものは基本的に修正したので確認お願いします。🙇 |
frontend/package.json
Outdated
| "build": "next build", | ||
| "start": "next start -p 12345", |
frontend/package.json
Outdated
| @@ -3,30 +3,34 @@ | |||
| "version": "0.1.0", | |||
| "private": true, | |||
| "scripts": { | |||
| "dev": "next dev -p 12345", | |||
| return ( | ||
| <DetailLayout {...details}> |
There was a problem hiding this comment.
動くので今回はマージします！
が、
{...details}
のスプレッド構文って書き方魅力的なので
目を通しておくとよき
https://qiita.com/Yametaro/items/814f40d08e9d30584e20#props%E3%81%AF%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E6%A7%8B%E6%96%87%E3%81%A7%E6%B8%A1%E3%81%9B%E3%82%8B
frontend/src/pages/birthday.tsx
Outdated
| const details = { | ||
| // TODO: 今後constansに移行する | ||
| title: "生年月日", | ||
| description: | ||
| "生年月日は、Google サービスでアカウントのセキュリティ保護とカスタマイズに使用される場合があります。 この Google アカウントを企業または組織で使用する場合は、アカウントの管理者の生年月日を指定してください。", | ||
| }; |
frontend/src/pages/birthday.tsx
Outdated
| sx={{ | ||
| width: 1, | ||
| maxWidth: 589, | ||
| position: "absolute", |
There was a problem hiding this comment.
absoluteは親要素とか無視して
「絶対ここに配置」
みたいな挙動になるから良くないかも
There was a problem hiding this comment.
relativeとabsolute完全に理解した
https://qiita.com/ChiJ_SeaW/items/b18b2dc98443ab988ecb
There was a problem hiding this comment.
relativeにして、親要素のbottomから40px離れた場所に設定
frontend/src/pages/birthday.tsx
Outdated
| <Button onClick={() => handleClick("/")}>Return to Home</Button> | ||
| <DetailLayout title={details.title} description={details.description}> | ||
| <div className="pt-4"> | ||
| <div className="h-screen w-full items-center justify-center"> |
There was a problem hiding this comment.
ここでh-screenを使用するとdetailLayoutのカード全体がPCの画面の縦幅になるから
ヘッダーとかを合わせるとPCの画面以上の縦幅になり
余計なスクロールが発生してしまう
There was a problem hiding this comment.
h-autoで中の要素に合わせるように設定
frontend/src/pages/birthday.tsx
Outdated
| import { LocalizationProvider } from "@mui/x-date-pickers"; | ||
| import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns"; | ||
| import { DateCalendar } from "@mui/x-date-pickers/DateCalendar"; | ||
| import ja from "date-fns/locale/ja"; |
There was a problem hiding this comment.
| import ja from "date-fns/locale/ja"; | |
| import { ja } from "date-fns/locale"; |
の方がいいらしい
There was a problem hiding this comment.
ライブラリが追加する可能性があるからかな？
There was a problem hiding this comment.
型定義ファイルが
"date-fns/locale"
にあるから？
| return ( | ||
| <DetailLayout {...details}> |
There was a problem hiding this comment.
動くので今回はマージします！
が、
{...details}
のスプレッド構文って書き方魅力的なので
目を通しておくとよき
https://qiita.com/Yametaro/items/814f40d08e9d30584e20#props%E3%81%AF%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E6%A7%8B%E6%96%87%E3%81%A7%E6%B8%A1%E3%81%9B%E3%82%8B
対応 Issue
resolve #87
概要
birthdayページの作成を行いました。
MUI Date Pickerを利用して実装しました。
## なぜData Pickerを利用したか？Date Calendarを公式通り実装したが、どうしてもHydration Errorが消す事ができなかったため、Data Pickerを利用した。
Hydration Errorを消せるなら、Date Calendarを利用するのが良さそう
レビュー後の実装↓
Date Calendarでの実装 fb999b7
Date Calendarを利用して、日時の選択を可能にした。
ボタンのデザインとポジションの修正 783a230 5b7f15c
variant="contained"今後実装するもの
誕生日を保存する機能の実装
現時点では、保存ボタンを押すと、カレンダーで選択した日をコンソールに出力する処理になっています。
APIが存在するなら実装するので、言ってください。🙇
登録してある誕生日の取得機能の実装
現時点は2020年8月21日で定義しています。
テスト項目
URL・スクリーンショット
上記で添付してある画面を参考にしてください。
備考
今回起きた不具合として、host.docker.internalで利用するポートが別のサービスと重複しているとkeycloak関連で動かなくなるので注意する。