허들레이아웃 구현

src/frontend/apps/web/app/(main)/huddle/page.tsx

@@ -0,0 +1,7 @@
+import HuddleContainer from '@/src/features/video/ui/huddle-container';
+
+//허들 테스트를 위한 임시페이지(삭제예정)
+const HuddleTest = () => {
+  return <HuddleContainer />;
+};
+export default HuddleTest;

src/frontend/apps/web/src/features/video/index.ts

@@ -0,0 +1 @@
+export { default as HuddleContainer } from './ui/huddle-container';

src/frontend/apps/web/src/features/video/ui/controls-container.tsx

@@ -0,0 +1,18 @@
+import { Button, Toggle } from '@workspace/ui/components';
+import HuddleControls from './huddle-controls';
+import { MessageSquareText } from 'lucide-react';
+const ControlsContainer = () => {
+  return (
+    <div className="relative w-full h-full min-w-0 min-h-0 flex flex-row justify-center items-center">
+      <HuddleControls />
+      <Toggle
+        variant="default"
+        size="lg"
+        className="absolute right-0"
+      >
+        <MessageSquareText />
+      </Toggle>
+    </div>
+  );
+};
+export default ControlsContainer;

src/frontend/apps/web/src/features/video/ui/huddle-container.tsx

@@ -0,0 +1,20 @@
+import { Headphones } from 'lucide-react';
+import HuddleContent from './huddle-content';
+import ControlsContainer from './controls-container';
+
+const HuddleContainer = () => {
+  return (
+    <div className="bg-primary w-full h-full flex flex-col gap-1 px-2 py-1">
+      <h3 className="flex flex-row text-white gap-2">
+        <Headphones /> slack-전체에서의 허들 1명
+      </h3>
+      <div className="min-h-0 h-[90%]">
+        <HuddleContent />
+      </div>
+      <div className="min-h-0 h-[10%]">
+        <ControlsContainer />
+      </div>
+    </div>
+  );
+};
+export default HuddleContainer;

src/frontend/apps/web/src/features/video/ui/huddle-content.tsx

@@ -0,0 +1,13 @@
+import HuddleParticipant from './huddle-participant';
+
+const HuddleContent = () => {
+  return (
+    <div className="w-full h-full min-h-0 overflow-hidden p-3 bg-muted rounded-lg flex flex-row flex-wrap justify-center items-center gap-5 overflow-y-auto">
+      <HuddleParticipant />
+      <HuddleParticipant />
+      {/* <HuddleParticipant />
+      <HuddleParticipant /> */}
+    </div>
+  );
+};
+export default HuddleContent;

src/frontend/apps/web/src/features/video/ui/huddle-controls.tsx

@@ -0,0 +1,60 @@
+'use client';
+import { Button, ToggleGroup, ToggleGroupItem } from '@workspace/ui/components';
+import {
+  Mic,
+  MicOff,
+  ScreenShare,
+  ScreenShareOff,
+  Video,
+  VideoOff,
+} from 'lucide-react';
+import { useState } from 'react';
+
+const HuddleControls = () => {
+  const [isMicOn, setIsMicOn] = useState(false);
+  const [isVideoOn, setIsVideoOn] = useState(false);
+  const [isScreenSharing, setIsScreenSharing] = useState(false);
+  const iconStyle = 'w-16 h-16';
+
+  return (
+    <div className="flex justify-center items-center">
+      <ToggleGroup
+        variant="default"
+        type="multiple"
+        size="lg"
+        className="gap-3"
+      >
+        <ToggleGroupItem
+          value="mic"
+          onClick={() => setIsMicOn((prev) => !prev)}
+        >
+          {isMicOn ? (
+            <Mic className={iconStyle} />
+          ) : (
+            <MicOff className={iconStyle} />
+          )}
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="video"
+          onClick={() => setIsVideoOn((prev) => !prev)}
+        >
+          {isVideoOn ? <Video /> : <VideoOff />}
+        </ToggleGroupItem>
+        <ToggleGroupItem
+          value="sharing"
+          onClick={() => setIsScreenSharing((prev) => !prev)}
+        >
+          {isScreenSharing ? <ScreenShare /> : <ScreenShareOff />}
+        </ToggleGroupItem>
+        <Button
+          variant="destructive"
+          size="lg"
+          className="h-12 font-bold"
+        >
+          나가기
+        </Button>
+      </ToggleGroup>
+    </div>
+  );
+};
+export default HuddleControls;

src/frontend/apps/web/src/features/video/ui/huddle-participant-avatar.tsx

@@ -0,0 +1,15 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components';
+import { CircleUserRound } from 'lucide-react';
+
+const HuddleParticipantAvatar = () => {
+  return (
+    <Avatar
+      variant="square"
+      className="w-full h-full"
+    >
+      <AvatarImage src="https://github.com/shadcn.png" />
+      <AvatarFallback className="bg-gray-300">user profile</AvatarFallback>
+    </Avatar>
+  );
+};
+export default HuddleParticipantAvatar;

src/frontend/apps/web/src/features/video/ui/huddle-participant.tsx

@@ -0,0 +1,11 @@
+import HuddleParticipantAvatar from './huddle-participant-avatar';
+
+const HuddleParticipant = () => {
+  // 참여자 카메라 화면 또는 아바타가 보여질 예정
+  return (
+    <div className="h-[45%] aspect-square rounded-md overflow-hidden">
+      <HuddleParticipantAvatar />
+    </div>
+  );
+};
+export default HuddleParticipant;

src/frontend/packages/ui/src/components/Toggle/toggle.tsx

@@ -6,16 +6,16 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@workspace/ui/lib/utils';
 
 const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-full text-sm font-medium text-muted-foreground ring-offset-background transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',
+  'inline-flex items-center justify-center rounded-full text-sm font-medium text-muted ring-offset-background transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-primary [&_svg]:pointer-events-none [&_svg]:w-full [&_svg]:h-full [&_svg]:shrink-0 gap-2',
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
-        outline: 'border border-input bg-transparent hover:text-accent-foreground',
+        default: 'bg-toggle',
+        outline: 'border border-input  hover:text-accent-foreground',
       },
       size: {
-        default: 'w-10 h-10 px-3',
-        lg: 'w-12 h-12 px-5',
+        default: 'w-10 h-10 p-3',
+        lg: 'w-14 h-14 p-4',
       },
     },
     defaultVariants: {
@@ -25,15 +25,17 @@ const toggleVariants = cva(
   },
 );
 
-const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>>(
-  ({ className, variant, size, ...props }, ref) => (
-    <TogglePrimitive.Root
-      ref={ref}
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  ),
-);
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
 

src/frontend/packages/ui/tailwind.config.ts

@@ -4,7 +4,11 @@ import { fontFamily } from 'tailwindcss/defaultTheme';
 
 const config = {
   darkMode: ['class'],
-  content: ['app/**/*.{ts,tsx}', 'src/**/*.{ts,tsx}', '../../packages/ui/src/components/**/*.{ts,tsx}'],
+  content: [
+    'app/**/*.{ts,tsx}',
+    'src/**/*.{ts,tsx}',
+    '../../packages/ui/src/components/**/*.{ts,tsx}',
+  ],
   theme: {
     extend: {
       fontFamily: {
@@ -16,6 +20,7 @@ const config = {
         live: '#fff4e1',
         thread: '#1264a3',
         chatboxHover: '#F1F5F9',
+        toggle: '#E59A43',
         black: {
           100: 'rgba(0, 0, 0, 0.5)',
         },