outsourcing
/
bodalab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: new version 작업

This commit is contained in:
이희원 2026-06-24 17:15:42 +09:00
parent 1415e935e7
commit fbd1a77754
9 changed files with 4261 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
doc/미완료.md
View File

@ -1,41 +1,88 @@
# 디자인 링크
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?m=auto&t=Y5wF3r0wUkUFeBIV-6
# 섹션별 링크
## PC
01_HOME:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2094&t=XSGOQmdNzIB99Zh5-4
02_ABOUT:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2230&t=XSGOQmdNzIB99Zh5-4
03_HISTORY:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2121&t=XSGOQmdNzIB99Zh5-4
04_VISION:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2183&t=XSGOQmdNzIB99Zh5-4
05_PROJECT:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2202&t=XSGOQmdNzIB99Zh5-4
06_Expertise:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2253&t=XSGOQmdNzIB99Zh5-4
## Mobile
01_HOME:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2232&t=XSGOQmdNzIB99Zh5-4
02_ABOUT:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2288&t=XSGOQmdNzIB99Zh5-4
03_HISTORY:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2433&t=XSGOQmdNzIB99Zh5-4
04_VISION:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-4183&t=XSGOQmdNzIB99Zh5-4
05_PROJECT:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-4231&t=XSGOQmdNzIB99Zh5-4
06_Expertise:
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-5082&t=XSGOQmdNzIB99Zh5-4
---
# 미완료 / 확인 필요 항목
Figma MCP(`figma-mcp`)로 확인이 안 되거나 추출이 안 되는 항목을 섹션별로 기록한다. 추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다.
---
## 다음 세션 인수인계 (작업 중단 시점 기록)
## 다음 세션 인수인계 (2026-06-24 작업분)
사용자가 자리를 비워야 해서 PROJECT 섹션 작업 중 중단됨. 아래 순서대로 이어서 진행하면 된다.
이 Mac(`/Users/heemac/repository/project-bodalab`)으로 환경이 바뀌면서 figma-mcp가 한 번 끊겼다가 새로 연결됨(아래 "Figma MCP 연결 관련 메모" 참고). 429는 해소됨.
### 완료된 섹션
- HOME, ABOUT US(+EXPERTISE), HISTORY, VISION — 마크업(`src/index.html`)·스타일(`src/scss/page/*.scss`)·필요 JS(`src/js/main.js`) 모두 반영, `npm run build` 통과 확인됨.
### 남은 작업 (순서대로)
1. **PROJECT 섹션** — 작업 중 Figma 이미지 렌더 API가 429(Rate Limit)를 계속 반환해서 멈춤. 노드 ID는 이미 확보됨 (아래 "Figma 노드 ID 모음" 참고). `mcp__figma__view_node`로 PC(`2247:2202`)와 모바일(`2319:4231`) 다시 렌더 시도부터 시작. 429가 계속되면 5~10분 정도 기다린 후 재시도하거나, 이미 위에서 확보한 PC 전체 컴포지트 이미지(`2247:2093` 렌더 결과, 이 문서/대화 로그에는 없고 이전 대화 컨텍스트에만 있었음 — 새 세션이면 `2247:2093`을 다시 view_node로 떠야 함)로 대략적인 카피/태그만 추정하고 정확한 카피는 "확인 필요"로 명시.
2. **CONTACT/FOOTER 섹션** — 아직 Figma 노드 ID조차 확보 못함. 사용자에게 PC/모바일 프레임 "Copy link to selection" 링크 요청부터 시작해야 함. 옛 디자인(`src/index.html`에 남아있던 구버전 구조 참고용으로 git log/old commit에서 확인 가능)에는 Head Office 주소, Contact 폼(회사명/담당자/연락처/이메일/문의내용/개인정보동의/SEND), Recruitment 태그(Planner & Consulting/Designer/Publisher/Scripter), footer(브랜드/연락처/copyright)가 있었음 — 새 디자인 렌더(PC 전체 컴포지트, `2247:2093`)에서도 "WELCOME BODA LAB", Head Office, Contact Us 폼, Recruitment 태그, footer가 보였으므로 큰 구조는 유사할 것으로 추정되나 정확한 카피/배치는 미확인.
3. **GNB 마무리** — HOME 작업 때 1차로 완성했음(데스크톱 6개 메뉴, 모바일 풀스크린 드로어 + 닫기 X). 전체 섹션이 다 만들어진 뒤 스크롤 시 활성 메뉴(`isActive`) 동작, 반응형 폭(좁은 노트북 화면에서 6개 메뉴 안 깨지는지) 최종 점검 필요.
- HOME, ABOUT US(+EXPERTISE), HISTORY, VISION — 마크업·스타일·JS 반영, 빌드 통과 (이전 세션).
- **PROJECT** — 카드 레이아웃을 고정 `aspect-ratio: 16/10` 크롭 방식에서 이미지 원본 비율 그대로 쌓는 매스너리 방식으로 변경(`_projects.scss`). 11번째 카드 내용을 "한화 GAsk 구축 프로젝트(한화)"→"롯데 GA2ck 구축 프로젝트 (롯데 렌터카)(롯데)"로 수정 — **사용자 확인받고 반영함**. 날짜(`2021.11`)는 기존 값 그대로 유지, 재확인은 안 함.
- **CONTACT/FOOTER** — 사용자가 "06_Expertise" 라고 표기해 둔 링크(PC `2247:2253` / 모바일 `2319:5082`)가 실제로는 CONTACT/FOOTER 디자인이었음(라벨 오기로 추정). 기존에 중복으로 남아있던 옛 `<section id="expertise">`(4개 서비스 목록, 이미 ABOUT 섹션에 이전되어 있던 내용)는 삭제. CONTACT를 "WELCOME BODA LAB" 헤딩 + 설명 + Head Office(Address/e-mail/tel 3필드, fax·지도 삭제) + Contact Us 폼(2단: 입력 4개 스택 + 우측 문의내용, placeholder에 `*`, 체크박스 문구를 "[필수] 개인정보 수집 및 이용 동의"로) + Recruitment 태그 구조로 교체. 아코디언 라벨 "프로젝트 문의"→"Contact Us", "채용"→"Recruitment". Head Office 정보도 새 값으로 교체: Address "서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호" / e-mail `koji@bodalab.co.kr` / tel `010-4169-4728`.
- **색상 1차 작업 누락 → 재수정함**: 처음엔 다른 섹션과 동일하게 다크 테마(검은 배경/흰 텍스트)로 만들었는데, 사용자가 Figma와 다르다고 지적함. 다시 렌더 확인해보니 이 섹션(CONTACT)만 Figma에서 **흰 배경 + 검은 텍스트**(라이트 테마)로 되어 있었음 — 다른 섹션과 의도적으로 색 반전된 구간. `_contact.scss` 전체를 라이트 테마로 재작업: 배경 `$color-white`, 텍스트 `$color-dark` 계열, 강조색(Address/e-mail/tel 라벨, SEND 버튼, 체크박스 체크 상태, Recruitment 태그 hover)은 `$color-cyan`→`$color-blue`(`#7796ff`)로 교체. 아코디언 화살표 아이콘(`icon-chevron.svg`)은 흰색 stroke라 흰 배경에서 안 보이므로 `filter: invert(1)`로 우회. `.footer`도 `.contact` 안에 있어서 같은 배경을 쓰게 되므로 footer 텍스트 색도 함께 라이트 테마로 변경함(footer 전용 Figma 노드는 없어서 이건 추정 — 색상 반전의 연쇄 효과로 어쩔 수 없이 맞춘 것, 실제 footer 디자인 의도와 다를 수 있음).
- `npm run build` 통과, playwright로 PC(1440px)/모바일(390px) 스크린샷 확인하여 Figma 렌더와 색상·레이아웃 일치 확인함.
### 남은 작업
1. **PROJECT 이미지 9~13번 누락** — 9(프로스펙스)·10(중소기업창업)·11(롯데 GA2ck)·12(국민은행)·13(코나아이 PC) 카드는 Figma 새 디자인엔 실제 목업 이미지가 있는데, 이 MCP로는 이미지 export가 안 돼서 여전히 빈 박스(`project__thumbEmpty`)로 남아있음. **사용자가 Figma에서 직접 5개 이미지를 export 해서 `src/images/project-9.jpg` ~ `project-13.jpg`로 전달해야 적용 가능.**
2. **Footer 컨텐츠 미반영** — 이번 CONTACT 작업 대상 노드(`2247:2253`/`2319:5082`)는 Recruitment 태그까지만 보이고 그 아래 footer(브랜드/연락처/copyright) 영역은 렌더에 포함되지 않았음. 그래서 footer는 옛 값(`bodalab@bodalab.com`, `010-1234-5678`)을 그대로 두었는데, 새 Head Office 연락처(`koji@bodalab.co.kr`, `010-4169-4728`)와 불일치함. footer 전용 Figma 프레임 링크나 "이 연락처로 통일해도 되는지" 확인 필요.
3. **GNB 마무리** — 전체 섹션이 다 만들어진 뒤 스크롤 시 활성 메뉴(`isActive`) 동작, 반응형 폭 최종 점검 필요. (아직 미착수)
4. **최종 정리**
- `src/scss/index.scss`의 `@use "page/..."` 목록은 이미 `gnb, intro, about, vision, projects, contact` 로 되어 있음. PROJECT/CONTACT 작업 후 파일명을 새 섹션에 맞게 정리할지 결정(`_projects.scss`→`_project.scss` 등 네이밍 통일 여부는 미정).
- 안 쓰는 이미지 정리: `about-hand.jpg`는 이미 HTML에서 참조 제거됨(파일 자체는 아직 디스크에 남아있을 수 있음, 삭제 필요). `vision-1/2/3.jpg`도 더 이상 참조 안 됨 — 삭제 검토. `history-1.jpg`는 HISTORY 좌측 사진 placeholder로 재사용 중(삭제하면 안 됨).
- `npm run build`, `npm run format` 최종 실행.
- 파일명 정리: `_projects.scss`를 새 네이밍(`_project.scss` 등)으로 통일할지 결정 미정.
- 안 쓰는 이미지 정리: `about-hand.jpg`(참조 제거됨, 삭제 검토), `vision-1/2/3.jpg`(참조 없음, 삭제 검토). `history-1.jpg`는 재사용 중이라 삭제 금지. `map.svg`도 이번에 `.contact__map` 삭제로 참조가 없어졌으니 삭제 검토 목록에 추가.
- `npm run format` 최종 실행 (이번 세션에선 `npm run build`만 실행함, format은 아직 안 돌림).
### Figma 노드 ID 모음 (file_key: `MnwN1Uzg5F6ks9Clr1brLW`)
- PC 전체 페이지(컴포지트, 모든 섹션 한눈에 보임): `2247:2093`
- 01_HOME (PC): `2247:2094`
- 02_ABOUT US (PC, EXPERTISE 포함): `2247:2230`
- 03_HISTORY (PC): `2247:2121`
- VISION PC: `2247:2183` / VISION 모바일: `2319:4183`
- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — **아직 렌더 못 받음(429)**
- CONTACT/FOOTER — **노드 ID 미확보**, 사용자에게 요청 필요
- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — 렌더 확인 완료, 반영 완료(이미지 9~13 제외)
- CONTACT/FOOTER (문서 상단 "06_Expertise" 링크가 실제 이 내용임) PC: `2247:2253` / 모바일: `2319:5082` — 렌더 확인·반영 완료(footer 영역 제외)
- 모바일 전체 페이지(컴포지트): `2319:5243`
- 모바일 GNB 드로어(열린 상태): `2319:5998`
### Figma MCP 연결 관련 메모 (재현/트러블슈팅용)
- 이 프로젝트(`d:/repository/boda-lab`)의 figma MCP 서버는 프로젝트 루트 `.mcp.json`에 등록되어 있음 (전역 `~/.claude.json`이 아니라 **프로젝트 단위 `.mcp.json` 파일** 방식).
- 서버 설정: stdio 방식, `command`는 nvm4w 심볼릭링크(`C:\nvm4w\nodejs\npx.cmd`)가 아니라 **실제 경로**(`C:\Users\HeeDesktop\AppData\Local\nvm\v24.16.0\npx.cmd`)로 지정해야 동작함 — Windows에서 VSCode 확장이 스폰하는 프로세스는 심볼릭링크/PATH를 못 찾는 경우가 있어서 절대경로로 우회한 것. `args: ["-y", "figma-mcp"]`, `env.FIGMA_API_KEY`로 키 전달.
- **환경이 Windows(`d:/repository/boda-lab`)에서 이 Mac(`/Users/heemac/repository/project-bodalab`)으로 바뀜.** Windows 때 설정(`.mcp.json`에 nvm4w 절대경로 `npx.cmd` 지정)은 이 머신에 적용 안 됨 — npx/node 자체가 새로 깔린 환경이라 처음엔 figma-mcp가 전혀 연결 안 되어 있었음.
- 이 Mac에서는 프로젝트 루트 `.mcp.json`(git에는 `.gitignore`로 추적 제외됨)에 `{ "mcpServers": { "figma": { "command": "npx", "args": ["-y", "figma-mcp"], "env": { "FIGMA_API_KEY": "..." } } } }` 형태로 새로 등록함. macOS는 nvm 심볼릭링크 문제가 없어서 `command: "npx"`만으로 동작함(절대경로 불필요).
- **`.mcp.json`은 세션 시작 시점에 로드된다.** 파일을 새로 만들거나 고쳐도 같은 대화 세션에는 바로 안 먹히고, Claude Code를 재시작(새 세션)해야 도구가 인식됨.
- 도구: `mcp__figma__add_figma_file(url)` — 파일 전체를 JSON으로 덤프하는데, 파일이 커서 약 25k 토큰 근처(`01_HOME`~`03_HISTORY` 중반)에서 항상 잘림. `node-id` 쿼리 파라미터를 URL에 넣어도 무시되고 항상 전체 문서 기준으로 덤프됨 — 범위 제한 불가.
- 도구: `mcp__figma__view_node(file_key, node_id)` — 특정 노드를 PNG로 렌더해서 보여줌(파일로 저장은 안 됨, 대화창에만 표시). 섹션별 정밀 확인에 주력 도구로 사용 중. **오늘 PROJECT 섹션 작업 중 이 API가 429를 반환하기 시작했고, 5분+ 대기해도 풀리지 않았음.** 다음 세션에서도 재현되면 더 오래(10분+) 기다리거나, 사용자에게 Figma API 키/요금제 쪽 rate limit 상태를 확인해달라고 요청할 것.
- 도구: `mcp__figma__view_node(file_key, node_id)` — 특정 노드를 PNG로 렌더해서 보여줌(파일로 저장은 안 됨, 대화창에만 표시). 섹션별 정밀 확인에 주력 도구로 사용 중. 이전 세션엔 이 API가 429를 반환했었는데, 이번 세션(새 환경)에서는 재현 안 되고 바로 정상 렌더됨.
- 이미지 에셋(사진/목업) 자체는 이 MCP로 export/저장이 안 됨 — 필요한 이미지는 Figma에서 사용자가 직접 Export 해서 `src/images/`에 넣어줘야 함.
---
@ -47,7 +94,7 @@ Figma MCP(`figma-mcp`)로 확인이 안 되거나 추출이 안 되는 항목을
## HOME
- 배경의 원형 동심원 패턴 이미지(`unsplash:-cKXtsJWU-I`, opacity 0.2)는 에셋 추출이 안 돼서 반영하지 못했다. 사용자 결정에 따라 기존 GSAP blob 애니메이션(`introAnimation.js`)을 그대로 유지하기로 함 — 동심원 패턴 이미지를 쓰고 싶다면 Figma에서 해당 이미지를 export해서 전달 필요.
- ~~배경 패턴 이미지 미반영~~ → **해결함(2026-06-24)**. 실제로는 동심원 패턴이 아니라 Unsplash 무료 사진(`A star trail over a body of water`, 작가 Reign Abarintos, id `-cKXtsJWU-I`)이었음 — 순수 CSS로는 재현 불가 판단(불규칙한 별빛 줄무늬·노이즈가 있는 실제 사진이라 `radial-gradient` 등으로 흉내내는 수준에 그침). 사용자가 Figma에서 직접 export해서 `src/images/bg_home.png`로 전달함. 적용하면서 그동안 자리채움으로 쓰던 GSAP blob 애니메이션(컬러 블러 도형, `introAnimation.js`)은 Figma 디자인에 없는 요소라 **사용자 확인받고 완전히 제거**함 — `.intro__blobs`/`.blob*` 마크업·SCSS·JS 전부 삭제, `.intro__bg`(배경 이미지, opacity 0.2, GSAP로 0→0.2 페이드인)로 교체. 텍스트 순차 등장 애니메이션(`intro__sub`→`intro__title` fade-up)은 그대로 유지.
## GNB (모바일 드로어)

4066
pnpm-lock.yaml Normal file
View File

File diff suppressed because it is too large Load Diff

9
pnpm-workspace.yaml Normal file
View File

@ -0,0 +1,9 @@
allowBuilds:
'@parcel/watcher': true
cwebp-bin: true
esbuild: true
gifsicle: true
jpegtran-bin: true
mozjpeg: true
optipng-bin: true
pngquant-bin: true

BIN
src/images/bg_home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

99
src/index.html
View File

@ -52,12 +52,7 @@
<main>
<!-- 01. INTRO -->
<section id="intro" class="intro">
<div class="intro__blobs" aria-hidden="true">
<div class="blob blobCyan"></div>
<div class="blob blobPurple"></div>
<div class="blob blobBlue"></div>
</div>
<div class="intro__bg" aria-hidden="true"></div>
<div class="intro__content">
<p class="intro__sub">Our Company</p>
@ -493,10 +488,10 @@
<div class="project__thumb project__thumbEmpty"></div>
<div class="project__info">
<div class="project__meta">
<h3 class="project__name">한화 GAsk 구축 프로젝트</h3>
<h3 class="project__name">롯데 GA2ck 구축 프로젝트 (롯데 렌터카)</h3>
<span class="project__date">2021.11</span>
</div>
<p class="project__company">한화</p>
<p class="project__company">롯데</p>
<div class="project__stack">
<span class="project__tag">html5</span>
<span class="project__tag">css3</span>
@ -546,104 +541,58 @@
</div>
</section>
<!-- 07. EXPERTISE -->
<section id="expertise" class="expertise">
<div class="expertise__inner">
<h2 class="sectionTitle">EXPERTISE</h2>
<p class="expertise__desc">
<!-- 07. CONTACT / FOOTER -->
<section id="contact" class="contact">
<div class="contact__inner">
<h2 class="contact__heading">WELCOME BODA LAB</h2>
<p class="contact__desc">
The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,
<br />
거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.
</p>
<ul class="expertise__list">
<li class="expertise__item">
<span class="expertise__num">01</span>
<h3 class="expertise__name">UX Consulting</h3>
<p class="expertise__text">UX 컨설팅</p>
</li>
<li class="expertise__item">
<span class="expertise__num">02</span>
<h3 class="expertise__name">Plarform Building</h3>
<p class="expertise__text">플랫폼 구축</p>
</li>
<li class="expertise__item">
<span class="expertise__num">03</span>
<h3 class="expertise__name">Mobile App &amp; Web</h3>
<p class="expertise__text">앱 &amp; 웹 개발</p>
</li>
<li class="expertise__item">
<span class="expertise__num">04</span>
<h3 class="expertise__name">Service Management</h3>
<p class="expertise__text">서비스 운영</p>
</li>
</ul>
</div>
</section>
<!-- 08. CONTACT / FOOTER -->
<section id="contact" class="contact">
<div class="contact__inner">
<div class="contact__left">
<h2 class="contact__greeting">
Welcome!
<br />
<span class="contact__greetingBrand">BODA LAB</span>
</h2>
<address class="contact__address">
<address class="contact__office">
<p class="contact__label">Head Office</p>
<dl class="contact__infoList">
<div class="contact__infoItem">
<dt class="contact__infoLabel">Address</dt>
<dd class="contact__infoValue">
서울특별시 금천구 가산디지털2로 169-16,
<br />
907호 (가산하우스디퍼스타)
</dd>
<dd class="contact__infoValue">서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호</dd>
</div>
<div class="contact__infoItem">
<dt class="contact__infoLabel">e-mail</dt>
<dd class="contact__infoValue">
<a class="contact__infoLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
<a class="contact__infoLink" href="mailto:koji@bodalab.co.kr">koji@bodalab.co.kr</a>
</dd>
</div>
<div class="contact__infoItem">
<dt class="contact__infoLabel">tel</dt>
<dd class="contact__infoValue">010-1234-5678</dd>
</div>
<div class="contact__infoItem">
<dt class="contact__infoLabel">fax</dt>
<dd class="contact__infoValue">010-1234-5678</dd>
<dd class="contact__infoValue">010-4169-4728</dd>
</div>
</dl>
</address>
</div>
<div class="contact__right">
<div class="contact__map"></div>
</div>
</div>
<!-- 프로젝트 문의 -->
<!-- Contact Us -->
<div class="contactAccordion">
<div class="contactAccordion__item isOpen" id="acc-project">
<button class="contactAccordion__header" aria-expanded="true" aria-controls="acc-project-body">
<span>프로젝트 문의</span>
<span>Contact Us</span>
<img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="" />
</button>
<div class="contactAccordion__body" id="acc-project-body">
<form class="contactForm" onsubmit="return false;">
<div class="contactForm__row">
<input type="text" class="contactForm__input" placeholder="회사명" />
<input type="text" class="contactForm__input" placeholder="담당자 이름" />
</div>
<div class="contactForm__row">
<input type="tel" class="contactForm__input" placeholder="연락처" />
<input type="email" class="contactForm__input" placeholder="이메일" />
<div class="contactForm__cols">
<div class="contactForm__fields">
<input type="text" class="contactForm__input" placeholder="회사명*" />
<input type="text" class="contactForm__input" placeholder="담당자 이름*" />
<input type="tel" class="contactForm__input" placeholder="연락처*" />
<input type="email" class="contactForm__input" placeholder="이메일*" />
</div>
<textarea class="contactForm__textarea" placeholder="문의내용"></textarea>
</div>
<div class="contactForm__agree">
<label class="contactForm__checkbox">
<input class="contactForm__checkboxInput" type="checkbox" />
<span class="contactForm__checkboxBox"></span>
<span>개인정보보호정책에 동의합니다.</span>
<span>[필수] 개인정보 수집 및 이용 동의</span>
</label>
</div>
<div class="contactForm__submit">
@ -653,10 +602,10 @@
</div>
</div>
<!-- 채용 -->
<!-- Recruitment -->
<div class="contactAccordion__item" id="acc-career">
<button class="contactAccordion__header" aria-expanded="false" aria-controls="acc-career-body">
<span>채용</span>
<span>Recruitment</span>
<img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="" />
</button>
<div class="contactAccordion__body" id="acc-career-body" hidden>

54
src/js/introAnimation.js
View File

@ -1,61 +1,11 @@
import { gsap } from "gsap";
const BLOB_ENTER = 2;
const blobFront = { scale: 1.5, opacity: 0.65, filter: "blur(20px)", duration: 8, ease: "sine.inOut" };
const blobBack = { scale: 0.6, opacity: 0.25, filter: "blur(52px)", duration: 8, ease: "sine.inOut" };
function randomBlob(selector, frontOverrides, delay) {
const rand = (min, max) => gsap.utils.random(min, max);
const isMo = () => window.innerWidth <= 768;
function cycle() {
const xRange = isMo() ? 60 : 180;
const yRange = isMo() ? 140 : 100;
const x = rand(-xRange, xRange);
const y = rand(-yRange, yRange);
gsap.timeline()
.to(selector, { ...blobFront, ...frontOverrides, x, y })
.to(selector, { duration: 20 })
.to(selector, { ...blobBack, x: 0, y: 0 })
.call(cycle);
}
gsap.delayedCall(delay, cycle);
}
function morphBlob(selector, targetRadius, duration) {
gsap.to(selector, {
borderRadius: targetRadius,
duration,
repeat: -1,
yoyo: true,
ease: "sine.inOut",
});
}
export function initIntroAnimation() {
gsap.set([".blobCyan", ".blobPurple", ".blobBlue"], {
opacity: 0,
scale: 0.4,
filter: "blur(60px)",
});
gsap.to(".blobCyan", { opacity: 0.25, scale: 0.6, filter: "blur(50px)", duration: 1.6, ease: "power2.out" });
gsap.to(".blobPurple", { opacity: 0.2, scale: 0.6, filter: "blur(55px)", duration: 1.6, ease: "power2.out", delay: 0.35 });
gsap.to(".blobBlue", { opacity: 0.2, scale: 0.6, filter: "blur(55px)", duration: 1.6, ease: "power2.out", delay: 0.7 });
gsap.set(".intro__bg", { opacity: 0 });
gsap.to(".intro__bg", { opacity: 0.2, duration: 2, ease: "power1.out" });
// 텍스트 순차 등장
gsap.set([".intro__sub", ".intro__title"], { opacity: 0, y: 30 });
gsap.to(".intro__sub", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 1.0 });
gsap.to(".intro__title", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 1.3 });
randomBlob(".blobCyan", { opacity: 0.65, filter: "blur(20px)" }, BLOB_ENTER);
randomBlob(".blobPurple", { opacity: 0.55, filter: "blur(22px)" }, BLOB_ENTER + 6);
randomBlob(".blobBlue", { opacity: 0.55, filter: "blur(22px)" }, BLOB_ENTER + 12);
morphBlob(".blobCyan", "60% 40% 55% 45% / 45% 60% 40% 55%", 1.8);
morphBlob(".blobPurple", "45% 55% 40% 60% / 60% 40% 55% 45%", 2.4);
morphBlob(".blobBlue", "55% 45% 60% 40% / 40% 60% 45% 55%", 2.1);
}

260
src/scss/page/_contact.scss
View File

@ -1,109 +1,37 @@
@use "../base/variable" as *;
@use "../base/mixin" as *;
// Expertise
.expertise {
background: $color-bg;
padding: 100px 48px;
border-top: 1px solid rgba($color-white, 0.08);
}
.expertise__inner {
max-width: 1200px;
margin: 0 auto;
}
.expertise__desc {
margin-top: 20px;
margin-bottom: 64px;
font-size: 15px;
font-weight: 300;
color: rgba($color-white, 0.6);
}
.expertise__list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba($color-white, 0.12);
}
.expertise__item {
padding: 40px 32px 40px 0;
border-right: 1px solid rgba($color-white, 0.12);
&:last-child {
border-right: none;
}
}
.expertise__num {
display: block;
font-size: 12px;
font-weight: 400;
color: $color-cyan;
letter-spacing: 0.1em;
margin-bottom: 20px;
}
.expertise__name {
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 400;
color: $color-white;
margin-bottom: 16px;
line-height: 1.3;
}
.expertise__text {
font-size: 13px;
font-weight: 300;
line-height: 1.7;
color: rgba($color-white, 0.55);
}
// Contact
// 이 섹션만 Figma 디자인이 라이트 테마(흰 배경/검은 텍스트)임 — 다른 섹션과 색상 반전
.contact {
background: $color-bg;
background: $color-white;
display: flex;
flex-direction: column;
border-top: 1px solid rgba($color-white, 0.08);
border-top: 1px solid rgba($color-dark, 0.08);
}
.contact__inner {
display: flex;
align-items: stretch;
flex: 1;
min-height: 60vh;
max-width: 1200px;
margin: 0 auto;
width: 100%;
padding: 100px 48px 64px;
}
.contact__left {
display: flex;
flex-direction: column;
justify-content: center;
gap: 40px;
width: 50%;
padding: 80px 80px 80px 48px;
}
.contact__greeting {
font-family: $font-serif;
font-style: italic;
font-size: clamp(36px, 5vw, 72px);
font-weight: 400;
line-height: 1.1;
color: $color-white;
}
.contact__greetingBrand {
display: block;
font-size: clamp(16px, 1.5vw, 22px);
.contact__heading {
font-family: $기본글꼴;
font-style: normal;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: 8px;
color: $color-cyan;
font-size: clamp(28px, 3vw, 40px);
font-weight: 600;
letter-spacing: 0.02em;
color: $color-dark;
line-height: 1;
}
.contact__desc {
margin-top: 20px;
margin-bottom: 48px;
font-size: 15px;
font-weight: 300;
color: rgba($color-dark, 0.6);
}
.contact__label {
@ -111,34 +39,34 @@
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba($color-white, 0.5);
margin-bottom: 16px;
color: rgba($color-dark, 0.5);
margin-bottom: 20px;
}
.contact__infoList {
display: flex;
flex-direction: column;
gap: 16px;
flex-wrap: wrap;
gap: 48px;
}
.contact__infoItem {
display: flex;
flex-direction: column;
gap: 4px;
gap: 6px;
}
.contact__infoLabel {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
color: $color-cyan;
color: $color-blue;
}
.contact__infoValue {
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: rgba($color-white, 0.85);
color: rgba($color-dark, 0.85);
}
.contact__infoLink {
@ -150,30 +78,13 @@
}
}
.contact__right {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 48px 80px 0;
gap: 24px;
}
.contact__map {
width: 100%;
aspect-ratio: 4 / 3;
background: #1a1a1a url("../../images/map.svg") center / cover no-repeat;
border: 1px solid rgba($color-white, 0.1);
overflow: hidden;
}
// Contact accordion
.contactAccordion {
border-top: 1px solid rgba($color-white, 0.08);
border-top: 1px solid rgba($color-dark, 0.08);
}
.contactAccordion__item {
border-bottom: 1px solid rgba($color-white, 0.08);
border-bottom: 1px solid rgba($color-dark, 0.08);
}
.contactAccordion__header {
@ -185,7 +96,7 @@
background: none;
border: none;
cursor: pointer;
color: $color-white;
color: $color-dark;
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 400;
font-family: $기본글꼴;
@ -203,6 +114,7 @@
flex-shrink: 0;
transition: transform 0.3s ease;
object-fit: unset;
filter: invert(1);
}
.contactAccordion__item.isOpen .contactAccordion__icon {
@ -232,18 +144,24 @@
gap: 12px;
}
.contactForm__row {
.contactForm__cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.contactForm__fields {
display: flex;
flex-direction: column;
gap: 12px;
}
.contactForm__input,
.contactForm__textarea {
width: 100%;
background: rgba($color-white, 0.04);
border: 1px solid rgba($color-white, 0.1);
color: $color-white;
background: $color-white;
border: 1px solid rgba($color-dark, 0.2);
color: $color-dark;
font-family: $기본글꼴;
font-size: 14px;
font-weight: 300;
@ -252,16 +170,17 @@
transition: border-color 0.2s;
&::placeholder {
color: rgba($color-white, 0.35);
color: rgba($color-dark, 0.35);
}
&:focus {
border-color: rgba($color-white, 0.3);
border-color: rgba($color-dark, 0.4);
}
}
.contactForm__textarea {
resize: none;
height: 180px;
min-height: 180px;
height: 100%;
}
.contactForm__agree {
@ -275,7 +194,7 @@
cursor: pointer;
font-size: 13px;
font-weight: 300;
color: rgba($color-white, 0.6);
color: rgba($color-dark, 0.6);
}
.contactForm__checkboxInput {
@ -283,8 +202,8 @@
}
.contactForm__checkboxInput:checked + .contactForm__checkboxBox {
background: $color-cyan;
border-color: $color-cyan;
background: $color-blue;
border-color: $color-blue;
}
.contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
@ -292,15 +211,15 @@
display: block;
width: 10px;
height: 6px;
border-left: 1.5px solid $color-dark;
border-bottom: 1.5px solid $color-dark;
border-left: 1.5px solid $color-white;
border-bottom: 1.5px solid $color-white;
transform: rotate(-45deg) translateY(-2px);
}
.contactForm__checkboxBox {
width: 18px;
height: 18px;
border: 1px solid rgba($color-white, 0.3);
border: 1px solid rgba($color-dark, 0.3);
flex-shrink: 0;
display: flex;
align-items: center;
@ -318,10 +237,10 @@
.btnSend {
padding: 12px 48px;
background: $color-cyan;
background: $color-blue;
border: none;
border-radius: 100px;
color: $color-dark;
color: $color-white;
font-family: $기본글꼴;
font-size: 14px;
font-weight: 700;
@ -347,18 +266,18 @@
align-items: center;
gap: 8px;
padding: 10px 20px;
border: 1px solid rgba($color-white, 0.25);
border: 1px solid rgba($color-dark, 0.25);
border-radius: 100px;
font-size: 14px;
font-weight: 300;
color: $color-white;
color: $color-dark;
transition:
border-color 0.2s,
color 0.2s;
&:hover {
border-color: $color-cyan;
color: $color-cyan;
border-color: $color-blue;
color: $color-blue;
}
}
@ -370,7 +289,7 @@
// Footer
.footer {
border-top: 1px solid rgba($color-white, 0.08);
border-top: 1px solid rgba($color-dark, 0.08);
padding: 32px 48px;
}
@ -386,7 +305,7 @@
font-size: clamp(18px, 2vw, 28px);
font-weight: 700;
letter-spacing: 0.08em;
color: rgba($color-white, 0.4);
color: rgba($color-dark, 0.4);
line-height: 1.2;
text-transform: uppercase;
}
@ -394,71 +313,38 @@
.footer__contact {
font-size: 13px;
font-weight: 300;
color: rgba($color-white, 0.5);
color: rgba($color-dark, 0.5);
}
.footer__contactLink {
color: rgba($color-white, 0.5);
color: rgba($color-dark, 0.5);
transition: color 0.2s;
&:hover {
color: $color-white;
color: $color-dark;
}
}
.footer__copy {
font-size: 12px;
font-weight: 300;
color: rgba($color-white, 0.3);
color: rgba($color-dark, 0.3);
letter-spacing: 0.03em;
}
@include mo {
.expertise {
padding: 60px 24px;
.contact__inner {
padding: 60px 24px 40px;
}
.expertise__desc {
margin-bottom: 40px;
.contact__desc {
margin-bottom: 32px;
font-size: 14px;
}
.expertise__list {
grid-template-columns: 1fr 1fr;
}
.expertise__item {
padding: 28px 20px 28px 0;
&:last-child {
border-right: 1px solid rgba($color-white, 0.12);
}
&:nth-child(2),
&:nth-child(4) {
border-right: none;
}
&:nth-child(3),
&:nth-child(4) {
border-top: 1px solid rgba($color-white, 0.12);
}
}
.contact__inner {
.contact__infoList {
flex-direction: column;
min-height: unset;
}
.contact__left {
width: 100%;
padding: 60px 24px 40px;
gap: 32px;
}
.contact__right {
width: 100%;
padding: 0 24px 60px;
gap: 24px;
}
.contactAccordion__header {
@ -469,10 +355,14 @@
padding: 8px 24px 40px;
}
.contactForm__row {
.contactForm__cols {
grid-template-columns: 1fr;
}
.contactForm__textarea {
height: auto;
}
.careerTags {
padding: 8px 24px 40px;
}

60
src/scss/page/_intro.scss
View File

@ -11,44 +11,12 @@
background: $color-bg;
}
.intro__blobs {
.intro__bg {
position: absolute;
inset: 0;
background: url("../../images/bg_home.png") center / cover no-repeat;
opacity: 0.2;
pointer-events: none;
overflow: hidden;
.blob {
position: absolute;
border-radius: 50%;
opacity: 0;
transform: scale(0.4);
filter: blur(60px);
}
.blobCyan {
width: 20vw;
height: 20vw;
background: $color-cyan;
top: 50%;
right: 20%;
transform: translateY(-50%);
}
.blobPurple {
width: 14vw;
height: 14vw;
background: $color-purple;
top: 38%;
left: 46%;
}
.blobBlue {
width: 14vw;
height: 14vw;
background: $color-blue;
top: 42%;
left: 28%;
}
}
.intro__content {
@ -92,26 +60,4 @@
.gnb__mobileNav {
display: block;
}
.blobCyan {
width: 80vw;
height: 80vw;
right: -20%;
top: -5%;
}
.blobPurple {
width: 65vw;
height: 65vw;
left: -15%;
top: 38%;
transform: translateY(-50%);
}
.blobBlue {
width: 70vw;
height: 70vw;
right: -15%;
bottom: -5%;
}
}

6
src/scss/page/_projects.scss
View File

@ -34,19 +34,19 @@
.project__thumb {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #1a1a1a;
}
.project__thumbImg {
width: 100%;
height: 100%;
object-fit: cover;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.project__thumbEmpty {
aspect-ratio: 16 / 10;
background: #1a1a1a;
}