From 00b6f0b1d6157056da94370c3f06c517cf085cd5 Mon Sep 17 00:00:00 2001
From: Siwoo Lee <siwoo28@kakao.com>
Date: Sat, 1 Jun 2024 22:29:34 +0900
Subject: [PATCH] Refactor: onTouchEnd => onClick

---
 src/components/coffee/LogInCTA.tsx              |  2 +-
 src/components/common/Button.tsx                |  9 +--------
 src/components/common/CTA.tsx                   |  2 +-
 src/components/common/CoffeeOptionSelection.tsx |  8 ++++----
 src/components/common/FooterIcon.tsx            |  2 +-
 src/components/common/Header.tsx                |  2 +-
 src/components/common/HeaderCloseIcon.tsx       |  2 +-
 src/components/common/HeaderIcon.tsx            |  2 +-
 src/components/common/Icon.tsx                  |  3 ---
 src/components/common/ImgRegister.tsx           |  2 +-
 src/components/common/Input.tsx                 |  6 ++----
 src/components/common/ModalCTA.tsx              | 12 +++++-------
 src/components/common/SelectBox.tsx             | 10 +++++-----
 src/components/common/SelectBtn.tsx             |  6 +++---
 src/components/common/SelectOption.tsx          | 11 +++--------
 src/components/common/Taps.tsx                  |  6 +++---
 src/components/follow/FollowBtn.tsx             |  2 +-
 src/components/home/CaffeineFilter.tsx          |  2 +-
 src/components/home/CoffeeMenuSelection.tsx     |  8 ++++----
 src/components/home/CoffeeSelection.tsx         |  2 +-
 src/components/home/WaterIntake.tsx             |  2 +-
 src/components/home/WaterPerCoffee.tsx          |  2 +-
 src/components/mypage/MyProfile.tsx             |  4 ++--
 src/components/post/CafeDetail.tsx              |  8 ++++----
 src/components/post/CafeDetailContent.tsx       |  8 ++++----
 src/components/post/PostDetail.tsx              |  2 +-
 src/components/post/PostRegister.tsx            |  3 ++-
 src/components/post/ReplyToPanel.tsx            |  2 +-
 src/components/post/overlay/Option.tsx          |  8 ++++----
 src/components/post/overlay/PostOwnerOption.tsx |  4 ++--
 src/components/post/overlay/PublicOption.tsx    |  2 +-
 src/components/posts/following/PostBody.tsx     | 10 +++++-----
 src/components/posts/following/PostCard.tsx     |  2 +-
 src/components/posts/trend/DailyTrendCard.tsx   |  2 +-
 src/components/posts/trend/PostsSortBy.tsx      |  4 ++--
 src/components/profile/FollowCount.tsx          |  4 ++--
 src/components/profile/PostsGrid.tsx            |  6 +++---
 src/components/report/ReportReason.tsx          |  8 ++++----
 src/components/search/SearchBar.tsx             |  4 ++--
 src/components/start/BrandItem.tsx              |  4 ++--
 src/components/start/InitialForm.tsx            |  2 +-
 src/components/start/SelectFavBrand.tsx         |  2 +-
 src/components/start/SignIn.tsx                 | 10 +++++-----
 src/components/support/CustomerCenter.tsx       |  2 +-
 src/hooks/MyPage/useHandleAuth.ts               |  2 +-
 src/hooks/useSelectBox.ts                       |  4 ++--
 src/hooks/useSelectTap.tsx                      |  2 +-
 src/pages/Page-Error.tsx                        |  2 +-
 src/pages/Page-Follow.tsx                       |  2 +-
 src/pages/Page-Profile.tsx                      |  2 +-
 src/pages/Page-Report.tsx                       |  6 +++---
 src/types/types.ts                              |  7 +++----
 52 files changed, 106 insertions(+), 125 deletions(-)

diff --git a/src/components/coffee/LogInCTA.tsx b/src/components/coffee/LogInCTA.tsx
index ce4e65ba..4508961a 100644
--- a/src/components/coffee/LogInCTA.tsx
+++ b/src/components/coffee/LogInCTA.tsx
@@ -20,7 +20,7 @@ const LogInCTA = () => {
       <Text className={Regular}>{logInCTA.text}</Text>
       <Button
         text={logInCTA.btn}
-        onTouchEnd={handleSignInBtn}
+        onClick={handleSignInBtn}
         className={DefaultBtn}
       />
     </Container>
diff --git a/src/components/common/Button.tsx b/src/components/common/Button.tsx
index c04331e5..11be79f8 100644
--- a/src/components/common/Button.tsx
+++ b/src/components/common/Button.tsx
@@ -1,16 +1,9 @@
 import { ButtonProps } from '@/types/types';
 
-const Button = ({
-  value,
-  text,
-  onTouchEnd,
-  onClick,
-  className
-}: ButtonProps) => {
+const Button = ({ value, text, onClick, className }: ButtonProps) => {
   return (
     <button
       value={value}
-      onTouchEnd={onTouchEnd}
       onClick={onClick}
       className={className}>
       {text}
diff --git a/src/components/common/CTA.tsx b/src/components/common/CTA.tsx
index c81d14cd..0ccf17bc 100644
--- a/src/components/common/CTA.tsx
+++ b/src/components/common/CTA.tsx
@@ -29,7 +29,7 @@ const CTA = ({ text, actionText = '', btn = true, fn }: CTA) => {
         <Button
           className={cx(LoginBtn, BTN)}
           text={actionText}
-          onTouchEnd={handleActions}
+          onClick={handleActions}
         />
       )}
     </div>
diff --git a/src/components/common/CoffeeOptionSelection.tsx b/src/components/common/CoffeeOptionSelection.tsx
index 910adf49..2c311883 100644
--- a/src/components/common/CoffeeOptionSelection.tsx
+++ b/src/components/common/CoffeeOptionSelection.tsx
@@ -35,7 +35,7 @@ const CoffeeOptionSelection = () => {
   };
 
   // set coffee size info
-  const selectSize = (e: React.TouchEvent<HTMLButtonElement>) => {
+  const selectSize = (e: React.MouseEvent<HTMLButtonElement>) => {
     setRegisterData('size', e.currentTarget.value);
 
     const size =
@@ -85,7 +85,7 @@ const CoffeeOptionSelection = () => {
             key={item}
             value={item}
             text={item}
-            onTouchEnd={selectSize}
+            onClick={selectSize}
             className={cx(
               registInfo.size === item ? SelectSizeBtn : BtnColorWhite,
               SizeBtn,
@@ -109,7 +109,7 @@ const CoffeeOptionSelection = () => {
             {...iconPropsGenerator(
               !registInfo.shot ? 'input-minus' : 'input-minus:active'
             )}
-            onTouchEnd={selectMinusBtn}
+            onClick={selectMinusBtn}
           />
           <ShotOptionInput
             type="number"
@@ -121,7 +121,7 @@ const CoffeeOptionSelection = () => {
             {...iconPropsGenerator(
               registInfo.shot >= 5 ? 'input-plus' : 'input-plus:active'
             )}
-            onTouchEnd={selectPlusBtn}
+            onClick={selectPlusBtn}
           />
         </div>
       </ShotOptionInputContainer>
diff --git a/src/components/common/FooterIcon.tsx b/src/components/common/FooterIcon.tsx
index 6ee41d4d..ca29253a 100644
--- a/src/components/common/FooterIcon.tsx
+++ b/src/components/common/FooterIcon.tsx
@@ -62,7 +62,7 @@ const FooterIcon = ({ icon }: { icon: string }) => {
       {icon && (
         <div
           className={cx(Column, Center)}
-          onTouchEnd={handleTouch}>
+          onClick={handleTouch}>
           <Icon
             {...iconPropsGenerator(active === icon ? `${icon}-active` : icon)}
           />
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index c08f7d27..3e9a204a 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -22,7 +22,7 @@ const Header = () => {
 
   return (
     <Container className={cx(Between, Align)}>
-      <Left onTouchEnd={useNavigateTo('/')}>
+      <Left onClick={useNavigateTo('/')}>
         {logo && (
           <svg
             width={'80'}
diff --git a/src/components/common/HeaderCloseIcon.tsx b/src/components/common/HeaderCloseIcon.tsx
index 11e6e93e..efb2ca35 100644
--- a/src/components/common/HeaderCloseIcon.tsx
+++ b/src/components/common/HeaderCloseIcon.tsx
@@ -15,7 +15,7 @@ const HeaderCloseIcon = () => {
     <>
       <Icon
         {...iconPropsGenerator('close')}
-        onTouchEnd={handleTouch}></Icon>
+        onClick={handleTouch}></Icon>
     </>
   );
 };
diff --git a/src/components/common/HeaderIcon.tsx b/src/components/common/HeaderIcon.tsx
index 7535c957..45464a6f 100644
--- a/src/components/common/HeaderIcon.tsx
+++ b/src/components/common/HeaderIcon.tsx
@@ -18,7 +18,7 @@ const HeaderIcon = ({ icon }: { icon: string }) => {
       {icon && (
         <Icon
           {...iconPropsGenerator(icon)}
-          onTouchEnd={handleTouch}
+          onClick={handleTouch}
         />
       )}
     </>
diff --git a/src/components/common/Icon.tsx b/src/components/common/Icon.tsx
index 6d1950f5..b991d405 100644
--- a/src/components/common/Icon.tsx
+++ b/src/components/common/Icon.tsx
@@ -1,19 +1,16 @@
 const Icon = ({
   id,
   size,
-  onTouchEnd,
   onClick
 }: {
   id: string;
   size: string;
-  onTouchEnd?: any;
   onClick?: any;
 }) => {
   return (
     <svg
       width={size}
       height={size}
-      onTouchEnd={onTouchEnd}
       onClick={onClick}>
       <use href={`/sprite.svg#${id}`} />
     </svg>
diff --git a/src/components/common/ImgRegister.tsx b/src/components/common/ImgRegister.tsx
index af4785ff..31296423 100644
--- a/src/components/common/ImgRegister.tsx
+++ b/src/components/common/ImgRegister.tsx
@@ -34,7 +34,7 @@ const ImgRegister = ({
           <Img
             src={imageUrl}
             alt="posted coffee"
-            onTouchEnd={resetImage}
+            onClick={resetImage}
           />
         </PostImgContainer>
       )}
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
index 5c2de206..cf6dd144 100644
--- a/src/components/common/Input.tsx
+++ b/src/components/common/Input.tsx
@@ -31,8 +31,7 @@ export const Input = ({
         <button
           className={cx(nicknameBtn, InputFontSm)}
           type="button"
-          onClick={handleEvent}
-          onTouchEnd={handleEvent}>
+          onClick={handleEvent}>
           {nickname.btnText}
         </button>
       );
@@ -43,8 +42,7 @@ export const Input = ({
       submitBtn = (
         <button
           type="button"
-          // onClick={handleEvent}
-          onTouchEnd={handleEvent}>
+          onClick={handleEvent}>
           <Icon {...iconPropsGenerator('upload')} />
         </button>
       );
diff --git a/src/components/common/ModalCTA.tsx b/src/components/common/ModalCTA.tsx
index 6c5e3303..09bf157b 100644
--- a/src/components/common/ModalCTA.tsx
+++ b/src/components/common/ModalCTA.tsx
@@ -26,7 +26,7 @@ const ModalCTA = ({
   text: string;
   subBtnText?: string;
   isConfirm?: boolean;
-  fn: React.TouchEventHandler<HTMLButtonElement>;
+  fn: React.MouseEventHandler<HTMLButtonElement>;
 }) => {
   const [isModal, setIsModal] = useRecoilState(isModalState);
 
@@ -38,12 +38,12 @@ const ModalCTA = ({
     <ConfirmContainer className={cx(Flex, Between)}>
       <Button
         text={'돌아가기'}
-        onTouchEnd={HandleOnclick}
+        onClick={HandleOnclick}
         className={cx(RegistBtn, BackBtn)}
       />
       <Button
         text={'탈퇴하기'}
-        onTouchEnd={handleActions}
+        onClick={handleActions}
         className={RegistBtn}
       />
     </ConfirmContainer>
@@ -52,7 +52,7 @@ const ModalCTA = ({
   const DefalutBtn = (
     <Button
       text={actionText}
-      onTouchEnd={handleActions}
+      onClick={handleActions}
       className={RegistBtn}
     />
   );
@@ -73,9 +73,7 @@ const ModalCTA = ({
             </TextContainer>
             {!isConfirm ? DefalutBtn : confirmDeleteAuth}
           </Container>
-          <SubBtn onTouchEnd={HandleOnclick}>
-            {subBtnText || signIn.subBtn}
-          </SubBtn>
+          <SubBtn onClick={HandleOnclick}>{subBtnText || signIn.subBtn}</SubBtn>
         </ModalContainer>
       </BackgroundLayer>
     )
diff --git a/src/components/common/SelectBox.tsx b/src/components/common/SelectBox.tsx
index a1b03a73..b8d3c83d 100644
--- a/src/components/common/SelectBox.tsx
+++ b/src/components/common/SelectBox.tsx
@@ -8,15 +8,15 @@ const SelectBox = ({
   value: selectedValue,
   defaultValue,
   data,
-  onTouchEnd: handleTouch
+  onClick: handleClick
 }: {
   value?: string;
   defaultValue: string;
   data: string[];
-  onTouchEnd: React.TouchEventHandler<HTMLElement>;
+  onClick: React.MouseEventHandler<HTMLElement>;
 }) => {
   const selectRef = useRef<HTMLButtonElement>(null);
-  const { isSelect, handleSelectTouch } = useSelectBox(selectRef);
+  const { isSelect, handleSelectClick } = useSelectBox(selectRef);
   const disabled = data === undefined && true;
 
   return (
@@ -26,13 +26,13 @@ const SelectBox = ({
         selectedValue={selectedValue}
         defalutValue={defaultValue}
         isSelect={isSelect}
-        onTouchEnd={handleSelectTouch}
+        onClick={handleSelectClick}
         disabled={disabled}
       />
       <SelectOption
         data={data}
         isSelect={isSelect}
-        onTouchEnd={handleTouch}
+        onClick={handleClick}
       />
     </SelectBoxContainer>
   );
diff --git a/src/components/common/SelectBtn.tsx b/src/components/common/SelectBtn.tsx
index e785814d..b2687e79 100644
--- a/src/components/common/SelectBtn.tsx
+++ b/src/components/common/SelectBtn.tsx
@@ -11,14 +11,14 @@ const SelectBtn = ({
   selectedValue,
   isSelect,
   selectRef,
-  onTouchEnd: handleTouch,
+  onClick: handleTouch,
   disabled
 }: {
   defalutValue: string;
   selectedValue?: string;
   isSelect: boolean;
   selectRef: React.RefObject<HTMLButtonElement>;
-  onTouchEnd: React.TouchEventHandler<HTMLButtonElement>;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
   disabled: boolean;
 }) => {
   return (
@@ -32,7 +32,7 @@ const SelectBtn = ({
             ? OnSelectBorder
             : DefaultBorder
       )}
-      onTouchEnd={handleTouch}
+      onClick={handleTouch}
       ref={selectRef}>
       <DefalutOption className={cx(Flex, SelectInput, SmStyle)}>
         {convertBrandName(selectedValue || defalutValue)}
diff --git a/src/components/common/SelectOption.tsx b/src/components/common/SelectOption.tsx
index 48cb9822..bb3b6439 100644
--- a/src/components/common/SelectOption.tsx
+++ b/src/components/common/SelectOption.tsx
@@ -6,17 +6,12 @@ import { Column } from '@/styles/layout';
 const SelectOption = ({
   data,
   isSelect,
-  onTouchEnd
+  onClick: handleCilck
 }: {
   data: string[];
   isSelect: boolean;
-
-  onTouchEnd: React.TouchEventHandler<HTMLElement>;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
 }) => {
-  const handleTouch = (e: React.TouchEvent<HTMLButtonElement>) => {
-    onTouchEnd(e);
-  };
-
   return (
     <div>
       {isSelect && (
@@ -26,7 +21,7 @@ const SelectOption = ({
               data.map(item => (
                 <SelectOptionItem
                   key={item}
-                  onTouchEnd={handleTouch}
+                  onClick={handleCilck}
                   value={item}>
                   {convertBrandName(item)}
                 </SelectOptionItem>
diff --git a/src/components/common/Taps.tsx b/src/components/common/Taps.tsx
index 979c26f8..593d6bee 100644
--- a/src/components/common/Taps.tsx
+++ b/src/components/common/Taps.tsx
@@ -6,18 +6,18 @@ import { SelectedTap, DefaultTap } from '@/styles/styles';
 const Taps = ({
   taps,
   selectedTab,
-  handleButtonTouch
+  handleButtonClick
 }: {
   taps: Array<string>;
   selectedTab: string;
-  handleButtonTouch: (e: React.TouchEvent<HTMLButtonElement>) => void;
+  handleButtonClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }) => {
   return (
     <TabContainer className={cx(Flex, Between)}>
       {taps.map(item => (
         <TapItem
           className={cx(selectedTab === item ? SelectedTap : DefaultTap)}
-          onTouchEnd={handleButtonTouch}
+          onClick={handleButtonClick}
           value={item}
           key={item}>
           <TapTitle>{item}</TapTitle>
diff --git a/src/components/follow/FollowBtn.tsx b/src/components/follow/FollowBtn.tsx
index 080fabe3..08d2f292 100644
--- a/src/components/follow/FollowBtn.tsx
+++ b/src/components/follow/FollowBtn.tsx
@@ -38,7 +38,7 @@ const FollowBtn = ({ userId }: { userId: string | undefined }) => {
     <>
       <Button
         text={isFollowing && isFollowing.data ? following : follow2}
-        onTouchEnd={handleFollowUser}
+        onClick={handleFollowUser}
         className={cx(
           FollowBtnCommon,
           isFollowing && isFollowing.data ? FollowingBtnStyle : FollowBtnStyle
diff --git a/src/components/home/CaffeineFilter.tsx b/src/components/home/CaffeineFilter.tsx
index 6a79edaf..e9f8bdbb 100644
--- a/src/components/home/CaffeineFilter.tsx
+++ b/src/components/home/CaffeineFilter.tsx
@@ -19,7 +19,7 @@ const CaffeineFilter = () => {
       {signedIn && (
         <Button
           text={BUTTON_TEXTS.regist}
-          onTouchEnd={registPage}
+          onClick={registPage}
           className={cx(RegistBtn, MarginBottom)}
         />
       )}
diff --git a/src/components/home/CoffeeMenuSelection.tsx b/src/components/home/CoffeeMenuSelection.tsx
index c5f926f5..bc46b4fe 100644
--- a/src/components/home/CoffeeMenuSelection.tsx
+++ b/src/components/home/CoffeeMenuSelection.tsx
@@ -63,7 +63,7 @@ const CoffeeMenuSelection = () => {
   const menuList = coffeeData && getMenuList(registInfo.brand);
 
   // 커피 브랜드 선택
-  const selectBrand = (e: React.TouchEvent<HTMLButtonElement>) => {
+  const selectBrand = (e: React.MouseEvent<HTMLButtonElement>) => {
     getMenuList(e.currentTarget.value);
     setRegisterData('brand', e.currentTarget.value);
     setCaffeineInfo(0);
@@ -80,7 +80,7 @@ const CoffeeMenuSelection = () => {
   };
 
   // 커피 메뉴 선택
-  const selectMenu = (e: React.TouchEvent<HTMLButtonElement>) => {
+  const selectMenu = (e: React.MouseEvent<HTMLButtonElement>) => {
     getMenuInfo(e.currentTarget.value);
     setRegisterData('menu', e.currentTarget.value);
   };
@@ -99,13 +99,13 @@ const CoffeeMenuSelection = () => {
           value={registInfo.brand}
           defaultValue={registInfo.brand || coffeeMenu.brand}
           data={brandList}
-          onTouchEnd={selectBrand}
+          onClick={selectBrand}
         />
         <SelectBox
           value={registInfo.menu}
           defaultValue={coffeeMenu.menu}
           data={menuList}
-          onTouchEnd={selectMenu}
+          onClick={selectMenu}
         />
       </CoffeeSelectContainer>
     </div>
diff --git a/src/components/home/CoffeeSelection.tsx b/src/components/home/CoffeeSelection.tsx
index ec1fdeab..bdd349ec 100644
--- a/src/components/home/CoffeeSelection.tsx
+++ b/src/components/home/CoffeeSelection.tsx
@@ -21,7 +21,7 @@ const CoffeeSelection = () => {
         <span>{title.title}</span>
         <ResetBtn
           className={cx(Align, SumBoardTitle)}
-          onTouchEnd={touchResetBtn}>
+          onClick={touchResetBtn}>
           <Icon {...iconPropsGenerator('reset', '14')} />
           {title.resetBtn}
         </ResetBtn>
diff --git a/src/components/home/WaterIntake.tsx b/src/components/home/WaterIntake.tsx
index aa3af4e0..3b075fee 100644
--- a/src/components/home/WaterIntake.tsx
+++ b/src/components/home/WaterIntake.tsx
@@ -53,7 +53,7 @@ const WaterIntake = ({ coffeeCount }: { coffeeCount: number | undefined }) => {
           src="/png/waterCup.png"
           alt="water"
         />
-        <IconContainer onTouchEnd={touchPlusIcon}>
+        <IconContainer onClick={touchPlusIcon}>
           <Icon {...iconPropsGenerator('plus')} />
         </IconContainer>
       </CircularProgressbarWithChildren>
diff --git a/src/components/home/WaterPerCoffee.tsx b/src/components/home/WaterPerCoffee.tsx
index 57873725..dcbc2670 100644
--- a/src/components/home/WaterPerCoffee.tsx
+++ b/src/components/home/WaterPerCoffee.tsx
@@ -47,7 +47,7 @@ const WaterPerCoffee = () => {
       <span className={AlertMessage}>{signedIn.card.notConsumed}</span>
       <Button
         text={signedIn.btn}
-        onTouchEnd={useNavigateTo('/post/register')}
+        onClick={useNavigateTo('/post/register')}
         className={RegistCoffeeBtn}
       />
     </div>
diff --git a/src/components/mypage/MyProfile.tsx b/src/components/mypage/MyProfile.tsx
index 2ff84a57..9ea1a6bd 100644
--- a/src/components/mypage/MyProfile.tsx
+++ b/src/components/mypage/MyProfile.tsx
@@ -117,7 +117,7 @@ const MyProfile = () => {
           <ExitButton
             key={item}
             className={cx(Cursor, SumType)}
-            onTouchEnd={item === btn[0] ? handleDeleteAccount : handleSignOut}>
+            onClick={item === btn[0] ? handleDeleteAccount : handleSignOut}>
             {item}
           </ExitButton>
         ))}
@@ -126,7 +126,7 @@ const MyProfile = () => {
       <ButtonArea className={Justify}>
         <SaveButton
           className={cx(FlexCenter, Cursor, Border16, HomeRegistContainer)}
-          onTouchEnd={handlClickBtn(
+          onClick={handlClickBtn(
             `user/${userId}`,
             imageFile ? imageFile : null,
             storagePath
diff --git a/src/components/post/CafeDetail.tsx b/src/components/post/CafeDetail.tsx
index 7b345c35..6d3b9943 100644
--- a/src/components/post/CafeDetail.tsx
+++ b/src/components/post/CafeDetail.tsx
@@ -1,6 +1,6 @@
 import { cx } from 'styled-system/css';
 import { Column } from '@/styles/layout';
-import { CafeDetail } from '@/types/types';
+import { CafeDetailTypes } from '@/types/types';
 import CafeDetailContent from '@/components/post/CafeDetailContent';
 
 const CafeDetail = ({
@@ -10,15 +10,15 @@ const CafeDetail = ({
   menu,
   shot,
   posts = false,
-  onTouchEnd
-}: CafeDetail) => {
+  onClick
+}: CafeDetailTypes) => {
   const CafeDetailProps = {
     brand,
     caffeine,
     menu,
     shot,
     posts,
-    onTouchEnd
+    onClick
   };
   return (
     <div className={cx(Column, className)}>
diff --git a/src/components/post/CafeDetailContent.tsx b/src/components/post/CafeDetailContent.tsx
index b8ceb265..29781ab8 100644
--- a/src/components/post/CafeDetailContent.tsx
+++ b/src/components/post/CafeDetailContent.tsx
@@ -9,11 +9,11 @@ import {
   CaffeineDetail,
   ColorMain
 } from '@/styles/styles';
-import { CafeDetail } from '@/types/types';
+import { CafeDetailTypes } from '@/types/types';
 import { iconPropsGenerator } from '@/utils/iconPropsGenerator';
 import { cx } from 'styled-system/css';
 
-interface CafeDetailContent extends CafeDetail {
+interface CafeDetailContent extends CafeDetailTypes {
   mini?: boolean;
 }
 
@@ -24,7 +24,7 @@ const CafeDetailContent = ({
   mini = false,
   posts,
   brand,
-  onTouchEnd,
+  onClick,
   menu,
   caffeine,
   shot
@@ -37,7 +37,7 @@ const CafeDetailContent = ({
       </div>
       <div
         className={CaffeineDetail}
-        onClick={onTouchEnd}>
+        onClick={onClick}>
         {`${menu} ${shot !== '0' ? `(+${shot}` : ''}${
           shot !== '0' ? '샷)' : ''
         }`}
diff --git a/src/components/post/PostDetail.tsx b/src/components/post/PostDetail.tsx
index 7517cfe3..2630ab29 100644
--- a/src/components/post/PostDetail.tsx
+++ b/src/components/post/PostDetail.tsx
@@ -95,7 +95,7 @@ const PostDetail = ({ postNum }: { postNum: string }) => {
             />
             <Icon
               {...iconPropsGenerator('user-more')}
-              onTouchEnd={cancelOptions}
+              onClick={cancelOptions}
             />
           </UserProfile>
           <DetailImg src={postData?.data.photo} />
diff --git a/src/components/post/PostRegister.tsx b/src/components/post/PostRegister.tsx
index f8c40d4c..17011db8 100644
--- a/src/components/post/PostRegister.tsx
+++ b/src/components/post/PostRegister.tsx
@@ -168,7 +168,7 @@ const PostRegister = ({
 
       <Button
         text={!update ? BUTTON_TEXTS.regist : BUTTON_TEXTS.update}
-        onTouchEnd={userId && clickRegisterBtn}
+        onClick={userId && clickRegisterBtn}
         className={cx(
           imageFile && caffeine
             ? undefined
@@ -185,6 +185,7 @@ const PostRegister = ({
 
 const Container = styled.div`
   padding-bottom: 28px;
+  margin-bottom: 20px;
   overflow-x: visible;
   overflow-y: auto;
 `;
diff --git a/src/components/post/ReplyToPanel.tsx b/src/components/post/ReplyToPanel.tsx
index d7b29a0c..27e81b57 100644
--- a/src/components/post/ReplyToPanel.tsx
+++ b/src/components/post/ReplyToPanel.tsx
@@ -29,7 +29,7 @@ const ReplyToPanel = () => {
           </PanelText>
           <Icon
             {...iconPropsGenerator('reply-close', '18')}
-            onTouchEnd={reset}
+            onClick={reset}
           />
         </Panel>
       )}
diff --git a/src/components/post/overlay/Option.tsx b/src/components/post/overlay/Option.tsx
index 4cd23bd6..39b6b404 100644
--- a/src/components/post/overlay/Option.tsx
+++ b/src/components/post/overlay/Option.tsx
@@ -7,11 +7,11 @@ import { styled } from 'styled-system/jsx';
 export const Option = ({
   icon,
   option,
-  onTouchEnd
+  onClick
 }: {
   icon: string;
   option: string;
-  onTouchEnd:
+  onClick:
     | (() => void)
     | ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void);
 }) => {
@@ -19,9 +19,9 @@ export const Option = ({
     <div className={cx(Flex, Align)}>
       <Icon
         {...iconPropsGenerator(`${icon}`)}
-        onTouchEnd={onTouchEnd}
+        onClick={onClick}
       />
-      <OptionText onClick={onTouchEnd}>{option}</OptionText>
+      <OptionText onClick={onClick}>{option}</OptionText>
     </div>
   );
 };
diff --git a/src/components/post/overlay/PostOwnerOption.tsx b/src/components/post/overlay/PostOwnerOption.tsx
index c9bb549c..a354af44 100644
--- a/src/components/post/overlay/PostOwnerOption.tsx
+++ b/src/components/post/overlay/PostOwnerOption.tsx
@@ -35,12 +35,12 @@ const PostOwnerOption = ({
         <Option
           icon="update-post"
           option="수정하기"
-          onTouchEnd={handleUpdate}
+          onClick={handleUpdate}
         />
         <Option
           icon="delete-post"
           option="삭제"
-          onTouchEnd={confirmDelete}
+          onClick={confirmDelete}
         />
       </PostOptions>
     </BackgroundLayer>
diff --git a/src/components/post/overlay/PublicOption.tsx b/src/components/post/overlay/PublicOption.tsx
index c2feccf2..e6e1c6a2 100644
--- a/src/components/post/overlay/PublicOption.tsx
+++ b/src/components/post/overlay/PublicOption.tsx
@@ -21,7 +21,7 @@ const PublicOption = ({
         <Option
           icon="report"
           option="신고하기"
-          onTouchEnd={handleReport}
+          onClick={handleReport}
         />
       </PostOptions>
     </BackgroundLayer>
diff --git a/src/components/posts/following/PostBody.tsx b/src/components/posts/following/PostBody.tsx
index ee700422..b4e960b3 100644
--- a/src/components/posts/following/PostBody.tsx
+++ b/src/components/posts/following/PostBody.tsx
@@ -16,11 +16,11 @@ const PostBody = ({
   shot,
   menu,
   brand,
-  onTouchEnd
+  onClick
 }: Pick<
   FollowingPost,
   'postTitle' | 'photo' | 'caffeine' | 'shot' | 'menu' | 'brand'
-> & { onTouchEnd: () => void }) => {
+> & { onClick: () => void }) => {
   const CafeDetailProps = {
     brand,
     caffeine,
@@ -28,7 +28,7 @@ const PostBody = ({
     menu,
     className: PaddingT12,
     posts: true,
-    onTouchEnd
+    onClick
   };
 
   const { isError, handleImgError, setUrl, handleReloadImg, reloadPhoto } =
@@ -41,7 +41,7 @@ const PostBody = ({
 
   return (
     <>
-      <PostContent onClick={onTouchEnd}>{postTitle}</PostContent>
+      <PostContent onClick={onClick}>{postTitle}</PostContent>
       {isError ? (
         <ImgErrorContainer>
           <ImageErrorCTA
@@ -52,7 +52,7 @@ const PostBody = ({
       ) : (
         <PostImg
           src={reloadPhoto || photo}
-          onClick={onTouchEnd}
+          onClick={onClick}
           onError={handleOnError}
         />
       )}
diff --git a/src/components/posts/following/PostCard.tsx b/src/components/posts/following/PostCard.tsx
index 073ed472..92b2e74d 100644
--- a/src/components/posts/following/PostCard.tsx
+++ b/src/components/posts/following/PostCard.tsx
@@ -100,7 +100,7 @@ const PostCard = ({ ...props }: FollowingPost) => {
 
         <PostBody
           {...PostBodyProps}
-          onTouchEnd={handleToPost}
+          onClick={handleToPost}
         />
 
         <div>
diff --git a/src/components/posts/trend/DailyTrendCard.tsx b/src/components/posts/trend/DailyTrendCard.tsx
index 90095085..a479b347 100644
--- a/src/components/posts/trend/DailyTrendCard.tsx
+++ b/src/components/posts/trend/DailyTrendCard.tsx
@@ -24,7 +24,7 @@ const DailyTrendCard = ({ post }: { post: DailyTrendCardProps }) => {
         menu={post.menu}
         shot={post.shot}
         caffeine={post.caffeine}
-        onTouchEnd={toPost}
+        onClick={toPost}
       />
     </div>
   );
diff --git a/src/components/posts/trend/PostsSortBy.tsx b/src/components/posts/trend/PostsSortBy.tsx
index ba060a6e..038f6dbb 100644
--- a/src/components/posts/trend/PostsSortBy.tsx
+++ b/src/components/posts/trend/PostsSortBy.tsx
@@ -20,7 +20,7 @@ const PostsSortBy = ({
     <div className={Container}>
       <span
         className={sort ? Candidate : cx(Selected, Semibold)}
-        onTouchEnd={sortPopular}>
+        onClick={sortPopular}>
         {TREND_TEXTS.popularity}
       </span>
 
@@ -28,7 +28,7 @@ const PostsSortBy = ({
 
       <span
         className={sort ? cx(Selected, Semibold) : Candidate}
-        onTouchEnd={sortRecent}>
+        onClick={sortRecent}>
         {TREND_TEXTS.latest}
       </span>
     </div>
diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
index 956cf426..219743f3 100644
--- a/src/components/profile/FollowCount.tsx
+++ b/src/components/profile/FollowCount.tsx
@@ -67,7 +67,7 @@ const FollowCount = ({ data }: FollowCountProps) => {
               Column,
               index === count.length - 1 ? 'lastStat' : ''
             )}
-            onTouchEnd={handleStatClick(item.label)}>
+            onClick={handleStatClick(item.label)}>
             <StatNumber className={RecentSearch}>{item.number}</StatNumber>
             <StatLabel className={SumType}>{item.label}</StatLabel>
           </Stat>
@@ -76,7 +76,7 @@ const FollowCount = ({ data }: FollowCountProps) => {
       {signedIn && userId !== profileId && (
         <Button
           text={isFollowing ? following : follow1}
-          onTouchEnd={handleFollowBtn}
+          onClick={handleFollowBtn}
           className={cx(MarginTop, isFollowing ? FollowingBtn : FollowBtn)}
         />
       )}
diff --git a/src/components/profile/PostsGrid.tsx b/src/components/profile/PostsGrid.tsx
index a47b5e31..32524db8 100644
--- a/src/components/profile/PostsGrid.tsx
+++ b/src/components/profile/PostsGrid.tsx
@@ -16,8 +16,8 @@ const PostsGrid = ({ data, postRef }: PostsGridProps) => {
 
   const { isError, refresh, handleImgError } = useImgErrorCTA();
 
-  const touchImg: React.TouchEventHandler<HTMLImageElement> = (
-    e: React.TouchEvent<HTMLImageElement>
+  const touchImg: React.MouseEventHandler<HTMLImageElement> = (
+    e: React.MouseEvent<HTMLImageElement>
   ) => {
     navigate(`/post/${e.currentTarget.id}`);
   };
@@ -40,7 +40,7 @@ const PostsGrid = ({ data, postRef }: PostsGridProps) => {
                   className={Cursor}
                   key={item.postId}
                   id={item.postId}
-                  onTouchEnd={touchImg}
+                  onClick={touchImg}
                   onError={handleImgError}
                   src={item.photo}
                 />
diff --git a/src/components/report/ReportReason.tsx b/src/components/report/ReportReason.tsx
index 92e76a9f..75e34d6d 100644
--- a/src/components/report/ReportReason.tsx
+++ b/src/components/report/ReportReason.tsx
@@ -9,9 +9,9 @@ import { Semibold } from '@/styles/styles';
 const { reason, title } = POST_REPORT_TEXTS;
 
 const ReportReason = ({
-  handleOnTouchEnd: handleSelectOption
+  handleOnClick: handleSelectOption
 }: {
-  handleOnTouchEnd: React.TouchEventHandler<HTMLElement>;
+  handleOnClick: React.MouseEventHandler<HTMLElement>;
 }) => {
   return (
     <SelecteRadioBtn>
@@ -26,13 +26,13 @@ const ReportReason = ({
                 type="radio"
                 name="options"
                 id={item}
-                onTouchEnd={handleSelectOption}
+                onClick={handleSelectOption}
               />
             </RadioBtn>
             <label
               htmlFor={item}
               id={item}
-              onTouchEnd={handleSelectOption}>
+              onClick={handleSelectOption}>
               {item}
             </label>
           </RadioContainer>
diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx
index 41a5c4ac..df76c64a 100644
--- a/src/components/search/SearchBar.tsx
+++ b/src/components/search/SearchBar.tsx
@@ -40,7 +40,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
           {search && (
             <IconDelete
               className={FlexCenter}
-              onTouchEnd={reset}>
+              onClick={reset}>
               <Icon {...iconPropsGenerator('input-delete', '24')} />
             </IconDelete>
           )}
@@ -50,7 +50,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
             <Button
               className={cx(FlexCenter, CancelBtn)}
               text={SEARCH_TEXTS.moveToHome}
-              onTouchEnd={navigate}
+              onClick={navigate}
             />
           </div>
         )}
diff --git a/src/components/start/BrandItem.tsx b/src/components/start/BrandItem.tsx
index 4d0fe1ce..43e6cb1d 100644
--- a/src/components/start/BrandItem.tsx
+++ b/src/components/start/BrandItem.tsx
@@ -12,7 +12,7 @@ import { SmStyle } from '@/styles/styles';
 const BrandItem = (brandInfo: BrnadItemProps) => {
   const [userInit, setUserInit] = useRecoilState(authState);
 
-  const selectBrand: React.TouchEventHandler<HTMLDivElement> = e => {
+  const selectBrand: React.MouseEventHandler<HTMLDivElement> = e => {
     const selectedFavBrand = {
       ...userInit,
       brand: e.currentTarget.id
@@ -32,7 +32,7 @@ const BrandItem = (brandInfo: BrnadItemProps) => {
     <Container>
       <ItemContainer
         id={brandInfo.brand}
-        onTouchEnd={selectBrand}
+        onClick={selectBrand}
         className={cx(
           userInit.brand === brandInfo.brand
             ? SelectedBrandContainer
diff --git a/src/components/start/InitialForm.tsx b/src/components/start/InitialForm.tsx
index 7ff39aab..346dcb4e 100644
--- a/src/components/start/InitialForm.tsx
+++ b/src/components/start/InitialForm.tsx
@@ -96,7 +96,7 @@ const InitialForm = () => {
       </div>
       <Button
         text={BUTTON_TEXTS.next}
-        onTouchEnd={
+        onClick={
           userInit?.nickname && isApproval
             ? handleNextPage
             : () => navigate('/start/2')
diff --git a/src/components/start/SelectFavBrand.tsx b/src/components/start/SelectFavBrand.tsx
index 35656834..bec5e7f5 100644
--- a/src/components/start/SelectFavBrand.tsx
+++ b/src/components/start/SelectFavBrand.tsx
@@ -91,7 +91,7 @@ const SelectFavBrand = () => {
 
       <Button
         text={BUTTON_TEXTS.start}
-        onTouchEnd={handleStartBtn(imageFile)}
+        onClick={handleStartBtn(imageFile)}
         className={user.brand ? DefaultBtn : cx(DefaultBtn, DisabledBtn)}
       />
     </>
diff --git a/src/components/start/SignIn.tsx b/src/components/start/SignIn.tsx
index fa90e622..e4023690 100644
--- a/src/components/start/SignIn.tsx
+++ b/src/components/start/SignIn.tsx
@@ -29,8 +29,8 @@ const SignIn = () => {
   const navToHome = useNavigateTo('/');
   const navToSignUp = useNavigateTo('/start/2');
 
-  const handleSocialAuth: React.TouchEventHandler<HTMLButtonElement> = async (
-    e: React.TouchEvent<HTMLButtonElement>
+  const handleSocialAuth: React.MouseEventHandler<HTMLButtonElement> = async (
+    e: React.MouseEvent<HTMLButtonElement>
   ) => {
     try {
       const social = e.currentTarget.value;
@@ -78,7 +78,7 @@ const SignIn = () => {
         <KakaoBtn
           value="kakao"
           className={SignInBtn}
-          onTouchEnd={handleSocialAuth}>
+          onClick={handleSocialAuth}>
           <IconContiner>
             <Icon {...iconPropsGenerator('kakao', '18')} />
           </IconContiner>
@@ -87,7 +87,7 @@ const SignIn = () => {
         <GoogleBtn
           value="google"
           className={cx(SignInBtn, FlexCenter)}
-          onTouchEnd={handleSocialAuth}>
+          onClick={handleSocialAuth}>
           <IconContiner>
             <Icon {...iconPropsGenerator('google', '18')} />
           </IconContiner>
@@ -95,7 +95,7 @@ const SignIn = () => {
         </GoogleBtn>
         <button
           className={NoneBtn}
-          onTouchEnd={useNavigateTo('/')}>
+          onClick={useNavigateTo('/')}>
           {signInBtn.none}
         </button>
       </SignInBtnContainer>
diff --git a/src/components/support/CustomerCenter.tsx b/src/components/support/CustomerCenter.tsx
index 63393b11..ebf81b74 100644
--- a/src/components/support/CustomerCenter.tsx
+++ b/src/components/support/CustomerCenter.tsx
@@ -18,7 +18,7 @@ const CustomerCenter = () => {
       <Taps
         taps={taps}
         selectedTab={seletedTap}
-        handleButtonTouch={handleSelectTap}
+        handleButtonClick={handleSelectTap}
       />
       {seletedTap === taps[0] ? <Notice /> : <FAQ />}
     </>
diff --git a/src/hooks/MyPage/useHandleAuth.ts b/src/hooks/MyPage/useHandleAuth.ts
index 7563bd36..b9ce97a8 100644
--- a/src/hooks/MyPage/useHandleAuth.ts
+++ b/src/hooks/MyPage/useHandleAuth.ts
@@ -42,7 +42,7 @@ export const useHandleAuth = () => {
     setIsConfirm(!isConfirm);
   };
 
-  const handleDeleteAccount = (e: React.TouchEvent<HTMLButtonElement>) => {
+  const handleDeleteAccount = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (!isModal) {
       e.preventDefault();
       setIsModal(true);
diff --git a/src/hooks/useSelectBox.ts b/src/hooks/useSelectBox.ts
index 431935cc..290eff71 100644
--- a/src/hooks/useSelectBox.ts
+++ b/src/hooks/useSelectBox.ts
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 export const useSelectBox = (selectRef: React.RefObject<HTMLButtonElement>) => {
   const [isSelect, setIsSelect] = useState(false);
 
-  const handleSelectTouch = () => {
+  const handleSelectClick = () => {
     setIsSelect(!isSelect);
     if (selectRef.current) {
       selectRef.current.focus();
@@ -27,5 +27,5 @@ export const useSelectBox = (selectRef: React.RefObject<HTMLButtonElement>) => {
     };
   }, []);
 
-  return { isSelect, handleSelectTouch };
+  return { isSelect, handleSelectClick };
 };
diff --git a/src/hooks/useSelectTap.tsx b/src/hooks/useSelectTap.tsx
index a5531374..aaa3c5ba 100644
--- a/src/hooks/useSelectTap.tsx
+++ b/src/hooks/useSelectTap.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 export const useSelectTap = (initial: string) => {
   const [seletedTap, setSelectedTap] = useState(initial);
 
-  const handleSelectTap = (e: React.TouchEvent<HTMLButtonElement>) => {
+  const handleSelectTap = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     setSelectedTap(e.currentTarget?.value);
   };
diff --git a/src/pages/Page-Error.tsx b/src/pages/Page-Error.tsx
index d6fd5971..e3696624 100644
--- a/src/pages/Page-Error.tsx
+++ b/src/pages/Page-Error.tsx
@@ -26,7 +26,7 @@ const Error = () => {
       <Button
         text={home}
         className={cx(DefaultBtn)}
-        onTouchEnd={useNavigateTo('/')}
+        onClick={useNavigateTo('/')}
       />
     </Container>
   );
diff --git a/src/pages/Page-Follow.tsx b/src/pages/Page-Follow.tsx
index 60f9d983..13fe8651 100644
--- a/src/pages/Page-Follow.tsx
+++ b/src/pages/Page-Follow.tsx
@@ -46,7 +46,7 @@ const Follow: React.FC<FollowCountProps> = () => {
         <Taps
           taps={taps}
           selectedTab={seletedTap}
-          handleButtonTouch={handleSelectTap}
+          handleButtonClick={handleSelectTap}
         />
       )}
       <UserListItem
diff --git a/src/pages/Page-Profile.tsx b/src/pages/Page-Profile.tsx
index f576af68..735ea657 100644
--- a/src/pages/Page-Profile.tsx
+++ b/src/pages/Page-Profile.tsx
@@ -31,7 +31,7 @@ const Profile = () => {
   const goToSignIn = useNavigateTo('/start/1');
   const nonMembers = profileId === nonMemberId;
 
-  const handleActions: React.TouchEventHandler<HTMLButtonElement> = () => {
+  const handleActions: React.MouseEventHandler<HTMLButtonElement> = () => {
     goToSignIn();
   };
 
diff --git a/src/pages/Page-Report.tsx b/src/pages/Page-Report.tsx
index e22a4243..0e74dc55 100644
--- a/src/pages/Page-Report.tsx
+++ b/src/pages/Page-Report.tsx
@@ -38,7 +38,7 @@ const Report = () => {
     setInputValue(e.target.value);
   };
 
-  const handleSelectOption = (e: React.TouchEvent<HTMLElement>) => {
+  const handleSelectOption = (e: React.MouseEvent<HTMLElement>) => {
     setselectOption(e.currentTarget.id);
   };
 
@@ -78,7 +78,7 @@ const Report = () => {
     <>
       <SEOMeta pageData={pageData} />
       <Container className={Column}>
-        <ReportReason handleOnTouchEnd={handleSelectOption} />
+        <ReportReason handleOnClick={handleSelectOption} />
         <OtherReasonInput
           inputValue={inputValue}
           inputRef={inputRef}
@@ -88,7 +88,7 @@ const Report = () => {
       <Button
         value={type}
         text={btn}
-        onTouchEnd={state ? handleSubmitComment : handleSubmitPost}
+        onClick={state ? handleSubmitComment : handleSubmitPost}
         className={cx(RegistBtn, !selectOption && DisabledBtn)}
       />
     </>
diff --git a/src/types/types.ts b/src/types/types.ts
index 00dc2485..eb2d1be9 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -88,14 +88,13 @@ export interface BrnadItemProps {
 export interface ButtonProps {
   value?: string;
   text: string;
-  onTouchEnd?: TouchEventHandler<HTMLButtonElement>;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   className: string;
 }
 
 export interface EmptyUserProps {
   label: string;
-  onTouchEnd?: () => void;
+  onClick?: () => void;
 }
 
 export interface WeeklyPopularTypes {
@@ -246,14 +245,14 @@ export interface TabsText {
   [key: string]: string[] | string;
 }
 
-export interface CafeDetail {
+export interface CafeDetailTypes {
   brand: string;
   className?: string;
   caffeine?: string | number;
   menu?: string;
   shot?: string | number;
   posts?: boolean;
-  onTouchEnd?: () => void;
+  onClick?: () => void;
 }
 
 export interface DailyTrendCardProps {