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

client/src/components/AmountInput/AmountInput.tsx

@@ -28,8 +28,8 @@ const AmountInput = ({value, onClick, underlined, activated}: Props) => {
       `}
       onClick={onClick}
     >
-      <Text size="head" textColor={value !== '0' ? 'black' : 'gray'}>
-        {value}
+      <Text size="head" textColor={value !== '' && value !== '0' ? 'black' : 'gray'}>
+        {value === '' ? '0' : value}
       </Text>
       <Text
         textColor="gray"

client/src/components/Design/components/ChipGroup/ChipGroup.style.ts

@@ -3,4 +3,6 @@ import {css} from '@emotion/react';
 export const chipGroupStyle = css({
   display: 'flex',
   gap: '0.25rem',
+  flexWrap: 'wrap',
+  overflow: 'hidden',
 });

client/src/components/Design/components/FixedButton/FixedButton.tsx

@@ -40,7 +40,7 @@ export const FixedButton: React.FC<FixedButtonProps> = forwardRef<HTMLButtonElem
           {...htmlProps}
         >
           {variants === 'loading' ? (
-            <Lottie animationData={loadingAnimation} loop={true} style={{width: 240, height: 20}} />
+            <Lottie animationData={loadingAnimation} loop={true} style={{height: '1.25rem'}} />
           ) : (
             children
           )}

client/src/components/Design/components/Icon/Icon.style.ts

@@ -19,6 +19,7 @@ const ICON_DEFAULT_COLOR: Record<IconType, IconColor> = {
   toss: 'white',
   meatballs: 'black',
   editPencil: 'gray',
+  heundeut: 'gray',
 };
 
 export const iconStyle = ({iconType, theme, iconColor}: IconStylePropsWithTheme) => {

client/src/components/Design/components/Icon/Icon.tsx

@@ -14,6 +14,7 @@ import X from '@assets/image/x.svg';
 import PencilMini from '@assets/image/pencil_mini.svg';
 import Meatballs from '@assets/image/meatballs.svg';
 import EditPencil from '@assets/image/editPencil.svg';
+import Heundeut from '@assets/image/heundeut.svg';
 import {IconProps} from '@HDcomponents/Icon/Icon.type';
 import {useTheme} from '@theme/HDesignProvider';
 
@@ -34,6 +35,7 @@ const ICON = {
   toss: <img src={Toss} width="16" height="16" alt="toss icon" />,
   meatballs: <Meatballs />,
   editPencil: <EditPencil />,
+  heundeut: <Heundeut />,
 };
 
 export const Icon: React.FC<IconProps> = ({iconColor, iconType, ...htmlProps}: IconProps) => {

client/src/components/Design/components/Icon/Icon.type.ts

@@ -15,7 +15,8 @@ export type IconType =
   | 'pencilMini'
   | 'toss'
   | 'meatballs'
-  | 'editPencil';
+  | 'editPencil'
+  | 'heundeut';
 
 export type IconColor = ColorKeys;
 

client/src/components/Design/components/NumberKeyboard/NumberKeyboardBottomSheet.tsx

@@ -1,21 +1,26 @@
 import {css} from '@emotion/react';
 import {createPortal} from 'react-dom';
+import {useEffect, useRef} from 'react';
 
 import {useTheme} from '@components/Design/theme/HDesignProvider';
 
 import FixedButton from '../FixedButton/FixedButton';
 
 import NumberKeyboard, {NumberKeyboardProps} from './NumberKeyboard';
+import useNumberKeyboardBottomSheet from './useNumberKeyboardBottomSheet';
 
 interface Props extends NumberKeyboardProps {
-  isOpened?: boolean;
+  isOpened: boolean;
   onClose: () => void;
 }
 
 const NumberKeyboardBottomSheet = ({isOpened, onClose, ...props}: Props) => {
   const {theme} = useTheme();
+  const {bottomSheetRef} = useNumberKeyboardBottomSheet({isOpened});
+
   return createPortal(
     <div
+      ref={bottomSheetRef}
       css={css`
         position: fixed;
         padding-bottom: 6.25rem;
@@ -26,6 +31,8 @@ const NumberKeyboardBottomSheet = ({isOpened, onClose, ...props}: Props) => {
         gap: 1rem;
         bottom: 0;
         background-color: ${theme.colors.white};
+        z-index: 20;
+        touch-action: none;
 
         transform: ${isOpened ? 'translate3d(0, 0, 0)' : 'translate3d(0, 100%, 0)'};
         transition: 0.2s ease-in-out;

client/src/components/Design/components/NumberKeyboard/useNumberKeyboardBottomSheet.ts

@@ -0,0 +1,32 @@
+import {useEffect, useRef} from 'react';
+
+interface Props {
+  isOpened: boolean;
+}
+
+const useNumberKeyboardBottomSheet = ({isOpened}: Props) => {
+  const bottomSheetRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const bottomSheet = bottomSheetRef.current;
+    if (!bottomSheet) return;
+
+    const preventScroll = (e: TouchEvent) => {
+      if (bottomSheet.contains(e.target as Node)) {
+        e.preventDefault();
+      }
+    };
+
+    if (isOpened) {
+      document.addEventListener('touchmove', preventScroll, {passive: false});
+    }
+
+    return () => {
+      document.removeEventListener('touchmove', preventScroll);
+    };
+  }, [isOpened]);
+
+  return {bottomSheetRef};
+};
+
+export default useNumberKeyboardBottomSheet;

client/src/components/Design/components/TextButton/TextButton.tsx

@@ -1,8 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import {forwardRef} from 'react';
 
-import {useTheme} from '@theme/HDesignProvider';
-
 import Text from '../Text/Text';
 
 import {TextButtonProps} from './TextButton.type';
@@ -11,8 +9,6 @@ export const TextButton: React.FC<TextButtonProps> = forwardRef<HTMLButtonElemen
   {textColor, textSize, children, ...htmlProps}: TextButtonProps,
   ref,
 ) {
-  const {theme} = useTheme();
-
   return (
     <button ref={ref} {...htmlProps}>
       <Text size={textSize} textColor={textColor}>

client/src/components/Design/components/TextButton/TextButton.type.ts

@@ -1,6 +1,6 @@
 import {TextSize} from '../Text/Text.type';
 
-export type TextColor = 'black' | 'gray';
+export type TextColor = 'black' | 'gray' | 'onTertiary';
 
 export interface TextButtonStyleProps {
   textColor: TextColor;

client/src/components/Design/components/TopNav/NavItem.style.ts

@@ -0,0 +1,9 @@
+import {css} from '@emotion/react';
+
+export const navItemStyle = css({
+  padding: '0 0.5rem',
+
+  ':first-of-type': {
+    paddingLeft: 0,
+  },
+});

client/src/components/Design/components/TopNav/NavItem.tsx

@@ -0,0 +1,55 @@
+/** @jsxImportSource @emotion/react */
+import type {NavItemProps} from './NavItem.type';
+
+import {useLocation, useNavigate} from 'react-router-dom';
+
+import getDeletedLastPath from '@utils/getDeletedLastPath';
+
+import TextButton from '../TextButton/TextButton';
+
+import {navItemStyle} from './NavItem.style';
+
+const NavItem = ({displayName, routePath, onHandleRouteInFunnel, noEmphasis = false, children}: NavItemProps) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const matchPath = location.pathname.includes(routePath);
+
+  const handleNavigation = () => {
+    if (onHandleRouteInFunnel) {
+      onHandleRouteInFunnel();
+      return;
+    }
+
+    switch (routePath) {
+      case '/':
+        navigate('/');
+        break;
+      case '-1':
+        navigate(-1);
+        break;
+      default:
+        navigate(`${getDeletedLastPath(location.pathname)}${routePath}`);
+        break;
+    }
+  };
+
+  const getTextColor = () => {
+    if (noEmphasis) return 'gray';
+
+    return matchPath ? 'onTertiary' : 'gray';
+  };
+
+  return (
+    <li css={navItemStyle} onClick={handleNavigation}>
+      {children ? (
+        children
+      ) : (
+        <TextButton textColor={getTextColor()} textSize="bodyBold">
+          {displayName}
+        </TextButton>
+      )}
+    </li>
+  );
+};
+
+export default NavItem;

client/src/components/Design/components/TopNav/NavItem.type.ts

@@ -0,0 +1,14 @@
+export type NavItemOptionProps = {
+  displayName?: string;
+  onHandleRouteInFunnel?: () => void;
+};
+
+export type NavItemRequireProps = {
+  routePath: string;
+};
+
+export type NavItemStyleProps = {
+  noEmphasis?: boolean;
+};
+
+export type NavItemProps = NavItemRequireProps & NavItemOptionProps & NavItemStyleProps & React.PropsWithChildren;

client/src/components/Design/components/TopNav/TopNav.style.ts

@@ -7,12 +7,3 @@ export const topNavStyle = css({
   padding: '0 1rem',
   width: '100%',
 });
-
-export const topNavNonStyle = css({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '0 1rem',
-  width: '100%',
-  height: '1.5rem',
-});