Merge pull request #124 from kakao-tech-campus-2nd-step3/fix/#123-mobile

모바일 크로스 브라우징, 모바일 화면 CSS 수정 #123
kakao-tech-campus-2nd-step3 · Nov 17, 2024 · 361a3c4 · 361a3c4
2 parents 2570b59 + 915d9bb
commit 361a3c4
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
+    />
     <meta
       name="description"
       content="신생 작가들의 졸업 전시 작품을 만날 수 있습니다. 독창적인 미술 작품을 발견하고 구매할 수 있는 플랫폼입니다."

diff --git a/src/components/common/Chip/index.tsx b/src/components/common/Chip/index.tsx
@@ -23,9 +23,9 @@ const Chip = ({ tag, onClick }: ChipProps) => {
 export default Chip;
 
 const Wrapper = styled.div`
-  border: 0.05rem solid var(--color-gray-md);
+  border: 1px solid var(--color-gray-md);
   border-radius: var(--border-radius);
-  font-size: var(--font-size-xs);
+  font-size: var(--font-size-sm);
   padding: 0.6rem;
   gap: 0.6rem;
   height: 2.3rem;

diff --git a/src/components/common/form/Checkbox/index.tsx b/src/components/common/form/Checkbox/index.tsx
@@ -13,11 +13,13 @@ const Checkbox = ({ isChecked, onChange }: StyledCheckboxProps) => {
   return <StyledCheckbox type="checkbox" checked={isChecked} onChange={handleChange} />;
 };
 
+export default Checkbox;
+
 const StyledCheckbox = styled.input`
   width: 14px;
   height: 14px;
-  border: 0.5px solid #d6d6d6;
-  border-radius: 2px;
+  border: 1px solid #d6d6d6;
+  border-radius: var(--border-radius);
   appearance: none; /* 기본 체크박스 스타일 제거 */
   outline: none;
   position: relative;
@@ -30,10 +32,8 @@ const StyledCheckbox = styled.input`
     content: '✓';
     position: absolute;
     top: 0;
-    left: 3px;
+    left: 2px;
     color: white;
     font-size: 14px;
   }
 `;
-
-export default Checkbox;
diff --git a/src/components/common/form/InputButton/index.tsx b/src/components/common/form/InputButton/index.tsx
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 
-type ButtonProps = {
+type InputButtonProps = {
   label: string;
   isSelected?: boolean;
   onClick: () => void;
 };
 
-const Button = ({ label, isSelected, onClick }: ButtonProps) => {
+const InputButton = ({ label, isSelected, onClick }: InputButtonProps) => {
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     onClick();
@@ -19,7 +19,7 @@ const Button = ({ label, isSelected, onClick }: ButtonProps) => {
   );
 };
 
-export default Button;
+export default InputButton;
 
 const Wrapper = styled.button<{ selected?: boolean }>`
   display: flex;
@@ -31,6 +31,7 @@ const Wrapper = styled.button<{ selected?: boolean }>`
   border: 1px solid var(--color-gray-md);
   background: var(--color-white);
   flex: 1;
+  font-size: var(--font-size-sm);
 
   ${({ selected }) =>
     selected &&

diff --git a/src/components/layouts/SearchBar/index.tsx b/src/components/layouts/SearchBar/index.tsx
@@ -108,7 +108,6 @@ const InputBox = styled.form`
   flex: 1 0 0;
   border-radius: var(--border-radius);
   border: 1px solid var(--color-gray-md);
-  font-size: var(--font-size-sm);
   cursor: text;
 `;
 
@@ -118,6 +117,7 @@ const Input = styled.input`
   margin: 0 30px 0 34px;
   outline: none;
   border: none;
+  font-size: var(--font-size-sm);
 
   &::placeholder {
     color: var(--color-gray-dk);

diff --git a/src/pages/Signup/components/InputItem/index.tsx b/src/pages/Signup/components/InputItem/index.tsx
@@ -72,7 +72,7 @@ const StyledInputItem = styled.div`
   padding: 0 16px;
 
   .input-label {
-    font-size: var(--font-size-sm);
+    font-size: var(--font-size-md);
     font-weight: 600;
   }
 

diff --git a/src/pages/Signup/progresses/ArtistProgress/index.tsx b/src/pages/Signup/progresses/ArtistProgress/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import Button from '@/components/common/form/InputButton';
+import InputButton from '@/components/common/form/InputButton';
 import ProgressBar from '../../components/ProgressBar';
 import { ProgressBox, ProgressGuidance, SelectItem } from '../styles';
 import BusinessArtist1 from './BusinessArtist/BusinessArtist1';
@@ -27,12 +27,12 @@ const ArtistProgress = () => {
             </ProgressGuidance>
             <div className="progress-container">
               <SelectItem>
-                <Button
+                <InputButton
                   label="학생"
                   isSelected={artistType === 'student'}
                   onClick={() => setArtistType('student')}
                 />
-                <Button
+                <InputButton
                   label="사업자"
                   isSelected={artistType === 'business'}
                   onClick={() => setArtistType('business')}

diff --git a/src/pages/Signup/progresses/DefaultProgress/index.tsx b/src/pages/Signup/progresses/DefaultProgress/index.tsx
@@ -1,5 +1,5 @@
 import type { Mode } from '@/types/user';
-import Button from '../../../../components/common/form/InputButton';
+import InputButton from '../../../../components/common/form/InputButton';
 import ProgressBar from '../../components/ProgressBar';
 import { ProgressBox, ProgressGuidance, SelectItem } from '../styles';
 
@@ -23,12 +23,12 @@ const DefaultProgress = ({ mode, onSelect }: DefaultProgressProps) => {
       </ProgressGuidance>
       <div className="progress-container">
         <SelectItem>
-          <Button
+          <InputButton
             label="일반 회원"
             isSelected={mode === 'user'}
             onClick={() => handleSelect('user')}
           />
-          <Button
+          <InputButton
             label="작가(판매자) 회원"
             isSelected={mode === 'artist'}
             onClick={() => handleSelect('artist')}

diff --git a/src/pages/Signup/progresses/styles.ts b/src/pages/Signup/progresses/styles.ts
@@ -19,7 +19,7 @@ export const ProgressBox = styled.div`
 export const ProgressGuidance = styled.p`
   padding: 16px 16px 32px 16px;
   align-self: stretch;
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-lg);
   font-style: normal;
   font-weight: 700;
   line-height: normal;

diff --git a/src/styles/reset.css b/src/styles/reset.css
@@ -27,8 +27,9 @@ body {
   position: relative;
   transform: translateX(-50%);
   left: 50%;
+  height: 100vh;
+  height: -webkit-fill-available; /* 모바일 브라우저 대응 */
   min-width: 320px;
-  min-height: 100vh;
 
   @media (min-width: 768px) {
     width: 600px;
@@ -123,6 +124,7 @@ button:disabled {
 }
 a {
   text-decoration: none;
+  color: var(--color-black);
 }
 a:hover {
   cursor: pointer;
@@ -140,8 +142,7 @@ textarea {
   padding: 0;
   background-color: transparent;
   align-self: center;
-
-  &:focus {
-    outline: none;
-  }
+}
+textarea:focus {
+  outline: none;
 }