FullPageInfo

[lumpyspaceyz]

FullPageInfo

페이지 전체에 알림 메시지를 보여준 후, 특정 페이지로 이동하는 컴포넌트입니다.

Method

• icons - 아이콘과 해당 아이콘의 대체 텍스트를 배열로 받습니다.
• text
  • 아이콘 밑에 보여질 안내 메시지를 배열로 받습니다.
  • 배열의 첫 번째 값은 primay 컬러로, 두 번째 값은 black 컬러로 보여집니다.
    
• route - 일정 시간이 지난 후 이동할 페이지의 경로를 담은 콜백 함수를 받습니다.
• hasDetailedDescription - 추가 안내 메시지 존재의 여부를 boolean 값으로 받습니다.
• description
  • 추가 안내 메시지를 배열로 받습니다.
  • 해당 배열의 값은 줄바꿈 기준으로 나뉩니다.
    

사용예시

<FullPageInfo
  route={() => '/'}
  icons={[checkCirclePrimary, '확인']}
  text={['레시피 등록', '완료!']}
  hasDetailedDescription={false}
/>

<FullPageInfo
  route={() => '/'}
  icons={[emailCirclePrimary, '이메일 인증 요청']}
  text={['이메일 인증을', '확인해주세요']}
  hasDetailedDescription={true}
  description={[
    '확인 메일을 보내드렸어요.',
    '이메일 확인 후, 인증 링크를 클릭하시면',
    '가입이 완료됩니다!',
  ]}
/>

전체코드

[FullPageInfo.tsx]

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

type FullPageInfoProps = {
  icons: string[];
  text: string[];
  route: () => string;
  hasDetailedDescription: boolean;
  description?: string[];
};

const FullPageInfo = ({
  route,
  icons,
  text,
  hasDetailedDescription,
  description,
}: FullPageInfoProps) => {
  const navigate = useNavigate();
  const path = route();

  // 일정 시간 경과 후 route 경로로 페이지 이동
  useEffect(() => {
    const timer = setTimeout(() => {
      navigate(path);
    }, 2000);

    return () => clearTimeout(timer);
  }, [path, navigate]);

  // isExistDescription 존재 여부에 따라 컨텐츠를 렌더링
  const renderContent = () => {
    return (
      <div className="w-full h-full flex flex-col justify-center items-center">
        <img src={icons[0]} alt={icons[1]} />
        <p className="text-title-2-em text-primary pt-32pxr">{text[0]}</p>
        <span className="text-title-1-em">{text[1]}</span>
        {hasDetailedDescription && description && (
          <div className="pt-[62px] flex flex-col justify-center items-center text-gray_700">
            {description.map((desc, index) => (
              <span key={index} className="text-sub">
                {desc}
              </span>
            ))}
          </div>
        )}
      </div>
    );
  };

  return renderContent();
};

export default FullPageInfo;

[FullPage.tsx]

import { Outlet } from 'react-router-dom';
import FullPageInfo from '@/components/FullPageInfo';
import checkCirclePrimary from '@/assets/icons/checkCirclePrimary.svg';
import emailCirclePrimary from '@/assets/icons/emailCirclePrimary.svg';

export default function FullPageInfoLayout() {
  return (
    <>
      <Outlet />
      <FullPageInfo
        route={() => '/'}
        icons={[checkCirclePrimary, '확인']}
        text={['레시피 등록', '완료!']}
        hasDetailedDescription={false}
      />
    </>
  );
}