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

woowacourse-teams · Sep 26, 2024 · 7909515 · 7909515
2 parents 6c9df09 + 949ed88
commit 7909515
Show file tree

Hide file tree

Showing 54 changed files with 525 additions and 522 deletions.
diff --git a/client/src/GlobalStyle.ts b/client/src/GlobalStyle.ts
@@ -2,159 +2,148 @@ import {css} from '@emotion/react';
 
 // reset css -> index css
 export const GlobalStyle = css`
-  html,
-  body,
-  div,
-  span,
-  applet,
-  object,
-  iframe,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  blockquote,
-  pre,
+  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+
+  *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+    all: unset;
+    display: revert;
+  }
+
+  /* Preferred box-sizing value */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /* Fix mobile Safari increase font-size on landscape mode */
+  html {
+    -moz-text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+  }
+
+  /* Reapply the pointer cursor for anchor tags */
   a,
-  abbr,
-  acronym,
-  address,
-  big,
-  cite,
-  code,
-  del,
-  dfn,
-  em,
-  img,
-  ins,
-  kbd,
-  q,
-  s,
-  samp,
-  small,
-  strike,
-  strong,
-  sub,
-  sup,
-  tt,
-  b,
-  u,
-  i,
-  center,
-  dl,
-  dt,
-  dd,
-  ol,
-  ul,
-  li,
-  fieldset,
-  form,
-  label,
-  legend,
-  table,
-  caption,
-  tbody,
-  tfoot,
-  thead,
-  tr,
-  th,
-  td,
-  article,
-  aside,
-  canvas,
-  details,
-  embed,
-  figure,
-  figcaption,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  output,
-  ruby,
-  section,
-  summary,
-  time,
-  mark,
-  audio,
-  video {
-    vertical-align: baseline;
-    margin: 0;
-    border: 0;
-    padding: 0;
-    font-size: 100%;
-    font: inherit;
-  }
-  /* HTML5 display-role reset for older browsers */
-  article,
-  aside,
-  details,
-  figcaption,
-  figure,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  section {
-    display: block;
+  button {
+    cursor: revert;
+    line-height: 0;
   }
-  body {
-    line-height: 1;
+
+  button:disabled {
+    cursor: default;
   }
+
+  /* Remove list styles (bullets/numbers) */
   ol,
-  ul {
+  ul,
+  menu,
+  summary {
     list-style: none;
   }
-  blockquote,
-  q {
-    quotes: none;
-  }
-  blockquote:before,
-  blockquote:after,
-  q:before,
-  q:after {
-    content: '';
-    content: none;
-  }
+
+  /* Removes spacing between cells in tables */
   table {
     border-collapse: collapse;
-    border-spacing: 0;
   }
-  button {
-    cursor: pointer;
-    border: none;
-    background-color: transparent;
+
+  /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+  input,
+  textarea {
+    -webkit-user-select: auto;
   }
-  * {
+
+  /* Revert the 'white-space' property for textarea elements on Safari */
+  textarea {
+    white-space: revert;
+  }
+
+  /* Minimum style to allow to style meter element */
+  meter {
+    -webkit-appearance: revert;
+    appearance: revert;
+  }
+
+  /* Preformatted text - use only for this feature */
+  :where(pre) {
+    all: revert;
     box-sizing: border-box;
   }
 
-  html {
-    height: 100%;
+  /* Fix the feature of 'hidden' attribute.
+       display: revert; revert to element instead of attribute */
+  :where([hidden]) {
+    display: none;
   }
 
-  body {
-    max-width: 768px;
-    height: 100%;
-    margin: 0 auto;
+  /* Revert for bug in Chromium browsers
+       - Fix for the content editable attribute will work properly.
+       - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
+  :where([contenteditable]:not([contenteditable='false'])) {
+    -moz-user-modify: read-write;
+    -webkit-user-modify: read-write;
+    overflow-wrap: break-word;
+    -webkit-line-break: after-white-space;
+    -webkit-user-select: auto;
+  }
+
+  /* Apply back the draggable feature - exist only in Chromium and Safari */
+  :where([draggable='true']) {
+    -webkit-user-drag: element;
+  }
+
+  /* Revert Modal native behavior */
+  :where(dialog:modal) {
+    all: revert;
+    box-sizing: border-box;
+  }
+
+  /* Remove details summary webkit styles */
+  ::-webkit-details-marker {
+    display: none;
+  }
 
-    overflow-y: scroll;
-    &::-webkit-scrollbar {
-      display: none;
-    }
+  /* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
   }
 
-  section {
-    width: 100%;
+  /* Firefox  */
+  input[type='number'] {
+    -moz-appearance: textfield;
   }
 
   #root {
     display: flex;
-    flex-direction: column;
+    justify-content: center;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  body {
+    font-family:
+      'Pretendard',
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      'Helvetica Neue',
+      'Segoe UI',
+      'Apple SD Gothic Neo',
+      'Noto Sans KR',
+      'Malgun Gothic',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: 'tnum';
+    max-width: 768px;
+    margin: 0 auto;
   }
 `;
diff --git a/client/src/components/AmountInput/AmountInput.tsx b/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"

diff --git a/client/src/components/Design/components/ChipGroup/ChipGroup.style.ts b/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',
 });
diff --git a/client/src/components/Design/components/FixedButton/FixedButton.tsx b/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
           )}

diff --git a/client/src/components/Design/components/Icon/Icon.style.ts b/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) => {

diff --git a/client/src/components/Design/components/Icon/Icon.tsx b/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) => {

diff --git a/client/src/components/Design/components/Icon/Icon.type.ts b/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;
 

diff --git a/client/src/components/Design/components/NumberKeyboard/NumberKeyboardBottomSheet.tsx b/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;