고마워써 프로젝트 - #2-9. 작성하기

 

연하장 작성에서는 초안을 등록하거나, 등록된 초안을 불러오거나, ChatGPT로 내용을 작성할 수 있다

배경은 디자인 페이지 (https://dazz6study.tistory.com/111) 에서 설정한 이미지가 불러와진다

 

초안 목록에서 원하는 초안을 선택하면 작성 페이지 textarea 내용이 덮어씌워진다.

const LoadDraft = () => {
    nav.push("../write", {
      id: receiverId,
      nickname: receiverNickname,
      selectDraftContent: selectDraftContent,
    });
  };

 

onClick 이벤트로 LoadDraft 가 실행되는데, useHistory를 사용해서 id, nickname, selectDraftContent의 값을 같이 보낸다.

그러면 작성 경로로 이동했을 때 useLocation으로 값을 받는 방식.

 

ChatGPT를 사용해서 원하는 케이스를 작성하면 요구사항에 맞는 간단한 내용을 써 준다.

SpringBoot 환경에서 ChatGPT 사용하기 https://dazz6study.tistory.com/93

 

const RequestGPT = () => {
    setGptLoad(true);
    setGptRequestKey((prev) => prev + 1);
  };
  
  const { isLoading: gptLoading, data: gptData } = useQuery<String>(
    ["gptLoad", userId, gptRequestKey],
    () => GptLoad(gptPrompt),
    {
      enabled: gptRequestKey > 0,
      onSuccess: (data) => {
        setContents(data.toString());
        setGptModal(false);
      },
      onError: () => {
        toast.error("ChatGPT 요청 중 오류가 발생했습니다.");
        setGptModal(false);
      },
    }
  );

 

input에 요청사항을 입력하고 버튼을 클릭하면 RequestGPT가 호출된다.

GPT와의 통신(서버 엔드포인트)을 위한 useQuery에 enabled 조건을 거는 방식을 사용했기 때문에,

RequestGPT에서 GptRequestKey 값을 +1 해 주면 gptRequestKey (fetcher function)이 호출된다.