Merge branch 'dev' into feat/53-ListRow-component

src/components/BottomSheet/BottomSheetContent.tsx

@@ -0,0 +1,12 @@
+const BottomSheetContent = ({ expanded }: { expanded: boolean }) => {
+  return (
+    <div>
+      <div className={'font-nsk body-15 text-black-900 mb-[20px]'}>
+        {' 서울 강동구 상암로 12 202호 (우) 05242 02-426-3688 '}
+      </div>
+      {expanded && <div>{'펼쳤을 때 나오는 어쩌구 '}</div>}
+    </div>
+  )
+}
+
+export default BottomSheetContent

src/components/BottomSheet/BottomSheetHeader.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { LikeBlank, LikeFilled } from '@/assets/icon'
+const BottomSheetHeader = ({ title }: { title: string }) => {
+  const [liked, setLiked] = useState<boolean>(false)
+  //TODO: 좋아요 API 로직 추가
+  return (
+    <div className={'flex flex-row justify-between w-full mb-[17px]'}>
+      <h1 className={'font-nsk headline-25 text-black-900'}>{title}</h1>
+      {liked ? (
+        <LikeFilled
+          className={'cursor-pointer'}
+          onClick={() => setLiked(!liked)}
+        />
+      ) : (
+        <LikeBlank
+          className={'cursor-pointer'}
+          onClick={() => setLiked(!liked)}
+        />
+      )}
+    </div>
+  )
+}
+
+export default BottomSheetHeader

src/components/common/bottomsheet/BottomSheet.stories.tsx

@@ -0,0 +1,22 @@
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import BottomSheet from './BottomSheet'
+
+const meta: Meta<typeof BottomSheet> = {
+  title: 'Components/BottomSheet',
+  component: BottomSheet,
+  argTypes: {
+    title: {
+      control: 'text'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof BottomSheet>
+
+export const Default: Story = {
+  render: (args) => <BottomSheet title={args.title} />
+}

src/components/common/bottomsheet/BottomSheet.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable prettier/prettier */
+import { useState } from 'react'
+import BottomSheetContent from '@/components/BottomSheet/BottomSheetContent'
+import BottomSheetHeader from '@/components/BottomSheet/BottomSheetHeader'
+
+/**
+ * @param title BottomSheet에 들어갈 Title을 입력합니다. 
+ */
+
+//TODO: 추후 BottomSheet 안의 내용은 client-side 상태관리 이용하여 정보 받아 사용할 예정. 이에 따라 title props도 사라질 수 있음
+interface BottomSheetProps {
+  title: string
+}
+const BottomSheet = ({ title = '학원명 입력' }: BottomSheetProps) => {
+  const [expanded, setExpanded] = useState(false)
+  return (
+    <div
+      className={`box-border absolute left-0 bottom-0 w-full transition-all duration-500 ${expanded ? 'h-full' : 'h-[210px]'
+        } z-10 flex flex-col items-center pt-[13px] px-[30px] bg-white stroke-amber-100 text-gray-600 rounded-t-[20px] shadow-inner `}
+    >
+      <header className={"w-full flex justify-center "}
+        onClick={() => setExpanded(!expanded)}>
+        <div className={
+          'box-border w-[93px] h-[6px] bg-gray-100 rounded-full mb-[23px] cursor-pointer'
+        }>
+        </div>
+      </header >
+      <div className={'flex flex-col items-between w-full'}>
+        <BottomSheetHeader title={title} />
+        <BottomSheetContent expanded={expanded} />
+      </div>
+    </div >
+  )
+}
+
+export default BottomSheet

src/components/common/icon/Icon.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import Icon from '@/components/common/icon/Icon'
+import Icon from './Icon'
 
 const meta: Meta<typeof Icon> = {
   component: Icon,

src/components/common/icon/Icon.tsx

@@ -1,4 +1,4 @@
-import Icons from '@/components/common/icon/Icons'
+import Icons from './Icons'
 export type IconType = keyof typeof Icons
 
 export interface IconProps {

src/components/common/index.tsx

@@ -1,3 +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/label/Label.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Label from './Label'
+
+const meta: Meta<typeof Label> = {
+  title: 'Components/Label',
+  component: Label,
+  argTypes: {
+    label: {
+      control: 'text'
+    },
+    color: {
+      control: 'select',
+      options: ['default', 'selected', 'disabled']
+    },
+    icon: {
+      control: 'select',
+      options: [
+        'Abacus',
+        'Computer',
+        'English',
+        'Etc',
+        'Korean',
+        'Math',
+        'Music',
+        'Science',
+        'Music',
+        'Social',
+        'Synthesis',
+        'Write'
+      ]
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof Label>
+
+export const Medium: Story = {
+  render: (args) => (
+    <Label
+      icon={args.icon}
+      label={args.label}
+      color={args.color}
+      variant={'medium'}
+    />
+  )
+}
+
+export const Small: Story = {
+  render: (args) => (
+    <Label label={args.label} color={args.color} variant={'small'} />
+  )
+}

src/components/common/label/Label.tsx

@@ -0,0 +1,53 @@
+import Icon, { IconType } from '@/components/common/icon/Icon'
+import {
+  LabelVariant,
+  LabelColorVariant,
+  LabelTextColorVariant,
+  LabelColorType
+} from '@/components/common/label/LabelType'
+import cn from '@/libs/utils/cn'
+
+/**
+ * @param variant Label의 타입을 결정합니다. 'medium | 'small'
+ * @param label Label에 들어갈 value 값을 작성합니다.
+ * @param icon 만약 Label에 Icon이 들어간다면 작성하고 싶은 Icon 이름을 입력해주세요.
+ * @param color 'default' | 'selected' | 'disabled' 의 색상을 가지고 있습니다. (default: 'default')
+ */
+
+interface LabelProps {
+  variant: LabelVariant
+  label: string
+  icon?: IconType
+  color?: LabelColorType
+}
+
+const Label = ({
+  variant,
+  label = '라벨',
+  icon,
+  color = 'default'
+}: LabelProps) => {
+  return (
+    <label className={'w-[66px]'}>
+      <div
+        className={cn(
+          LabelVariant({
+            variant
+          }),
+          LabelColorVariant[color][variant],
+          LabelTextColorVariant[color][variant]
+        )}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            classStyle={LabelTextColorVariant[color][variant]}
+          />
+        )}
+        <div>{label}</div>
+      </div>
+    </label>
+  )
+}
+
+export default Label

src/components/common/label/LabelType.ts

@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority'
+
+export type LabelVariant = 'medium' | 'small'
+export type LabelColorType = 'default' | 'selected' | 'disabled'
+
+export const LabelColorVariant = {
+  default: {
+    medium: 'bg-white border border-blue-500 ',
+    small: 'bg-blue-400'
+  },
+  selected: {
+    medium: 'bg-blue-500',
+    small: 'bg-blue-700'
+  },
+  disabled: {
+    medium: 'bg-white border border-gray-500',
+    small: 'bg-gray-500'
+  }
+}
+
+export const LabelTextColorVariant = {
+  default: {
+    medium: 'stroke-blue-500 text-blue-500 ',
+    small: 'text-white-0'
+  },
+  selected: {
+    medium: 'stroke-white-0 text-white-0',
+    small: 'text-white-0'
+  },
+  disabled: {
+    medium: 'stroke-gray-500 text-gray-500',
+    small: 'text-white-0'
+  }
+}
+
+export const LabelVariant = cva(
+  `flex flex-row justify-center gap-[2px] items-center w-fit px-[5px] `,
+  {
+    variants: {
+      variant: {
+        medium: 'rounded-[10px] font-nsk body-14 w-fit h-[32px]',
+        small: 'font-nsk caption-13 rounded-[10px]  w-fit h-[28px] text-white'
+      },
+      defaultVariants: {
+        variant: 'medium'
+      }
+    }
+  }
+)