[FE] feat: 채널 생성 구현

src/frontend/src/api/guild.ts

@@ -1,5 +1,13 @@
 import { endPoint } from '@/constants/endPoint';
-import { CreateGuildRequest, CreateGuildResponse, GetGuildResponse, GetGuildsResponse } from '@/types/guilds';
+import {
+  CreateCategoryRequest,
+  CreateCategoryResponse,
+  CreateChannelRequest,
+  CreateGuildRequest,
+  CreateGuildResponse,
+  GetGuildResponse,
+  GetGuildsResponse,
+} from '@/types/guilds';
 import { tokenAxios } from '@/utils/axios';
 import { convertFormData } from '@/utils/convertFormData';
 
@@ -22,3 +30,11 @@ export const getGuild = async (guildId: string) => {
   const { data } = await tokenAxios.get<GetGuildResponse>(endPoint.guilds.GET_GUILD(guildId));
   return data.result;
 };
+
+export const createGuildCategory = async (data: CreateCategoryRequest) => {
+  return await tokenAxios.post<CreateCategoryResponse>(endPoint.guilds.CREATE_CATEGORY, data);
+};
+
+export const createGuildChannel = async (data: CreateChannelRequest) => {
+  return await tokenAxios.post<CreateChannelRequest>(endPoint.guilds.CREATE_CHANNEL, data);
+};

src/frontend/src/components/common/Toggle/index.tsx

@@ -0,0 +1,38 @@
+import * as S from './styles';
+
+/**
+ *
+ * @example
+ * ```tsx
+ * <Toggle isOn={공개여부 상태값}
+ *  onToggle={() => 해당 상태값 setter함수}
+ * />
+ * ```
+ *
+ * @param isOn - 토글 스위치 ON/OFF 상태입니다(공개/비공개)
+ * @param onToggle - 실행 시 실행될 콜백 함수
+ */
+interface ToggleProps {
+  isOn: boolean;
+  onToggle: () => void;
+}
+const Toggle = ({ isOn, onToggle }: ToggleProps) => {
+  return (
+    <S.Toggle $isOn={isOn} onClick={onToggle}>
+      <S.ToggleCircle
+        animate={{
+          x: isOn ? 25 : 0,
+        }}
+        transition={{
+          type: 'spring',
+          stiffness: 500,
+          damping: 30,
+        }}
+      >
+        <S.IconWrapper>{isOn ? '✓' : '✕'}</S.IconWrapper>
+      </S.ToggleCircle>
+    </S.Toggle>
+  );
+};
+
+export default Toggle;

src/frontend/src/components/common/Toggle/styles.ts

@@ -0,0 +1,34 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+
+export const Toggle = styled.div<{ $isOn: boolean }>`
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+
+  width: 5rem;
+  height: 2.5rem;
+  padding: 0.2rem;
+  border-radius: 1.2rem;
+
+  background-color: ${({ theme, $isOn }) => ($isOn ? theme.colors.green : theme.colors.dark[300])};
+`;
+
+export const ToggleCircle = styled(motion.div)`
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.colors.white};
+`;
+
+export const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  color: ${({ theme }) => theme.colors.dark[500]};
+`;

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

@@ -0,0 +1,44 @@
+import { TbPlus } from 'react-icons/tb';
+
+import { useGuildInfoStore } from '@/stores/guildInfo';
+import useModalStore from '@/stores/modalStore';
+import { BodyMediumText, BodyRegularText } from '@/styles/Typography';
+import { CategoryDataResult, ChannelResult } from '@/types/guilds';
+
+import CreateChannelModal from '../CreateChannelModal';
+
+import * as S from './styles';
+
+export interface CategoriesListProps {
+  categories?: CategoryDataResult[];
+  channels?: ChannelResult[];
+}
+const CategoriesList = ({ categories, channels }: CategoriesListProps) => {
+  const { openModal } = useModalStore();
+  const { guildId } = useGuildInfoStore();
+  const handleOpenModal = (categoryId: string, guildId: string) => {
+    openModal('withFooter', <CreateChannelModal categoryId={categoryId} guildId={guildId} />);
+  };
+
+  return (
+    <S.CategoriesList>
+      {categories?.map((category) => (
+        <S.Category key={category.categoryId}>
+          <S.CategoryName>
+            <BodyMediumText>{category.name}</BodyMediumText>
+            <TbPlus size={18} onClick={() => handleOpenModal(category.categoryId, guildId)} />
+          </S.CategoryName>
+          {channels
+            ?.filter((channel) => category.categoryId === channel.categoryId)
+            .map((channel) => (
+              <S.Channels key={channel.channelId}>
+                <BodyRegularText>{channel.name}</BodyRegularText>
+              </S.Channels>
+            ))}
+        </S.Category>
+      ))}
+    </S.CategoriesList>
+  );
+};
+
+export default CategoriesList;

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

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+export const CategoriesList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  margin-top: 1.5rem;
+
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
+export const Category = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const CategoryName = styled.div`
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  svg {
+    color: ${({ theme }) => theme.colors.dark[300]};
+  }
+`;
+
+export const Channels = styled.div`
+  display: flex;
+`;

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

@@ -0,0 +1,109 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { BiHash, BiSolidLock } from 'react-icons/bi';
+import { BsFillMicFill } from 'react-icons/bs';
+
+import { createGuildChannel } from '@/api/guild';
+import Modal from '@/components/common/Modal';
+import Toggle from '@/components/common/Toggle';
+import useModalStore from '@/stores/modalStore';
+import { BodyMediumText, ChipText, SmallText, TitleText2 } from '@/styles/Typography';
+import { ChannelType, CreateChannelRequest } from '@/types/guilds';
+
+import * as S from './styles';
+
+interface CreateChannelModalProps {
+  guildId: string;
+  categoryId: string;
+}
+
+const CreateChannelModal = ({ categoryId, guildId }: CreateChannelModalProps) => {
+  const { closeAllModal } = useModalStore();
+  const [isPublicChannel, setIsPublicChannel] = useState(false);
+  const [channelName, setChannelName] = useState('');
+  const [isSelectedType, setIsSelectedType] = useState<ChannelType>(null);
+  const queryClient = useQueryClient();
+
+  const handleChannelNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newName = event.target.value;
+
+    if (newName.length !== 0) setChannelName(newName);
+  };
+
+  const handleChangeTextType = () => {
+    setIsSelectedType('TEXT');
+  };
+
+  const handleChangeVoiceType = () => {
+    setIsSelectedType('VOICE');
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const requestData: CreateChannelRequest = {
+        name: channelName,
+        guildId,
+        categoryId,
+        channelType: isSelectedType,
+        private: !isPublicChannel,
+      };
+
+      await createGuildChannel(requestData);
+
+      await queryClient.invalidateQueries({ queryKey: ['guildInfo', guildId] });
+
+      closeAllModal();
+    } catch (error) {
+      console.error('카테고리 생성 중 오류가 발생했어요', error);
+    }
+  };
+
+  return (
+    <Modal name="withFooter">
+      <Modal.Header>
+        <TitleText2>채널 만들기</TitleText2>
+      </Modal.Header>
+      <Modal.Content>
+        <S.ChannelType>
+          <ChipText>채널 유형</ChipText>
+          <S.ChannelTypeContent $isSelectedType={isSelectedType === 'TEXT'} onClick={handleChangeTextType}>
+            <BiHash size={24} />
+            <S.TypeInfo>
+              <BodyMediumText>텍스트</BodyMediumText>
+              <SmallText>메시지, 이미지, GIF, 의견, 농담을 전송하세요</SmallText>
+            </S.TypeInfo>
+          </S.ChannelTypeContent>
+          <S.ChannelTypeContent $isSelectedType={isSelectedType === 'VOICE'} onClick={handleChangeVoiceType}>
+            <BsFillMicFill size={24} />
+            <S.TypeInfo>
+              <BodyMediumText>음성</BodyMediumText>
+              <SmallText>음성, 영상, 화면 공유로 함께 어울리세요</SmallText>
+            </S.TypeInfo>
+          </S.ChannelTypeContent>
+        </S.ChannelType>
+        <ChipText>채널 이름</ChipText>
+        <S.ChannelNameInput
+          onChange={handleChannelNameChange}
+          value={channelName}
+          placeholder="채널 이름을 입력해주세요"
+        />
+        <S.PrivateSetting>
+          <S.SettingText>
+            <BiSolidLock size={24} />
+            <BodyMediumText>비공개 채널</BodyMediumText>
+          </S.SettingText>
+          <Toggle isOn={isPublicChannel} onToggle={() => setIsPublicChannel(!isPublicChannel)} />
+        </S.PrivateSetting>
+        <S.ChannelInfoText>선택한 멤버들과 역할만 이 채널을 볼 수 있어요</S.ChannelInfoText>
+      </Modal.Content>
+      <S.FooterContainer>
+        <S.CancelButton onClick={closeAllModal}>취소</S.CancelButton>
+        <S.CreateButton $disabled={!isSelectedType} onClick={handleSubmit}>
+          채널 만들기
+        </S.CreateButton>
+      </S.FooterContainer>
+    </Modal>
+  );
+};
+
+export default CreateChannelModal;

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

@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+
+import { CaptionText } from '@/styles/Typography';
+
+export const ChannelType = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 2rem;
+`;
+
+export const ChannelTypeContent = styled.div<{ $isSelectedType: boolean }>`
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+
+  min-height: 5rem;
+  padding: 0.6rem;
+  border-radius: 0.8rem;
+
+  background-color: ${({ theme, $isSelectedType }) =>
+    $isSelectedType ? theme.colors.dark[350] : theme.colors.dark[600]};
+
+  svg {
+    color: ${({ theme }) => theme.colors.dark[400]};
+  }
+
+  span {
+    color: ${({ theme }) => theme.colors.dark[400]};
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: ${({ theme }) => theme.colors.dark[350]};
+  }
+`;
+
+export const TypeInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ChannelInfoText = styled(CaptionText)`
+  color: ${({ theme }) => theme.colors.dark[300]};
+`;
+
+export const FooterContainer = styled.div`
+  display: flex;
+  gap: 4rem;
+  justify-content: flex-end;
+
+  padding: 1.5rem 2rem;
+
+  background-color: ${({ theme }) => theme.colors.dark[600]};
+`;
+
+export const ChannelNameInput = styled.input`
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 4rem;
+  margin: 0.4rem 0;
+  padding: 0.4rem 0 0.4rem 0.8rem;
+  border: none;
+  border-radius: 0.4rem;
+
+  color: ${({ theme }) => theme.colors.white};
+
+  background-color: ${({ theme }) => theme.colors.dark[800]};
+  outline: none;
+`;
+
+export const CancelButton = styled.button`
+  color: ${({ theme }) => theme.colors.white};
+  background-color: transparent;
+`;
+
+export const CreateButton = styled.button<{ $disabled: boolean }>`
+  width: 11rem;
+  height: 4rem;
+  border-radius: 0.8rem;
+
+  color: ${({ theme }) => theme.colors.white};
+
+  background-color: ${({ theme, $disabled }) => ($disabled ? theme.colors.dark[400] : theme.colors.blue)};
+`;
+
+export const PrivateSetting = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 1rem 0;
+`;
+
+export const SettingText = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
+  svg {
+    color: ${({ theme }) => theme.colors.white};
+  }
+`;