diff --git a/src/main.tsx b/src/main.tsx index 82713f3..d17b4ec 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,7 +5,7 @@ import './index.css'; import HomePage from './pages/HomePage/HomePage'; import SignUpPage from './pages/SignUpPage/SignUpPage'; import LoginPage from './pages/LoginPage/LoginPage'; -import SignInPage from './pages/SignInPage/SignInPage'; +import SetProfile from './pages/SetProfile/SetProfile'; import ParticipatedDebatesPage from './pages/HistoryPage/ParticipatedDebate'; import DebatePage from './pages/HistoryPage/Debate'; import RankingPage from './pages/RankingPage/RankingPage'; @@ -19,7 +19,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render( } /> } /> } /> - } /> + } /> } /> } /> } /> diff --git a/src/pages/HomePage/component/Header.tsx b/src/pages/HomePage/component/Header.tsx index c448900..25bd329 100644 --- a/src/pages/HomePage/component/Header.tsx +++ b/src/pages/HomePage/component/Header.tsx @@ -6,13 +6,13 @@ import ico_mypage from "../../../assets/images/ico_mypage.svg"; const Header: React.FC = () => { const navigate = useNavigate(); // 여기에 실제 로그인 상태를 확인하는 로직을 추가해야 함 - const isLoggedIn = false; - //const isLoggedIn = true; + // const isLoggedIn = false; + const isLoggedIn = true; const handleProfileClick = () => { if (isLoggedIn) { - navigate('/signin'); + navigate('/signup'); } else { navigate('/my-page'); } diff --git a/src/pages/SignInPage/Keypad.tsx b/src/pages/SetProfile/Keypad.tsx similarity index 100% rename from src/pages/SignInPage/Keypad.tsx rename to src/pages/SetProfile/Keypad.tsx diff --git a/src/pages/SetProfile/SetProfile.tsx b/src/pages/SetProfile/SetProfile.tsx new file mode 100644 index 0000000..d47d9bc --- /dev/null +++ b/src/pages/SetProfile/SetProfile.tsx @@ -0,0 +1,201 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import certifyUnable from '../../assets/images/ic_btn_certify_unable.svg'; +import certifyAble from '../../assets/images/ic_btn_certify_able.svg'; +import unchecked from '../../assets/images/ic_checkbox_unchecked.svg'; +import checked from '../../assets/images/ic_checkbox_checked.svg'; +import hideIcon from '../../assets/images/ic_icon_hide.svg'; +import showIcon from '../../assets/images/ic_icon_show.svg'; + +const SignUpPage: React.FC = () => { + const [email, setEmail] = useState(''); + const [isEmailValid, setIsEmailValid] = useState(false); + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [showPassword, setShowPassword] = useState(false); + const [showConfirmPassword, setShowConfirmPassword] = useState(false); + const [isPasswordValid, setIsPasswordValid] = useState(false); + const [agreeToTerms, setAgreeToTerms] = useState(false); + const [agreeToMarketing, setAgreeToMarketing] = useState(false); + const navigate = useNavigate(); + + const handleEmailChange = (event: React.ChangeEvent) => { + const newEmail = event.target.value; + setEmail(newEmail); + setIsEmailValid(validateEmail(newEmail)); + }; + + const validateEmail = (email: string) => { + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + }; + + const handlePasswordChange = (event: React.ChangeEvent) => { + const password = event.target.value; + setPassword(password); + setIsPasswordValid(/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/.test(password)); + }; + + const handleConfirmPasswordChange = (event: React.ChangeEvent) => { + setConfirmPassword(event.target.value); + }; + + const handleTogglePasswordVisibility = () => { + setShowPassword(!showPassword); + }; + + const handleToggleConfirmPasswordVisibility = () => { + setShowConfirmPassword(!showConfirmPassword); + }; + + const handleAgreeToTermsChange = () => { + setAgreeToTerms(!agreeToTerms); + }; + + const handleAgreeToMarketingChange = () => { + setAgreeToMarketing(!agreeToMarketing); + }; + + const isFormValid = isEmailValid && isPasswordValid && password === confirmPassword && agreeToTerms; + + const handleSignUpClick = () => { + if (isFormValid) { + navigate('/set-profile'); + } + }; + + return ( +
+

+ 회원가입을 위한
정보를 입력해주세요. +

+
+ +
+ + +
+ {!isEmailValid && email.length > 0 && ( +

이메일 주소를 정확하게 입력해주세요.

+ )} +
+
+ +
+ + +
+ {!isPasswordValid && password.length > 0 && ( +

영문, 숫자, 특수문자를 포함하여 8자 이상 입력해주세요.

+ )} +
+
+ +
+ + +
+ {confirmPassword.length > 0 && password !== confirmPassword && ( +

비밀번호가 일치하지 않습니다.

+ )} +
+
+
+ + +
+
+ + +
+
+
+ +
+
+ ); +}; + +export default SignUpPage; diff --git a/src/pages/SignInPage/SignInPage.tsx b/src/pages/SignInPage/SignInPage.tsx deleted file mode 100644 index 90dd747..0000000 --- a/src/pages/SignInPage/SignInPage.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react'; -import Inputter from './Keypad'; - -const Profile: React.FC = () => { - const [nickname, setNickname] = useState(''); - const [birthdate, setBirthdate] = useState(''); - const [isKeyboardVisible, setIsKeyboardVisible] = useState(false); - const [birthdateError, setBirthdateError] = useState(false); - const birthdateRef = useRef(null); - const keypadRef = useRef(null); - - const handleNicknameChange = (event: React.ChangeEvent) => { - setNickname(event.target.value); - }; - - const handleBirthdateChange = (value: string) => { - setBirthdate(value); - }; - - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if ( - birthdateRef.current && - !birthdateRef.current.contains(event.target as Node) && - keypadRef.current && - !keypadRef.current.contains(event.target as Node) - ) { - setIsKeyboardVisible(false); - if (birthdate.length !== 8) { - setBirthdateError(true); - } else { - setBirthdateError(false); - } - } - }; - - document.addEventListener('mousedown', handleClickOutside); - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [birthdate]); - - const isFormValid = nickname.length > 0 && birthdate.length === 8; - - return ( -
-
-

-
잇픽에 필요한
{' '} - 프로필을 설정해주세요. -

- -
-
- - -
- -
- - setIsKeyboardVisible(true)} - readOnly - className=" w-[352px] h-[54px] pt-[12px] pb-[12px] pl-[20px] text-[black] font-[500] text-[18px] bg-[#F8F9FC] rounded-[8px] focus:outline-none" - placeholder="8자리 숫자로 입력해주세요" - /> - {birthdateError && ( - - 생년월일을 확인해주세요. - - )} -
- - - - {isKeyboardVisible && ( -
- -
- )} -
-
-
- ); -}; - -export default Profile;