diff --git a/src/components/Form/JoinForm/input.js b/src/components/Form/JoinForm/input.js index 85713bd..c979818 100644 --- a/src/components/Form/JoinForm/input.js +++ b/src/components/Form/JoinForm/input.js @@ -1,110 +1,130 @@ import styled from 'styled-components'; import { useState, useCallback, useEffect } from 'react'; import { Link, useNavigate } from 'react-router-dom'; -import { PwCheck, emailCheck} from '../../../Common/Common.js' +import { PwCheck, emailCheck } from '../../../Common/Common.js'; import AuthService from '../../../service/auth.service.js'; import { RegisterButton } from '../../../styles/DetailStyle/JoinStyle/JoinStyle.js'; import { fontsize } from '../../../styles/Media/theme.js'; import { ErrorHandle } from '../../../apis/@core.js'; import { ShowAlert } from '../../../pages/alert.js'; -const Joininput = ( ) => { +const Joininput = () => { + const navigate = useNavigate(); + // 이름 , 비밀번호, 이메일 , 비밀번호 확인 + const [email, setUserEmail] = useState(''); + const [name, setUserName] = useState(''); + const [password, setUserPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); -const navigate = useNavigate(); -// 이름 , 비밀번호, 이메일 , 비밀번호 확인 - const [email, setUserEmail] = useState(""); - const [name, setUserName] = useState(""); - const [password, setUserPassword] = useState(""); - const [confirmPassword, setConfirmPassword] = useState(""); + //비밀번호 유효성 검사 + const [isName, setIsName] = useState(false); + const [isEmail, setIsEmail] = useState(false); + const [isPassword, setIsPassword] = useState(false); + const [isPasswordConfirm, setIsPasswordConfirm] = useState(false); -//비밀번호 유효성 검사 - const [isName, setIsName] = useState(false) - const [isEmail, setIsEmail] = useState(false) - const [isPassword, setIsPassword] = useState(false) - const [isPasswordConfirm, setIsPasswordConfirm] = useState(false) - - //오류 메세지 저장 - const [nameMessage, setNameMessage] = useState('') - const [emailMessage, setEmailMessage] = useState('') - const [passwordMessage, setPasswordMessage] = useState('') - const [passwordConfirmMessage, setPasswordConfirmMessage] = useState('') + //오류 메세지 저장 + const [nameMessage, setNameMessage] = useState(''); + const [emailMessage, setEmailMessage] = useState(''); + const [passwordMessage, setPasswordMessage] = useState(''); + const [passwordConfirmMessage, setPasswordConfirmMessage] = useState(''); const handleEnter = (e) => { if (e.key === 'Enter') { onSignUpSumit(); } - } + }; useEffect(() => { if (confirmPassword) { - onChangePasswordConfirm(password, confirmPassword, setPasswordConfirmMessage, setIsPasswordConfirm); + onChangePasswordConfirm( + password, + confirmPassword, + setPasswordConfirmMessage, + setIsPasswordConfirm + ); } }, [password, confirmPassword]); - const onSignUpSumit = () => { - if(email === undefined || email === "" || email === null ){ - ShowAlert("이메일 입력해주세요.", "warning"); + const onSignUpSumit = () => { + if (email === undefined || email === '' || email === null) { + ShowAlert('이메일 입력해주세요.', 'warning'); return false; } - if( isEmail === false || isPassword === false || isPasswordConfirm === false){ - ShowAlert("값이 잘못 되었습니다. 다시 입력해주세요", "warning"); + if ( + isEmail === false || + isPassword === false || + isPasswordConfirm === false + ) { + ShowAlert('값이 잘못 되었습니다. 다시 입력해주세요', 'warning'); return false; - } + } - try { - AuthService.signup({id:email, password, name }) - .then((res) => { - if (res.status === 201) { - ShowAlert("가입되었습니다.", "success", "확인") - navigate("/") - } - }).catch(error => { - const err = ErrorHandle(error); - ShowAlert(err); - }) - } catch (err) { - ShowAlert("system 오류입니다. 문의주세요.", "error") - } + try { + AuthService.signup({ id: email, password, name }) + .then((res) => { + if (res.status === 201) { + ShowAlert('가입되었습니다.', 'success', '확인'); + navigate('/'); + } + }) + .catch((error) => { + const err = ErrorHandle(error); + ShowAlert(err); + }); + } catch (err) { + ShowAlert('system 오류입니다. 문의주세요.', 'error'); + } }; + // 이름 const onChangeName = useCallback((e) => { - setUserName(e.target.value) - if (e.target.value.length < 2 || e.target.value.length > 5) { - setNameMessage('2글자 이상 5글자 미만으로 입력해주세요.') - setIsName(false) + setUserName(e.target.value); + if (e.target.value.length < 2 || e.target.value.length > 5) { + setNameMessage('2글자 이상 5글자 미만으로 입력해주세요.'); + setIsName(false); } else { - setNameMessage('올바른 이름 형식입니다 :)') - setIsName(true) + setNameMessage('올바른 이름 형식입니다 :)'); + setIsName(true); } - }, []) + }, []); + //이메일 const onChangeEmail = useCallback((e) => { - const emails = e.target.value - setUserEmail(emails) + const emails = e.target.value; + setUserEmail(emails); if (emailCheck(emails)) { - setEmailMessage('올바른 이메일 형식이에요 : )') - setIsEmail(true) + setEmailMessage('올바른 이메일 형식이에요 : )'); + setIsEmail(true); } else { - setEmailMessage('이메일 형식이 틀렸습니다') - setIsEmail(false) + setEmailMessage('이메일 형식이 틀렸습니다'); + setIsEmail(false); } - },[]) + }, []); + // 비밀번호 const onChangePassword = useCallback((e) => { - const passwordCurrent = e.target.value - setUserPassword(passwordCurrent) + const passwordCurrent = e.target.value; + setUserPassword(passwordCurrent); if (!PwCheck(passwordCurrent)) { - setPasswordMessage('숫자+영문자+특수문자 조합으로8자리 이상 입력해주세요.') - setIsPassword(false) + setPasswordMessage( + '숫자+영문자+특수문자 조합으로8자리 이상 입력해주세요.' + ); + setIsPassword(false); } else { - setPasswordMessage('안전한 비밀번호에요 : )') - setIsPassword(true) - } - }, [confirmPassword]) + setPasswordMessage('안전한 비밀번호에요 : )'); + setIsPassword(true); + } + },[]); - const onChangePasswordConfirm = (password, confirmPassword, setPasswordConfirmMessage, setIsPasswordConfirm) => { + // + const onChangePasswordConfirm = ( + password, + confirmPassword, + setPasswordConfirmMessage, + setIsPasswordConfirm + ) => { if (password === confirmPassword) { setPasswordConfirmMessage('비밀번호를 똑같이 입력했어요 : )'); setIsPasswordConfirm(true); @@ -114,13 +134,22 @@ const navigate = useNavigate(); } }; - const onPasswordConfirmChange = useCallback((e) => { - const passwordConfirmCurrent = e.target.value; - setConfirmPassword(passwordConfirmCurrent); - onChangePasswordConfirm(password, passwordConfirmCurrent, setPasswordConfirmMessage, setIsPasswordConfirm); - }, [password]); + // 비밀번호 확인 + const onPassword = useCallback( + (e) => { + const passwordConfirmCurrent = e.target.value; + setConfirmPassword(passwordConfirmCurrent); + onChangePasswordConfirm( + password, + passwordConfirmCurrent, + setPasswordConfirmMessage, + setIsPasswordConfirm + ); + }, + [password] + ); - return( + return ( - {email.length > 0 && {emailMessage}} + {email.length > 0 && ( + + {emailMessage} + + )} @@ -141,7 +174,11 @@ const navigate = useNavigate(); name={'name'} onChange={onChangeName} /> - {name.length > 0 && {nameMessage}} + {name.length > 0 && ( + + {nameMessage} + + )} - {password.length > 0 && ( - {passwordMessage} - )} + {password.length > 0 && ( + + {passwordMessage} + + )} - - {confirmPassword.length > 0 && ( - {passwordConfirmMessage} + {confirmPassword.length > 0 && ( + + {passwordConfirmMessage} + )} - +
- - 등록 - + 등록
- - 돌아가기 - + + + 돌아가기 + + ); }; @@ -190,13 +233,13 @@ const JoinFrom = styled.form` width: 550px; height: 350px; margin: 40px; -` +`; const Formbox = styled.div` position: relative; margin-bottom: 50px; text-align: center; width: 310px; - height:48px; + height: 48px; right: 18px; border-radius: 10px; border-bottom: 4px solid #afafaf; @@ -204,8 +247,8 @@ const Formbox = styled.div` & input { width: 250px; - height:40px; - border: none; + height: 40px; + border: none; outline: none; } @@ -215,30 +258,29 @@ const Formbox = styled.div` } & input:focus { - box-shadow: 0 0 0.1px 0.1px rgb(59 65 99 / 25%); } & .message { - width: 350px; - height: 40px; - font-weight: 500; - font-size: ${fontsize[3]}; - line-height: 24px; - letter-spacing: -1px; - position: absolute; - top:50px; - left: -20px; - z-index: 100; - color: white; - & .success { + width: 350px; + height: 40px; + font-weight: 500; + font-size: ${fontsize[3]}; + line-height: 24px; + letter-spacing: -1px; + position: absolute; + top: 50px; + left: -20px; + z-index: 100; + color: white; + & .success { color: #8f8c8b; } - & .error { + & .error { color: #ff2727; } } -` +`; const Linkbox = styled.div` left: 250px; width: 120px; @@ -247,17 +289,17 @@ const Linkbox = styled.div` display: flex; position: absolute; margin-top: 10px; - + a { text-decoration: none; } -` +`; const ButtonText = styled.div` font-size: ${fontsize[2]}; color: white; position: absolute; padding: 10px 40px; -` +`; const ButtonInnerText = styled(ButtonText)` width: 140px; -` \ No newline at end of file +`; diff --git a/src/components/Form/LoginForm/login.js b/src/components/Form/LoginForm/login.js index 3de6da6..883edea 100644 --- a/src/components/Form/LoginForm/login.js +++ b/src/components/Form/LoginForm/login.js @@ -53,7 +53,9 @@ const LoginInput = () => { } catch (error) { ShowAlert('로그인 실패했습니다.', 'warning', '확인').then( (isConfirmed) => { - return false; + if (isConfirmed) { + return false; + } } ); } diff --git a/src/pages/Diary/components/ColorList.js b/src/pages/Diary/components/ColorList.js index b718fc1..78e87e2 100644 --- a/src/pages/Diary/components/ColorList.js +++ b/src/pages/Diary/components/ColorList.js @@ -1,17 +1,16 @@ -import { useState, useEffect } from "react"; -import styled from "styled-components"; -import { Color } from '../../../resource/color' -import { useRecoilState } from "recoil"; -import {recoilColorState} from "../../../recoil/colorState" -import { media } from "../../../styles/Media/media"; -import { fontsize } from "../../../styles/Media/theme"; +import { useState, useEffect } from 'react'; +import styled from 'styled-components'; +import { Color } from '../../../resource/color'; +import { useRecoilState } from 'recoil'; +import { recoilColorState } from '../../../recoil/colorState'; +import { media } from '../../../styles/Media/media'; +import { fontsize } from '../../../styles/Media/theme'; const ColorForm = () => { - - const [recoilColor, setRecoilColor] = useRecoilState(recoilColorState); + const [, setRecoilColor] = useRecoilState(recoilColorState); const colorArray = Object.values(Color); const colorNameArray = Object.keys(Color); - const [colorState, setColorState] = useState("#5800FF"); + const [colorState, setColorState] = useState('#5800FF'); const onColorChangeHandler = (color) => { setColorState(color); @@ -19,29 +18,29 @@ const ColorForm = () => { useEffect(() => { const changedColor = { - color: colorState + color: colorState, }; setRecoilColor(changedColor); - }, [colorState]); + }, [colorState, setRecoilColor]); return ( <> -

오늘의 기분은 어떤 색인가요?

- - {colorArray.map((color, index) => ( - - - onColorChangeHandler(color, index)} - /> -

{colorNameArray[index]}

- - ))} - +

오늘의 기분은 어떤 색인가요?

+ + {colorArray.map((color, index) => ( + + + onColorChangeHandler(color, index)} + /> +

{colorNameArray[index]}

+ + ))} + ); @@ -51,14 +50,14 @@ export default ColorForm; const WhiteContainer = styled.div` width: 630px; height: 136px; - background-color: #CED0E9; + background-color: #ced0e9; border-radius: 10px; display: inline-block; margin: 0 auto; position: relative; right: 120px; top: 60px; - + & .titleText { text-align: center; margin-top: 25px; @@ -82,7 +81,7 @@ const WhiteContainer = styled.div` width: 630px; left: 10px; `} -` +`; const ColorPallete = styled.ul` width: 100%; @@ -97,7 +96,7 @@ const ColorPallete = styled.ul` font-size: ${fontsize[0]}; margin-left: 20px; `} - + ${media.tablet` margin-left: 17px; top: 10px; @@ -136,4 +135,4 @@ const ColorCircle = styled.li` & > input { display: none; } -`; \ No newline at end of file +`; diff --git a/src/pages/Diary/components/DiaryList.js b/src/pages/Diary/components/DiaryList.js index 9070ba5..cff1389 100644 --- a/src/pages/Diary/components/DiaryList.js +++ b/src/pages/Diary/components/DiaryList.js @@ -1,89 +1,94 @@ import axios from 'axios'; -import Api from "../../../apis/Api"; -import styled from "styled-components"; -import DatePicker from "react-datepicker"; -import "react-datepicker/dist/react-datepicker.css"; +import Api from '../../../apis/Api'; +import styled from 'styled-components'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; -import Sliderr from "../../Diary/components/slider"; -import { API_URL } from '../../../Common/Common' -import { useRecoilState } from "recoil"; +import Sliderr from '../../Diary/components/slider'; +import { API_URL } from '../../../Common/Common'; +import { useRecoilState } from 'recoil'; import { useState, forwardRef, useEffect } from 'react'; -import { media } from "../../../styles/Media/media"; +import { media } from '../../../styles/Media/media'; import { ShowAlert, ShowConfirm } from '../../alert'; -import { recoilColorState } from "../../../recoil/colorState"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faSyncAlt, faCircleCheck } from "@fortawesome/free-solid-svg-icons" -import './diary.css' +import { recoilColorState } from '../../../recoil/colorState'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faSyncAlt, faCircleCheck } from '@fortawesome/free-solid-svg-icons'; +import './diary.css'; const DiaryForm = () => { - - const [recoilColor, setRecoilColor] = useRecoilState(recoilColorState); - const defaultColor = { ...recoilColor }; - const [colorPeeker, setColorPeeker ] = useState(defaultColor.color); + const [recoilColor] = useRecoilState(recoilColorState); + const [colorPeeker, setColorPeeker] = useState(...recoilColor.color); const [ViewData, setViewData] = useState({ - id:"" - ,title:"" - ,content:"" - ,date: new Date() - ,color:"" - }) + id: '', + title: '', + content: '', + date: new Date(), + color: '', + }); const { title, content, date } = ViewData; const [list, setData] = useState([]); - - useEffect(()=> { + + useEffect(() => { setViewData({ - date: new Date() - ,color:colorPeeker - }) + date: new Date(), + color: colorPeeker, + }); search(); - },[]); + }, []); - useEffect(() =>{ + useEffect(() => { const tmpColor = { ...recoilColor }; setColorPeeker(tmpColor.color); let defaultDate = new Date(); - if(ViewData.date !== ""){ - defaultDate = new Date(ViewData.date); + if (ViewData.date !== '') { + defaultDate = new Date(ViewData.date); } setViewData({ ...ViewData, - color:tmpColor.color, - date:defaultDate - }) - },[recoilColor]) + color: tmpColor.color, + date: defaultDate, + }); + }, [recoilColor]); const search = (params) => { let date = null; - if(params){ + if (params) { date = params; - }else{ + } else { defaultSetting(); date = new Date(ViewData.date); } - axios.get(API_URL+ '/diary?year='+String(date.getFullYear())+'&month='+String(date.getMonth()+1)) - .then((response) => { - let listData = []; - for(let i=0;i { let krDate = new Date(date); krDate.setHours(krDate.getHours() + 9); @@ -91,89 +96,92 @@ const DiaryForm = () => { }; const DatePick = forwardRef(({ value, onClick }, ref) => ( - - {value} - )); + + {value} + + )); const getChangeDate = (date) => { setViewData({ ...ViewData, - 'date': date, - }) + date: date, + }); search(date); }; - + const getChangeValue = (e) => { - const{name, value} = e.target; + const { name, value } = e.target; setViewData({ ...ViewData, - [name]: value - }) + [name]: value, + }); }; const update = () => { - ShowConfirm("수정하시겠습니까?", "info").then((isConfirmed) => { - if(isConfirmed){ + ShowConfirm('수정하시겠습니까?', 'info').then((isConfirmed) => { + if (isConfirmed) { Api.diaryPatch(ViewData).then((response) => { - if(response.data.message === "successful"){ - search() - defaultSetting() + if (response.data.message === 'successful') { + search(); + defaultSetting(); } else { - ShowAlert("system 오류 입니다. 문의주세요.", "error"); + ShowAlert('system 오류 입니다. 문의주세요.', 'error'); } - }) + }); } else { - ShowAlert("취소 되었습니다.", "info") + ShowAlert('취소 되었습니다.', 'info'); } - }) + }); }; const create = () => { - ShowConfirm('다이어리를 등록 하시겠습니까?', "info").then((isConfirmed) => { - if(isConfirmed){ + ShowConfirm('다이어리를 등록 하시겠습니까?', 'info').then((isConfirmed) => { + if (isConfirmed) { Api.diaryPost(ViewData).then((response) => { - ShowAlert("등록 완료😊", "success", "확인") - defaultSetting(); - search(); - }) - }else{ - ShowAlert("취소 되었습니다.", "info") + ShowAlert('등록 완료😊', 'success', '확인'); + defaultSetting(); + search(); + }); + } else { + ShowAlert('취소 되었습니다.', 'info'); } }); }; const submit = () => { - if(ViewData.title === '' || ViewData.title === " " - || ViewData.content === '' || ViewData.content === " " - ){ - ShowAlert("제목과 내용은 필수 입니다.", "warning"); + if ( + ViewData.title === '' || + ViewData.title === ' ' || + ViewData.content === '' || + ViewData.content === ' ' + ) { + ShowAlert('제목과 내용은 필수 입니다.', 'warning'); return false; } - if(ViewData.id === ""){ + if (ViewData.id === '') { create(); } else { - update(); + update(); } }; const ResetBtnClick = () => { - ShowConfirm('처음으로 돌아가시겠습니까?', "info").then((isConfirmed) => { - if(isConfirmed){ - defaultSetting() - }else{ + ShowConfirm('처음으로 돌아가시겠습니까?', 'info').then((isConfirmed) => { + if (isConfirmed) { + defaultSetting(); + } else { return false; } }); }; const updateList = (newlist) => { - setViewData(newlist) + setViewData(newlist); }; const handleEnter = (e) => { if (e.key === 'Enter') { - if(!e.shiftKey){ + if (!e.shiftKey) { submit(); } } @@ -181,63 +189,59 @@ const DiaryForm = () => { return ( <> - - - - - } + + + + + } + /> + + +
+ +
+ + - - -
- -
- - - - - +