[WIL] 심화 프로젝트 - 챗봇, private route, 마이페이지 기능 구현 동작원리 및 트러블슈팅 정리

💡 WIL 20230807-20230811 : TypeScript React - 챗봇, private route, 마이 페이지 구현한 기능 동작원리 및 트러블슈팅 정리

---

1. 맡은 기능

• openai API 사용하여 챗봇 UI 기능 구현
• auth 여부에 따라 접근 불가능하도록 private route 설정
• 마이페이지 프로필 수정 및 내가 쓴 글 모아보기 페이지네이션

 

 

---

2. 사용 라이브러리

react-route-dom, redux-toolkit, react-query, supabase, openai, react-hook-form, styled-components

 

 

---

3. 구현한 기능 동작 원리

1) 🤖💬 챗봇 기능 - openai API, UI 상태관리

(1) openai API

• openai API를 사용하여 사용자 입력 prompt를 전달하여 답변을 얻을 수 있음

// lib - openai.ts
import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.REACT_APP_OPENAI_API_KEY
});

export const openai = new OpenAIApi(configuration);

// components - ChatBot.tsx

const handlePromptSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    dispatch(
      addChatLog({
        id: shortid.generate(),
        role: 'user',
        chat: prompt
      })
    );
    setPrompt('');
    try {
      const { data } = await openai.createCompletion({
        model: 'text-davinci-003',
        prompt,
        temperature: 0.8,
        max_tokens: 256
      });
      if (data?.choices[0]?.text) {
        dispatch(
          addChatLog({
            id: data.id,
            role: 'bot',
            chat: data.choices[0]?.text
          })
        );
      } else {
        alert('정상적으로 전달되지 않았습니다. 다시 시도해주세요.');
      }
    } catch (err) {
      alert('정상적으로 전달되지 않았습니다. 다시 시도해주세요.');
    }
    setLoading(false);
  };

 

(2) 채팅 UI

• 사용자의 프롬프트와 openai 답변을 redux toolkit store에 배열로 저장
• 배열의 요소(채팅 로그)들을 useSelector로 가져온 뒤, map으로 role === 'bot'과 role === 'user'가 차례로 렌더링되게 하여 채팅처럼 보이도록 UI 기능 구현

// components - ChatBot.tsx

import React, { useRef, useState, useEffect } from 'react';
import { openai } from '../../lib/openai';
import { useAppDispatch, useAppSelector } from '../../hooks';
import { RootState } from '../../redux/config/configStore';
import { addChatLog } from '../../redux/module/chatBotLogSlice';
import shortid from 'shortid';
import LoaderIcon from 'remixicon-react/Loader2LineIcon';
import SendPlaneIcon from 'remixicon-react/SendPlaneFillIcon';
import * as S from '../../styles/StChatBot';

const ChatBot = () => {
  const { user } = useAppSelector((state: RootState) => state.user);
  const [prompt, setPrompt] = useState('');
  const [loading, setLoading] = useState(false);
  const chatBotLogs = useAppSelector((state) => state.chatBotLog.logs);
  const dispatch = useAppDispatch();
  const submitButtonRef = useRef(null);

  const chatAreaRef = useRef<HTMLDivElement>(null);
  // 채팅 로그가 쌓이면 스크롤 자동으로 아래로 가게끔
  useEffect(() => {
    if (chatAreaRef.current) {
      chatAreaRef.current.scrollTop = chatAreaRef.current.scrollHeight;
    }
  }, [chatBotLogs]);

  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setPrompt(e.currentTarget.value);
  };

  // 질문을 전송하는 textarea에서 엔터를 입력하면 줄바꿈이 아닌 submit이 되도록
  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      if (submitButtonRef.current) {
        (submitButtonRef.current as HTMLButtonElement).click();
        setPrompt('');
      }
    }
  };

  const handlePromptSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    dispatch(
      addChatLog({
        id: shortid.generate(),
        role: 'user',
        chat: prompt
      })
    );
    setPrompt('');
    try {
      const { data } = await openai.createCompletion({
        model: 'text-davinci-003',
        prompt,
        temperature: 0.8,
        max_tokens: 256
      });
      if (data?.choices[0]?.text) {
        dispatch(
          addChatLog({
            id: data.id,
            role: 'bot',
            chat: data.choices[0]?.text
          })
        );
      } else {
        alert('정상적으로 전달되지 않았습니다. 다시 시도해주세요.');
      }
    } catch (err) {
      alert('정상적으로 전달되지 않았습니다. 다시 시도해주세요.');
    }
    setLoading(false);
  };

  return (
    <>
      <S.ChatContainer>
        <S.ChatTitle>🤔 변수명, 함수명을 물어보세요!</S.ChatTitle>
        <S.ChatArea ref={chatAreaRef}>
          <S.ChatLogBox>
            <S.RoleName>코린봇 🐘</S.RoleName>
            <S.BotChatLog>
              안녕하세요! <br /> 변수명, 함수명을 고민 중이신가요? 저에게 물어보세요!
            </S.BotChatLog>
          </S.ChatLogBox>
          {chatBotLogs.map((chat) => {
            if (chat.role === 'bot') {
              return (
                <S.ChatLogBox key={chat.id}>
                  <S.RoleName>코린봇 🐘</S.RoleName>
                  <S.BotChatLog>{chat.chat}</S.BotChatLog>
                </S.ChatLogBox>
              );
            } else if (chat.role === 'user') {
              return (
                <S.UserPromptBox key={chat.id}>
                  <S.RoleName>{user ? user.name : ''} 님</S.RoleName>
                  <S.UserChatLog>{chat.chat}</S.UserChatLog>
                </S.UserPromptBox>
              );
            }
            return null;
          })}
        </S.ChatArea>
        <S.PromptArea>
          <S.PromptForm onSubmit={handlePromptSubmit}>
            <S.PromptInput
              typeof="text"
              value={prompt}
              onChange={onChange}
              onKeyDown={onKeyDown}
              maxLength={64}
              placeholder="질문을 입력하세요!"
              required
            />
            <S.PromptSubmitButton type="submit" ref={submitButtonRef} disabled={!prompt || loading}>
              {loading ? <LoaderIcon /> : <SendPlaneIcon />}
            </S.PromptSubmitButton>
          </S.PromptForm>
        </S.PromptArea>
      </S.ChatContainer>
    </>
  );
};

export default ChatBot;

 

2) 🔐↪️ private route 기능 - react-router-dom

• store에서 user 상태가 user object인지 null인지 가져와서 user 객체가 존재할 때(=로그인 유저가 있을 때)만 글 작성 페이지와 마이 페이지인 '/write', '/mypage' url에 접근할 수 있도록 기능 구현
• user 객체가 없는 상태(user : null)에서 'korini-project.vercel.app/write' 또는 'korini-project.vercel.app/mypage'로 접근할 시 main 페이지(korini-project.vercel.app/)로 리다이렉트 되도록 하였음

// Router.tsx
const Router = () => {
  const { user } = useAppSelector((state: RootState) => state.user);
 
  // 중간 생략
 
{/* PrivateRoute : 로그인 유저 없으면 main 페이지로 이동 */}
          <Route element={<PrivateRoute />}>
            <Route path="/mypage" element={<Mypage />} />
            <Route path="/write" element={<Write />} />
          </Route>
        </Route>
        <Route path="*" element={<NotFound />} />

// PrivateRoute.tsx

import { Outlet, Navigate } from 'react-router-dom';
import { useAppSelector } from '../hooks';
import { RootState } from '../redux/config/configStore';

const PrivateRoute = () => {
  const { user } = useAppSelector((state: RootState) => state.user);
  return user ? <Outlet /> : <Navigate to="/" />
};

export default PrivateRoute;

 

 

---

3) 🗂️📃 마이 페이지 - supabase API, react-hook-form, pagination

(1) 현재 유저의 상태 관리

• 유저 auth 상태를 최상단 컴포넌트인 App.tsx에서 supabase api로 불러온 뒤, 로그인 한 유저가 있으면 유저의 uid, email, 닉네임을 store에 user state로 관리하여 각 컴포넌트에서 전역적으로 사용할 수 있도록 관리

 

(2) 닉네임 수정

• 이 때, supabase Auth에는 firebase Auth의 displayName과 달리 닉네임 요소가 없어서, supabase DB에 따로 user 정보를 등록하여 Auth가 아닌 user DB에서 닉네임 관리
• 닉네임 수정 요청 시 현재 사용자의 uid와 supabase user db에 저장되어있는 uid를 비교하여 닉네임 데이터를 전송/수정
• 수정 후에는 변경사항이 바로 렌더링될 수 있도록 store의 user.name에도 dispatch로 전달하여 화면에 변경 후 닉네임이 바로 반영될 수 있도록 함

 

(3) 비밀번호 변경

• react-hook-form 라이브러리를 사용하여 메시지, 유효성 검사(비밀번호 최소 길이 및 비밀번호 확인 입력), 에러 메시지 핸들링 기능을 구현하였고, 유효성 검사를 통과하면 supabase Auth에 사용자가 입력한 변경 비밀번호를 전송하여 비밀번호를 변경할 수 있도록 하였음

// ChangePassword.tsx

import supabase from '../../lib/client';
import { useForm } from 'react-hook-form';
import { ErrorMessage } from '@hookform/error-message';

import * as S from '../../styles/StMyPage';
import * as G from '../../styles/StButton';

interface IFormInput {
  password: string;
  passwordCheck: string;
}

const ChangePassword = () => {
  const { register, handleSubmit, formState } = useForm<IFormInput>();

  const onSubmit = async (formValues: IFormInput) => {
    try {
      const { data, error } = await supabase.auth.updateUser({
        password: formValues.password
      });

      if (error) {
        if (error.message === 'New password should be different from the old password.') {
          // 새 비밀번호가 이전 비밀번호와 같은 경우
          window.alert('기존 비밀번호와 변경 비밀번호가 같습니다. 다른 비밀번호로 시도해주세요.');
          return false;
        } else {
          window.alert('비밀번호가 정상적으로 변경되지 않았습니다. 다시 시도해주세요.');
          return false;
        }
      }
      if (data) {
        window.alert('비밀번호가 정상적으로 변경되었습니다.');
        return false;
      }
    } catch (error) {
      window.alert('비밀번호 변경 중 오류가 발생했습니다. 다시 시도해주세요.');
      return false;
    }
  };

  return (
    <>
      <S.MyPageForm onSubmit={handleSubmit(onSubmit)}>
        <S.LabelInputBox>
            <label htmlFor="password">비밀번호 변경</label>
          <S.MyPageInput
            id="password"
            type="password"
            {...register('password', {
              required: '새 비밀번호를 입력하세요.',
              minLength: {
                value: 6,
                message: '비밀번호는 6자 이상 입력해주세요.'
              }
            })}
          />
        </S.LabelInputBox>
        <ErrorMessage
          errors={formState.errors}
          name="password"
          render={({ message }) => <S.MyPageErrorMsg>{message}</S.MyPageErrorMsg>}
        />
        <S.LabelInputBox>
          <label htmlFor="passwordCheck">비밀번호 변경 확인</label>
          <S.MyPageInput
            id="passwordCheck"
            type="password"
            {...register('passwordCheck', {
              validate: (value, formValues) =>
                value === formValues.password || '비밀번호와 비밀번호 확인이 일치하지 않습니다.'
            })}
          />
        </S.LabelInputBox>
        <ErrorMessage
          errors={formState.errors}
          name="passwordCheck"
          render={({ message }) => <S.MyPageErrorMsg>{message}</S.MyPageErrorMsg>}
        />
        <G.Button type="submit">비밀번호 변경</G.Button>
      </S.MyPageForm>
    </>
  );
};

export default ChangePassword;

 

(4) 내가 쓴 글 기능

• uid를 활용하여 supabase 게시글 db에 담겨있는 게시글 작성자 uid를 비교해서, 현재 유저의 게시글만 필터링하여 가져와서 마이페이지에서 모아서 확인할 수 있도록 구현

 

(5) 페이지네이션

• 사용자가 작성한 글 데이터뿐만 아니라 개수를 따로 api로 가져옴
• useState로 currentPage를 관리
• 유저가 작성한 전체 글 개수, 한 페이지당 게시글(5개 상수로 설정), currentPage와 함께 react-js-pagination 라이브러리를 사용하여 페이지네이션 UI 구현

// api - post.ts

// 내가 쓴 글 조회
export const ITEMS_PER_PAGE = 5;
const getMyPosts = async (userid: string, pageNum: number): Promise<PostType[]> => {
  const startIndex = (pageNum - 1) * ITEMS_PER_PAGE;
  const { data } = await supabase
    .from('post')
    .select('*')
    .eq('userid', userid)
    .range(startIndex, startIndex + ITEMS_PER_PAGE - 1)
    .order('date', { ascending: false });
  return data as PostType[];
};

// 내가 쓴 글 전체 개수
const getMyPostsNum = async (userid: string) => {
  if (!userid) return null;
  const { count } = await supabase.from('post').select('*', { count: 'exact' }).eq('userid', userid);
  return count ?? 0;
};

// components - mypage - MyPosts.tsx
import { useNavigate } from 'react-router-dom';
import { useAppSelector } from '../../hooks';
import { RootState } from '../../redux/config/configStore';
import { useQueryClient, useQuery } from '@tanstack/react-query';
import { ITEMS_PER_PAGE, getMyPosts, getMyPostsNum } from '../../api/post';
import { useState, useEffect } from 'react';
import Pagination from 'react-js-pagination';
import Loading from '../layout/Loading';
import { PostType } from '../../types/types';

import * as S from '../../styles/StMyPage';
import * as P from '../../styles/StPageButton';

const MyPosts = () => {
  const navigate = useNavigate();
  const { user } = useAppSelector((state: RootState) => state.user);

  const [currentPage, setCurrentPage] = useState(1);
  const { data: myPostsNum } = useQuery(['myPostsNum'], () => getMyPostsNum(user?.userid ?? ''));

  const maxPostPage = Math.ceil(myPostsNum ? myPostsNum / ITEMS_PER_PAGE : 1);

  // 프리페칭
  const queryClient = useQueryClient();
  useEffect(() => {
    if (currentPage < maxPostPage) {
      const nextPage = currentPage + 1;
      queryClient.prefetchQuery(['myPosts', nextPage], () => getMyPosts(user?.userid ?? '', nextPage));
    }
  }, [currentPage, queryClient]);

  // 현재 페이지 데이터 불러오기
  const { isLoading, data: myPosts } = useQuery<PostType[]>(['myPosts', currentPage], () =>
    getMyPosts(user?.userid ?? '', currentPage)
  );

  if (isLoading) {
    return <Loading />;
  }

  return (
    <>
      <S.MainPostsContainer>
        {myPosts?.map((myPost) => {
          return (
            <S.box key={myPost.postid}>
              <S.PostBox
                onClick={() => {
                  // 절대경로
                  navigate(`/detail/${myPost.postid}`);
                }}
              >
                <S.PostBoxNav>
                  <div>{myPost.title}</div>
                  <S.Nickname>{myPost.name}</S.Nickname>
                </S.PostBoxNav>
                <S.PostContentBox>{myPost.body}</S.PostContentBox>
              </S.PostBox>
            </S.box>
          );
        })}
      </S.MainPostsContainer>
      <P.PageLists>
        <Pagination
          activePage={currentPage}
          itemsCountPerPage={ITEMS_PER_PAGE}
          totalItemsCount={myPostsNum ?? 0}
          pageRangeDisplayed={5}
          prevPageText={`◀`}
          nextPageText={`▶`}
          onChange={setCurrentPage}
        />
      </P.PageLists>
    </>
  );
};

export default MyPosts;

 

 

---

4. 트러블 슈팅

private route 관련

(1) 로그인 된 유저가 있을 때에도 주소창에 직접 '/write'나 '/mypage'를 입력하여 접근하려고 하면, main('/')으로 튕겨져 나오는 현상

• 원인
  • private route 여부를 판단하는 user 상태를 rtk store에서 받아오기 때문에, url에 직접 입력하면 페이지가 새로고침되어 store에서 user를 바로 받아오지 못하고 로그인 유저가 없는 것으로 인식하여 메인 페이지로 튕겨져나옴
• 해결방안 모색
  • localstorage에서 auth-token값을 getItem해서 auth-token값의 유무로 auth 유저의 존재를 받아오고자 함
• 실패
  • supabase의 경우 auth-token의 key값이 주기적으로 바뀌기 때문에, 이 바뀌는 값을 어떻게 가져와야할지 해결 방안을 찾지 못해서 최종적으로는 이 문제를 해결하지 못하였음