init

2025-02-12 18:29:27 +09:00
commit 513ea114cc
290 changed files with 84274 additions and 0 deletions
--- a/src/components/common/button/Button.js
+++ b/src/components/common/button/Button.js
@@ -0,0 +1,151 @@
+import { useEffect, useState } from 'react';
+
+import styled, { css } from 'styled-components';
+import ResetIcon from '../../../assets/img/icon/icon-reset.png';
+/**
+ * @param {string} text 버튼 내부 텍스트
+ * @param {string} type 버튼 타입 (button, submit)
+ * @param {string} errorMessage 표시할 에러 메시지
+ * @param {() => void} handleClick 버튼 클릭시 실행할 이벤트, Route 기능의 경우 history.push와 같은 함수를 이용합니다.
+ * @param {string} buttonColor 버튼 배경 색상
+ * @param {string} hoverColor 버튼 호버 배경 색상
+ * @param {object} props 폰트 관련 속성
+ */
+
+const Button = ({ text, type = 'button', errorMessage, handleClick, theme, size, width, height, bordercolor, disabled, name }) => {
+	const [isShowErrorMessage, setIsShowErrorMessage] = useState(false);
+
+	const handleButtonClick = () => {
+		if (errorMessage) {
+			setIsShowErrorMessage(true);
+		} else {
+			handleClick?.();
+		}
+	};
+
+	useEffect(() => {
+		errorMessage || setIsShowErrorMessage(false);
+	}, [errorMessage]);
+
+	return (
+		<Wrapper width={width}>
+			<ButtonStyle
+				onSubmit={e => e.preventDefault()}
+				type={type}
+				disabled={disabled}
+				onClick={handleClick}
+				theme={theme}
+				size={size}
+				bordercolor={bordercolor}
+				width={width}
+				height={height}
+				name={name}>
+				{text}
+			</ButtonStyle>
+			{isShowErrorMessage && <ErrorText>{errorMessage}</ErrorText>}
+		</Wrapper>
+	);
+};
+
+const Wrapper = styled.div`
+	display: ${props => props.display || 'inline-block'};
+	width: ${props => props.width};
+	text-align: center;
+`;
+
+const sizes = {
+	large: {
+		width: '100%',
+		fontSize: '17px',
+		padding: '16px 20px',
+		fontWeight: '600',
+		height: '50px',
+	},
+};
+
+const sizeStyles = css`
+	${({ size }) => css`
+		width: ${sizes[size].width};
+		font-size: ${sizes[size].fontSize};
+		border-radius: ${sizes[size].borderRadius};
+		padding: ${sizes[size].$padding};
+		font-weight: ${sizes[size].fontWeight};
+		height: ${sizes[size].height};
+	`}
+`;
+
+const ButtonStyle = styled.button`
+	border-radius: 5px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: ${props => props.width || '80px'};
+	height: ${props => props.height || '30px'};
+	min-width: fit-content;
+	color: #2c2c2c;
+	font-size: 14px;
+	${props => props.size && sizeStyles}
+
+	${props =>
+		props.theme === 'line' &&
+		css`
+			border: 1px solid #2c2c2c;
+			background: transparent;
+		`}
+  ${props =>
+		props.theme === 'primary' &&
+		css`
+			background: #2c2c2c;
+			color: #fff;
+		`}
+		${props =>
+		props.theme === 'disable' &&
+		css`
+			background: #d9d9d9;
+			color: #fff;
+		`}
+  ${props =>
+		props.theme === 'reset' &&
+		css`
+			border: 1px solid ${props.bordercolor};
+			background: url(${ResetIcon}) 50% 50% no-repeat;
+			border: 1px solid #d9d9d9;
+			width: 35px;
+			height: 35px;
+		`}
+  ${props =>
+		props.theme === 'gray' &&
+		css`
+			background: #b8b8b8;
+			color: #fff;
+			width: 100px;
+			height: 35px;
+		`}
+	${props =>
+		props.theme === 'search' &&
+		css`
+			background: #2c2c2c;
+			color: #fff;
+			width: 100px;
+			height: 35px;
+		`}
+    ${props =>
+            props.theme === 'find' &&
+            css`
+			background: #8c8c8c;
+			color: #fff;
+			width: 100px;
+			height: 35px;
+		`}
+`;
+
+const ErrorText = styled.p`
+	color: red;
+	text-align: center;
+	font-weight: 400;
+	font-size: 12px;
+	margin-top: 10px;
+	line-height: 15px;
+`;
+
+export default Button;