GETP-150 feature: 피플 정보 등록 Mock API 코드 작성 및 연동

[toothlessdev]

✨ 구현한 기능

• 피플 정보 등록 mock api 코드 작성

mocks/people/data.js 에 피플 mock data 를 작성하였습니다

export const peopleData = [
    {
        peopleId: 1,
        nickname: "knu12370",
        peopleType: "INDIVIDUAL",
        profileImageUri: "/images/1/profile/image.jpeg",
        profile: {
            activityArea: "대구광역시 달서구",
            hashtags: [

• 피플 정보 등록 service 및 types 구현

src/services/people/people.service.ts 의 peopleService 객체에 registerPeople 메서드를 작성하였습니다

RegisterPeopleRequestBody 를 파라미터로 받아, 요청하는 비동기함수 request 를 작성하고,

react-toastify 의 toast.promise 의 인자로 넘겨주어 해당 프로미스가 핸들링 되는 동안 띄울 toast 코드를 작성하였습니다

export const peopleService = {
    // ...
    registerPeople: async (body: RegisterPeopleRequestBody) => {
        const request = async () => {
            const response = await api.post<RegisterPeopleResponseBody>("/people", body);
            return response.data;
        };

        return toast.promise(request, {
            pending: "피플 정보 등록 중입니다",
            success: "피플 정보 등록 완료",
            error: "피플 정보 등록 실패",
        });
    },
};

• useRegisterPeople 커스텀 훅 구현

이후 src/services/people/hooks/useRegisterPeople.tsx 에 피플 정보를 등록하는 커스텀 훅을

@tanstack/react-query 의 useMutation() 훅을 사용해 작성하였습니다.

import { useCallback, useRef, useState } from "react";

import { peopleService } from "../people.service";
import { PeopleType } from "../people.types";
import { useMutation } from "@tanstack/react-query";

export const useRegisterPeople = (profileImageUri: string) => {
    const emailRef = useRef<HTMLInputElement | null>(null);
    const nicknameRef = useRef<HTMLInputElement | null>(null);
    const phoneNumberRef = useRef<HTMLInputElement | null>(null);
    const [peopleType, setPeopleType] = useState<PeopleType | null>(null);

    const mutation = useMutation({
        mutationFn: () =>
            peopleService.registerPeople({
                nickname: nicknameRef.current?.value as string,
                email: emailRef.current?.value as string,
                phoneNumber: phoneNumberRef.current?.value as string,
                peopleType: peopleType as PeopleType,
                profileImageUri: profileImageUri,
            }),
    });

    const handleIndividualClick = useCallback(() => {
        setPeopleType(PeopleType.INDIVIDUAL);
    }, []);

    const handleTeamClick = useCallback(() => {
        setPeopleType(PeopleType.TEAM);
    }, []);

    const handleRegisterButtonClick = useCallback(() => {
        mutation.mutate();
    }, [mutation]);

    return {
        peopleType,
        emailRef,
        nicknameRef,
        phoneNumberRef,
        handleIndividualClick,
        handleTeamClick,
        handleRegisterButtonClick,
        ...mutation,
    };
};

커스텀 훅 내부에서 해당 요청에 필요한 필드의 값을 얻기 위한

emailRef , nicknameRef , phoneNumberRef , peopleType , handleIndividualClick , handleTeamClick , handleRegisterButtonClick 을 구현하고 리턴하였습니다

• 피플 정보 등록 mock api 연동

이후 해당 훅이 쓰이는 PeopleInfoRegisterPage 에서

    const { emailRef, nicknameRef, phoneNumberRef, handleIndividualClick, handleTeamClick, handleRegisterButtonClick } =
        useRegisterPeople("/image/test/uri");

호출하고 리턴하는 ref 와 함수를 바인딩 해 주었습니다

📢 논의하고 싶은 내용

🎸 기타

MSW REST API 테스트 mocking 하는 법
@tanstack/react-query useMutation hook 사용법

[toothlessdev]

API 명세 변경으로 PR Close