feat: 모바일 디바이스(ios)에서 <input>, <textarea> 포커스 시 자동 zoom-in되는 현상 개선 (#492

) * refactor/#491: 불필요한 코드 삭제 * feat/#491: 글로벌스타일 수정 * fix/#491: 데스크톱 사파리에서 네모로 나오는 라벨 디자인 수정 * feat/#491: 모바일 화면에서 zoom-in되지 않도록 폰트 사이즈 설정 * feat/#491: select border-radius 기본 스타일 제거 * refactor/#491: 중복 css 코드 삭제
woowacourse-teams · Oct 17, 2023 · 1a014f6 · 1a014f6
1 parent b0ad7ac
commit 1a014f6
Show file tree

Hide file tree

Showing 12 changed files with 47 additions and 45 deletions.
diff --git 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
@@ -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/...components/Food/FilterBottomSheet/MainIngredientsFilterList/MainIngredientsFilterList.tsx b/...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...end/src/components/Review/ReviewListAndChart/ReviewControls/FilterDialog/FilterDialog.tsx b/...end/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
@@ -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
@@ -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
@@ -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;