[FE] feat: 채널에 따른 채팅 혹은 미디어창 렌더링 로직 추가 (#74)

Author: zelkovaria

src/frontend/src/pages/FriendsPage/index.tsx

@@ -1,17 +1,36 @@
 import CategorySection from '@/pages/FriendsPage/components/CategorySection';
+import { useGuildInfoStore } from '@/stores/guildInfo';
 
 import GuildList from '../../components/guild/GuildList';
+import VideoPage from '../VideoPage';
 
 import ChattingSection from './components/ChattingSection';
 import * as S from './styles';
 
 const FriendsPage = () => {
+  const { guildId } = useGuildInfoStore();
+
+  const renderCategoryComponent = () => {
+    const channelInfoStr = localStorage.getItem('channelInfo');
+
+    if (!guildId) return <ChattingSection />;
+
+    if (channelInfoStr) {
+      const channelData = JSON.parse(channelInfoStr);
+      const channelType = channelData.state.selectedChannel.type;
+
+      if (channelType === 'VOICE') return <VideoPage />;
+
+      // 텍스트 채널시 채팅창 주가 예정
+    }
+  };
+
   return (
     <S.FriendsPage>
       <S.ContentContainer>
         <GuildList />
         <CategorySection />
-        <ChattingSection />
+        {renderCategoryComponent()}
       </S.ContentContainer>
     </S.FriendsPage>
   );