{"id":51230100,"url":"https://github.com/dev-goraebap/angular-ssr-design","last_synced_at":"2026-06-28T15:30:46.107Z","repository":{"id":366553040,"uuid":"1276506893","full_name":"dev-goraebap/angular-ssr-design","owner":"dev-goraebap","description":null,"archived":false,"fork":false,"pushed_at":"2026-06-22T10:52:34.000Z","size":392,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-06-22T11:14:08.966Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev-goraebap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-22T03:32:43.000Z","updated_at":"2026-06-22T10:52:38.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/dev-goraebap/angular-ssr-design","commit_stats":null,"previous_names":["dev-goraebap/angular-ssr-design"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/dev-goraebap/angular-ssr-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-goraebap%2Fangular-ssr-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-goraebap%2Fangular-ssr-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-goraebap%2Fangular-ssr-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-goraebap%2Fangular-ssr-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-goraebap","download_url":"https://codeload.github.com/dev-goraebap/angular-ssr-design/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-goraebap%2Fangular-ssr-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34894560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-28T02:00:05.809Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-28T15:30:45.601Z","updated_at":"2026-06-28T15:30:46.102Z","avatar_url":"https://github.com/dev-goraebap.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular SSR/CSR 혼합 시연 — 영화 카탈로그\n\nAngular 22에서 **SSR · CSR · SSG를 한 도메인에서 우아하게 혼합**하는 패턴을 보여주는 예제입니다.\n도메인은 영화 카탈로그(가제 CineCat)이며, 데스크톱 모달 ↔ 모바일 바텀시트 적응형 UX,\nURL 동기화 다이얼로그, 무한 스크롤, 쿠키 인증을 SSR과 함께 다룹니다.\n\n\u003e 이 레포는 [`angular-ssr-design`](skills/angular-ssr-design/SKILL.md) 스킬의\n\u003e **참조 구현**입니다(방법론은 프레임워크 비종속, 예제는 Angular).\n\u003e 기획·설계 문서: [`docs/기획/`](docs/기획/) · [`docs/설계/`](docs/설계/) (ADR 0001~0008)\n\n## 아키텍처\n\n```\n[브라우저] --상대경로 /api, 쿠키 자동--\u003e [Angular SSR :4000] --프록시--\u003e [백엔드 :4001]\n                                              ↑ 같은 origin → CORS 없음\n[Angular SSR :4000] --내부호스트 http://localhost:4001, httpResource--\u003e [백엔드 :4001]\n                                              ↑ 서버간 호출 → CORS 없음\n```\n\n- **프론트(`src/`)**: Angular 22 + SSR(`@angular/ssr`) + spartan/ui(Brain+Helm) + GSAP + Tailwind v4, FSD 구조\n- **백엔드(`backend/`)**: 별도 Express(4001) 목 API + 인메모리 데이터(영화/세션/위시리스트/평점)\n- **데이터 페칭**: 읽기는 `httpResource`(Transfer State 자동), 쓰기는 `HttpClient`\n- **인증**: HttpOnly 쿠키 세션, 상태는 `/api/me`로 확인\n\n### 페이지별 렌더링 모드 (`src/app/app.routes.server.ts`)\n\n| 경로 | 화면 | 모드 |\n|------|------|------|\n| `/` | 홈 | **Prerender (SSG)** |\n| `/movies/:id` · `/genre/:key` · `/search` | 상세·장르·검색 | **Server (SSR)** |\n| `/wishlist` · `/me/ratings` · `/login` · `/settings` | 개인화·인증·설정 | **Client (CSR)** |\n\n## 실행\n\n### 개발 (백엔드 + 프론트 동시)\n\n```bash\nnpm run dev      # concurrently: 백엔드(4001) + ng serve(4000/dev 4200)\n```\n\n- 백엔드만: `npm run backend` (tsx watch, 4001)\n- 프론트만: `npm start` (= `ng serve`) — **단, 백엔드가 떠 있어야** SSR이 데이터를 가져온다\n\n데모 계정: **`demo` / `demo1234`**\n\n### 모바일(실기기) 접속\n\n같은 와이파이의 폰에서 `http://\u003cPC-LAN-IP\u003e:4200` 으로 접속한다.\n`angular.json`의 serve 옵션에 `host: 0.0.0.0`, `proxyConfig`, `allowedHosts`가 설정돼 있다.\nIP가 바뀌면 `allowedHosts`의 주소만 갱신한다. (Windows 방화벽이 4200 인바운드를 막으면 허용 필요)\n\n### 빌드 / 프로덕션 SSR\n\n```bash\nnpm run build                              # SSR 빌드(dist/)\nnode dist/angular-ssr-design/server/server.mjs   # 또는 npm run serve:ssr:angular-ssr-design\n```\n\n\u003e SSG(홈)는 빌드 타임에 백엔드를 호출하므로, **빌드 시에도 백엔드(4001)가 떠 있어야** 정적 HTML에 데이터가 포함된다.\n\n## 프로젝트 구조 (FSD v2.1)\n\n```\nsrc/\n├── app/        Angular 부트스트랩·라우팅·렌더 모드\n├── pages/      라우트별 페이지(home/movie-detail/genre/search/wishlist/...)\n├── widgets/    app-nav, search-box\n├── features/   open-movie(적응형 모달/페이지 분기)\n├── entities/   movie(card/detail/rate-sheet)\n└── shared/     ui(spartan helm + 적응형 sheet), api, auth, lib\nbackend/        목 API(Express)\n```\n\n## 테스트\n\n```bash\nnpm test         # Vitest\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-goraebap%2Fangular-ssr-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-goraebap%2Fangular-ssr-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-goraebap%2Fangular-ssr-design/lists"}