웹 프론트엔드

truloop의 웹 프론트엔드는 사용자 대상 Next.js 프로젝트 2개와 내부 관리자용 React/Vite 프로젝트 1개로 구성되어 있습니다.

프로젝트 구성

프로젝트	레포지토리	역할	프레임워크	배포
Teaser	truloop-teaser-web	마케팅 랜딩 페이지	Next.js 15.5	Vercel (truloop.app)
Invite	truloop-web-invite	모임 초대 및 비회원 등록	Next.js 16.1	Vercel (/invite 경로)
Admin Dashboard	truloop-core-admin-dashboard	내부 관리자 CMS	React 19 / Vite 7	—

도메인 구조

Teaser 프로젝트가 메인 도메인을 관리하며, 다른 웹 서비스로의 라우팅을 rewrite 규칙으로 처리합니다.

truloop.app/           → Teaser (랜딩 페이지)
truloop.app/invite/    → Invite (초대 페이지, Vercel로 rewrite)
truloop.app/story/     → Recap (리캡 페이지, Vercel로 rewrite)
truloop.app/our-story  → Teaser (브랜드 스토리)
truloop.app/privacy    → Teaser (개인정보처리방침)
truloop.app/terms      → Teaser (이용약관)

공통 기술 스택

두 프로젝트 모두 다음 기술을 공유합니다.

기술	버전	용도
React	19	UI 라이브러리
TypeScript	5	타입 안전성
Next.js	15.5 / 16.1	React 프레임워크 (App Router)

정보

두 프로젝트는 스타일링 접근 방식이 다릅니다. Teaser는 순수 CSS를, Invite는 Tailwind CSS v4 + shadcn/ui를 사용합니다.

아키텍처 패턴

Server/Client Component 분리

두 프로젝트 모두 Next.js App Router를 사용하며, Server Component와 Client Component를 명확히 분리합니다.

• Server Component: 데이터 페칭, SEO 메타데이터 생성, 정적 콘텐츠 렌더링
• Client Component: 사용자 인터랙션, 애니메이션, 브라우저 API 접근

외부 상태 관리 없음

두 프로젝트 모두 Redux, Zustand 등 외부 상태 관리 라이브러리를 사용하지 않습니다. React의 내장 hooks(useState, useEffect, useRef)만으로 상태를 관리합니다.

변경 이력

날짜	내용
2026-03-16	Admin Dashboard 프로젝트 추가 (React/Vite 기반 내부 관리자 CMS)
2026-03-10	소스 코드 검증 후 Next.js 버전 정보 정확도 개선 (15→15.5, 16→16.1)