Skip to content

Commit 634e676

Browse files
minimo-9minimo-9
authored
✨feat: 공통 버튼 및 공통 인풋 기능 구현 완료 & 스타일 적용
✨feat: 공통 버튼 및 공통 인풋 기능 구현 완료 & 스타일 적용
2 parents d671706 + 798c044 commit 634e676

File tree

7 files changed

+171
-9
lines changed

7 files changed

+171
-9
lines changed

‎index.html‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,7 @@
1010
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
1111
/>
1212
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13-
<link
14-
rel="stylesheet"
15-
as="style"
16-
crossorigin
17-
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
18-
/>
19-
<title>Vite + React</title>
13+
<title>너의 마음을 전달해줘 - Rolling</title>
2014
</head>
2115
<body>
2216
<div id="root"></div>

‎src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import './base.scss';
1+
import './assets/styles/base.scss';
22
import { Route, Routes } from 'react-router-dom';
33
import Header from './components/layout/Header/Header';
44
import Test from './pages/List-page/Test';

src/base.scss renamed to src/assets/styles/base.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,4 @@ a {
3434

3535
button {
3636
cursor: pointer;
37-
font-family: 'Pretendard', sans-serif;
3837
}

‎src/components/common/Button.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styles from './Button.module.scss';
2+
3+
export default function Button({ text, type = 'primary', onClick, disabled }) {
4+
return (
5+
<button
6+
onClick={onClick}
7+
disabled={disabled}
8+
className={`${styles.button} ${styles[`button--${type}`]}`}
9+
>
10+
{text}
11+
</button>
12+
);
13+
}

‎src/components/common/Button.module.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@use '../../assets/styles/variables.scss' as *;
2+
3+
.button {
4+
padding: 1.4rem 2.4rem;
5+
border: none;
6+
border-radius: 12px;
7+
background-color: $purple-600;
8+
@include font-18-bold;
9+
color: $white;
10+
11+
&:disabled {
12+
background-color: $gray-300;
13+
cursor: not-allowed;
14+
15+
&:hover,
16+
&:active,
17+
&:focus {
18+
background-color: $gray-300;
19+
border: $gray-300;
20+
}
21+
}
22+
23+
&:hover {
24+
background-color: $purple-700;
25+
}
26+
27+
&:active {
28+
background-color: $purple-800;
29+
}
30+
31+
&:focus {
32+
border: 2px solid $purple-900;
33+
background-color: $purple-800;
34+
}
35+
36+
&--primary {
37+
width: 28rem;
38+
height: 5.6rem;
39+
}
40+
41+
&--create {
42+
width: 72rem;
43+
height: 5.6rem;
44+
}
45+
46+
&--confirm {
47+
width: 12rem;
48+
height: 4rem;
49+
padding: 0.7rem 1.6rem;
50+
border-radius: 6px;
51+
@include font-16-regular;
52+
}
53+
54+
&--delete {
55+
width: 9.2rem;
56+
height: 3.9rem;
57+
padding: 0.7rem 1.6rem;
58+
border-radius: 6px;
59+
@include font-16-regular;
60+
}
61+
}

‎src/components/common/FormInput.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import styles from './FormInput.module.scss';
2+
import { useId } from 'react';
3+
4+
export default function FormInput({
5+
label,
6+
placeholder,
7+
value,
8+
onChange,
9+
onBlur,
10+
isError,
11+
}) {
12+
const id = useId();
13+
return (
14+
<div className={styles['form-input']}>
15+
<label htmlFor={id} className={styles['form-input__label']}>
16+
{label}
17+
</label>
18+
<input
19+
id={id}
20+
name={id}
21+
placeholder={placeholder}
22+
value={value}
23+
onChange={onChange}
24+
onBlur={onBlur}
25+
className={`${styles['form-input__input']} ${isError ? styles['form-input__input--error'] : ''}`}
26+
/>
27+
{isError && (
28+
<p className={styles['form-input__error-message']}>
29+
값을 입력해 주세요.
30+
</p>
31+
)}
32+
</div>
33+
);
34+
}

‎src/components/common/FormInput.module.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@use '../../assets/styles/variables.scss' as *;
2+
3+
.form-input {
4+
display: flex;
5+
flex-direction: column;
6+
7+
&__label {
8+
@include font-24-bold;
9+
color: $gray-900;
10+
}
11+
12+
&__input {
13+
width: 72rem;
14+
height: 5rem;
15+
margin: 1.2rem 0 0.4rem;
16+
padding: 1.2rem 1.6rem;
17+
border: 1px solid $gray-300;
18+
border-radius: 8px;
19+
background-color: $white;
20+
@include font-16-regular;
21+
color: $gray-500;
22+
23+
&:disabled {
24+
border: 1px solid $gray-300;
25+
background-color: $gray-100;
26+
color: $gray-400;
27+
28+
&:hover,
29+
&:active,
30+
&:focus {
31+
border: 1px solid $gray-300;
32+
background-color: $gray-100;
33+
color: $gray-400;
34+
}
35+
}
36+
37+
&:active {
38+
border: 2px solid $gray-700;
39+
color: $gray-900;
40+
}
41+
42+
&:hover {
43+
border: 1px solid $gray-500;
44+
}
45+
46+
&:focus {
47+
border: 2px solid $gray-500;
48+
color: $gray-900;
49+
}
50+
51+
&--error {
52+
border: 1px solid $error;
53+
color: $gray-900;
54+
}
55+
}
56+
57+
&__error-message {
58+
@include font-12-regular;
59+
color: $error;
60+
}
61+
}

0 commit comments

Comments
 (0)