[최종 프로젝트] 5주차: '관리자/채팅 화면으로 돌아가기' 버튼 구현 (250819)

해피해피슈크림·2025년 8월 19일

SK 네트웍스 AI 부트캠프 13기 - 최종 프로젝트

목록 보기

19/32

😉 버튼 구현 결과

아래는 순서대로 채팅 화면과 관리자 화면이다.

관리자 화면과 챗봇 화면 간에 서로 왔다갔다 할 수 있게 해주는 버튼을 구현했다. 사진에서 왼쪽 하단에 빨간 네모 박스 친 부분이다.

사용자 정보 위에 버튼이 뜨도록 구현했다.

지금은 두 화면의 UI가 다른데, 이건 내일 수정할 계획이다.

챗봇 화면 구현은 동욱 오빠가, 관리자 화면 구현은 내가 담당했던지라 두 화면의 코드 구성이 달랐다. 일단 동욱 오빠의 사이드바가 좀 더 완성되어 있는 느낌이라서 오빠 코드에 관리자 화면으로 이동하는 버튼을 구현하고, 그걸 토대로 내 코드를 수정해나갔다.

🔍 코드 구현 과정

1. 챗봇 화면

챗봇 페이지 메인 코드: ChatPage.jsx

// ChatPage.jsx
// 관리자 페이지로 이동하는 기능을 구현하기 위한 함수 정의
  const handleGoToAdmin = useCallback(() => {
    navigate("/admin/members"); 
  }, [navigate]);

// ChatPage.jsx
  return (
    <div className="flex w-full min-h-screen bg-gray-100">
      <Sidebar
        userName={userName}
        ...
        onGoToAdmin={handleGoToAdmin} // 추가
      />

챗봇 페이지 사이드바: SideBar.jsx

// SideBar.jsx
function Sidebar({
  userName,
  ...
  onGoToAdmin, // 추가
}) {

// SideBar.jsx
{/* 관리자 화면으로 돌아가기 버튼 */}
      <div className="p-4 border-t border-gray-700">
        <button
          type="button"
          onClick={onGoToAdmin} // 버튼을 클릭하면 관리자 페이지로 이동한다.
          // className="w-full py-2 px-3 text-sm rounded-md bg-blue-600 hover:bg-blue-500 transition"
          className="w-full mb-2 py-2 px-4 rounded-md bg-gray-600 hover:bg-gray-500 text-white text-left flex items-center gap-2 transition"
        >
          관리자 화면
        </button>
      </div>

2. 관리자 화면

수정 과정

먼저: 단순히 챗봇 화면과 비슷하게 구현

보완 1: 사용자 정보 뜨도록 구현

보완 2: 버튼 위치 수정

보완 3: 챗봇 화면으로 이동하는 기능 구현

먼저: 단순히 챗봇 화면과 비슷하게 구현

처음에 감이 하나도 안 와서 우선 지피티한테 코드를 짜달라고 했다.
이때 세 가지 문제점을 발견하게 된다.

버튼이 사용자 정보 위에 있어야 하는데? -> 보완 1

사용자 정보는 왜 안 뜨지? -> 보완 2

버튼 눌러도 챗봇 화면으로 이동 X -> 보완 3

보완 1: 사용자 정보 뜨도록 구현

동욱 오빠 코드에서는 사용자 정보가 잘 떴는데 왜 난 안 뜰까, 그 이유를 알아보기 위해 동욱 오빠 코드를 살펴보았다.

💡 핵심 쏙쏙

백엔드(API): 사용자 정보를 제공하는 서버가 있음.
프론트엔드(React+axios): axios가 API에 요청을 보내고, 응답으로 JSON 데이터를 받아옴.
받은 데이터를 state에 저장하고, 화면에 표시함.
사용자 이름을 표시하는 부분을 보면, 지금은 userName을 부모 컴포넌트에서 전달받지 못하고 있어서 항상 "사용자"라고 뜸. ⭐

// SideBar.jsx
const initials = userName?.[0] || "U";
const displayName = userName || "사용자";

userName이 있으면 → userName의 첫 글자를 initials로 쓰고, displayName으로도 그대로 표시
userName이 없으면 → initials는 "U", displayName은 "사용자" 로 표시

이를 반영해 관리자 화면에서도 사용자 정보가 뜨도록 만들었다~

보완 2: 버튼 위치 수정

"채팅 화면으로 돌아가기" 버튼을 하단 사용자 정보 바로 위에 배치하기 위해 수정을 했다. 이는 기존 구조처럼 버튼이 하단 영역 안쪽이 아니라, 사용자 영역 바로 위 flex 컨테이너 안에 위치하도록 하는 방식이다.

보완 3: 버튼 눌러도 챗봇 화면으로 이동 X

맨 처음에 챗봇 화면 코드 수정한 것을 참고해, '채팅 화면으로 돌아가기' 버튼을 누르면 챗봇 화면으로 이동하게끔 수정했다. 이건 혼자 힘으로 해냈어 😉👍🏼✨

🦝 비하인드: 재택근무가 있었는데요...?

어제저녁 멘토링에 참여한 팀원 네 명 중 나 포함 세 명이 늦잠을 잤다 😴 갑자기 재택근무가 되어서 너무 행복했는데, 오후에 컴퓨터 딱 켰을 때 학원에 노트북 충전기를 놔두고 온 걸 깨달았다. 당연히 오늘 학원을 갈 거라 생각하고 학원에 충전기를 놔두고 온 거다.

급한 대로 휴대폰 충전기라도 꽂았지만, 충전은 10분에 1%가 충전이 될까 말까 였고 그에 비해 배터리 닳는 속도는 너무 빨랐다 ㅠㅠ 오늘은 그냥 집에서 쉬고 내일 열심히 할까 했는데.. 안 그래도 오늘 늦잠 잤으면서, 재택근무를 두 시간 정도 밖에 하지 못했다는 사실에 화가 나서 학원 다녀옴.. 이왕 재택근무를 할 거면 좀 알차게 하고 싶었는데 말이지. 🤨