GETP-159 feature: 피플 프로필 편집 API 연동

[toothlessdev]

✨ 구현한 기능

• AccordionProvider 와 TechStackProvider 컴포넌트의 children props 를 optional 로 변경했습니다
• Providers[] 로 감싼 WrappedComponent 를 리턴하는 withProvider 고차 컴포넌트를 구현하였습니다

import { cloneElement } from "react";

export const withProviders = <Props extends object>(
    providers: React.ReactElement[],
    Component: React.ComponentType<Props>,
) => {
    return (props: Props) => {
        const ProvidersWrappedComponent = providers.reduceRight(
            (providers, provider) => {
                return cloneElement(provider, {}, providers);
            },
            <Component {...props} />,
        );
        return ProvidersWrappedComponent;
    };
};

• 피플 프로필 편집 API 를 연동하였습니다
• TextArea 컴포넌트에서 ref 를 React.forwardRef 로 HTMLTextAreaElement 로 전달하도록 변경하였습니다
• ProfileHashTag 컴포넌트에서 내부적으로만 관리되던 입력된 해시태그 상태를 React Context 를 사용해 관리하도록 변경하였습니다

📢 논의하고 싶은 내용

• Axios 관련 예외처리시 중복되는 코드가 발생합니다. Builder 패턴 또는 함수형으로 ExceptionHandler 를 구현해 리팩토링 하는것이 좋아 보입니다. 어떻게 생각하시나요?

    registerPeopleProfile: async (body: RegisterPeopleProfileRequestBody) => {
        const request = async () => {
            const response = await api.post<RegisterPeopleProfileResponseBody>(`/people/me/profile`, body);

            if (response instanceof AxiosError) {
                const status = response.response?.status;
                if (status === 400) throw new Error("필수항목을 입력해주세요");
                if (status === 404) throw new Error("등록된 피플정보가 없습니다. 피플 정보를 먼저 등록해주세요");
            }
            return response.data;
        };

        return toast.promise(request, {
            pending: "피플 프로필 등록 중입니다",
            success: "피플 프로필 등록 성공!",
            error: "피플 프로필 등록 실패",
        });
    },

• 기타란에 ContextProvider 를 페이지 단에서 처리할 더 좋은 방법이 있다면 의견 제시해주시면 감사드리겠습니다

🎸 기타

• 피플 프로필 등록 API 를 연동하기 위해서 PeopleProfileEditPage 에서 학교, 전공 ... 등의 정보를 가져오고, TechStackProvider 내부에 있는 Context 를 가져와야 합니다
• 하지만, TechStackProvider 는 PeopleProfileEditPage 내부에 감싸져 있어, 페이지 단에서 해당 Context 를 가져올시 useTechStack 은 TechStackProvider 내부에서 사용되어야 합니다 에러를 throw 합니다

export default function PeopleProfileEditPage() {
     const { selected } = useTechStack();
     // Error: useTechStack 은 TechStackProvider 내부에서 사용되어야 합니다

     return <PeopleProfileEditPageWrapper>
          //  ... 중략

          <TeckStackProvider>
                <TechStackSelector />
          </TeckStackProvider>

          //  ... 중략
     <PeopleProfileEditPageWrapper>
}

• 이를 해결하기 위해 몇가지의 방법을 생각할 수 있습니다

1. <PeopleProfileEditPage/> 컴포넌트를 <TechStackProvider/> 로 한번 더 감싼다

가장 간단하게 해결할 수 있는 방법이라고 생각되지만, 더 많은 ContextProvider 가 페이지 컴포넌트를 감싸야 할 때를 고려하면, 코드의 가독성이 떨어질것으로 생각됩니다

2. Router 단에서 전역에 <TechStackProvider/> 로 감싼다

전역에서 관리할 수 있어, 따로 페이지를 Provider 로 감싸지 않아도 된다는 장점이 있습니다 Redux 를 사용하지 않고 Context API 로 뺀 의미가 사라진다는 점과, 해당 Provider 를 사용하지 않는 컴포넌트가 마운트 시에도 Context 가 추가적인 메모리 공간을 차지한다는 단점이 있습니다

3. 고차 컴포넌트를 사용해 Provider 로 감싼 컴포넌트를 리턴하는 withProviders HOC 를 구현한다

const WrappedPageComponent = withProviders(
     [
         <ProviderA/>
         <ProviderB/>
         <ProviderC/>
     ],
     function PageComponent() {
         return <></>
     }
)

export default WrappedPageComponent;

해당 페이지에 필요한 Provider 들을 상단에서 명시적으로 관리할 수 있다는 장점이 있습니다

💪 추가적인, 더 좋은 방법이 있다면 함께 고민하고 의견 나눠봅시다