Merge branch 'fe-dev' into feature/#231

woowacourse-teams · Aug 8, 2024 · 9ec0a0d · 9ec0a0d
2 parents d34729d + 9968cb8
commit 9ec0a0d
Show file tree

Hide file tree

Showing 35 changed files with 365 additions and 257 deletions.
diff --git a/HDesign/package-lock.json b/HDesign/package-lock.json
diff --git a/HDesign/package.json b/HDesign/package.json
@@ -1,6 +1,6 @@
 {
   "name": "haengdong-design",
-  "version": "0.1.60",
+  "version": "0.1.65",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

diff --git a/HDesign/src/components/DragHandleItem/DragHandleItem.style.ts b/HDesign/src/components/DragHandleItem/DragHandleItem.style.ts
@@ -18,8 +18,3 @@ export const dragHandlerStyle = css({
   gap: '0.25rem',
   width: '100%',
 });
-
-export const textStyle = (theme: Theme) =>
-  css({
-    color: theme.colors.black,
-  });
diff --git a/HDesign/src/components/DragHandleItem/DragHandleItem.tsx b/HDesign/src/components/DragHandleItem/DragHandleItem.tsx
@@ -9,7 +9,7 @@ import {useTheme} from '@theme/HDesignProvider';
 
 import IconButton from '../IconButton/IconButton';
 
-import {dragHandleItemStyle, dragHandlerStyle, textStyle} from './DragHandleItem.style';
+import {dragHandleItemStyle, dragHandlerStyle} from './DragHandleItem.style';
 import {DragHandleItemProps} from './DragHandleItem.type';
 
 export const DragHandleItem = ({
@@ -31,12 +31,8 @@ export const DragHandleItem = ({
           </IconButton>
         )}
         <Flex justifyContent="spaceBetween" width="100%">
-          <Text css={textStyle(theme)} size="bodyBold">
-            {prefix}
-          </Text>
-          <Text css={textStyle(theme)} size="body">
-            {suffix}
-          </Text>
+          <Text size="bodyBold">{prefix}</Text>
+          <Text>{suffix}</Text>
         </Flex>
       </div>
     </div>

diff --git a/HDesign/src/components/DragHandleItemContainer/DragHandleItemContainer.style.ts b/HDesign/src/components/DragHandleItemContainer/DragHandleItemContainer.style.ts
@@ -13,25 +13,3 @@ export const containerStyle = (theme: Theme, backgroundColor: ColorKeys) =>
     borderRadius: '0.75rem',
     backgroundColor: theme.colors[backgroundColor],
   });
-
-export const topLeftStyle = (theme: Theme) =>
-  css({
-    color: theme.colors.gray,
-  });
-
-//TODO: (@todari) : 추후 클릭 기능을 넣었을 때 underline
-export const topRightStyle = (theme: Theme) =>
-  css({
-    color: theme.colors.gray,
-    // textDecoration: 'underline',
-  });
-
-export const bottomLeftTextStyle = (theme: Theme) =>
-  css({
-    color: theme.colors.gray,
-  });
-
-export const bottomRightTextStyle = (theme: Theme) =>
-  css({
-    color: theme.colors.gray,
-  });
diff --git a/HDesign/src/components/DragHandleItemContainer/DragHandleItemContainer.tsx b/HDesign/src/components/DragHandleItemContainer/DragHandleItemContainer.tsx
@@ -4,13 +4,7 @@ import {useTheme} from '@theme/HDesignProvider';
 import Text from '../Text/Text';
 import Flex from '../Flex/Flex';
 
-import {
-  bottomLeftTextStyle,
-  bottomRightTextStyle,
-  containerStyle,
-  topLeftStyle,
-  topRightStyle,
-} from './DragHandleItemContainer.style';
+import {containerStyle} from './DragHandleItemContainer.style';
 import {DragHandleItemContainerProps} from './DragHandleItemContainer.type';
 
 export const DragHandleItemContainer: React.FC<DragHandleItemContainerProps> = ({
@@ -27,19 +21,19 @@ export const DragHandleItemContainer: React.FC<DragHandleItemContainerProps> = (
   return (
     <div css={containerStyle(theme, backgroundColor)} {...htmlProps}>
       <Flex justifyContent="spaceBetween" paddingInline="0.5rem">
-        <Text css={topLeftStyle(theme)} size="captionBold">
+        <Text textColor="gray" size="captionBold">
           {topLeftText}
         </Text>
-        <Text css={topRightStyle(theme)} size="caption">
+        <Text textColor="gray" size="caption">
           {topRightText}
         </Text>
       </Flex>
       {children}
       <Flex justifyContent="spaceBetween" paddingInline="0.5rem">
-        <Text css={bottomLeftTextStyle(theme)} size="captionBold">
+        <Text textColor="gray" size="captionBold">
           {bottomLeftText}
         </Text>
-        <Text css={bottomRightTextStyle(theme)} size="caption">
+        <Text textColor="gray" size="caption">
           {bottomRightText}
         </Text>
       </Flex>

diff --git a/HDesign/src/components/ExpenseList/ExpenseList.style.ts b/HDesign/src/components/ExpenseList/ExpenseList.style.ts
@@ -19,11 +19,6 @@ export const expenseItemLeftStyle = () =>
     gap: '1rem',
   });
 
-export const TextStyle = (theme: Theme) =>
-  css({
-    color: theme.colors.onTertiary,
-  });
-
 export const expenseListStyle = (theme: Theme) =>
   css({
     width: '100%',

diff --git a/HDesign/src/components/ExpenseList/ExpenseList.tsx b/HDesign/src/components/ExpenseList/ExpenseList.tsx
@@ -6,19 +6,17 @@ import Icon from '@components/Icon/Icon';
 import {useTheme} from '@theme/HDesignProvider';
 
 import {ExpenseItemProps, ExpenseListProps} from './ExpenseList.type';
-import {expenseItemStyle, expenseListStyle, expenseItemLeftStyle, TextStyle} from './ExpenseList.style';
+import {expenseItemStyle, expenseListStyle, expenseItemLeftStyle} from './ExpenseList.style';
 
 // TODO: (@soha) 따로 파일 분리할까 고민중.. 여기서만 사용할 것 같긴 한데.. 흠
 // TODO: (@todari) : 추후 클릭 시 상호작용이 생기면 iconButton으로 변경할 수 있음
 function ExpenseItem({name, price, ...buttonProps}: ExpenseItemProps) {
   const {theme} = useTheme();
   return (
     <button css={expenseItemStyle} {...buttonProps}>
-      <Text size="bodyBold" css={TextStyle(theme)}>
-        {name}
-      </Text>
+      <Text size="bodyBold">{name}</Text>
       <div css={expenseItemLeftStyle}>
-        <Text css={TextStyle(theme)}>{price.toLocaleString('ko-kr')}원</Text>
+        <Text>{price.toLocaleString('ko-kr')}원</Text>
         <Icon iconType="rightChevron" />
       </div>
     </button>

diff --git a/HDesign/src/components/Input/Input.stories.tsx b/HDesign/src/components/Input/Input.stories.tsx
@@ -3,6 +3,8 @@ import type {Meta, StoryObj} from '@storybook/react';
 import React, {useEffect, useState} from 'react';
 
 import Input from '@components/Input/Input';
+import Flex from '@components/Flex/Flex';
+import Button from '@components/Button/Button';
 
 const meta = {
   title: 'Components/Input',
@@ -26,21 +28,29 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   render: ({...args}) => {
+    const regex = /^[ㄱ-ㅎ가-힣]*$/;
     const [value, setValue] = useState('');
     const [isError, setIsError] = useState(false);
+
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.value.length < 4) {
-        setValue(event.target.value);
+      const newValue = event.target.value;
+      if (regex.test(newValue)) {
+        setValue(newValue);
         setIsError(false);
       } else {
-        event.target.value = value;
         setIsError(true);
       }
     };
-    const handleBlur = () => {
-      console.log('blur');
+
+    const changeRandomValue = () => {
+      setValue('외부에서 값 변경됨');
     };
 
-    return <Input value={value} onChange={e => handleChange(e)} isError={isError} onBlur={handleBlur} {...args} />;
+    return (
+      <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+        <Button onClick={changeRandomValue}>input 값 변경</Button>
+        <Input value={value} onChange={handleChange} isError={isError} {...args} />
+      </div>
+    );
   },
 };
diff --git a/HDesign/src/components/Input/Input.tsx b/HDesign/src/components/Input/Input.tsx
@@ -13,7 +13,6 @@ export const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputPro
   {value: propsValue, onChange, onFocus, onBlur, inputType, isError, placeholder, autoFocus, ...htmlProps}: InputProps,
   ref,
 ) {
-  useImperativeHandle(ref, () => inputRef.current!);
   const {theme} = useTheme();
   const inputRef = useRef<HTMLInputElement>(null);
   const {value, handleChange, hasFocus, handleClickDelete, handleBlur, handleFocus, handleKeyDown} = useInput({
@@ -24,6 +23,7 @@ export const Input: React.FC<InputProps> = forwardRef<HTMLInputElement, InputPro
     inputRef,
     autoFocus,
   });
+  useImperativeHandle(ref, () => inputRef.current!);
 
   return (
     <div css={inputBoxStyle(theme, inputType, hasFocus, isError)}>

diff --git a/HDesign/src/components/Input/useInput.ts b/HDesign/src/components/Input/useInput.ts
@@ -9,17 +9,20 @@ interface UseInputProps<T> {
   autoFocus?: boolean;
 }
 
-export const useInput = <T>({propsValue, onChange, onBlur, onFocus, inputRef}: UseInputProps<T>) => {
+export const useInput = <T>({propsValue, onChange, onBlur, onFocus, autoFocus, inputRef}: UseInputProps<T>) => {
   const [value, setValue] = useState<T>(propsValue);
   const [hasFocus, setHasFocus] = useState(inputRef.current === document.activeElement);
 
   useEffect(() => {
-    setHasFocus(inputRef.current === document.activeElement);
-  }, []);
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+      setHasFocus(true);
+    }
+  }, [autoFocus, inputRef]);
 
   useEffect(() => {
     setValue(propsValue);
-  }, [value]);
+  }, [propsValue, value]);
 
   const handleClickDelete = (event: React.MouseEvent) => {
     event.preventDefault();

diff --git a/HDesign/src/components/ListButton/ListButton.style.ts b/HDesign/src/components/ListButton/ListButton.style.ts
@@ -14,8 +14,3 @@ export const listButtonStyle = (theme: Theme) =>
 
     boxShadow: `0 1px 0 0 ${theme.colors.grayContainer} inset `,
   });
-
-export const textStyle = (theme: Theme) =>
-  css({
-    color: theme.colors.gray,
-  });
diff --git a/HDesign/src/components/ListButton/ListButton.tsx b/HDesign/src/components/ListButton/ListButton.tsx
@@ -9,7 +9,7 @@ import Icon from '@components/Icon/Icon';
 import {useTheme} from '@theme/HDesignProvider';
 
 import {ListButtonProps} from './ListButton.type';
-import {listButtonStyle, textStyle} from './ListButton.style';
+import {listButtonStyle} from './ListButton.style';
 
 export const ListButton: React.FC<ListButtonProps> = forwardRef<HTMLButtonElement, ListButtonProps>(function Button(
   {prefix, suffix, ...htmlProps}: ListButtonProps,
@@ -18,11 +18,11 @@ export const ListButton: React.FC<ListButtonProps> = forwardRef<HTMLButtonElemen
   const {theme} = useTheme();
   return (
     <button css={listButtonStyle(theme)} ref={ref} {...htmlProps}>
-      <Text size="caption" css={textStyle(theme)}>
+      <Text size="caption" textColor="gray">
         {prefix}
       </Text>
       <Flex gap="0.5rem" alignItems="center">
-        <Text size="caption" css={textStyle(theme)}>
+        <Text size="caption" textColor="gray">
           {suffix}
         </Text>
         <IconButton variants="none">

diff --git a/HDesign/src/components/Search/Search.stories.tsx b/HDesign/src/components/Search/Search.stories.tsx
@@ -11,20 +11,17 @@ const meta = {
   parameters: {
     // layout: 'centered',
   },
-  argTypes: {
-    value: {
-      description: '',
-      control: {type: 'text'},
-    },
-    inputType: {
-      control: {type: 'radio'},
-    },
-  },
+  decorators: [
+    Story => (
+      <div style={{minHeight: '10rem'}}>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
-    disabled: false,
-    placeholder: 'placeholder',
-    searchTerms: ['todari', 'cookie'],
-    setState: keyword => console.log(keyword),
+    isShowTargetInput: true,
+    matchItems: ['todari', 'cookie'],
+    onMatchItemClick: keyword => alert(keyword),
   },
 } satisfies Meta<typeof Search>;
 

diff --git a/HDesign/src/components/Search/Search.style.ts b/HDesign/src/components/Search/Search.style.ts
@@ -12,21 +12,23 @@ export const searchTermsStyle = (theme: Theme) =>
   css({
     position: 'absolute',
     top: '3.5rem',
+    zIndex: 1,
 
-    width: 'calc(100% - 2rem)',
-    margin: '0 1rem',
-    padding: '0.5rem 0',
+    width: '100%',
+    padding: '0.5rem 1rem',
 
     borderRadius: '1rem',
 
     backgroundColor: theme.colors.white,
+
+    boxShadow: '0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.12)',
   });
 
 export const searchTermStyle = (theme: Theme) =>
   css(
     {
       width: '100%',
-      padding: '0.5rem 1rem',
+      padding: '0.5rem',
 
       color: theme.colors.onTertiary,
 

diff --git a/HDesign/src/components/Search/Search.tsx b/HDesign/src/components/Search/Search.tsx
@@ -3,34 +3,27 @@ import Flex from '@components/Flex/Flex';
 
 import {useTheme} from '@theme/HDesignProvider';
 
-import Input from '../Input/Input';
-import {InputProps} from '../Input/Input.type';
-
 import {searchStyle, searchTermsStyle, searchTermStyle} from './Search.style';
-import useSearch from './useSearch';
 
-export interface SearchProps extends InputProps {
-  searchTerms: string[];
-  setState: React.Dispatch<React.SetStateAction<string>>;
+export interface SearchProps {
+  isShowTargetInput: boolean;
+  matchItems: string[];
+  onMatchItemClick: (term: string) => void;
 }
 
-const Search: React.FC<SearchProps> = ({searchTerms, setState, ...inputProps}: SearchProps) => {
+const Search = ({isShowTargetInput, matchItems, onMatchItemClick, children}: React.PropsWithChildren<SearchProps>) => {
   const {theme} = useTheme();
-  const {value, showSearchTerms, handleOnChange, handleOnClick, filterSearchTerms} = useSearch({
-    searchTerms,
-    setState,
-  });
 
   return (
     <fieldset css={searchStyle}>
-      <Input inputType="search" value={value} onChange={handleOnChange} {...inputProps} />
-      {showSearchTerms && (
+      {children}
+      {matchItems.length > 0 && isShowTargetInput && (
         <ul css={searchTermsStyle(theme)}>
           <Flex flexDirection="column" gap="0.5rem">
-            {filterSearchTerms(value).map((searchTerm, index) => (
-              <li key={`${searchTerm}-${index}`}>
-                <button type="button" css={searchTermStyle(theme)} onClick={() => handleOnClick(searchTerm)}>
-                  {searchTerm}
+            {matchItems.map((matchItem, index) => (
+              <li key={`${matchItems}-${index}`}>
+                <button type="button" css={searchTermStyle(theme)} onClick={() => onMatchItemClick(matchItem)}>
+                  {matchItems}
                 </button>
               </li>
             ))}