diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..e69de29 diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..6972091 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,75 @@ +Always follow the instructions in plan.md. When I say "go", find the next unmarked test in plan.md, implement the test, then implement only enough code to make that test pass. + +# ROLE AND EXPERTISE + +You are a senior software engineer who follows Kent Beck's Test-Driven Development (TDD) and Tidy First principles. Your purpose is to guide development following these methodologies precisely. + +# CORE DEVELOPMENT PRINCIPLES + +- Always follow the TDD cycle: Red → Green → Refactor +- Write the simplest failing test first +- Implement the minimum code needed to make tests pass +- Refactor only after tests are passing +- Follow Beck's "Tidy First" approach by separating structural changes from behavioral changes +- Maintain high code quality throughout development + +# TDD METHODOLOGY GUIDANCE + +- Start by writing a failing test that defines a small increment of functionality +- Use meaningful test names that describe behavior (e.g., "shouldSumTwoPositiveNumbers") +- Make test failures clear and informative +- Write just enough code to make the test pass - no more +- Once tests pass, consider if refactoring is needed +- Repeat the cycle for new functionality +- When fixing a defect, first write an API-level failing test then write the smallest possible test that replicates the problem then get both tests to pass. + +# TIDY FIRST APPROACH + +- Separate all changes into two distinct types: + 1. STRUCTURAL CHANGES: Rearranging code without changing behavior (renaming, extracting methods, moving code) + 2. BEHAVIORAL CHANGES: Adding or modifying actual functionality +- Never mix structural and behavioral changes in the same commit +- Always make structural changes first when both are needed +- Validate structural changes do not alter behavior by running tests before and after + +# COMMIT DISCIPLINE + +- Only commit when: + 1. ALL tests are passing + 2. ALL compiler/linter warnings have been resolved + 3. The change represents a single logical unit of work + 4. Commit messages clearly state whether the commit contains structural or behavioral changes +- Use small, frequent commits rather than large, infrequent ones + +# CODE QUALITY STANDARDS + +- Eliminate duplication ruthlessly +- Express intent clearly through naming and structure +- Make dependencies explicit +- Keep methods small and focused on a single responsibility +- Minimize state and side effects +- Use the simplest solution that could possibly work + +# REFACTORING GUIDELINES + +- Refactor only when tests are passing (in the "Green" phase) +- Use established refactoring patterns with their proper names +- Make one refactoring change at a time +- Run tests after each refactoring step +- Prioritize refactorings that remove duplication or improve clarity + +# EXAMPLE WORKFLOW + +When approaching a new feature: + +1. Write a simple failing test for a small part of the feature +2. Implement the bare minimum to make it pass +3. Run tests to confirm they pass (Green) +4. Make any necessary structural changes (Tidy First), running tests after each change +5. Commit structural changes separately +6. Add another test for the next small increment of functionality +7. Repeat until the feature is complete, committing behavioral changes separately from structural ones + +Follow this process precisely, always prioritizing clean, well-tested code over quick implementation. + +Always write one test at a time, make it run, then improve structure. Always run all the tests (except long-running tests) each time. \ No newline at end of file diff --git a/PDAO.css b/PDAO.css index eb59f44..bdaf759 100644 --- a/PDAO.css +++ b/PDAO.css @@ -1,5 +1,32 @@ +.swiper-pagination-bullet-active { + --swiper-theme-color: #c80150; +} + +.swiper { + width: 100%; + padding-top: 50px; + padding-bottom: 50px; +} + +.swiper-slide { + background-position: center; + background-size: cover; + width: 300px; + height: 300px; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; +} + +#sec-gallery { + background-color: rgb(255,179,0); +} + #sec-9cb6 { - background: black; + background-color: black; } .u-text-placeholder { @@ -25,7 +52,7 @@ .u-section-1 .u-image-1 { width: 854px; height: 1208px; - box-shadow: 0 0 40px 5px rgba(60,60,60,1); + /*box-shadow: 0 0 40px 5px rgba(60,60,60,1);*/ transition-duration: 0.5s; margin: 167px auto 56px 109px; } @@ -76,7 +103,7 @@ } .u-section-1 .u-image-1.u-image-1.u-image-1:hover { - box-shadow: 0 0 40px 15px rgba(80,80,80,1) !important; + /*box-shadow: 0 0 40px 15px rgba(80,80,80,1) !important;*/ text-shadow: undefined undefined undefined rgba(var(--undefined-r),var(--undefined-g),var(--undefined-b),0) !important; border-style: solid !important; border-width: 0px !important; diff --git a/TECHSPEC.md b/TECHSPEC.md new file mode 100644 index 0000000..43f79e4 --- /dev/null +++ b/TECHSPEC.md @@ -0,0 +1,374 @@ +# TECHSPEC.md +PDAO Website – FourPillars 스타일 디자인 레이아웃 명세서 +(레이아웃/구조 Only – 토큰/타이포/컬러는 TECHSPEC_PLAN.md v2.0 참조) + +--- + +## 0. 목적 + +이 문서는 PDAO 웹사이트를 다음 두 레이아웃 레퍼런스를 기반으로 설계하기 위한 +**디자인 레이아웃 스펙**이다. + +- FourPillars **홈 화면** 레이아웃 +- FourPillars **About/Team 페이지** 레이아웃 + +PDAO 고유 카테고리(About / Simperby / Assets / Profile)를 +FourPillars 스타일 레이아웃 안에 녹여서 구현한다. + +--- + +## 1. 글로벌 레이아웃 (Global Shell Layout) + +### 1.1 전체 쉘 구조 + +모든 페이지는 동일한 기본 쉘을 공유한다. + +```text +┌───────────────────────────────────────────────┐ +│ Sidebar (고정) │ Main Content (스크롤) │ +│ (좌측 1열) │ - Hero / Content Sections │ +└───────────────────────────────────────────────┘ + + • 좌측 Sidebar + • 폭: 260px (데스크톱 기준) + • 위치: position: fixed; left: 0; top: 0; bottom: 0; + • 배경: 다크 + 유리 느낌 (glassmorphism) + • 스크롤: Sidebar 자체는 고정, 내용은 오른쪽 영역만 스크롤 + • 우측 Main Content + • margin-left: 260px 로 Sidebar 공간 확보 + • 내부 최대 폭: max-width: 1200px / 중앙 정렬 + • 좌우 패딩: 24px (모바일 16px) + +1.2 반응형 브레이크포인트 + • ≥ 1200px: 데스크톱 풀 레이아웃 (좌측 sidebar + 우측 content) + • 768px ~ 1199px: 태블릿 + • Sidebar 폭 유지 or 220px로 축소 + • < 768px: 모바일 + • Sidebar를 상단 슬라이드 메뉴(오프캔버스) 로 전환 + • Main Content는 전체 폭 사용 + • 상단에 햄버거 + 로고가 있는 모바일 헤더 추가 + +⸻ + +2. Sidebar 레이아웃 (Depth 1/2 네비게이션) + +FourPillars의 좌측 네비와 동일한 느낌으로 구성하되, +Depth 1/Depth 2 카테고리를 PDAO IA에 맞게 매핑한다. + +2.1 구조 + +┌─────────────────────────────────┐ +│ LOGO / Brand │ +├─────────────────────────────────┤ +│ Search (input) │ +├─────────────────────────────────┤ +│ Nav Group: PDAO │ +│ - About │ +│ - Simperby │ +│ - Assets │ +│ - Profile │ +├─────────────────────────────────┤ +│ Nav Group: Resources (선택) │ +│ - Docs (Simperby Docs) │ +│ - IR │ +│ - Links (SNS 모음) │ +├─────────────────────────────────┤ +│ Nav Group: About Us / Etc │ +│ - About PDAO (현재 페이지 표시)│ +│ - Newsletter / Contact (선택) │ +└─────────────────────────────────┘ + +2.2 주요 요소 + • Logo 영역 + • 상단 좌측: PDAO 텍스트 로고 또는 심볼 + • 작은 서브텍스트(예: “POSTECH DAO”) + • Search 영역 + • 폭 전체를 사용하는 검색 인풋 (placeholder: “Search PDAO”) + • 아이콘(돋보기)을 좌/우에 배치 + • 네비 그룹 + • 그룹 타이틀(작은 Uppercase) + 링크 리스트 + • 활성 링크는 왼쪽에 작은 바(POSTECH Red) + 텍스트 컬러 강조 + +⸻ + +3. 홈 페이지 레이아웃 (index.html) + +두 번째 스크린샷(FOUR PILLARS 홈)을 기준으로 한 PDAO 홈 구조. + +Sidebar | Hero + | Comments Strip + | ARTICLES Section + | ISSUES Section + | REPORTS Section + | Newsletter Band + | Footer + +3.1 Hero 영역 + +┌───────────────────────────────────────────────┐ +│ [Hero Visual + Tagline] │ +│ - 배경: 큰 이미지/그래디언트 (기둥 느낌 참고) │ +│ - 상단: 작은 라벨 (예: "PDAO Research") │ +│ - 중앙: H1 타이틀 │ +│ - 하단: 서브 카피 │ +│ │ +│ [Search Bar] (Hero 하단 중앙에 오버레이) │ +└───────────────────────────────────────────────┘ + + • Hero Visual + • 높이: min-height: 320~400px + • 배경: 노이즈 그래디언트 + 3D 느낌 이미지를 적용할 수 있는 컨테이너 + • 타이틀/카피 + • 중앙 좌상단 또는 가운데 정렬 + • 예: + • Title: “Unlock Web3 with Clarity” + • Sub: “PDAO는 포스텍 기반 블록체인 연구와 프로젝트를 통해 …” + • Search Bar + • Hero 하단 중앙에 가로로 긴 인풋 + • 폭: 콘텐츠 폭의 60~70% + • 네모 카드 위에 떠 있는 느낌 (shadow + radius) + +3.2 Comments / Activity Strip (옵션) + +FourPillars의 “COMMENTS” 섹션처럼, 상단에 PDAO의 최신 활동/공지 스트립을 배치. + +┌───────────────────────────────────────────────┐ +│ COMMENTS [View all] │ +│ ┌──── Card ───┐ ┌──── Card ───┐ ┌──── Card… │ +└───────────────────────────────────────────────┘ + + • 각 카드: + • 제목 + 짧은 설명 + • 카테고리/태그 (IR / Simperby / Event 등) + • V1: 정적 3~4개 카드, 가로 스크롤 없이 한 줄로만 표시해도 무방 + +3.3 ARTICLES 섹션 → PDAO About/Simperby/글 컨텐츠 매핑 + +FourPillars Articles 레이아웃: + +[섹션 헤더] [View all] +┌───────────────┬───────────────────────┐ +│ 큰 Featured │ 우측 상단 카드 1 │ +│ Article Card │ 우측 중단 카드 2 │ +│ (1개) │ 우측 하단 카드 3 │ +└───────────────┴───────────────────────┘ +┌──── 카드 ───┐ ┌──── 카드 ───┐ ... (하단 그리드) + +PDAO에서는 다음과 같이 활용: + • 섹션 제목: ARTICLES 대신 PDAO INSIGHTS 혹은 ARTICLES + • 좌측 큰 카드: + • 가장 최근/중요한 글(예: Medium 글, IR 요약, 주요 공지) + • 우측 세로 카드: + • 나머지 최근 글 2~3개 + • 하단 그리드: + • 짧은 글 / 노트 / 링크들 + +구조 + +
+ [Header Row] + [Main Grid: 2열 (1+3 카드)] + [Sub Grid: 3~4열 카드] +
+ +3.4 ISSUES 섹션 → PDAO Projects/Topics + +FourPillars Issues: 상단에 큰 카드 2개(가로로), 하단에 작은 리스트. + +[ISSUES] [View all] +┌──── Large Issue Card ────┬──── Large Issue Card ────┐ +└──────────────────────────┴───────────────────────────┘ +┌─ small card ┐ ┌─ small card ┐ ┌─ small card ┐ ... + +PDAO 적용: + • 상단 Large 카드: + • 예: “Simperby”, “PDAO Governance”, “Education Program” 등 핵심 주제 + • 하단 작은 카드: + • 각 이슈 아래에 속하는 서브 토픽 / 포스트 링크 + +3.5 REPORTS 섹션 → IR/리서치 PDF + +FourPillars Reports: 큰 카드 2개 + 그 아래 여러 개의 보고서 카드. + +[REPORTS] [View all] +┌──── Large Report 1 ────┬──── Large Report 2 ────┐ +└────────────────────────┴────────────────────────┘ +┌ small report ┐ ┌ small report ┐ ┌ small report ┐ ... + +PDAO 적용: + • Large 카드: + • 대표 IR 문서 (예: PDAO OT.pdf) + • 주요 리서치 리포트 + • Small 카드: + • 추가 자료 / 학내 발표 / 세미나 발표 자료 등 + +각 카드에는: + • 썸네일 이미지 (커버 또는 컬러 블럭) + • 문서 제목 + • 간단 설명 + • 파일 타입/크기(선택) + +3.6 Newsletter / Join CTA Band + +FourPillars의 “Sign up for newsletter” 영역과 동일한 위치에 PDAO CTA. + +┌───────────────────────────────────────────────┐ +│ [왼쪽 텍스트] | [오른쪽 이메일 입력 + 버튼] │ +└───────────────────────────────────────────────┘ + + • PDAO의 목적에 맞게: + • “Get updates from PDAO” + • “Join our Discord” 버튼을 병렬 배치도 가능 + +3.7 Footer + +FourPillars Footer 구조를 유지하되, PDAO 카테고리/링크로 교체. + +┌───────────────────────────────────────────────┐ +│ LOGO/브랜드 │ +│ │ +│ [Research] [Projects] [Company] [Social] │ +│ - Articles - Simperby - About - X │ +│ - Reports - ... - IR - GitHub +│ │ +│ Contact: 이메일 / Discord 링크 │ +└───────────────────────────────────────────────┘ + + +⸻ + +4. About / Team 페이지 레이아웃 (/about) + +첫 번째 스크린샷(FourPillars About/Team)을 그대로 PDAO에 맞게 변형. + +Sidebar | Hero + | Trusted By (로고 벨트, 선택) + | Team Section (카드 그리드) + | Footer + +4.1 About Hero + +┌───────────────────────────────────────────────┐ +│ [배경 그래디언트 + 타이틀] │ +│ "Unlock Crypto with Clarity" → PDAO 버전 카피 │ +│ 서브 텍스트: PDAO 미션 요약 │ +└───────────────────────────────────────────────┘ + + • Home Hero와 유사한 스타일을 재사용 + • About 페이지이므로 문구는 “Who we are”, “PDAO Mission” 등으로 변경 + +4.2 Trusted By (선택적) + +FourPillars About에 있는 파트너 로고 벨트 영역. + +PDAO 적용: + • Trusted by 대신: + • “Collaborations” 혹은 “Supported by” + • 실제로 함께한 기관/프로젝트 로고가 있다면 표시 + • 없다면 v1은 생략해도 무방 (SCSS 구조만 준비) + +레이아웃: + +┌───────────────────────────────────────────────┐ +│ Trusted by │ +│ [로고][로고][로고][로고]... │ +└───────────────────────────────────────────────┘ + +4.3 Team Section + +가장 핵심: FourPillars Team 카드 그리드와 동일한 느낌으로 PDAO 멤버를 표시. + +[Team] + +┌───────────────┬───────────────┐ +│ Member Card 1 │ Member Card 2 │ +├───────────────┼───────────────┤ +│ Member Card 3 │ Member Card 4 │ +├───────────────┼───────────────┤ +│ ... │ ... │ +└───────────────┴───────────────┘ + +4.3.1 Member Card 구조 +각 카드(좌: 사진, 우: 텍스트) – FourPillars Team 카드 참고. + +┌───────────────────────────────────────────────┐ +│ [Profile Image] | [이름, Role, Handles] │ +│ | [짧은 소개 텍스트] │ +│ | [학력/전공/경력 요약] │ +└───────────────────────────────────────────────┘ + + • 좌측 + • 정사각형 or 4:5 비율 사진 + • 배경이 있는 다크 카드 위에 올림 + • 우측 상단 + • 이름 (굵은 텍스트) + • Role (예: “Researcher”, “Operator”) + • 디스코드 핸들(선택) + • 우측 본문 + • 3~4줄 소개 (현재 PDAO에서 하는 일, 관심 분야) + • 우측 하단 + • 학력/전공/소속 (Bullet list 또는 한 줄 요약) + +카드 비주얼: + • 배경: 다크 surface + subtle border + • radius: 16~20px + • hover 시: + • 살짝 위로 (translateY -2~4px) + • border-color / shadow 강도 증가 + +4.3.2 그리드 동작 + • 데스크톱: 2열 (한 줄에 두 멤버) + • 태블릿(≤ 960px): 1열 + • 카드 간 수직 간격: 24~32px + +⸻ + +5. 다른 페이지 레이아웃 개요 + +간단한 방향만 정의하고, 상세 SCSS/HTML은 TECHSPEC_PLAN.md에서 계속. + +5.1 /simperby + • Hero: Simperby 소개 (이미지 + 텍스트, Home Hero보다 낮은 높이) + • “Project Overview” 섹션: 큰 카드 하나 + 짧은 설명 + • “Docs & Resources” 섹션: 링크 카드 3개 (GitHub / Protocol / crates.io) + • 필요 시 Issues/Reports 카드 스타일 재사용 + +5.2 /assets + • Hero: “Brand Assets” + • 두 개의 세부 섹션: + • Logo: 여러 버전의 로고를 카드 또는 그리드로 전시 (다운로드 버튼) + • Poppin: Poppin 캐릭터 이미지/문서 다운로드 카드 + +5.3 /profile + • Hero: “PDAO Members” + • 상단에 간단한 통계(총 인원, Core/Research/Infra 등 카테고리 카운트) + • 하단: Team Section과 동일한 멤버 카드 그리드 +(About의 Team과 공통 컴포넌트 사용, 데이터만 다르게 주입) + + +⸻ + +6. 구현 순서 (레이아웃 관점) + 1. Global Shell & Sidebar + • Sidebar 고정 레이아웃 + Main Content 마진 구조 구현 + 2. Footer Layout + • FourPillars 스타일 3~4열 Footer 구현 + 3. Home Layout + • Hero + Search + • Comments Strip + • Articles / Issues / Reports 섹션 순서대로 마크업 + 4. About/Team Layout + • About Hero + • Trusted By (옵션) + • Team 카드 그리드 + 5. 기타 페이지 + • Simperby / Assets / Profile 레이아웃 기본 골격 구현 + 6. 반응형 튜닝 + • Sidebar collapsing, 2열→1열 전환, 카드 폭/간격 조정 + +⸻ + +이 문서의 레이아웃 스펙을 기반으로, +기존 TECHSPEC_PLAN.md(토큰/SCSS 구조/데이터 구조)에 이어서 +실제 HTML/SCSS 구현을 진행하면 된다. + diff --git a/TECHSPEC_PLAN.md b/TECHSPEC_PLAN.md new file mode 100644 index 0000000..8faf330 --- /dev/null +++ b/TECHSPEC_PLAN.md @@ -0,0 +1,397 @@ +네, 가능합니다. 그리고 아주 좋은 접근입니다. + +2024\~2025년 현재, \*\*최신 웹 표준(Modern CSS)\*\*은 SCSS가 제공하던 핵심 기능(변수, 중첩 구문, 연산)을 브라우저 자체에서 지원합니다. 굳이 별도의 빌드 과정(Sass 컴파일러)을 거치지 않고 \*\*순수 CSS(Vanilla CSS)\*\*로 작성하는 것이 오히려 더 '모던한 웹 표준'에 가깝고 성능상 이점도 있습니다. + +사용자의 요청사항 3가지를 반영하여 `TECHSPEC_PLAN.md`를 **v3.0**으로 전면 개편해드립니다. + +1. **SCSS 제거 → Modern CSS (CSS Variables + Native Nesting) 도입**: 빌드 도구 없이 브라우저 표준 기술만 사용. +2. **4Pillars 스타일 계승**: Glassmorphism, CSS Grid, 다크 모드 최적화. +3. **기능 명세 강화**: 단순 퍼블리싱을 넘어, 검색 필터링, 모바일 메뉴 토글, 데이터 렌더링 등 '작동하는 기능'에 대한 명세 추가. + +----- + +# TECHSPEC\_PLAN.md v3.0 + +PDAO Website – Modern Web Standard Implementation Plan +(Vanilla CSS + Semantic HTML + ES6 Modules) + +----- + +## 0\. 개요 + +이 문서는 외부 라이브러리 의존성을 최소화하고, 브라우저의 최신 표준 기능(**Native CSS Nesting, CSS Variables, ES6 Modules**)을 활용하여 [TECHSPEC.md](https://www.google.com/search?q=TECHSPEC.md)를 구현하는 계획서이다. + +### 변경 사항 (v2.0 대비) + + - **No SCSS**: Sass 컴파일러 제거. 브라우저 네이티브 CSS 사용. + - **Functionality Focus**: UI 모양뿐만 아니라 실제 작동(검색, 필터, 반응형 동작) 로직 포함. + - **Web Standard**: `var()` 변수와 `display: grid`를 적극 활용한 현대적 레이아웃. + +----- + +## 1\. 기술 스택 (Modern Standard) + +### Core Technologies + + - **HTML5**: 시맨틱 태그 (`
`, `