From d10a6b5cd9777928b15e1817b07529d0cbf6531f Mon Sep 17 00:00:00 2001
From: mihee <s2809h29@gmail.com>
Date: Fri, 13 Oct 2023 00:11:10 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20ios=20TextInput,=20Textarea=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=ED=99=94=EB=A9=B4=20=ED=99=95=EB=8C=80?=
 =?UTF-8?q?=20=EB=B0=A9=EC=A7=80=20#206?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TextArea/index.tsx | 21 +++++++++++++++++++--
 src/components/TextArea/style.ts  | 17 ++++++++++-------
 src/components/TextInput/style.ts | 20 +++++++++++++-------
 3 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/components/TextArea/index.tsx b/src/components/TextArea/index.tsx
index 5317b55e..91b20942 100644
--- 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
index b08c3095..e08f4987 100644
--- 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
index d3ffd2b8..67cb5bfc 100644
--- 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 {