Refactor: onTouchEnd => onClick

7-7-2 · Jun 1, 2024 · 00b6f0b · 00b6f0b
1 parent b65024f
commit 00b6f0b
Show file tree

Hide file tree

Showing 52 changed files with 106 additions and 125 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ const HeaderCloseIcon = () => { @@
         <>
           <Icon
             {...iconPropsGenerator('close')}
-            onTouchEnd={handleTouch}></Icon>
+            onClick={handleTouch}></Icon>
         </>
       );
     };
@@ Expand Down @@