Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

모바일 크로스 브라우징, 모바일 화면 CSS 수정 #123 #124

Merged
merged 8 commits into from
Nov 17, 2024
5 changes: 4 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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="신생 작가들의 졸업 전시 작품을 만날 수 있습니다. 독창적인 미술 작품을 발견하고 구매할 수 있는 플랫폼입니다."
Expand Down
4 changes: 2 additions & 2 deletions src/components/common/Chip/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions src/components/common/form/Checkbox/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
7 changes: 4 additions & 3 deletions src/components/common/form/InputButton/index.tsx
Original file line number Diff line number Diff line change
@@ -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();
Expand All @@ -19,7 +19,7 @@ const Button = ({ label, isSelected, onClick }: ButtonProps) => {
);
};

export default Button;
export default InputButton;

const Wrapper = styled.button<{ selected?: boolean }>`
display: flex;
Expand All @@ -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 &&
Expand Down
2 changes: 1 addition & 1 deletion src/components/layouts/SearchBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;

Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Signup/components/InputItem/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
6 changes: 3 additions & 3 deletions src/pages/Signup/progresses/ArtistProgress/index.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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')}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Signup/progresses/DefaultProgress/index.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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')}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Signup/progresses/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 6 additions & 5 deletions src/styles/reset.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -123,6 +124,7 @@ button:disabled {
}
a {
text-decoration: none;
color: var(--color-black);
}
a:hover {
cursor: pointer;
Expand All @@ -140,8 +142,7 @@ textarea {
padding: 0;
background-color: transparent;
align-self: center;

&:focus {
outline: none;
}
}
textarea:focus {
outline: none;
}