Skip to content

[component] AI Prompt #39

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.

Sign up for GitHub

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

Open
HwangSunBeom wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

[component] AI Prompt #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9d119e5
:lipstick: Common Components ์ž‘์„ฑ
HwangSunBeom Nov 2, 2024
42df51d
Merge remote-tracking branch 'origin/#15/Style-Common-Components' intโ€ฆ
HwangSunBeom Dec 3, 2024
d77f573
๐Ÿ“ ๋ฒ„ํŠผ ์•„์ด์ฝ˜ ์ถ”๊ฐ€
HwangSunBeom Dec 3, 2024
537bc67
๐Ÿ’„ AI๋ฒ„ํŠผ ์ปดํฌ๋„ŒํŠธ ์ž‘์„ฑ
HwangSunBeom Dec 3, 2024
f462aff
๐Ÿ’„ AI ๋ชจ๋‹ฌ ์ปดํฌ๋„ŒํŠธ ์ž‘์„ฑ
HwangSunBeom Dec 3, 2024
144abf7
๐Ÿ’„ ๊ณต์šฉ ์ปดํฌ๋„ŒํŠธ ์ž‘์„ฑ
HwangSunBeom Dec 3, 2024
2fcfd93
๐Ÿ’„ ๊นกํ†ต ๋ชจ๋‹ฌ ์ปดํฌ๋„ŒํŠธ
HwangSunBeom Dec 17, 2024
0f0f023
Merge branch 'develop' into #38/AI-Prompt
HwangSunBeom Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/Common/assets/activeAI.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions src/Common/assets/waitingAI.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
185 changes: 185 additions & 0 deletions src/Common/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
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;
`;

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;
`;
24 changes: 24 additions & 0 deletions src/Common/components/AIArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<>
<AIButton onClick={handleOpenModal} isActive={isModalActive} />
<Modal isActive={isModalActive} onClose={handleCloseModal} />
</>
);
};

export default AIArea;
21 changes: 21 additions & 0 deletions src/Common/components/AIButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<StyledAIButton onClick={onClick}>
<img src={isActive ? Icon_active : Icon_waiting} alt="button content" />
</StyledAIButton>
);
};

export default AIButton;
22 changes: 22 additions & 0 deletions src/Common/components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { CloseButton, ModalContent, ModalOverlay, TextButton } from '../common';

interface ModalProps {
isActive: boolean;
onClose: () => void;
}

const Modal: React.FC<ModalProps> = ({ isActive, onClose }) => {
if (!isActive) return null;

return (
<ModalOverlay onClick={onClose}>
<ModalContent onClick={(e) => e.stopPropagation()}>
<p>This is a modal content!</p>
<CloseButton onClick={onClose}>Close</CloseButton>
<TextButton onClick={onClose}>irp๋ž€?</TextButton>
</ModalContent>
</ModalOverlay>
);
};

export default Modal;