teachable-design-system 0.1.0

package/src/components/CheckBox/CheckBox.stories.tsx

@@ -0,0 +1,203 @@
+import { Meta, StoryObj } from "@storybook/react";
+import CheckBox from "./CheckBox";
+import React, { useState } from "react";
+
+const meta = {
+  title: "Components/CheckBox",
+  component: CheckBox,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["medium", "large"],
+      description: "체크박스 크기",
+    },
+    select: {
+      control: "select",
+      options: ["off", "on", "indeterminate"],
+      description: "체크박스 선택 상태",
+    },
+    state: {
+      control: "select",
+      options: ["default", "disabled"],
+      description: "체크박스 활성화 상태",
+    },
+    onClick: {
+      action: "clicked",
+      description: "클릭 이벤트 핸들러",
+    },
+  },
+} satisfies Meta<typeof CheckBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 기본 체크박스 (Off 상태)
+export const Default: Story = {
+  args: {
+    size: "large",
+    select: "off",
+    state: "default",
+  },
+};
+
+// 체크된 상태
+export const Checked: Story = {
+  args: {
+    size: "large",
+    select: "on",
+    state: "default",
+  },
+};
+
+// 중간 상태 (Indeterminate)
+export const Indeterminate: Story = {
+  args: {
+    size: "large",
+    select: "indeterminate",
+    state: "default",
+  },
+};
+
+// Medium 크기
+export const MediumSize: Story = {
+  args: {
+    size: "medium",
+    select: "on",
+    state: "default",
+  },
+};
+
+// Large 크기
+export const LargeSize: Story = {
+  args: {
+    size: "large",
+    select: "on",
+    state: "default",
+  },
+};
+
+// 비활성화 상태 (Off)
+export const DisabledOff: Story = {
+  args: {
+    size: "large",
+    select: "off",
+    state: "disabled",
+  },
+};
+
+// 비활성화 상태 (Checked)
+export const DisabledChecked: Story = {
+  args: {
+    size: "large",
+    select: "on",
+    state: "disabled",
+  },
+};
+
+// 비활성화 상태 (Indeterminate)
+export const DisabledIndeterminate: Story = {
+  args: {
+    size: "large",
+    select: "indeterminate",
+    state: "disabled",
+  },
+};
+
+// 인터랙티브 예제
+export const Interactive = {
+  args: {
+    size: "large" as const,
+    state: "default" as const,
+  },
+  render: () => {
+    const [select, setSelect] = useState<"off" | "on" | "indeterminate">("off");
+
+    const handleClick = () => {
+      setSelect((prev) => {
+        if (prev === "off") return "on";
+        if (prev === "on") return "indeterminate";
+        return "off";
+      });
+    };
+
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+          alignItems: "center",
+        }}
+      >
+        <CheckBox
+          size="large"
+          select={select}
+          state="default"
+          onClick={handleClick}
+        />
+        <p style={{ margin: 0, fontSize: "14px", color: "#666" }}>
+          클릭하여 상태 변경: {select}
+        </p>
+      </div>
+    );
+  },
+};
+
+// 모든 상태 비교
+export const AllStates = {
+  args: {
+    size: "large" as const,
+    state: "default" as const,
+  },
+  render: () => (
+    <div style={{ display: "flex", gap: "32px", flexWrap: "wrap" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+          alignItems: "center",
+        }}
+      >
+        <h4 style={{ margin: 0, fontSize: "14px", fontWeight: 600 }}>
+          Default
+        </h4>
+        <CheckBox size="large" select="off" state="default" />
+        <CheckBox size="large" select="on" state="default" />
+        <CheckBox size="large" select="indeterminate" state="default" />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+          alignItems: "center",
+        }}
+      >
+        <h4 style={{ margin: 0, fontSize: "14px", fontWeight: 600 }}>
+          Disabled
+        </h4>
+        <CheckBox size="large" select="off" state="disabled" />
+        <CheckBox size="large" select="on" state="disabled" />
+        <CheckBox size="large" select="indeterminate" state="disabled" />
+      </div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+          alignItems: "center",
+        }}
+      >
+        <h4 style={{ margin: 0, fontSize: "14px", fontWeight: 600 }}>Medium</h4>
+        <CheckBox size="medium" select="off" state="default" />
+        <CheckBox size="medium" select="on" state="default" />
+        <CheckBox size="medium" select="indeterminate" state="default" />
+      </div>
+    </div>
+  ),
+};

package/src/components/CheckBox/CheckBox.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import * as S from "./style";
+import { CheckBoxProps } from "@/types/checkBox.types";
+
+const CheckBox = ({ size, select, state, onClick }: CheckBoxProps) => {
+  const handleClick = () => {
+    if (state !== "disabled" && onClick) {
+      onClick();
+    }
+  };
+
+  return (
+    <S.Wrapper size={size} select={select} state={state} onClick={handleClick}>
+      {select === "on" && (
+        <S.CheckIcon
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M20 6L9 17L4 12"
+            stroke="white"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </S.CheckIcon>
+      )}
+      {select === "indeterminate" && <S.DashIcon state={state} />}
+    </S.Wrapper>
+  );
+};
+
+export default CheckBox;

package/src/components/CheckBox/index.ts

@@ -0,0 +1 @@
+export * from "./CheckBox";

package/src/components/CheckBox/style.ts

@@ -0,0 +1,76 @@
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { colors } from "@/style/theme";
+
+interface WrapperProps {
+  size: "medium" | "large";
+  select: "off" | "on" | "indeterminate";
+  state: "default" | "disabled";
+}
+
+export const Wrapper = styled.div<WrapperProps>`
+  ${({ size, select, state }) => {
+    const dimensions = size === "large" ? "24px" : "20px";
+    const borderRadius = size === "large" ? "8px" : "6px";
+
+    return css`
+      width: ${dimensions};
+      height: ${dimensions};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${borderRadius};
+      cursor: ${state === "disabled" ? "not-allowed" : "pointer"};
+      transition: all 0.2s ease;
+
+      ${state === "disabled" &&
+      css`
+        background-color: ${colors.surface.disabled};
+        border: 1px solid ${colors.border.disabled};
+      `}
+
+      ${state === "default" &&
+      select === "off" &&
+      css`
+        background-color: ${colors.surface.white};
+        border: 1px solid ${colors.border["gray-dark"]};
+
+        &:hover {
+          border-color: ${colors.border.primary};
+        }
+      `}
+      
+      ${state === "default" &&
+      (select === "on" || select === "indeterminate") &&
+      css`
+        background-color: ${colors.element.primary};
+        border: 1px solid ${colors.element.primary};
+
+        &:hover {
+          background-color: ${colors.light.primary["60"]};
+          border-color: ${colors.light.primary["60"]};
+        }
+      `}
+    `;
+  }}
+`;
+
+export const CheckIcon = styled.svg`
+  width: 100%;
+  height: 100%;
+  padding: 2px;
+`;
+
+interface DashIconProps {
+  state: "default" | "disabled";
+}
+
+export const DashIcon = styled.div<DashIconProps>`
+  width: 60%;
+  height: 2.5px;
+  background-color: ${({ state }) =>
+    state === "disabled"
+      ? colors.element["disabled-dark"]
+      : colors.element.inverse};
+  border-radius: 2px;
+`;

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,91 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Dropdown } from './Dropdown';
+
+const meta = {
+	title: 'Components/Dropdown',
+	component: Dropdown,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+	argTypes: {
+		placeholder: {
+			control: 'text',
+			description: '기본',
+		},
+		size: {
+			control: 'text',
+			description: '트리거 버튼 높이',
+		},
+		label: {
+			control: 'text',
+			description: '상단 라벨 텍스트',
+		},
+		options: {
+			control: 'object',
+			description: '표시할 옵션 문자열 배열',
+		},
+		onSelect: {
+			action: 'selected',
+			description: '옵션 선택 시 호출되는 핸들러',
+		},
+	},
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		label: '과목 선택',
+		placeholder: '가상학급수',
+		options: ['국어', '영어', '수학', '사회', '과학'],
+		size: 'medium'
+	},
+};
+
+export const WithCustomSize: Story = {
+	args: {
+		label: '강의 분류',
+		placeholder: '가상학급수',
+		size: 'large',
+		options: ['정규 과정', '특강', '워크숍'],
+	},
+};
+
+export const MiniSize: Story = {
+	args: {
+		label: '강의 분류',
+		placeholder: '가상학급수',
+		size: 'small',
+		options: ['정규 과정', '특강', '워크숍'],
+	},
+};
+
+export const WithoutLabel: Story = {
+	args: {
+		placeholder: '가상학급수',
+		options: ['옵션 1', '옵션 2', '옵션 3'],
+	},
+};
+
+export const ManyOptions: Story = {
+	args: {
+		placeholder: '가상학급수',
+		options: ['옵션 1', '옵션 2', '옵션 3', '옵션 1', '옵션 2', '옵션 3','옵션 1', '옵션 2', '옵션 3'],
+	},
+};
+export const ManyOptionsWithSmallSize: Story = {
+	args: {
+		placeholder: '가상학급수',
+		options: ['옵션 1', '옵션 2', '옵션 3', '옵션 1', '옵션 2', '옵션 3','옵션 1', '옵션 2', '옵션 3'],
+		size: 'small'
+	},
+};
+export const ManyOptionsWithLargeSize: Story = {
+	args: {
+		placeholder: '가상학급수',
+		options: ['옵션 1', '옵션 2', '옵션 3', '옵션 1', '옵션 2', '옵션 3','옵션 1', '옵션 2', '옵션 3'],
+		size: 'large'
+	},
+};

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import {DropdownProps} from "../../type/Dropdown.types";
+import {StyledBox, StyledDropDown, StyledText, StyledLabel, StyledIcon, StyledOptions, StyledOption} from "./style";
+import arrowDownIcon from '../../assets/icons/arrow-down.png';
+
+export function Dropdown({size, options, onSelect, label, placeholder}: DropdownProps) {
+	const [open, setOpen] = React.useState(false);
+	const [selected, setSelected] = React.useState<string | null>(null);
+	const ref = React.useRef<HTMLDivElement>(null);
+	
+	React.useEffect(() => {
+		const handleClickOutside = (e: MouseEvent) => {
+			if (ref.current && !ref.current.contains(e.target as Node)) {
+				setOpen(false);
+			}
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
+	
+	const handleSelect = (option: string) => {
+		setSelected(option);
+		onSelect?.(option);
+		setOpen(false);
+	};
+	
+	
+	return (
+		<div style={{position: 'relative'}}>
+			<StyledLabel>{label}</StyledLabel>
+			<StyledDropDown onClick={() => setOpen((prev) => !prev)}
+				size={size}
+				isOpen={open}
+				>
+				<StyledBox>
+					<StyledText
+						size={size}
+						isOpen={open}
+					>{selected ?? placeholder}</StyledText>
+					<StyledIcon size={size}>
+						<img src={arrowDownIcon} alt="dropdown icon" style={{width:'100%', height:'100%'}}/>
+					</StyledIcon>
+				</StyledBox>
+			</StyledDropDown>
+			{open && (
+				<StyledOptions ref={ref} size={size}>
+					{options?.map((option) => (
+						<StyledOption key={option} onClick={() => handleSelect(option)} size={size} isSelected={option === selected}>
+							{option}
+						</StyledOption>
+					))}
+				</StyledOptions>
+				)}
+		</div>
+	)
+}

package/src/components/Dropdown/index.ts

@@ -0,0 +1 @@
+export * from './Dropdown';

package/src/components/Dropdown/style.ts

@@ -0,0 +1,213 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { colors } from '../../style';
+import { typography } from '../../style';
+import element from '../../assets/icons/checked.png';
+
+export interface StyledDropdownProps {
+	size?: 'small' | 'medium' | 'large';
+	onSelect?: (option: string) => void;
+	isOpen?: boolean;
+	isSelected?: boolean;
+}
+
+const getButtonSize = (size?: 'small' | 'medium' | 'large') => {
+	switch (size) {
+		case 'small':
+			return css`
+			height: 40px;
+			`
+		case 'medium':
+			return css`
+			height: 48px;
+			`
+		case 'large':
+			return css`
+			height: 56px;
+			`
+		default:
+			return css`
+			height: 48px;
+			`
+	}
+}
+const getFontSize = (size?: 'small' | 'medium' | 'large') => {
+	switch (size) {
+		case 'small':
+			return css`
+			font-size: ${typography.label.small.fontSize};
+			line-height: ${typography.label.small.lineHeight};
+			font-weight: ${typography.label.small.fontWeight};
+			`
+		case 'medium':
+			return css`
+			font-size: ${typography.label.medium.fontSize};
+			line-height: ${typography.label.medium.lineHeight};
+			font-weight: ${typography.label.medium.fontWeight};
+			`
+		case 'large':
+			return css`
+			font-size: ${typography.label.large.fontSize};
+			line-height: ${typography.label.large.lineHeight};
+			font-weight: ${typography.label.large.fontWeight};
+			`
+		default:
+			return css`
+			font-size: ${typography.label.medium.fontSize};
+			line-height: ${typography.label.medium.lineHeight};
+			font-weight: ${typography.label.medium.fontWeight};
+			`
+	}
+}
+const getIconSize = (size?: 'small' | 'medium' | 'large') => {
+	switch (size) {
+		case 'small':
+			return css`
+			width: 16px;
+			height: 16px;
+			`
+		case 'medium':
+			return css`
+			width: 20px;
+			height: 20px;
+			`
+		case 'large':
+			return css`
+			width: 24px;
+			height: 24px;
+			`
+		default:
+			return css`
+			width: 20px;
+			height: 20px;
+			`
+	}
+}
+const getOptionSize = (size?: 'small' | 'medium' | 'large') => {
+	switch (size) {
+		case 'small':
+			return css`
+				height: 23px;
+			`
+		case 'medium':
+			return css`
+				height: 26px;
+			`
+		case 'large':
+			return css`
+			height: 29px;
+			`
+		default:
+			return css`
+			height: 26px;
+			`
+	}
+}
+
+export const StyledDropDown = styled.button<StyledDropdownProps>`
+	font-family: ${typography.fontFamily.primary};
+	background: ${colors.input.surface};
+    border-radius: 8px;
+	display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+	width: 320px;
+	
+    border: ${({ isOpen }) =>
+            isOpen ? `2px solid ${colors.input['border-active']}` : `1px solid ${colors.input.border}`};
+    ${props => getButtonSize(props.size)}
+	
+`;
+
+export const StyledBox = styled.div`
+    display: flex;
+	height: 100%;
+    padding: 0 16px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+`
+
+export const StyledText = styled.p<StyledDropdownProps>`
+    font-family: ${typography.fontFamily.primary};
+    font-style: normal;
+    letter-spacing: 0;
+	width: 246px;
+    flex: 1 0 0;
+	text-align: left;
+	${props => getFontSize(props.size)}
+    color: ${({ isOpen }) => isOpen ? colors.text.static : colors.text.disabled};
+`
+
+export const StyledLabel = styled.p`
+    font-family: ${typography.fontFamily.primary};
+	color: ${colors.text.static};
+`
+
+export const StyledIcon = styled.div<StyledDropdownProps>`
+    ${props => getIconSize(props.size)}
+`
+
+export const StyledOptions = styled.div<StyledDropdownProps>`
+	border: 1px solid ${colors.border["gray-light"]};
+	border-radius: 8px;
+
+    display: flex;
+    padding: 12px 8px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    max-height: ${({ size }) =>
+        size === 'small' ? '220px' :
+		size === 'large' ? '260px' :
+            '240px'};
+    overflow-y: auto;
+    overflow-x: hidden;
+`
+
+export const StyledOption = styled.div<StyledDropdownProps>`
+    display: flex;
+    padding: 8px 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+	
+	
+	border-radius: 8px;
+	
+	color: ${colors.text.subtle};
+	position: relative;
+	
+	${props => getFontSize(props.size)}
+	${props => getOptionSize(props.size)}
+
+
+    ${({ isSelected }) => isSelected && css`
+		background: ${colors.action["secondary-selected"]};
+		color: ${colors.text.secondary};
+
+		padding-left: 36px;
+
+		&::after {
+        content: '';
+        width: 16px;
+        height: 16px;
+        background-image: url(${element});
+        background-size: cover;
+        background-repeat: no-repeat;
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+	`}
+	
+	&:hover {
+		background: ${colors.action["secondary-hover"]};
+	}
+	&:active {
+		background: ${colors.action["secondary-pressed"]};
+	}
+`