팀플구함 — 공학관 3층 팀원 구함 게시판

기술 태그를 여러 개 골라 모두 가진 전단만 남기는 팀원 매칭 게시판. 0장이 되면 어느 태그를 빼야 하는지 세어서 알려 줍니다.

Quick Start

index.html 을 더블클릭하면 열립니다. 설치도 빌드도 필요 없습니다 — Node 도 npm 도 쓰지 않는 순수 HTML · CSS · JavaScript 입니다.

서버에 올릴 때는 폴더째 업로드하면 됩니다. 서비스 워커와 PWA 매니페스트는 http(s) 에서만 켜지므로, 로컬에서 파일로 열어도 콘솔에 오류가 나지 않습니다.

Folder Structure

stu-05-team-matching/
├── index.html              게시판 — 전단·쪽지 두 칸 · 태그 색인 · 서식
├── pages/                  나머지 모든 쪽
├── styles/                 tokens · base · components · sections · theme (순서 고정)
├── scripts/                main.js + logic/(순수 계산 · DOM 을 모른다)
├── assets/                 images · icons · fonts · data
├── contract/               백엔드 이관 계약 — 스키마 · 엔드포인트 · 컴포넌트 매핑
├── manifest.webmanifest    PWA
└── sw.js                   오프라인 캐시

Customize

Brand colors

styles/tokens.css 의 CSS 변수만 바꾸면 전체 색이 따라옵니다. styles/theme.css 상단 §1 에 이 템플릿의 팔레트와 대비 실측표가 있습니다. 색을 바꿀 때는 그 표의 수치를 다시 재세요 — 본문 4.5:1, 큰 글자 3:1 이 기준입니다.

Fonts

assets/fonts/fonts.css 에서 바꿉니다. 서체 파일은 전부 이 폴더에 들어 있고 외부 CDN 을 호출하지 않습니다.

Unique design

styles/theme.css 가 이 템플릿의 개성입니다. 왼쪽 구역 레일, 압정으로 붙인 전단 격자, 그리고 전단 칸과 쪽지 칸이 반대 방향으로 밀려드는 연출 (board-swap-slide)이 모두 여기 있고, 파일 안에 왜 그 값인지가 주석으로 적혀 있습니다.

Pages

전단과 태그를 고치는 법

전단 데이터는 두 곳에 있고 두 곳을 함께 고칩니다.

거르는 규칙(AND 조건 · 0장일 때 뺄 태그 셈 · 마감일 판정 · 태그 상한 · 연락 수단 표시)은 scripts/logic/match.js 한 파일에 있습니다. DOM 을 참조하지 않으므로 Node 에서 바로 돌려 볼 수 있습니다.

node -e "const m=require('./scripts/logic/match.js'); const r=m.selfTest(); \
  console.log(r.filter(t=>!t.pass).length===0 ? 'pass '+r.length+'/'+r.length : r.filter(t=>!t.pass))"
# pass 19/19

Browser Support

Chrome · Edge · Safari · Firefox 최신 2개 버전.

이 템플릿이 의존하는 것: CSS @layer · CSS 중첩 · CSS 논리 속성(inline-size · inset-inline) · CSS 커스텀 프로퍼티 · <dialog> + showModal()(전단 상세와 연락하기 두 개) · IntersectionObserver(진입 모션) · localStorage(색 모드 기억) · Service Worker(오프라인).

쓰지 않는 것 — 컨테이너 쿼리(@container), animation-timeline, backdrop-filter(글래스모피즘 선언 0), 외부 자바스크립트, 빌드 도구. color-mix() 는 이 템플릿의 저작 CSS(styles/theme.css)에는 없고, 함께 실린 공용 styles/tokens.css 가 파생 상태값을 만드는 데만 씁니다.

색 모드: 양쪽. OS 설정을 따르고, 제호의 버튼으로 바꾼 선택은 저장됩니다.

JavaScript 를 끄면: 전단과 쪽지가 전부 보이고 태그 색인의 수도 전체 기준의 참값이 그대로 적혀 있습니다. 전단 전문 · 서식 · 규칙 · 법적 문서도 전부 읽힙니다. 사라지는 것은 태그로 좁히는 것, 빼야 할 태그를 세는 것, 그리고 상세를 겹쳐 띄우는 것뿐입니다.

Accessibility

• 색 대비 — 본문 4.5:1 이상, 큰 글자 3:1 이상. 라이트와 다크 양쪽에서 쟀습니다 (실측)
• 터치 타깃 44×44px 이상, 인접 컨트롤은 간격까지 포함해 판정
• 키보드 — Tab 순서, <dialog> 의 기본 포커스 가둠, 본문 건너뛰기 링크
• prefers-reduced-motion · prefers-reduced-transparency · prefers-reduced-data 대응
• 이 템플릿에는 사진 도판이 없습니다(<img> 0개). 종이와 괘선과 여백으로만 짭니다 — 레이아웃 이동 0

Credits / License

서체와 이미지의 출처·라이선스는 CREDITS.md, 템플릿 자체의 이용 범위는 LICENSE.md 를 보세요.

이 압축 파일에 함께 들어온 것

템플릿 소스 외에 패키징 단계에서 넣은 파일입니다.

이 템플릿은 일부 과정에 AI 를 썼습니다. 코드와 카피는 사람이 검수했습니다.

Built with Sogorox Factory