Skip to content

Commit

Permalink
chore : code cleaning
Browse files Browse the repository at this point in the history
  • Loading branch information
@raylee0519
raylee0519 committed Aug 3, 2022
1 parent 1baba1c commit a6bd7a8
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 188 deletions.
22 changes: 12 additions & 10 deletions frontend/src/actions/useScrollFadeIn.jsx → frontend/src/actions/useScrollFadeIn.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useRef, useEffect, useCallback } from 'react';
const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
const element = useRef();

const handleDirection = (name) => {
const handleDirection = (name: string) => {
switch (name) {
case 'up':
return 'translate3d(0, 30%, 0)';
Expand All @@ -19,22 +19,24 @@ const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
};

const onScroll = useCallback(
([entry]) => {
const { current } = element;
([entry]: any[]) => {
const { current }: any = element;
if (entry.isIntersecting) {
current.style.transitionProperty = 'all';
current.style.transitionDuration = `${duration}s`;
current.style.transitionTimingFunction = 'cubic-bezier(0, 0, 0.2, 1)';
current.style.transitionDelay = `${delay}s`;
current.style.opacity = 1;
current.style.transform = 'translate3d(0, 0, 0)';
if (current) {
current.style.transitionProperty = 'all';
current.style.transitionDuration = `${duration}s`;
current.style.transitionTimingFunction = 'cubic-bezier(0, 0, 0.2, 1)';
current.style.transitionDelay = `${delay}s`;
current.style.opacity = 1;
current.style.transform = 'translate3d(0, 0, 0)';
}
}
},
[delay, duration],
);

useEffect(() => {
let observer;
let observer: any;

if (element.current) {
observer = new IntersectionObserver(onScroll, { threshold: 0.3 });
Expand Down
96 changes: 7 additions & 89 deletions frontend/src/components/Mypage/Change_nickname.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,22 @@
import * as React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import axios from "axios";
import { rs } from "src/utils/types";
import { API_BASE_URL } from "src/utils/constants";
import { getAccess } from "../../Auth/tokenManager";
import { setAccessToken, setRefreshToken } from "src/Auth/tokenManager";
import { useState } from "react";
import Api from "../../utils/customApi";
import {
Modal,
Backdrop,
FormHelperText,
Typography,
Container,
styled,
TextField,
Box,
Link,
Button,
Hidden,
} from "@mui/material";
import lottie from "lottie-web";


const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
borderRadius: 3,
boxShadow: 24,
p: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
};

const btnstyle = {
borderColor: "transparent",
backgroundColor: "#B0B09A",
color: "#ffffff",
height: "40px",
width: "300px",
marginTop: "25px",
textAlign: "center",
fontSize: "15px",
textDecoration: "none",
borderRadius: 4,
p: 1,
fontFamily: "Itim",
"&:hover": { backgroundColor: "#737458", color: "#ffffff" },
};

import OpenModal from "./OpenModal"

const theme = createTheme({
palette: {
Expand Down Expand Up @@ -84,30 +48,13 @@ const FormHelperTexts = styled(FormHelperText)`
font-size: 12px;
`;

const Lottie = () => {
//lottie
const element = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
lottie.loadAnimation({
container: element.current as HTMLDivElement,
renderer: "svg",
loop: false,
autoplay: true,
animationData: require("../../images/TrashLottie.json"),
});
}, []);
return <Box ref={element} style={{ height: 300 }}></Box>;
};

function ChangeNickName() {
const aliasRegex = /^[가-힣a-zA-Z0-9]+$/;
const [checkAilas, setCheckAlias] = useState("");
const [alias, setAlias] = useState("");
const [newAccess, getNewAccess] = useState("");

const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const [open, setOpen] = useState(false);


const onBlurInfo = async (props: Array<string>, event: any) => {
Expand Down Expand Up @@ -148,8 +95,7 @@ function ChangeNickName() {
console.log("response", response.data);
setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화
setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화
// window.location.reload();
handleOpen();
setOpen(true);
})
.catch((e) => {
// 의도치 않는 오류
Expand Down Expand Up @@ -254,37 +200,9 @@ function ChangeNickName() {
>
변경하기
</Button>

<Modal
aria-labelledby="modal-title"
aria-describedby="modal-description"
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 700,
}}
>
<Box sx={style}>
<Typography
id="modal-title"
variant="h4"
fontWeight="bold"
component="h1"
sx={{ mb: 3, color: "#737458", fontFamily: "Itim" }}
>
NickName Changed!
</Typography>
<div style={{ marginTop: 15 }}>
<Lottie />
</div>

<Button href="/mypage/userInfo" sx={btnstyle}>
OK
</Button>
</Box>
</Modal>
<>
{open ? <OpenModal open={open} /> : Hidden}
</>
</Box>
</Container>
</ThemeProvider>
Expand Down
95 changes: 7 additions & 88 deletions frontend/src/components/Mypage/Change_password.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,22 @@
import * as React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import axios from "axios";
import { rs } from "src/utils/types";
import { API_BASE_URL } from "src/utils/constants";
import { getAccess } from "../../Auth/tokenManager";
import { setAccessToken, setRefreshToken } from "src/Auth/tokenManager";
import { useState } from "react";
import Api from "../../utils/customApi";

import {
Modal,
Backdrop,
FormHelperText,
Typography,
Container,
styled,
TextField,
Box,
Link,
Button
Button,
Hidden
} from "@mui/material";
import lottie from "lottie-web";

const style = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 400,
bgcolor: "background.paper",
borderRadius: 3,
boxShadow: 24,
p: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
};

const btnstyle = {
borderColor: "transparent",
backgroundColor: "#B0B09A",
color: "#ffffff",
height: "40px",
width: "300px",
marginTop: "25px",
textAlign: "center",
fontSize: "15px",
textDecoration: "none",
borderRadius: 4,
p: 1,
fontFamily: "Itim",
"&:hover": { backgroundColor: "#737458", color: "#ffffff" },
};

import OpenModal from "./OpenModal"

const theme = createTheme({
palette: {
Expand Down Expand Up @@ -84,30 +48,13 @@ const FormHelperTexts = styled(FormHelperText)`
font-size: 12px;
`;

const Lottie = () => {
//lottie
const element = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
lottie.loadAnimation({
container: element.current as HTMLDivElement,
renderer: "svg",
loop: false,
autoplay: true,
animationData: require("../../images/TrashLottie.json"),
});
}, []);
return <Box ref={element} style={{ height: 300 }}></Box>;
};


function ChangePassWord() {
const [passwordState, setPasswordState] = useState("");
const [passwordError, setPasswordError] = useState("");
const passwordRegex = /^[가-힣a-zA-Z0-9]+$/;

const [open, setOpen] = React.useState(false);
const [open, setOpen] = useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);

const aliasChange = async (changePassword: string) => {
const stringAccess: any = getAccess();
Expand Down Expand Up @@ -246,37 +193,9 @@ function ChangePassWord() {
>
변경하기
</Button>

<Modal
aria-labelledby="modal-title"
aria-describedby="modal-description"
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 700,
}}
>
<Box sx={style}>
<Typography
id="modal-title"
variant="h4"
fontWeight="bold"
component="h1"
sx={{ mb: 3, color: "#737458", fontFamily: "Itim" }}
>
Password Changed!
</Typography>
<div style={{ marginTop: 15 }}>
<Lottie />
</div>

<Button href="/mypage/userInfo" sx={btnstyle}>
OK
</Button>
</Box>
</Modal>
<>
{open ? <OpenModal open={open} /> : Hidden}
</>
</Box>
</Container>
</ThemeProvider>
Expand Down
Loading

0 comments on commit a6bd7a8

Please sign in to comment.