ScheduleBox컴포넌트 개발 & rgba style 커스텀 & font-weight 숫자 세부설정

src/components/common/profile/Profile.tsx

@@ -18,7 +18,7 @@ const Profile = ({
           : imageSize === 'L'
           ? PROFILE_SIZE['L']
           : ''
-      }`}
+      } mx-[1px]`}
     >
       <img
         onClick={

src/components/common/profile/constants.ts

@@ -1,7 +1,8 @@
 export const PROFILE_SIZE = {
-  L: 'w-[150px] h-[150px]',
-  M: 'w-[92px] h-[92px]',
-  S: 'w-[70px] h-[70px]'
+  XL: 'w-[150px] h-[150px]',
+  L: 'w-[92px] h-[92px]',
+  M: 'w-[70px] h-[70px]',
+  S: 'w-[28px] h-[28px]'
 }
 export const PROFILE_BORDER_COLOR = {
   black500: 'border-black-500'

src/components/common/scheduleBox/ScheduleBox.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Icon from '../icon/Icon'
+import ScheduleBox from '@/components/common/scheduleBox/ScheduleBox'
+
+const meta: Meta<typeof ScheduleBox> = {
+  component: ScheduleBox,
+  tags: ['autodocs'],
+  title: 'components/ScheduleBox',
+  argTypes: {
+    scheduleType: {
+      control: 'select',
+      options: ['profile', 'toggle']
+    },
+    mainTitle: {
+      control: 'text'
+    },
+    subElement: {
+      control: 'text'
+    },
+    rightBottomElement: {
+      control: 'text'
+    },
+    rightTopElement: {
+      control: 'text'
+    },
+    isRegister: {
+      control: 'boolean'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof ScheduleBox>
+
+export const ProfileScheduleBox: Story = {
+  args: {
+    scheduleType: 'profile',
+    mainTitle: 'mainTitle',
+    subElement: (
+      <>
+        <Icon icon={'Time'} />
+        <p>{'오후 4시에 종료'}</p>
+      </>
+    ),
+    rightTopElement: (
+      <>
+        <Icon icon={'Edit'} classStyle={'text-black-900'} />
+        <Icon icon={'Close'} classStyle={'text-black-900'} />
+      </>
+    ),
+    rightBottomElement: (
+      <>
+        {/* 반복문 */}
+        <div>
+          <img
+            src={'https://chanwookim.me/agumon-dday/agumon.png'}
+            alt={'image'}
+            className={'w-[28px] h-[28px] rounded-full'}
+          />
+        </div>
+        <div>
+          <img
+            src={'https://chanwookim.me/agumon-dday/agumon.png'}
+            alt={'image'}
+            className={'w-[28px] h-[28px] rounded-full mx-[3px]'}
+          />
+        </div>
+      </>
+    )
+  }
+}
+
+export const RegisteredScheduleBox: Story = {
+  args: {
+    isRegister: true,
+    scheduleType: 'toggle',
+    mainTitle: '학원 이름',
+    subElement: (
+      <>
+        <div>
+          <p>{'매주 월,화,수'}</p>
+        </div>
+        <div>{'tkghl'}</div>
+      </>
+    ),
+    rightTopElement: (
+      <>
+        <Icon icon={'Edit'} classStyle={'text-black-900'} />
+        <Icon icon={'Close'} classStyle={'text-black-900'} />
+      </>
+    ),
+    rightBottomElement: (
+      <>
+        {/* 반복문 */}
+        <div>{'btn'}</div>
+      </>
+    )
+  }
+}
+
+export const NotRegisteredScheduleBox: Story = {
+  args: {
+    scheduleType: 'toggle',
+    mainTitle: '학원 이름',
+    subElement: (
+      <>
+        <div>
+          <p>{'매주 월,화,수'}</p>
+        </div>
+        <div>{'tkghl'}</div>
+      </>
+    ),
+    rightTopElement: (
+      <>
+        <Icon icon={'Edit'} classStyle={'text-black-900'} />
+        <Icon icon={'Close'} classStyle={'text-black-900'} />
+      </>
+    ),
+    rightBottomElement: (
+      <>
+        <div>{'btn'}</div>
+      </>
+    )
+  }
+}

src/components/common/scheduleBox/ScheduleBox.tsx

@@ -0,0 +1,70 @@
+import type { ScheduleBoxProps } from './ScheduleBoxType'
+import Icon from '../icon/Icon'
+import Profile from '../profile/Profile'
+const ScheduleBox = ({
+  isRegister = false,
+  scheduleType,
+  mainTitle,
+  subElement
+}: ScheduleBoxProps) => {
+  return (
+    <div
+      className={`${
+        scheduleType === 'profile'
+          ? 'w-[360px] h-[88px]'
+          : scheduleType === 'toggle'
+          ? isRegister
+            ? 'w-[345px] h-[142px] bg-white-0'
+            : 'w-[345px] h-[142px] bg-gray-200'
+          : ''
+      } shadow-md pt-[16px] pb-[6px] px-[24px] rounded-[20px] font-nsk`}
+    >
+      <div className={'relative w-full h-full flex-col'}>
+        <div className={'flex justify-between grow-4'}>
+          <div className={'subHead-18-black'}>{mainTitle}</div>
+          <div className={'flex cursor-pointer text-black-900 items-center'}>
+            <Icon icon={'Edit'} />
+            <Icon icon={'Close'} />
+          </div>
+        </div>
+        <div className={'grow-6'}>
+          <div
+            className={`${
+              scheduleType === 'profile' ? 'flex' : 'caption-13-gray'
+            } justify-start items-center body-14-black py-[5px]`}
+          >
+            {subElement}
+          </div>
+          <div className={'absolute bottom-[3px] right-0 flex justify-end'}>
+            {scheduleType === 'profile' ? (
+              <>
+                {/* 
+                ❗️TODO: 자식의 수 만큼 Profile컴포넌트 반복문 해주시면 됩니당
+                */}
+                <Profile imageSize={'S'} />
+                <Profile imageSize={'S'} />
+                <Profile imageSize={'S'} />
+              </>
+            ) : (
+              <div
+                className={`relative w-[42px] h-[20px] rounded-full ${
+                  isRegister ? 'bg-blue-500' : 'bg-white-200'
+                } cursor-pointer`}
+              >
+                <div
+                  className={`absolute ${
+                    isRegister
+                      ? 'right-0 top-0 w-[20px] h-[20px] rounded-full border border-black-900 bg-white-200'
+                      : 'left-0 top-0 w-[20px] h-[20px] rounded-full border border-black-900 bg-white-200'
+                  }`}
+                ></div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ScheduleBox

src/components/common/scheduleBox/ScheduleBoxType.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+
+type ScheduleType = 'toggle' | 'profile'
+export interface ScheduleBoxProps {
+  scheduleType: ScheduleType
+  mainTitle: string
+  subElement: ReactNode // HTML태그를 넣을 수 있음!
+  rightBottomElement?: ReactNode // HTML태그를 넣을 수 있음!
+  isRegister?: boolean
+  cntOfChild?: number
+}