[FE] 2차 스프린트 디자인 시스템 수정

HDesign/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haengdong-design",
-  "version": "0.1.3",
+  "version": "0.1.35",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -49,6 +49,7 @@
     "globals": "^15.8.0",
     "prettier": "3.3.2",
     "storybook": "^8.2.2",
+    "storybook-addon-react-router-v6": "^2.0.15",
     "ts-loader": "^9.5.1",
     "tsc-alias": "^1.8.10",
     "typescript": "^5.5.3",

HDesign/src/components/BillItem/BillItem.tsx

@@ -25,7 +25,7 @@ export const BillItem: React.FC<BillItemProps> = ({
           {name}
         </Text>
         <Text css={textStyle(theme)} size="body">
-          {price.toLocaleString('ko-kr')} 원
+          {price.toLocaleString('ko-kr')}원
         </Text>
       </Flex>
     </DragHandleItem>

HDesign/src/components/BottomSheet/BottomSheet.stories.tsx

@@ -14,19 +14,15 @@ const meta = {
     // layout: 'centered',
   },
   argTypes: {
-    fixedButtonVariants: {
+    fixedButtonProps: {
       description: '',
-      control: {type: 'select'},
-      options: ['', 'primary', 'secondary', 'tertiary'],
-    },
-    fixedButtonText: {
-      description: '',
-      control: {type: 'text'},
+      control: {type: 'object'},
     },
   },
   args: {
-    fixedButtonVariants: 'primary',
-    fixedButtonText: '하단 고정 버튼이에요',
+    fixedButtonProps: {
+      variants: 'primary',
+    },
   },
 } satisfies Meta<typeof BottomSheet>;
 
@@ -36,8 +32,10 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   args: {
-    fixedButtonVariants: 'primary',
-    fixedButtonText: '하단 고정 버튼이에요',
+    fixedButtonProps: {
+      variants: 'primary',
+      children: '하단 고정 버튼',
+    },
   },
   render: ({...args}) => {
     const [isOpened, setIsOpened] = useState(false);

HDesign/src/components/BottomSheet/BottomSheet.style.ts

@@ -16,7 +16,7 @@ export const dimmedLayerStyle = (theme: Theme) =>
 
 export const bottomSheetContainerStyle = (theme: Theme) =>
   css({
-    position: 'absolute',
+    position: 'fixed',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',

HDesign/src/components/BottomSheet/BottomSheet.tsx

@@ -2,23 +2,23 @@
 import {createPortal} from 'react-dom';
 
 import {BottomSheetProps} from '@components/BottomSheet/BottomSheet.type';
-import {useBottomSheet} from '@components/BottomSheet/useBottomSheet';
 import FixedButton from '@components/FixedButton/FixedButton';
 
 import {useTheme} from '@theme/HDesignProvider';
 
+import {useBottomSheet} from './useBottomSheet';
 import {bottomSheetContainerStyle, dimmedLayerStyle, indicatorStyle} from './BottomSheet.style';
 
 const BottomSheet: React.FC<BottomSheetProps> = ({
-  fixedButtonVariants = 'primary',
   isOpened = false,
   children,
-  fixedButtonText,
+  fixedButtonProps,
   ...props
 }: BottomSheetProps) => {
   const {theme} = useTheme();
   const {opened, handleClose} = useBottomSheet({isOpened, ...props});
 
+  // TODO: (@todari) : children 길이 길 때 overflow button에 안가리는 영역 처리
   return createPortal(
     <>
       {opened && (
@@ -27,9 +27,7 @@ const BottomSheet: React.FC<BottomSheetProps> = ({
           <div css={bottomSheetContainerStyle(theme)}>
             <div css={indicatorStyle(theme)} />
             {children}
-            {(fixedButtonVariants || fixedButtonText) && (
-              <FixedButton variants={fixedButtonVariants} children={fixedButtonText} />
-            )}
+            {fixedButtonProps && <FixedButton {...fixedButtonProps} />}
           </div>
         </>
       )}

HDesign/src/components/BottomSheet/BottomSheet.type.ts

@@ -4,6 +4,8 @@ import {ButtonVariants} from '@components/Button/Button.type';
 
 import {Theme} from '@theme/theme.type';
 
+import {FixedButtonProps} from '../FixedButton/FixedButton.type';
+
 export interface BottomSheetStyleProps {
   theme?: Theme;
 }
@@ -12,8 +14,7 @@ export interface BottomSheetCustomProps {
   isOpened?: boolean;
   onChangeOpen?: () => void;
   onChangeClose?: () => void;
-  fixedButtonVariants?: ButtonVariants;
-  fixedButtonText?: string;
+  fixedButtonProps?: FixedButtonProps;
 }
 
 export type BottomSheetOptionProps = BottomSheetStyleProps & BottomSheetCustomProps;

HDesign/src/components/BottomSheet/useBottomSheet.ts

@@ -1,23 +1,36 @@
-import {useEffect, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 
 interface UseBottomSheetProps {
   isOpened: boolean;
   onChangeClose?: () => void;
+  onChangeOpen?: () => void;
 }
 
-export const useBottomSheet = ({isOpened, onChangeClose}: UseBottomSheetProps) => {
-  const [opened, setOpened] = useState(isOpened);
+export const useBottomSheet = ({isOpened, onChangeClose, onChangeOpen}: UseBottomSheetProps) => {
+  const [opened, setOpened] = useState(false);
 
   useEffect(() => {
     setOpened(isOpened);
+    if (!isOpened) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
   }, [isOpened]);
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     setOpened(false);
     if (onChangeClose) {
       onChangeClose();
     }
-  };
+  }, []);
+
+  const handleOpen = useCallback(() => {
+    setOpened(true);
+    if (onChangeOpen) {
+      onChangeOpen();
+    }
+  }, []);
 
   useEffect(() => {
     document.body.style.overflow = 'hidden';

HDesign/src/components/ExpenseList/ExpenseList.tsx

@@ -2,29 +2,34 @@
 
 import Text from '@components/Text/Text';
 
+
 import {Arrow} from '@assets/index';
 
 import {useTheme} from '@theme/HDesignProvider';
 
+import {useTheme} from '@theme/HDesignProvider';
+
 import {ExpenseItemProps, ExpenseListProps} from './ExpenseList.type';
 import {expenseItemStyle, expenseListStyle, expenseItemLeftStyle, TextStyle} from './ExpenseList.style';
 
 // TODO: (@soha) 따로 파일 분리할까 고민중.. 여기서만 사용할 것 같긴 한데.. 흠
-function ExpenseItem({name, price}: ExpenseItemProps) {
+function ExpenseItem({name, price, ...buttonProps}: ExpenseItemProps) {
   const {theme} = useTheme();
   return (
-    <button css={expenseItemStyle}>
+    <button css={expenseItemStyle} {...buttonProps}>
       <Text size="bodyBold" css={TextStyle(theme)}>
         {name}
       </Text>
       <div css={expenseItemLeftStyle}>
-        <Text css={TextStyle(theme)}>{price.toLocaleString('ko-kr')} 원</Text>
+        <Text css={TextStyle(theme)}>{price.toLocaleString('ko-kr')}원</Text>
         <Arrow />
       </div>
     </button>
   );
 }
+}
 
+function ExpenseList({expenseList = []}: ExpenseListProps) {
 function ExpenseList({expenseList = []}: ExpenseListProps) {
   const {theme} = useTheme();
   return (
@@ -35,5 +40,6 @@ function ExpenseList({expenseList = []}: ExpenseListProps) {
     </div>
   );
 }
+}
 
 export default ExpenseList;

HDesign/src/components/ExpenseList/ExpenseList.type.ts

@@ -1,8 +1,10 @@
-export interface ExpenseItemProps {
+export interface ExpenseItemCustomProps {
   name: string;
   price: number;
 }
 
+export type ExpenseItemProps = React.ComponentProps<'button'> & ExpenseItemCustomProps;
+
 export type ExpenseListProps = {
   expenseList: ExpenseItemProps[];
 };

HDesign/src/components/FixedButton/FixedButton.style.ts

@@ -8,9 +8,10 @@ import {Theme} from '@theme/theme.type';
 export const fixedButtonContainerStyle = (theme: Theme) =>
   css({
     display: 'flex',
-    position: 'absolute',
-
+    position: 'fixed',
+    maxWidth: '768px',
     inset: 'auto 0 0',
+    margin: '0 auto',
     backgroundColor: theme.colors.white,
     boxSizing: 'border-box',
   });

HDesign/src/components/Flex/Flex.style.ts

@@ -0,0 +1,45 @@
+import {css} from '@emotion/react';
+
+import {changeCamelCaseToKebabCase} from '@/utils/ return str.replace(/([a-z])([A-Z])/changeCamelCaseToKebabCase';
+
+import {FlexDirectionStrictType, FlexProps} from './Flex.type';
+
+export const flexStyle = ({
+  justifyContent = 'flexStart',
+  alignItems = 'stretch',
+  flexDirection = 'row',
+  gap = '0',
+  padding = '0',
+  paddingInline = '0',
+  margin = '0',
+  width = 'auto',
+  height = 'auto',
+  backgroundColor,
+  theme,
+  ...rest
+}: FlexProps) =>
+  css({
+    display: 'flex',
+    justifyContent: changeCamelCaseToKebabCase(justifyContent),
+    alignItems: changeCamelCaseToKebabCase(alignItems),
+    // TODO: (@weadie) as를 사용하지 않으면 방법이 없음. css의 flexDirection속성은 string을 받지 않고 명확한 속성명(ex row-reverse)를 받고 싶어함. 다만 as를 사용해도 된다고 생각한 근거는 케밥함수가 FlexDirectionType에 명시된 모든 타입을 정확하게 변환하며, 받는 문자열이 FlexDirectionType에 제한되기 때문.
+    flexDirection: changeCamelCaseToKebabCase(flexDirection) as FlexDirectionStrictType,
+    gap,
+    padding,
+    paddingInline,
+    margin,
+    width,
+    height,
+    ...rest,
+
+    backgroundColor: (() => {
+      switch (backgroundColor) {
+        case 'white':
+          return theme?.colors.white;
+        case 'gray':
+          return theme?.colors.grayContainer;
+        default:
+          return 'none';
+      }
+    })(),
+  });

HDesign/src/components/Flex/Flex.tsx

@@ -2,40 +2,15 @@
 import {css} from '@emotion/react';
 
 import {StrictPropsWithChildren} from '@/types/strictPropsWithChildren';
-import {changeCamelCaseToKebabCase} from '@/utils/ return str.replace(/([a-z])([A-Z])/changeCamelCaseToKebabCase';
+import {useTheme} from '@/theme/HDesignProvider';
 
-import {FlexDirectionStrictType, FlexProps} from './Flex.type';
-
-const flexStyle = ({
-  justifyContent = 'flexStart',
-  alignItems = 'stretch',
-  flexDirection = 'row',
-  gap = '0',
-  padding = '0',
-  paddingInline = '0',
-  margin = '0',
-  width = 'auto',
-  height = 'auto',
-  ...rest
-}: FlexProps) =>
-  css({
-    display: 'flex',
-    justifyContent: changeCamelCaseToKebabCase(justifyContent),
-    alignItems: changeCamelCaseToKebabCase(alignItems),
-    // TODO: (@weadie) as를 사용하지 않으면 방법이 없음. css의 flexDirection속성은 string을 받지 않고 명확한 속성명(ex row-reverse)를 받고 싶어함. 다만 as를 사용해도 된다고 생각한 근거는 케밥함수가 FlexDirectionType에 명시된 모든 타입을 정확하게 변환하며, 받는 문자열이 FlexDirectionType에 제한되기 때문.
-    flexDirection: changeCamelCaseToKebabCase(flexDirection) as FlexDirectionStrictType,
-    gap,
-    padding,
-    paddingInline,
-    margin,
-    width,
-    height,
-    ...rest,
-  });
+import {FlexProps} from './Flex.type';
+import {flexStyle} from './Flex.style';
 
 // TODO: (@weadie) 지정된 프롭 말고 다른 프롭도 가져올 수 있게 하자.
 function Flex({children, ...props}: StrictPropsWithChildren<FlexProps>) {
-  return <div css={flexStyle(props)}>{children}</div>;
+  const {theme} = useTheme();
+  return <div css={flexStyle({theme, ...props})}>{children}</div>;
 }
 
 export default Flex;

HDesign/src/components/Flex/Flex.type.ts

@@ -1,5 +1,8 @@
+import {Theme} from '@/theme/theme.type';
+
 export type FlexDirectionType = 'row' | 'column' | 'rowReverse' | 'columnReverse';
 export type FlexDirectionStrictType = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type FlexBackgroundColor = 'gray' | 'white';
 
 export interface FlexProps {
   justifyContent?: 'flexStart' | 'center' | 'flexEnd' | 'spaceBetween' | 'spaceAround' | 'spaceEvenly';
@@ -11,8 +14,6 @@ export interface FlexProps {
   margin?: string;
   width?: string;
   height?: string;
-}
-
-export interface ExtendedFlexProps extends FlexProps {
-  [key: string]: string | undefined;
+  backgroundColor?: FlexBackgroundColor;
+  theme?: Theme;
 }

HDesign/src/components/InOutItem/InOutItem.stories.tsx

@@ -16,12 +16,12 @@ const meta = {
     },
     inOutType: {
       description: '',
-      control: {type: 'select', options: ['in', 'out']},
+      control: {type: 'select', options: ['IN', 'OUT']},
     },
   },
   args: {
     names: ['감자', '토다리'],
-    inOutType: 'out',
+    inOutType: 'OUT',
   },
 } satisfies Meta<typeof InOutItem>;
 

HDesign/src/components/InOutItem/InOutItem.style.ts

@@ -16,7 +16,9 @@ export const prefixStyle = css({
   gap: '0.25rem',
 });
 
-export const textStyle = (theme: Theme) =>
+export const textStyle = (theme: Theme, hasDragHandle: boolean) =>
   css({
+    paddingLeft: hasDragHandle ? '0' : '0.5rem',
+
     color: theme.colors.black,
   });