diff --git a/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx b/src/frontend/apps/web/app/(main)/[stockSlug]/page.tsx index 8f386534..f607c772 100644 --- 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 ( -
-
+
+
-
+
diff --git a/src/frontend/apps/web/app/(main)/layout.tsx b/src/frontend/apps/web/app/(main)/layout.tsx index 9a3cd07d..64c59e9b 100644 --- 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 > -
Header
+
Header
{children}
diff --git a/src/frontend/apps/web/src/features/chat/chat-container.tsx b/src/frontend/apps/web/src/features/chat/chat-container.tsx deleted file mode 100644 index 8ceb739f..00000000 --- a/src/frontend/apps/web/src/features/chat/chat-container.tsx +++ /dev/null @@ -1,5 +0,0 @@ -const ChatContainer = () => { - return
123
; -}; - -export default ChatContainer; diff --git a/src/frontend/apps/web/src/features/chat/index.tsx b/src/frontend/apps/web/src/features/chat/index.tsx index 079b37c3..1d699593 100644 --- 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 new file mode 100644 index 00000000..7e411795 --- /dev/null +++ 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 ( +
+ {displayedAvatars.map((url, index) => ( + 0 ? 'relative' : ''} + > + + profile + + {index === 4 && remainingCount > 0 && ( +
+{remainingCount}
+ )} + + ))} + {avatarUrls.length > 0 &&
{avatarUrls.length}개의 댓글
} +
+ ); +}; + +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 new file mode 100644 index 00000000..b9eaef79 --- /dev/null +++ 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 ( +
+ + +
+ + +
+
+ ); +}; + +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 new file mode 100644 index 00000000..8035e0c6 --- /dev/null +++ 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 ( +
+ + +
+ ); +}; + +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 new file mode 100644 index 00000000..b84cdc7b --- /dev/null +++ b/src/frontend/apps/web/src/features/chat/ui/chat-header.tsx @@ -0,0 +1,5 @@ +const ChatHeader = () => { + return
123
; +}; + +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 new file mode 100644 index 00000000..95db30a1 --- /dev/null +++ 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 ( +
+
+ +
+ +
+ ); +}; + +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 new file mode 100644 index 00000000..f0df47b0 --- /dev/null +++ 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' ? ( +
+ +
+ ) : ( + + + profile + + )} + + ); +}; + +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 new file mode 100644 index 00000000..0410ee51 --- /dev/null +++ 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 ( +
+
+
+
shadcn
+
2021-10-01 12:00
+ {type === 'live' && ( + + Live + + )} +
+
안녕하세요
+
+ +
+ ); +}; + +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 index 5d7dacf0..1d2fb91e 100644 --- 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 = { 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 index c0006117..c61bae71 100644 --- 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, VariantProps {} -const Avatar = React.forwardRef, AvatarProps>(({ className, variant, ...props }, ref) => ( +const Avatar = React.forwardRef, AvatarProps>(({ className, variant, size, ...props }, ref) => ( )); diff --git a/src/frontend/packages/ui/src/components/ChatTextarea/chat-textarea.tsx b/src/frontend/packages/ui/src/components/ChatTextarea/chat-textarea.tsx index f31b97ed..6eaab65d 100644 --- 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 ( -
+