sgdevcamp2025 · KimKyuHoi · Jan 30, 2025 · Jan 29, 2025 · Jan 29, 2025 · Jan 29, 2025
diff --git a/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx b/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx
@@ -18,12 +18,12 @@ export default function StockDetailsPage({ params }) {
   // console.log(1, params);
 
   return (
-    <div className="flex flex-1 flex-row bg-gray-400 py-6 px-[30px]">
-      <div className="flex items-center justify-center pr-2 bg-gray-600 w-[45%] h-full">
+    <div className="flex bg-gray-700 py-6 px-[30px] h-full">
+      <div className="pr-2 w-[45vw]">
         <StockLayout />
       </div>
 
-      <div className="flex items-center justify-center pl-2 bg-gray-500 w-[55%] h-full">
+      <div className="pl-2 w-[55vw]">
         <ChatContainer />
       </div>
     </div>

diff --git a/src/frontend/apps/web/app/(main)/layout.tsx b/src/frontend/apps/web/app/(main)/layout.tsx
@@ -11,7 +11,7 @@ export default function RootLayout({
       suppressHydrationWarning
     >
       <body>
-        <header className="h-[68px] bg-gray-800 flex items-center justify-center text-white">Header</header>
+        <header className="h-[68px] bg-gray-800 flex items-center justify-center">Header</header>
         <div className="flex flex-col h-[calc(100vh-68px)] overflow-hidden">{children}</div>
       </body>
     </html>

diff --git a/src/frontend/apps/web/src/features/chat/chat-container.tsx b/src/frontend/apps/web/src/features/chat/chat-container.tsx
diff --git a/src/frontend/apps/web/src/features/chat/index.tsx b/src/frontend/apps/web/src/features/chat/index.tsx
@@ -1 +1 @@
-export { default as ChatContainer } from './chat-container';
+export { default as ChatContainer } from './ui/chat-container';
diff --git a/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx b/src/frontend/apps/web/src/features/chat/ui/avatarlist.tsx
@@ -0,0 +1,44 @@
+import { Avatar, AvatarImage, AvatarFallback } from '@workspace/ui/components';
+
+import type { ChatContentWithAvatarsProps } from './chat-content';
+
+const AvatarList = ({ avatarUrls }: ChatContentWithAvatarsProps) => {
+  if (!avatarUrls) {
+    avatarUrls = [
+      'https://github.com/shadcn.png',
+      'https://github.com/shadcn.png',
+      'https://github.com/shadcn.png',
+      'https://github.com/shadcn.png',
+      'https://github.com/shadcn.png',
+      'https://github.com/shadcn.png',
+      'https://github.com/shadcn.png',
+      'https://github.com/shadcn.png',
+    ];
+  }
+
+  const displayedAvatars = avatarUrls.slice(0, 5);
+  const remainingCount = avatarUrls.length - displayedAvatars.length;
+
+  return (
+    <div className="px-1 py-1 mb-0.5 flex gap-1 items-center">
+      {displayedAvatars.map((url, index) => (
+        <Avatar
+          variant="square"
+          size="sm"
+          key={index}
+          className={index === 4 && remainingCount > 0 ? 'relative' : ''}
+        >
+          <AvatarImage src={url} />
+          <AvatarFallback>profile</AvatarFallback>
+
+          {index === 4 && remainingCount > 0 && (
+            <div className="absolute top-0 right-0 w-6 h-6 bg-black-100 flex items-center justify-center text-white text-xs">+{remainingCount}</div>
+          )}
+        </Avatar>
+      ))}
+      {avatarUrls.length > 0 && <div className="ml-1 text-sm text-thread cursor-pointer">{avatarUrls.length}개의 댓글</div>}
+    </div>
+  );
+};
+
+export default AvatarList;
diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-container.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-container.tsx
@@ -0,0 +1,17 @@
+import ChatHeader from './chat-header';
+import ChatSection from './chat-section';
+
+const ChatContainer = () => {
+  return (
+    <div className="flex  h-full bg-white">
+      <aside className="w-44 h-full bg-gray-400 flex-shrink-0">sidebar</aside>
+
+      <div className="flex flex-col w-full h-full">
+        <ChatHeader />
+        <ChatSection />
+      </div>
+    </div>
+  );
+};
+
+export default ChatContainer;
diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-content.tsx
@@ -0,0 +1,28 @@
+import ContentText from './content-text';
+import ContentAvatar from './content-avatar';
+
+export type ChatContentProps = {
+  type?: 'default' | 'live';
+};
+
+export type ChatContentWithAvatarsProps = ChatContentProps & {
+  avatarUrls?: string[];
+};
+
+const ChatContent = ({ type = 'default', avatarUrls }: ChatContentWithAvatarsProps) => {
+  const backgroundColor = type === 'live' ? 'bg-live' : 'bg-white';
+
+  const hoverColor = type === 'default' ? 'hover:bg-chatboxHover' : '';
+
+  return (
+    <div className={`flex w-full h-auto ${backgroundColor} pb-2 pl-5 pt-5 pr-6 gap-4 group relative ${hoverColor} transition-all duration-300`}>
+      <ContentAvatar type={type} />
+      <ContentText
+        type={type}
+        avatarUrls={avatarUrls}
+      />
+    </div>
+  );
+};
+
+export default ChatContent;
diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx
@@ -0,0 +1,5 @@
+const ChatHeader = () => {
+  return <header className="h-[54px] w-full flex items-center justify-between px-2.5 py-[13px] bg-slate-300">123</header>;
+};
+
+export default ChatHeader;
diff --git a/src/frontend/apps/web/src/features/chat/ui/chat-section.tsx b/src/frontend/apps/web/src/features/chat/ui/chat-section.tsx
@@ -0,0 +1,18 @@
+import { ChatTextarea } from '@workspace/ui/components';
+import ChatContent from './chat-content';
+
+const ChatSection = () => {
+  return (
+    <div className="flex flex-1 flex-col h-full">
+      <div className="flex flex-1 flex-col h-full overflow-y-auto">
+        <ChatContent />
+      </div>
+      <ChatTextarea
+        onSend=""
+        onAdd=""
+      />
+    </div>
+  );
+};
+
+export default ChatSection;
diff --git a/src/frontend/apps/web/src/features/chat/ui/content-avatar.tsx b/src/frontend/apps/web/src/features/chat/ui/content-avatar.tsx
@@ -0,0 +1,28 @@
+import { Avatar, AvatarImage, AvatarFallback } from '@workspace/ui/components';
+import { Headset } from 'lucide-react';
+
+export type ContentAvatarProps = {
+  type?: 'default' | 'live';
+};
+
+const ContentAvatar = ({ type }: ContentAvatarProps) => {
+  return (
+    <>
+      {type === 'live' ? (
+        <div className="bg-primary flex justify-center items-center flex h-10 w-10 shrink-0 overflow-hidden rounded-md">
+          <Headset
+            size={24}
+            color="#fff"
+          />
+        </div>
+      ) : (
+        <Avatar variant="square">
+          <AvatarImage src="https://github.com/shadcn.png" />
+          <AvatarFallback>profile</AvatarFallback>
+        </Avatar>
+      )}
+    </>
+  );
+};
+
+export default ContentAvatar;
diff --git a/src/frontend/apps/web/src/features/chat/ui/content-text.tsx b/src/frontend/apps/web/src/features/chat/ui/content-text.tsx
@@ -0,0 +1,29 @@
+import { Badge } from '@workspace/ui/components';
+
+import type { ChatContentWithAvatarsProps } from './chat-content';
+import AvatarList from './avatarlist';
+
+const ContentText = ({ type, avatarUrls }: ChatContentWithAvatarsProps) => {
+  return (
+    <div className="flex flex-col ">
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <div className="text-base font-bold">shadcn</div>
+          <div className="text-base">2021-10-01 12:00</div>
+          {type === 'live' && (
+            <Badge
+              variant="default"
+              size="sm"
+            >
+              Live
+            </Badge>
+          )}
+        </div>
+        <div className="text-base">안녕하세요</div>
+      </div>
+      <AvatarList avatarUrls={avatarUrls} />
+    </div>
+  );
+};
+
+export default ContentText;
diff --git a/src/frontend/packages/ui/src/components/Avatar/avatar.stories.tsx b/src/frontend/packages/ui/src/components/Avatar/avatar.stories.tsx
@@ -17,6 +17,10 @@ const meta: Meta<typeof Avatar> = {
       control: 'select',
       options: ['default', 'square'],
     },
+    size: {
+      control: 'select',
+      options: ['default', 'sm'],
+    },
   },
 };
 export default meta;

diff --git a/src/frontend/packages/ui/src/components/Avatar/avatar.tsx b/src/frontend/packages/ui/src/components/Avatar/avatar.tsx
@@ -6,23 +6,28 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@workspace/ui/lib/utils';
 
-const avatarVariants = cva('relative flex h-10 w-10 shrink-0 overflow-hidden', {
+const avatarVariants = cva('relative flex shrink-0 overflow-hidden', {
   variants: {
     variant: {
       default: 'rounded-full',
-      square: 'rounded-md', // 로고용
+      square: 'rounded-md',
+    },
+    size: {
+      default: 'h-10 w-10',
+      sm: 'w-6 h-6',
     },
   },
   defaultVariants: {
     variant: 'default',
+    size: 'default',
   },
 });
 interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {}
 
-const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(({ className, variant, ...props }, ref) => (
+const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(({ className, variant, size, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(avatarVariants({ variant }), className)}
+    className={cn(avatarVariants({ variant, size }), className)}
     {...props}
   />
 ));

diff --git a/src/frontend/packages/ui/src/components/ChatTextarea/chat-textarea.tsx b/src/frontend/packages/ui/src/components/ChatTextarea/chat-textarea.tsx
@@ -7,9 +7,9 @@ import { cn } from '@workspace/ui/lib/utils';
 
 const ChatTextarea = ({ onSend, onAdd }) => {
   return (
-    <div className={cn('flex flex-col items-center w-full rounded-md border border-gray-300 px-0.5 py-1')}>
+    <div className={cn('flex flex-col items-center w-full rounded-md border bg-secondary border-gray-300 p-2')}>
       <Textarea placeholder="Type your message..." />
-      <div className="flex justify-between w-full px-1">
+      <div className="flex justify-between w-full px-2 pt-2">
         <Button
           onClick={onAdd}
           size="sm"

diff --git a/src/frontend/packages/ui/src/components/Textarea/textarea.tsx b/src/frontend/packages/ui/src/components/Textarea/textarea.tsx
@@ -18,7 +18,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'tex
   return (
     <textarea
       className={cn(
-        'flex min-h-[80px] h-auto w-full rounded-md bg-transparent px-3 py-2 text-base placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'flex min-h-[128px] h-auto w-full rounded-md bg-white px-3 py-2 text-base placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         className,
       )}
       maxLength={2000}

diff --git a/src/frontend/packages/ui/tailwind.config.ts b/src/frontend/packages/ui/tailwind.config.ts
@@ -4,7 +4,7 @@ import { fontFamily } from 'tailwindcss/defaultTheme';
 
 const config = {
   darkMode: ['class'],
-  content: ['app/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}', '../../packages/ui/src/components/**/*.{ts,tsx}'],
+  content: ['app/**/*.{ts,tsx}', 'src/**/*.{ts,tsx}', '../../packages/ui/src/components/**/*.{ts,tsx}'],
   theme: {
     extend: {
       fontFamily: {
@@ -13,6 +13,12 @@ const config = {
       },
       colors: {
         kakao: '#FEE500',
+        live: '#fff4e1',
+        thread: '#1264a3',
+        chatboxHover: '#F1F5F9',
+        black: {
+          100: 'rgba(0, 0, 0, 0.5)',
+        },
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default as ChatContainer } from './chat-container';
		export { default as ChatContainer } from './ui/chat-container';