feat: ListRow 컴포넌트 (#55)

src/components/common/index.tsx

@@ -1,4 +1,5 @@
 // eslint-disable-next-line react-refresh/only-export-components
 export * from './selectweek/SelectWeek'
+export * from './listRow/ListRow'
 export * from './label/Label'
 export * from './icon/Icon'

src/components/common/listRow/ListRow.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import ListRow from '@/components/common/listRow/ListRow'
+
+const meta: Meta<typeof ListRow> = {
+  component: ListRow,
+  tags: ['autodocs'],
+  title: 'components/ListRow',
+  argTypes: {
+    hasBorder: {
+      control: 'boolean'
+    },
+    rightElement: {
+      control: 'text'
+    },
+    leftElement: {
+      control: 'text',
+      required: true
+    },
+    paddingSize: {
+      control: 'select',
+      options: ['small', 'medium', 'large']
+    }
+  },
+  render: ({ ...args }) => (
+    <ListRow
+      rightElement={<div>{args.rightElement}</div>}
+      leftElement={<div>{args.leftElement}</div>}
+      paddingSize={args.paddingSize}
+      hasBorder={args.hasBorder}
+    />
+  )
+}
+
+export default meta
+type Story = StoryObj<typeof ListRow>
+
+export const Default: Story = {
+  args: {
+    rightElement: <div>{'학원명'}</div>,
+    leftElement: <div>{'샤론음악학원'}</div>,
+    paddingSize: 'medium',
+    hasBorder: false
+  }
+}
+
+export const ListRowBorder: Story = {
+  args: {
+    rightElement: <div>{'학원명'}</div>,
+    leftElement: <div>{'샤론음악학원'}</div>,
+    paddingSize: 'medium',
+    hasBorder: true
+  }
+}

src/components/common/listRow/ListRow.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable prettier/prettier */
+import { ComponentProps, ReactNode } from 'react'
+import { PaddingSizeType, PaddingVariant } from './ListRowType'
+
+/**
+ * @param leftElement 왼쪽 요소 (필수) ReactNode로 작성해야 함.
+ * @param rightElement 오른쪽 요소 ReactNode로 작성해야 함
+ * @param paddingSize 'small [10px] | medium [20px] | large [30px] 가로 사이즈만 조절됨' 
+ * @param hasBorder 'bottom-border 의 존재 여부 설정' 
+ * */
+
+interface ListRowProps extends ComponentProps<'div'> {
+  rightElement: ReactNode
+  leftElement?: ReactNode
+  paddingSize?: PaddingSizeType
+  hasBorder?: boolean
+}
+
+const ListRow = ({ leftElement, rightElement, hasBorder = true, paddingSize = 'medium' }: ListRowProps) => {
+  return (
+    <div
+      className={`flex flex-row justify-between items-center py-[13px] ${hasBorder ? 'border border-b-gray-200' : ''
+        } ${PaddingVariant[paddingSize]}`}
+    >
+      {leftElement}
+      {rightElement}
+    </div>
+  )
+}
+
+export default ListRow

src/components/common/listRow/ListRowType.ts

@@ -0,0 +1,6 @@
+export type PaddingSizeType = 'small' | 'medium' | 'large'
+export const PaddingVariant = {
+  small: 'px-[10px]',
+  medium: 'px-[20px]',
+  large: 'px-[30px]'
+}