choooz · Leejha · Nov 12, 2023 · Nov 12, 2023
diff --git a/apps/jurumarble/src/app/agreement/page.tsx b/apps/jurumarble/src/app/agreement/page.tsx
@@ -3,7 +3,7 @@
 import { SideButtonHeader } from 'components/SideButtonHeader';
 import { getClassNames } from 'lib/styles/getClassNames';
 import { useRouter } from 'next/navigation';
-import { SvgIcX } from 'src/assets/icons/components';
+import { SvgIcClose } from 'src/assets/icons/components';
 
 import styles from './page.module.css';
 
@@ -19,12 +19,11 @@ function AgreementPage() {
       <SideButtonHeader
         rightButton={
           <button
-            className={cx('close-button')}
             onClick={() => {
               router.back();
             }}
           >
-            <SvgIcX width={24} height={24} />
+            <SvgIcClose width={24} height={24} />
           </button>
         }
       >

diff --git a/apps/jurumarble/src/app/help/page.tsx b/apps/jurumarble/src/app/help/page.tsx
@@ -5,7 +5,7 @@ import { getClassNames } from 'lib/styles/getClassNames';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { howToReportImage } from 'public/images';
-import { SvgIcX } from 'src/assets/icons/components';
+import { SvgIcClose } from 'src/assets/icons/components';
 
 import styles from './page.module.css';
 
@@ -21,12 +21,11 @@ function HelpPage() {
       <SideButtonHeader
         rightButton={
           <button
-            className={cx('close-button')}
             onClick={() => {
               router.back();
             }}
           >
-            <SvgIcX width={24} height={24} />
+            <SvgIcClose width={24} height={24} />
           </button>
         }
       >

diff --git a/apps/jurumarble/src/app/map/components/RegionBottomsheet.tsx b/apps/jurumarble/src/app/map/components/RegionBottomsheet.tsx
@@ -1,7 +1,7 @@
 import { Button, Portal } from 'components/index';
 import { REGION_LIST } from 'lib/constants';
 import { transitions } from 'lib/styles';
-import { SvgIcPrev, SvgIcX } from 'src/assets/icons/components';
+import { SvgIcClose, SvgIcPrev } from 'src/assets/icons/components';
 import styled, { css } from 'styled-components';
 
 interface Props {
@@ -27,7 +27,7 @@ const RegionBottomSheet = ({
         <Inner>
           <Title>지역 설정</Title>
           <Exit>
-            <SvgIcX />
+            <SvgIcClose />
           </Exit>
 
           <SelectBox>

diff --git a/apps/jurumarble/src/app/my/edit/components/WithdrawalModal.tsx b/apps/jurumarble/src/app/my/edit/components/WithdrawalModal.tsx
@@ -1,7 +1,7 @@
 import { useToggle } from '@monorepo/hooks';
 import VoteHeader from 'components/VoteHeader';
 import { Button, ModalTemplate } from 'components/index';
-import { SvgIcX } from 'src/assets/icons/components';
+import { SvgIcClose } from 'src/assets/icons/components';
 import styled, { css } from 'styled-components';
 
 interface Props {
@@ -20,7 +20,7 @@ function WithdrawalModal({ onToggleWithdrawalModal, deleteUser }: Props) {
       <VoteHeader
         rightButton={
           <CloseButton onClick={onToggleWithdrawalModal}>
-            <SvgIcX width={24} height={24} />
+            <SvgIcClose width={24} height={24} />
           </CloseButton>
         }
       >

diff --git a/apps/jurumarble/src/app/onboarding/page.module.css b/apps/jurumarble/src/app/onboarding/page.module.css
@@ -27,8 +27,3 @@
   max-width: 720px;
   background-color: var(--white);
 }
-
-.close-button {
-  margin-right: 20px;
-  display: flex;
-}
diff --git a/apps/jurumarble/src/app/onboarding/page.tsx b/apps/jurumarble/src/app/onboarding/page.tsx
@@ -5,7 +5,7 @@ import { getClassNames } from 'lib/styles/getClassNames';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { Onboarding } from 'public/images';
-import { SvgIcX } from 'src/assets/icons/components';
+import { SvgIcClose } from 'src/assets/icons/components';
 
 import BottomButton from './components/BottomButton';
 import styles from './page.module.css';
@@ -23,12 +23,11 @@ const OnboardingPage = () => {
       <SideButtonHeader
         rightButton={
           <button
-            className={cx('close-button')}
             onClick={() => {
               router.back();
             }}
           >
-            <SvgIcX width={24} height={24} />
+            <SvgIcClose width={24} height={24} />
           </button>
         }
       />

diff --git a/apps/jurumarble/src/app/policy/page.tsx b/apps/jurumarble/src/app/policy/page.tsx
@@ -4,7 +4,7 @@
 import { SideButtonHeader } from 'components/SideButtonHeader';
 import { getClassNames } from 'lib/styles/getClassNames';
 import { useRouter } from 'next/navigation';
-import { SvgIcX } from 'src/assets/icons/components';
+import { SvgIcClose } from 'src/assets/icons/components';
 
 import styles from './page.module.css';
 
@@ -20,12 +20,11 @@ function AgreementPage() {
       <SideButtonHeader
         rightButton={
           <button
-            className={cx('close-button')}
             onClick={() => {
               router.back();
             }}
           >
-            <SvgIcX width={24} height={24} />
+            <SvgIcClose width={24} height={24} />
           </button>
         }
       >

diff --git a/apps/jurumarble/src/app/vote/[id]/components/SearchInput.tsx b/apps/jurumarble/src/app/vote/[id]/components/SearchInput.tsx
@@ -38,7 +38,7 @@ const SearchInput = forwardRef<HTMLInputElement, Props>(
         />
         <SearchButton onClick={eventHandler}>
           <SvgIcSearch width={22} height={22} fill={theme.colors.black_04} />
-          {/* <SvgIcX
+          {/* <SvgIcClose
             width={18}
             height={18}
             color="#CCCCCC"

diff --git a/apps/jurumarble/src/app/vote/[id]/components/SearchRestaurantModal.tsx b/apps/jurumarble/src/app/vote/[id]/components/SearchRestaurantModal.tsx
@@ -9,7 +9,7 @@ import { RestaurantInfo } from 'lib/apis/restaurant';
 import { REGION_LIST } from 'lib/constants';
 import { transitions } from 'lib/styles';
 import Image from 'next/image';
-import SvgIcX from 'src/assets/icons/components/IcX';
+import { SvgIcClose } from 'src/assets/icons/components';
 import styled, { css, DefaultTheme } from 'styled-components';
 
 import RestaurantItem from './RestaurantItem';
@@ -84,7 +84,7 @@ function SearchRestaurantModal({
       <VoteHeader
         rightButton={
           <CloseButton onClick={onToggleSearchRestaurantModal}>
-            <SvgIcX width={24} height={24} />
+            <SvgIcClose width={24} height={24} />
           </CloseButton>
         }
       >

diff --git a/apps/jurumarble/src/app/vote/components/OnboardingBottomsheet.tsx b/apps/jurumarble/src/app/vote/components/OnboardingBottomsheet.tsx
@@ -13,7 +13,7 @@ import {
   mobileMoveOnboarding,
   mobileSelectOnboarding,
 } from 'public/images';
-import { SvgIcX } from 'src/assets/icons/components';
+import { SvgIcClose } from 'src/assets/icons/components';
 import styled, { css } from 'styled-components';
 
 interface CardProps {
@@ -97,7 +97,7 @@ const OnboardingBottomsheet = ({ onToggleOnboarding }: Props) => {
       <BottomSheet>
         <Inner>
           <Exit onClick={onToggleOnboarding}>
-            <SvgIcX />
+            <SvgIcClose width={24} height={24} />
           </Exit>
           <Title>투표를 좀 더 재밌게 참여해 볼까요?</Title>
           <Description>

diff --git a/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx b/apps/jurumarble/src/app/vote/post/components/DrinkSearchModal.tsx
@@ -7,7 +7,7 @@ import SearchInput from 'components/SearchInput';
 import VoteHeader from 'components/VoteHeader';
 import { Button, ModalTemplate } from 'components/index';
 import useInput from 'hooks/useInput';
-import SvgIcX from 'src/assets/icons/components/IcX';
+import { SvgIcClose } from 'src/assets/icons/components';
 import { DrinkInfoType } from 'src/types/drink';
 import styled, { css } from 'styled-components';
 
@@ -59,7 +59,7 @@ function DrinkSearchModal({
       <VoteHeader
         rightButton={
           <CloseButton onClick={onToggleDrinkSearchModal}>
-            <SvgIcX width={24} height={24} />
+            <SvgIcClose width={24} height={24} />
           </CloseButton>
         }
       >

diff --git a/apps/jurumarble/src/app/vote/post/components/PostVoteContainer.tsx b/apps/jurumarble/src/app/vote/post/components/PostVoteContainer.tsx
@@ -9,7 +9,7 @@ import { Button, Input } from 'components/index';
 import { media } from 'lib/styles';
 import depths from 'lib/styles/depths';
 import Image from 'next/image';
-import { SvgIcX, SvgInfo } from 'src/assets/icons/components';
+import { SvgIcClose, SvgInfo } from 'src/assets/icons/components';
 import { DrinkInfoType } from 'src/types/drink';
 import styled, { css } from 'styled-components';
 
@@ -62,7 +62,7 @@ function PostVoteContainer() {
                 술 검색하기 버튼을 클릭하면 <br />
                 우리술을 편하게 등록할 수 있어요.
                 <button onClick={onToggleTooltip}>
-                  <SvgIcX width={16} height={16} />
+                  <SvgIcClose width={16} height={16} />
                 </button>
               </BalloonText>
             </Ballon>

diff --git a/apps/jurumarble/src/app/vote/post/components/SelectedDrinkChip.tsx b/apps/jurumarble/src/app/vote/post/components/SelectedDrinkChip.tsx
@@ -1,4 +1,4 @@
-import SvgIcX from 'src/assets/icons/components/IcX';
+import { SvgIcClose } from 'src/assets/icons/components';
 import styled, { css } from 'styled-components';
 
 interface Props {
@@ -11,7 +11,7 @@ function SelectedDrinkChip({ children, onClickDeleteItem }: Props) {
     <SelectedChip>
       <SelectedName>{children}</SelectedName>
       <SelectCancelButton onClick={onClickDeleteItem}>
-        <SvgIcX width={12} height={12} />
+        <SvgIcClose width={12} height={12} />
       </SelectCancelButton>
     </SelectedChip>
   );

diff --git a/apps/jurumarble/src/assets/icons/components/IcClose.tsx b/apps/jurumarble/src/assets/icons/components/IcClose.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react';
+
+const SvgIcClose = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <mask
+      id="mask0_406_18159"
+      style={{
+        maskType: 'alpha',
+      }}
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={24}
+      height={24}
+    >
+      <rect
+        width={24}
+        height={24}
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+    </mask>
+    <g mask="url(#mask0_406_18159)">
+      <path
+        d="M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z"
+        fill="currentColor"
+        vectorEffect="non-scaling-stroke"
+      />
+    </g>
+  </svg>
+);
+export default SvgIcClose;
diff --git a/apps/jurumarble/src/assets/icons/components/IcX.tsx b/apps/jurumarble/src/assets/icons/components/IcX.tsx
diff --git a/apps/jurumarble/src/assets/icons/components/index.ts b/apps/jurumarble/src/assets/icons/components/index.ts
@@ -3,6 +3,7 @@ export { default as SvgIcBookmark } from './IcBookmark';
 export { default as SvgIcCamera } from './IcCamera';
 export { default as SvgIcChat } from './IcChat';
 export { default as SvgIcCheck } from './IcCheck';
+export { default as SvgIcClose } from './IcClose';
 export { default as SvgIcDetail } from './IcDetail';
 export { default as SvgIcHome } from './IcHome';
 export { default as SvgKakaoIcon } from './IcKakaoIcon';
@@ -17,7 +18,6 @@ export { default as SvgIcPrevious } from './IcPrevious';
 export { default as SvgIcSearch } from './IcSearch';
 export { default as SvgStamp } from './IcStamp';
 export { default as SvgIcUser } from './IcUser';
-export { default as SvgIcX } from './IcX';
 export { default as SvgIcBookmarkActive } from './IcBookmarkActive';
 export { default as SvgLogo } from './IcLogo';
 export { default as SvgNotification } from './IcNotification';

diff --git a/apps/jurumarble/src/components/SearchInput.tsx b/apps/jurumarble/src/components/SearchInput.tsx
@@ -43,7 +43,7 @@ const SearchInput = forwardRef<HTMLInputElement, Props>(
         />
         <SearchButton onClick={eventHandler}>
           <SvgIcSearch width={22} height={22} fill={theme.colors.black_04} />
-          {/* <SvgIcX
+          {/* <SvgIcClose
             width={18}
             height={18}
             color="#CCCCCC"

diff --git a/apps/jurumarble/src/components/SideButtonHeader/SideButtonHeader.tsx b/apps/jurumarble/src/components/SideButtonHeader/SideButtonHeader.tsx
@@ -2,20 +2,21 @@ import { ReactNode } from 'react';
 
 import { getClassNames } from 'lib/styles/getClassNames';
 
+import styles from './styles.module.css';
+
 interface Props {
   leftButton?: ReactNode;
   children?: ReactNode;
   rightButton?: ReactNode;
 }
-import styles from './styles.module.css';
 
 const cx = getClassNames(styles);
 
 function SideButtonHeader({ leftButton, children, rightButton }: Props) {
   return (
-    <header className={cx('header', 'headline03')}>
+    <header className={cx('header')}>
       {leftButton ? leftButton : <div className={cx('empty-space')} />}
-      {children}
+      <span className={cx('headline03')}>{children}</span>
       {rightButton ? rightButton : <div className={cx('empty-space')} />}
     </header>
   );

diff --git a/apps/jurumarble/src/components/SideButtonHeader/styles.module.css b/apps/jurumarble/src/components/SideButtonHeader/styles.module.css
@@ -4,6 +4,7 @@
   align-items: center;
   justify-content: space-between;
   height: 48px;
+  padding: 0 20px;
 }
 
 .empty-space {