fix: ios input, textarea 화면 자동 확대

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>
   );

src/components/TextArea/style.ts

@@ -4,21 +4,25 @@ 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"]};
+    --scale: 1.1429;
+    width: calc(100% * var(--scale));
+    font-size: 16px;
+    transform: scale(0.875);
+    transform-origin: left top;
+    padding: 0.6rem 1.16rem;
+    margin-bottom: ${negativeMargin}px;
     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 +49,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`

src/components/TextInput/style.ts

@@ -6,10 +6,18 @@ import { TextInputBoxProps } from ".";
 export const TextInputBox = styled.input<TextInputBoxProps>`
   ${({ warn = false, hasIcon = false, disabled = false, theme }) => css`
     ${theme.typo["body-2-r"]};
+    --scale: 1.1429;
+    width: calc(100% * var(--scale));
+    height: calc(40px * var(--scale));
+    font-size: 16px;
+    transform: scale(0.875);
+    transform-origin: left top;
+    padding: ${hasIcon ? `0 1rem 0 calc(1.16rem + 20px)` : `0 1.16rem`};
+    margin-bottom: calc(40px - 40px * var(--scale));
+    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 +26,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 +62,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 {

src/features/common/routes/HelpDesk/Form/style.ts

@@ -42,8 +42,8 @@ export const FormTextInput = styled(TextInput)`
 
 export const FormTextarea = styled(Textarea)`
   width: calc(100% - 81px);
-  height: 233px;
   & > textarea {
+    height: calc(233px * 1.1429);
     border-radius: 12px;
   }
 `;

src/features/common/routes/Search/Searchbar/style.ts

@@ -9,6 +9,7 @@ export const SearchbarContainer = styled.div<{ isButtonVisible: boolean }>`
     top: 10px;
     left: 8px;
     color: ${({ theme }) => theme.colors.neutral["60"]};
+    z-index: 10;
   }
 
   & form {
@@ -24,10 +25,16 @@ export const SearchbarContainer = styled.div<{ isButtonVisible: boolean }>`
     ${({ theme }) => theme.typo["body-2-m"]}
     display: inline-flex;
     align-items: center;
-    height: 40px;
-    width: 100%;
-    padding-left: 36px;
-    padding-right: 16px;
+    flex-shrink: 0;
+    --scale: 1.1429;
+    width: calc(100% * var(--scale));
+    height: calc(40px * var(--scale));
+    font-size: 16px;
+    transform: scale(0.875);
+    transform-origin: left top;
+    padding-left: calc(36px * var(--scale));
+    padding-right: calc(16px * var(--scale));
+    margin-bottom: calc(40px - 40px * var(--scale));
     background-color: ${({ theme }) => theme.colors.neutral["10"]};
     border: none;
     border-radius: 5px;