feat/로그인 모달 #15

JMarketYard · Jan 27, 2025 · 984cc70 · 984cc70
1 parent ec792ae
commit 984cc70
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 18 deletions.
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import React, { PropsWithChildren } from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import { Icon } from '@iconify/react';

diff --git a/src/pages/login/components/AgeModal.tsx b/src/pages/login/components/AgeModal.tsx
@@ -7,14 +7,14 @@ import SignupModal from './SignupModal';
 import Modal from '../../../components/Modal/Modal';
 import { useModalContext } from '../../../components/Modal/context/ModalContext';
 import media from '../../../styles/media';
+import UnderAgeModal from './UnderAgeModal';
 
 interface ModalProps {
   onClose: () => void;
 }
 
 const AgeModal: React.FC<ModalProps> = ({ onClose }) => {
-  const [firstChecked, setFirstChecked] = useState(false);
-  const [secondChecked, setSecondChecked] = useState(false);
+  const [checked, setChecked] = React.useState([false, false]);
   const { openModal } = useModalContext();
   const [isLargeScreen, setIsLargeScreen] = useState<boolean>(() =>
     typeof window !== 'undefined' ? window.innerWidth >= 745 : false,
@@ -33,15 +33,25 @@ const AgeModal: React.FC<ModalProps> = ({ onClose }) => {
   }, []);
 
   const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setFirstChecked(event.target.checked);
+    setChecked([event.target.checked, false]);
   };
 
   const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSecondChecked(event.target.checked);
+    setChecked([false, event.target.checked]);
   };
 
+  useEffect(() => {
+    console.log('Checked State:', checked);
+  }, [checked]);
+
   const handleOpenNextModal = () => {
-    openModal(({ onClose }) => <SignupModal onClose={onClose} />);
+    if (checked[0]) {
+      openModal(({ onClose }) => <SignupModal onClose={onClose} />);
+    } else if (checked[1]) {
+      openModal(({ onClose }) => <UnderAgeModal onClose={onClose} />);
+    } else {
+      return;
+    }
   };
 
   const Content = (
@@ -55,7 +65,7 @@ const AgeModal: React.FC<ModalProps> = ({ onClose }) => {
         <Line />
         <Option style={{ marginBottom: '26px' }}>
           <Checkbox
-            checked={firstChecked}
+            checked={checked[0]}
             onChange={handleChange1}
             icon={<CircleUnchecked />}
             checkedIcon={<CircleChecked />}
@@ -70,7 +80,7 @@ const AgeModal: React.FC<ModalProps> = ({ onClose }) => {
         </Option>
         <Option>
           <Checkbox
-            checked={secondChecked}
+            checked={checked[1]}
             onChange={handleChange2}
             icon={<CircleUnchecked />}
             checkedIcon={<CircleChecked />}

diff --git a/src/pages/login/components/ConsentModal.tsx b/src/pages/login/components/ConsentModal.tsx
@@ -45,7 +45,11 @@ const ConsentModal: React.FC<ModalProps> = ({ onClose }) => {
   };
 
   const handleOpenNextModal = () => {
-    openModal(({ onClose }) => <AgeModal onClose={onClose} />);
+    if (checked[0] && checked[1]) {
+      openModal(({ onClose }) => <AgeModal onClose={onClose} />);
+    } else {
+      return;
+    }
   };
 
   const Content = (
@@ -91,6 +95,7 @@ const ConsentModal: React.FC<ModalProps> = ({ onClose }) => {
             }}
           />
           <Short>(필수) 필드 약관 및 동의사항</Short>
+          <Arrow>&gt;</Arrow>
         </Option>
         <Option>
           <Checkbox
@@ -110,7 +115,8 @@ const ConsentModal: React.FC<ModalProps> = ({ onClose }) => {
               },
             }}
           />
-          <Short>(선택) 마케팅 정보 수신 동의</Short>
+          <Short>(필수) 마케팅 정보 수신 동의</Short>
+          <Arrow>&gt;</Arrow>
         </Option>
         <Button onClick={handleOpenNextModal}>계속하기</Button>
       </Container>
@@ -120,6 +126,14 @@ const ConsentModal: React.FC<ModalProps> = ({ onClose }) => {
   return isLargeScreen ? <Modal onClose={onClose}>{Content}</Modal> : Content;
 };
 
+const Arrow = styled.div`
+  width: 8px;
+  height: 17px;
+  stroke-width: 1px;
+  stroke: #8f8e94;
+  color: #8f8e94;
+`;
+
 const Contents = styled.div`
   ${media.notLarge`
     background-color: white;

diff --git a/src/pages/login/components/SignupModal.tsx b/src/pages/login/components/SignupModal.tsx
@@ -12,9 +12,23 @@ interface ModalProps {
 
 const SignupModal: React.FC<ModalProps> = ({ onClose }) => {
   const { openModal } = useModalContext();
+  const [isError, setIsError] = useState('');
+  const [name, setName] = useState('');
+
+  const regex = /^[가-힣a-zA-Z0-9]{2,10}$/;
+
+  const handleChangeName = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
 
   const handleOpenNextModal = () => {
-    openModal(({ onClose }) => <EnterModal onClose={onClose} />);
+    if (!regex.test(name)) {
+      setIsError('닉네임은 2~10자의 한글 또는 영어만 사용 가능합니다.');
+      return;
+    } else {
+      setIsError('');
+      openModal(({ onClose }) => <EnterModal onClose={onClose} />);
+    }
   };
 
   const [isLargeScreen, setIsLargeScreen] = useState<boolean>(() =>
@@ -41,16 +55,44 @@ const SignupModal: React.FC<ModalProps> = ({ onClose }) => {
       <Container>
         <Line />
         <Info>회원 정보</Info>
-        <Name>닉네임</Name>
-        <Input placeholder="장마당에서 사용할 닉네임을 입력하세요. (한글 및 영어 2~5자)" />
-        <Button onClick={handleOpenNextModal}>회원가입</Button>
+        <Box>
+          <Name>닉네임</Name>
+          <Error>{isError}</Error>
+        </Box>
+        <Input
+          isError={!!isError}
+          value={name}
+          onChange={handleChangeName}
+          placeholder="장마당에서 사용할 닉네임을 입력하세요. (한글 및 영어 2~5자)"
+        />
+        <Button disabled={!name} onClick={handleOpenNextModal}>
+          회원가입
+        </Button>
       </Container>
     </Contents>
   );
 
   return isLargeScreen ? <Modal onClose={onClose}>{Content}</Modal> : Content;
 };
 
+const Box = styled.div`
+  display: flex;
+  column-gap: 28px;
+  margin-bottom: 7px;
+`;
+
+const Error = styled.div`
+  width: 234px;
+  height: 17px;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  color: #c908ff;
+  font-family: 'Noto Sans KR';
+  transform: translateX(-18px);
+`;
+
 const Container = styled.div`
   padding-left: 61px;
 `;
@@ -88,14 +130,15 @@ const Button = styled.button`
   font-weight: 700;
 `;
 
-const Input = styled.input`
+const Input = styled.input<{ isError: boolean }>`
   padding-left: 14px;
   width: 273px;
   height: 30px;
   border-radius: 7px;
-  border: 1px solid rgba(201, 8, 255, 0);
+  border: ${({ isError }) => (isError ? '1px solid #C908FF' : 'none')};
   background-color: #f7f7f7;
   font-size: 11px;
+  outline: none;
   &::placeholder {
     font-size: 11px;
     font-style: normal;
@@ -110,7 +153,6 @@ const Name = styled.div`
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
-  margin-bottom: 7px;
 `;
 
 const Info = styled.div`

diff --git a/src/pages/login/components/UnderAgeModal.tsx b/src/pages/login/components/UnderAgeModal.tsx
@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import sadVector from '../../../assets/sadVector.png';
+import Modal from '../../../components/Modal/Modal';
+import media from '../../../styles/media';
+
+interface ModalProps {
+  onClose: () => void;
+}
+
+const UnderAgeModal: React.FC<ModalProps> = ({ onClose }) => {
+  const [isLargeScreen, setIsLargeScreen] = useState<boolean>(() =>
+    typeof window !== 'undefined' ? window.innerWidth >= 745 : false,
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsLargeScreen(window.innerWidth >= 745);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const Content = (
+    <Contents>
+      <Container>
+        <Img src={sadVector} />
+        <Title>만 14세 미만은 이용할 수 없습니다.</Title>
+      </Container>
+    </Contents>
+  );
+
+  return isLargeScreen ? <Modal onClose={onClose}>{Content}</Modal> : Content;
+};
+
+const Contents = styled.div`
+  ${media.notLarge`
+    background-color: white;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+    position: fixed; 
+    top: 0;
+    left: 0;
+  `}
+`;
+
+const Title = styled.div`
+  font-family: Pretendard;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 600;
+  margin-bottom: 168px;
+`;
+
+const Img = styled.img`
+  width: 67px;
+  height: 65px;
+  margin-top: 130px;
+  margin-bottom: 42.5px;
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export default UnderAgeModal;
diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx
@@ -7,7 +7,7 @@ function Login() {
   const { openModal } = useModalContext();
 
   const handleOpenFirstModal = () => {
-    openModal(({ onClose }) => <SplashModal onClose={onClose} />);
+    openModal(({ onClose }) => <ConsentModal onClose={onClose} />);
   };
 
   return (