teachable-design-system 0.1.0

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './Input';
+import React, { useState } from 'react';
+import { InputProps } from '../../types/input.types';
+
+const meta: Meta<InputProps> = {
+    title: 'Components/Input',
+    component: Input,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['small', 'medium', 'large'],
+            description: '인풋의 크기',
+        },
+        label: {
+            control: 'boolean',
+            description: 'label 표시 여부',
+        },
+        labelText: {
+            control: 'text',
+            description: 'label에 표시될 텍스트',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'placeholder 텍스트',
+        },
+        disabled: {
+            control: 'boolean',
+            description: '비활성화 여부',
+        },
+    },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 기본 스토리
+export const Default: Story = {
+    args: {
+        size: 'medium',
+        label: true,
+        labelText: 'Label',
+        placeholder: 'Enter text...',
+        disabled: false,
+    },
+};
+
+// Small 사이즈
+export const Small: Story = {
+    args: {
+        size: 'small',
+        label: true,
+        labelText: 'Small Input',
+        placeholder: 'Small size input',
+    },
+};
+
+// Medium 사이즈
+export const Medium: Story = {
+    args: {
+        size: 'medium',
+        label: true,
+        labelText: 'Medium Input',
+        placeholder: 'Medium size input',
+    },
+};
+
+// Large 사이즈
+export const Large: Story = {
+    args: {
+        size: 'large',
+        label: true,
+        labelText: 'Large Input',
+        placeholder: 'Large size input',
+    },
+};
+
+// Label 없음
+export const WithoutLabel: Story = {
+    args: {
+        size: 'medium',
+        label: false,
+        placeholder: 'Input without label',
+    },
+};
+
+// Disabled 상태
+export const Disabled: Story = {
+    args: {
+        size: 'medium',
+        label: true,
+        labelText: 'Disabled Input',
+        placeholder: 'This input is disabled',
+        disabled: true,
+    },
+};
+
+// 인터랙티브 예제 (Controlled Input)
+export const Controlled: Story = {
+    render: (args) => {
+        const [value, setValue] = useState('');
+        
+        return (
+            <div style={{ width: '300px' }}>
+                <Input
+                    {...args}
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                />
+                <p style={{ marginTop: '10px', fontSize: '14px', color: '#666' }}>
+                    Current value: {value || '(empty)'}
+                </p>
+            </div>
+        );
+    },
+    args: {
+        size: 'medium',
+        label: true,
+        labelText: 'Controlled Input',
+        placeholder: 'Type something...',
+    },
+};
+
+// 모든 사이즈 비교
+export const AllSizes: Story = {
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px', width: '300px' }}>
+            <Input
+                size="small"
+                label={true}
+                labelText="Small"
+                placeholder="Small input"
+            />
+            <Input
+                size="medium"
+                label={true}
+                labelText="Medium"
+                placeholder="Medium input"
+            />
+            <Input
+                size="large"
+                label={true}
+                labelText="Large"
+                placeholder="Large input"
+            />
+        </div>
+    ),
+};

package/src/components/Input/Input.tsx

@@ -0,0 +1,33 @@
+
+import React,{ useState } from 'react';
+import { getInputWrapperStyle, labelStyle, getInputStyle } from './style';
+import { InputProps } from '../../types/input.types'
+
+const Input = ({
+    size = 'medium',
+    label = false,
+    labelText = '',
+    placeholder = '',
+    value,
+    onChange,
+    disabled = false,
+}: InputProps) => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    return (
+        <div style={getInputWrapperStyle(size)}>
+            {label && labelText && <label style={labelStyle}>{labelText}</label>}
+            <input
+                style={getInputStyle(size, disabled, isFocused)}
+                placeholder={placeholder}
+                value={value}
+                onChange={onChange}
+                disabled={disabled}
+                onFocus={() => setIsFocused(true)}
+                onBlur={() => setIsFocused(false)}
+            />
+        </div>
+    );
+};
+
+export default Input;

package/src/components/Input/index.ts

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

package/src/components/Input/style.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { typography } from '@/style';
+
+export const getInputWrapperStyle = (size: 'small' | 'medium' | 'large'): React.CSSProperties => {
+    let height = '48px';
+
+    switch (size) {
+        case 'small':
+            height = '41px';
+            break;
+        case 'medium':
+            height = '48px';
+            break;
+        case 'large':
+            height = '56px';
+            break;
+    }
+
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        width: '306px',
+        height: height,
+    };
+};
+
+export const labelStyle: React.CSSProperties = {
+    ...typography.label.small,
+    color: '#333',
+};
+
+export const getInputStyle = (
+    inputSize: 'small' | 'medium' | 'large',
+    disabled: boolean,
+    isFocused: boolean
+): React.CSSProperties => {
+    let padding = '0px 16px';
+    let fontSize = typography.label.medium.fontSize;
+    let lineHeight = typography.label.medium.lineHeight;
+    let fontWeight = typography.label.medium.fontWeight;
+    let height = '48px';
+    let width = '306px';
+
+    switch (inputSize) {
+        case 'small':
+            fontSize = typography.label.small.fontSize;
+            lineHeight = typography.label.small.lineHeight;
+            fontWeight = typography.label.small.fontWeight;
+            height = '40px';
+            break;
+        case 'medium':
+            fontSize = typography.label.medium.fontSize;
+            lineHeight = typography.label.medium.lineHeight;
+            fontWeight = typography.label.medium.fontWeight;
+            height = '48px';
+            break;
+        case 'large':
+            fontSize = typography.label.large.fontSize;
+            lineHeight = typography.label.large.lineHeight;
+            fontWeight = typography.label.large.fontWeight;
+            height = '56px';
+            break;
+    }
+
+    return {
+        width,
+        height,
+        minHeight: height,
+        maxHeight: height,
+        padding,
+        fontSize,
+        lineHeight,
+        fontWeight,
+        fontFamily: typography.fontFamily.primary,
+        border: isFocused ? '1px solid #4a90e2' : '1px solid #ddd',
+        borderRadius: '4px',
+        outline: 'none',
+        transition: 'all 0.2s ease',
+        boxShadow: isFocused ? '0 0 0 3px rgba(74, 144, 226, 0.1)' : 'none',
+        backgroundColor: disabled ? '#f5f5f5' : '#fff',
+        cursor: disabled ? 'not-allowed' : 'text',
+        color: '#333',
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignItems: 'center',
+    };
+};

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Sidebar from './Sidebar';
+
+const meta: Meta<typeof Sidebar> = {
+	title: 'Components/Sidebar',
+	component: Sidebar,
+	parameters: {
+		layout: 'centered',
+	},
+	tags: ['autodocs'],
+	argTypes: {
+		buttonStyle: {
+			control: 'text'
+		},
+		description: {
+			control: 'object',
+		}
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	args: {
+		buttonStyle: 'one',
+		title: ['입력 방법','삭제 방법'],
+		description: [['입력을 하기위해 더블클릭 또는 Enter키를 치세요.', '성명 입력 후에는 반드시 Enter키를 치세요.', '정식 과목명에는 과목의 실제 명칭을 기제하세요.(예. 수학 과목이 여러개인 경우 수학1: X 수학: O)','단축 과목명에는 시간표에 들어갈 과목 명칭을 작성하세요'],['중간의 과목은 삭제 할 수 없습니다.', '맨 끝 과목만 삭제 가능합니다.']]
+	},
+};
+
+export const Default2: Story = {
+	args: {
+		buttonStyle: 'two',
+		title: ['입력 방법','삭제 방법','입력 방법','삭제 방법','입력 방법','삭제 방법','입력 방법','삭제 방법'],
+		description: [['입력을 하기위해 더블클릭 또는 Enter키를 치세요.', '성명 입력 후에는 반드시 Enter키를 치세요.', '정식 과목명에는 과목의 실제 명칭을 기제하세요.(예. 수학 과목이 여러개인 경우 수학1: X 수학: O)','단축 과목명에는 시간표에 들어갈 과목 명칭을 작성하세요'],['중간의 과목은 삭제 할 수 없습니다.', '맨 끝 과목만 삭제 가능합니다.'],['입력을 하기위해 더블클릭 또는 Enter키를 치세요.', '성명 입력 후에는 반드시 Enter키를 치세요.', '정식 과목명에는 과목의 실제 명칭을 기제하세요.(예. 수학 과목이 여러개인 경우 수학1: X 수학: O)','단축 과목명에는 시간표에 들어갈 과목 명칭을 작성하세요'],['중간의 과목은 삭제 할 수 없습니다.', '맨 끝 과목만 삭제 가능합니다.'],['입력을 하기위해 더블클릭 또는 Enter키를 치세요.', '성명 입력 후에는 반드시 Enter키를 치세요.', '정식 과목명에는 과목의 실제 명칭을 기제하세요.(예. 수학 과목이 여러개인 경우 수학1: X 수학: O)','단축 과목명에는 시간표에 들어갈 과목 명칭을 작성하세요'],['중간의 과목은 삭제 할 수 없습니다.', '맨 끝 과목만 삭제 가능합니다.'],['입력을 하기위해 더블클릭 또는 Enter키를 치세요.', '성명 입력 후에는 반드시 Enter키를 치세요.', '정식 과목명에는 과목의 실제 명칭을 기제하세요.(예. 수학 과목이 여러개인 경우 수학1: X 수학: O)','단축 과목명에는 시간표에 들어갈 과목 명칭을 작성하세요'],['중간의 과목은 삭제 할 수 없습니다.', '맨 끝 과목만 삭제 가능합니다.']]
+	},
+};
+
+export const Default3: Story = {
+	args: {
+		buttonStyle: 'two',
+		title: ['입력 방법', '삭제 방법'],
+		description: [['입력을 하기위해 ', '성명 입력 ', '정식 칭을 작성하세요'], ['중간의 과목습니다.', '맨 끝 과목합니다.']]
+	},
+};
+
+export const WithBackground: Story = {
+	parameters: {
+		backgrounds: {
+			default: 'light',
+			values: [
+				{ name: 'light', value: '#f4f5f6' },
+				{ name: 'dark', value: '#202124' },
+			],
+		},
+	},
+};
+

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+	StyledButtonArea,
+	StyledDescription,
+	StyledDisclosure,
+	StyledOpenContents, StyledOpenContentsText,
+	StyledSidebar,
+	StyledTitle,
+	StyledIcon
+} from './style'
+import Button from "../Button/Button";
+import {SidebarProps} from "../../type/Sidebar.types";
+import icon from "../../assets/icons/icon_size.png"
+
+export default function Sidebar({buttonStyle, description, title}: SidebarProps) {
+	
+	const [openSections, setOpenSections] = React.useState<boolean[]>(
+		Array(description.length).fill(true) // 기본적으로 모두 열려있게
+	);
+	
+	const toggleSection = (index: number) => {
+		const newState = [...openSections];
+		newState[index] = !newState[index]; // 현재 인덱스 toggle
+		setOpenSections(newState);
+	};
+	
+	return(
+		<StyledSidebar>
+			<StyledDescription>
+				{title.map((item, index) => (
+					<StyledDisclosure>
+						<StyledTitle onClick={() => toggleSection(index)} style={{ cursor: 'pointer' }}>
+							<StyledIcon src={icon} alt="icon" isOpen={openSections[index]} />
+							{item}
+						</StyledTitle>
+						
+						{openSections[index] && (
+							<StyledOpenContents>
+								{description[index].map((option, i) => (
+									<StyledOpenContentsText key={i}>{option}</StyledOpenContentsText>
+								))}
+							</StyledOpenContents>
+						)}
+					</StyledDisclosure>
+				))}
+			</StyledDescription>
+			{buttonStyle === 'two' ? <TwoButton /> : <OneButton />}
+		</StyledSidebar>
+	)
+}
+
+function OneButton() {
+	return (
+		<StyledButtonArea>
+			<Button size='small' type='primary' label='다음으로' width='240px' height='40px' ></Button>
+		</StyledButtonArea>
+	)
+}
+
+function TwoButton() {
+	return (
+		<StyledButtonArea>
+			<Button size='small' type='secondary' label='이전으로' width='115px' height='40px' ></Button>
+			<Button size='small' type='primary' label='다음으로' width='115px' height='40px' ></Button>
+		</StyledButtonArea>
+	)
+}

package/src/components/Sidebar/index.ts

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

package/src/components/Sidebar/index.tsx

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

package/src/components/Sidebar/style.ts

@@ -0,0 +1,109 @@
+import styled from '@emotion/styled';
+import { colors } from '../../style';
+import { typography } from '../../style';
+
+interface TitleProps {
+	isOpen: boolean;
+	
+}
+
+export const StyledIcon = styled.img<TitleProps>`
+    width: 20px;
+	height: 20px;
+    transition: transform 0.3s ease;
+    transform: rotate(${props => (props.isOpen ? '0deg' : '90deg')});
+`
+
+export const StyledSidebar = styled.div`
+    display: flex;
+    width: 240px;
+	height: 100vh;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+	
+	background: ${colors.background.white};
+`;
+
+export const StyledDescription = styled.div`
+	width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 18px;
+    flex: 1 0 0;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    ::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: ${colors.surface["gray-subtler"]};
+        border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: ${colors.text.subtle};
+        border-radius: 4px;
+    }
+	
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: ${colors.action["secondary-active"]};
+    }
+	
+    ::-webkit-scrollbar-thumb:active {
+        background-color: ${colors.action["primary-active"]};
+    }
+`
+
+export const StyledButtonArea = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+	
+`
+
+export const StyledDisclosure = styled.div`
+	display: flex;
+	gap: 4px;
+    flex-direction: column;
+	
+`
+export const StyledTitle = styled.div`
+    display: flex;
+    width: 147px;
+    align-items: center;
+    gap: 4px;
+	height: 26px;
+    user-select: none;
+`
+export const StyledOpenContents = styled.div`
+    display: flex;
+    padding:  12px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+	max-width: 186px;
+	
+	border-radius: 12px;
+	background: ${colors.surface["gray-subtler"]};
+`
+export const StyledOpenContentsText = styled.p`
+    align-self: stretch;
+	
+    color: ${colors.text.subtle};
+
+    font-family: ${typography.fontFamily.primary};
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 19.5px */
+    letter-spacing: 0;
+    margin: 0;
+`

package/src/components/TabBar/TabBar.stories.tsx

@@ -0,0 +1,116 @@
+import { Meta, StoryObj } from "@storybook/react";
+import TabBar from "./TabBar";
+import React from "react";
+
+const meta = {
+  title: "Components/TabBar",
+  component: TabBar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      control: "text",
+      description: "탭바 제목",
+    },
+    items: {
+      description: "탭 아이템 목록",
+    },
+    defaultSelectedId: {
+      control: "text",
+      description: "기본 선택된 탭 ID",
+    },
+    onChange: {
+      action: "changed",
+      description: "탭 변경 이벤트 핸들러",
+    },
+  },
+} satisfies Meta<typeof TabBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleItems = [
+  { id: "1", label: "기본 정보 등록" },
+  { id: "2", label: "교사명 등록" },
+  { id: "3", label: "과목명 등록" },
+  { id: "4", label: "요일별 시수 등록" },
+  { id: "5", label: "시수표 등록" },
+  { id: "6", label: "일과시간 등록" },
+];
+
+// 기본 TabBar
+export const Default: Story = {
+  args: {
+    title: "시간표 설정",
+    items: sampleItems,
+    defaultSelectedId: "4",
+  },
+};
+
+// 첫 번째 항목 선택
+export const FirstSelected: Story = {
+  args: {
+    title: "시간표 설정",
+    items: sampleItems,
+    defaultSelectedId: "1",
+  },
+};
+
+// 마지막 항목 선택
+export const LastSelected: Story = {
+  args: {
+    title: "시간표 설정",
+    items: sampleItems,
+    defaultSelectedId: "6",
+  },
+};
+
+// 적은 항목
+export const FewItems: Story = {
+  args: {
+    title: "간단한 설정",
+    items: [
+      { id: "1", label: "기본 정보 등록" },
+      { id: "2", label: "교사명 등록" },
+      { id: "3", label: "과목명 등록" },
+    ],
+    defaultSelectedId: "2",
+  },
+};
+
+// 많은 항목
+export const ManyItems: Story = {
+  args: {
+    title: "전체 설정",
+    items: [
+      { id: "1", label: "기본 정보 등록" },
+      { id: "2", label: "교사명 등록" },
+      { id: "3", label: "과목명 등록" },
+      { id: "4", label: "요일별 시수 등록" },
+      { id: "5", label: "시수표 등록" },
+      { id: "6", label: "일과시간 등록" },
+      { id: "7", label: "추가 설정" },
+      { id: "8", label: "고급 옵션" },
+    ],
+    defaultSelectedId: "1",
+  },
+};
+
+// 인터랙티브 예제
+export const Interactive: Story = {
+  args: {
+    title: "시간표 설정",
+    items: sampleItems,
+    defaultSelectedId: "4",
+  },
+  render: (args) => (
+    <div style={{ display: "flex", gap: "16px" }}>
+      <TabBar {...args} onChange={(id) => console.log("Selected:", id)} />
+      <p style={{ margin: 0, fontSize: "14px", color: "#666" }}>
+        탭을 클릭하여 선택 상태를 변경하세요
+      </p>
+    </div>
+  ),
+};

package/src/components/TabBar/TabBar.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import React from "react";
+import * as S from "./style";
+
+export interface TabItem {
+  id: string;
+  label: string;
+}
+
+export interface TabBarProps {
+  title?: string;
+  items: TabItem[];
+  defaultSelectedId?: string;
+  onChange?: (id: string) => void;
+}
+
+const TabBar = ({ title, items, defaultSelectedId, onChange }: TabBarProps) => {
+  const [selectedId, setSelectedId] = useState(
+    defaultSelectedId || items[0]?.id
+  );
+
+  const handleTabClick = (id: string) => {
+    setSelectedId(id);
+    if (onChange) {
+      onChange(id);
+    }
+  };
+
+  return (
+    <S.Wrapper>
+      {title && <S.Title>{title}</S.Title>}
+      <S.Tablist>
+        {items.map((item) => (
+          <S.TabItem
+            key={item.id}
+            isSelected={selectedId === item.id}
+            onClick={() => handleTabClick(item.id)}
+          >
+            {item.label}
+          </S.TabItem>
+        ))}
+      </S.Tablist>
+    </S.Wrapper>
+  );
+};
+
+export default TabBar;

package/src/components/TabBar/index.ts

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