feat/#39 그룹생성팝업창 생성

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() {
             <Route path="/" element={<MakingGroupPage />} />
             <Route path="/makingGroup" element={<MakingGroupPage />} />
             <Route path="/login" element={<Login />} />
+            <Route path="/signUp" element={<SignUp />} />
             <Route path="/register" element={<SignUp />} />
             <Route path="/mypage" element={<MyPage />} />
             <Route
@@ -31,6 +33,7 @@ function App() {
               path="/anothercheckPointRecord"
               element={<AnotherCheckPointRecordPage />}
             />
+            <Route path="/joinGroupPopup" element={<JoinGroupPopup />} />
           </Routes>
         </div>
       </BrowserRouter>

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,

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 (
+    <PopupContainer isClosing={isClosing}>
+      <PopupInner isClosing={isClosing}>
+        <PopUpInnerBox1>
+          <Title>그룹 정보</Title>
+          <Content>
+            <span className="book-title">"{joinGroupPopupData.title}"</span>에
+            참여하시겠습니까? <br /> 방식 : {joinGroupPopupData.subject}
+          </Content>
+          <ButtonContainer>
+            <ModalButtonCancel width="150px" onClick={handleClose} />
+            <ModalButtonOk width="150px" />
+          </ButtonContainer>
+        </PopUpInnerBox1>
+      </PopupInner>
+    </PopupContainer>
+  );
+};
+
+export default JoinGroupPopup;

src/components/popup/MakingGroupPopup.jsx → 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 (
     <PopupContainer isClosing={isClosing}>
       <PopupInner isClosing={isClosing}>{renderComponent()}</PopupInner>

src/components/popup/RightPopup_one.jsx → 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 }) => {
         </Rightpopup_oneButtonGroup>
 
         {/* 최대 인원 */}
-        <Rightpopup_oneLabel>
-          최대 인원{' '}
-          <Rightpopup_oneWarningIcon>
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <circle cx="10" cy="10" r="7.5" stroke="#FF2525" />
-              <path d="M10 5V11" stroke="#FF2525" />
-              <circle cx="10" cy="14" r="1" fill="#FF2525" />
-            </svg>
-          </Rightpopup_oneWarningIcon>
-        </Rightpopup_oneLabel>
-        <Rightpopup_oneInput
-          type="number"
-          placeholder="최대 인원을 입력하세요"
-          value={groupData.maxMembers || ''} // 상태값을 표시
-          onChange={(e) => {
-            const value = parseInt(e.target.value, 10); // 숫자로 변환
-            setMaxMembers(isNaN(value) ? 0 : value); // 숫자가 아니면 0으로 설정
-          }}
-        />
+        {!isIndividual && (
+          <>
+            <Rightpopup_oneLabel>
+              최대 인원{' '}
+              <Rightpopup_oneWarningIcon>
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle cx="10" cy="10" r="7.5" stroke="#FF2525" />
+                  <path d="M10 5V11" stroke="#FF2525" />
+                  <circle cx="10" cy="14" r="1" fill="#FF2525" />
+                </svg>
+              </Rightpopup_oneWarningIcon>
+            </Rightpopup_oneLabel>
+            <Rightpopup_oneInput
+              type="number"
+              placeholder="최대 인원을 입력하세요"
+              value={groupData.maxMembers || ''} // 상태값을 표시
+              onChange={(e) => {
+                const value = parseInt(e.target.value, 10); // 숫자로 변환
+                setMaxMembers(isNaN(value) ? 0 : value); // 숫자가 아니면 0으로 설정
+              }}
+            />
+          </>
+        )}
 
         {/* 비밀번호 */}
         <Rightpopup_oneLabel>비밀번호</Rightpopup_oneLabel>

src/components/popup/RightPopup_two.jsx → 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 (
     <>

src/components/popup/SelectedChapter.jsx → 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 }) => {

src/components/popup/SelectedMine.jsx → 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('');

src/components/popup/SelectedNumber.jsx → 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('');

src/components/popup/SelectedPages.jsx → 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('');

src/data/joinGroupPopupData.jsx

@@ -0,0 +1,5 @@
+//나중에 api로 변경할꺼
+export const joinGroupPopupData = {
+  title: 'CHECK POINT 1',
+  subject: '페이지',
+};

src/hooks/useCardSelection.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+//전체 적인 팝업 관리
 const useCardSelection = () => {
   const [selectedImgPath, setSelectedImgPath] = useState(null);
   const [selectedTitle, setSelectedTitle] = useState(null);

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;

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%;