fix: ios TextInput, Textarea 클릭 시 화면 확대 방지 #206

oduck-team · Oct 12, 2023 · d10a6b5 · d10a6b5
1 parent 5d62efb
commit d10a6b5
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 16 deletions.
diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { ComponentProps, useEffect, useRef, useState } from "react";
 
 import { Message, TextareaBox, TextareaContainer } from "./style";
 
@@ -10,6 +10,7 @@ export interface TextareaProps extends ComponentProps<"textarea"> {
 
 export interface TextareaBoxProps extends ComponentProps<"textarea"> {
   warn?: boolean;
+  negativeMargin: number; // scale 후 여백 제거를 위한 negative margin
 }
 
 export default function Textarea({
@@ -19,9 +20,25 @@ export default function Textarea({
   className = "",
   ...rest
 }: TextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [negativeMargin, setNegativeMargin] = useState(0);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      const offsetHeight = textareaRef.current.offsetHeight; // 원본 textarea height
+      const height = offsetHeight * 0.875; // scale 적용이 된 height
+      setNegativeMargin(-(offsetHeight - height));
+    }
+  }, []);
+
   return (
     <TextareaContainer style={style} className={className}>
-      <TextareaBox warn={warn} {...rest}></TextareaBox>
+      <TextareaBox
+        negativeMargin={negativeMargin}
+        ref={textareaRef}
+        warn={warn}
+        {...rest}
+      />
       {warn && message !== "" && <Message>{message}</Message>}
     </TextareaContainer>
   );

diff --git a/src/components/TextArea/style.ts b/src/components/TextArea/style.ts
@@ -4,21 +4,24 @@ import styled from "@emotion/styled";
 import { TextareaBoxProps } from ".";
 
 export const TextareaBox = styled.textarea<TextareaBoxProps>`
-  ${({ warn = false, theme }) => css`
+  ${({ warn = false, theme, negativeMargin }) => css`
     ${theme.typo["body-2-r"]};
+    width: 114.4%;
+    margin-bottom: ${negativeMargin}px;
+    padding: 0.6rem 1.16rem;
+    font-size: 16px;
+    transform: scale(0.875);
+    transform-origin: left top;
     display: flex;
-    width: 100%;
-    height: calc(100% - 19px);
-    padding: 0.5rem 1rem;
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
     background-color: white;
     color: ${theme.colors["neutral"]["90"]};
-    border-radius: 6px;
+    border-radius: 7px;
     border: 1px solid
       ${warn ? theme.colors["warn"]["40"] : theme.colors["neutral"]["30"]};
-    transition: all 0.2s;
+    transition: border 0.2s;
     resize: none;
 
     &::placeholder {
@@ -45,8 +48,8 @@ export const Message = styled.div`
     color: ${theme.colors["warn"]["40"]};
     width: fit-content;
     margin: 4px 0px 0px 8px;
+    flex-shrink: 0;
   `}
-  flex-shrink: 0;
 `;
 
 export const TextareaContainer = styled.div`

diff --git a/src/components/TextInput/style.ts b/src/components/TextInput/style.ts
@@ -6,10 +6,17 @@ import { TextInputBoxProps } from ".";
 export const TextInputBox = styled.input<TextInputBoxProps>`
   ${({ warn = false, hasIcon = false, disabled = false, theme }) => css`
     ${theme.typo["body-2-r"]};
+    width: 114.4%;
+    height: 45.76px;
+    font-size: 16px; // 겉보기엔 14px
+    transform: scale(0.875);
+    transform-origin: left top;
+    padding: ${hasIcon ? `0 1rem 0 calc(1.16rem + 20px)` : `0 1.16rem`};
+    margin-bottom: -6px;
+    border-radius: 7px;
     display: flex;
-    width: 100%;
-    height: 40px;
-    padding: ${hasIcon ? `0 1rem 0 calc(1rem + 20px)` : `0 1rem`};
+    border: 1px solid
+      ${warn ? theme.colors["warn"]["40"] : theme.colors["neutral"]["30"]};
 
     justify-content: space-between;
     align-items: center;
@@ -18,9 +25,6 @@ export const TextInputBox = styled.input<TextInputBoxProps>`
     color: ${!disabled
       ? theme.colors["neutral"]["90"]
       : theme.colors["neutral"]["50"]};
-    border-radius: 6px;
-    border: 1px solid
-      ${warn ? theme.colors["warn"]["40"] : theme.colors["neutral"]["30"]};
     transition: all 0.2s;
 
     &::placeholder {
@@ -57,14 +61,16 @@ export const Message = styled.div`
 
 export const TextInputContainer = styled.div<{ warn?: boolean }>`
   width: 100%;
+  height: fit-content;
   position: relative;
   & > svg {
     position: absolute;
-    top: 10px;
+    top: 10px; // icon height=20 기준
     left: 10px;
     color: ${({ warn = false, theme }) =>
       warn ? theme.colors["warn"]["40"] : theme.colors["neutral"]["50"]};
     transition: all 0.2s;
+    z-index: 1; // 없으면 보이지 않음
   }
 
   &:focus-within {