THE ODD FACTORY — Online Exhibition Site

2026 경희대학교 디지털콘텐츠학과 25회 졸업전시 (2026.10.28 WED – 11.01 SUN, A&D Gallery 2F · KHU 국제캠퍼스)

Production build of the design system at ../THE ODD FACTORY _ Design System/. Faithfully ports the React-via-Babel prototype ui_kits/exhibition_site/index.html into Next.js App Router (TypeScript) for Vercel deployment.

Stack

• Next.js 16 · App Router · TypeScript · React 19
• lucide-react for icons
• Vanilla CSS variables (no Tailwind) — design tokens live in app/globals.css, unchanged from ../THE ODD FACTORY _ Design System/colors_and_type.css

Run

pnpm install
pnpm dev          # http://localhost:3000
pnpm build        # production build
pnpm typecheck

Routes

Path	File	Notes
/	app/page.tsx	Hero with monster background
/about	app/about/page.tsx	Long-form Korean essay + COMMITTEE
/project	app/project/page.tsx	Search + 11 category pills + 3D carousel
/project/[id]	app/project/[id]/page.tsx	Detail (SSG via generateStaticParams)
/artist	app/artist/page.tsx	4-up circular avatar grid
/moment	app/moment/page.tsx	5-tile masonry of references

Component boundaries

• Server: app/layout.tsx, components/footer.tsx, all app/**/page.tsx except where noted
• Client: components/header.tsx (uses usePathname for active route), components/carousel.tsx (3D arc + keyboard), components/project-grid.tsx (search/category state)

Data

Static placeholder data in lib/projects.ts and lib/committee.ts. Final 60–80 student roster locks in Aug 2026 after 사정회 — replace PROJECTS array, no other changes needed. URL pattern is /project/[id]; introduce slugs by editing the type if needed.

Design rules — must hold

From ../THE ODD FACTORY _ Design System/SKILL.md:

• Three brand colors only — #E6006A pink, #027C7D teal, #000000 black. #FF3D8F is a lighter-pink hover lift, NOT a fourth color. Do not invent more.
• Korean for body / About / button labels / hero subtitle. English ALL-CAPS only for wordmark, top-nav, categories, short underline subtitles. Do not pad with English prose.
• Sharp corners on cards/posters/modals; full-pill on buttons/category filters.
• Default ease cubic-bezier(0.16, 1, 0.3, 1); durations from --dur-fast (160ms) → --dur-cinematic (900ms).

🚩 Substitutions — replace when delivered

Token / asset	Substitute used	Replace with	ETA
--font-display (in globals.css)	Bagel Fat One (chunky kitsch retro)	Final 2D-poster typeface	~Jul 2026
Wordmark	THE ODD FACTORY typeset in display font	Official 2026 logo	TBD
Iconography	lucide-react stroke icons	Custom set if committee defines one	likely none
Project posters	.p-bg-0...p-bg-7 gradients + display-glyph	Final poster artwork	Sep–Oct 2026
Profile photos	Same gradients on .artist-avatar / .a-avatar	Real photos from 9월 촬영	Sep 2026
YouTube embeds	Static play button on .video	YouTube iframe with link from committee	end Oct 2026
Reference imagery in /public/references/	Moodboard from PDF (third-party — Transcendia, Saggeth's Core, Are You Afraid of the Dark, etc.)	MUST be removed before public launch	before launch

Project schedule (committee brief)

Phase	Window	Status
1 — Skeleton + interactions	through Jul 2026	this build
2 — Roster freeze (8월 사정회)	end Aug 2026	replace lib/projects.ts
3 — Asset drop (포스터, 프로필)	Sep – early Oct 2026	swap /public/references/
4 — YouTube link-up	end Oct 2026	edit app/project/[id]/page.tsx .video block
5 — Public launch	mid–late Nov 2026

Committee contacts

• 위원장: 김근민 · 부위원장: 이윤아 · 총무: 봉선화
• 홍보팀장: 조연재 — 010-8007-6086 — yeonjae1229@khu.ac.kr
• 전시팀: 최윤지, 김예영, 김서현, 하지혜

Links

• KHDC YouTube — https://www.youtube.com/@digitalcontentskhu6115
• KHDC Instagram — https://www.instagram.com/khdc.2026_graduation/
• Last year's exhibition (H)OURGLASS — direct visual ancestor