feat: 포트폴리오 전면 리디자인 — 에디토리얼 매거진 구조 개편#28
Merged
Conversation
레이아웃 언어·정보 구조·그리드를 잡지식 에디토리얼로 전환.
기존 한국어 컨텐츠 문구 및 프로젝트/경험/스킬 항목은 1:1 보존.
주요 변경:
- theme.css: warm off-white + 딥블루 accent 1종, radius 10px 단일,
타이포 스케일 축소 (display 52px 상한), 800/900 weight 제거,
tabular-nums 전역, 불필요한 chart/sidebar 토큰 제거
- design-system: EditorialGrid(12col) · Figure · MetaList · DefList
· NumberedFeatureList 신설. SectionHeading accent bar 제거,
ContentCard/FeatureCard/Badge/IconButton 단일 규격화
- ParallaxSection: SPRING_SNAP/SMOOTH/SOFT 토큰화, 진입 거리 축소
- Navigation: 데스크톱 좌측 SideIndex(번호 목차) + 모바일 TopBar 분기
- IA 재구성: Hero → About → Background(Skills/학력/수상/활동)
→ Experience → Projects(4) → Contact
- Hero: 잡지 키-밸류 메타 라인, Scroll 인디케이터/blob 제거
- About: Type A 그리드, Contact 4분할 Footer로 이관
- Background: Skills를 dl 레이아웃, Education/Awards/Activities 타임라인
- Experience: 2컬럼 그리드, monochrome bullets, hairline chip
- Projects: ProjectCover(커버 풀블리드 + 오버레이 메타) +
ProjectLayout(sticky sidebar + 긴 본문) 구조 도입
· Variant L(RxCompose): Overview/Architecture/Features(번호 리스트)
/Use Cases(ShowPot 적용사례, monochrome)
· Variant A(Filtee/Pokit/Interest): Overview/Features(번호 리스트)
+ 기존 내부 다이어그램 유지
- Footer: Contact 섹션으로 재정의, text-8xl 축소
- App.tsx: SideIndex padding, ProjectDivider(150vh sticky) 제거
- print.css: SideIndex/ProjectCover 대응, 불필요 규칙 정비
삭제:
- ProjectShowPot.tsx (미사용 고아 파일, RxCompose 적용 사례로만 노출)
- src/imports/PortfolioDesignRequest* (사용되지 않는 Figma import)
- SectionIndicator.tsx (SideIndex가 기능 흡수)
워크트리에서 작업하여 launch.json에 Worktree Dev Server (port 5174,
--root 경로 명시) 추가.
Closes #27
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
🔍 PR Preview: 삭제됨 (PR closed) |
- Hero/SideIndex/Footer 연도 2025 → 2026 - Background: "기술 스택과 경력, 학력, 수상, 활동 이력을 담은 섹션입니다." 문구로 교체 + Career(경력사항) 블록 추가 - ProjectCover: 라이브러리(library) 종류는 표지 이미지 영역 제거, 프로젝트 이미지는 ClickableImage 래핑 + 원본 비율 유지(max-h-80vh / object-contain) - RxCompose "적용 사례" 카드: Badge 칩 제거 후 번호+eyebrow 에디토리얼 레이아웃으로 재배치 - Filtee "채팅 검색 시 미로드 영역 스크롤 이동" 블록을 SyncFlowDiagram 으로 교체 → "실시간 수신과 동기화 충돌 고려"와 동일 레이아웃 (description + PSB + flow + 스크린샷) - SyncFlowDiagram: screenshotAlt prop 추가 - ProjectInterest: Apple Watch ↔ iPhone 통신 다이어그램 원본 컬러(블루/그린 2톤 + WCSession 양방향 화살표) 복구 - ProjectSidebar: subtitle 중복 노출 제거 (ProjectCover 텍스트 헤더에서 1회 표기) - print.css: 각 li/dl row/figure break-inside avoid, article 내부 section 단위 유지, print-mode 에서 프로젝트 sidebar 를 본문 상단 가로 메타바로 재배치, 이미지 max-height 제한 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
표지 복원 & 비율 유지 - ProjectCover: 이전처럼 full-bleed 이미지 + 좌하단 번호·타이틀·부제 오버레이, 우하단 메타 오버레이로 복원 - 이미지는 object-contain + max-h-[85vh] 로 원본 비율 최대한 유지 - 클릭 시 상세보기(ClickableImage) 유지 ShowPot "적용 사례" 카드 정렬 - flex-wrap 으로 우측 메타가 가운데로 밀리던 문제 수정 - grid-cols-[1fr_auto] 로 좌측 본문 + 우측 메타 명확 분리 - 우측: items-end + text-right 로 날짜/팀/GitHub 전부 우측 정렬 ProjectSidebar 개선 - 번호 + 종류(Project/Library) + 프로젝트 이름을 상단에 추가해 스크롤 중에도 컨텍스트 유지 ProjectLayout 컬럼 비율 - lg: 사이드바 col-span-4 → 3, 본문 col-span-8 → 9 (본문 가로폭 확대) PDF / print.css - 표지 이미지 max-height 260px 로 제한 → 표지+사이드바 메타+본문 도입부가 한 페이지에 함께 흐름 - ProjectCover 에 print-only 텍스트 헤더(번호/종류/제목/부제/메타) 추가 → PDF에서 오버레이 대신 깔끔하게 표시 - ContentCard/figure/li/dl row 전반에 break-inside: avoid 적용 → 섹션 내부 쪼개짐 최소화 - article 단위 break-before: page 로 프로젝트 경계 명확화 - article 의 sticky 사이드바는 본문 상단 가로 메타바로 재배치(col-span-3 대응 셀렉터 추가) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
PDF 표지 — 웹과 동일한 디자인 유지 - ProjectCover 의 print-only 텍스트 헤더 제거 - 이미지 위 다크 오버레이 + 번호/종류/제목/부제/메타 오버레이를 PDF 에서도 그대로 표시 - PDF 에서는 오버레이 gradient 를 약간 더 진하게(0.25/0.25/0.75) 해서 가독성 보강 프로젝트 단위 새 페이지 - 모든 project article 이 새 페이지에서 시작하도록 break-before: page 강제 - 첫 article(RxCompose) 예외 제거 → RxCompose 표지가 이전 페이지 하단에 끼던 문제 해결 - article 의 첫 section(cover)은 break-inside/after avoid 로 본문 도입부가 같은 페이지 유지 - 표지 이미지 max-height 280px 로 제한해 표지+메타+본문 도입부가 한 페이지에 흐름 블록 쪼개짐 방지 (CSS 셀렉터 수정 — 기존 double-backslash 가 매칭 실패했음) - [class*="rounded-[10px]"][class*="border-border"] 등으로 ContentCard/FeatureCard 전부 break-inside: avoid 정상 적용 - ol > li / ul > li / dl > div / figure 모든 항목 쪼개짐 방지 - TwoColumnLayout 내부 열, article section 도 break-inside: avoid-page - 내용이 한 페이지보다 크면 자동으로 다음 페이지에서 시작 Background (02) 섹션 - #background .grid 전체(GridLabel + GridBody) 블록을 break-inside: avoid-page - AWARDS/Education/Activities 서브섹션 라벨만 남고 본문이 다음 페이지로 밀리던 orphan 문제 해결 Footer (Contact) - section[id="contact"] 전체 break-inside: avoid-page - 하단 "© 2026 / All rights reserved" 라인은 앞 내용과 같은 페이지에 강제 Eyebrow (uppercase tracking-widest span) 뒤 본문이 분리되지 않게 break-after: avoid Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
PDF 표지 이미지 웹과 동일한 full-bleed 렌더링 - print 모드 이미지 규칙에서 width: auto / max-height 280px 제약 제거 - width: 100% + max-height: 520px + object-cover 로 컨테이너 전체 폭 채움 - 이전에는 1130px 컨테이너에 520px 이미지가 들어가 우측에 큰 빈 공간 발생했던 문제 해결 Experience 헤더(03 — EXPERIENCE / 미스고(주) / iOS Developer) 와 WORK 리스트 동거 - Experience 섹션의 두 번째 EditorialGrid(Work) 에 break-before: avoid - 인트로 블록 + Work 리스트 첫 항목이 가능한 한 같은 페이지에 이어짐 대제목(SectionGroup title, SubSectionTitle size="xl") 페이지 분리 - SectionGroup 컴포넌트 래퍼에 data-print-section-break 속성 추가 - print-mode CSS: [data-print-section-break] / article h4.text-xl 에 break-before: page - "프로젝트 설계", "사진 필터 제작 기능 설계", "채팅 기능 설계", "결제 기능 설계", "URL 제목 및 썸네일 파싱 설계" 등 대제목이 나오면 공간이 남아도 새 페이지에서 시작 - 대제목 바로 아래 첫 블록에 break-after: avoid 로 제목이 본문과 분리되지 않도록 보강 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
문제: PDF 에서 프로젝트 표지 + 사이드바 identity block 만 한 페이지, 본문은 다음 페이지로 밀리던 증상 원인: 사이드바의 "01 · LIBRARY / RxCompose" identity block 이 표지 바로 아래 렌더되면서, break-inside avoid 가 identity block 내부(eyebrow vs 제목)에서 분리될 여지를 남겼고, cover section 과 다음 콘텐츠 사이에도 break-after: avoid 결속이 없었음 해결 - ProjectSidebar identity block 에 data-print-hide 부착 → PDF에서는 ProjectCover 가 이미 번호/종류/타이틀/부제를 prominently 표시하므로 중복 제거 - print.css: 표지 section 에 break-after: avoid 추가 → 표지 다음에 오는 본문이 같은 페이지에 이어짐 - print.css: aside(사이드바) 에 break-after: avoid 추가 → 사이드바 메타 다음 본문 도입부도 같은 페이지에 이어짐 결과: RxCompose / Filtee / Pokit / Interest 모두 표지 + 메타 + 본문 도입부가 같은 페이지에서 이어지고 프로젝트 이름/표지와 내용이 분리되지 않음 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ProblemSolvingBlock을 정의 리스트 구조(Eyebrow + hairline divide)로 재작성. 다이어그램은 색 구분을 유지하되 에디토리얼 형태 규약 일괄 적용: - radius: rounded-xl/2xl/lg → rounded-[10px] 단일화 - border: border-2 / border-dashed → 1px solid hairline - shadow 전면 제거 - 컬러 필 알약(/10+) → /5 수준 희미 틴트 + 보더/텍스트 색 유지 카드/정보 블럭은 bg-card + border-border 로 통일: - Pokit: Modular Architecture / Tuist Graph / 원인 파악 박스 + OG 카드 목업 - Filtee: 스냅샷 시점 박스 + 결제 검증 박스 - OG 목업 상단 라벨을 Eyebrow 컴포넌트로 교체 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This reverts commit f6060dd.
- ProblemSolvingBlock: 외곽 카드 제거, 좌측 3px 컬러바(destructive/green-500)
+ 컬러 Eyebrow(text-destructive / text-green-600)로 재설계.
색 구분을 유지한 채 카드 chrome 없이 프로즈로 흐르게.
- design-system: FeatureCard/FeatureItem/NumberedStep 박스 제거,
border-b 행 구조로 전환. ContentCard는 다이어그램 래퍼 용도로 유지.
- SectionGroup: 하위 children 사이에 hairline Divider 자동 삽입하여
카드 제거 후에도 섹션 구분 명확.
- 프로젝트 파일: Project{RxCompose,Filtee,Pokit,Interest} 내 모든 외곽
ContentCard 삭제 (총 15건). bg-primary/5 틴트 콜아웃 4건은
border-l-[3px] border-primary 좌측 바로 전환.
- Pokit Modular Architecture 3이유 카드 그리드 → 번호 행 리스트로 전환.
- Pokit JWT 비교, Filtee Stack 다이어그램 외곽 박스 제거 (hairline만).
- Pokit OG 링크 프리뷰 목업 2개: border-t/border-b hairline으로 단순화.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Diagrams.tsx 7개 컴포넌트(LayerDiagram, FlowChart, DBSchema, DBRelationDiagram, DBSchemaWithERD, SyncFlowDiagram, RxComposeArchitectureDiagram)의 외곽 ContentCard 전면 제거. 다이어그램 제목은 Eyebrow 스타일(text-xs uppercase tracking-widest muted-foreground)로 통일. 내부 노드/SVG/컬러 코딩은 그대로. - ProblemSolvingList 추가 — 연속된 Problem/Solution 블럭을 hairline Divider로 자동 구분. Filtee 1, Pokit 3, Interest 2 총 6개 그룹에 적용 (PSB 12개 포함). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- OG 태그 파싱 링크 프리뷰 카드 디자인 복원 (rounded + border + bg-card).
- 프로젝트 표지 그라데이션 dim 완화: 0.2/0.15/0.65 → 0.1/0.05/0.45.
- WCSession 다이어그램 — 양방향 통신 의도 시각화 강화:
모바일/데스크톱 모두 Watch(좌) ↔ iPhone(우) 좌우 배치 유지하여
수평 화살표가 박스 위치와 공간적으로 일치하도록 함.
- 파란 화살표 → (Watch→iPhone, 심박수·칼로리), 초록 화살표 ←
(iPhone→Watch, 운동 제어 명령) — 출발 기기 색과 일치.
- 모바일에서는 박스 크기를 100×100 (데스크톱 160×160) 로 축소하여
가로 공간 확보. 라벨 위/화살표 아래 2단 구조로 가독성 확보.
- 하단 "WCSession · 1초 주기 동기화" 캡션.
- 페이징 잘림 수정:
- print.css: article 첫 section 의 break-after:avoid 제거 —
표지+사이드바+본문이 반드시 한 페이지에 붙어야 한다는 제약이
빈 페이지(page 24) 유발. 표지 break-inside:avoid 만 유지.
- LayerDiagram / SyncFlowDiagram / DBSchemaWithERD /
RxComposeArchitectureDiagram 본체 래퍼에 data-print-keep 부착 →
break-inside:avoid 로 페이지 경계에서 다이어그램 쪼개짐 방지.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
사용자 피드백: "연관되거나 동일한 주제에 대한 내용이면 자르면 안돼".
관련된 타이틀/본문/다이어그램/Problem-Solution은 같은 페이지에 모인다.
주요 변경:
1) ProblemSolvingBlock — dl 래퍼에 data-print-keep 부착.
Problem/Solution 행이 페이지 경계에서 쪼개지지 않음.
("타이머 설계" Problem/Solution 분리 해소)
2) SyncFlowDiagram — 전체 블럭(SubSectionTitle + 설명 + PSB + 다이어그램
+ 스크린샷)을 data-print-keep 으로 묶음. "채팅 검색 시 미로드 영역
스크롤 이동" 제목과 다이어그램 분리 해소.
3) LayerDiagram — subtitle / description prop 추가. Pokit "모듈 구성 및
레이어 설계"와 Filtee "4계층 구조 설계"의 외부 SubSectionTitle/설명을
LayerDiagram 내부 data-print-keep 래퍼로 이동하여 제목 + 본문 +
계층 카드가 한 덩어리로 유지.
4) Interest 서브섹션(HealthKit, Clean Architecture, 타이머 설계) —
각 FadeInView 내부를 data-print-keep div 로 감싸 SubSectionTitle +
설명 + PSB 가 분리되지 않도록.
5) 표지 연결 복원 — article 첫 section(ProjectCover) 에 break-after:avoid
복원, aside(사이드바)에도 break-inside:avoid + break-after:avoid 부착.
표지 이미지 max-height 520px → 340px 로 축소해 표지 + 사이드바 + 본문
도입부가 한 페이지에 모이기 쉽게 조정. (빈 페이지 24 현상 대응 포함)
6) Experience 내러티브 — max-w-prose 제거. WORK 리스트와 동일한 폭으로
확장되어 레이아웃 일관성 확보.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1) LayerDiagram 레이어 행 레이아웃 — 라벨 컬럼 min-w-[100px] 에서 고정 w-[170px] + md:shrink-0 으로 변경. 모바일에서는 라벨과 설명이 세로로 스택되도록 flex-col 로 반응형. "Util / SharedThirdPartyLib" 같은 긴 라벨이 설명 텍스트와 겹치지 않음. 2) 표지 이미지 max-height 340px → 480px. 원본 웹 디자인의 세로 비율을 최대한 살리기. 3) print.css — article 첫 section / aside 의 break-after:avoid 제거. "cover + sidebar + body 가 반드시 같은 페이지에 있어야 함" 제약이 블록 총 높이가 페이지를 넘길 때 빈 페이지(23) 를 만들던 원인. 이제 각 요소는 내부적으로만 쪼개지지 않고, 페이지 경계에 자연스럽게 배치. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…정비 (#27) - 컴포넌트 계층: SectionGroup(강제 새 페이지) > DesignGroup(들어감/미루기/자름) > DesignUnit - DesignGroup divider prop 추가, 헤더 하단 진입 구분선 - SectionGroup 헤더 시각 강화(text-2xl + border-t-2) - HighlightBox / InlineDiagram / DesignUnit / DesignGroup / UseCaseCover 신설 - ShowPot 표지 오버레이(UseCaseCover로 ProjectCover 패턴 재사용) - Cover img max-height 60vh로 Interest Features 행 단위 분리 - 빈 페이지 8 해결(article 본문 section padding-bottom 0) - Footer border-top 제거(수평·수직 비대칭 해소) - 제목 중복 제거(LayerDiagram subtitle / DBSchemaWithERD title) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- 비프로젝트 섹션(About/Profile/Experience/Footer)에 data-print-keep 부여 → AWARDS 단독 잔류, Work 11 orphan 해결 - ProjectCover library variant 에 data-print-cover-library + 다음 본문과 묶기 → RxCompose 표지 단독 페이지 해결 - FadeInView 가 HTML attrs 를 motion.div 로 spread - AGENTS.md anchor 카탈로그 + 비프로젝트 섹션 가이드 보강 총 27 → 22 페이지 (5p 절약). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Work 묶음의 data-print-keep 제거 — wrapper anchor 가 Work 통째 새 페이지로 미루기를 유발해 헤더가 이전 페이지(Awards/Activities) 끝에 packing 되며 헤더-Work 가 다른 페이지에 갈리는 문제 발생. 제거 후: 헤더 + Work 01-02 같은 페이지, Work 09-11 도 3개 묶여 orphan 아님. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
잡지식 에디토리얼 매거진을 레이아웃 언어로 채택한 전면 리디자인 + PDF 출력 페이징 시스템 정비.
Key Changes
디자인 토큰
공통 컴포넌트 (`design-system.tsx`)
레이아웃 시스템
섹션 구조 재편
`Hero → About → Background → Experience → Projects → Contact`
모션
삭제
PDF 출력 페이징 시스템 (10차에 걸쳐 정비)
컴포넌트 계층
```
SectionGroup ("프로젝트 설계" 챕터)
└ DesignGroup ("채팅 기능 설계" 등 xl 묶음)
└ DesignUnit ("CoreData 선택" 등 단위 주제)
└ Figure / Diagram / ProblemSolvingBlock / HighlightBox / TwoColumnLayout
```
6단 페이징 매트릭스
` / Figure / MetaItem 한 행
비프로젝트 섹션(Hero/About/Profile/Experience/Footer)은 의도적으로 `SectionGroup/DesignGroup` 계층 미사용. 시각 언어가 다른 `EditorialGrid` 기반이므로 계층 변경 대신 묶음 단위로 `data-print-keep` 부여해 매트릭스에 편입.
새 anchor 컴포넌트
시각 정비
print.css 주요 정책
` 통째 보호, ul/ol/dl > 항목 보호, MetaList 행 보호
10차 진화 요약
Test Plan
Notes
Closes #27
🤖 Generated with Claude Code