Merge branch 'develop' into feature/deleted/#318-publishing

Team-Tiki · Nov 17, 2024 · d1986a2 · d1986a2
2 parents 314d012 + 6efb7bc
commit d1986a2
Show file tree

Hide file tree

Showing 124 changed files with 2,375 additions and 1,086 deletions.
diff --git a/package.json b/package.json
@@ -1,18 +1,18 @@
 {
   "name": "tiki-client",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
+    "build-storybook": "storybook build",
+    "check": "concurrently \"pnpm lint\" \"pnpm typeCheck\"",
+    "chromatic": "npx chromatic --project-token=chpt_f4088febbfb82b7",
+    "dev": "vite",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_f4088febbfb82b7",
-    "typeCheck": "tsc --noEmit",
-    "check": "concurrently \"pnpm lint\" \"pnpm typeCheck\""
+    "typeCheck": "tsc --noEmit"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
@@ -53,7 +53,7 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "chromatic": "^11.5.4",
     "concurrently": "^9.0.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/common/asset/svg/ic_calendar_ver2.svg b/src/common/asset/svg/ic_calendar_ver2.svg
diff --git a/src/common/asset/svg/ic_delete_file.svg b/src/common/asset/svg/ic_delete_file.svg
diff --git a/src/common/asset/svg/ic_file_round.svg b/src/common/asset/svg/ic_file_round.svg
diff --git a/src/common/asset/svg/ic_note.svg b/src/common/asset/svg/ic_note.svg
diff --git a/src/common/asset/svg/logo_tiki_md.svg b/src/common/asset/svg/logo_tiki_md.svg
diff --git a/src/common/component/Button/Button.style.ts b/src/common/component/Button/Button.style.ts
@@ -63,10 +63,15 @@ export const variantStyle = (variant: Required<ButtonProps>['variant']) => {
         backgroundColor: theme.colors.gray_100,
       },
     }),
-    underline: css({
+    text: css({
+      padding: 0,
+
       color: theme.colors.gray_800,
       backgroundColor: 'transparent',
 
+      fontWeight: 400,
+      ...theme.text.body06,
+
       '&:hover': {
         textDecoration: 'underline',
       },

diff --git a/src/common/component/Button/Button.tsx b/src/common/component/Button/Button.tsx
@@ -5,7 +5,7 @@ import { Size } from '@/common/type/design';
 import { buttonStyle, sizeStyle, variantStyle } from './Button.style';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'underline';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'text';
   size?: Extract<Size, 'xLarge' | 'large' | 'medium' | 'small' | 'xSmall'>;
 }
 

diff --git a/src/common/component/Carousel/Carousel.style.ts b/src/common/component/Carousel/Carousel.style.ts
@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 
 import { CarouselProps } from '@/common/component/Carousel/Carousel';
-import { theme } from '@/common/style/theme/theme';
 
 export const itemStyle = (height: string) =>
   css({
@@ -68,8 +67,6 @@ export const arrowStyle = (position: 'left' | 'right') =>
     width: '3.2rem',
     height: '3.2rem',
 
-    zIndex: theme.zIndex.overlayBottom,
-
     border: 'none',
     borderRadius: '16px',
 

diff --git a/src/common/component/CommandButton/CommandButton.style.ts b/src/common/component/CommandButton/CommandButton.style.ts
@@ -1,6 +1,7 @@
 import { css } from '@emotion/react';
 
 import { ButtonProps } from '@/common/component/Button/Button';
+import { CommandButtonProps } from '@/common/component/CommandButton/CommandButton';
 import { theme } from '@/common/style/theme/theme';
 
 export const buttonStyle = (isFrontIcon: boolean) =>
@@ -76,3 +77,21 @@ export const childrenStyle = css({
 
   gap: '0.4rem',
 });
+
+export const sizeStyle = (size: Required<CommandButtonProps>['size']) => {
+  const style = {
+    /** Button_40 */
+    large: css({
+      padding: '1.1rem 1.0rem 1.1rem 1.4rem',
+
+      ...theme.text.body08,
+    }),
+    /** Button_32 */
+    small: css({
+      padding: '0.6rem 1.4rem',
+
+      ...theme.text.body08,
+    }),
+  };
+  return style[size];
+};
diff --git a/src/common/component/CommandButton/CommandButton.tsx b/src/common/component/CommandButton/CommandButton.tsx
@@ -2,15 +2,16 @@ import { SyntheticEvent } from 'react';
 
 import CommandKey from '@/common/asset/svg/ic_command_key.svg?react';
 import { ButtonProps } from '@/common/component/Button/Button';
-import { sizeStyle, variantStyle } from '@/common/component/Button/Button.style';
+import { variantStyle } from '@/common/component/Button/Button.style';
 import {
   buttonStyle,
   childrenStyle,
   commonStyle,
   keyStyle,
+  sizeStyle,
 } from '@/common/component/CommandButton/CommandButton.style';
 
-interface CommandButtonProps extends ButtonProps {
+export interface CommandButtonProps extends ButtonProps {
   variant?: Extract<ButtonProps['variant'], 'primary' | 'tertiary' | 'outline'>;
   size?: Extract<ButtonProps['size'], 'large' | 'small'>;
   commandKey: string;
@@ -21,7 +22,7 @@ interface CommandButtonProps extends ButtonProps {
 
 const CommandButton = ({
   variant = 'primary',
-  size = 'large',
+  size = 'small',
   commandKey,
   isCommand = true,
   isFrontIcon = false,

diff --git a/src/common/component/CountedInput/CountedInput.tsx b/src/common/component/CountedInput/CountedInput.tsx
@@ -39,7 +39,7 @@ const CountedInput = (
         <span css={countTextStyle}>{`${count}/${maxLength}`}</span>
       </div>
       {supportingText && (
-        <SupportingText isError={isError} isNotice={isSuccess}>
+        <SupportingText isError={isError} isSuccess={isSuccess}>
           {supportingText}
         </SupportingText>
       )}

diff --git a/src/common/component/DatePicker/Calendar/Calendar.style.ts b/src/common/component/DatePicker/Calendar/Calendar.style.ts
@@ -25,6 +25,8 @@ export const containerStyle = css({
 
   width: '25.6rem',
 
+  zIndex: theme.zIndex.overlayMiddle,
+
   padding: '1.6rem',
 
   border: `1px solid ${theme.colors.gray_300}`,

diff --git a/src/common/component/DatePicker/Trigger/DatePickerTrigger.tsx b/src/common/component/DatePicker/Trigger/DatePickerTrigger.tsx
@@ -4,24 +4,24 @@ import { textStyle } from '@/common/component/DatePicker/Trigger/DatePickerTrigg
 import Flex from '@/common/component/Flex/Flex';
 import Input from '@/common/component/Input/Input';
 import Text from '@/common/component/Text/Text';
+import { theme } from '@/common/style/theme/theme';
 
 interface DatePickerTriggerProps {
   selectedDate: Date | null;
   endDate?: Date | null;
   onClick: () => void;
-  width?: string;
   variant: 'single' | 'range';
 }
 
-const DatePickerTrigger = ({ selectedDate, endDate, onClick, width, variant }: DatePickerTriggerProps) => {
+const DatePickerTrigger = ({ selectedDate, endDate, onClick, variant }: DatePickerTriggerProps) => {
   return (
     <Flex styles={{ direction: 'row', align: 'center', gap: '0.4rem' }}>
       <Input
         value={selectedDate ? format(selectedDate, 'yyyy.MM.dd') : ''}
         placeholder="YYYY.MM.DD"
         readOnly
         onClick={onClick}
-        css={{ cursor: 'pointer', width }}
+        css={{ cursor: 'pointer', width: '100%', ...theme.text.body08, '::placeholder': { ...theme.text.body08 } }}
       />
       {variant === 'range' && (
         <>
@@ -33,7 +33,7 @@ const DatePickerTrigger = ({ selectedDate, endDate, onClick, width, variant }: D
             placeholder="YYYY.MM.DD"
             readOnly
             onClick={onClick}
-            css={{ cursor: 'pointer', width }}
+            css={{ cursor: 'pointer', width: '100%', ...theme.text.body08, '::placeholder': { ...theme.text.body08 } }}
           />
         </>
       )}

diff --git a/src/common/component/DatePicker/index.style.ts b/src/common/component/DatePicker/index.style.ts
@@ -1,7 +1,11 @@
 import { css } from '@emotion/react';
 
-export const containerStyle = css({
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-});
+export const containerStyle = (width: string) =>
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '1.2rem',
+    position: 'relative',
+
+    width,
+  });
diff --git a/src/common/component/DatePicker/index.tsx b/src/common/component/DatePicker/index.tsx
@@ -1,16 +1,18 @@
 import DatePickerCalendar from '@/common/component/DatePicker/Calendar/DatePickerCalendar';
 import DatePickerTrigger from '@/common/component/DatePicker/Trigger/DatePickerTrigger';
 import { containerStyle } from '@/common/component/DatePicker/index.style';
+import Label from '@/common/component/Label/Label';
 import { useDatePicker } from '@/common/hook/useDatePicker';
 import { useOutsideClick } from '@/common/hook/useOutsideClick';
 import { useOverlay } from '@/common/hook/useOverlay';
 
 interface DatePickerProps {
+  label?: string;
   variant: 'single' | 'range';
   triggerWidth?: string;
 }
 
-const DatePicker = ({ variant, triggerWidth = '10.3rem' }: DatePickerProps) => {
+const DatePicker = ({ label, variant, triggerWidth = '10.3rem' }: DatePickerProps) => {
   const { isOpen, close, toggle } = useOverlay();
   const ref = useOutsideClick<HTMLDivElement>(close);
   const { selectedDate, endDate, handleSelectDate, clearDates } = useDatePicker(variant);
@@ -24,14 +26,9 @@ const DatePicker = ({ variant, triggerWidth = '10.3rem' }: DatePickerProps) => {
   };
 
   return (
-    <div ref={ref} css={containerStyle}>
-      <DatePickerTrigger
-        selectedDate={selectedDate}
-        endDate={endDate}
-        onClick={handleInputClick}
-        variant={variant}
-        width={triggerWidth}
-      />
+    <div ref={ref} css={containerStyle(triggerWidth)}>
+      {label && <Label id={label}>{label}</Label>}
+      <DatePickerTrigger selectedDate={selectedDate} endDate={endDate} onClick={handleInputClick} variant={variant} />
       {isOpen && (
         <DatePickerCalendar
           selectedDate={selectedDate || new Date()}

diff --git a/src/common/component/Flex/Flex.style.ts b/src/common/component/Flex/Flex.style.ts
@@ -49,6 +49,8 @@ export interface FlexStyle {
 
   width?: string;
   height?: string;
+  maxWidth?: string;
+  maxHeight?: string;
 
   margin?: string;
   marginRight?: string;
@@ -78,6 +80,8 @@ export const getFlexStyle = ({
   shrink = 0,
   width = '',
   height = '',
+  maxWidth = '',
+  maxHeight = '',
   margin = '0',
   marginRight = '',
   marginTop = '',
@@ -106,6 +110,8 @@ export const getFlexStyle = ({
     gap,
     width,
     height,
+    maxWidth,
+    maxHeight,
     margin,
     marginRight,
     marginLeft,

diff --git a/src/common/component/Input/Input.tsx b/src/common/component/Input/Input.tsx
@@ -25,7 +25,7 @@ const Input = (
         <input ref={ref} css={inputStyle} {...props} />
       </div>
       {supportingText && (
-        <SupportingText isError={isError} isNotice={isSuccess}>
+        <SupportingText isError={isError} isSuccess={isSuccess}>
           {supportingText}
         </SupportingText>
       )}

diff --git a/src/common/component/Modal/Modal.style.ts b/src/common/component/Modal/Modal.style.ts
@@ -22,11 +22,11 @@ export const dialogStyle = css({
   position: 'fixed',
   top: '50%',
   left: '50%',
-  width: '51.1rem',
 
   zIndex: theme.zIndex.overlayTop,
-  paddingTop: '4.8rem',
-  paddingBottom: '4.8rem',
+
+  padding: '3.2rem 2rem',
+
   borderRadius: '16px',
   border: 'none',
   outline: 'none',