[Fix] 모바일에서 input 확대, 이미지 선택 안되도록 수정

src/app/planet/add/page.tsx

@@ -53,7 +53,7 @@ const PlanetAddPage = () => {
         </Column>
         <Label>원하는 행성의 종류를 선택해주세요 *</Label>
         <PlanetWrapper>
-          <Image
+          <PlanetImage
             src={`/assets/images/planet/planet${templateType}.png`}
             width={200}
             height={200}
@@ -125,6 +125,21 @@ const PlanetWrapper = styled.div`
   justify-content: center;
 `;
 
+const PlanetImage = styled(Image)`
+  touch-action: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  -khtml-user-drag: none;
+  -moz-user-drag: none;
+  -o-user-drag: none;
+  -webkit-touch-callout: none;
+`;
+
 const ButtonWrapper = styled.div`
   width: 100%;
   position: absolute;

src/components/common/Input.tsx

@@ -129,11 +129,12 @@ const sharedStyles = `
   border-radius: 8px;
   background: ${theme.colors.gray800};
   color: ${theme.colors.white};
-  ${(props: any) => props.theme.fonts.body08};
+  ${(props: any) => props.theme.fonts.body07};
+  font-family: "Pretendard";
 
   &::placeholder {
     color: ${theme.colors.gray500};
-    ${(props: any) => props.theme.fonts.body09};
+    ${(props: any) => props.theme.fonts.body07};
   }
 
   &:disabled {
@@ -173,11 +174,10 @@ const StyledTextarea = styled.textarea<{
 }>`
   ${sharedStyles}
   height: ${({ $height }) => $height};
-  font-family: "Pretendard";
-  ${(props: any) => props.theme.fonts.medium14};
+  ${(props: any) => props.theme.fonts.body07};
 
   &::placeholder {
-    ${(props: any) => props.theme.fonts.regular14};
+    ${(props: any) => props.theme.fonts.body07};
     letter-spacing: 1px;
   }
 

src/components/common/Planet.tsx

@@ -110,6 +110,11 @@ const Planet = (props: PlanetProps) => {
     setConfirmDeleteModal(false);
   };
 
+  // 컴포넌트에서 이미지 컨텍스트 메뉴 방지
+  const handleContextMenu = (e: React.MouseEvent<HTMLImageElement>) => {
+    e.preventDefault();
+  };
+
   return (
     <Container>
       <PlanetImage
@@ -118,6 +123,7 @@ const Planet = (props: PlanetProps) => {
         height={400}
         alt="planet"
         priority
+        onContextMenu={handleContextMenu}
       />
       {/* <Shadow /> */}
       {orbits &&
@@ -209,7 +215,9 @@ const PlanetImage = styled(Image)`
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 5;
-  //드래그방지
+
+  touch-action: none;
+  pointer-events: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
@@ -219,6 +227,7 @@ const PlanetImage = styled(Image)`
   -khtml-user-drag: none;
   -moz-user-drag: none;
   -o-user-drag: none;
+  -webkit-touch-callout: none;
 `;
 
 const Shadow = styled.div`

src/components/common/Tag.tsx

@@ -337,7 +337,7 @@ const Tag = (props: TagProps) => {
         />
       )}
       {tagType === "planet" && (
-        <Image
+        <IconImage
           src={renderIcon()}
           width={24}
           height={24}
@@ -477,3 +477,12 @@ const DeleteIcon = styled(Image)`
   top: -4px;
   right: -2px;
 `;
+
+const IconImage = styled(Image)`
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+`;

src/styles/GlobalStyles.ts

@@ -68,6 +68,8 @@ input, textarea {
   border: none;
   outline: none;
   resize: none;
+
+  font-size: 16px;
 }
 
 @font-face {