[FE] feat: AI 채팅 구현

[HBSPS]

PR 설명

• AI 채팅 구현
• 채팅 소켓 에러 핸들링
• close [FE] AI 질문하기 기능 추가 #177

✅ 완료한 기능 명세

• AI 채팅 구현
• UI 수정
• 채팅 소켓 에러 핸들링
• 에러 토스트 추가

📸 스크린샷

고민과 해결과정

• 토스트에서 남은 시간을 시각적으로 보여줄 수 있는 방법
  • error는 state로 관리되며 state의 수정에 따라 렌더링 또는 제거됨
  • 이 상태에서 3초 동안 토스트를 유지시키고 사라지게 하되, 좋은 UX를 위해 3초의 시간을 시각적으로 보여주고자 함
  • 최대한 기본 CSS만 사용할 수 있도록 하기 위해 @keyframes를 사용하도록 함

  import { ErrorData } from '@/types/chatting';
  
  interface ChattingErrorToastProps {
  errorData: ErrorData;
  setErrorData: React.Dispatch<React.SetStateAction<ErrorData | null>>;
  }
  
  export default function ChattingErrorToast({ errorData, setErrorData }: ChattingErrorToastProps) {
  return (
    <div className="absolute z-10 flex flex-col items-start w-full bottom-24 ">
      <div className="flex flex-col p-5 mb-5 ml-5 drop-shadow-lg bg-base">
        <span className="text-sm">{errorData.text1}</span>
        <span className="text-sm">{errorData.text2}</span>
        <div
          className="absolute bottom-0 left-0 flex-grow w-full h-2 bg-point-blue animate-[toast_3s_linear_forwards]"
          onAnimationEnd={() => setErrorData(null)}
        />
      </div>
    </div>
  );
  }

  toast: {
    '0%': { width: '100%' },
    '100%': { width: '0%' },
  },

  • onAnimationEnd 이벤트를 통해 애니메이션 종료를 감지할 수 있음
  • 해당 이벤트를 이용하여 애니메이션이 종료되면 state의 변경이 일어나고 토스트가 사라지도록 구성할 수 있었음

[d0422]

LGTM

[d0422]

요 svg는 사용하지 않는 것 같은데 삭제해도 괜찮을까요?

[HBSPS]

넵 삭제했습니다!