제한된 API 에서 추가 정보 요청하기

프로젝트에서의 문제 상황

프로젝트 팀원들과 원데이 클래스를 주제로 한 프로젝트를 진행하던 중, 사용자가 회원 가입 시에 수강생 또는 강사로 나누어 회원 가입을 진행하게 만들고자 하였습니다.

• 수강생: 클래스 신청, 창작품 게시물 공유
• 강사: 클래스 개설, 클래스 정보 등록

문제는 프로젝트 팀이 프론트엔드 개발자 4명으로만 구성되어 있었고, 제공된 API만을 사용해야 하는 제한적인 환경이었습니다. 그래서 기존 데이터 구조를 변경하거나 추가하는 것이 불가능했습니다.

해결 방안: 기존 데이터에 새로운 데이터 추가

기존 데이터에 새로운 데이터를 추가하여 이를 하나로 묶어 서버에 전달하는 방식을 채택하여 해결하였습니다.

SignUp 페이지

먼저 회원 가입 페이지에서는 사용자가 '일반 회원 (수강생)' 또는 '강사 회원' 중에서 선택하도록 하였습니다.

//회원가입 일부코드
const [type, setType] = useState('Student');

const handleStudentBtnClick = () => {
  setType('Student');
};

const handleTeacherBtnClick = () => {
  setType('Teacher');
};

이렇게 선택된 유형은 type 변수에 저장됩니다.

const setSignup = useSetRecoilState(SignUpAtom);
if (email && password && emailValid && passwordValid) {
  setSignup({ email, password, type });
  navigate('/account/set_profile');
} else {
  setSignup(false);
}

회원 가입 시에 입력한 정보와 선택한 회원 유형(type)은 가입한 이메일과 비밀번호와 함께 Recoil의 useSetRecoilState hook을 통해 SignUpAtom유저 정보로 저장됩니다. Reocil과 관련된 자세한 포스팅은 (링크)를 참조해주세요

SignUpAtom 컴포넌트

import { atom } from "recoil";
import { recoilPersist } from "recoil-persist";

const { persistAtom } = recoilPersist();

//회원가입 토큰 정보
export const SignUpAtom = atom({
  key: "SignUpAtom",
  default: {},
  effects_UNSTABLE: [persistAtom],
});

setProfile 페이지

import { SignUpAtom } from '../../Store/AtomSignupState'; // SignUpAtom import

const SetProfile = () => {
  const signupInfo = useRecoilValue(SignUpAtom);
  const [userInfo, setUserInfo] = useState({ ...signupInfo });  
}

SetProfile 컴포넌트 내에서, useRecoilValue(SignUpAtom)을 이용해 SignUpAtom의 현재 값을 읽어옵니다. 그 값을 signupInfo에 저장합니다.
useState({ ...signupInfo })를 통해 signupInfo의 값을 복사하여 userInfo라는 유저정보다 담긴 로컬 상태를 생성합니다.

//프로필 설정 일부코드

const handleSetProfileSubmit = async (event) => {
  event.preventDefault();

  if (username && accountname && usernameValid && accountValid) {
    //accountname과 type을 같이 전달 ex) StudentJunny
    const updatedAccountname = `${userInfo.type}${accountname}`;
    setUserInfo((prevValue) => {
      return {
        ...prevValue,
        username: username,
        accountname: updatedAccountname, // 같이 합친 값을 accountname으로 요청
        intro: intro,
        image: image,
      };
    });
    navigate('/account/login');
  }
};

 useEffect(() => {
  if (username && accountname && usernameValid && accountValid) {
    PostSignUp(userInfo);
  }
}, [username, accountname, usernameValid, accountValid, userInfo]);

프로필 설정 페이지로 넘어와 프로필 설정란을 다 작성하고 제출하기 위해 handleSetProfileSubmit가 실행될 때, API요청 명세에는 유저의 회원 유형에 대한 별도의 처리가 없기 때문에 회원 유형을 식별할 수 있도록 accountname (계정 ID) 값 앞에 Student 또는 Teacher 중 하나의 type 값을 추가한 변수인 updatedAccountname에 함께 전달하여 학생과 강사 계정을 구분할 수 있도록 하였습니다.