import { Meta } from '@storybook/addon-docs';

<Meta title="Docs/Updates" />

# Update History

`opize-design-system` 의 업데이트 기록을 기록하는 곳입니다.

> 이모지 설명<br />
> ❗ 기존 코드에 영향이 있는 업데이트<br />
> ✨ 새로운 기능, 기능 수정<br />
> 🐛 의도하지 않은 버그 수정<br />
> 🔨 개발 환경 업데이트<br />
> 📝 문서, 주석 업데이트<br />
> 업데이트 이모지는 [gitmoji](https://gitmoji.dev/)를 따르고 있어요. 자세한 내용은 링크에서 확인해주세요!

### v1.5.3

업데이트

1. `<Button>` primary background-color를 올바르게 수정했어요.

### v1.5.2

업데이트

1. `<Text>`와 `<Span>`에 lineHeight 속성을 추가했어요.

2. `fontFamily` 기본값을 추가했어요.

### v1.5.1

업데이트

1. `Popover` 에서 간격이 없는 문제를 수정했어요.

2. 글로벌 스타일에 `font-display: fallback;`를 추가했어요.

### v1.5.0

업데이트

1. ❗ 스타일 시스템을 대대로 변경했어요.
    1. styled-components의 theme 지원을 추가했어요.
    2. 기존의 색상 시스템을 삭제했어요.
    3. input 계열 컴포넌트 (Input, Select, Button 등)의 스타일을 동일했어요.
2. ✨ 일부 컴포넌트의 스타일을 변경했어요.
    1. Input 계열 컴포넌트에 `size` 속성이 확대 적용되었어요.
    2. Input 계열 컴포넌트에 `variant` 속성이 활대 적용되었어요.
    3. `label` 스타일 적용을 수정했어요.
    4. 그 외 여러 속성이 추가/변경되었어요.

### v1.4.8

버그

1. `<SlideBox>` 의 DOM 오염 문제를 해결했어요.
2. `prefers-color-scheme: dark` 에서 다크 테마가 정상적으로 적용되지 못한 문제를 해결했어요.

### v1.4.7

업데이트

1. `phosphor-react` 라이브러리를 삭제하고, `@phosphor-icons/react` 라이브러리를 추가했어요.
2. Form 계열 컴포넌트의 스타일을 조정했어요.
3. Form 계정 컴포넌트 size에 regular를 추가했어요.
4. 일부 컴포넌트의 border-radius를 조정했어요.

버그

1. `<Popover.Content>` 의 Props 타입 문제를 해결했어요.
2. `useModal()` 에서 모달이 열렸을 때 모달 하부의 컴포넌트가 열리는 문제를 해결했어요.

### v1.4.6

버그

1. `<Button>`, `<A>` 의 return type으로 인해 발생하는 문제를 해결했어요.

### v1.4.5

업데이트

1. `<Box>` 의 스타일을 변경했어요.

버그

1. `<PageLayout>` 에서 max-width가 gutter를 포함하는 버그를 수정했어요.

### v1.4.4

버그

1. `<Table>` 과 그 하위 컴포넌트에서 HTML 속성 타입이 추가되지 않은 문제가 해결되었어요.
2. `<Buttun>` 스타일 관련 코드로 인한 문제를 해결했어요.

### v1.4.3

업데이트

1. `<Badge>` 컴포넌트의 variant에 tertiary를 추가했어요.

버그

1. `<PageLayout>`, `<BoxLayout>` 에서 `<CodeBlock>` 같은 컴포넌트를 사용할 때 화면에 가로 스크롤이 생기는 문제를 해결했어요.

문서

1. `Example/Page2` 예제 코드를 추가했어요.

### v1.4.2

업데이트

1. `<PageLayout>`, `<BoxLayout>`, `<CenterLayout>` 컴포넌트에 paddingTop, paddingBottom 속성을 추가했어요.
2. `<H1>`, `<H2>` 컴포넌트의 스타일을 수정했어요.

버그

1. `<Header>` 에서 스크롤이 내려가면 다른 요소가 위로 올라가는 문제를 해결했어요.
2. `<Input>` 의 width가 변경될 떄 transition이 올바르지 않게 적용되는 문제를 해결했어요.

문서

1. `Example/Page` 예제 코드를 추가했어요.
2. `README` 를 포함해서 여러 문서를 업데이트했어요.

### v1.4.1

업데이트

1. `<Badge>` 컴포넌트 내에서 자동 줄바꿈이 일어나지 않도록 변경했어요.
2. `<Box>`, `<ItemsTable>`, `<Select>`, `<TabNav>`, `<Title>`, `<Switch>` 의 스타일을 변경했어요.
3. `<ItemsTable.Row.*>` 컴포넌트에 width 속성을 추가했어요.

버그

1. `useModal` 에서 일부 상황에 모달을 닫았을 때 다시 열리지 않는 문제를 해결했어요.
2. `useCodeModal` 에서 string이 아닌 number 등의 값을 넣을 경우 오류가 나오던 문제를 해결했어요.

### v1.4.0

업데이트

1. ✨ `<PaneList>` 컴포넌트를 추가했어요.

### v1.3.1

업데이트

1. ✨ `<Button>`, `<Input>`, `<Date>`, `<Select>`, `<TextArea>` 컴포넌트의 스타일을 변경했어요.

### v1.3.0

업데이트

1. ✨ `<Skeleton>` 컴포넌트를 추가했어요.
2. ✨ `<Box>` 컴포넌트를 추가했어요.
3. ✨ `<Button>`, `<Radio>` 의 스타일을 조금 수정했어요.

버그

1. 🐛 `<Divider>` 에서 color가 적용되지 않는 문제를 해결했어요.

### v1.2.0

업데이트

1. ✨ `useCodeModal` 훅을 추가했어요.
2. ✨ `<KBD>` 컴포넌트를 추가했어요.

버그

1. 🐛 SubFlex (`<Flex.Column>`, `<Flex.Row>`, `Flex.Center`, `Flex.Bewteen`) 컴포넌트의 DOM props 혼입 버그를 수정했어요.

### v1.0.1

업데이트

NextJS 환경에서 .(dot)으로 연결된 컴포넌트가 사용 불가능함에 따라 기존에 . 으로 연결하여 사용되던 컴포넌트의 이름을 추가했어요. 기존에 `<Flex.Row>` 형식으로 사용하던 컴포넌트를 `<FlexRow>` 형식으로도 사용할 수 있어요.

관련 컴포넌트: `Flex, Footer, Header, ItemsTable, PageLayout, Menu, Modal, Popover, SimpleHeader, SlideBox, Table`

### v1.0.0

업데이트

이번 업데이트는 앞자리 버전(메이저)이 올라간 만큼 매우 많은 부분이 업데이트 되었어요. 하위 호환성을 고려하지 않고 실시한 업데이트인지라 마이그레이션이 어렵다면 기존 버전인 `v0.19.4` 를 이어서 사용하시는 걸 추천드려요.

1. ❗ 많은 컴포넌트의 Props가 변경되었어요.
2. ❗ 일부 컴포넌트의 이름이 변경되었어요.
3. ❗ 기본 색상 팔레트가 변경되었어요.

### v0.19.4

버그

1. 🐛 `<Header>` 컴포넌트가 `<ActionMenu>` 위로 올라오는 문제를 해결했어요.
2. 🐛 `<Tooltip>` 컴포넌트의 z-index 문제를 해결했어요.

### v0.19.3

업데이트

1. ✨ Storybook을 7.0.4로 업그레이드 했어요.
2. ✨ Opize의 브랜드 업데이트에 따라 로고와 디자인을 변경했어요.

버그

1. 🐛 `<Header>` 컴포넌트에서 화면을 내렸을 때 아래 컴포넌트가 올라오는 버그를 해결했어요.

### v0.19.2

버그

1. 🐛 `<Header>` 컴포넌트에서 화면을 내렸을 때 아래 컴포넌트가 올라오는 버그를 해결했어요.

### v0.19.1

업데이트

1. ✨ `<Link>` 컴포넌트의 별칭으로 `<A>`를 추가했어요. (`Link === A`)

버그

1. 🐛 `<PageLayout>` 컴포넌트에서 minHeight를 적용했을 때 존재하지 않는 `<PageLayout.Header>` 가 자리를 차지하는 문제를 해결했어요.

### v0.19.0

업데이트

1. ✨ `<Callout>` 컴포넌트를 추가했어요.
2. ✨ HTML-Like 컴포넌트인`<Table>` 컴포넌트를 추가했어요.
3. ✨ `<Checkbox>` 컴포넌트의 border 색을 진하게 변경했어요.
4. ✨ `<Checkbox>` 에 `$size` 속성이 추가되었어요.
    > HTML 기본 속성인 `size`로 입력하지 말아주세요! (꼭 `$`를 붙여주세요.)
5. ✨ `<Button>` 의 `varient: text` 에서 배경 색이 `cv.bg_element1` 에서 `transparent`로 변경했어요.
6. ✨ `<ActionMenu>` padding을 수정했어요.
7. ✨ `<ItemsTable.Row.Text>` 의 text, subtext의 속성을 `string` 에서 `React.ReactNode` 로 변경했어요.

### v0.18.7

업데이트

1. ✨ `<FileField>` 컴포넌트가 드디어 제 기능을 할 수 있도록 변경되었어요.
2. ✨ form 계열 컴포넌트의 높이가 34px에서 32px로 변경되었어요.
    > `<Button>` 컴포넌트와 높이가 동일해졌어요.
3. ✨ `<Link>` 컴포넌트에서 밑줄을 표시하는 방법이 `border-bottom`에서 `text-decoration`으로 변경되었어요.

버그

1. 🐛 `<Token>` 을 비롯해 폰트 색상, 크키가 올바르게 적용되지 않는 문제를 해결했어요.

### v0.18.6

업데이트

1. ✨ `<ActionMenu>` 컴포넌트의 최소 너비를 230px로 변경했어요.
2. ✨ `<Button>` 컴포넌트의 스타일을 수정했어요.
3. ✨ `<ItemsTable>` 의 marginTop: 8px 를 제거했어요.
4. ✨ 색상 파레트가 일부 변경되었어요.

버그

1. 🐛 `<ActionMenu>` 컴포넌트의 텍스트 색상이 제대로 적용되지 않는 문제를 해결했어요.

### v0.18.5

업데이트

1. ✨ `<SlideBox.Page>` 의 내부 컴포넌트의 Height가 변경되었을 때 `<SlideBox>` 의 height도 변경되도록 업데이트 했어요.

버그

1. ✨ `<SlideBox>` 가 첫 페이지가 아닌 다른 페이지에서 시작하는 현상을 해결했어요.

### v0.18.4

버그

1. 🐛 `<SlideBox>` 컴포넌트가 Modal 안에서 정상적으로 동작하지 않은 문제를 해결했어요.

### v0.18.3

버그

1. 🐛 `useSlideBox` 훅 문제를 해결했어요.

### v0.18.2

버그

1. 🐛 `useSlideBox` 훅 문제를 해결했어요.

### v0.18.1

버그

1. 🐛 `<CenterLayout>` 의 width 문제를 해결했어요.

### v0.18.0

업데이트

1. ✨ 기본 css에 텍스트 크키, 색상을 추가했어요
2. ✨ `<Button>` 의 내부 속성인 iconOnly의 조건을 변경했어요. 이제 children 없이 icon 속성만 채우면 자동으로 동그란 형태가 되요. (원한다면 borderRadius 속성을 조절할 수 있어요)
3. ✨ `<SlideBox>` 컴포넌트를 추가했어요.

버그

1. 🐛 `<Box>` 컴포넌트의 Radius를 8px로 변경했어요.
2. 🐛 `<CenterLayout>` 의 width 문제를 해결했어요.

### v0.17.0

업데이트

1. ✨ `CenterLayout`를 추가했어요.
2. ✨ `BoxLayout`에 `minHeight` 속성을 추가했어요.

### v0.16.4

업데이트

1. ✨ 일부 요소들의 스타일과 색이 변경되었어요.

### v0.16.1 ~ v0.16.3

버그

1. 🐛 빌드 문제 해결

### v0.16.0

업데이트

1. ✨ `<PageLayout>`에 minHeight 속성을 추가했어요
2. ✨ `<SimpleHeader>`에 Notice 컴포넌트를 추가했어요.
3. ✨ `modal`의 `width`속성에 `stirng`방식을 추가했어요. 기존 `number`로 입력하던 방식도 사용 가능해요. (number로 입력시 px로 자동 변환)

버그

1. 🐛 `<Header>`와 `<SimpleHeader>`의 width 문제를 수정했어요.

### v0.15.1

업데이트

1. ✨ `<OpizeWrapper>`에 `applyDefaultStyle` 속성을 추가했어요. 이제 ODS의 기본 폰트, 배경색을 반드시 따르지 않아도 되요.

버그

1. 🐛 빌드된 일부 컴포넌트가 정상적으로 작동되지 않는 현상을 해결했어요.

### v0.15.0

업데이트

1. ✨ `<TextField>`에 `width` Prop을 추가했어요.
2. ✨ styled-component의 `theme`에 `theme` 속성을 추가했어요. 이 속성은 `useColorTheme()` 훅의 `nowColorTheme`과 동일한 역할이에요
3. ✨ form 계열 컴포넌트의 foucs 디자인이 수정되었어요.
4. ✨ `<PageLayout>`에 `padding` 속성을 추가했어요.
5. ✨ `<SimpleHeader>` 컴포넌트를 추가했어요.
6. ✨ border의 색을 조금 조정했어요
7. ✨ `<BlockLayout>`을 추가했어요. 이전까지의 `<PageLayout>`을 대체하는 컴포넌트에요.
8. ✨ overlay 계열 컴포넌트의 디자인을 수정했어요.
9. ✨ 그동안 제각각이던 pageWidth를 `margin을 제외한 1200px`로 통일했어요.
10. ✨ `<ItemsTable>`의 `AvatarItem`의 `name`과 `label`을 선택 속성으로 변경했어요.
11. ✨ `<ItemsTable>`의 `StatusItemProps`의 `text`속성을 추가했어요. `text` 속성을 지정하지 않으면 `status`속성의 텍스트가 사용되요.

버그

1. 🐛 `<Span>`에서 속성이 제대로 적용되지 않는 문제를 해결했어요.
2. 🐛 `<Header>`의 최대 너비 문제를 해결했어요.
3. 🐛 `<FlexBetween>`에서 `gap`이 적용되지 않던 문제를 해결했어요.

### v0.14.1

1. 🐛 README 버그를 처리했어요.

### v0.14.0

v0.14.0 부터는 `opize-client`에 직접 적용하면서 불편한 점 & 버그를 수정하고 있어요. 따라서 업데이트 주기가 늦어질 수 있어요. (충분한 테스트, 사용성을 검증하면서 버전을 올릴 예정입니다!)

업데이트

1. ✨ `<TabNav>`에서 useState가 보존되지 않는 상항을 위해 `hasContext` 속성을 추가했어요.
2. ✨ `<PageLayout>`에 `BackgroundColor`, `marginTop` 속성을 추가했어요.
3. ✨ `<Text>`에 `color` 속성을 추가했어요.
4. ✨ `useCodeModal()`에 ``width` 속성을 추가했어요.
5. ✨ `<Divider>`에 `margin` 속성을 추가했어요.
6. ✨ `<ActionList.Item` 에 `selected` 속성을 추가했어요.
7. 📝 `<Button>`에 All Button 보기를 추가했어요.
8. ✨ `다크 모드` 지원을 추가했어요!
9. ✨ 여러 컴포넌트들의 스타일이 개선되었어요.
10. ✨ `다크 모드` 전환을 위해 `useColorTheme()` 훅을 추가했어요.
11. ✨ Opize Design System의 예시 페이지를 볼 수 있는 `Stories` 카테고리를 추가했어요.
12. ✨ `PageLayout`에 `gutter` 속성을 추가했어요.
13. ✨ `<Button>`에 `tooptip` 속성을 추가했어요.

버그

1. 🐛 `<PageHead>`의 속성들을 선택으로 바꿨어요.
2. 🐛 `<Header>` 관련 버그를 수정했어요.
3. 🐛 `<Button>`의 onClick Event 관련 버그를 수정했어요.
4. 🐛 `<Box>` Title의 폰트가 잘못 적용되어 있는 버그를 수정했어요.
5. 🐛 `<Header>` 가 다른 요소에 가려지는 걸 수정했어요.
6. 🐛 `<Header.SubMenu>`에서 `<Header.Notice>`에 따라 sticky로 변하는 높이를 가변적으로 변경했어요.
7. 🐛 그 외 여러 버그를 해결했어요.

### v0.13.0

1. ✨ `LinkContext`를 `<OpizeWrapper>`에 추가했어요. 이제 `as={Link}`를 사용하지 않더라도 편리하게 `to` 를 사용할 수 있어요.
2. ✨ `<Link>` 를 개선했어요.
3. ✨ `<PageLayout>`을 개선했어요.

### v0.12.0

1. ✨❗`<ItemsTable>`의 구조가 크게 변경되었어요.
    > 💬 기존에는 `data prop`을 통해 생성하였으나 현재는 `children`을 통해 생성하도록 변경되었어요.
2. ✨❗`<Button>`을 비롯한 몇몇 컴포넌트에 `as` 속성을 추가했어요.
    > 💬 이제 `asProps`가 아닌 자체 props로 추가적인 props을 추가할 수 있어요. ex. `<A as={Link} to='...'>A</A>`
3. ✨❗`react-router-dom` 의존성을 삭제했어요. 이제 기본적으로 `<a>`태그가 사용되며, 필요한 경우 `as prop`을 통해 `<Link>`를 사용할 수 있어요.
    > 💬 다만 Link를 사용해야 하는 모든 상황에서 `as={Link} to='...'`을 하는 것이 그리 편해보이지 않는 것 같아 이를 해결할 방법을 떠올리고 있어요.<br />
    > 💬 아직 의존성 최적화를 진행하지 않아 사용만 안할 뿐 라이브러리 자체는 `package.json`에 남아있어요. 이 부분은 이후 마무리 단계에서 해결할 예정입니다.
4. ✨ displayName이 필요한 컴포넌트에 displayName을 추가했어요.
5. 📝 스토리북에 subcomponents로 관련 컴포넌트들을 추가했어요. 이 정보들은 각 컴포넌트 Docs에서 확인할 수 있어요.
    > 💬 현재 displayName이 설정된 subcomponent는 스토리북 Docs이 불러오지 못하는 버그가 있는 것 같아요. 죄송하지만 subcomponent의 props은 예제 코드를 통해 파악해주세요. 이 부분은 추후 해결해보겠습니다.

### v0.11.0

1. ✨ `<Token>`을 추가했어요.
2. ✨ `<Button>`에 borderRadius 속성을 추가했어요.
3. ✨ `<PageHead>`를 쓸모있게 업데이트했어요.

### v0.10.0

1. ✨ 페이지 해더에 공지를 추가해주는 `Header.Notice`를 추가했어요.
2. ✨ `Header.Notice`를 외부에서 사용 할 수 있도록 도와주는 `usePageHeader()`를 추가했어요.
3. 🔨 storybook에 `storybook-addon-performance`와 `@storybook/addon-a11y` 애드온을 추가했어요.
    > 💬 아직 a11y를 통과하지 못하는 컴포넌트가 있지만, 차차 고치도록 할게요.
4. 📝 컴포넌트 주석을 추가했어요.
5. ✨ 텍스트를 꾸미기 위한 `<Span>`을 추가했어요.
6. ✨ Button 내부 로직와 props을 크게 변경했어요.
    > 💬 react-router-dom 외의 환경에서도 사용할 수 있도록 react-router-dom과의 의존성을 없애고 있어요.
7. ✨ 여러 버튼을 묶을 수 있는 `<ButtonGroup>`를 추가했어요.
8. ✨❗ 버튼과 관련된 컴포넌트인 `<ActionBox>`와 `<ActionMenu>`가 `<Button>` 컴포넌트를 사용하도록 변경하였어요.
9. ✨ 컴포넌트들을 `HTML-Like Component`와 `Component`로 분류했어요.
10. 📝 문서를 보완했어요.

### v0.9.1

1. 🚑️ eslint 설정 오류로 스토리북 빌드가 불가능한 버그를 해결했어요.

### v0.9.0

1. 📝 Introduction 페이지의 배너를 추가했어요.
    > 💬 calendar2notion의 디자인을 바탕으로 배너를 만들어봤어요.
2. 📝 문서를 보완했어요.
3. ✨ `<Autocomplete>`를 추가했어요.
    > 💬 만드느라 힘들어 죽는줄 알았어요. (6시간 갈림)
4. 🎨 `eslint`와 `prettier`을 적용했어요.