From 1a014f691342af656ea35c6efc57f7444ecd309a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=ED=98=9C=EB=A0=B9?= <chex1004@gmail.com>
Date: Tue, 17 Oct 2023 16:39:27 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=94=94?=
 =?UTF-8?q?=EB=B0=94=EC=9D=B4=EC=8A=A4(ios)=EC=97=90=EC=84=9C=20<input>,?=
 =?UTF-8?q?=20<textarea>=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20=EC=8B=9C=20?=
 =?UTF-8?q?=EC=9E=90=EB=8F=99=20zoom-in=EB=90=98=EB=8A=94=20=ED=98=84?=
 =?UTF-8?q?=EC=83=81=20=EA=B0=9C=EC=84=A0=20(#492)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor/#491: 불필요한 코드 삭제

* feat/#491: 글로벌스타일 수정

* fix/#491: 데스크톱 사파리에서 네모로 나오는 라벨 디자인 수정

* feat/#491: 모바일 화면에서 zoom-in되지 않도록 폰트 사이즈 설정

* feat/#491: select border-radius 기본 스타일 제거

* refactor/#491: 중복 css 코드 삭제
---
 .../src/components/@common/Input/Input.tsx    |  3 +-
 .../src/components/@common/Label/Label.tsx    |  8 ++---
 .../MainIngredientsFilterList.tsx             | 36 ++++++++-----------
 .../components/PetProfile/PetAgeSelect.tsx    |  2 +-
 .../components/PetProfile/PetBreedSelect.tsx  |  2 +-
 .../PetProfileEditionForm.tsx                 |  2 +-
 .../Review/ReviewForm/ReviewForm.tsx          |  3 +-
 .../AlignSelect/AlignSelect.tsx               |  5 ---
 .../FilterDialog/FilterDialog.tsx             |  4 ---
 .../PetProfileNameAddition.tsx                |  1 -
 .../PetProfileWeightAddition.tsx              |  3 +-
 frontend/src/styles/globalStyle.ts            | 23 ++++++++++++
 12 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/@common/Input/Input.tsx b/frontend/src/components/@common/Input/Input.tsx
index 0f250097b..9a79d7875 100644
--- a/frontend/src/components/@common/Input/Input.tsx
+++ b/frontend/src/components/@common/Input/Input.tsx
@@ -23,7 +23,8 @@ const InputWrapper = styled.input<InputStyleProps>`
   height: 100%;
   padding: 1.2rem;
 
-  font-size: ${({ $fontSize }) => $fontSize || '1.4rem'};
+  font-size: ${({ $fontSize }) =>
+    ($fontSize && $fontSize < '1.6rem') || !$fontSize ? '16px' : $fontSize};
 
   border: none;
   outline: none;
diff --git a/frontend/src/components/@common/Label/Label.tsx b/frontend/src/components/@common/Label/Label.tsx
index ed960a3ed..2014fd27f 100644
--- a/frontend/src/components/@common/Label/Label.tsx
+++ b/frontend/src/components/@common/Label/Label.tsx
@@ -135,15 +135,11 @@ const LabelWrapper = styled.div<LabelStyleProps>`
 
   background-color: ${({ $clicked, theme, $backgroundColor }) =>
     $clicked ? theme.color.blue : $backgroundColor};
+  border: 1px solid ${({ theme }) => theme.color.blue};
   border-radius: 20px;
 
   ${({ $hasBorder, $clicked, $borderColor }) =>
-    $hasBorder &&
-    !$clicked &&
-    `
-        outline: 1px solid ${$borderColor};
-        outline-offset: -1px;
-    `}
+    $hasBorder && !$clicked && `border-color: ${$borderColor};`}
 
   ${({ onClick }) => onClick && 'cursor: pointer'};
 `;
diff --git a/frontend/src/components/Food/FilterBottomSheet/MainIngredientsFilterList/MainIngredientsFilterList.tsx b/frontend/src/components/Food/FilterBottomSheet/MainIngredientsFilterList/MainIngredientsFilterList.tsx
index d739fa238..c84d39bea 100644
--- a/frontend/src/components/Food/FilterBottomSheet/MainIngredientsFilterList/MainIngredientsFilterList.tsx
+++ b/frontend/src/components/Food/FilterBottomSheet/MainIngredientsFilterList/MainIngredientsFilterList.tsx
@@ -15,27 +15,21 @@ const MainIngredientsFilterList = (props: MainIngredientsFilterListProps) => {
 
   return (
     <MainIngredientsFilterListLayout>
-      {filterList
-        .concat(filterList)
-        .concat(filterList)
-        .concat(filterList)
-        .concat(filterList)
-        .concat(filterList)
-        .map(({ id, ingredients }) => {
-          const selected = selectedFilterList[MAIN_INGREDIENTS].has(ingredients);
-
-          return (
-            <IngredientFilterItem
-              role="checkbox"
-              key={id}
-              aria-checked={selected}
-              $selected={selected}
-              onClick={() => toggleFilter(MAIN_INGREDIENTS, ingredients)}
-            >
-              {ingredients}
-            </IngredientFilterItem>
-          );
-        })}
+      {filterList.map(({ id, ingredients }) => {
+        const selected = selectedFilterList[MAIN_INGREDIENTS].has(ingredients);
+
+        return (
+          <IngredientFilterItem
+            role="checkbox"
+            key={id}
+            aria-checked={selected}
+            $selected={selected}
+            onClick={() => toggleFilter(MAIN_INGREDIENTS, ingredients)}
+          >
+            {ingredients}
+          </IngredientFilterItem>
+        );
+      })}
     </MainIngredientsFilterListLayout>
   );
 };
diff --git a/frontend/src/components/PetProfile/PetAgeSelect.tsx b/frontend/src/components/PetProfile/PetAgeSelect.tsx
index 739560579..452bd9051 100644
--- a/frontend/src/components/PetProfile/PetAgeSelect.tsx
+++ b/frontend/src/components/PetProfile/PetAgeSelect.tsx
@@ -34,7 +34,7 @@ const AgeSelect = styled.select`
   width: 100%;
   padding: 1.2rem;
 
-  font-size: 1.3rem;
+  font-size: 1.6rem;
   color: ${({ theme }) => theme.color.grey600};
 
   border: none;
diff --git a/frontend/src/components/PetProfile/PetBreedSelect.tsx b/frontend/src/components/PetProfile/PetBreedSelect.tsx
index acac86d93..ca2f5c690 100644
--- a/frontend/src/components/PetProfile/PetBreedSelect.tsx
+++ b/frontend/src/components/PetProfile/PetBreedSelect.tsx
@@ -33,7 +33,7 @@ const BreedSelect = styled.select`
   width: 100%;
   padding: 1.2rem;
 
-  font-size: 1.3rem;
+  font-size: 1.6rem;
   color: ${({ theme }) => theme.color.grey600};
 
   border: none;
diff --git a/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.tsx b/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.tsx
index 48ab31f17..c0db2b2c6 100644
--- a/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.tsx
+++ b/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.tsx
@@ -176,7 +176,7 @@ const Kg = styled.p`
   top: 1.2rem;
   right: 1.2rem;
 
-  font-size: 1.3rem;
+  font-size: 1.6rem;
   font-weight: 500;
   line-height: 1.7rem;
   color: ${({ theme }) => theme.color.grey600};
diff --git a/frontend/src/components/Review/ReviewForm/ReviewForm.tsx b/frontend/src/components/Review/ReviewForm/ReviewForm.tsx
index 00fe6309f..2a5c6ab46 100644
--- a/frontend/src/components/Review/ReviewForm/ReviewForm.tsx
+++ b/frontend/src/components/Review/ReviewForm/ReviewForm.tsx
@@ -141,7 +141,6 @@ const DetailReviewText = styled.textarea<{ $isValid: boolean }>`
   min-height: 12rem;
   padding: 1.2rem;
 
-  font-size: 1.6rem;
   line-height: 2.4rem;
   color: ${({ theme }) => theme.color.grey500};
 
@@ -168,7 +167,7 @@ const SubmitButton = styled.button`
   width: 100vw;
   height: 9rem;
 
-  font-size: 1.6rem;
+  font-size: 2rem;
   font-weight: 700;
   line-height: 2.4rem;
   color: ${({ theme }) => theme.color.white};
diff --git a/frontend/src/components/Review/ReviewListAndChart/ReviewControls/AlignSelect/AlignSelect.tsx b/frontend/src/components/Review/ReviewListAndChart/ReviewControls/AlignSelect/AlignSelect.tsx
index 604a37a4f..b9574b5bc 100644
--- a/frontend/src/components/Review/ReviewListAndChart/ReviewControls/AlignSelect/AlignSelect.tsx
+++ b/frontend/src/components/Review/ReviewListAndChart/ReviewControls/AlignSelect/AlignSelect.tsx
@@ -52,10 +52,6 @@ const Select = styled.select<StyledProps>`
   color: ${({ theme }) => theme.color.grey400};
   text-align: center;
 
-  /* stylelint-disable-next-line CssSyntaxError */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   background-color: ${({ theme }) => theme.color.grey200};
   border: none;
   border-radius: 4px;
@@ -64,7 +60,6 @@ const Select = styled.select<StyledProps>`
     $skeleton &&
     css`
       ${theme.animation.skeleton}
-      appearance: none;
       border-radius: 4px;
     `};
 `;
diff --git a/frontend/src/components/Review/ReviewListAndChart/ReviewControls/FilterDialog/FilterDialog.tsx b/frontend/src/components/Review/ReviewListAndChart/ReviewControls/FilterDialog/FilterDialog.tsx
index b3921a032..8eb1c71af 100644
--- a/frontend/src/components/Review/ReviewListAndChart/ReviewControls/FilterDialog/FilterDialog.tsx
+++ b/frontend/src/components/Review/ReviewListAndChart/ReviewControls/FilterDialog/FilterDialog.tsx
@@ -264,10 +264,6 @@ const Select = styled.select`
   color: ${({ theme }) => theme.color.grey400};
   text-align: center;
 
-  /* stylelint-disable-next-line CssSyntaxError */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   border: 1px solid ${({ theme }) => theme.color.grey400};
   border-radius: 16px;
 `;
diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileNameAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileNameAddition.tsx
index bfe05dbf1..e9cbf61cf 100644
--- a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileNameAddition.tsx
+++ b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileNameAddition.tsx
@@ -32,7 +32,6 @@ const PetProfileNameAddition = (props: PetProfileNameAdditionProps) => {
         isValid={isFirstRenderedOrValidInput}
         onChange={onChangeName}
         design="underline"
-        fontSize="1.3rem"
       />
       <ErrorCaption>
         {!isFirstRenderedOrValidInput &&
diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileWeightAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileWeightAddition.tsx
index ef1a6d377..0c895cfc1 100644
--- a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileWeightAddition.tsx
+++ b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileWeightAddition.tsx
@@ -36,7 +36,6 @@ const PetProfileWeightAddition = (props: PetProfileWeightAddition) => {
           isValid={isFirstRenderedOrValidInput}
           onChange={onChangeWeight}
           design="underline"
-          fontSize="1.3rem"
           inputMode="decimal"
         />
         <Kg>kg</Kg>
@@ -109,7 +108,7 @@ const Kg = styled.p`
   top: 1.2rem;
   right: 1.2rem;
 
-  font-size: 1.3rem;
+  font-size: 1.6rem;
   font-weight: 500;
   line-height: 1.7rem;
   color: ${({ theme }) => theme.color.grey600};
diff --git a/frontend/src/styles/globalStyle.ts b/frontend/src/styles/globalStyle.ts
index e01855317..5371cc55f 100644
--- a/frontend/src/styles/globalStyle.ts
+++ b/frontend/src/styles/globalStyle.ts
@@ -53,6 +53,29 @@ const globalStyle = css`
   button {
     cursor: pointer;
   }
+
+  input,
+  textarea {
+    /* stylelint-disable-next-line declaration-property-unit-allowed-list */
+    font-size: 16px;
+
+    -webkit-appearance: none;
+    appearance: none;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+  }
+
+  select {
+    /* stylelint-disable-next-line declaration-property-unit-allowed-list */
+    font-size: 16px;
+
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    outline: none;
+  }
 `;
 
 export default globalStyle;