[Wip] 공통 컴포넌트 제작(6) PostListItem, TextIconButton(수정)

src/components/common/PostListItem/index.tsx

@@ -0,0 +1,93 @@
+import { DEFAULT_PAGE_PADDING, DEFAULT_WIDTH } from '@/constants/style';
+import { Flex, FlexProps, HStack, Text, VStack } from '@chakra-ui/react';
+import TextIconButton from '../TextIconButton';
+import { MdArticle, MdFavoriteBorder } from 'react-icons/md';
+
+interface PostListItemProps extends FlexProps {
+  title: string;
+  body?: string;
+  username: string;
+  timeAgo: string;
+  likeCount: number;
+  commentCount: number;
+}
+
+const PostListItem = ({
+  title,
+  body,
+  username,
+  timeAgo,
+  likeCount = 0,
+  commentCount = 0,
+  ...props
+}: PostListItemProps) => {
+  return (
+    <Flex
+      w={DEFAULT_WIDTH}
+      h="67px"
+      pl={DEFAULT_PAGE_PADDING}
+      pr={DEFAULT_PAGE_PADDING}
+      align="center"
+      justify="space-between"
+      cursor="pointer"
+      {...props}
+    >
+      <VStack spacing="0" align="left">
+        <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"
+          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={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"
+        />
+      </VStack>
+    </Flex>
+  );
+};
+
+export default PostListItem;

src/components/common/TextIconButton/index.tsx

@@ -1,21 +1,73 @@
-import { Flex, Icon, IconButton, Text } from '@chakra-ui/react';
+import {
+  Flex,
+  FlexProps,
+  Icon,
+  IconButton,
+  IconProps,
+  Text,
+  TextProps,
+} 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';
+  fontSize?: TextProps['fontSize'];
+  iconColor?: IconProps['color'];
+  textColor?: TextProps['color'];
+  fontWeight?: TextProps['fontWeight'];
 }
 
-const TextIconButton = ({ TheIcon, textContent }: TextIconButtonProps) => {
+const TextIconButton = ({
+  TheIcon,
+  textContent,
+  textLocation = 'bottom',
+  fontSize = 'sm',
+  textColor = 'black',
+  fontWeight = '800',
+  boxSize = 'icon',
+  iconColor = 'black',
+  ...props
+}: TextIconButtonProps) => {
+  const calculateFlexDir = (
+    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={calculateFlexDir(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={iconColor} />}
         bg="transparent"
         _groupHover={{ background: 'gray.450' }}
       />
-      <Text fontSize="sm" fontWeight="800" textAlign="center" color="black">
+      <Text
+        fontSize={fontSize}
+        fontWeight={fontWeight}
+        textAlign="center"
+        color={textColor}
+      >
         {textContent}
       </Text>
     </Flex>

src/components/common/UserList/index.tsx → 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;

src/stories/components/PostListItem.stories.ts

@@ -0,0 +1,40 @@
+import PostListItem from '@/components/common/PostListItem';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof PostListItem> = {
+  component: PostListItem,
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+    body: {
+      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: {
+    title: '제목입니다제목입니다제목입니다제목입니다제목입니다',
+    body: '내용이에요내용이에요내용이에요내용이에요내용이에요내용이에',
+    username: '올챙이',
+    timeAgo: '2일전',
+    likeCount: 10,
+    commentCount: 20,
+  },
+};

src/stories/components/TextIconButton.stories.ts

@@ -8,6 +8,25 @@ const meta: Meta<typeof TextIconButton> = {
     textContent: {
       control: 'text',
     },
+    boxSize: {
+      control: 'text',
+    },
+    textLocation: {
+      options: ['top', 'bottom', 'left', 'right'],
+      control: 'select',
+    },
+    fontSize: {
+      control: 'text',
+    },
+    fontWeight: {
+      control: 'text',
+    },
+    textColor: {
+      control: 'text',
+    },
+    iconColor: {
+      control: 'text',
+    },
   },
 };
 

src/stories/components/UserList.stories.ts → 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: {