48 lines
4.8 KiB
Markdown
48 lines
4.8 KiB
Markdown
# 동작(인터랙션) 주석 — `NEW` 섹션에 흩어져 있던 디자이너 노트
|
|
|
|
`Screen Pages` 캔버스의 `NEW` 섹션 안에는 `MAIN_NEW_PC` / `MAIN_NEW_MO` 프레임 외에도, 같은 레벨에 동작 스펙을 적은 TEXT 노드와 별도 모달/팝업 프레임이 형제로 놓여 있었다. 화면 자체(`01-home-pc.json` 등)만 봐서는 안 보이는 내용이라 따로 정리한다.
|
|
|
|
이 폴더의 13개 섹션 `.txt` 안에는 이런 주석이 **섞여 있지 않음**을 확인함 (`grep`으로 "노출/더보기/유효성/동의/인터렉션/참조/롤오버" 검색 — 매칭된 건 06-contact의 체크박스 라벨 텍스트("[필수] 개인정보 수집 및 이용 동의") 하나뿐이고, 이미 알고 있던 화면 텍스트임).
|
|
|
|
## 구현에 영향 있는 것
|
|
|
|
- **HISTORY 아코디언은 단일 열림(exclusive)** (`id 2319:2231`)
|
|
> 아코디언으로 구성. 해당 영역 진입 시 2025년도 히스토리 펼쳐진 상태가 디폴트. 다른 연도 + 버튼 선택 시 펼쳐 있던 영역 닫고 열기.
|
|
|
|
현재 `src/js/main.js`의 `.history__yearToggle` 클릭 핸들러는 클릭된 그룹만 토글하고 다른 그룹은 안 건드림 → 여러 연도를 동시에 열 수 있음. 스펙대로면 한 그룹을 열 때 다른 그룹은 닫혀야 함.
|
|
|
|
- **PROJECT 더보기 = 페이지네이션** (`id 2319:2116`, PROJECT 섹션 근처)
|
|
> 처음 10개 노출, 더보기 시 10개.
|
|
|
|
현재 `index.html`의 `.project__grid`는 전체 카드를 한번에 렌더링하고 `.btnMore`는 그냥 정적 버튼. 10개만 보이게 하고 클릭 시 10개씩 추가 노출하는 JS가 없음.
|
|
|
|
- **Recruitment 태그 더보기 = 페이지네이션** (`id 2319:5680`, mobile Expertise 근처)
|
|
> 처음 6개 노출, 더보기 시 6개.
|
|
|
|
`.careerTags`도 마찬가지로 전부 렌더링되어 있고 더보기 동작 없음.
|
|
|
|
- **개인정보 수집·이용 동의 모달** (`09-privacy-modal-pc.json` = node `2319:2118`, `09-privacy-modal-mobile.json` = node `2376:2184`)
|
|
PC/모바일 둘 다 `06_Expertise_popup`(또는 mobile `06_Expertise`) 프레임 안에 `MODAL` 자식으로 풀텍스트 약관 + "동의합니다" 버튼이 디자인되어 있음. 텍스트 내용(PC/모바일 동일):
|
|
> 1. 개인정보의 수집 및 이용 목적 — 회사는 고객 문의에 대한 답변 제공 및 원활한 의사소통 경로 확보를 목적으로 개인정보를 수집 및 이용합니다.
|
|
> 2. 수집하는 개인정보의 항목 — 필수항목: 회사명, 담당자 이름, 연락처, 이메일
|
|
> 3. 개인정보의 보유 및 이용 기간 — 원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기. 소비자 불만/분쟁처리 기록: 3년, 기타 문의사항: 처리완료 후 6개월(또는 1년).
|
|
> 4. 동의를 거부할 권리 및 동의 거부에 따른 불이익 — 거부 시 문의 접수 및 답변 서비스 이용이 제한될 수 있음.
|
|
|
|
현재 `_contact.scss`/`index.html`의 `.contactForm__checkbox`는 라벨 텍스트만 있고, 클릭 시 이 내용을 보여주는 모달이 없음.
|
|
|
|
- **SEND 버튼 유효성 검증** (`id 2319:5997`, Contact 영역 근처)
|
|
> SEND버튼 선택 시 입력 항목·개인정보 동의 필수 항목 유효성 체크. 미입력 항목 있을 경우 Alert "필수 항목을 확인해 주세요". 모두 완료 시 Alert "전송 완료".
|
|
|
|
현재 `main.js`에는 `.btnSend` 클릭 시 폼 검증/알럿 로직이 없음 (폼 자체도 실제 전송 엔드포인트가 없어 프론트만으로는 "전송 완료"가 무엇을 의미하는지도 확인 필요).
|
|
|
|
## 참고용, 영향 없음
|
|
|
|
- **footer 전용 노드 존재 확인** (`08-footer-instance-pc.json` = node `2247:2294`). 예전 기록("footer 전용 노드 없음")이 사실과 달랐음. 내용(THE BODA LAB / Mail·Tel / © 2026 BODA LAB) 확인해보니 현재 구현과 이미 일치 — 수정 불필요.
|
|
- **HISTORY 중복 프레임** (`10-history-duplicate-ref.json` = node `2301:1896`). 주석 옆에 참고용으로 복제해둔 사본으로 추정, 내용은 원본(`03-history-pc.json`)과 동일.
|
|
- **외부 레퍼런스 링크** (홈/ABOUT 인터랙션 참조용 외부 사이트, `id 2317:2106`/`2319:2110`/`2378:2292`) — 애니메이션 영감용 링크일 뿐 직접 가져올 사양은 아님.
|
|
- **"썸네일 롤오버시 크기 변화 효과"** (`id 2378:2293`) — 이미 `_project.scss`의 `.project__card:hover .project__thumbImg { transform: scale(1.04); }`로 구현되어 있음. 일치.
|
|
|
|
## 결론
|
|
|
|
스타일(폰트/색상/간격/보더)은 이제 거의 다 받았다고 봐도 되지만, **동작(behavior) 스펙은 이번에 처음 발견**했고 위 4가지(아코디언 단일열림, PROJECT/태그 더보기 페이지네이션, 개인정보 동의 모달, SEND 유효성 검증)는 아직 구현 안 됨. 구현 여부는 별도로 우선순위 정해서 진행.
|