From 9d119e55b0ac9f19504c684fe4497aa08e8b3de5 Mon Sep 17 00:00:00 2001 From: Sunbeom Date: Sun, 3 Nov 2024 04:48:08 +0900 Subject: [PATCH 1/6] =?UTF-8?q?:lipstick:=20Common=20Components=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 레이아웃, 폰트, 구분선 등 공용 컴포넌트 작성 --- src/Common/common.ts | 129 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 src/Common/common.ts diff --git a/src/Common/common.ts b/src/Common/common.ts new file mode 100644 index 0000000..75cc079 --- /dev/null +++ b/src/Common/common.ts @@ -0,0 +1,129 @@ +import styled from "@emotion/styled"; + + +export const Txt12 = styled.span` + font-size: 0.75rem; /* 12px */ + line-height: 1rem; /* 16px */ +`; +export const Txt12Gray = styled.span` + font-size: 0.75rem; /* 12px */ + line-height: 1rem; /* 16px */ + color: #999999; +`; +export const Txt14 = styled.span` + font-size: 0.875rem; /* 14px */ + line-height: 1.25rem; /* 20px */ +`; +export const Txt14Gray = styled.span` + font-size: 0.875rem; /* 14px */ + line-height: 1.25rem; /* 20px */ + color: #999999; +`; +export const Txt14Bold = styled.span` + font-size: 0.875rem; /* 14px */ + line-height: 1.25rem; /* 20px */ + font-weight: 500; +`; +export const Txt16 = styled.span` + font-size: 1rem; /* 16px */ + line-height: 1.5rem; /* 24px */ +`; +export const Txt16Bold = styled.span` + font-size: 1rem; /* 16px */ + line-height: 1.5rem; /* 24px */ + font-size: 16px; +`; +export const Txt18 = styled.span` + font-size: 1.125rem; /* 18px */ + line-height: 1.75rem; /* 28px */ +`; +export const Txt18Bold = styled.span` + font-weight: 500; + font-size: 1.125rem; /* 18px */ + line-height: 1.75rem; /* 28px */ +`; + +export const Txt20 = styled.span` + font-size: 1.25rem; /* 20px */ + line-height: 1.75rem; /* 28px */ +`; +export const Txt20Bold = styled.span` + font-weight: 500; + font-size: 1.25rem; /* 20px */ + line-height: 1.75rem; /* 28px */ +`; + +export const FlexContainer = styled.div` + display: flex; + align-items: center; + justify-content: space-between; +`; + +export const FlexCenterContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const MainBody = styled(FlexContainer)` + align-items: flex-start; + border-bottom: 1px solid #eeeeee; +`; + +export const MainBodyInnerLeft = styled(FlexContainer)` + padding: 0px; + min-height: 500px; + align-items: flex-start; + flex-direction: column; + justify-content: flex-start; + border-right: 1px solid #eeeeee; +`; + +export const MainBodyInnerRight = styled(FlexContainer)` + padding: 0px; + width: 310px; + min-width: 310px; + min-height: 500px; + height: 100%; + align-items: flex-start; + justify-content: flex-start; + + flex-direction: column; +`; + +export const MainBodyCell = styled(FlexContainer)` + padding: 30px; + width: 100%; + border-bottom: 1px solid #eeeeee; + align-items: flex-start; + flex-direction: column; +`; + +export const MainBodyFormContent = styled(FlexContainer)` + flex-direction: row; + width: 100%; + justify-content: flex-start; +`; + +export const FormContentLeft = styled(FlexContainer)` + width: 200px; + align-items: flex-start; + justify-content: flex-start; +`; + +export const FormContentRight = styled(FlexContainer)` + align-items: flex-end; + width: 100%; + justify-content: flex-start; + flex-direction: column; + flex: 1; +`; + +export const LineEEE = styled.div` + height: 1px; + background-color: #eeeeee; + width: 100%; + margin-top: 16px; + margin-bottom: 16px; +`; \ No newline at end of file From d77f57327c8af5a1593ebfbee4b78fddf37c06c7 Mon Sep 17 00:00:00 2001 From: Sunbeom Date: Tue, 3 Dec 2024 15:19:22 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=93=9D=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Common/assets/activeAI.svg | 18 ++++++++++++++++++ src/Common/assets/waitingAI.svg | 22 ++++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 src/Common/assets/activeAI.svg create mode 100644 src/Common/assets/waitingAI.svg diff --git a/src/Common/assets/activeAI.svg b/src/Common/assets/activeAI.svg new file mode 100644 index 0000000..352e215 --- /dev/null +++ b/src/Common/assets/activeAI.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/Common/assets/waitingAI.svg b/src/Common/assets/waitingAI.svg new file mode 100644 index 0000000..07fb83b --- /dev/null +++ b/src/Common/assets/waitingAI.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + From 537bc670f67fb882f026680ecc2a7493f4de59f2 Mon Sep 17 00:00:00 2001 From: Sunbeom Date: Tue, 3 Dec 2024 15:19:43 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=92=84=20AI=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Common/components/AIButton.tsx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/Common/components/AIButton.tsx diff --git a/src/Common/components/AIButton.tsx b/src/Common/components/AIButton.tsx new file mode 100644 index 0000000..9439807 --- /dev/null +++ b/src/Common/components/AIButton.tsx @@ -0,0 +1,21 @@ +import { useState } from 'react'; +import styled from '@emotion/styled'; +import Icon_waiting from '../assets/waitingAI.svg'; +import Icon_active from '../assets/activeAI.svg'; +import { StyledAIButton } from '../common'; + +interface Props { + onClick: () => void; + isActive: boolean +} + +const AIButton = ({onClick, isActive}:Props) => { + + return ( + + button content + + ); +}; + +export default AIButton; \ No newline at end of file From f462aff67354e12273adf85e731ccdfecb434ce8 Mon Sep 17 00:00:00 2001 From: Sunbeom Date: Tue, 3 Dec 2024 15:19:56 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=92=84=20AI=20=EB=AA=A8=EB=8B=AC=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Common/components/Modal.tsx | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 src/Common/components/Modal.tsx diff --git a/src/Common/components/Modal.tsx b/src/Common/components/Modal.tsx new file mode 100644 index 0000000..da2ab52 --- /dev/null +++ b/src/Common/components/Modal.tsx @@ -0,0 +1,30 @@ +import { useState } from 'react'; +import { CloseButton, ModalContent, ModalOverlay, TextButton } from '../common'; +import AIButton from './AIButton'; + +interface ModalProps {} + +const Modal: React.FC = () => { + const [isActive, setIsActive] = useState(false); + + const handleClick = () => { + setIsActive((prev) => !prev); + }; + + return ( + <> + + {isActive && ( + setIsActive(false)}> + e.stopPropagation()}> +

This is a modal content!

+ setIsActive(false)}>Close + + irp란? + + )} + + ); +}; + +export default Modal; From 144abf7290d54e9d59ea5d25926dc7b4e42ee555 Mon Sep 17 00:00:00 2001 From: Sunbeom Date: Tue, 3 Dec 2024 15:20:13 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=92=84=20=EA=B3=B5=EC=9A=A9=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Common/common.ts | 56 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/src/Common/common.ts b/src/Common/common.ts index 75cc079..42b26c5 100644 --- a/src/Common/common.ts +++ b/src/Common/common.ts @@ -126,4 +126,60 @@ export const LineEEE = styled.div` width: 100%; margin-top: 16px; margin-bottom: 16px; +`; + +export const StyledAIButton = styled.button` + border: none; + background: none; + cursor: pointer; + padding: 0; + + img { + width: 100px; + height: 100px; + } +`; + +export const ModalOverlay = styled.div` + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: flex-end; + align-items: flex-end; + padding: 20px; +`; + +export const ModalContent = styled.div` + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +`; + +export const CloseButton = styled.button` + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + cursor: pointer; + font-size: 16px; +`; + +export const TextButton = styled.a` + position: fixed; + bottom: 20px; + left: 20px; + border: 1px solid #000; + background: white; + color: black; + padding: 10px 20px; + border-radius: 20px; + text-decoration: none; + font-weight: bold; + cursor: pointer; `; \ No newline at end of file From 2fcfd935b3200880dcd79962dfb01fb5de7ae33d Mon Sep 17 00:00:00 2001 From: Sunbeom Date: Tue, 17 Dec 2024 13:10:08 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=92=84=20=EA=B9=A1=ED=86=B5=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Common/components/AIArea.tsx | 24 ++++++++++++++++++++++ src/Common/components/Modal.tsx | 34 ++++++++++++-------------------- 2 files changed, 37 insertions(+), 21 deletions(-) create mode 100644 src/Common/components/AIArea.tsx diff --git a/src/Common/components/AIArea.tsx b/src/Common/components/AIArea.tsx new file mode 100644 index 0000000..ca660fc --- /dev/null +++ b/src/Common/components/AIArea.tsx @@ -0,0 +1,24 @@ +import { useState } from 'react'; +import AIButton from './AIButton'; +import Modal from './Modal'; + +const AIArea = () => { + const [isModalActive, setIsModalActive] = useState(false); + + const handleOpenModal = () => { + setIsModalActive(true); + }; + + const handleCloseModal = () => { + setIsModalActive(false); + }; + + return ( + <> + + + + ); +}; + +export default AIArea; diff --git a/src/Common/components/Modal.tsx b/src/Common/components/Modal.tsx index da2ab52..ee7fbfc 100644 --- a/src/Common/components/Modal.tsx +++ b/src/Common/components/Modal.tsx @@ -1,29 +1,21 @@ -import { useState } from 'react'; import { CloseButton, ModalContent, ModalOverlay, TextButton } from '../common'; -import AIButton from './AIButton'; -interface ModalProps {} +interface ModalProps { + isActive: boolean; + onClose: () => void; +} -const Modal: React.FC = () => { - const [isActive, setIsActive] = useState(false); - - const handleClick = () => { - setIsActive((prev) => !prev); - }; +const Modal: React.FC = ({ isActive, onClose }) => { + if (!isActive) return null; return ( - <> - - {isActive && ( - setIsActive(false)}> - e.stopPropagation()}> -

This is a modal content!

- setIsActive(false)}>Close - - irp란? - - )} - + + e.stopPropagation()}> +

This is a modal content!

+ Close + irp란? + + ); };