diff --git a/src/common/component/DatePicker/Calendar/Dates/CalendarDates.tsx b/packages/ui/src/DatePicker/Calendar/Dates/CalendarDates.tsx
similarity index 66%
rename from src/common/component/DatePicker/Calendar/Dates/CalendarDates.tsx
rename to packages/ui/src/DatePicker/Calendar/Dates/CalendarDates.tsx
index 03b305dc2..8ac805b72 100644
--- a/src/common/component/DatePicker/Calendar/Dates/CalendarDates.tsx
+++ b/packages/ui/src/DatePicker/Calendar/Dates/CalendarDates.tsx
@@ -1,7 +1,7 @@
-import { isSameMonth } from 'date-fns';
+import { isSameMonth } from "date-fns";
-import { dateStyle, datesContainerStyle } from '@/common/component/DatePicker/Calendar/Calendar.style';
-import { getDateStyle } from '@/common/component/DatePicker/Calendar/Dates/util/dateStyle';
+import { dateStyle, datesContainerStyle } from "@/DatePicker/Calendar/Calendar.style";
+import { getDateStyle } from "@/DatePicker/Calendar/Dates/util/dateStyle";
interface CalendarDatesProps {
currentMonth: Date;
@@ -9,7 +9,7 @@ interface CalendarDatesProps {
selectedDate: Date | null;
endDate: Date | null;
setSelectedDate: (date: Date) => void;
- variant: 'single' | 'range';
+ variant: "single" | "range";
}
const CalendarDates = ({
@@ -30,9 +30,10 @@ const CalendarDates = ({
css={[dateStyle, getDateStyle(date, selectedDate, endDate, currentMonth)]}
onClick={() => setSelectedDate(date)}
onKeyDown={(e) => {
- if (e.key === 'Enter') setSelectedDate(date);
- }}>
- {isSameMonth(currentMonth, date) ? date.getDate() : ''}
+ if (e.key === "Enter") setSelectedDate(date);
+ }}
+ >
+ {isSameMonth(currentMonth, date) ? date.getDate() : ""}
))}
diff --git a/src/common/component/DatePicker/Calendar/Dates/util/dateStyle.ts b/packages/ui/src/DatePicker/Calendar/Dates/util/dateStyle.ts
similarity index 95%
rename from src/common/component/DatePicker/Calendar/Dates/util/dateStyle.ts
rename to packages/ui/src/DatePicker/Calendar/Dates/util/dateStyle.ts
index 0b634e1e3..da9da5159 100644
--- a/src/common/component/DatePicker/Calendar/Dates/util/dateStyle.ts
+++ b/packages/ui/src/DatePicker/Calendar/Dates/util/dateStyle.ts
@@ -1,4 +1,4 @@
-import { endOfMonth, getDay, isSameDay, isSameMonth, isWithinInterval, startOfMonth } from 'date-fns';
+import { endOfMonth, getDay, isSameDay, isSameMonth, isWithinInterval, startOfMonth } from "date-fns";
import {
hoverDateStyle,
@@ -6,7 +6,7 @@ import {
selectedDateStyle,
selectedEndDateStyle,
selectedStartDateStyle,
-} from '@/common/component/DatePicker/Calendar/Calendar.style';
+} from "@/DatePicker/Calendar/Calendar.style";
export const getDateStyle = (date: Date, selectedDate: Date | null, endDate: Date | null, currentMonth: Date) => {
// 현재 달의 날짜가 선택된 날짜 범위 내에 있는지 확인
diff --git a/src/common/component/DatePicker/Calendar/Days/CalendarDays.tsx b/packages/ui/src/DatePicker/Calendar/Days/CalendarDays.tsx
similarity index 71%
rename from src/common/component/DatePicker/Calendar/Days/CalendarDays.tsx
rename to packages/ui/src/DatePicker/Calendar/Days/CalendarDays.tsx
index c8fc78c82..dd2d8155a 100644
--- a/src/common/component/DatePicker/Calendar/Days/CalendarDays.tsx
+++ b/packages/ui/src/DatePicker/Calendar/Days/CalendarDays.tsx
@@ -1,5 +1,5 @@
-import { datesContainerStyle } from '@/common/component/DatePicker/Calendar/Calendar.style';
-import Text from '@/common/component/Text/Text';
+import { datesContainerStyle } from "@/DatePicker/Calendar/Calendar.style";
+import Text from "@/Text/Text";
interface CalendarDaysProps {
weekDays: string[];
diff --git a/packages/ui/src/DatePicker/Calendar/Header/CalendarHeader.tsx b/packages/ui/src/DatePicker/Calendar/Header/CalendarHeader.tsx
new file mode 100644
index 000000000..024740a68
--- /dev/null
+++ b/packages/ui/src/DatePicker/Calendar/Header/CalendarHeader.tsx
@@ -0,0 +1,23 @@
+import { format } from "date-fns";
+
+import Flex from "@/Flex/Flex";
+import Text from "@/Text/Text";
+import { IcArrowLeft, IcArrowRight } from "@tiki/icon";
+
+interface CalendarHeaderProps {
+ currentMonth: Date;
+ onClickPrev: () => void;
+ onClickNext: () => void;
+}
+
+const CalendarHeader = ({ currentMonth, onClickPrev, onClickNext }: CalendarHeaderProps) => (
+ ; +}; + +export default Divider; diff --git a/packages/ui/src/Dropdown/Dropdown.style.ts b/packages/ui/src/Dropdown/Dropdown.style.ts new file mode 100644 index 000000000..3c006c76f --- /dev/null +++ b/packages/ui/src/Dropdown/Dropdown.style.ts @@ -0,0 +1,27 @@ +import { css } from "@emotion/react"; + +import { theme } from "@/theme"; + +export const containerStyle = css({ + display: "flex", + flexDirection: "column", + gap: "0.4rem", + + position: "relative", +}); + +export const listStyle = css({ + position: "absolute", + top: "100%", + + minWidth: "100%", + width: "max-content", + + zIndex: theme.zIndex.overlayHigh, + + backgroundColor: theme.colors.white, +}); + +export const itemStyle = css({ + cursor: "pointer", +}); diff --git a/src/common/component/Dropdown/Dropdown.tsx b/packages/ui/src/Dropdown/Dropdown.tsx similarity index 65% rename from src/common/component/Dropdown/Dropdown.tsx rename to packages/ui/src/Dropdown/Dropdown.tsx index 4cc577b85..977a4eba1 100644 --- a/src/common/component/Dropdown/Dropdown.tsx +++ b/packages/ui/src/Dropdown/Dropdown.tsx @@ -1,9 +1,9 @@ -import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react'; +import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from "react"; -import { containerStyle } from '@/common/component/Dropdown/Dropdown.style'; -import Label from '@/common/component/Label/Label'; +import { containerStyle } from "@/Dropdown/Dropdown.style"; +import Label from "@/Label/Label"; -interface DropdownProps extends ComponentPropsWithoutRef<'div'> { +interface DropdownProps extends ComponentPropsWithoutRef<"div"> { label?: string; } diff --git a/src/common/component/Dropdown/DropdownItem.tsx b/packages/ui/src/Dropdown/DropdownItem.tsx similarity index 68% rename from src/common/component/Dropdown/DropdownItem.tsx rename to packages/ui/src/Dropdown/DropdownItem.tsx index 874aca5b7..b63afb4fe 100644 --- a/src/common/component/Dropdown/DropdownItem.tsx +++ b/packages/ui/src/Dropdown/DropdownItem.tsx @@ -1,15 +1,15 @@ -import { ComponentPropsWithoutRef } from 'react'; +import { ComponentPropsWithoutRef } from "react"; -import { itemStyle } from '@/common/component/Dropdown/Dropdown.style'; +import { itemStyle } from "@/Dropdown/Dropdown.style"; -interface DropdownItemProps extends ComponentPropsWithoutRef<'li'> { +interface DropdownItemProps extends ComponentPropsWithoutRef<"li"> { onSelect?: () => void; } /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */ const DropdownItem = ({ onSelect, children, ...props }: DropdownItemProps) => { const handleKeyDown = (e: React.KeyboardEvent
diff --git a/src/common/component/Label/Label.style.ts b/packages/ui/src/Label/Label.style.ts
similarity index 57%
rename from src/common/component/Label/Label.style.ts
rename to packages/ui/src/Label/Label.style.ts
index d2feeeba9..cb413d6d5 100644
--- a/src/common/component/Label/Label.style.ts
+++ b/packages/ui/src/Label/Label.style.ts
@@ -1,6 +1,6 @@
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
-import { theme } from '@/common/style/theme/theme';
+import { theme } from "@/theme";
export const textStyle = css({
fontSize: theme.text.body04.fontSize,
diff --git a/src/common/component/Label/Label.tsx b/packages/ui/src/Label/Label.tsx
similarity index 50%
rename from src/common/component/Label/Label.tsx
rename to packages/ui/src/Label/Label.tsx
index 547f841f2..f1d08f5da 100644
--- a/src/common/component/Label/Label.tsx
+++ b/packages/ui/src/Label/Label.tsx
@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from "react";
-import { textStyle } from '@/common/component/Label/Label.style';
+import { textStyle } from "@/Label/Label.style";
-interface LabelProps extends ComponentPropsWithoutRef<'label'> {
+interface LabelProps extends ComponentPropsWithoutRef<"label"> {
id: string;
}
diff --git a/src/common/component/Menu/Menu.tsx b/packages/ui/src/Menu/Menu.tsx
similarity index 63%
rename from src/common/component/Menu/Menu.tsx
rename to packages/ui/src/Menu/Menu.tsx
index 4600b1ea8..3f9fe9532 100644
--- a/src/common/component/Menu/Menu.tsx
+++ b/packages/ui/src/Menu/Menu.tsx
@@ -1,6 +1,6 @@
-import { HTMLAttributes, ReactNode, forwardRef } from 'react';
+import { HTMLAttributes, ReactNode, forwardRef } from "react";
-import { useOutsideClick } from '@/common/hook';
+import { useOutsideClick } from "@tiki/utils";
export interface MenuProps extends HTMLAttributes {
children: ReactNode;
@@ -11,7 +11,7 @@ const Menu = ({ children, onClose, ...props }: MenuProps) => {
const ref = useOutsideClick(onClose);
return (
- ['position'], gap: number) => {
+export const positionStyle = (position: Required["position"], gap: number) => {
const style = {
top: css({
- left: '50%',
- bottom: '100%',
+ left: "50%",
+ bottom: "100%",
transform: `translateX(-50%) translateY(calc(-${gap}rem - 8px) )`,
}),
bottom: css({
- left: '50%',
- up: '100%',
+ left: "50%",
+ up: "100%",
transform: `translateX(-50%) translateY(calc(${gap}rem + 8px))`,
}),
left: css({
- top: '50%',
- right: '100%',
+ top: "50%",
+ right: "100%",
transform: `translateY(-50%) translateX(calc(-${gap}rem - 8px))`,
}),
right: css({
- top: '50%',
- left: '100%',
+ top: "50%",
+ left: "100%",
transform: `translateY(-50%) translateX(calc(${gap}rem + 8px))`,
}),
};
@@ -55,29 +55,29 @@ export const positionStyle = (position: Required['position'], gap:
};
export const arrowStyle = css({
- position: 'absolute',
+ position: "absolute",
});
-export const arrowPositionStyle = (position: Required['position']) => {
+export const arrowPositionStyle = (position: Required["position"]) => {
const style = {
top: css({
- left: '50%',
- top: 'calc(100%)',
+ left: "50%",
+ top: "calc(100%)",
transform: `translateX(-50%) translateY(-1px) rotate(270deg)`,
}),
bottom: css({
- left: '50%',
- bottom: 'calc(100%)',
+ left: "50%",
+ bottom: "calc(100%)",
transform: `translateX(-50%) translateY(1px) rotate(90deg)`,
}),
left: css({
- top: '50%',
- left: 'calc(100%)',
+ top: "50%",
+ left: "calc(100%)",
transform: `translateY(-50%) translateX(-1px) rotate(180deg)`,
}),
right: css({
- top: '50%',
- right: 'calc(100%)',
+ top: "50%",
+ right: "calc(100%)",
transform: `translateY(-50%) translateX(1px)`,
}),
};
diff --git a/src/common/component/ToolTip/ToolTip.tsx b/packages/ui/src/ToolTip/ToolTip.tsx
similarity index 67%
rename from src/common/component/ToolTip/ToolTip.tsx
rename to packages/ui/src/ToolTip/ToolTip.tsx
index 9bdc9fa16..152dd026a 100644
--- a/src/common/component/ToolTip/ToolTip.tsx
+++ b/packages/ui/src/ToolTip/ToolTip.tsx
@@ -1,21 +1,15 @@
-import { HTMLAttributes, useState } from 'react';
+import { HTMLAttributes, useState } from "react";
-import Arrow from '@/common/asset/svg/ic_tooltip_arrow.svg?react';
-import {
- arrowPositionStyle,
- arrowStyle,
- containerStyle,
- messageStyle,
- positionStyle,
-} from '@/common/component/ToolTip/ToolTip.style';
+import { arrowPositionStyle, arrowStyle, containerStyle, messageStyle, positionStyle } from "@/ToolTip/ToolTip.style";
+import { IcTooltipArrow } from "@tiki/icon";
export interface ToolTipProps extends HTMLAttributes {
- position?: 'top' | 'right' | 'bottom' | 'left';
+ position?: "top" | "right" | "bottom" | "left";
message: string;
gap?: number;
}
-const ToolTip = ({ position = 'right', message, gap = 0, children, ...props }: ToolTipProps) => {
+const ToolTip = ({ position = "right", message, gap = 0, children, ...props }: ToolTipProps) => {
const [isVisible, setIsVisible] = useState(false);
const handleToolTipVisible = () => {
@@ -25,7 +19,7 @@ const ToolTip = ({ position = 'right', message, gap = 0, children, ...props }: T
setIsVisible(false);
};
const handleKeyDown = (event: React.KeyboardEvent) => {
- if (event.key === 'Escape') {
+ if (event.key === "Escape") {
handleToolTipHidden();
}
};
@@ -40,10 +34,11 @@ const ToolTip = ({ position = 'right', message, gap = 0, children, ...props }: T
onMouseLeave={handleToolTipHidden}
onKeyDown={handleKeyDown}
onFocus={handleToolTipVisible}
- onBlur={handleToolTipHidden}>
+ onBlur={handleToolTipHidden}
+ >
{children}
-
diff --git a/src/common/style/animation.ts b/packages/ui/src/animation.ts
similarity index 91%
rename from src/common/style/animation.ts
rename to packages/ui/src/animation.ts
index 406ec1ba3..a5612afbb 100644
--- a/src/common/style/animation.ts
+++ b/packages/ui/src/animation.ts
@@ -1,4 +1,4 @@
-import { keyframes } from '@emotion/react';
+import { keyframes } from "@emotion/react";
export const fadeIn = keyframes`
0%{
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 000000000..f53002535
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,32 @@
+/** ui components */
+export { default as Button } from "./Button/Button";
+export { Carousel, CarouselItem } from "./Carousel";
+export { default as CheckBox } from "./CheckBox/CheckBox";
+export { default as CommandButton } from "./CommandButton/CommandButton";
+export { default as CountedInput } from "./CountedInput/CountedInput";
+export { default as DatePicker } from "./DatePicker";
+export { default as Divider } from "./Divider/Divider";
+export { DropdownItem, DropdownList, DropdownRoot, DropdownTrigger } from "./Dropdown";
+export { default as Flex } from "./Flex/Flex";
+export { default as Heading } from "./Heading/Heading";
+export { default as Input } from "./Input/Input";
+export { default as Label } from "./Label/Label";
+export { MenuItem, MenuList, MenuRoot } from "./Menu";
+export { default as Modal } from "./Modal/Modal";
+export { RadioButton, RadioGroup } from "./RadioButton";
+export { default as Select } from "./Select/Select";
+export { default as Spinner } from "./Spinner/Spinner";
+export { default as SupportingText } from "./SupportingText/SupportingText";
+export { default as Switch } from "./Switch/Switch";
+export { TabButton, TabList, TabPanel, TabRoot } from "./Tab";
+export { default as Tag } from "./Tag/Tag";
+export { default as Text } from "./Text/Text";
+export { default as Toast } from "./Toast/Toast";
+export { default as ToastContainer } from "./ToastContainer/ToastContainer";
+export { default as ToastProvider } from "./ToastContainer/ToastProvider";
+export { default as ToolTip } from "./ToolTip/ToolTip";
+
+/** style, type */
+export * from "./animation";
+export * from "./theme";
+export * from "./types";
diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts
new file mode 100644
index 000000000..6c831132a
--- /dev/null
+++ b/packages/ui/src/theme.ts
@@ -0,0 +1,158 @@
+import { css } from "@emotion/react";
+
+const colors = {
+ black: "#0E121B",
+ black_shade: "linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%)",
+ dimmed: "rgba(0, 0, 0, 0.40)",
+
+ gray_900: "#323A4C",
+ gray_800: "#525866",
+ gray_700: "#6B6B6B",
+ gray_600: "#909090",
+ gray_500: "#99A1B2",
+ gray_400: "#CCD1DD",
+ gray_300: "#DFE1E8",
+ gray_200: "#ECECF1",
+ gray_100: "#F8F8FB",
+
+ white: "#FFFFFF",
+
+ key_600: "#444EE4",
+ key_500: "#6D77FF",
+ key_400: "#99ACFF",
+ key_300: "#B9C7FF",
+ key_200: "#E3E8FF",
+ key_100: "#F3F5FF",
+
+ sementic_red: "#FE4F60",
+ sementic_success: "#1FC16B",
+
+ red_200: "#EB736D",
+ red_100: "#FFE6E8",
+
+ yellow_200: "#F19234",
+ yellow_100: "#F8E2CB",
+
+ green_200: "#49B078",
+ green_100: "#C4F2E5",
+
+ purple_200: "#856ECF",
+ purple_100: "#DCD8FA",
+
+ blue_200: "#607AD4",
+ blue_100: "#E2E8F8",
+
+ pink_200: "#F175C0",
+ pink_100: "#F8E1F5",
+
+ sky_200: "#48ABD2",
+ sky_100: "#D3EFFA",
+};
+
+export type ColorsTypes = typeof colors;
+
+const heading = {
+ heading01: {
+ fontSize: "4rem",
+ lineHeight: "4rem",
+ },
+ heading02: {
+ fontSize: "3.2rem",
+ lineHeight: "3.2rem",
+ },
+ heading03: {
+ fontSize: "2.8rem",
+ lineHeight: "2.8rem",
+ },
+ heading04: {
+ fontSize: "2.4rem",
+ lineHeight: "2.4rem",
+ },
+ heading05: {
+ fontSize: "2rem",
+ lineHeight: "2rem",
+ },
+ heading06: {
+ fontSize: "1.6rem",
+ lineHeight: "1.6rem",
+ },
+} as const;
+
+const text = {
+ body01: {
+ fontSize: "2.4rem",
+ lineHeight: "2.4rem",
+ },
+ body02: {
+ fontSize: "2.4rem",
+ lineHeight: "3.36rem",
+ },
+ body03: {
+ fontSize: "2rem",
+ lineHeight: "2rem",
+ },
+ body04: {
+ fontSize: "1.6rem",
+ lineHeight: "1.6rem",
+ },
+ body05: {
+ fontSize: "1.6rem",
+ lineHeight: "2.24rem",
+ },
+ body06: {
+ fontSize: "1.4rem",
+ lineHeight: "1.4rem",
+ },
+ body07: {
+ fontSize: "1.4rem",
+ lineHeight: "1.68rem",
+ },
+ body08: {
+ fontSize: "1.2rem",
+ lineHeight: "1.2rem",
+ },
+ body09: {
+ fontSize: "1.2rem",
+ lineHeight: "1.68rem",
+ },
+ body10: {
+ fontSize: "1rem",
+ lineHeight: "1rem",
+ },
+} as const;
+
+const zIndex = {
+ overlayTop: 4,
+ overlayHigh: 3,
+ overlayMiddle: 2,
+ overlayBottom: 1,
+} as const;
+
+const shadow = {
+ inset: `inset 0 0 0 1px ${colors.gray_300}`,
+ inset_focus: `inset 0 0 0 1px ${colors.key_500}`,
+ shadow01: "0px 2px 8px 0px rgba(99, 99, 99, 0.2)", // 6
+ shadow02: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+ shadow03: "0px 3px 8px rgba(0, 0, 0, 0.24)", // 5
+ shadow04: "rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px", // 12
+ shadow05: "rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px",
+};
+
+export const theme = {
+ colors,
+ heading,
+ text,
+ zIndex,
+ shadow,
+};
+
+export const scrollStyle = css`
+ ::-webkit-scrollbar {
+ width: 0.8rem;
+ height: 0.8rem;
+ }
+ ::-webkit-scrollbar-thumb {
+ background: ${theme.colors.gray_300};
+ border-radius: 10rem;
+ }
+`;
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
new file mode 100644
index 000000000..5081222d6
--- /dev/null
+++ b/packages/ui/src/types.ts
@@ -0,0 +1,3 @@
+export type Size = "xxSmall" | "xSmall" | "small" | "medium" | "large" | "xLarge" | "xxLarge";
+
+export type Timeout = ReturnType
+ {
onSelect: () => void;
@@ -15,10 +15,11 @@ const MenuItem = ({ LeftIcon, onSelect, children, ...props }: MenuItemProps) =>
tabIndex={0}
css={containerStyle}
onKeyDown={(e: React.KeyboardEvent) => {
- if (e.key === 'Enter') onSelect;
+ if (e.key === "Enter") onSelect;
}}
onClick={onSelect}
- {...props}>
+ {...props}
+ >
{LeftIcon}
{children}
diff --git a/packages/ui/src/Menu/MenuList/MenuList.style.ts b/packages/ui/src/Menu/MenuList/MenuList.style.ts
new file mode 100644
index 000000000..12f9103b9
--- /dev/null
+++ b/packages/ui/src/Menu/MenuList/MenuList.style.ts
@@ -0,0 +1,21 @@
+import { css } from "@emotion/react";
+
+import { theme } from "@/theme";
+
+export const containerStyle = css({
+ position: "absolute",
+
+ display: "flex",
+ flexDirection: "column",
+ width: "19.5rem",
+
+ padding: "0.8rem",
+ gap: "0.6rem",
+
+ borderRadius: "8px",
+ border: `1px solid ${theme.colors.gray_300}`,
+
+ boxShadow: "0.4rem 0.4rem 1rem 0 rgba(0, 0, 0, 0.1)",
+
+ zIndex: theme.zIndex.overlayTop,
+});
diff --git a/src/common/component/Menu/MenuList/MenuList.tsx b/packages/ui/src/Menu/MenuList/MenuList.tsx
similarity index 72%
rename from src/common/component/Menu/MenuList/MenuList.tsx
rename to packages/ui/src/Menu/MenuList/MenuList.tsx
index 262eebb4a..68ac8b684 100644
--- a/src/common/component/Menu/MenuList/MenuList.tsx
+++ b/packages/ui/src/Menu/MenuList/MenuList.tsx
@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes } from "react";
-import { containerStyle } from '@/common/component/Menu/MenuList/MenuList.style';
+import { containerStyle } from "@/Menu/MenuList/MenuList.style";
export interface MenuListProps extends HTMLAttributes {
isOpen: boolean;
diff --git a/packages/ui/src/Menu/index.ts b/packages/ui/src/Menu/index.ts
new file mode 100644
index 000000000..c203aa0f3
--- /dev/null
+++ b/packages/ui/src/Menu/index.ts
@@ -0,0 +1,3 @@
+export { default as MenuRoot } from "./Menu";
+export { default as MenuItem } from "./MenuItem/MenuItem";
+export { default as MenuList } from "./MenuList/MenuList";
diff --git a/packages/ui/src/Modal/Modal.style.ts b/packages/ui/src/Modal/Modal.style.ts
new file mode 100644
index 000000000..4f3ad5804
--- /dev/null
+++ b/packages/ui/src/Modal/Modal.style.ts
@@ -0,0 +1,35 @@
+import { css } from "@emotion/react";
+
+import { fadeIn } from "@/animation";
+import { theme } from "@/theme";
+
+export const backgroundStyle = css({
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ position: "fixed",
+ top: 0,
+ left: 0,
+ zIndex: theme.zIndex.overlayHigh,
+ width: "100vw",
+ height: "100vh",
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
+ animation: `${fadeIn} 0.2s ease-in`,
+});
+
+export const dialogStyle = css({
+ display: "block",
+ position: "fixed",
+ top: "50%",
+ left: "50%",
+
+ zIndex: theme.zIndex.overlayTop,
+
+ padding: "3.2rem 2rem",
+
+ borderRadius: "16px",
+ border: "none",
+ outline: "none",
+ background: theme.colors.white,
+ transform: "translate(-50%, -50%)",
+});
diff --git a/src/common/component/Modal/Modal.tsx b/packages/ui/src/Modal/Modal.tsx
similarity index 64%
rename from src/common/component/Modal/Modal.tsx
rename to packages/ui/src/Modal/Modal.tsx
index 9406b8064..1ef4e307b 100644
--- a/src/common/component/Modal/Modal.tsx
+++ b/packages/ui/src/Modal/Modal.tsx
@@ -1,10 +1,10 @@
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
-import { ReactNode, useCallback, useEffect } from 'react';
-import { createPortal } from 'react-dom';
+import { ReactNode, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
-import { backgroundStyle, dialogStyle } from '@/common/component/Modal/Modal.style';
+import { backgroundStyle, dialogStyle } from "@/Modal/Modal.style";
interface ModalProps {
isOpen: boolean;
@@ -15,26 +15,26 @@ interface ModalProps {
const Modal = ({ isOpen, children, onClose }: ModalProps) => {
const handleKeyDown = useCallback(
(e: KeyboardEvent) => {
- if (e.key === 'Escape') {
+ if (e.key === "Escape") {
onClose?.();
}
},
- [onClose]
+ [onClose],
);
useEffect(() => {
if (isOpen) {
const widthWithoutScrollbar = document.body.clientWidth;
- document.body.style.overflow = 'hidden';
+ document.body.style.overflow = "hidden";
document.body.style.maxWidth = `${widthWithoutScrollbar}px`;
- window.addEventListener('keydown', handleKeyDown);
+ window.addEventListener("keydown", handleKeyDown);
}
return () => {
- document.body.style.overflow = 'auto';
- document.body.style.maxWidth = '100vw';
- window.removeEventListener('keydown', handleKeyDown);
+ document.body.style.overflow = "auto";
+ document.body.style.maxWidth = "100vw";
+ window.removeEventListener("keydown", handleKeyDown);
};
}, [isOpen, handleKeyDown]);
@@ -47,7 +47,7 @@ const Modal = ({ isOpen, children, onClose }: ModalProps) => {
{children}
,
- document.body
+ document.body,
)
);
};
diff --git a/packages/ui/src/RadioButton/RadioButton.style.ts b/packages/ui/src/RadioButton/RadioButton.style.ts
new file mode 100644
index 000000000..8a9195453
--- /dev/null
+++ b/packages/ui/src/RadioButton/RadioButton.style.ts
@@ -0,0 +1,70 @@
+import { css } from "@emotion/react";
+
+import { theme } from "@/theme";
+
+export const radioButtonLayoutStyle = css({
+ display: "flex",
+
+ gap: "0.7rem",
+
+ cursor: "pointer",
+});
+
+export const inputStyle = css({
+ position: "relative",
+
+ appearance: "none",
+ MozAppearance: "none",
+ WebkitAppearance: "none",
+
+ width: "1.5rem",
+ height: "1.5rem",
+
+ border: `1.5px solid ${theme.colors.gray_400}`,
+ borderRadius: "50%",
+
+ backgroundColor: theme.colors.gray_100,
+
+ cursor: "pointer",
+
+ transition: "0.2s ease-in-out",
+
+ "&:checked": {
+ borderColor: theme.colors.key_500,
+ },
+
+ "&:checked::after": {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+
+ width: "0.7rem",
+ height: "0.7rem",
+
+ margin: "0 auto",
+
+ borderRadius: "50%",
+
+ content: '""',
+ backgroundColor: theme.colors.key_500,
+
+ transform: "translate(-50%, -50%)",
+ },
+
+ "& + label": {
+ cursor: "pointer",
+ ...theme.text.body06,
+ },
+});
+
+export const labelStyle = css({
+ color: theme.colors.black,
+
+ whiteSpace: "nowrap",
+});
+
+export const radioGroupStyle = css({
+ display: "flex",
+
+ gap: "0.8rem",
+});
diff --git a/src/common/component/RadioButton/RadioButton.tsx b/packages/ui/src/RadioButton/RadioButton.tsx
similarity index 100%
rename from src/common/component/RadioButton/RadioButton.tsx
rename to packages/ui/src/RadioButton/RadioButton.tsx
diff --git a/src/common/component/RadioButton/RadioGroup.tsx b/packages/ui/src/RadioButton/RadioGroup.tsx
similarity index 84%
rename from src/common/component/RadioButton/RadioGroup.tsx
rename to packages/ui/src/RadioButton/RadioGroup.tsx
index 91833ccf3..465fbf26b 100644
--- a/src/common/component/RadioButton/RadioGroup.tsx
+++ b/packages/ui/src/RadioButton/RadioGroup.tsx
@@ -1,7 +1,7 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent } from "react";
-import RadioButton from '@/common/component/RadioButton/RadioButton';
-import { radioGroupStyle } from '@/common/component/RadioButton/RadioButton.style';
+import RadioButton from "@/RadioButton/RadioButton";
+import { radioGroupStyle } from "@/RadioButton/RadioButton.style";
export interface RadioProps {
label: string;
diff --git a/packages/ui/src/RadioButton/index.ts b/packages/ui/src/RadioButton/index.ts
new file mode 100644
index 000000000..ebf2b3488
--- /dev/null
+++ b/packages/ui/src/RadioButton/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioButton } from "./RadioButton";
+export { default as RadioGroup } from "./RadioGroup";
diff --git a/packages/ui/src/Select/Select.style.ts b/packages/ui/src/Select/Select.style.ts
new file mode 100644
index 000000000..27a18b8c2
--- /dev/null
+++ b/packages/ui/src/Select/Select.style.ts
@@ -0,0 +1,127 @@
+import { css } from "@emotion/react";
+
+import { SelectProps } from "@/Select/Select";
+import { theme } from "@/theme";
+
+export const overlayStyle = (isOpen: boolean) =>
+ css({
+ maxHeight: "30rem",
+
+ top: "calc(100% + 0.2rem)",
+ right: 0,
+
+ borderRadius: "8px",
+ border: `1px solid ${theme.colors.gray_200}`,
+ boxShadow: isOpen ? theme.shadow.shadow02 : "none",
+
+ overflowY: "auto",
+ overscrollBehavior: "contain",
+ });
+
+export const itemStyle = (variant: Required) =>
+ css(
+ {
+ display: "flex",
+ alignItems: "center",
+ gap: variant === "option" ? "0.4rem" : "1.6rem",
+
+ padding: "1rem 1.2rem",
+ margin: variant === "option" ? "0.4rem" : "0.8rem",
+ borderRadius: "8px",
+
+ "&:hover, &:focus": {
+ color: theme.colors.key_500,
+ backgroundColor: theme.colors.blue_100,
+ },
+ },
+
+ /** user list 혹은 option select 일 때의 font 차이 */
+ {
+ "& > *": {
+ ...(variant === "option" || variant === "user" ? theme.text.body08 : theme.text.body05),
+ },
+ },
+ );
+
+export const profileStyle = css({
+ width: "3.2rem",
+ height: "3.2rem",
+
+ borderRadius: "50%",
+
+ objectFit: "cover",
+});
+
+export const textFieldStyle = css({
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "start",
+ gap: "0.6rem",
+
+ fontWeight: 500,
+
+ "& > span": {
+ fontWeight: 400,
+ color: theme.colors.gray_800,
+ },
+});
+
+export const triggerStyle = (variant: Required, isSelected: boolean) =>
+ css(
+ {
+ display: "flex",
+ alignItems: "center",
+
+ height: "4.8rem",
+ padding: "1.2rem 1rem",
+
+ border: "none",
+ backgroundColor: theme.colors.white,
+
+ whiteSpace: "nowrap",
+ cursor: "pointer",
+
+ "& > span": {
+ ...theme.text.body06,
+
+ textAlign: "start",
+ textOverflow: "ellipsis",
+ },
+ },
+ /** underline 있는 select trigger 버튼 */
+ variant === "underline"
+ ? {
+ borderBottom: `1px solid ${isSelected ? theme.colors.key_500 : theme.colors.gray_400}`,
+ }
+ : {
+ borderRadius: "8px",
+ boxShadow: variant === "outline" ? (!isSelected ? theme.shadow.inset : theme.shadow.inset_focus) : "none",
+ },
+ /** "최근 업로드 순"과 같은 option select */
+ variant === "option"
+ ? {
+ height: "3.2rem",
+ padding: "1rem 0.1rem 1rem 1rem",
+
+ justifyContent: "flex-end",
+ gap: "0.4rem",
+
+ fontWeight: 400,
+ color: theme.colors.gray_800,
+ }
+ : {
+ justifyContent: "space-between",
+ gap: "0.8rem",
+
+ fontWeight: 500,
+ color: isSelected ? theme.colors.black : theme.colors.gray_500,
+ },
+ );
+
+export const iconStyle = (isOpen: boolean) =>
+ css({
+ flexShrink: 0,
+
+ transform: isOpen ? "rotate(180deg)" : "rotate(0)",
+ transition: "all 0.2s ease-in",
+ });
diff --git a/src/common/component/Select/Select.tsx b/packages/ui/src/Select/Select.tsx
similarity index 51%
rename from src/common/component/Select/Select.tsx
rename to packages/ui/src/Select/Select.tsx
index b891a9177..1ac689ed5 100644
--- a/src/common/component/Select/Select.tsx
+++ b/packages/ui/src/Select/Select.tsx
@@ -1,19 +1,11 @@
-import { ComponentPropsWithRef, ForwardedRef, ReactNode, forwardRef, useState } from 'react';
+import { ComponentPropsWithRef, ForwardedRef, ReactNode, forwardRef, useState } from "react";
-import IcArrowDefault from '@/common/asset/svg/ic_arrow_down_gray.svg?react';
-import IcArrowOption from '@/common/asset/svg/ic_down.svg?react';
-import { Dropdown } from '@/common/component/Dropdown';
-import {
- iconStyle,
- itemStyle,
- overlayStyle,
- profileStyle,
- textFieldStyle,
- triggerStyle,
-} from '@/common/component/Select/Select.style';
-import { scrollStyle } from '@/common/style/scroll';
+import { DropdownItem, DropdownList, DropdownRoot } from "@/Dropdown";
+import { iconStyle, itemStyle, overlayStyle, profileStyle, textFieldStyle, triggerStyle } from "@/Select/Select.style";
+import { scrollStyle } from "@/theme";
+import { IcArrowDownGray, IcDown } from "@tiki/icon";
-import { hasKeyInObject } from '@/shared/util/typeGuard';
+import { hasKeyInObject } from "@tiki/utils";
interface OptionType {
value: string;
@@ -22,8 +14,8 @@ interface OptionType {
description?: string;
}
-export interface SelectProps extends Omit, 'onSelect'> {
- variant?: 'default' | 'user' | 'option' | 'outline' | 'underline';
+export interface SelectProps extends Omit, "onSelect"> {
+ variant?: "default" | "user" | "option" | "outline" | "underline";
isOpen?: boolean;
label?: string;
placeholder?: string;
@@ -35,7 +27,7 @@ export interface SelectProps extends Omit, 'onSelec
const Select = (
{
- variant = 'default',
+ variant = "default",
isOpen = false,
defaultValue,
placeholder,
@@ -45,46 +37,47 @@ const Select = (
options,
...props
}: SelectProps,
- ref: ForwardedRef
+ ref: ForwardedRef,
) => {
const [selectedText, setSelectedText] = useState(defaultValue || placeholder);
const isSelected = selectedText !== placeholder;
return (
-
+
-
+
{options.map((item) => (
- {
onSelect?.(item.value);
setSelectedText(item.value);
- }}>
- {hasKeyInObject(item, 'profileUrl') && (
+ }}
+ >
+ {hasKeyInObject(item, "profileUrl") && (
)}
+ {hasKeyInObject(item, "svg") && item.svg}
+
))}
-
-
+
+
);
};
diff --git a/src/common/component/Spinner/Spinner.tsx b/packages/ui/src/Spinner/Spinner.tsx
similarity index 63%
rename from src/common/component/Spinner/Spinner.tsx
rename to packages/ui/src/Spinner/Spinner.tsx
index e56700e01..5a4516c11 100644
--- a/src/common/component/Spinner/Spinner.tsx
+++ b/packages/ui/src/Spinner/Spinner.tsx
@@ -1,6 +1,6 @@
-import IcSpinner from '@/common/asset/svg/ic_spinner.svg?react';
-import { rotate } from '@/common/style/animation';
-import { theme } from '@/common/style/theme/theme';
+import { rotate } from "@/animation";
+import { theme } from "@/theme";
+import { IcSpinner } from "@tiki/icon";
interface SpinnerProps {
size: number;
diff --git a/src/common/component/SupportingText/SupportingText.style.ts b/packages/ui/src/SupportingText/SupportingText.style.ts
similarity index 62%
rename from src/common/component/SupportingText/SupportingText.style.ts
rename to packages/ui/src/SupportingText/SupportingText.style.ts
index cd4c7ee5f..1cc47ec4a 100644
--- a/src/common/component/SupportingText/SupportingText.style.ts
+++ b/packages/ui/src/SupportingText/SupportingText.style.ts
@@ -1,6 +1,6 @@
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
-import { theme } from '@/common/style/theme/theme';
+import { theme } from "@/theme";
export const textStyle = (isError: boolean, isSuccess: boolean) => {
const textColor = isError
@@ -11,9 +11,9 @@ export const textStyle = (isError: boolean, isSuccess: boolean) => {
return css({
color: textColor,
- paddingLeft: '0.8rem',
- wordBreak: 'break-word',
+ paddingLeft: "0.8rem",
+ wordBreak: "break-word",
...theme.text.body09,
- whiteSpace: 'pre-line',
+ whiteSpace: "pre-line",
});
};
diff --git a/src/common/component/SupportingText/SupportingText.tsx b/packages/ui/src/SupportingText/SupportingText.tsx
similarity index 58%
rename from src/common/component/SupportingText/SupportingText.tsx
rename to packages/ui/src/SupportingText/SupportingText.tsx
index 760549f05..dcabb139d 100644
--- a/src/common/component/SupportingText/SupportingText.tsx
+++ b/packages/ui/src/SupportingText/SupportingText.tsx
@@ -1,8 +1,8 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from "react";
-import { textStyle } from '@/common/component/SupportingText/SupportingText.style';
+import { textStyle } from "@/SupportingText/SupportingText.style";
-interface SupportingTextProps extends ComponentPropsWithoutRef<'p'> {
+interface SupportingTextProps extends ComponentPropsWithoutRef<"p"> {
isError?: boolean;
isSuccess?: boolean;
}
diff --git a/packages/ui/src/Switch/Switch.style.ts b/packages/ui/src/Switch/Switch.style.ts
new file mode 100644
index 000000000..5fcad752a
--- /dev/null
+++ b/packages/ui/src/Switch/Switch.style.ts
@@ -0,0 +1,83 @@
+import { css } from "@emotion/react";
+
+import { IconProps } from "@/Switch/Switch";
+import { theme } from "@/theme";
+
+export const containerStyle = css({
+ display: "flex",
+});
+
+export const contentStyle = (side: "left" | "right", isClicked: boolean) => {
+ const sidePadding = isClicked ? 1 : 1.6;
+ const bgColor = isClicked ? theme.colors.gray_100 : theme.colors.white;
+
+ const style = {
+ display: "flex",
+ gap: "0.2rem",
+
+ padding: `0.8rem ${sidePadding}rem`,
+
+ width: "100%",
+
+ backgroundColor: bgColor,
+
+ borderTopLeftRadius: side === "left" ? "100px" : "none",
+ borderBottomLeftRadius: side === "left" ? "100px" : "none",
+ borderTopRightRadius: side === "right" ? "100px" : "none",
+ borderBottomRightRadius: side === "right" ? "100px" : "none",
+
+ border: `1px solid ${theme.colors.gray_200}`,
+ borderRight: side === "left" ? "none" : `1px solid ${theme.colors.gray_200}`,
+ };
+
+ const beforeStyle =
+ isClicked && side === "left"
+ ? {
+ content: '"✓"',
+
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+
+ width: "1.6rem",
+ height: "1.6rem",
+
+ fontSize: "18px",
+ color: theme.colors.gray_800,
+ }
+ : {};
+
+ const afterStyle =
+ isClicked && side === "right"
+ ? {
+ content: '"✓"',
+
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+
+ width: "1.6rem",
+ height: "1.6rem",
+
+ fontSize: "18px",
+ color: theme.colors.gray_800,
+ }
+ : {};
+
+ return {
+ ...style,
+ ...(beforeStyle && { "::before": beforeStyle }),
+ ...(afterStyle && { "::after": afterStyle }),
+ };
+};
+
+export const iconStyle = (isClicked: boolean, mode: IconProps["mode"]) =>
+ css(
+ { width: "1.6rem", height: "1.6rem" },
+ isClicked && {
+ "& > path": {
+ fill: mode === "fill" ? theme.colors.gray_800 : "",
+ stroke: mode === "stroke" ? theme.colors.gray_800 : "",
+ },
+ },
+ );
diff --git a/packages/ui/src/Switch/Switch.tsx b/packages/ui/src/Switch/Switch.tsx
new file mode 100644
index 000000000..76308f264
--- /dev/null
+++ b/packages/ui/src/Switch/Switch.tsx
@@ -0,0 +1,40 @@
+import { ComponentPropsWithRef, FunctionComponent, SVGProps } from "react";
+
+import { containerStyle, contentStyle, iconStyle } from "@/Switch/Switch.style";
+
+export type IconProps = {
+ Icon: FunctionComponent>;
+ mode: "fill" | "stroke";
+};
+
+export interface SwitchProps extends Omit, "onClick"> {
+ status: "left" | "right";
+ LeftIcon: IconProps;
+ RightIcon: IconProps;
+ onSwitchChange: (status: "left" | "right") => void;
+}
+
+const Switch = ({ status = "left", LeftIcon, onSwitchChange, RightIcon }: SwitchProps) => {
+ return (
+ ["variant"]) => {
+ const style = {
+ round: css({
+ gap: "0.8rem",
+
+ padding: "1.6rem 2rem",
+
+ ...theme.text.body06,
+ fontWeight: 500,
+
+ border: "none",
+ borderRadius: "8px",
+ }),
+ };
+ return style[variant];
+};
+
+export const tabActiveStyle = (isSelected: boolean, variant: Required["variant"]) => {
+ const style = {
+ round: isSelected
+ ? css({
+ backgroundColor: theme.colors.gray_100,
+
+ color: theme.colors.black,
+ fontWeight: "600",
+
+ pointerEvents: "none",
+ })
+ : css({
+ backgroundColor: theme.colors.white,
+
+ color: theme.colors.gray_800,
+ fontWeight: "500",
+ }),
+ };
+ return style[variant];
+};
diff --git a/src/common/component/Tag/Tag.style.ts b/packages/ui/src/Tag/Tag.style.ts
similarity index 54%
rename from src/common/component/Tag/Tag.style.ts
rename to packages/ui/src/Tag/Tag.style.ts
index 30e1eb6d1..0ef5a8815 100644
--- a/src/common/component/Tag/Tag.style.ts
+++ b/packages/ui/src/Tag/Tag.style.ts
@@ -1,7 +1,7 @@
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
-import { TagProps } from '@/common/component/Tag/Tag';
-import { theme } from '@/common/style/theme/theme';
+import { TagProps } from "@/Tag/Tag";
+import { theme } from "@/theme";
export const commonStyle = () =>
css({
@@ -10,20 +10,20 @@ export const commonStyle = () =>
...theme.text.body08,
});
-export const tagStyle = ({ variant, color, bgColor }: Required>) => {
+export const tagStyle = ({ variant, color, bgColor }: Required>) => {
const style = {
round: css({
- padding: '0.4rem 0.8rem',
+ padding: "0.4rem 0.8rem",
- borderRadius: '1rem',
+ borderRadius: "1rem",
color: color,
backgroundColor: bgColor,
}),
square: css({
- padding: '0.8rem',
+ padding: "0.8rem",
- borderRadius: '0.4rem',
+ borderRadius: "0.4rem",
color: color,
backgroundColor: bgColor,
diff --git a/packages/ui/src/Tag/Tag.tsx b/packages/ui/src/Tag/Tag.tsx
new file mode 100644
index 000000000..e9d7fde5c
--- /dev/null
+++ b/packages/ui/src/Tag/Tag.tsx
@@ -0,0 +1,19 @@
+import { ComponentPropsWithRef } from "react";
+
+import { commonStyle, tagStyle } from "@/Tag/Tag.style";
+
+export interface TagProps extends ComponentPropsWithRef<"div"> {
+ variant?: "round" | "square";
+ color?: string;
+ bgColor?: string;
+}
+
+const Tag = ({ variant = "round", color = "#FFFFFF", bgColor = "#909090", children, ...props }: TagProps) => {
+ return (
+ ['tag']) => {
+export const textStyle = (tag: Required["tag"]) => {
const style = {
body1: css({
fontSize: theme.text.body01.fontSize,
diff --git a/src/common/component/Text/Text.tsx b/packages/ui/src/Text/Text.tsx
similarity index 100%
rename from src/common/component/Text/Text.tsx
rename to packages/ui/src/Text/Text.tsx
diff --git a/packages/ui/src/Toast/Toast.style.ts b/packages/ui/src/Toast/Toast.style.ts
new file mode 100644
index 000000000..8a7a96414
--- /dev/null
+++ b/packages/ui/src/Toast/Toast.style.ts
@@ -0,0 +1,28 @@
+import { css } from "@emotion/react";
+
+import { fadeIn, fadeOut, moveUp } from "@/animation";
+import { theme } from "@/theme";
+
+export const containerStyle = (isShown: boolean) =>
+ css({
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ gap: "0.6rem",
+
+ padding: "1rem 2rem",
+
+ borderRadius: "24px",
+ color: theme.colors.white,
+ backgroundColor: "rgba(44, 48, 48, 0.8)",
+
+ fontSize: theme.text.body06.fontSize,
+ lineHeight: theme.text.body06.lineHeight,
+
+ animation: isShown ? `${moveUp} 0.2s ease-in, ${fadeIn} .2s ease-in` : `${fadeOut} .2s ease-in forwards`,
+
+ "& > svg": {
+ width: "2rem",
+ height: "2rem",
+ },
+ });
diff --git a/src/common/component/Toast/Toast.tsx b/packages/ui/src/Toast/Toast.tsx
similarity index 65%
rename from src/common/component/Toast/Toast.tsx
rename to packages/ui/src/Toast/Toast.tsx
index 88e9169f4..6814f154a 100644
--- a/src/common/component/Toast/Toast.tsx
+++ b/packages/ui/src/Toast/Toast.tsx
@@ -1,15 +1,13 @@
/* eslint-disable react-hooks/exhaustive-deps */
-import { ComponentPropsWithoutRef, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { ComponentPropsWithoutRef, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
-import IcCaution from '@/common/asset/svg/ic_caution.svg?react';
-import IcSuccess from '@/common/asset/svg/ic_success.svg?react';
-import { containerStyle } from '@/common/component/Toast/Toast.style';
+import { containerStyle } from "@/Toast/Toast.style";
+import { Timeout } from "@/types";
+import { IcCaution, IcSuccess } from "@tiki/icon";
-import { Timeout } from '@/shared/type/time';
-
-export interface ToastProps extends ComponentPropsWithoutRef<'div'> {
- variant?: 'error' | 'success' | 'default';
+export interface ToastProps extends ComponentPropsWithoutRef<"div"> {
+ variant?: "error" | "success" | "default";
showDuration?: number;
onClose?: () => void;
}
@@ -22,8 +20,8 @@ const Toast = ({ variant, children, showDuration = 3000, onClose, ...props }: To
const hideRef = useRef();
const Icon = () => {
- if (variant === 'error') return
,
- document.getElementById('toast-container') as Element
+ document.getElementById("toast-container") as Element,
)
);
};
diff --git a/packages/ui/src/ToastContainer/ToastContainer.style.ts b/packages/ui/src/ToastContainer/ToastContainer.style.ts
new file mode 100644
index 000000000..2dd0a8cba
--- /dev/null
+++ b/packages/ui/src/ToastContainer/ToastContainer.style.ts
@@ -0,0 +1,18 @@
+import { css } from "@emotion/react";
+
+import { theme } from "@/theme";
+
+export const containerStyle = css({
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ alignItems: "center",
+ gap: "1.6rem",
+
+ position: "fixed",
+ bottom: "4rem",
+
+ width: "100%",
+
+ zIndex: theme.zIndex.overlayTop,
+});
diff --git a/src/common/component/ToastContainer/ToastContainer.tsx b/packages/ui/src/ToastContainer/ToastContainer.tsx
similarity index 55%
rename from src/common/component/ToastContainer/ToastContainer.tsx
rename to packages/ui/src/ToastContainer/ToastContainer.tsx
index 7d98875fc..d4e73d708 100644
--- a/src/common/component/ToastContainer/ToastContainer.tsx
+++ b/packages/ui/src/ToastContainer/ToastContainer.tsx
@@ -1,4 +1,4 @@
-import { containerStyle } from '@/common/component/ToastContainer/ToastContainer.style';
+import { containerStyle } from "@/ToastContainer/ToastContainer.style";
const ToastContainer = () => ;
diff --git a/src/common/component/ToastContainer/ToastProvider.tsx b/packages/ui/src/ToastContainer/ToastProvider.tsx
similarity index 74%
rename from src/common/component/ToastContainer/ToastProvider.tsx
rename to packages/ui/src/ToastContainer/ToastProvider.tsx
index a1ff714d0..16bcef722 100644
--- a/src/common/component/ToastContainer/ToastProvider.tsx
+++ b/packages/ui/src/ToastContainer/ToastProvider.tsx
@@ -1,6 +1,6 @@
-import Toast from '@/common/component/Toast/Toast';
+import Toast from "@/Toast/Toast";
-import { useToastAction, useToastList } from '@/shared/store/toast';
+import { useToastAction, useToastList } from "@tiki/utils";
const ToastFactory = () => {
const toastList = useToastList();
diff --git a/src/common/component/ToolTip/ToolTip.style.ts b/packages/ui/src/ToolTip/ToolTip.style.ts
similarity index 56%
rename from src/common/component/ToolTip/ToolTip.style.ts
rename to packages/ui/src/ToolTip/ToolTip.style.ts
index 7d20a03ac..cf92ad2ef 100644
--- a/src/common/component/ToolTip/ToolTip.style.ts
+++ b/packages/ui/src/ToolTip/ToolTip.style.ts
@@ -1,52 +1,52 @@
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
-import { ToolTipProps } from '@/common/component/ToolTip/ToolTip';
-import { theme } from '@/common/style/theme/theme';
+import { ToolTipProps } from "@/ToolTip/ToolTip";
+import { theme } from "@/theme";
export const containerStyle = css({
- display: 'inline-block',
- position: 'relative',
+ display: "inline-block",
+ position: "relative",
});
export const messageStyle = (isVisible: boolean) =>
css({
- position: 'absolute',
+ position: "absolute",
- width: 'max-content',
- padding: '1rem',
- borderRadius: '8px',
+ width: "max-content",
+ padding: "1rem",
+ borderRadius: "8px",
backgroundColor: `${theme.colors.gray_900}`,
font: `${theme.text.body08}`,
color: `${theme.colors.white}`,
- visibility: isVisible ? 'visible' : 'hidden',
+ visibility: isVisible ? "visible" : "hidden",
- transitionDelay: isVisible ? '0.2s' : '0',
+ transitionDelay: isVisible ? "0.2s" : "0",
- pointerEvents: 'none',
+ pointerEvents: "none",
});
-export const positionStyle = (position: Required
{children}
);
diff --git a/packages/ui/src/Menu/MenuItem/MenuItem.style.ts b/packages/ui/src/Menu/MenuItem/MenuItem.style.ts
new file mode 100644
index 000000000..a7cd4ed86
--- /dev/null
+++ b/packages/ui/src/Menu/MenuItem/MenuItem.style.ts
@@ -0,0 +1,24 @@
+import { css } from "@emotion/react";
+
+import { theme } from "@/theme";
+
+export const containerStyle = css({
+ display: "flex",
+ alignItems: "center",
+ gap: "0.8rem",
+ padding: "0.8rem 0.4rem 0.8rem 0.8rem ",
+
+ borderRadius: "8px",
+ backgroundColor: theme.colors.white,
+
+ ...theme.text.body08,
+ color: theme.colors.black,
+
+ whiteSpace: "nowrap",
+ cursor: "pointer",
+
+ ":hover, :focus": {
+ outline: theme.colors.gray_100,
+ backgroundColor: theme.colors.gray_100,
+ },
+});
diff --git a/src/common/component/Menu/MenuItem/MenuItem.tsx b/packages/ui/src/Menu/MenuItem/MenuItem.tsx
similarity index 74%
rename from src/common/component/Menu/MenuItem/MenuItem.tsx
rename to packages/ui/src/Menu/MenuItem/MenuItem.tsx
index 7c444ebe2..e9cdb004f 100644
--- a/src/common/component/Menu/MenuItem/MenuItem.tsx
+++ b/packages/ui/src/Menu/MenuItem/MenuItem.tsx
@@ -1,6 +1,6 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from "react";
-import { containerStyle } from '@/common/component/Menu/MenuItem/MenuItem.style';
+import { containerStyle } from "@/Menu/MenuItem/MenuItem.style";
export interface MenuItemProps extends HTMLAttributes{item.value} - {hasKeyInObject(item, 'description') && {item.description}} + {hasKeyInObject(item, "description") && {item.description}}
- {hasKeyInObject(item, 'svg') && item.svg} -
+
+
+
+ );
+};
+
+export default Switch;
diff --git a/src/common/component/Tab/TabButton.tsx b/packages/ui/src/Tab/TabButton.tsx
similarity index 77%
rename from src/common/component/Tab/TabButton.tsx
rename to packages/ui/src/Tab/TabButton.tsx
index 2da710663..35e0dfb9c 100644
--- a/src/common/component/Tab/TabButton.tsx
+++ b/packages/ui/src/Tab/TabButton.tsx
@@ -1,12 +1,12 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from "react";
-import { tabActiveStyle, tabDefaultStyle, tabVariantStyle } from '@/common/component/Tab/style';
+import { tabActiveStyle, tabDefaultStyle, tabVariantStyle } from "@/Tab/style";
-export interface TabProps extends ComponentPropsWithoutRef<'li'> {
+export interface TabProps extends ComponentPropsWithoutRef<"li"> {
tabId?: number;
isSelected?: boolean;
onTabClick?: (tabId: number) => void;
- variant?: 'round';
+ variant?: "round";
}
const TabButton = ({
@@ -14,7 +14,7 @@ const TabButton = ({
children,
isSelected = false,
onTabClick = () => {},
- variant = 'round',
+ variant = "round",
...props
}: TabProps) => {
const handleTabInteraction = () => {
@@ -31,7 +31,8 @@ const TabButton = ({
onClick={handleTabInteraction}
onKeyDown={handleTabInteraction}
css={[tabDefaultStyle, tabVariantStyle(variant), tabActiveStyle(isSelected, variant)]}
- {...props}>
+ {...props}
+ >
{children}
);
diff --git a/src/common/component/Tab/TabList.tsx b/packages/ui/src/Tab/TabList.tsx
similarity index 80%
rename from src/common/component/Tab/TabList.tsx
rename to packages/ui/src/Tab/TabList.tsx
index ed364ec11..2e61d4c53 100644
--- a/src/common/component/Tab/TabList.tsx
+++ b/packages/ui/src/Tab/TabList.tsx
@@ -1,9 +1,9 @@
/* eslint-disable import/no-named-as-default-member */
-import React, { ComponentPropsWithoutRef, ReactElement, cloneElement } from 'react';
+import React, { ComponentPropsWithoutRef, ReactElement, cloneElement } from "react";
-import { tabListStyle } from '@/common/component/Tab/style';
+import { tabListStyle } from "@/Tab/style";
-interface TabListProps extends ComponentPropsWithoutRef<'ul'> {
+interface TabListProps extends ComponentPropsWithoutRef<"ul"> {
selectedTab: number;
onTabClick: (tabId: number) => void;
}
@@ -17,7 +17,7 @@ const TabList = ({ children, selectedTab, onTabClick, ...props }: TabListProps)
tabId: index,
isSelected: selectedTab === index,
onTabClick: onTabClick,
- })
+ }),
)}
diff --git a/src/common/component/Tab/TabPanel.tsx b/packages/ui/src/Tab/TabPanel.tsx
similarity index 100%
rename from src/common/component/Tab/TabPanel.tsx
rename to packages/ui/src/Tab/TabPanel.tsx
diff --git a/src/common/component/Tab/Tabs.tsx b/packages/ui/src/Tab/Tabs.tsx
similarity index 100%
rename from src/common/component/Tab/Tabs.tsx
rename to packages/ui/src/Tab/Tabs.tsx
diff --git a/packages/ui/src/Tab/index.tsx b/packages/ui/src/Tab/index.tsx
new file mode 100644
index 000000000..ee9f00800
--- /dev/null
+++ b/packages/ui/src/Tab/index.tsx
@@ -0,0 +1,4 @@
+export { default as TabButton } from "./TabButton";
+export { default as TabList } from "./TabList";
+export { default as TabPanel } from "./TabPanel";
+export { default as TabRoot } from "./Tabs";
diff --git a/packages/ui/src/Tab/style.ts b/packages/ui/src/Tab/style.ts
new file mode 100644
index 000000000..977733272
--- /dev/null
+++ b/packages/ui/src/Tab/style.ts
@@ -0,0 +1,59 @@
+import { css } from "@emotion/react";
+
+import { TabProps } from "@/Tab/TabButton";
+import { theme } from "@/theme";
+
+export const tabListStyle = css({
+ display: "flex",
+});
+
+export const tabDefaultStyle = () =>
+ css({
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+
+ width: "100%",
+
+ whiteSpace: "nowrap",
+
+ cursor: "pointer",
+ });
+
+export const tabVariantStyle = (variant: Required
+ {children}
+
+ );
+};
+
+export default Tag;
diff --git a/src/common/component/Text/Text.style.ts b/packages/ui/src/Text/Text.style.ts
similarity index 86%
rename from src/common/component/Text/Text.style.ts
rename to packages/ui/src/Text/Text.style.ts
index 7d544b748..7a5840191 100644
--- a/src/common/component/Text/Text.style.ts
+++ b/packages/ui/src/Text/Text.style.ts
@@ -1,10 +1,10 @@
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
-import { theme } from '@/common/style/theme/theme';
+import { theme } from "@/theme";
-import { TextProps } from './Text';
+import { TextProps } from "./Text";
-export const textStyle = (tag: Required; -}; - -export default Divider; diff --git a/src/common/component/Dropdown/Dropdown.style.ts b/src/common/component/Dropdown/Dropdown.style.ts deleted file mode 100644 index 3bcd3ce31..000000000 --- a/src/common/component/Dropdown/Dropdown.style.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { css } from '@emotion/react'; - -import { theme } from '@/common/style/theme/theme'; - -export const containerStyle = css({ - display: 'flex', - flexDirection: 'column', - gap: '0.4rem', - - position: 'relative', -}); - -export const listStyle = css({ - position: 'absolute', - top: '100%', - - minWidth: '100%', - width: 'max-content', - - zIndex: theme.zIndex.overlayHigh, - - backgroundColor: theme.colors.white, -}); - -export const itemStyle = css({ - cursor: 'pointer', -}); diff --git a/src/common/component/Dropdown/index.tsx b/src/common/component/Dropdown/index.tsx deleted file mode 100644 index 619137efa..000000000 --- a/src/common/component/Dropdown/index.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import DropdownContainer from '@/common/component/Dropdown/Dropdown'; -import DropdownItem from '@/common/component/Dropdown/DropdownItem'; -import DropdownList from '@/common/component/Dropdown/DropdownList'; -import DropdownTrigger from '@/common/component/Dropdown/DropdownTrigger'; - -export const Dropdown = Object.assign(DropdownContainer, { - List: DropdownList, - Item: DropdownItem, - Trigger: DropdownTrigger, -}); diff --git a/src/common/component/Header/Header.style.ts b/src/common/component/Header/Header.style.ts deleted file mode 100644 index aef3580bd..000000000 --- a/src/common/component/Header/Header.style.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { css } from '@emotion/react'; - -import { theme } from '@/common/style/theme/theme'; - -export const headerStyle = css({ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - borderTopLeftRadius: '16px', - borderTopRightRadius: '16px', - - zIndex: theme.zIndex.overlayMiddle, - - height: '9rem', - //width: '100%', - //position: 'absolute', - - padding: '2.4rem 8rem 2.4rem 8rem', - - backgroundColor: theme.colors.white, - '& > svg': { - width: '10rem', - height: '4rem', - - cursor: 'pointer', - }, -}); diff --git a/src/common/component/Header/Header.tsx b/src/common/component/Header/Header.tsx deleted file mode 100644 index f3af3bd00..000000000 --- a/src/common/component/Header/Header.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useLocation, useNavigate } from 'react-router-dom'; - -import Logo from '@/common/asset/svg/logo_tiki_md.svg?react'; - -import { useIsLoggedIn } from '@/shared/store/auth'; - -import Button from '../Button/Button'; -import { headerStyle } from './Header.style'; - -const Header = () => { - const { pathname } = useLocation(); - - const isLoggedIn = useIsLoggedIn(); - - const navigate = useNavigate(); - - const regexp = new RegExp('^(/signin(/.*)?|/password(/.*)?)$'); - const isAuthPage = pathname.match(regexp); - - if (!isAuthPage) { - return ( -
- {isLoggedIn ? (
-
- ) : (
-
- )}
-
-
-
-
-
- );
-};
-
-export default Switch;
diff --git a/src/common/component/Tab/index.tsx b/src/common/component/Tab/index.tsx
deleted file mode 100644
index 54e572cce..000000000
--- a/src/common/component/Tab/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import TabButton from '@/common/component/Tab/TabButton';
-import TabList from '@/common/component/Tab/TabList';
-import TabPanel from '@/common/component/Tab/TabPanel';
-import TabContainer from '@/common/component/Tab/Tabs';
-
-export const Tab = Object.assign(TabContainer, { Button: TabButton, List: TabList, Panel: TabPanel });
diff --git a/src/common/component/Tab/style.ts b/src/common/component/Tab/style.ts
deleted file mode 100644
index 5c7fb9f9d..000000000
--- a/src/common/component/Tab/style.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { css } from '@emotion/react';
-
-import { TabProps } from '@/common/component/Tab/TabButton';
-import { theme } from '@/common/style/theme/theme';
-
-export const tabListStyle = css({
- display: 'flex',
-});
-
-export const tabDefaultStyle = () =>
- css({
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
-
- width: '100%',
-
- whiteSpace: 'nowrap',
-
- cursor: 'pointer',
- });
-
-export const tabVariantStyle = (variant: Required
- {children}
-
- );
-};
-
-export default Tag;
diff --git a/src/common/component/Toast/Toast.style.ts b/src/common/component/Toast/Toast.style.ts
deleted file mode 100644
index 44ed35a78..000000000
--- a/src/common/component/Toast/Toast.style.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { css } from '@emotion/react';
-
-import { fadeIn, fadeOut, moveUp } from '@/common/style/animation';
-import { theme } from '@/common/style/theme/theme';
-
-export const containerStyle = (isShown: boolean) =>
- css({
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- gap: '0.6rem',
-
- padding: '1rem 2rem',
-
- borderRadius: '24px',
- color: theme.colors.white,
- backgroundColor: 'rgba(44, 48, 48, 0.8)',
-
- fontSize: theme.text.body06.fontSize,
- lineHeight: theme.text.body06.lineHeight,
-
- animation: isShown ? `${moveUp} 0.2s ease-in, ${fadeIn} .2s ease-in` : `${fadeOut} .2s ease-in forwards`,
-
- '& > svg': {
- width: '2rem',
- height: '2rem',
- },
- });
diff --git a/src/common/component/ToastContainer/ToastContainer.style.ts b/src/common/component/ToastContainer/ToastContainer.style.ts
deleted file mode 100644
index 3419b299a..000000000
--- a/src/common/component/ToastContainer/ToastContainer.style.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { css } from '@emotion/react';
-
-import { theme } from '@/common/style/theme/theme';
-
-export const containerStyle = css({
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'center',
- alignItems: 'center',
- gap: '1.6rem',
-
- position: 'fixed',
- bottom: '4rem',
-
- width: '100%',
-
- zIndex: theme.zIndex.overlayTop,
-});
diff --git a/src/common/hook/index.ts b/src/common/hook/index.ts
deleted file mode 100644
index d0444d134..000000000
--- a/src/common/hook/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './useDebounce';
-export * from './useError';
-export * from './useInput';
-export * from './useModal';
-export * from './useObserver';
-export * from './useOutsideClick';
-export * from './useOverlay';
-export * from './usePreventGoBack';
-export * from './useTimer';
diff --git a/src/common/style/scroll.ts b/src/common/style/scroll.ts
deleted file mode 100644
index 228419feb..000000000
--- a/src/common/style/scroll.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { css } from '@emotion/react';
-
-import { theme } from '@/common/style/theme/theme';
-
-export const scrollStyle = css`
- ::-webkit-scrollbar {
- width: 0.8rem;
- height: 0.8rem;
- }
- ::-webkit-scrollbar-thumb {
- background: ${theme.colors.gray_300};
- border-radius: 10rem;
- }
-`;
diff --git a/src/common/style/theme/theme.ts b/src/common/style/theme/theme.ts
deleted file mode 100644
index ebdaff198..000000000
--- a/src/common/style/theme/theme.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-const colors = {
- black: '#0E121B',
- black_shade: 'linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%)',
- dimmed: 'rgba(0, 0, 0, 0.40)',
-
- gray_900: '#323A4C',
- gray_800: '#525866',
- gray_700: '#6B6B6B',
- gray_600: '#909090',
- gray_500: '#99A1B2',
- gray_400: '#CCD1DD',
- gray_300: '#DFE1E8',
- gray_200: '#ECECF1',
- gray_100: '#F8F8FB',
-
- white: '#FFFFFF',
-
- key_600: '#444EE4',
- key_500: '#6D77FF',
- key_400: '#99ACFF',
- key_300: '#B9C7FF',
- key_200: '#E3E8FF',
- key_100: '#F3F5FF',
-
- sementic_red: '#FE4F60',
- sementic_success: '#1FC16B',
-
- red_200: '#EB736D',
- red_100: '#FFE6E8',
-
- yellow_200: '#F19234',
- yellow_100: '#F8E2CB',
-
- green_200: '#49B078',
- green_100: '#C4F2E5',
-
- purple_200: '#856ECF',
- purple_100: '#DCD8FA',
-
- blue_200: '#607AD4',
- blue_100: '#E2E8F8',
-
- pink_200: '#F175C0',
- pink_100: '#F8E1F5',
-
- sky_200: '#48ABD2',
- sky_100: '#D3EFFA',
-};
-
-export type ColorsTypes = typeof colors;
-
-const heading = {
- heading01: {
- fontSize: '4rem',
- lineHeight: '4rem',
- },
- heading02: {
- fontSize: '3.2rem',
- lineHeight: '3.2rem',
- },
- heading03: {
- fontSize: '2.8rem',
- lineHeight: '2.8rem',
- },
- heading04: {
- fontSize: '2.4rem',
- lineHeight: '2.4rem',
- },
- heading05: {
- fontSize: '2rem',
- lineHeight: '2rem',
- },
- heading06: {
- fontSize: '1.6rem',
- lineHeight: '1.6rem',
- },
-} as const;
-
-const text = {
- body01: {
- fontSize: '2.4rem',
- lineHeight: '2.4rem',
- },
- body02: {
- fontSize: '2.4rem',
- lineHeight: '3.36rem',
- },
- body03: {
- fontSize: '2rem',
- lineHeight: '2rem',
- },
- body04: {
- fontSize: '1.6rem',
- lineHeight: '1.6rem',
- },
- body05: {
- fontSize: '1.6rem',
- lineHeight: '2.24rem',
- },
- body06: {
- fontSize: '1.4rem',
- lineHeight: '1.4rem',
- },
- body07: {
- fontSize: '1.4rem',
- lineHeight: '1.68rem',
- },
- body08: {
- fontSize: '1.2rem',
- lineHeight: '1.2rem',
- },
- body09: {
- fontSize: '1.2rem',
- lineHeight: '1.68rem',
- },
- body10: {
- fontSize: '1rem',
- lineHeight: '1rem',
- },
-} as const;
-
-const zIndex = {
- overlayTop: 4,
- overlayHigh: 3,
- overlayMiddle: 2,
- overlayBottom: 1,
-} as const;
-
-const shadow = {
- inset: `inset 0 0 0 1px ${colors.gray_300}`,
- inset_focus: `inset 0 0 0 1px ${colors.key_500}`,
- shadow01: '0px 2px 8px 0px rgba(99, 99, 99, 0.2)', // 6
- shadow02: '0px 4px 10px rgba(0, 0, 0, 0.1)',
- shadow03: '0px 3px 8px rgba(0, 0, 0, 0.24)', // 5
- shadow04: 'rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px', // 12
- shadow05: 'rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px',
-};
-
-export const theme = {
- colors,
- heading,
- text,
- zIndex,
- shadow,
-};
diff --git a/src/common/type/design.ts b/src/common/type/design.ts
deleted file mode 100644
index 40db4b6dd..000000000
--- a/src/common/type/design.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Size = 'xxSmall' | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge';
diff --git a/src/page/archiving/index/component/TimeBlockModal/constant/iconBlock.tsx b/src/page/archiving/index/component/TimeBlockModal/constant/iconBlock.tsx
deleted file mode 100644
index ea03ef68b..000000000
--- a/src/page/archiving/index/component/TimeBlockModal/constant/iconBlock.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ReactNode } from 'react';
-
-import Accounting from '@/common/asset/svg/ic_accounting.svg?react';
-import Event from '@/common/asset/svg/ic_event.svg?react';
-import Meeting from '@/common/asset/svg/ic_meeting.svg?react';
-import Notice from '@/common/asset/svg/ic_notice.svg?react';
-import Study from '@/common/asset/svg/ic_study.svg?react';
-import Task from '@/common/asset/svg/ic_task.svg?react';
-
-type BlockIconType = {
- name: string;
- icon: ReactNode;
-};
-
-export const BLOCK_ICON: BlockIconType[] = [
- {
- name: 'MEETING',
- icon:
-
- ),
- ],
- tags: ['autodocs'],
-} satisfies Meta