[FE] feat: 모달 전환 구현 (#31)

sgdevcamp2025 · Feb 10, 2025 · 9208318 · 9208318
1 parent fa3e1d8
commit 9208318
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/src/frontend/src/components/guild/GuildList/index.tsx b/src/frontend/src/components/guild/GuildList/index.tsx
@@ -1,22 +1,41 @@
+import { useEffect, useState } from 'react';
+
 import CreateGuildModal from '../../../pages/FriendsPage/components/CreateGuildModal';
+import CustomizeGuildModal from '../../../pages/FriendsPage/components/CustomizeGuildModal';
 import useModalStore from '../../../stores/modalStore';
 
 import * as S from './styles';
 
+export type CreateGuildStep = 'initial' | 'customize';
+
 const GuildList = () => {
   const { openModal } = useModalStore();
+  const [currentModal, setCurrentModal] = useState<CreateGuildStep | null>(null);
 
-  const handleOpenModal = () => {
-    openModal('basic', 'create-server', <CreateGuildModal />);
+  const handleChangeModal = (key: string, modal: React.ReactNode) => {
+    openModal('basic', key, modal);
   };
 
+  useEffect(() => {
+    if (currentModal === null) return;
+
+    switch (currentModal) {
+      case 'initial':
+        handleChangeModal('create-server', <CreateGuildModal setCurrentModal={setCurrentModal} />);
+        break;
+      case 'customize':
+        handleChangeModal('customize-server', <CustomizeGuildModal setCurrentModal={setCurrentModal} />);
+        break;
+    }
+  }, [currentModal]);
+
   return (
     <S.GuildList>
       <S.DMButton>
         <S.DiscordIcon size={32} />
       </S.DMButton>
       {/* 서버 리스트 추가 예정 */}
-      <S.AddServerButton onClick={handleOpenModal}>
+      <S.AddServerButton onClick={() => setCurrentModal('initial')}>
         <S.PlusIcon size={24} />
       </S.AddServerButton>
       <S.SearchCommunityButton>

diff --git a/src/frontend/src/pages/FriendsPage/components/CreateGuildModal/index.tsx b/src/frontend/src/pages/FriendsPage/components/CreateGuildModal/index.tsx
@@ -1,11 +1,16 @@
 import { TbChevronRight } from 'react-icons/tb';
 
 import Modal from '../../../../components/common/Modal';
+import { CreateGuildStep } from '../../../../components/guild/GuildList';
 import { BodyMediumText, CaptionText, SmallButtonText } from '../../../../styles/Typography';
 
 import * as S from './styles';
 
-const CreateGuildModal = () => {
+interface CreateGuildModalProps {
+  setCurrentModal: React.Dispatch<React.SetStateAction<CreateGuildStep | null>>;
+}
+
+const CreateGuildModal = ({ setCurrentModal }: CreateGuildModalProps) => {
   return (
     <S.CreateGuildModal>
       <Modal name="basic">
@@ -18,7 +23,7 @@ const CreateGuildModal = () => {
             서버인가요?
           </CaptionText>
         </Modal.Content>
-        <S.CreateButtons>
+        <S.CreateButtons onClick={() => setCurrentModal('customize')}>
           <S.CreatePrivateGuild>
             <SmallButtonText>나와 친구들을 위한 서버</SmallButtonText>
             <TbChevronRight size={24} />

diff --git a/src/frontend/src/pages/FriendsPage/components/CustomizeGuildModal/index.tsx b/src/frontend/src/pages/FriendsPage/components/CustomizeGuildModal/index.tsx
@@ -3,11 +3,15 @@ import { LuCamera } from 'react-icons/lu';
 import { TbPlus } from 'react-icons/tb';
 
 import Modal from '../../../../components/common/Modal';
+import { CreateGuildStep } from '../../../../components/guild/GuildList';
 import { BodyMediumText, CaptionText, ChipText, SmallText } from '../../../../styles/Typography';
 
 import * as S from './styles';
 
-const CustomizeGuildModal = () => {
+interface CustomizeGuildModalProps {
+  setCurrentModal: React.Dispatch<React.SetStateAction<CreateGuildStep | null>>;
+}
+const CustomizeGuildModal = ({ setCurrentModal }: CustomizeGuildModalProps) => {
   const [inputValue, setInputValue] = useState('');
 
   const handleInputChange = (value: string) => {
@@ -46,7 +50,7 @@ const CustomizeGuildModal = () => {
           </S.ContentContainer>
         </Modal.Content>
         <S.FooterContainer>
-          <S.BackButton>뒤로가기</S.BackButton>
+          <S.BackButton onClick={() => setCurrentModal('initial')}>뒤로가기</S.BackButton>
           <S.CreateButton>만들기</S.CreateButton>
         </S.FooterContainer>
       </Modal>