diff --git a/src/App.jsx b/src/App.jsx index cc72232..6fb188c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -7,8 +7,9 @@ import NavBar from './components/NavBar'; import MakingGroupPage from './pages/MakingGroupPage'; import Login from './pages/Login'; import SignUp from './pages/SignUp'; -import CheckPointRecordPage from './pages/CheckPointRecordPage'; -import AnotherCheckPointRecordPage from './pages/AnotherCheckPointRecordPage'; +import CheckPointRecordPage from './Dispose/CheckPointRecordPage'; +import AnotherCheckPointRecordPage from './Dispose/AnotherCheckPointRecordPage'; +import JoinGroupPopup from './components/popup/JoinGroupPopup/JoinGroupPop'; import MyPage from './pages/MyPage'; function App() { @@ -21,6 +22,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> + } /> diff --git a/src/pages/AnotherCheckPointRecordPage.jsx b/src/Dispose/AnotherCheckPointRecordPage.jsx similarity index 100% rename from src/pages/AnotherCheckPointRecordPage.jsx rename to src/Dispose/AnotherCheckPointRecordPage.jsx diff --git a/src/pages/CheckPointRecordPage.jsx b/src/Dispose/CheckPointRecordPage.jsx similarity index 100% rename from src/pages/CheckPointRecordPage.jsx rename to src/Dispose/CheckPointRecordPage.jsx diff --git a/src/components/makingGroupComponents/GroupCards.jsx b/src/components/makingGroupComponents/GroupCards.jsx index c65497d..c1a1f12 100644 --- a/src/components/makingGroupComponents/GroupCards.jsx +++ b/src/components/makingGroupComponents/GroupCards.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import MakingGroupPopup from '../popup/makingGroupPopup'; +import MakingGroupPopup from '../popup/MakingGroupPopup/MakingGroupPopup'; import { cardData } from '../../data/cardData'; import { ListBigContainer, diff --git a/src/components/popup/JoinGroupPopup/JoinGroupPop.jsx b/src/components/popup/JoinGroupPopup/JoinGroupPop.jsx new file mode 100644 index 0000000..ae6c313 --- /dev/null +++ b/src/components/popup/JoinGroupPopup/JoinGroupPop.jsx @@ -0,0 +1,88 @@ +import React, { useState, useEffect } from 'react'; +import { + PopupContainer, + PopupInner, +} from '../../../styled_components/popupStyle'; +import useClosePopupAnimation from '../../../hooks/useClosePopupAnimation'; +import styled from 'styled-components'; +import ModalButtonOk from '../../modalButton/ModalButtonOk'; +import ModalButtonCancel from '../../modalButton/ModalButtonCancel'; +import { joinGroupPopupData } from '../../../data/joinGroupPopupData'; + +const PopUpInnerBox1 = styled.div` + overflow: hidden; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 60px 80px; + gap: 50px; + + width: 30%; + height: auto; + + background: #ffffff; + border-radius: 20px; +`; +const Title = styled.div` + /* 그룹 정보 */ + + font-family: ${(props) => props.theme.font.main}; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 35px; + /* identical to box height */ + + color: #ab0909; + + /* Inside auto layout */ + flex: none; + order: 0; + flex-grow: 0; +`; +const Content = styled.div` + font-family: ${(props) => props.theme.font.main}; + font-size: 1rem; + line-height: 35px; + color: black; + .book-title { + font-weight: 800; + } +`; + +const ButtonContainer = styled.div` + display: flex; + flex-direction: row; + width: 100%; + justify-content: space-between; +`; + +const JoinGroupPopup = ({ onClose = false }) => { + const [isClosing, setIsClosing] = useState(false); // 닫힘 상태 관리 + + const handleClose = () => { + setIsClosing(true); // 닫히는 애니메이션 시작 + }; + + useClosePopupAnimation(isClosing, onClose); + + return ( + + + + 그룹 정보 + + "{joinGroupPopupData.title}"에 + 참여하시겠습니까?
방식 : {joinGroupPopupData.subject} + + + + + + + + + ); +}; + +export default JoinGroupPopup; diff --git a/src/components/popup/MakingGroupPopup.jsx b/src/components/popup/MakingGroupPopup/MakingGroupPopup.jsx similarity index 82% rename from src/components/popup/MakingGroupPopup.jsx rename to src/components/popup/MakingGroupPopup/MakingGroupPopup.jsx index 5c99877..0ee73ea 100644 --- a/src/components/popup/MakingGroupPopup.jsx +++ b/src/components/popup/MakingGroupPopup/MakingGroupPopup.jsx @@ -1,10 +1,14 @@ import React, { useState, useEffect } from 'react'; -import { PopupContainer, PopupInner } from '../../styled_components/popupStyle'; +import { + PopupContainer, + PopupInner, +} from '../../../styled_components/popupStyle'; import SelectedChapter from './SelectedChapter'; import SelectedPages from './SelectedPages'; import SelectedNumber from './SelectedNumber'; import SelectedMine from './SelectedMine'; +import useClosePopupAnimation from '../../../hooks/useClosePopupAnimation'; const MakingGroupPopup = ({ imgPath, imgNum, title, content, onClose }) => { const [isClosing, setIsClosing] = useState(false); // 닫힘 상태 관리 @@ -56,15 +60,7 @@ const MakingGroupPopup = ({ imgPath, imgNum, title, content, onClose }) => { setIsClosing(true); // 닫히는 애니메이션 시작 }; - useEffect(() => { - if (isClosing) { - const timer = setTimeout(() => { - onClose(); // 애니메이션 완료 후 onClose 호출 - }, 350); // 애니메이션 지속 시간 - return () => clearTimeout(timer); - } - }, [isClosing, onClose]); - + useClosePopupAnimation(isClosing, onClose); return ( {renderComponent()} diff --git a/src/components/popup/RightPopup_one.jsx b/src/components/popup/MakingGroupPopup/RightPopup_one.jsx similarity index 72% rename from src/components/popup/RightPopup_one.jsx rename to src/components/popup/MakingGroupPopup/RightPopup_one.jsx index 2d9fed0..90d3561 100644 --- a/src/components/popup/RightPopup_one.jsx +++ b/src/components/popup/MakingGroupPopup/RightPopup_one.jsx @@ -14,11 +14,11 @@ import { ButtonE, Cancel, FrameE, -} from '../../styled_components/popupStyle'; -import makingGroupForm from '../../hooks/makingGroupForm'; +} from '../../../styled_components/popupStyle'; +import makingGroupForm from '../../../hooks/makingGroupForm'; const Rightpopup_one = ({ handleBack, groupMemberNum }) => { - const [isIndividual, setIsIndividual] = useState(true); // 개인/단체 구분 상태 + const [isIndividual, setIsIndividual] = useState(false); // 개인/단체 구분 상태 const [isPasswordSet, setIsPasswordSet] = useState(true); // 비밀번호 설정 여부 const { groupData, setGroupName, setMaxMembers, setPassword } = @@ -68,31 +68,35 @@ const Rightpopup_one = ({ handleBack, groupMemberNum }) => { {/* 최대 인원 */} - - 최대 인원{' '} - - - - - - - - - { - const value = parseInt(e.target.value, 10); // 숫자로 변환 - setMaxMembers(isNaN(value) ? 0 : value); // 숫자가 아니면 0으로 설정 - }} - /> + {!isIndividual && ( + <> + + 최대 인원{' '} + + + + + + + + + { + const value = parseInt(e.target.value, 10); // 숫자로 변환 + setMaxMembers(isNaN(value) ? 0 : value); // 숫자가 아니면 0으로 설정 + }} + /> + + )} {/* 비밀번호 */} 비밀번호 diff --git a/src/components/popup/RightPopup_two.jsx b/src/components/popup/MakingGroupPopup/RightPopup_two.jsx similarity index 95% rename from src/components/popup/RightPopup_two.jsx rename to src/components/popup/MakingGroupPopup/RightPopup_two.jsx index 5e82d13..a54308e 100644 --- a/src/components/popup/RightPopup_two.jsx +++ b/src/components/popup/MakingGroupPopup/RightPopup_two.jsx @@ -6,7 +6,7 @@ import { GroupCircle, GroupName, GroupDetails_container, -} from '../../styled_components/popupStyle'; +} from '../../../styled_components/popupStyle'; const RightPopup_two = ({ groups, handleGroupClick }) => { return ( <> diff --git a/src/components/popup/SelectedChapter.jsx b/src/components/popup/MakingGroupPopup/SelectedChapter.jsx similarity index 94% rename from src/components/popup/SelectedChapter.jsx rename to src/components/popup/MakingGroupPopup/SelectedChapter.jsx index b92631e..2027b3f 100644 --- a/src/components/popup/SelectedChapter.jsx +++ b/src/components/popup/MakingGroupPopup/SelectedChapter.jsx @@ -8,10 +8,10 @@ import { ErrorMessageEmpty, ModalContent, ModalContainer, -} from '../../styled_components/popupStyle'; -import LGButton from '../LGButton/LGButton'; +} from '../../../styled_components/popupStyle'; +import LGButton from '../../LGButton/LGButton'; import RightPopup_two from './RightPopup_two'; -import useModalSelectedGroup from '../../hooks/useModalSelectedGroup'; +import useModalSelectedGroup from '../../../hooks/useModalSelectedGroup'; import Rightpopup_one from './RightPopup_one'; const SelectedChapter = ({ imgPath, title, content, handleClose }) => { diff --git a/src/components/popup/SelectedMine.jsx b/src/components/popup/MakingGroupPopup/SelectedMine.jsx similarity index 93% rename from src/components/popup/SelectedMine.jsx rename to src/components/popup/MakingGroupPopup/SelectedMine.jsx index 416d7e6..0c0955a 100644 --- a/src/components/popup/SelectedMine.jsx +++ b/src/components/popup/MakingGroupPopup/SelectedMine.jsx @@ -6,11 +6,11 @@ import { PopUpInnerBox2, ModalContent, ModalContainer, -} from '../../styled_components/popupStyle'; -import LGButton from '../LGButton/LGButton'; +} from '../../../styled_components/popupStyle'; +import LGButton from '../../LGButton/LGButton'; import RightPopup_two from './RightPopup_two'; import Rightpopup_one from './RightPopup_one'; -import useModalSelectedGroup from '../../hooks/useModalSelectedGroup'; +import useModalSelectedGroup from '../../../hooks/useModalSelectedGroup'; const SelectedMine = ({ imgPath, title, content, handleClose }) => { const [inputValue, setInputValue] = useState(''); diff --git a/src/components/popup/SelectedNumber.jsx b/src/components/popup/MakingGroupPopup/SelectedNumber.jsx similarity index 94% rename from src/components/popup/SelectedNumber.jsx rename to src/components/popup/MakingGroupPopup/SelectedNumber.jsx index 023f75e..7e8f62c 100644 --- a/src/components/popup/SelectedNumber.jsx +++ b/src/components/popup/MakingGroupPopup/SelectedNumber.jsx @@ -8,11 +8,11 @@ import { ErrorMessageEmpty, ModalContent, ModalContainer, -} from '../../styled_components/popupStyle'; -import LGButton from '../LGButton/LGButton'; +} from '../../../styled_components/popupStyle'; +import LGButton from '../../LGButton/LGButton'; import RightPopup_two from './RightPopup_two'; import Rightpopup_one from './RightPopup_one'; -import useModalSelectedGroup from '../../hooks/useModalSelectedGroup'; +import useModalSelectedGroup from '../../../hooks/useModalSelectedGroup'; const SelectedNumber = ({ imgPath, title, content, handleClose }) => { const [inputValue, setInputValue] = useState(''); diff --git a/src/components/popup/SelectedPages.jsx b/src/components/popup/MakingGroupPopup/SelectedPages.jsx similarity index 94% rename from src/components/popup/SelectedPages.jsx rename to src/components/popup/MakingGroupPopup/SelectedPages.jsx index f2402a3..228926b 100644 --- a/src/components/popup/SelectedPages.jsx +++ b/src/components/popup/MakingGroupPopup/SelectedPages.jsx @@ -8,11 +8,11 @@ import { ErrorMessageEmpty, ModalContent, ModalContainer, -} from '../../styled_components/popupStyle'; -import LGButton from '../LGButton/LGButton'; +} from '../../../styled_components/popupStyle'; +import LGButton from '../../LGButton/LGButton'; import RightPopup_two from './RightPopup_two'; import Rightpopup_one from './RightPopup_one'; -import useModalSelectedGroup from '../../hooks/useModalSelectedGroup'; +import useModalSelectedGroup from '../../../hooks/useModalSelectedGroup'; const SelectedPages = ({ imgPath, title, content, handleClose }) => { const [inputValue, setInputValue] = useState(''); diff --git a/src/data/joinGroupPopupData.jsx b/src/data/joinGroupPopupData.jsx new file mode 100644 index 0000000..24c918e --- /dev/null +++ b/src/data/joinGroupPopupData.jsx @@ -0,0 +1,5 @@ +//나중에 api로 변경할꺼 +export const joinGroupPopupData = { + title: 'CHECK POINT 1', + subject: '페이지', +}; diff --git a/src/hooks/useCardSelection.jsx b/src/hooks/useCardSelection.jsx index b91e43a..45d1447 100644 --- a/src/hooks/useCardSelection.jsx +++ b/src/hooks/useCardSelection.jsx @@ -1,5 +1,6 @@ import { useState } from 'react'; +//전체 적인 팝업 관리 const useCardSelection = () => { const [selectedImgPath, setSelectedImgPath] = useState(null); const [selectedTitle, setSelectedTitle] = useState(null); diff --git a/src/hooks/useClosePopupAnimation.jsx b/src/hooks/useClosePopupAnimation.jsx new file mode 100644 index 0000000..751eeac --- /dev/null +++ b/src/hooks/useClosePopupAnimation.jsx @@ -0,0 +1,14 @@ +import { useEffect } from 'react'; + +const useClosePopupAnimation = (isClosing, onClose) => { + useEffect(() => { + if (isClosing) { + const timer = setTimeout(() => { + onClose(); // 애니메이션 완료 후 onClose 호출 + }, 350); // 애니메이션 지속 시간 + return () => clearTimeout(timer); + } + }, [isClosing, onClose]); +}; + +export default useClosePopupAnimation; diff --git a/src/styled_components/popupStyle.jsx b/src/styled_components/popupStyle.jsx index 7b5925e..fb52dc3 100644 --- a/src/styled_components/popupStyle.jsx +++ b/src/styled_components/popupStyle.jsx @@ -28,6 +28,7 @@ export const PopupInner = styled.div` position: relative; display: flex; align-items: center; + justify-content: center; gap: 3%; width: 65%; height: 60%;