Skip to content

Commit 835c45b

Browse files
nakatermnakaterm
authored
登録画面の UI を Figma に合わせる (#391)
<!--変更したい場合は、`/.github/pull_request_template.md` を修正して下さい。--> # PRの概要 <!-- 変更の目的 もしくは 関連する Issue 番号 --> <!-- 以下のように書くと Issue にリンクでき、マージ時に自動で Issue を閉じられる--> close #255 ## 具体的な変更内容 <!-- ビューの変更がある場合はスクショによる比較などがあるとわかりやすい --> ## 影響範囲 <!-- この関数を変更したのでこの機能にも影響がある、など --> ## 動作要件 <!-- 動作に必要な 環境変数 / 依存関係 / DBの更新 など --> ## 補足 <!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など --> ## レビューリクエストを出す前にチェック！ - [x] 改めてセルフレビューしたか - [x] 手動での動作検証を行ったか - [x] server の機能追加ならば、テストを書いたか - 理由: 書いた | server の機能追加ではない - [x] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか - 理由: 書いた | 間違った使い方は存在しない - [x] わかりやすいPRになっているか <!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->
1 parent 4460fd5 commit 835c45b

File tree

5 files changed

+251
-225
lines changed

5 files changed

+251
-225
lines changed

‎web/src/components/config/PhotoPreview.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export function PhotoPreviewButton({ text, onSelect }: ButtonProps) {
2929
maxWidth: "500px",
3030
height: "50px",
3131
marginTop: "10vh",
32-
borderRadius: "25px", // 楕円にするための設定
3332
fontSize: "18px",
3433
}}
3534
onClick={() => {

‎web/src/routes/registration/steps/step1_profile.tsx‎

Lines changed: 100 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from "react";
22

33
import {
44
Box,
5+
Button,
56
FormControl,
67
InputLabel,
78
MenuItem,
@@ -12,7 +13,7 @@ import {
1213
import type { SelectChangeEvent } from "@mui/material";
1314
import { parseStep1UserSchema } from "../../../common/zod/methods";
1415
import type { Step1User } from "../../../common/zod/types";
15-
import { NextButton, type StepProps } from "../common";
16+
import type { StepProps } from "../common";
1617
import { facultiesAndDepartments } from "../data";
1718

1819
export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
@@ -68,86 +69,104 @@ export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
6869
};
6970

7071
return (
71-
<Box mt={2} mx={2} display="flex" flexDirection="column" gap={2}>
72-
<Typography>アカウント設定</Typography>
73-
<FormControl fullWidth>
74-
<TextField
75-
value={name}
76-
onChange={(e) => setName(e.target.value)}
77-
label="名前"
78-
/>
79-
</FormControl>
80-
<FormControl fullWidth>
81-
<InputLabel>性別</InputLabel>
82-
<Select
83-
value={gender}
84-
label="性別"
85-
onChange={(e) => setGender(e.target.value)}
86-
>
87-
<MenuItem value={"男性"}>男性</MenuItem>
88-
<MenuItem value={"女性"}>女性</MenuItem>
89-
<MenuItem value={"その他"}>その他</MenuItem>
90-
<MenuItem value={"秘密"}>秘密</MenuItem>
91-
</Select>
92-
</FormControl>
93-
<FormControl fullWidth>
94-
<InputLabel>学年</InputLabel>
95-
<Select
96-
value={grade}
97-
label="学年"
98-
onChange={(e) => setGrade(e.target.value)}
99-
>
100-
<MenuItem value={"B1"}>1年生 (B1)</MenuItem>
101-
<MenuItem value={"B2"}>2年生 (B2)</MenuItem>
102-
<MenuItem value={"B3"}>3年生 (B3)</MenuItem>
103-
<MenuItem value={"B4"}>4年生 (B4)</MenuItem>
104-
<MenuItem value={"M1"}>修士1年 (M1)</MenuItem>
105-
<MenuItem value={"M2"}>修士2年 (M2)</MenuItem>
106-
</Select>
107-
</FormControl>
108-
<FormControl fullWidth>
109-
<InputLabel>学部</InputLabel>
110-
<Select value={faculty} label="学部" onChange={handleFacultyChange}>
111-
{Object.keys(facultiesAndDepartments).map((fac) => (
112-
<MenuItem key={fac} value={fac}>
113-
{fac}
114-
</MenuItem>
115-
))}
116-
</Select>
117-
</FormControl>
118-
<FormControl fullWidth>
119-
<InputLabel>学科 (先に学部を選択して下さい)</InputLabel>
120-
<Select
121-
value={department}
122-
onChange={handleDepartmentChange}
123-
disabled={!faculty}
124-
label="学科(先に学部を選択して下さい)"
125-
>
126-
{faculty &&
127-
facultiesAndDepartments[faculty].map((dep) => (
128-
<MenuItem key={dep} value={dep}>
129-
{dep}
130-
</MenuItem>
131-
))}
132-
</Select>
133-
</FormControl>
134-
<FormControl fullWidth>
135-
<TextField
136-
multiline
137-
label="自己紹介"
138-
minRows={3}
139-
placeholder="こんにちは！仲良くして下さい！"
140-
onChange={(e) => setIntro(e.target.value)}
141-
/>
142-
</FormControl>
143-
{errorMessage && (
144-
<Box color="red" mb={2}>
145-
{errorMessage}
72+
<>
73+
<Box mt={2} mx={2} display="flex" flexDirection="column" gap={2}>
74+
<Typography variant="h6" component="h1">
75+
アカウント設定
76+
</Typography>
77+
<Box flex={1} display="flex" flexDirection="column" gap={2}>
78+
<FormControl fullWidth>
79+
<TextField
80+
value={name}
81+
onChange={(e) => setName(e.target.value)}
82+
label="名前"
83+
/>
84+
</FormControl>
85+
<FormControl fullWidth>
86+
<InputLabel>性別</InputLabel>
87+
<Select
88+
value={gender}
89+
label="性別"
90+
onChange={(e) => setGender(e.target.value)}
91+
>
92+
<MenuItem value={"男性"}>男性</MenuItem>
93+
<MenuItem value={"女性"}>女性</MenuItem>
94+
<MenuItem value={"その他"}>その他</MenuItem>
95+
<MenuItem value={"秘密"}>秘密</MenuItem>
96+
</Select>
97+
</FormControl>
98+
<FormControl fullWidth>
99+
<InputLabel>学年</InputLabel>
100+
<Select
101+
value={grade}
102+
label="学年"
103+
onChange={(e) => setGrade(e.target.value)}
104+
>
105+
<MenuItem value={"B1"}>1年生 (B1)</MenuItem>
106+
<MenuItem value={"B2"}>2年生 (B2)</MenuItem>
107+
<MenuItem value={"B3"}>3年生 (B3)</MenuItem>
108+
<MenuItem value={"B4"}>4年生 (B4)</MenuItem>
109+
<MenuItem value={"M1"}>修士1年 (M1)</MenuItem>
110+
<MenuItem value={"M2"}>修士2年 (M2)</MenuItem>
111+
</Select>
112+
</FormControl>
113+
<FormControl fullWidth>
114+
<InputLabel>学部</InputLabel>
115+
<Select value={faculty} label="学部" onChange={handleFacultyChange}>
116+
{Object.keys(facultiesAndDepartments).map((fac) => (
117+
<MenuItem key={fac} value={fac}>
118+
{fac}
119+
</MenuItem>
120+
))}
121+
</Select>
122+
</FormControl>
123+
<FormControl fullWidth>
124+
<InputLabel>学科 (先に学部を選択して下さい)</InputLabel>
125+
<Select
126+
value={department}
127+
onChange={handleDepartmentChange}
128+
disabled={!faculty}
129+
label="学科(先に学部を選択して下さい)"
130+
>
131+
{faculty &&
132+
facultiesAndDepartments[faculty].map((dep) => (
133+
<MenuItem key={dep} value={dep}>
134+
{dep}
135+
</MenuItem>
136+
))}
137+
</Select>
138+
</FormControl>
139+
<FormControl fullWidth>
140+
<TextField
141+
multiline
142+
label="自己紹介"
143+
minRows={3}
144+
placeholder="こんにちは！仲良くして下さい！"
145+
onChange={(e) => setIntro(e.target.value)}
146+
/>
147+
</FormControl>
148+
{errorMessage && (
149+
<Box color="red" mb={2}>
150+
{errorMessage}
151+
</Box>
152+
)}
146153
</Box>
147-
)}
148-
<NextButton onClick={save}>
149-
{caller === "registration" ? "次へ" : "保存"}
150-
</NextButton>
151-
</Box>
154+
</Box>
155+
<Box
156+
p={3}
157+
sx={{
158+
position: "fixed",
159+
display: "flex",
160+
justifyContent: "space-between",
161+
bottom: 0,
162+
width: "100%",
163+
}}
164+
>
165+
<span />
166+
<Button onClick={save} variant="contained">
167+
{caller === "registration" ? "次へ" : "保存"}
168+
</Button>
169+
</Box>
170+
</>
152171
);
153172
}

‎web/src/routes/registration/steps/step2_img.tsx‎

Lines changed: 76 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
PhotoPreviewButton,
99
} from "../../../components/config/PhotoPreview";
1010
import UserAvatar from "../../../components/human/avatar";
11-
import { type BackProp, NextButton, type StepProps } from "../common";
11+
import type { BackProp, StepProps } from "../common";
1212

1313
export type Step2Data = {
1414
pictureUrl: string;
@@ -21,7 +21,7 @@ export default function Step2({
2121
caller,
2222
}: StepProps<Step2Data> & BackProp) {
2323
const [errorMessage, setErrorMessage] = useState<string>("");
24-
const [file, setFile] = useState<File>();
24+
const [file, setFile] = useState<File | null>(null);
2525
const [url, setURL] = useState<string>(prev?.pictureUrl ?? "");
2626

2727
async function next() {
@@ -99,96 +99,89 @@ export default function Step2({
9999
console.log("open: ", open);
100100
}, [open]);
101101
return (
102-
<div>
103-
<Typography
104-
variant="h5"
105-
style={{ textAlign: "left", marginTop: "2vh", marginLeft: "10px" }}
106-
>
107-
アイコンを設定
108-
</Typography>
102+
<>
103+
<Box m={2} display={"flex"} flexDirection={"column"} gap={2}>
104+
<Typography variant="h6" component="h1">
105+
アイコンを設定
106+
</Typography>
109107

110-
<div style={{ textAlign: "center", marginTop: "15vh" }}>
111-
<Modal
112-
id="MODAL"
113-
open={true}
114-
sx={{
115-
visibility: open ? "visible" : "hidden",
116-
Margin: "auto",
117-
alignItems: "center",
118-
justifyContent: "center",
119-
display: "flex",
120-
}}
121-
>
122-
<Box
123-
style={{
124-
backgroundColor: "white",
125-
width: "90%",
126-
height: "auto",
127-
padding: "20px",
108+
<div style={{ textAlign: "center", marginTop: "15vh" }}>
109+
<Modal
110+
id="MODAL"
111+
open={true}
112+
sx={{
113+
visibility: open ? "visible" : "hidden",
114+
Margin: "auto",
115+
alignItems: "center",
116+
justifyContent: "center",
117+
display: "flex",
128118
}}
129119
>
130-
<PhotoPreview
131-
prev={prev?.pictureUrl}
132-
onCrop={(f) => {
133-
setFile(f);
134-
}}
135-
/>
136-
<Button
137-
sx={{ float: "right", marginRight: "30px" }}
138-
onClick={() => {
139-
select();
140-
setOpen(false);
141-
}}
142-
>
143-
切り取り
144-
</Button>
145-
</Box>
146-
</Modal>
147-
<div
148-
style={{
149-
textAlign: "center",
150-
display: "flex",
151-
flexDirection: "column",
152-
alignItems: "center",
153-
}}
154-
>
155-
<UserAvatar width="35vh" height="35vh" pictureUrl={url} />
156-
<div>
157-
<PhotoPreviewButton
158-
text="写真を選択"
159-
onSelect={() => setOpen(true)}
160-
/>
161-
</div>
162-
{errorMessage && (
163-
<Box color="red" mb={2}>
164-
{errorMessage}
165-
</Box>
166-
)}
167-
<div style={{ display: "flex", flexDirection: "row" }}>
168-
<Button
169-
onClick={back}
120+
<Box
170121
style={{
171-
marginLeft: "auto", // 右に寄せるために margin-left を使用
172-
width: "100px",
173-
height: "44.5px",
174-
borderRadius: "25px",
175-
boxShadow: "0px 6px 8px rgba(0, 0, 0, 0.15)", // ホバー時の影
122+
backgroundColor: "white",
123+
width: "90%",
124+
height: "auto",
125+
padding: "20px",
176126
}}
177127
>
178-
前へ
179-
</Button>
180-
{file === null ? (
181-
<Button disabled={true}>
182-
{caller === "registration" ? "次へ" : "保存"}
128+
<PhotoPreview
129+
prev={prev?.pictureUrl}
130+
onCrop={(f) => {
131+
setFile(f);
132+
}}
133+
/>
134+
<Button
135+
sx={{ float: "right", marginRight: "30px" }}
136+
onClick={() => {
137+
select();
138+
setOpen(false);
139+
}}
140+
>
141+
切り取り
183142
</Button>
184-
) : (
185-
<NextButton onClick={next}>
186-
{caller === "registration" ? "次へ" : "保存"}
187-
</NextButton>
143+
</Box>
144+
</Modal>
145+
<div
146+
style={{
147+
textAlign: "center",
148+
display: "flex",
149+
flexDirection: "column",
150+
alignItems: "center",
151+
}}
152+
>
153+
<UserAvatar width="35vh" height="35vh" pictureUrl={url} />
154+
<div>
155+
<PhotoPreviewButton
156+
text="写真を選択"
157+
onSelect={() => setOpen(true)}
158+
/>
159+
</div>
160+
{errorMessage && (
161+
<Box color="red" mb={2}>
162+
{errorMessage}
163+
</Box>
188164
)}
189165
</div>
190166
</div>
191-
</div>
192-
</div>
167+
</Box>
168+
<Box
169+
p={3}
170+
sx={{
171+
position: "fixed",
172+
display: "flex",
173+
justifyContent: "space-between",
174+
bottom: 0,
175+
width: "100%",
176+
}}
177+
>
178+
<Button onClick={back} variant="text">
179+
前へ
180+
</Button>
181+
<Button onClick={next} variant="contained">
182+
{caller === "registration" ? "次へ" : "保存"}
183+
</Button>
184+
</Box>
185+
</>
193186
);
194187
}

0 commit comments

Comments
 (0)