[component] AI Prompt

[HwangSunBeom]

🔥 Related Issues

• close [component] AI prompt #38

💻 작업 내용

• AI 프롬프트 on/off 버튼 작성
• AI 프롬프트 UI 작성
• 프롬프트를 출력할 모달 작성
• 모달 상태 관리

✅ PR Point

• 소스코드 설명 ( ppt에 들어갈 부분 )

모달

const Modal: React.FC<ModalProps> = () => {
  const [isActive, setIsActive] = useState<boolean>(false);

  const handleClick = () => {
    setIsActive((prev) => !prev);
  };

  return (
    <>
      <AIButton onClick={handleClick} isActive={isActive} />
      {isActive && (
        <ModalOverlay onClick={() => setIsActive(false)}>
          <ModalContent onClick={(e) => e.stopPropagation()}>
            <p>This is a modal content!</p>
            <CloseButton onClick={() => setIsActive(false)}>Close</CloseButton>
          </ModalContent>
          <TextButton onClick={handleClick}>irp란?</TextButton>
        </ModalOverlay>
      )}
    </>
  );
};

AI 프롬프트 버튼

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;

☀️ 스크린샷 / GIF / 화면 녹화

모달 on/off에 따른 상태변화