- ),
- size: 'md',
- variant: 'plain',
- css: {
- width: '100px',
- height: '100px',
- },
- },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+
+/**
+ * `Button` 컴포넌트는 공용 버튼 컴포넌트입니다.
+ */
+const meta = {
+ title: 'common/Button',
+ component: Button,
+ tags: ['autodocs'],
+} satisfies Meta
+ ),
+ size: 'md',
+ variant: 'plain',
+ css: {
+ width: '100px',
+ height: '100px',
+ },
+ },
+};
diff --git a/frontend/src/components/common/Checkbox/Checkbox.stories.tsx b/frontend/src/components/common/Checkbox/Checkbox.stories.tsx
index 3be2f6766..47518f437 100644
--- a/frontend/src/components/common/Checkbox/Checkbox.stories.tsx
+++ b/frontend/src/components/common/Checkbox/Checkbox.stories.tsx
@@ -1,96 +1,96 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Checkbox from './Checkbox';
-import { css } from 'styled-components';
-
-/**
- * `Checkbox`는 대부분의 상황에서 사용할 수 있는 공용 체크박스 컴포넌트입니다.
- */
-const meta = {
- title: 'common/Checkbox',
- component: Checkbox,
- tags: ['autodocs'],
-} satisfies Meta이것은 설명입니다.
,
+ },
+};
+
+export const WithDescriptionComponent: Story = {
+ args: {
+ size: 'md',
+ checked: false,
+ onChange: fn(),
+ description: (
+
+ 로그인
+
+ ),
+ },
+};
+
+export const WithCustomColor: Story = {
+ args: {
+ size: 'md',
+ checked: false,
+ onChange: fn(),
+ onColor: 'rgb(21, 99, 223)',
+ offColor: '#99b4d9',
+ thumbOnColor: '#1a0cdc',
+ thumbOffColor: '#040d32',
+ },
+};
+
+export const WithThumbText: Story = {
+ args: {
+ size: 'lg',
+ checked: false,
+ onChange: fn(),
+ onThumb: 'ON',
+ offThumb: 'OFF',
+ },
+};
+
+export const WithInnerLabel: Story = {
+ args: {
+ size: 'lg',
+ checked: false,
+ onChange: fn(),
+ onLabel: '자동 업데이트',
+ offLabel: '수동 업데이트',
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ size: 'md',
+ checked: false,
+ onChange: fn(),
+ description: 'Disabled switch',
+ disabled: true,
+ },
+};
+
+export const ReadOnly: Story = {
+ args: {
+ size: 'md',
+ checked: false,
+ onChange: fn(),
+ description: 'Read-only switch',
+ readonly: true,
+ },
+};
+
+export const Playground: Story = {
+ render: () => {
+ // eslint-disable-next-line react-hooks/rules-of-hooks
+ const [checked, setChecked] = useState(false);
+
+ const handleChange = () => {
+ console.log('Switch Changed');
+ setChecked((prevChecked) => !prevChecked);
+ };
+
+ return (
+
+
+ );
+ },
+ args: {
+ size: 'md',
+ variant: 'solid',
+ },
+};
diff --git a/frontend/src/components/common/Switch/Switch.styled.ts b/frontend/src/components/common/Switch/Switch.styled.ts
new file mode 100644
index 000000000..97d7ece54
--- /dev/null
+++ b/frontend/src/components/common/Switch/Switch.styled.ts
@@ -0,0 +1,231 @@
+import styled, { css } from 'styled-components';
+import theme from '~/styles/theme';
+import type { SwitchSize } from '~/types/size';
+
+const backgroundColor = (
+ $isOn: boolean,
+ $offColor?: string,
+ $onColor?: string,
+) => css`
+ background-color: ${$isOn
+ ? $onColor || theme.color.BLACK
+ : $offColor || theme.color.GRAY200};
+`;
+
+const flexStyles = {
+ column: css`
+ flex-direction: column;
+ `,
+ row: css`
+ flex-direction: row;
+ `,
+};
+
+const sizeStyles = {
+ xs: css`
+ min-width: 28px;
+ height: 16px;
+ `,
+ sm: css`
+ min-width: 38px;
+ height: 20px;
+ `,
+ md: css`
+ min-width: 48px;
+ height: 24px;
+ `,
+ lg: css`
+ min-width: 58px;
+ height: 30px;
+ `,
+};
+
+const thumbSizes = {
+ xs: css`
+ font-size: 4px;
+ width: 12px;
+ height: 12px;
+ `,
+ sm: css`
+ font-size: 6px;
+ width: 16px;
+ height: 16px;
+ `,
+ md: css`
+ font-size: 8px;
+ width: 20px;
+ height: 20px;
+ `,
+ lg: css`
+ font-size: 10px;
+ width: 25px;
+ height: 25px;
+ `,
+};
+
+export const ContainerDiv = styled.div<{
+ $descriptionPosition: 'top' | 'bottom' | 'left' | 'right';
+}>`
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+
+ ${({ $descriptionPosition }) =>
+ ['top', 'bottom'].includes($descriptionPosition)
+ ? flexStyles.column
+ : flexStyles.row}
+`;
+
+export const Label = styled.label<{
+ $size: SwitchSize;
+}>`
+ width: auto;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+
+ ${({ $size }) => sizeStyles[$size]}
+`;
+
+export const TrackDiv = styled.div<{
+ $variant: 'solid' | 'raised';
+ $isOn: boolean;
+ $offColor: string | undefined;
+ $onColor: string | undefined;
+}>`
+ position: relative;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 25px;
+ transition: background 0.4s;
+ background-color: ${({ $offColor }) =>
+ $offColor ? $offColor : theme.color.GRAY200};
+
+ ${({ $variant }) => {
+ if ($variant === 'solid')
+ return css`
+ height: 100%;
+ `;
+
+ return css`
+ height: 40%;
+ `;
+ }}
+
+ ${({ $isOn, $offColor, $onColor }) =>
+ backgroundColor($isOn, $offColor, $onColor)};
+`;
+
+export const LabelSpan = styled.span<{
+ $size: SwitchSize;
+ $isOn: boolean;
+ $offColor: string | undefined;
+ $onColor: string | undefined;
+}>`
+ font-size: 14px;
+ white-space: nowrap;
+ color: ${({ $isOn, $onColor, $offColor }) =>
+ $isOn ? $onColor || theme.color.WHITE : $offColor || theme.color.GRAY700};
+ flex-grow: 1;
+ text-align: center;
+
+ ${({ $size }) => {
+ if ($size === 'sm') {
+ return css`
+ font-size: 12px;
+ `;
+ }
+
+ if ($size === 'xs')
+ return css`
+ font-size: 8px;
+ `;
+ }}
+
+ ${({ $isOn }) => {
+ if ($isOn)
+ return css`
+ margin-left: 10px;
+ `;
+
+ return css`
+ margin-right: 10px;
+ `;
+ }}
+
+
+ ${({ $size, $isOn }) =>
+ css`
+ margin-${$isOn ? 'right' : 'left'}: calc(${
+ $size === 'xs'
+ ? '18px'
+ : $size === 'sm'
+ ? '23px'
+ : $size === 'md'
+ ? '28px'
+ : '34px'
+ });
+ `};
+`;
+
+export const ThumbSpan = styled.span<{
+ $variant: 'solid' | 'raised';
+ $size: SwitchSize;
+ $isOn: boolean;
+ $offColor: string | undefined;
+ $onColor: string | undefined;
+}>`
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 50%;
+
+ ${({ $isOn, $offColor, $onColor }) =>
+ backgroundColor(
+ $isOn,
+ $offColor ?? theme.color.WHITE,
+ $onColor ?? theme.color.WHITE,
+ )};
+
+ ${({ $size }) => thumbSizes[$size]};
+
+ ${({ $size, $isOn, $variant }) => {
+ const isSolid = $variant === 'solid';
+ const solidLeftPositions = {
+ xs: 'calc(100% - 14px)',
+ sm: 'calc(100% - 19px)',
+ md: 'calc(100% - 23px)',
+ lg: 'calc(100% - 29px)',
+ };
+
+ if (isSolid) {
+ return css`
+ left: ${$isOn
+ ? solidLeftPositions[$size]
+ : $size === 'xs'
+ ? '2px'
+ : '3px'};
+ transition: left 0.4s;
+ `;
+ }
+
+ return css`
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+ left: 0;
+ transition: transform 0.4s;
+ ${$isOn && 'transform: translateX(142%);'}
+ `;
+ }}
+`;
+
+export const ToggleInput = styled.input.attrs({ type: 'checkbox' })`
+ display: none;
+
+ &:disabled + ${TrackDiv},&:disabled + ${ThumbSpan} {
+ opacity: 0.7;
+ cursor: not-allowed;
+ }
+`;
diff --git a/frontend/src/components/common/Switch/Switch.tsx b/frontend/src/components/common/Switch/Switch.tsx
new file mode 100644
index 000000000..b232b4d5c
--- /dev/null
+++ b/frontend/src/components/common/Switch/Switch.tsx
@@ -0,0 +1,142 @@
+import {
+ useState,
+ useRef,
+ useEffect,
+ useCallback,
+ type CSSProperties,
+ type ReactNode,
+} from 'react';
+
+import * as S from './Switch.styled';
+import type { SwitchSize } from '~/types/size';
+
+export interface SwitchProps {
+ checked: boolean;
+ onChange: () => void;
+ size?: SwitchSize;
+ variant?: 'solid' | 'raised';
+ style?: CSSProperties;
+ description?: ReactNode;
+ descriptionPosition?: 'top' | 'bottom' | 'left' | 'right';
+ onLabel?: string | ReactNode;
+ offLabel?: string | ReactNode;
+ onThumb?: string | ReactNode;
+ offThumb?: string | ReactNode;
+ readonly?: boolean;
+ disabled?: boolean;
+ onColor?: string;
+ offColor?: string;
+ onLabelColor?: string;
+ offLabelColor?: string;
+ thumbOnColor?: string;
+ thumbOffColor?: string;
+}
+
+/**
+ * Switch 컴포넌트
+ *
+ * @param {boolean} checked - 스위치의 현재 상태를 나타냅니다. true이면 켜짐, false이면 꺼짐.
+ * @param {function} onChange - 스위치 상태가 변경될 때 호출되는 콜백 함수.
+ * @param {"xs" | "sm" | "md" | "lg"} [size="md"] - 스위치의 크기를 설정합니다.
+ * @param {"solid" | "raised"} [variant="solid"] - 스위치의 스타일 유형을 설정합니다. `solid`: 트랙 안에 thumb이 들어 있는 유형. `raised`: 트랙보다 thumb이 큰 유형.
+ * @param {CSSProperties} [style] - 추가 스타일을 적용할 수 있는 인라인 스타일 객체입니다.
+ * @param {ReactNode} [description] - 스위치에 대한 설명이 되는 컴포넌트입니다.
+ * @param {"top" | "bottom" | "left" | "right"} [descriptionPosition="right"] - 설명의 위치를 설정합니다. `top`: 위쪽, `bottom`: 아래쪽, `left`: 왼쪽, `right`: 오른쪽.
+ * @param {string | ReactNode} [onLabel] - 스위치가 켜져 있을 때 트랙 라벨에 들어갈 텍스트 또는 아이콘.
+ * @param {string | ReactNode} [offLabel] - 스위치가 꺼져 있을 때 트랙 라벨에 들어갈 텍스트 또는 아이콘.
+ * @param {string | ReactNode} [onThumb] - 스위치가 켜져 있을 때 thumb 안에 들어갈 텍스트 또는 아이콘.
+ * @param {string | ReactNode} [offThumb] - 스위치가 꺼져 있을 때 thumb 안에 들어갈 텍스트 또는 아이콘.
+ * @param {boolean} [readonly=false] - 스위치를 읽기 전용으로 설정합니다.
+ * @param {boolean} [disabled=false] - 스위치를 비활성화 상태로 설정합니다.
+ * @param {string} [onColor] - 스위치가 켜져 있을 때의 트랙 색상을 설정합니다.
+ * @param {string} [offColor] - 스위치가 꺼져 있을 때의 트랙 색상을 설정합니다.
+ * @param {string} [onLabelColor] - 스위치가 켜져 있을 때의 라벨 색상을 설정합니다.
+ * @param {string} [offLabelColor] - 스위치가 꺼져 있을 때의 라벨 색상을 설정합니다.
+ * @param {string} [thumbOnColor] - 스위치가 켜져 있을 때 thumb의 색상을 설정합니다.
+ * @param {string} [thumbOffColor] - 스위치가 꺼져 있을 때 thumb의 색상을 설정합니다.
+ */
+const Switch = ({
+ checked,
+ onChange,
+ size = 'md',
+ variant = 'solid',
+ style,
+ description,
+ descriptionPosition = 'right',
+ onLabel,
+ offLabel,
+ onThumb,
+ offThumb,
+ readonly = false,
+ disabled = false,
+ onColor,
+ offColor,
+ onLabelColor,
+ offLabelColor,
+ thumbOnColor,
+ thumbOffColor,
+}: SwitchProps) => {
+ const [isOn, setIsOn] = useState(checked);
+ const throttleTimeout = useRef💡
}
+
-
- ),
- ],
-} satisfies Meta
+
+ ),
+ ],
+} satisfies Meta
-
- ),
- ],
- argTypes: {
- image: {
- description:
- '컴포넌트에 표시할 이미지의 정보를 의미합니다. 유효하지 않은 이미지의 url이 주어져도 상관 없습니다.',
- },
- },
-} satisfies Meta
+
+ ),
+ ],
+ argTypes: {
+ image: {
+ description:
+ '컴포넌트에 표시할 이미지의 정보를 의미합니다. 유효하지 않은 이미지의 url이 주어져도 상관 없습니다.',
+ },
+ },
+} satisfies Meta
-
- ),
- ],
- argTypes: {
- isOpen: {
- description:
- '서랍장이 열려 있는지의 여부입니다. 이 prop을 조작하여 서랍장을 열고 닫을 수 있습니다.',
- },
- children: {
- description:
- '랜더링할 자식 요소를 의미합니다. `ThumbnailList` 컴포넌트가 여기에 오면 됩니다.',
- },
- slideDistance: {
- description:
- '서랍장이 열리게 될 경우 얼마나 많은 거리를 위로 움직여야 할 지를 의미합니다. 입력값은 숫자이며 단위는 `px`입니다.',
- },
- onClose: {
- description:
- '서랍장이 닫히게 될 때 실행시킬 함수를 의미합니다. 서랍장을 실질적으로 닫는 함수를 여기에 넣어 주시면 됩니다.',
- },
- },
-} satisfies Meta
- 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.
-
- ),
- onClose: () => {
- alert('onClose();');
- },
- isUploading: false,
- },
-};
-
-export const Opened: Story = {
- args: {
- isOpen: true,
- slideDistance: 163,
- children: (
-
- 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.
-
- ),
- onClose: () => {
- alert('onClose();');
- },
- isUploading: false,
- },
-};
-
-export const CustomDistanceOpened: Story = {
- args: {
- isOpen: true,
- slideDistance: 0,
- children: (
-
- 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.
-
- ),
- onClose: () => {
- alert('onClose();');
- },
- isUploading: false,
- },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import ImageUploadDrawer from '~/components/feed/ImageUploadDrawer/ImageUploadDrawer';
+
+/**
+ * `ImageUploadDrawer`는 이미지 업로드 메뉴를 담고 있는 서랍장 컴포넌트입니다. 사용자의 의사에 따라 열고 닫을 수 있습니다.
+ * 이 컴포넌트는 `position: absolute` 속성을 가지며, 기본적으로 최하단에 위치할 것입니다. 컴포넌트를 사용하기 위해서는 부모 요소에 `display: relative` 속성을 적용해 주셔야 합니다.
+ * 스토리에 표시되는 검은 윤곽선의 컨테이너는 단지 이해를 돕기 위한 것으로, 컴포넌트에 포함되지 않습니다.
+ */
+const meta = {
+ title: 'feed/ImageUploadDrawer',
+ component: ImageUploadDrawer,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+ ),
+ ],
+ argTypes: {
+ isOpen: {
+ description:
+ '서랍장이 열려 있는지의 여부입니다. 이 prop을 조작하여 서랍장을 열고 닫을 수 있습니다.',
+ },
+ children: {
+ description:
+ '랜더링할 자식 요소를 의미합니다. `ThumbnailList` 컴포넌트가 여기에 오면 됩니다.',
+ },
+ slideDistance: {
+ description:
+ '서랍장이 열리게 될 경우 얼마나 많은 거리를 위로 움직여야 할 지를 의미합니다. 입력값은 숫자이며 단위는 `px`입니다.',
+ },
+ onClose: {
+ description:
+ '서랍장이 닫히게 될 때 실행시킬 함수를 의미합니다. 서랍장을 실질적으로 닫는 함수를 여기에 넣어 주시면 됩니다.',
+ },
+ },
+} satisfies Meta
+ 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.
+
+ ),
+ onClose: () => {
+ alert('onClose();');
+ },
+ isUploading: false,
+ },
+};
+
+export const Opened: Story = {
+ args: {
+ isOpen: true,
+ slideDistance: 163,
+ children: (
+
+ 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.
+
+ ),
+ onClose: () => {
+ alert('onClose();');
+ },
+ isUploading: false,
+ },
+};
+
+export const CustomDistanceOpened: Story = {
+ args: {
+ isOpen: true,
+ slideDistance: 0,
+ children: (
+
+ 이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.
+
+ ),
+ onClose: () => {
+ alert('onClose();');
+ },
+ isUploading: false,
+ },
+};
diff --git a/frontend/src/components/feed/PageIndicator/PageIndicator.stories.tsx b/frontend/src/components/feed/PageIndicator/PageIndicator.stories.tsx
index 630301c37..d062aef65 100644
--- a/frontend/src/components/feed/PageIndicator/PageIndicator.stories.tsx
+++ b/frontend/src/components/feed/PageIndicator/PageIndicator.stories.tsx
@@ -1,41 +1,41 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import PageIndicator from '~/components/feed/PageIndicator/PageIndicator';
-
-/**
- * `PageIndicator`는 현재 메뉴의 페이지가 몇 페이지인지를 시각적으로 표현하고, 페이지 전환 기능을 제공합니다. 슬라이드 쇼 등의 메뉴에서 사용하기에 적합합니다.
- * 검은색 컨테이너는 이 컴포넌트에 포함되지 않습니다.
- */
-const meta = {
- title: 'common/PageIndicator',
- component: PageIndicator,
- tags: ['autodocs'],
- decorators: [
- (Story) => (
-
-
- ),
- ],
-} satisfies Meta
+
+ ),
+ ],
+} satisfies Meta
-
- );
- },
- ],
-} satisfies Meta
+
+ );
+ },
+ ],
+} satisfies Meta
-
- );
- },
- ],
-} satisfies Meta
+
+ );
+ },
+ ],
+} satisfies Meta
-
- );
- },
- ],
-} satisfies Meta
+
+ );
+ },
+ ],
+} satisfies Meta
-
- ),
- ],
-} satisfies Meta
+
+ ),
+ ],
+} satisfies Meta
-
- ),
- ],
- argTypes: {
- mode: {
- description:
- '이 컴포넌트의 모드를 의미합니다. 사용 목적에 따라 `schedule`과 `indicator` 중 하나를 명시해 주세요.',
- },
- scheduleBars: {
- description: '렌더링할 스케줄 바들의 정보를 의미합니다.',
- },
- relativeX: {
- description:
- '기존 좌표에서 좌우로 얼마나 이동한 위치에 렌더링 시킬 것인지를 의미합니다. 이 값이 양수이면 기존 좌표에서 수치만큼 오른쪽으로 이동하여 렌더링되고, 음수일 경우 왼쪽으로 이동하여 렌더링됩니다. 단위는 픽셀(px)입니다. **이 프로퍼티는 `mode = schedule`일 때만 사용할 수 있습니다.**',
- },
- relativeY: {
- description:
- '기존 좌표에서 상하로 얼마나 이동한 위치에 렌더링 시킬 것인지를 의미합니다. 이 값이 양수이면 기존 좌표에서 수치만큼 아래쪽으로 이동하여 렌더링되고, 음수일 경우 위쪽으로 이동하여 렌더링됩니다. 단위는 픽셀(px)입니다. **이 프로퍼티는 `mode = schedule`일 때만 사용할 수 있습니다.**',
- },
- },
-} satisfies Meta
+
+ ),
+ ],
+ argTypes: {
+ mode: {
+ description:
+ '이 컴포넌트의 모드를 의미합니다. 사용 목적에 따라 `schedule`과 `indicator` 중 하나를 명시해 주세요.',
+ },
+ scheduleBars: {
+ description: '렌더링할 스케줄 바들의 정보를 의미합니다.',
+ },
+ relativeX: {
+ description:
+ '기존 좌표에서 좌우로 얼마나 이동한 위치에 렌더링 시킬 것인지를 의미합니다. 이 값이 양수이면 기존 좌표에서 수치만큼 오른쪽으로 이동하여 렌더링되고, 음수일 경우 왼쪽으로 이동하여 렌더링됩니다. 단위는 픽셀(px)입니다. **이 프로퍼티는 `mode = schedule`일 때만 사용할 수 있습니다.**',
+ },
+ relativeY: {
+ description:
+ '기존 좌표에서 상하로 얼마나 이동한 위치에 렌더링 시킬 것인지를 의미합니다. 이 값이 양수이면 기존 좌표에서 수치만큼 아래쪽으로 이동하여 렌더링되고, 음수일 경우 위쪽으로 이동하여 렌더링됩니다. 단위는 픽셀(px)입니다. **이 프로퍼티는 `mode = schedule`일 때만 사용할 수 있습니다.**',
+ },
+ },
+} satisfies Meta{ ? '종일 일정이 선택되었습니다.' : '종일 일정이 해제되었습니다.'}
-