[FE] refactor: AddGuildButton 컴포넌트 병합 (#31)

src/frontend/src/components/guild/GuildList/index.tsx

@@ -1,15 +1,25 @@
-import AddGuildButton from '../AddGuildButton';
+import useModalStore from '@/stores/modalStore';
+
+import CreateGuildModalContent from '../CreateGuildModalContent';
 
 import * as S from './styles';
 
 const GuildList = () => {
+  const { openModal } = useModalStore();
+
+  const handleChangeModal = () => {
+    openModal('basic', <CreateGuildModalContent />);
+  };
+
   return (
     <S.GuildList>
       <S.DMButton>
         <S.DiscordIcon size={32} />
       </S.DMButton>
       {/* 서버 리스트 추가 예정 */}
-      <AddGuildButton />
+      <S.AddGuildButton onClick={handleChangeModal}>
+        <S.PlusIcon size={24} />
+      </S.AddGuildButton>
       <S.SearchCommunityButton>
         <S.CompassIcon size={36} />
       </S.SearchCommunityButton>

src/frontend/src/components/guild/GuildList/styles.ts

@@ -1,5 +1,6 @@
 import { BiCompass } from 'react-icons/bi';
 import { BsDiscord } from 'react-icons/bs';
+import { TbPlus } from 'react-icons/tb';
 import styled from 'styled-components';
 
 export const GuildList = styled.nav`
@@ -30,7 +31,7 @@ export const DiscordIcon = styled(BsDiscord)`
   color: ${({ theme }) => theme.colors.white};
 `;
 
-export const SearchCommunityButton = styled.button`
+export const CircleButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,6 +43,17 @@ export const SearchCommunityButton = styled.button`
   background-color: ${({ theme }) => theme.colors.dark[600]};
 `;
 
+export const AddGuildButton = styled(CircleButton)`
+  /* 버튼별 역할 구별을 위해 분리 */
+`;
+export const SearchCommunityButton = styled(CircleButton)`
+  /* 버튼별 역할 구별을 위해 분리 */
+`;
+
+export const PlusIcon = styled(TbPlus)`
+  color: ${({ theme }) => theme.colors.dark[400]};
+`;
+
 export const CompassIcon = styled(BiCompass)`
   color: ${({ theme }) => theme.colors.dark[400]};
 `;