Skip to content

Commit 78d4419

Browse files
aster-voidaster-void
committed
delete mui
1 parent 7b253fb commit 78d4419

File tree

3 files changed

+90
-135
lines changed

3 files changed

+90
-135
lines changed

‎web/app/signup/steps/step1_profile.tsx‎

Lines changed: 79 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
1-
import { useState } from "react";
1+
import { type ChangeEvent, useState } from "react";
22

3-
import {
4-
Box,
5-
FormControl,
6-
InputLabel,
7-
MenuItem,
8-
Select,
9-
TextField,
10-
Typography,
11-
} from "@mui/material";
12-
import type { SelectChangeEvent } from "@mui/material";
133
import type { StepProps } from "~/app/signup/common";
144
import { facultiesAndDepartments } from "~/app/signup/data";
155
import { parseStep1UserSchema } from "~/common/zod/methods";
166
import type { Step1User } from "~/common/zod/types";
177

8+
function Label({ children }: { children: string }) {
9+
return <span className="text-gray-500 text-sm">{children}</span>;
10+
}
11+
12+
const faculties = Object.keys(facultiesAndDepartments);
1813
export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
1914
const [name, setName] = useState(prev?.name ?? "");
2015
const [gender, setGender] = useState(prev?.gender ?? "その他");
@@ -59,114 +54,94 @@ export default function Step1({ onSave, prev, caller }: StepProps<Step1User>) {
5954
}
6055
}
6156

62-
const handleFacultyChange = (event: SelectChangeEvent<string>) => {
57+
const handleFacultyChange = (event: ChangeEvent<HTMLSelectElement>) => {
6358
setFaculty(event.target.value);
6459
};
6560

66-
const handleDepartmentChange = (event: SelectChangeEvent<string>) => {
61+
const handleDepartmentChange = (event: ChangeEvent<HTMLSelectElement>) => {
6762
setDepartment(event.target.value);
6863
};
6964

7065
return (
7166
<>
72-
<Box mt={2} mx={2} display="flex" flexDirection="column" gap={2}>
73-
<Typography variant="h6" component="h1">
74-
アカウント設定
75-
</Typography>
76-
<Box flex={1} display="flex" flexDirection="column" gap={2}>
77-
<FormControl fullWidth>
78-
<TextField
79-
value={name}
80-
onChange={(e) => setName(e.target.value)}
81-
label="名前"
82-
autoComplete="off"
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>
67+
<div className="m-4 mb-8 flex flex-col gap-4 ">
68+
<h1 className="text-xl">アカウント設定</h1>
69+
<div className="flex flex-col gap-2">
70+
<Label>名前</Label>
71+
<input
72+
className="input input-bordered w-full"
73+
value={name}
74+
onChange={(e) => setName(e.target.value)}
75+
autoComplete="off"
76+
/>
77+
<Label>性別</Label>
78+
<select
79+
className="select select-bordered w-full"
80+
value={gender}
81+
onChange={(e) => setGender(e.target.value)}
82+
>
83+
<option value={"男性"}>男性</option>
84+
<option value={"女性"}>女性</option>
85+
<option value={"その他"}>その他</option>
86+
<option value={"秘密"}>秘密</option>
87+
</select>
88+
<Label>学年</Label>
89+
<select
90+
className="select select-bordered w-full"
91+
value={grade}
92+
onChange={(e) => setGrade(e.target.value)}
93+
>
94+
<option value={"B1"}>1年生 (B1)</option>
95+
<option value={"B2"}>2年生 (B2)</option>
96+
<option value={"B3"}>3年生 (B3)</option>
97+
<option value={"B4"}>4年生 (B4)</option>
98+
<option value={"M1"}>修士1年 (M1)</option>
99+
<option value={"M2"}>修士2年 (M2)</option>
100+
</select>
101+
<Label>学部</Label>
102+
<select
103+
className="select select-bordered w-full"
104+
value={faculty}
105+
onChange={handleFacultyChange}
106+
>
107+
{faculties.map((fac) => (
108+
<option key={fac} value={fac}>
109+
{fac}
110+
</option>
111+
))}
112+
</select>
113+
<Label>学科 (先に学部を選択して下さい)</Label>
114+
<select
115+
className="select select-bordered w-full"
116+
value={department}
117+
onChange={handleDepartmentChange}
118+
disabled={!faculty}
119+
>
120+
{faculty &&
121+
facultiesAndDepartments[faculty].map((dep) => (
122+
<option key={dep} value={dep}>
123+
{dep}
124+
</option>
120125
))}
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>
126+
</select>
127+
<Label>自己紹介</Label>
128+
<textarea
129+
className="textarea textarea-bordered w-full"
130+
rows={5}
131+
placeholder="こんにちは！仲良くして下さい！"
132+
onChange={(e) => setIntro(e.target.value)}
133+
/>
148134
{errorMessage && (
149-
<Box color="red" mb={2}>
150-
{errorMessage}
151-
</Box>
135+
<div className="mb-4 text-error">{errorMessage}</div>
152136
)}
153-
</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-
>
137+
</div>
138+
</div>
139+
<div className="fixed bottom-5 flex w-full justify-between p-6">
165140
<span />
166141
<button type="button" onClick={save} className="btn btn-primary">
167142
{caller === "registration" ? "次へ" : "保存"}
168143
</button>
169-
</Box>
144+
</div>
170145
</>
171146
);
172147
}

‎web/app/signup/steps/step2_img.tsx‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Box, Typography } from "@mui/material";
21
import { enqueueSnackbar } from "notistack";
32
import { useCallback, useState } from "react";
43
import type { BackProp, StepProps } from "~/app/signup/common";
@@ -39,10 +38,8 @@ export default function Step2({
3938

4039
return (
4140
<>
42-
<Box m={2} display={"flex"} flexDirection={"column"} gap={2}>
43-
<Typography variant="h6" component="h1">
44-
アイコンを設定
45-
</Typography>
41+
<div m={2} display={"flex"} flexDirection={"column"} gap={2}>
42+
<h1 className="text-xl">アイコンを設定</h1>
4643

4744
<div style={{ textAlign: "center", marginTop: "15vh" }}>
4845
<PhotoModal
@@ -71,24 +68,15 @@ export default function Step2({
7168
</div>
7269
</div>
7370
</div>
74-
</Box>
75-
<Box
76-
p={3}
77-
sx={{
78-
position: "fixed",
79-
display: "flex",
80-
justifyContent: "space-between",
81-
bottom: 0,
82-
width: "100%",
83-
}}
84-
>
71+
</div>
72+
<div className="p-6 fixed flex justify-between bottom-0 w-full">
8573
<button type="button" onClick={back} className="btn">
8674
前へ
8775
</button>
8876
<button type="button" onClick={next} className="btn btn-primary">
8977
{caller === "registration" ? "次へ" : "保存"}
9078
</button>
91-
</Box>
79+
</div>
9280
</>
9381
);
9482
}

‎web/components/config/PhotoPreview.tsx‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Button } from "@mui/material";
21
import {
32
type ChangeEvent,
43
useCallback,
@@ -19,21 +18,14 @@ type ButtonProps = {
1918
export function PhotoPreviewButton({ text, onSelect }: ButtonProps) {
2019
const inputRef: React.LegacyRef<HTMLInputElement> = useRef(null);
2120
return (
22-
<Button
23-
variant="contained"
24-
component="label"
25-
style={{
26-
backgroundColor: "#039BE5",
27-
color: "white",
28-
width: "70vw",
29-
maxWidth: "500px",
30-
height: "50px",
31-
marginTop: "10vh",
32-
fontSize: "18px",
33-
}}
21+
<label
22+
className="btn btn-primary text-white w-[70vw] h-12 mt-[10vh] text-lg font-sans font-normal"
3423
onClick={() => {
3524
if (inputRef.current) inputRef.current.value = "";
3625
}}
26+
onKeyDown={() => {
27+
if (inputRef.current) inputRef.current.value = "";
28+
}}
3729
>
3830
{text || "写真を選択"}
3931
<input
@@ -49,7 +41,7 @@ export function PhotoPreviewButton({ text, onSelect }: ButtonProps) {
4941
accept=".png, .jpeg, .jpg"
5042
style={{ display: "none" }}
5143
/>
52-
</Button>
44+
</label>
5345
);
5446
}
5547

0 commit comments

Comments
 (0)