From 7924041e84596cf8a0d9f04b929d87c342bcc43e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=9D=AC=EC=9B=90?= Date: Fri, 26 Jun 2026 13:23:22 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=AC=B8=EC=84=9C=EC=A0=95=EB=A6=AC,=20?= =?UTF-8?q?=EC=9D=BC=EB=B6=80=EC=8A=A4=ED=83=80=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/미완료.md | 4 ++++ src/scss/page/_contact.scss | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/doc/미완료.md b/doc/미완료.md index da8486d..18f2634 100644 --- a/doc/미완료.md +++ b/doc/미완료.md @@ -111,6 +111,10 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80 - **모바일 레이아웃 → 완료(2026-06-26)**. 사용자가 알려준 모바일 링크(`node-id 2319-2433`)로 확인 — 모바일 디자인엔 좌측 사진 영역이 원래 없고 타임라인만 존재. 기존 `.history__photo { display: none; }` 구현이 추측이 아니라 실제 디자인과 일치했음. +## CONTACT (Contact Us/Recruitment 너비·구분선) + +- **완료(2026-06-26)**. 사용자가 "선이 전체를 차지한다", "입력창 스타일이 디자인과 다르다"고 지적. 원인은 두 가지였음. (1) `.contactAccordion__header`에 `border-bottom`이 없어서 "Contact Us" 펼침 상태일 때 헤딩-폼 사이 구분선이 비어있었음(닫힌 Recruitment는 우연히 같은 위치에 `.contactAccordion__item`의 border-bottom이 겹쳐서 괜찮아 보였던 것) → `border-bottom: 1px solid rgba($color-dark,0.08)` 추가. (2) 더 큰 원인: `.contactAccordion`이 `.contact__inner`(max-width:1200px, margin:auto로 가운데 정렬)의 형제 요소라서 그 제한을 안 받고 뷰포트 전체 너비(패딩 48px만 제외)로 퍼져 있었음 — 와이드 화면(1440px+)에서 "WELCOME BODA LAB" 컬럼보다 Contact Us/입력폼/구분선이 훨씬 넓게 늘어나 보인 것. `.contactAccordion`에도 동일하게 `max-width:1200px; margin:0 auto; width:100%;`를 추가해서 헤딩 섹션과 같은 컬럼 너비로 정렬함. `npm run build` 통과, 1920px/모바일(390px) 스크린샷으로 Figma 렌더와 일치 확인. + ## HISTORY (좌측 사진 — 실제 에셋 교체) - **완료(2026-06-26)**. 사용자가 "배경이미지가 왜 이렇게 나와?"라고 지적(레이아웃 수정 후 사진 영역이 텍스처 없이 거의 단색 검정으로 보임). 원인 조사 중 `git log -p`로 확인해보니, 기존 `history-1.jpg`는 git 히스토리상 원래 3504×2336(코드 에디터 화면 사진)이었다가 `57aac80 fix: about`(2026-06-19) 커밋에서 완전히 다른 사진(손으로 폰 만지는 사진)으로 통째로 교체되면서 320×190(겨우 25KB)짜리 초소형 파일로 들어간 것 — "다운스케일 회귀"가 아니라 처음부터 이 레이아웃에 쓰기엔 너무 작은 placeholder였음. 세로로 긴 사진 칸(약 374×1800px)에 `object-fit: cover`로 늘리면서 ~10배 확대돼 뭉개진 단색처럼 보인 것. 사용자가 실제 Figma 에셋(나선형 건축물 텍스처, `unsplash_BSDebo0-UAo.png`, 919×1424)을 전달해줘서 `index.html`의 `` `src`를 교체하고 기존 `history-1.jpg`는 삭제함. `npm run build` 통과, PC/모바일 스크린샷으로 Figma 렌더와 일치 확인. diff --git a/src/scss/page/_contact.scss b/src/scss/page/_contact.scss index 97f71d6..df8597f 100644 --- a/src/scss/page/_contact.scss +++ b/src/scss/page/_contact.scss @@ -80,6 +80,9 @@ // Contact accordion .contactAccordion { + max-width: 1200px; + width: 100%; + margin: 0 auto; border-top: 1px solid rgba($color-dark, 0.08); } @@ -95,6 +98,7 @@ padding: 28px 48px; background: none; border: none; + border-bottom: 1px solid rgba($color-dark, 0.08); cursor: pointer; color: $color-dark; font-size: clamp(16px, 1.4vw, 20px);