Feat(#38): 일정 생성 모달창 수정

.eslintrc.cjs

@@ -1,7 +1,12 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+  ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: [

src/@types/Schedule.d.ts

@@ -1,6 +1,9 @@
+import { LabelColorType } from '@/styles/Theme';
+
 type RepetitionCycle = 'DAY' | 'WEEK' | 'MONTH' | 'YEAR';
 type ScheduleCategory = 'MEMBER' | 'GROUP';
 
+// FIXME: Label 인터페이스로 수정하기
 type Label = {
   category: string;
   id: number;
@@ -14,7 +17,7 @@ type LabelResponse = {
   color: string;
 };
 
-interface MemberData {
+export interface MemberData {
   member_id: number;
   nickname: string;
   profile_image: string;
@@ -26,7 +29,7 @@ type GroupResponse = {
   title: string; // 그룹 이름
 };
 
-interface ScheduleData {
+export interface ScheduleData {
   scheduleId?: number;
   title: string; // 필수
   description: string; // 선택
@@ -115,7 +118,7 @@ interface ScheduleDetailData {
   members: Member[]; //개인 일정일 경우 1명의 정보만 들어
 }
 
-interface RepeatData {
+export interface RepeatData {
   repetitionCycle: string; // 필수
   week: number; // week일 경우 몇 주에 한번 반복할지, 선택
   dayOfWeek: number; // bit로 0100010와 같은 형태로, 선택

src/components/Common/Box/Box.styled.ts

@@ -0,0 +1,77 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme';
+
+export interface BoxStylingProps {
+  width?: string;
+  height?: string;
+  margin?: string;
+  marginRight?: string;
+  marginTop?: string;
+  marginLeft?: string;
+  marginBottom?: string;
+  padding?: string;
+  paddingTop?: string;
+  paddingRight?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  border?: string;
+  borderRadius?: string;
+  borderColor?: string;
+  borderTop?: string;
+  borderRight?: string;
+  borderBottom?: string;
+  borderLeft?: string;
+  backgroundColor?: string;
+  color?: string;
+  position?: 'static' | 'absolute' | 'relative' | 'fixed' | 'inherit';
+}
+
+export const getBoxStyling = ({
+  width = '',
+  height = '',
+  margin = '',
+  marginRight = '',
+  marginTop = '',
+  marginLeft = '',
+  marginBottom = '',
+  padding = '',
+  paddingTop = '',
+  paddingRight = '',
+  paddingBottom = '',
+  paddingLeft = '',
+  border = '',
+  borderRadius = '',
+  borderColor = `${Theme.color.black200}`,
+  borderTop = '',
+  borderRight = '',
+  borderBottom = '',
+  borderLeft = '',
+  backgroundColor = '',
+  color = '',
+  position = 'static',
+}: BoxStylingProps) =>
+  css({
+    width,
+    height,
+    margin,
+    marginRight,
+    marginTop,
+    marginLeft,
+    marginBottom,
+    padding,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    border,
+    borderRadius,
+    borderColor,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    backgroundColor,
+    color,
+    position,
+  });

src/components/Common/Box/Box.tsx

@@ -0,0 +1,33 @@
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
+
+import type { BoxStylingProps } from '@/components/Common/Box/Box.styled.ts';
+
+import { getBoxStyling } from '@/components/Common/Box/Box.styled.ts';
+
+export interface BoxProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Box 컴포넌트가 사용할 HTML 태그
+   *
+   * @default 'div'
+   */
+  tag?: ElementType;
+  /** Box 컴포넌트 스타일 옵션 */
+  styles?: BoxStylingProps;
+}
+
+const Box = ({
+  tag = 'div',
+  styles = {},
+  children,
+  ...attributes
+}: BoxProps) => {
+  const Tag = tag;
+
+  return (
+    <Tag css={getBoxStyling(styles)} {...attributes}>
+      {children}
+    </Tag>
+  );
+};
+
+export default Box;

src/components/Common/CalendarLabel/CalendarLabel.styled.ts

@@ -0,0 +1,61 @@
+import { css } from '@emotion/react';
+
+import type { CalendarLabelProps } from './CalendarLabel';
+
+import { LabelColorType, Theme } from '@/styles/Theme.ts';
+
+export const getCalendarLabelStyling = () => {
+  return css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 'fit-content',
+    height: '2.25rem',
+    minWidth: '3.5rem',
+    padding: '0.25rem 0.75rem',
+
+    borderWidth: '1px',
+    borderStyle: 'solid',
+  });
+};
+
+export const getCalendarLabelVariantStyling = (
+  variant: Required<CalendarLabelProps>['$variant'],
+) => {
+  const style = {
+    background: css({
+      color: Theme.color.white,
+    }),
+    border: css({
+      color: Theme.color.black,
+
+      background: 'none',
+    }),
+  };
+
+  return style[variant];
+};
+
+export const getCalendarLabelBorderStyling = (
+  border: Required<CalendarLabelProps>['$rounded'],
+) => {
+  const style = {
+    small: css({
+      borderRadius: Theme.borderRadius.small,
+    }),
+    medium: css({
+      borderRadius: Theme.borderRadius.medium,
+    }),
+    large: css({
+      borderRadius: Theme.borderRadius.large,
+    }),
+  };
+  return style[border];
+};
+
+export const getCalendarLabelColorStyling = (color: LabelColorType) => {
+  return css({
+    borderColor: Theme.labelColor[color],
+    backgroundColor: Theme.labelColor[color],
+  });
+};

src/components/Common/CalendarLabel/CalendarLabel.tsx

@@ -0,0 +1,66 @@
+import { ComponentPropsWithRef, ElementType } from 'react';
+
+import {
+  getCalendarLabelBorderStyling,
+  getCalendarLabelColorStyling,
+  getCalendarLabelStyling,
+  getCalendarLabelVariantStyling,
+} from './CalendarLabel.styled';
+
+import { LabelColorType } from '@/styles/Theme';
+
+export interface CalendarLabelProps extends ComponentPropsWithRef<'div'> {
+  /**
+   * 사용할 HTML 태그 유형을 지정합니다.
+   *
+   * @default: 'div'
+   */
+  tag?: ElementType;
+  /**
+   * 라벨에 표시될 텍스트를 지정합니다.
+   */
+  text: string;
+  /**
+   * 라벨의 모서리 스타일을 지정합니다.
+   *
+   * @default: 'medium'
+   */
+  $rounded?: 'small' | 'medium' | 'large';
+  /**
+   * 라벨의 스타일 변형을 지정합니다.
+   *
+   * @default: 'background'
+   */
+  $variant?: 'background' | 'border';
+  /**
+   * 라벨의 색상을 지정합니다.
+   */
+  $color: LabelColorType;
+}
+
+function CalendarLabel({
+  tag = 'div',
+  $rounded = 'medium',
+  $variant = 'background',
+  $color,
+  text,
+  ...attributes
+}: CalendarLabelProps) {
+  const Tag: ElementType = tag;
+
+  return (
+    <Tag
+      css={[
+        getCalendarLabelStyling,
+        getCalendarLabelBorderStyling($rounded),
+        getCalendarLabelColorStyling($color),
+        getCalendarLabelVariantStyling($variant),
+      ]}
+      {...attributes}
+    >
+      {text}
+    </Tag>
+  );
+}
+
+export default CalendarLabel;

src/components/Common/Center/Center.styled.ts

@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+
+export const getCenterStyling = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  width: '100%',
+  height: '100%',
+
+  textAlign: 'center',
+});

src/components/Common/Center/Center.tsx

@@ -0,0 +1,24 @@
+import type { ComponentPropsWithoutRef, ElementType } from 'react';
+
+import { getCenterStyling } from '@/components/Common/Center/Center.styled';
+
+export interface CenterProps extends ComponentPropsWithoutRef<'div'> {
+  /**
+   * Center 컴포넌트가 사용할 HTML 태그
+   *
+   * @default 'div'
+   */
+  tag?: ElementType;
+}
+
+const Center = ({ tag = 'div', children, ...attributes }: CenterProps) => {
+  const Tag = tag;
+
+  return (
+    <Tag css={getCenterStyling} {...attributes}>
+      {children}
+    </Tag>
+  );
+};
+
+export default Center;

src/components/Common/Input/Input.tsx

@@ -14,8 +14,6 @@ export interface InputProps extends ComponentPropsWithRef<'input'> {
   $variant?: 'default' | 'title';
   /** Input 크기 */
   $size?: 'small' | 'medium' | 'large';
-
-  $disable?: boolean;
 }
 
 function Input({

src/components/Common/LabelButton/LabelButton.styled.ts

@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+
+import { LabelColorType, Theme } from '@/styles/Theme.ts';
+
+export const getLabelButtonColorStyling = (
+  isSelected: boolean,
+  color: LabelColorType,
+) => {
+  return css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 'fit-content',
+    height: '2.25rem', // Tailwind's h-9
+    minWidth: '3.5rem', // Tailwind's min-w-14
+    padding: '0.25rem 0.75rem', // Tailwind's px-3 py-1
+    borderRadius: '9999px', // Tailwind's rounded-full
+
+    fontWeight: 600, // Tailwind's font-semibold
+
+    color: Theme.color.white,
+    cursor: 'pointer',
+
+    border: '1px solid',
+
+    borderColor: !isSelected ? Theme.labelColor[color] : undefined,
+    backgroundColor: isSelected ? Theme.labelColor[color] : undefined,
+  });
+};