[FE] feat: 음성 채널 컨트롤러 컴포넌트 상단 UI 구현 (#74)

Author: zelkovaria

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

@@ -0,0 +1,27 @@
+import { BsFillTelephoneXFill } from 'react-icons/bs';
+
+import { useChannelInfoStore } from '@/stores/channelInfo';
+import { useGuildInfoStore } from '@/stores/guildInfo';
+
+import * as S from './styles';
+
+const VoiceChannelController = () => {
+  const { selectedChannel } = useChannelInfoStore();
+  const { guildName } = useGuildInfoStore();
+
+  return (
+    <S.VoiceChannelController>
+      <S.ConnectStatusWrapper>
+        <S.InfoText>
+          <S.ConnectStatusText>음성 연결됨</S.ConnectStatusText>
+          <S.ChannelInfoText>
+            {selectedChannel?.name} / {guildName}
+          </S.ChannelInfoText>
+        </S.InfoText>
+        <BsFillTelephoneXFill size={20} />
+      </S.ConnectStatusWrapper>
+    </S.VoiceChannelController>
+  );
+};
+
+export default VoiceChannelController;

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

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+import { ChipText, SmallText } from '@/styles/Typography';
+
+export const VoiceChannelController = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  padding: 1rem;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.dark[450]};
+
+  background-color: ${({ theme }) => theme.colors.dark[750]};
+`;
+
+export const InfoText = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ConnectStatusText = styled(ChipText)`
+  font-size: 1.5rem;
+  color: ${({ theme }) => theme.colors.lightGreen};
+`;
+
+export const ChannelInfoText = styled(SmallText)`
+  color: ${({ theme }) => theme.colors.dark[350]};
+`;
+
+export const ConnectStatusWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  svg {
+    color: ${({ theme }) => theme.colors.white};
+  }
+`;