SSGOI
GitHub 저장소

빠른 시작

5분 안에 SSGOI로 첫 번째 페이지 전환 애니메이션 만들기

패키지 설치

npm install @ssgoi/react 
# 또는 yarn add @ssgoi/react 
# 또는 pnpm add @ssgoi/react

기본 설정 (2분)

1. 루트 레이아웃 설정 (Next.js App Router)

// app/layout.tsx
import { Ssgoi } from "@ssgoi/react";
import { fade } from "@ssgoi/react/view-transitions";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <Ssgoi config={{ defaultTransition: fade() }}>
          {/* ⚠️ 중요: position: relative 필수! */}
          <div style={{ position: "relative", minHeight: "100vh" }}>
            {children}
          </div>
        </Ssgoi>
      </body>
    </html>
  );
}

왜 position: relative가 필요한가요? 페이지가 out 애니메이션될 때 position: absolute가 적용됩니다. 상위 요소에 position: relative가 없으면 페이지가 잘못된 위치로 이동할 수 있습니다.

2. 페이지 래핑

// app/page.tsx
import { SsgoiTransition } from "@ssgoi/react";

export default function HomePage() {
  return (
    <SsgoiTransition id="/">
      <main>
        <h1>홈 페이지</h1>
        {/* 페이지 내용 */}
      </main>
    </SsgoiTransition>
  );
}

// app/about/page.tsx
export default function AboutPage() {
  return (
    <SsgoiTransition id="/about">
      <main>
        <h1>소개 페이지</h1>
        {/* 페이지 내용 */}
      </main>
    </SsgoiTransition>
  );
}

다양한 트랜지션 적용

// app/layout.tsx
import { slide, fade, scale } from "@ssgoi/react/view-transitions";

const ssgoiConfig = {
  transitions: [
    // 홈 → 소개: 왼쪽으로 슬라이드
    { from: "/", to: "/about", transition: slide({ direction: "left" }) },
    // 소개 → 홈: 오른쪽으로 슬라이드
    { from: "/about", to: "/", transition: slide({ direction: "right" }) },
    // 목록 → 상세: 확대
    { from: "/list", to: "/detail/*", transition: scale() },
  ],
};

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Ssgoi config={ssgoiConfig}>
          <div style={{ position: "relative", minHeight: "100vh" }}>
            {children}
          </div>
        </Ssgoi>
      </body>
    </html>
  );
}

완성! 🎉

축하합니다! 이제 웹사이트에 네이티브 앱 같은 페이지 전환이 적용되었습니다.