From 2064a235f2e4ea2948fe19104dd231718bb39e6a Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 2 Jan 2024 15:03:10 +0900
Subject: [PATCH 01/10] =?UTF-8?q?:sparkles:=20PostListItem=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostListItem/index.tsx | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/components/common/PostListItem/index.tsx

diff --git a/src/components/common/PostListItem/index.tsx b/src/components/common/PostListItem/index.tsx
new file mode 100644
index 00000000..0251e061
--- /dev/null
+++ b/src/components/common/PostListItem/index.tsx
@@ -0,0 +1,7 @@
+import { Container } from '@chakra-ui/react';
+
+const PostListItem = () => {
+  <Container>하이</Container>;
+};
+
+export default PostListItem;

From d64f0f7633729dc809948d7cec1eca1ef80b9bb5 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 2 Jan 2024 15:05:39 +0900
Subject: [PATCH 02/10] =?UTF-8?q?:sparkles:=20PostListItem=20storybook?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostListItem/index.tsx   |  2 +-
 src/stories/components/PostListItem.stories.ts | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 src/stories/components/PostListItem.stories.ts

diff --git a/src/components/common/PostListItem/index.tsx b/src/components/common/PostListItem/index.tsx
index 0251e061..f221c1c2 100644
--- a/src/components/common/PostListItem/index.tsx
+++ b/src/components/common/PostListItem/index.tsx
@@ -1,7 +1,7 @@
 import { Container } from '@chakra-ui/react';
 
 const PostListItem = () => {
-  <Container>하이</Container>;
+  return <Container>하이</Container>;
 };
 
 export default PostListItem;
diff --git a/src/stories/components/PostListItem.stories.ts b/src/stories/components/PostListItem.stories.ts
new file mode 100644
index 00000000..89e06029
--- /dev/null
+++ b/src/stories/components/PostListItem.stories.ts
@@ -0,0 +1,14 @@
+import PostListItem from '@/components/common/PostListItem';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof PostListItem> = {
+  component: PostListItem,
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof PostListItem>;
+
+export const Deafult: Story = {
+  args: {},
+};

From 29fd49151c7f8549d0a46654562157bf8d8bfd3d Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 2 Jan 2024 15:10:59 +0900
Subject: [PATCH 03/10] =?UTF-8?q?:art:=20PostListItem=20=ED=94=84=EB=A1=AD?=
 =?UTF-8?q?=EC=8A=A4=20=EC=84=A4=EC=A0=95=20=EB=B0=8F=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostListItem/index.tsx | 29 ++++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/common/PostListItem/index.tsx b/src/components/common/PostListItem/index.tsx
index f221c1c2..bd5c1597 100644
--- a/src/components/common/PostListItem/index.tsx
+++ b/src/components/common/PostListItem/index.tsx
@@ -1,7 +1,30 @@
-import { Container } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 
-const PostListItem = () => {
-  return <Container>하이</Container>;
+interface PostListItemProps {
+  title: string;
+  username: string;
+  timeAgo: string;
+  likeCount: number;
+  commentCount: number;
+}
+
+const PostListItem = ({
+  title,
+  username,
+  timeAgo,
+  likeCount,
+  commentCount,
+}: PostListItemProps) => {
+  return (
+    <Flex>
+      <Box>
+        {title} {username} {timeAgo}
+      </Box>
+      <Box>
+        {likeCount} {commentCount}
+      </Box>
+    </Flex>
+  );
 };
 
 export default PostListItem;

From 5e02758666375657000d35b20fb9591f54cdd060 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 2 Jan 2024 15:20:12 +0900
Subject: [PATCH 04/10] =?UTF-8?q?:art:=20TextIconButton=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=83=81-=ED=95=98-=EC=A2=8C-=EC=9A=B0=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=ED=95=98=EA=B2=8C=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?=EB=B0=8F=20storybook=EB=8F=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/TextIconButton/index.tsx           | 46 +++++++++++++++++--
 .../components/TextIconButton.stories.ts      |  7 +++
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/components/common/TextIconButton/index.tsx b/src/components/common/TextIconButton/index.tsx
index 0b2fccbd..5f0d3d59 100644
--- a/src/components/common/TextIconButton/index.tsx
+++ b/src/components/common/TextIconButton/index.tsx
@@ -1,17 +1,53 @@
-import { Flex, Icon, IconButton, Text } from '@chakra-ui/react';
+import {
+  Flex,
+  FlexProps,
+  Icon,
+  IconButton,
+  IconProps,
+  Text,
+} from '@chakra-ui/react';
 import { IconType } from 'react-icons';
 
-interface TextIconButtonProps {
+interface TextIconButtonProps extends FlexProps {
   TheIcon: IconType;
   textContent: string;
+  boxSize?: IconProps['boxSize'];
+  textLocation?: 'left' | 'right' | 'top' | 'bottom';
 }
 
-const TextIconButton = ({ TheIcon, textContent }: TextIconButtonProps) => {
+const TextIconButton = ({
+  TheIcon,
+  textContent,
+  boxSize = 'icon',
+  textLocation = 'bottom',
+  ...props
+}: TextIconButtonProps) => {
+  const flexDir = (textLocation: TextIconButtonProps['textLocation']) => {
+    switch (textLocation) {
+      case 'bottom':
+        return 'column';
+      case 'top':
+        return 'column-reverse';
+      case 'left':
+        return 'row-reverse';
+      case 'right':
+        return 'row';
+      default:
+        return 'column';
+    }
+  };
   return (
-    <Flex flexDir="column" align="center" cursor="pointer" role="group">
+    <Flex
+      flexDir={flexDir(textLocation)}
+      align="center"
+      justify="center"
+      cursor="pointer"
+      role="group"
+      {...props}
+    >
       <IconButton
         aria-label="home"
-        icon={<Icon as={TheIcon} boxSize="icon" color="black" />}
+        icon={<Icon as={TheIcon} boxSize={boxSize} color="black" />}
         bg="transparent"
         _groupHover={{ background: 'gray.450' }}
       />
diff --git a/src/stories/components/TextIconButton.stories.ts b/src/stories/components/TextIconButton.stories.ts
index 802f6921..d8c3f24a 100644
--- a/src/stories/components/TextIconButton.stories.ts
+++ b/src/stories/components/TextIconButton.stories.ts
@@ -8,6 +8,13 @@ const meta: Meta<typeof TextIconButton> = {
     textContent: {
       control: 'text',
     },
+    boxSize: {
+      control: 'text',
+    },
+    textLocation: {
+      options: ['top', 'bottom', 'left', 'right'],
+      control: 'select',
+    },
   },
 };
 

From 36f2b51b83198d26e801dcbbb5276af0bb026601 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 2 Jan 2024 15:22:32 +0900
Subject: [PATCH 05/10] =?UTF-8?q?:art:=20TextIconButton=20=EB=82=B4?=
 =?UTF-8?q?=EB=B6=80=20flexDir=ED=95=A8=EC=88=98=20=EC=9D=B4=EB=A6=84=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=3D>=20calculateFlexDir?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TextIconButton/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/common/TextIconButton/index.tsx b/src/components/common/TextIconButton/index.tsx
index 5f0d3d59..fa051ebf 100644
--- a/src/components/common/TextIconButton/index.tsx
+++ b/src/components/common/TextIconButton/index.tsx
@@ -22,7 +22,9 @@ const TextIconButton = ({
   textLocation = 'bottom',
   ...props
 }: TextIconButtonProps) => {
-  const flexDir = (textLocation: TextIconButtonProps['textLocation']) => {
+  const calculateFlexDir = (
+    textLocation: TextIconButtonProps['textLocation'],
+  ) => {
     switch (textLocation) {
       case 'bottom':
         return 'column';
@@ -38,7 +40,7 @@ const TextIconButton = ({
   };
   return (
     <Flex
-      flexDir={flexDir(textLocation)}
+      flexDir={calculateFlexDir(textLocation)}
       align="center"
       justify="center"
       cursor="pointer"

From 21c5fab8731daeb8bad157ff28c4d91a02d441b0 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 2 Jan 2024 15:24:42 +0900
Subject: [PATCH 06/10] =?UTF-8?q?:art:=20TextIconButton=20text=ED=81=AC?=
 =?UTF-8?q?=EA=B8=B0=20=EB=B3=80=EA=B2=BD=EA=B0=80=EB=8A=A5=ED=95=98?=
 =?UTF-8?q?=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/TextIconButton/index.tsx   | 10 +++++++++-
 src/stories/components/TextIconButton.stories.ts |  3 +++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/common/TextIconButton/index.tsx b/src/components/common/TextIconButton/index.tsx
index fa051ebf..c33fdae6 100644
--- a/src/components/common/TextIconButton/index.tsx
+++ b/src/components/common/TextIconButton/index.tsx
@@ -4,6 +4,7 @@ import {
   Icon,
   IconButton,
   IconProps,
+  SystemProps,
   Text,
 } from '@chakra-ui/react';
 import { IconType } from 'react-icons';
@@ -13,6 +14,7 @@ interface TextIconButtonProps extends FlexProps {
   textContent: string;
   boxSize?: IconProps['boxSize'];
   textLocation?: 'left' | 'right' | 'top' | 'bottom';
+  fontSize?: SystemProps['fontSize'];
 }
 
 const TextIconButton = ({
@@ -20,6 +22,7 @@ const TextIconButton = ({
   textContent,
   boxSize = 'icon',
   textLocation = 'bottom',
+  fontSize = 'sm',
   ...props
 }: TextIconButtonProps) => {
   const calculateFlexDir = (
@@ -53,7 +56,12 @@ const TextIconButton = ({
         bg="transparent"
         _groupHover={{ background: 'gray.450' }}
       />
-      <Text fontSize="sm" fontWeight="800" textAlign="center" color="black">
+      <Text
+        fontSize={fontSize}
+        fontWeight="800"
+        textAlign="center"
+        color="black"
+      >
         {textContent}
       </Text>
     </Flex>
diff --git a/src/stories/components/TextIconButton.stories.ts b/src/stories/components/TextIconButton.stories.ts
index d8c3f24a..fea4ee20 100644
--- a/src/stories/components/TextIconButton.stories.ts
+++ b/src/stories/components/TextIconButton.stories.ts
@@ -15,6 +15,9 @@ const meta: Meta<typeof TextIconButton> = {
       options: ['top', 'bottom', 'left', 'right'],
       control: 'select',
     },
+    fontSize: {
+      control: 'text',
+    },
   },
 };
 

From 006265636498744cf75af9856ff64e1f32ef954b Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 2 Jan 2024 15:40:55 +0900
Subject: [PATCH 07/10] =?UTF-8?q?:art:=20TextIconButton=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=BB=AC=EB=9F=AC,=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BB=AC=EB=9F=AC,=20=EC=82=AC=EC=9D=B4=EC=A6=88,?=
 =?UTF-8?q?=20=EA=B5=B5=EA=B8=B0=20=EC=A0=95=ED=95=A0=20=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=88=EA=B2=8C=20props=ED=95=A0=EB=8B=B9=20=EB=B0=8F=20stor?=
 =?UTF-8?q?ybook=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostListItem/index.tsx  | 39 +++++++++++++++----
 .../common/TextIconButton/index.tsx           | 18 ++++++---
 .../components/PostListItem.stories.ts        | 26 ++++++++++++-
 .../components/TextIconButton.stories.ts      |  9 +++++
 4 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/src/components/common/PostListItem/index.tsx b/src/components/common/PostListItem/index.tsx
index bd5c1597..bc825a18 100644
--- a/src/components/common/PostListItem/index.tsx
+++ b/src/components/common/PostListItem/index.tsx
@@ -1,4 +1,7 @@
-import { Box, Flex } from '@chakra-ui/react';
+import { DEFAULT_PAGE_PADDING, DEFAULT_WIDTH } from '@/constants/style';
+import { Flex, Text, VStack } from '@chakra-ui/react';
+import TextIconButton from '../TextIconButton';
+import { MdFavorite } from 'react-icons/md';
 
 interface PostListItemProps {
   title: string;
@@ -16,13 +19,33 @@ const PostListItem = ({
   commentCount,
 }: PostListItemProps) => {
   return (
-    <Flex>
-      <Box>
-        {title} {username} {timeAgo}
-      </Box>
-      <Box>
-        {likeCount} {commentCount}
-      </Box>
+    <Flex
+      w={DEFAULT_WIDTH}
+      h="67px"
+      pl={DEFAULT_PAGE_PADDING}
+      pr={DEFAULT_PAGE_PADDING}
+      border="1px solid black"
+      align="center"
+      justify="space-between"
+    >
+      <VStack spacing="0" align="left">
+        <Text color="black" fontSize="1.4rem" fontWeight="semibold">
+          {title}
+        </Text>
+        <Text color="gray.800" fontSize="1.2rem" fontWeight="medium">
+          {username}
+        </Text>
+        <Text color="gray.600" fontSize="1.2rem">
+          {timeAgo}
+        </Text>
+      </VStack>
+      <VStack spacing="0">
+        <TextIconButton
+          TheIcon={MdFavorite}
+          textContent={likeCount.toString()}
+        />
+        {commentCount}
+      </VStack>
     </Flex>
   );
 };
diff --git a/src/components/common/TextIconButton/index.tsx b/src/components/common/TextIconButton/index.tsx
index c33fdae6..cca0f99a 100644
--- a/src/components/common/TextIconButton/index.tsx
+++ b/src/components/common/TextIconButton/index.tsx
@@ -4,8 +4,8 @@ import {
   Icon,
   IconButton,
   IconProps,
-  SystemProps,
   Text,
+  TextProps,
 } from '@chakra-ui/react';
 import { IconType } from 'react-icons';
 
@@ -14,15 +14,21 @@ interface TextIconButtonProps extends FlexProps {
   textContent: string;
   boxSize?: IconProps['boxSize'];
   textLocation?: 'left' | 'right' | 'top' | 'bottom';
-  fontSize?: SystemProps['fontSize'];
+  fontSize?: TextProps['fontSize'];
+  iconColor?: IconProps['color'];
+  textColor?: TextProps['color'];
+  fontWeight?: TextProps['fontWeight'];
 }
 
 const TextIconButton = ({
   TheIcon,
   textContent,
-  boxSize = 'icon',
   textLocation = 'bottom',
   fontSize = 'sm',
+  textColor = 'black',
+  fontWeight = '800',
+  boxSize = 'icon',
+  iconColor = 'black',
   ...props
 }: TextIconButtonProps) => {
   const calculateFlexDir = (
@@ -52,15 +58,15 @@ const TextIconButton = ({
     >
       <IconButton
         aria-label="home"
-        icon={<Icon as={TheIcon} boxSize={boxSize} color="black" />}
+        icon={<Icon as={TheIcon} boxSize={boxSize} color={iconColor} />}
         bg="transparent"
         _groupHover={{ background: 'gray.450' }}
       />
       <Text
         fontSize={fontSize}
-        fontWeight="800"
+        fontWeight={fontWeight}
         textAlign="center"
-        color="black"
+        color={textColor}
       >
         {textContent}
       </Text>
diff --git a/src/stories/components/PostListItem.stories.ts b/src/stories/components/PostListItem.stories.ts
index 89e06029..d9df60f8 100644
--- a/src/stories/components/PostListItem.stories.ts
+++ b/src/stories/components/PostListItem.stories.ts
@@ -3,12 +3,34 @@ import { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof PostListItem> = {
   component: PostListItem,
-  argTypes: {},
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    username: {
+      control: 'text',
+    },
+    timeAgo: {
+      control: 'text',
+    },
+    likeCount: {
+      control: 'number',
+    },
+    commentCount: {
+      control: 'number',
+    },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof PostListItem>;
 
 export const Deafult: Story = {
-  args: {},
+  args: {
+    title: '제목입니다',
+    username: '올챙이',
+    timeAgo: '2일전',
+    likeCount: 10,
+    commentCount: 20,
+  },
 };
diff --git a/src/stories/components/TextIconButton.stories.ts b/src/stories/components/TextIconButton.stories.ts
index fea4ee20..fcefc03e 100644
--- a/src/stories/components/TextIconButton.stories.ts
+++ b/src/stories/components/TextIconButton.stories.ts
@@ -18,6 +18,15 @@ const meta: Meta<typeof TextIconButton> = {
     fontSize: {
       control: 'text',
     },
+    fontWeight: {
+      control: 'text',
+    },
+    textColor: {
+      control: 'text',
+    },
+    iconColor: {
+      control: 'text',
+    },
   },
 };
 

From 0b70f9a602e527506d59ece4805a726339432af4 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Tue, 2 Jan 2024 16:45:55 +0900
Subject: [PATCH 08/10] =?UTF-8?q?:lipstick:=20PostListItem=20=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostListItem/index.tsx  | 64 +++++++++++++++----
 .../components/PostListItem.stories.ts        |  6 +-
 2 files changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/components/common/PostListItem/index.tsx b/src/components/common/PostListItem/index.tsx
index bc825a18..5629b3fc 100644
--- a/src/components/common/PostListItem/index.tsx
+++ b/src/components/common/PostListItem/index.tsx
@@ -1,10 +1,11 @@
 import { DEFAULT_PAGE_PADDING, DEFAULT_WIDTH } from '@/constants/style';
-import { Flex, Text, VStack } from '@chakra-ui/react';
+import { Flex, FlexProps, HStack, Text, VStack } from '@chakra-ui/react';
 import TextIconButton from '../TextIconButton';
-import { MdFavorite } from 'react-icons/md';
+import { MdArticle, MdFavoriteBorder } from 'react-icons/md';
 
-interface PostListItemProps {
+interface PostListItemProps extends FlexProps {
   title: string;
+  body?: string;
   username: string;
   timeAgo: string;
   likeCount: number;
@@ -13,10 +14,12 @@ interface PostListItemProps {
 
 const PostListItem = ({
   title,
+  body,
   username,
   timeAgo,
   likeCount,
   commentCount,
+  ...props
 }: PostListItemProps) => {
   return (
     <Flex
@@ -24,27 +27,64 @@ const PostListItem = ({
       h="67px"
       pl={DEFAULT_PAGE_PADDING}
       pr={DEFAULT_PAGE_PADDING}
-      border="1px solid black"
       align="center"
       justify="space-between"
+      cursor="pointer"
+      {...props}
     >
       <VStack spacing="0" align="left">
-        <Text color="black" fontSize="1.4rem" fontWeight="semibold">
+        <Text
+          color="black"
+          fontSize="1.4rem"
+          fontWeight="semibold"
+          textOverflow="ellipsis"
+          overflow="hidden"
+          w="200px"
+          whiteSpace="nowrap"
+        >
           {title}
         </Text>
-        <Text color="gray.800" fontSize="1.2rem" fontWeight="medium">
-          {username}
-        </Text>
-        <Text color="gray.600" fontSize="1.2rem">
-          {timeAgo}
+        <Text
+          color="gray.800"
+          fontSize="1.2rem"
+          fontWeight="medium"
+          textOverflow="ellipsis"
+          overflow="hidden"
+          w="200px"
+          whiteSpace="nowrap"
+        >
+          {body}
         </Text>
+        <HStack>
+          <Text color="gray.800" fontSize="1.2rem" fontWeight="medium">
+            {username}
+          </Text>
+          <Text color="gray.600" fontSize="1.2rem">
+            {timeAgo}
+          </Text>
+        </HStack>
       </VStack>
       <VStack spacing="0">
         <TextIconButton
-          TheIcon={MdFavorite}
+          TheIcon={MdFavoriteBorder}
           textContent={likeCount.toString()}
+          boxSize="18px"
+          iconColor="pink.400"
+          fontSize="1.2rem"
+          fontWeight="normal"
+          textColor="gray.800"
+          textLocation="right"
+        />
+        <TextIconButton
+          TheIcon={MdArticle}
+          textContent={commentCount.toString()}
+          boxSize="18px"
+          iconColor="gray.800"
+          fontSize="1.2rem"
+          fontWeight="normal"
+          textColor="gray.800"
+          textLocation="right"
         />
-        {commentCount}
       </VStack>
     </Flex>
   );
diff --git a/src/stories/components/PostListItem.stories.ts b/src/stories/components/PostListItem.stories.ts
index d9df60f8..ae5ad408 100644
--- a/src/stories/components/PostListItem.stories.ts
+++ b/src/stories/components/PostListItem.stories.ts
@@ -7,6 +7,9 @@ const meta: Meta<typeof PostListItem> = {
     title: {
       control: 'text',
     },
+    body: {
+      control: 'text',
+    },
     username: {
       control: 'text',
     },
@@ -27,7 +30,8 @@ type Story = StoryObj<typeof PostListItem>;
 
 export const Deafult: Story = {
   args: {
-    title: '제목입니다',
+    title: '제목입니다제목입니다제목입니다제목입니다제목입니다',
+    body: '내용이에요내용이에요내용이에요내용이에요내용이에요내용이에',
     username: '올챙이',
     timeAgo: '2일전',
     likeCount: 10,

From 2d2356bcfac36615e586fcb04028dd0aba31cb51 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Wed, 3 Jan 2024 10:47:50 +0900
Subject: [PATCH 09/10] =?UTF-8?q?:bug:=20PostListItem=EC=9D=98=20count?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=ED=94=84=EB=A1=AD=EC=8A=A4=20=EA=B8=B0?=
 =?UTF-8?q?=EB=B3=B8=EA=B0=92=200=EC=9C=BC=EB=A1=9C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PostListItem/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/PostListItem/index.tsx b/src/components/common/PostListItem/index.tsx
index 5629b3fc..4ec1a97e 100644
--- a/src/components/common/PostListItem/index.tsx
+++ b/src/components/common/PostListItem/index.tsx
@@ -17,8 +17,8 @@ const PostListItem = ({
   body,
   username,
   timeAgo,
-  likeCount,
-  commentCount,
+  likeCount = 0,
+  commentCount = 0,
   ...props
 }: PostListItemProps) => {
   return (

From 8bf155e181e6d714c8cade0af6dc730555934723 Mon Sep 17 00:00:00 2001
From: loevray <rei980213@gmail.com>
Date: Wed, 3 Jan 2024 11:20:43 +0900
Subject: [PATCH 10/10] =?UTF-8?q?:truck:=20UserList=20=3D>=20UserListItem?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/{UserList => UserListItem}/index.tsx           | 8 ++++----
 .../{UserList.stories.ts => UserListItem.stories.ts}      | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)
 rename src/components/common/{UserList => UserListItem}/index.tsx (89%)
 rename src/stories/components/{UserList.stories.ts => UserListItem.stories.ts} (71%)

diff --git a/src/components/common/UserList/index.tsx b/src/components/common/UserListItem/index.tsx
similarity index 89%
rename from src/components/common/UserList/index.tsx
rename to src/components/common/UserListItem/index.tsx
index 3c0a743b..34525896 100644
--- a/src/components/common/UserList/index.tsx
+++ b/src/components/common/UserListItem/index.tsx
@@ -9,20 +9,20 @@ import {
 } from '@chakra-ui/react';
 import { MdArrowForwardIos } from 'react-icons/md';
 
-interface UserListProps extends FlexProps {
+interface UserListItemProps extends FlexProps {
   username: string;
   userImage?: string;
   userImageSize?: SystemProps['boxSize'];
   content?: string;
 }
 
-const UserList = ({
+const UserListItem = ({
   username,
   userImage,
   userImageSize = '40px',
   content,
   ...props
-}: UserListProps) => {
+}: UserListItemProps) => {
   return (
     <Flex
       w={DEFAULT_WIDTH}
@@ -56,4 +56,4 @@ const UserList = ({
   );
 };
 
-export default UserList;
+export default UserListItem;
diff --git a/src/stories/components/UserList.stories.ts b/src/stories/components/UserListItem.stories.ts
similarity index 71%
rename from src/stories/components/UserList.stories.ts
rename to src/stories/components/UserListItem.stories.ts
index 02cc0e09..fcf2d071 100644
--- a/src/stories/components/UserList.stories.ts
+++ b/src/stories/components/UserListItem.stories.ts
@@ -1,8 +1,8 @@
-import UserList from '@/components/common/UserList';
+import UserListItem from '@/components/common/UserListItem';
 import { Meta, StoryObj } from '@storybook/react';
 
-const meta: Meta<typeof UserList> = {
-  component: UserList,
+const meta: Meta<typeof UserListItem> = {
+  component: UserListItem,
   argTypes: {
     width: {
       control: 'text',
@@ -23,7 +23,7 @@ const meta: Meta<typeof UserList> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof UserList>;
+type Story = StoryObj<typeof UserListItem>;
 
 export const Deafult: Story = {
   args: {