본문으로 건너뛰기

23.06.29

오늘 한 일​

  • 학교 융합경진대회 해커톤 2일차

하루 요약​

  • 10:00 ~ 22:00 학교 융합경진대회 해커톤 2일차

학교 융합경진대회 해커톤 2일차

원래는 내일 오후 10시까지 제출 마감이지만 생각보다 빨리 끝나서 오늘 마무리했다.

경진대회의 주제는 다음과 같다.

ChatGPT(챗GPT)가 가져올 사회 변화와 AI혁명(초거대AI/대화형AI/생성형AI 등) 관련, 문제점 진단과 해결 방안 도출을 포함한 아이디어 제안 영상 제작(5분 이내)

우리는 개발까지 할 생각이었기 때문에 진짜 우리가 ChatGPT를 사용한 서비스를 만들어 내는 것을 목표로 아이디어를 모았다.

하지만 나온 아이디어 대부분 우리가 구현할 수 있는 범위를 넘어선 경우가 많아 하나를 고르기가 쉽지 않았다.

최종적으로 정한 아이디어는 관리비 고지서를 ChatGPT가 분석하여 개인별 맞춤형 에너지 절약 솔루션을 제공하는 서비스이다.

사용자가 고지서를 업로드 또는 정보 연결을 하면 그 내용을 ChatGPT가 분석하여 사용자에게 분석결과를 보여주고, GPT와 채팅을 해서 관리비 절약 방법이나 에너지 절약 방법을 제공하는 서비스이다.

아이디어가 1일차 저녁 먹기 전 쯤 정해지고, 저녁 먹고 바로 디자인과 개발이 동시에 이루어졌다. 디자인이 빨리 나오고 개발도 세명이서 프론트엔드 개발을 하니까 디자인이 나옴과 동시에 개발이 끝났다.

그래서 어제 밤을 새지 않고 집에서 잘 수 있었다. 원래는 대회 기간 3일 동안 밤을 샐 줄 알았는데, 생각보다 빨리 끝나서 놀랐다.

그리고 오늘 채팅 쪽 개발까지 완료하고, 영상 만들고 결과 보고서도 써서 끝냈다. 원래는 시간 때문에 서비스에 ChatGPT를 넣을지 안 넣을지 고민했는데, 시간이 많이 남아서 추가로 GPT를 연결해서 구현했다.

채팅 페이지​

채팅 말풍선이 화면 아래에서부터 올라오는 걸 구현해야했는데, 그냥 shift되는 느낌이라 애니메이션을 넣고 싶었다.

단순 css로 구현하려고 했는데 잘 안돼서 framer-motion을 사용해서 자연스러운 느낌을 주었다.

그리고 채팅이 화면을 위로 넘어갔을 때 스크롤이 자동으로 내려가도록 하기 위해 useEffect와 useRef를 사용했다.

import { useEffect, useRef } from 'react';
import { AnimatePresence } from 'framer-motion';

const chatRef = useRef(null);

useEffect(() => {
  chatRef.current.scrollIntoView({ behavior: 'smooth' });
}, [chatList]);

return (
  <div>
    //...
    <AnimatePresence>
      {messages.map((message, index) => (
        <SpeechBubble key={index} type={message.type}>
          {message.content}
        </SpeechBubble>
      ))}
    </AnimatePresence>
    <div ref={chatRef} />
  </div>
);

내일 할 일​

  • 알고리즘 문제 풀기
  • DogSounds TIL 검색 기능, 댓글 기능 추가
  • 영화 보기