feat : 기업 소개 페이지 템플릿 추가

templates/company-home/src/index.html

@@ -0,0 +1,202 @@
+<!doctype html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>바탕 — 현장이 바탕이 되는 회사</title>
+  <meta name="description" content="운영, 디지털, 현장. 흩어진 일을 한 흐름으로 맞추는 바탕의 회사 소개.">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+  <header class="site-header">
+    <div class="wrap header-bar">
+      <a class="brand" href="#">바탕</a>
+      <nav class="site-nav">
+        <a href="#about">회사 소개</a>
+        <a href="#business">사업 영역</a>
+        <a href="#news">소식</a>
+        <a href="#careers">채용</a>
+        <a class="btn" href="#contact">문의하기</a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <section class="hero">
+      <img class="hero-photo" src="images/hero.png" alt="">
+      <div class="wrap hero-copy">
+        <span class="eyebrow">Since 2014</span>
+        <h1>흩어진 일을<br>한 흐름으로 잇습니다</h1>
+        <p>현장에서 쌓인 운영과 화면 위의 시스템을 같은 언어로 맞춥니다. 바탕은 그 사이를 메우는 회사입니다.</p>
+        <div class="hero-actions">
+          <a class="btn" href="#business">사업 영역 보기</a>
+          <a class="btn btn-ghost" href="#about">회사 소개</a>
+        </div>
+      </div>
+    </section>
+
+    <section class="stats">
+      <div class="wrap stats-row">
+        <div class="stat"><strong>12년</strong><span>함께 일한 해</span></div>
+        <div class="stat"><strong>86</strong><span>진행 중인 프로젝트</span></div>
+        <div class="stat"><strong>210</strong><span>구성원</span></div>
+        <div class="stat"><strong>14</strong><span>협력 도시</span></div>
+      </div>
+    </section>
+
+    <section class="section about" id="about">
+      <div class="wrap about-grid">
+        <div>
+          <h2>회사 소개</h2>
+          <p>바탕은 운영 컨설팅에서 시작해, 현장의 말이 시스템에 그대로 남도록 디지털과 실행을 한 팀에서 합니다.</p>
+          <p>기획만 넘기거나 화면만 만들지 않습니다. 돌아가는 날까지 같이 남습니다.</p>
+        </div>
+        <ol class="timeline">
+          <li><time>2014</time><span>바탕 설립. 유통 현장 운영 컨설팅으로 시작</span></li>
+          <li><time>2018</time><span>디지털 전환 팀을 내부에 둠</span></li>
+          <li><time>2021</time><span>물류·공공 현장 운영 사업 시작</span></li>
+          <li><time>2025</time><span>서울·부산 오피스, 구성원 200명 넘어섬</span></li>
+        </ol>
+      </div>
+    </section>
+
+    <section class="section business" id="business">
+      <div class="wrap">
+        <div class="section-head">
+          <div>
+            <h2>사업 영역</h2>
+            <p>한 프로젝트를 세 팀이 나눠 맡지 않습니다. 처음부터 같이 봅니다.</p>
+          </div>
+        </div>
+        <div class="biz-row">
+          <article class="biz">
+            <div class="thumb"><img src="images/biz-ops.png" alt=""></div>
+            <div class="biz-body">
+              <h3>운영 컨설팅</h3>
+              <p>재고, 교대, 점포 동선을 현장에서 다시 그립니다. 보고서로 끝나지 않고 한 달 뒤 숫자까지 봅니다.</p>
+            </div>
+          </article>
+          <article class="biz">
+            <div class="thumb"><img src="images/biz-digital.png" alt=""></div>
+            <div class="biz-body">
+              <h3>디지털 전환</h3>
+              <p>쓰는 사람이 아침에 켜는 화면을 만듭니다. 기존 시스템과 맞물리는 범위만 바꿉니다.</p>
+            </div>
+          </article>
+          <article class="biz">
+            <div class="thumb"><img src="images/biz-field.png" alt=""></div>
+            <div class="biz-body">
+              <h3>현장 운영</h3>
+              <p>물류 센터와 공공 창구에 사람을 붙입니다. 바쁜 시즌에는 바탕이 먼저 들어갑니다.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section news" id="news">
+      <div class="wrap">
+        <div class="section-head">
+          <div>
+            <h2>소식</h2>
+            <p>공지와 채용, 현장 이야기를 올립니다.</p>
+          </div>
+          <div class="filters" role="group" aria-label="소식 분류">
+            <button class="filter" type="button" data-filter="all" aria-pressed="true">전체</button>
+            <button class="filter" type="button" data-filter="notice" aria-pressed="false">공지</button>
+            <button class="filter" type="button" data-filter="story" aria-pressed="false">현장</button>
+            <button class="filter" type="button" data-filter="hire" aria-pressed="false">채용</button>
+          </div>
+        </div>
+
+        <div class="news-list">
+          <a class="news-item" href="#" data-category="notice">
+            <time datetime="2026-09-01">2026.09.01</time>
+            <span class="tag">공지</span>
+            <h3>추석 연휴 고객센터 운영 안내</h3>
+            <p>9월 14일부터 16일까지 긴급 연락망만 열어 둡니다.</p>
+          </a>
+          <a class="news-item" href="#" data-category="story">
+            <time datetime="2026-08-22">2026.08.22</time>
+            <span class="tag">현장</span>
+            <h3>부산 센터, 성수기 교대를 다시 짰습니다</h3>
+            <p>야간 대기 시간을 42분에서 18분으로 줄인 이야기를 남겼습니다.</p>
+          </a>
+          <a class="news-item" href="#" data-category="hire">
+            <time datetime="2026-08-11">2026.08.11</time>
+            <span class="tag">채용</span>
+            <h3>현장 매니저 · 프로덕트 디자이너 모집</h3>
+            <p>서울과 부산에서 같이 일할 사람을 찾습니다. 마감은 9월 30일입니다.</p>
+          </a>
+          <a class="news-item" href="#" data-category="notice">
+            <time datetime="2026-07-03">2026.07.03</time>
+            <span class="tag">공지</span>
+            <h3>개인정보처리방침을 개정했습니다</h3>
+            <p>보관 기간과 위탁 업체를 분명히 적었습니다.</p>
+          </a>
+        </div>
+        <p class="empty" hidden>이 분류에는 아직 올린 소식이 없습니다.</p>
+      </div>
+    </section>
+
+    <section class="section careers" id="careers">
+      <div class="wrap careers-grid">
+        <div class="thumb careers-photo"><img src="images/office.png" alt=""></div>
+        <div>
+          <h2>같이 남을 사람을 찾습니다</h2>
+          <p>한 주를 버티는 사람이 아니라, 다음 시즌을 같이 설계할 사람을 뽑습니다. 경력보다 현장에서 한 말을 어떻게 남겼는지를 먼저 봅니다.</p>
+          <ul class="roles">
+            <li>운영 컨설턴트 · 서울</li>
+            <li>현장 매니저 · 부산</li>
+            <li>프로덕트 디자이너 · 서울</li>
+          </ul>
+          <a class="btn" href="#contact">채용 문의</a>
+        </div>
+      </div>
+    </section>
+
+    <section class="section contact" id="contact">
+      <div class="wrap contact-grid">
+        <div>
+          <h2>문의</h2>
+          <p>프로젝트와 채용은 메일로 주시면 두 영업일 안에 답합니다.</p>
+          <dl class="info">
+            <div><dt>전화</dt><dd>02-0000-0000</dd></div>
+            <div><dt>이메일</dt><dd><a href="mailto:hello@example.com">hello@example.com</a></dd></div>
+            <div><dt>서울</dt><dd>서울특별시 어딘가 77, 8층</dd></div>
+            <div><dt>부산</dt><dd>부산광역시 어딘가 12, 3층</dd></div>
+          </dl>
+        </div>
+        <form class="inquiry" action="#" method="get">
+          <label>이름 <input name="name" type="text" autocomplete="name" required></label>
+          <label>이메일 <input name="email" type="email" autocomplete="email" required></label>
+          <label>내용 <textarea name="message" rows="5" required></textarea></label>
+          <button class="btn" type="submit">보내기</button>
+          <p class="form-note" hidden>이 페이지는 예시라 메일이 가지 않습니다. 문구만 바뀌었습니다.</p>
+        </form>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <div class="wrap">
+      <div class="footer-grid">
+        <div>
+          <p><strong>바탕 주식회사</strong></p>
+          <p>대표 정민재 · 사업자등록번호 000-00-00000</p>
+          <p>서울특별시 어딘가 77, 8층</p>
+        </div>
+        <div class="footer-links">
+          <a href="#">이용약관</a>
+          <a href="#">개인정보처리방침</a>
+          <a href="#">윤리경영</a>
+        </div>
+      </div>
+      <p class="copyright">© 2026 바탕. All rights reserved.</p>
+    </div>
+  </footer>
+
+  <script src="main.js"></script>
+</body>
+</html>

templates/company-home/src/main.js

@@ -0,0 +1,32 @@
+// 소식 분류 필터.
+// 카드에 data-category 만 맞추면 이 파일은 고치지 않아도 된다.
+const filters = document.querySelectorAll('.filter');
+const items = document.querySelectorAll('.news-item');
+const empty = document.querySelector('.empty');
+
+function apply(category) {
+  let shown = 0;
+  items.forEach((item) => {
+    const match = category === 'all' || item.dataset.category === category;
+    item.hidden = !match;
+    if (match) shown += 1;
+  });
+  if (empty) empty.hidden = shown > 0;
+}
+
+filters.forEach((button) => {
+  button.addEventListener('click', () => {
+    filters.forEach((other) => other.setAttribute('aria-pressed', String(other === button)));
+    apply(button.dataset.filter ?? 'all');
+  });
+});
+
+// 문의 폼은 예시라 서버로 보내지 않는다. 보낸 것처럼만 보여 준다.
+const form = document.querySelector('.inquiry');
+const note = document.querySelector('.form-note');
+
+form?.addEventListener('submit', (event) => {
+  event.preventDefault();
+  if (note) note.hidden = false;
+  form.reset();
+});