Skip to content

Commit 42d6d4a

Browse files
g0yujing0yujin
committed
Merge branch 'feature/fe/components' of https://github.com/yuja201/here-is-dummy into feature/fe/components
2 parents 4446e9a + ece1e6f commit 42d6d4a

7 files changed

Lines changed: 290 additions & 24 deletions

File tree

‎src/renderer/src/assets/icons/check.png‎

6.27 KB
Loading

‎src/renderer/src/components/Button.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect } from 'react'
22

3-
type ButtonVariant = 'orange' | 'yellow' | 'main' | 'gray'
3+
type ButtonVariant = 'orange' | 'yellow' | 'blue' | 'gray'
44
type ButtonSize = 'sm' | 'md' | 'lg'
55

66
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -41,16 +41,15 @@ export const Button: React.FC<ButtonProps> = ({
4141
height: auto;
4242
padding: 8px 24px;
4343
border-radius: 8px;
44-
font-family: var(--font-family-base);
45-
font-weight: var(--font-semiBold);
46-
font-size: var(--text-subtitle);
44+
font-family: var(--font-family);
45+
font: var(--preMedium20);
4746
cursor: pointer;
4847
transition: all 0.25s ease-in-out;
4948
border: none;
50-
box-shadow: var(--shadow-default);
49+
box-shadow: var(--shadow);
5150
}
5251
53-
/* 🟧 ORANGE */
52+
/* ORANGE */
5453
.button--orange {
5554
background-color: var(--color-orange);
5655
color: var(--color-white);
@@ -60,7 +59,7 @@ export const Button: React.FC<ButtonProps> = ({
6059
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
6160
}
6261
63-
/* 🟨 YELLOW */
62+
/* YELLOW */
6463
.button--yellow {
6564
background-color: var(--color-yellow);
6665
color: var(--color-white);
@@ -70,23 +69,23 @@ export const Button: React.FC<ButtonProps> = ({
7069
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
7170
}
7271
73-
/* 🔵 MAIN */
74-
.button--main {
75-
background-color: var(--color-main);
72+
/* BLUE */
73+
.button--blue {
74+
background-color: var(--color-main-blue);
7675
color: var(--color-white);
7776
}
78-
.button--main:hover {
77+
.button--blue:hover {
7978
background-color: #0f3a6e;
8079
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
8180
}
8281
83-
/* ⚫ GRAY */
82+
/* GRAY */
8483
.button--gray {
85-
background-color: var(--color-selected);
86-
color: var(--color-gray-700);
84+
background-color: rgba(250, 250, 250, 1);
85+
color: var(--color-dark-gray);
8786
}
8887
.button--gray:hover {
89-
background-color: var(--color-gray-300);
88+
background-color: rgba(230, 230, 230, 1);
9089
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
9190
}
9291

‎src/renderer/src/components/Checkbox.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import React from 'react'
2+
import checkIcon from '../assets/icons/check.png'
3+
4+
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
5+
label?: string
6+
}
7+
8+
export const Checkbox: React.FC<CheckboxProps> = ({ label, ...props }) => {
9+
return (
10+
<>
11+
<label className="checkbox">
12+
<input type="checkbox" className="checkbox__input" {...props} />
13+
<span className="checkbox__box" />
14+
{label && <span className="checkbox__label">{label}</span>}
15+
</label>
16+
17+
<style>{`
18+
.checkbox {
19+
display: inline-flex;
20+
align-items: center;
21+
gap: 8px;
22+
cursor: pointer;
23+
font-family: var(--font-family);
24+
user-select: none;
25+
}
26+
27+
.checkbox__input {
28+
position: absolute;
29+
opacity: 0;
30+
width: 0;
31+
height: 0;
32+
}
33+
34+
.checkbox__box {
35+
width: 18px;
36+
height: 18px;
37+
border-radius: 3px;
38+
border: 2px solid var(--color-placeholder);
39+
background-color: var(--color-white);
40+
display: inline-flex;
41+
align-items: center;
42+
justify-content: center;
43+
transition: all 0.2s ease;
44+
box-shadow: var(--shadow);
45+
}
46+
47+
/* 체크된 상태 */
48+
.checkbox__input:checked + .checkbox__box {
49+
background-color: var(--color-main-blue);
50+
border-color: var(--color-main-blue);
51+
}
52+
53+
.checkbox__input:checked + .checkbox__box::after {
54+
content: '';
55+
width: 12px;
56+
height: 10px;
57+
background-image: url(${checkIcon});
58+
background-position: center;
59+
background-size: contain;
60+
background-repeat: no-repeat;
61+
}
62+
63+
.checkbox:hover .checkbox__box {
64+
border-color: var(--color-main-blue);
65+
}
66+
67+
.checkbox__label {
68+
font: var(--preMedium20);
69+
color: var(--color-dark-gray);
70+
}
71+
72+
/* 비활성화 상태 */
73+
.checkbox__input:disabled + .checkbox__box {
74+
background-color: var(--color-placeholder);
75+
border-color: var(--color-placeholder);
76+
cursor: not-allowed;
77+
opacity: 0.6;
78+
}
79+
80+
.checkbox__input:disabled ~ .checkbox__label {
81+
color: var(--color-placeholder);
82+
cursor: not-allowed;
83+
}
84+
`}</style>
85+
</>
86+
)
87+
}

‎src/renderer/src/components/Label.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { ReactElement, CSSProperties } from 'react'
2+
3+
interface LabelProps {
4+
text: string
5+
}
6+
7+
const Label = ({ text }: LabelProps): ReactElement => {
8+
const labelStyle: CSSProperties = {
9+
display: 'inline-flex',
10+
alignItems: 'center',
11+
justifyContent: 'center',
12+
height: '22px',
13+
padding: '4px 16px',
14+
borderRadius: '15px',
15+
backgroundColor: 'var(--color-white)',
16+
color: 'var(--color-main-blue)',
17+
border: '1px solid var(--color-main-blue)',
18+
fontSize: '12px',
19+
fontFamily: 'var(--font-family)',
20+
fontWeight: 'var(--fw-regular)' as React.CSSProperties['fontWeight'],
21+
whiteSpace: 'nowrap'
22+
}
23+
24+
return <div style={labelStyle}>{text}</div>
25+
}
26+
27+
export default Label

‎src/renderer/src/components/MiniSearchBox.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { useState } from 'react'
2+
import type { ReactElement, CSSProperties } from 'react'
3+
4+
interface MiniSearchBoxProps {
5+
placeholder?: string
6+
onSearch?: (value: string) => void
7+
onSearchClick?: () => void
8+
}
9+
10+
const MiniSearchBox = ({
11+
placeholder = '프로젝트 검색',
12+
onSearch,
13+
onSearchClick
14+
}: MiniSearchBoxProps): ReactElement => {
15+
const [searchValue, setSearchValue] = useState('')
16+
17+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
18+
const value = e.target.value
19+
setSearchValue(value)
20+
if (onSearch) {
21+
onSearch(value)
22+
}
23+
}
24+
25+
const handleSearchClick = (): void => {
26+
if (onSearchClick) {
27+
onSearchClick()
28+
}
29+
}
30+
31+
const containerStyle: CSSProperties = {
32+
position: 'relative',
33+
width: '228px',
34+
height: '36px',
35+
display: 'flex',
36+
alignItems: 'center'
37+
}
38+
39+
const inputStyle: CSSProperties = {
40+
width: '100%',
41+
height: '100%',
42+
border: '1px solid #e8e8e8',
43+
borderRadius: '20px',
44+
padding: '8px 40px 8px 16px',
45+
fontSize: '12px',
46+
fontFamily: 'var(--font-family)',
47+
fontWeight: 'var(--fw-regular)' as React.CSSProperties['fontWeight'],
48+
color: 'var(--color-dark-gray)',
49+
backgroundColor: 'var(--color-white)',
50+
outline: 'none',
51+
transition: 'all 0.2s ease',
52+
boxShadow: 'var(--shadow)'
53+
}
54+
55+
const iconStyle: CSSProperties = {
56+
position: 'absolute',
57+
right: '16px',
58+
display: 'flex',
59+
alignItems: 'center',
60+
justifyContent: 'center',
61+
color: '#c0c0c0',
62+
background: 'none',
63+
border: 'none',
64+
padding: 0,
65+
cursor: 'pointer',
66+
transition: 'color 0.2s ease',
67+
fontSize: '20px'
68+
}
69+
70+
return (
71+
<>
72+
<style>
73+
{`
74+
.mini-search-box-input::placeholder {
75+
color: var(--color-placeholder);
76+
font-weight: var(--fw-regular);
77+
}
78+
`}
79+
</style>
80+
<div style={containerStyle}>
81+
<input
82+
type="text"
83+
className="mini-search-box-input"
84+
placeholder={placeholder}
85+
value={searchValue}
86+
onChange={handleChange}
87+
style={inputStyle}
88+
/>
89+
<button onClick={handleSearchClick} type="button" style={iconStyle}>
90+
<svg
91+
width="1em"
92+
height="1em"
93+
viewBox="0 0 24 24"
94+
fill="none"
95+
xmlns="http://www.w3.org/2000/svg"
96+
>
97+
<path
98+
d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
99+
stroke="currentColor"
100+
strokeWidth="2"
101+
strokeLinecap="round"
102+
strokeLinejoin="round"
103+
/>
104+
</svg>
105+
</button>
106+
</div>
107+
</>
108+
)
109+
}
110+
111+
export default MiniSearchBox

‎src/renderer/src/components/PageTitle.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
type PageTitleProps = {
2+
title: string
3+
description?: string
4+
}
5+
6+
export default function PageTitle({ title, description }: PageTitleProps): JSX.Element {
7+
return (
8+
<div
9+
style={{
10+
display: 'flex',
11+
flexDirection: 'column',
12+
alignItems: 'flex-start',
13+
gap: '8px',
14+
width: 'fit-content',
15+
height: 'fit-content'
16+
}}
17+
>
18+
<h2
19+
className="preSemiBold32"
20+
style={{
21+
color: 'var(--color-black)',
22+
lineHeight: '1.3'
23+
}}
24+
>
25+
{title}
26+
</h2>
27+
28+
{description && (
29+
<p
30+
className="preMedium20"
31+
style={{
32+
color: 'var(--color-dark-gray)',
33+
lineHeight: '1.5',
34+
whiteSpace: 'pre-line'
35+
}}
36+
>
37+
{description}
38+
</p>
39+
)}
40+
</div>
41+
)
42+
}

‎src/renderer/src/components/SearchBox.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ interface SearchBarProps {
77
onSearchClick?: () => void
88
}
99

10-
const SearchBar = ({
10+
const SearchBox = ({
1111
placeholder = '프로젝트 검색',
1212
onSearch,
1313
onSearchClick
@@ -43,13 +43,13 @@ const SearchBar = ({
4343
borderRadius: '20px',
4444
padding: '0 64px 0 32px',
4545
fontSize: '24px',
46-
fontFamily: 'Pretendard, "Noto Sans KR", sans-serif',
47-
fontWeight: 400,
48-
color: '#666666',
49-
backgroundColor: '#ffffff',
46+
fontFamily: 'var(--font-family)',
47+
fontWeight: 'var(--fw-regular)' as React.CSSProperties['fontWeight'],
48+
color: 'var(--color-dark-gray)',
49+
backgroundColor: 'var(--color-white)',
5050
outline: 'none',
5151
transition: 'all 0.2s ease',
52-
boxShadow: '2px 2px 4px 2px rgba(0, 0, 0, 0.1)'
52+
boxShadow: 'var(--shadow)'
5353
}
5454

5555
const iconStyle: CSSProperties = {
@@ -72,8 +72,8 @@ const SearchBar = ({
7272
<style>
7373
{`
7474
.search-bar-input::placeholder {
75-
color: #b8b6b6;
76-
font-weight: 400;
75+
color: var(--color-placeholder);
76+
font-weight: var(--fw-regular);
7777
}
7878
`}
7979
</style>
@@ -108,4 +108,4 @@ const SearchBar = ({
108108
)
109109
}
110110

111-
export default SearchBar
111+
export default SearchBox

0 commit comments

Comments
 (0)