1. 같이 실행되지 않는 코드 분리하기

🎯 핵심 원칙

컴포넌트가 권한에 따라 다르게 동작하는 경우, 권한별로 별도의 컴포넌트를 생성하여 단일 상태 및 책임을 부여합니다.

💫 기대 효과

• 코드 가독성 향상
• 각 컴포넌트가 단일 책임을 가짐
• 유지보수가 쉬워짐
• 고려해야 할 맥락이 단순해짐

✅ 잘된 예시

export const HeaderMain = () => {
    const [isLoading, setIsLoading] = useState(false)
    const user = useRecoilValue(HSUser)
    const { setAdultMode } = useAdultVerification()
    const subdomain = getSubDomain(window.location.host)
    const isAvatyeSDK = subdomain.includes('memog')

    useEffect(() => {
        if (!user) {
            setAdultMode(false)
        }
        setIsLoading(true)
    }, [user, setAdultMode])

    if (!isLoading) return null

    return isAvatyeSDK ? <AvatyeHeader /> : <StandardHeader />
}

👍 memog와 이외의 경우에 따라 Header 컴포넌트를 명확하게 분리하여 구현

❌ 개선이 필요한 예시

<ContentInfoFastView />

{user && lastViewEpisode && (
    <>
        <BottomFloatBar onClick={() => getCheckEpisode(contentCName, lastViewEpisode?.contentEpisodeNo)}>
            <Text textStyle="h18">이어보기</Text>
            <Text textStyle="t14">{lastViewEpisode?.contentEpisodeTitle}</Text>
        </BottomFloatBar>
        {!!isWaitFree && (
            <ContentGidamuBar waitFreeInfo={waitFreeInfo} waitFreeScreenEpisode={waitFreeScreenEpisode} />
        )}
    </>
)}

{user && !!!lastViewEpisode && (
    <>
        <BottomFloatBar
            onClick={() => router.push(`/${getContentType(contentType)}/viewer/${contentCName}/1`)}
        >
            <Text textStyle="h18">첫화보기</Text>
            <Text textStyle="t14"> {firstEpisodeTitle}</Text>
        </BottomFloatBar>
        {!!isWaitFree && (
            <ContentGidamuBar waitFreeInfo={waitFreeInfo} waitFreeScreenEpisode={waitFreeScreenEpisode} />
        )}
    </>
)}

🔧 개선 방안: BottomFloatBar 컴포넌트만 분리하여 단순화 필요

구현 상세 추상화하기

💡 핵심 개념

내 코드를 읽는 사람들이 코드를 쉽게 읽을 수 있도록 불필요한 맥락을 추상화합니다.

✅ 잘된 예시: Wrapper 컴포넌트

// app.tsx
<AppKeyGuard appKey={appKeyProps}>
    {!isErrorPage && <InitialState appKey={appKeyProps} />}
    <Component {...pageProps} appKeyProps={appKeyProps} />
    <Modals />
    <ToastContainer />
</AppKeyGuard>

❌ 개선이 필요한 예시