추상화

main

date

Jul 30, 2025

slug

abstract

author

status

Public

범용적 컴포넌트

어떤 도메인과도 상관없는 범용적인 컴포넌트

특정 도메인에 종속된 비즈니스 컴포넌트

- 도메인에 종속 X

범용적인 컴포넌트는 애플리케이션에서 범용적으로 사용할 수 있는 요소

→ 컴포넌트를 추상화할 때 특정 도메인과의 결합도를 낮추고 재사용성을 높이는 것이 중요


'use client';

import { cn } from '@instiz/core/lib';
import { useRouter } from 'next/navigation';
import { ReactElement } from 'react';
import { FontAwesome } from '@instiz/uikit/icons';

type ScrollDirection = 'down' | 'up' | '';

interface ScrollResponsiveTitleHeaderProps {
    title?: string;
    scrollDirection?: ScrollDirection;
    showBackButton?: boolean;
    options?: React.ReactNode;
}

/**
 * @description 스크롤 방향에 따라 헤더 위치가 변경되는 헤더
 *
 * @param {string} title - 헤더에 표시될 타이틀 텍스트 (기본값: '')
 * @param {ScrollDirection} scrollDirection - 스크롤 방향 (기본값: 'down')
 * @param {boolean} showBackButton - 뒤로가기 버튼 표시 여부 (기본값: false)
 * @param {React.ReactNode} options - 헤더에 표시될 옵션 컴포넌트 (기본값: null)
 *
 * @returns {ReactElement} UI 컴포넌트
 */
export const ScrollResponsiveTitleHeader = ({
    title = '',
    scrollDirection = 'down',
    showBackButton = false,
    options = null,
}: ScrollResponsiveTitleHeaderProps): ReactElement => {
    const router = useRouter();

    return (
        <header
            className={cn(
                `bg-emphasize-bg fixed top-0 z-50 flex h-[56px] w-full max-w-[840px] items-center px-[15px] py-[16px]`,
                {
                    'top-[0px]': scrollDirection === 'down',
                    'top-[56px]': scrollDirection === 'up' || scrollDirection === '',
                },
            )}
        >
            {showBackButton && (
                <button
                    onClick={() => router.back()}
                    type="button"
                    aria-label="history back button"
                    className="text-grayscale-500 absolute top-[50%] left-[20px] -translate-y-1/2"
                >
                    <FontAwesome className="fa-solid fa-chevron-left" />
                </button>
            )}
            <h2 className="text-grayscale-800 header-depth line-clamp-1 flex-1 text-center">
                {title}
            </h2>
            {options && <div>{options}</div>}
        </header>
    );
};