← 갤러리로 돌아가기

홈페이지

NGO 후원단체 홈페이지와 배너·사업·소식·문의를 관리하는 CMS를 함께 체험해요.

NGOCMS공공

이 앱은 데모 페이지에서 로그인 없이 바로 체험할 수 있어요. 아래 버튼으로 이동해서 더미 데이터로 주요 기능을 눌러보세요.

데모 보러 가기

🛠️ 개발 가이드

React Router 기반 SPA로 만들어진 실제 NGO 홈페이지 + 관리자 CMS를 Next.js App Router 구조로 그대로 이식했어요.

기술 스택

Next.js (App Router)ReactlocalStorage(원본은 React Router + Vite)

핵심 구현 포인트

  • 원본이 이미 갖고 있던 localStorage 기반 mockApi.js를 그대로 재사용하고, 실제 백엔드를 호출하던 계층만 제거했어요.
  • react-router-dom의 Link/NavLink와 이름이 같은 자체 컴포넌트(GLink/GNavLink)를 만들어 각 페이지의 JSX는 거의 그대로 두고 import만 바꿨어요.
  • 원본 CSS(847줄)를 postcss로 파싱해 모든 셀렉터 앞에 .gh-scope를 자동으로 붙여서, 다른 데모 페이지와 스타일이 섞이지 않게 했어요.
  • 관리자 레이아웃은 현재 pathname을 확인해서 /admin/login만 사이드바 없이 렌더링해요.

이렇게 만들면 돼요

  1. 원본 페이지·컴포넌트 구조와 라우트 목록을 파악해요.
  2. react-router 전용 API(Link, useNavigate, useParams)를 대체할 얇은 래퍼를 만들어요.
  3. CSS는 스코프 프리픽스를 자동으로 붙이는 스크립트로 일괄 변환해요.
  4. App Router의 폴더 구조(page.jsx, layout.jsx, 동적 세그먼트)로 라우트를 옮겨요.

참고 파일

components/gallery/globalhope/app/apps/globalhope/