프로덕션 배포 (#368)

* chore: 간단한 UI 개선사항 반영 (#359)

* chore: background-size 지정

* chore: color 추가

* 아바타 컴포넌트 구현 (#350)

* feat: add Avatar and AvatarGroup component

* style: edit Avatar styles

* fix: 텍스트가 영역을 넘어가지 않도록 수정 (#367)

---------

Co-authored-by: Eunsu(Evan) Kim <[email protected]>

src/components/avatar/Avatar.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from './Avatar';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Avatar> = {
+  title: 'Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    src: 'https://mui.com/static/images/avatar/1.jpg',
+    alt: 'Avatar',
+  },
+};
+
+export const CustomStyles: Story = {
+  args: {
+    src: 'https://mui.com/static/images/avatar/1.jpg',
+    alt: 'Avatar',
+    sx: {
+      width: '48px',
+      height: '48px',
+    },
+  },
+};

src/components/avatar/Avatar.tsx

@@ -0,0 +1,29 @@
+import { CSSProperties } from 'react';
+import { styled } from 'stitches.config';
+
+interface AvatarProps {
+  src: string;
+  alt: string;
+  sx?: CSSProperties;
+}
+
+export default function Avatar({ src, alt, sx }: AvatarProps) {
+  return (
+    <SContainer style={sx}>
+      <SImage src={src} alt={alt} />
+    </SContainer>
+  );
+}
+
+const SContainer = styled('div', {
+  width: '32px',
+  height: '32px',
+  borderRadius: '50%',
+  overflow: 'hidden',
+  flexType: 'center',
+});
+const SImage = styled('img', {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+});

src/components/avatar/AvatarGroup.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import AvatarGroup from './AvatarGroup';
+import Avatar from './Avatar';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof AvatarGroup> = {
+  title: 'AvatarGroup',
+  component: AvatarGroup,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof AvatarGroup>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default: Story = {
+  args: {
+    children: [
+      <Avatar
+        src="https://mui.com/static/images/avatar/1.jpg"
+        alt="sample iamge"
+        sx={{ width: '48px', height: '48px' }}
+      />,
+      <Avatar
+        src="https://mui.com/static/images/avatar/2.jpg"
+        alt="sample iamge"
+        sx={{ width: '48px', height: '48px' }}
+      />,
+      <Avatar
+        src="https://mui.com/static/images/avatar/3.jpg"
+        alt="sample iamge"
+        sx={{ width: '48px', height: '48px' }}
+      />,
+    ],
+  },
+};

src/components/avatar/AvatarGroup.tsx

@@ -0,0 +1,24 @@
+import { Children, PropsWithChildren } from 'react';
+import { styled } from 'stitches.config';
+
+export default function AvatarGroup({ children }: PropsWithChildren) {
+  return (
+    <SContainer>
+      {Children.map(children, (child, index) => (
+        <SAvatarWrapper key={index} style={{ transform: `translateX(-${33 * index}%)` }}>
+          {child}
+        </SAvatarWrapper>
+      ))}
+    </SContainer>
+  );
+}
+
+const SContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+});
+const SAvatarWrapper = styled('div', {
+  '& > div': {
+    border: '3px solid $black100',
+  },
+});

src/components/page/meetingManagement/ManagementListItem.tsx

@@ -526,6 +526,7 @@ const SDetailText = styled('p', {
   fontAg: '16_medium_150',
   color: '$white100',
   boxSizing: 'border-box',
+  wordBreak: 'break-word',
 });
 
 const SEmptyText = styled('p', {