💄 Style: spacing on my page

KNU-AEYE · May 18, 2024 · 94db7ed · 94db7ed
1 parent f098875
commit 94db7ed
Showing 1 changed file with 45 additions and 35 deletions.
diff --git a/aeye/app/(nav)/my/profileMenu.tsx b/aeye/app/(nav)/my/profileMenu.tsx
@@ -8,6 +8,7 @@ import {
  Typography,
  TextField,
  Box,
+ Stack,
 } from "@mui/material";
 import fetchWithInterception from "@/app/fetchWrapper";
 import KakaoIcon from "@/app/kakao";
@@ -29,42 +30,51 @@ export default function ProfileMenu() {
 
  return (
  <Box display="flex" flexDirection="column" alignItems="center">
- <Paper
- elevation={3}
- sx={{ padding: "20px", marginBottom: "20px", width: "100%" }}
- >
- <Typography variant="h6">Account Linking Information</Typography>
- <Divider />
- <Typography variant="body1" sx={{ textAlign: "center" }}>
- {member?.socialLogin === "GOOGLE" ? <GoogleIcon /> : <KakaoIcon />}
- {member?.socialLogin}
- </Typography>
- </Paper>
- <Paper elevation={3} sx={{ padding: "20px", width: "100%" }}>
- <Typography variant="h6">Update Phone Number </Typography>
- <Divider />
- <Box mt={2}>
- <TextField
- label="New Phone Number"
- variant="outlined"
- size="small"
- fullWidth
- autoFocus
- value={phone}
- onChange={(e) => setPhone(e.target.value)}
- />
- </Box>
- <Box
- mt={2}
- display="flex"
- flexDirection="row"
- justifyContent="flex-end"
+ <Stack sx={{ width: "100%" }} spacing={2}>
+ <Paper
+ elevation={3}
+ sx={{
+ padding: "20px",
+ width: "100%",
+ height: "13vh",
+ }}
  >
- <Button variant="contained" color="primary" onClick={handleClick}>
- Update
- </Button>
- </Box>
- </Paper>
+ <Typography variant="h6">계정 연결 정보</Typography>
+ <Divider sx={{ mb: "28px" }} />
+ <Typography variant="body1" sx={{ textAlign: "center" }}>
+ {member?.socialLogin === "GOOGLE" ? <GoogleIcon /> : <KakaoIcon />}
+ {member?.socialLogin}
+ </Typography>
+ </Paper>
+ <Paper
+ elevation={3}
+ sx={{ padding: "20px", width: "100%", height: "17vh" }}
+ >
+ <Typography variant="h6">전화번호 설정</Typography>
+ <Divider />
+ <Box mt={2}>
+ <TextField
+ label="New Phone Number"
+ variant="outlined"
+ size="small"
+ fullWidth
+ autoFocus
+ value={phone}
+ onChange={(e) => setPhone(e.target.value)}
+ />
+ </Box>
+ <Box
+ mt={2}
+ display="flex"
+ flexDirection="row"
+ justifyContent="flex-end"
+ >
+ <Button variant="contained" color="primary" onClick={handleClick}>
+ Update
+ </Button>
+ </Box>
+ </Paper>
+ </Stack>
  </Box>
  );
 }