우아한테크코스 크루 관리 & 팀 매칭

☝🏼 개념 설명

코스 : 우아한테크코스는 프론트엔드 코스와 백엔드 코스로 구성되어있다.

크루 : 학생들은 크루라고 호칭한다.

미션 : 각 코스 별로 크루들이 진행할 미션이 있다.

: 미션마다 각 코스별 크루들로만 구성된 팀을 매칭할 수 있다.

이 앱은 코스별로 크루들을 관리하고, 코스별 미션마다 팀을 매칭한다.

🎯 기능 요구사항

1) 공통

상단에 메뉴가 존재하며 각 탭에 따라 적절한 기능을 수행한다.

  • 크루 관리 탭은 크루를 추가하거나 삭제하기 위한 기능을 수행한다.
  • 팀 매칭 관리 탭은 팀 매칭을 하기 위한 기능을 수행한다.
  • 다른 탭으로 이동했다 돌아와도 기존 탭의 상태가 유지되어야 한다.
  • localStorage를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.

2) 크루 관리 기능 탭

크루 관리 탭에서, 다음과 같은 규칙으로 크루를 추가하거나 삭제할 수 있다.

  • 코스별로 크루를 추가할 수 있다.
    • 동일한 이름의 크루는 추가할 수 없다.
    • 크루 이름은 최대 5글자까지 가능하다.
  • 코스별로 크루를 삭제할 수 있다.
    • 삭제할 때는 confirm을 사용하여, 사용자가 한번 더 확인할 수 있게 한다.
  • 크루 table의 첫번째 열에는 index를 넣어 순서를 표시한다. index는 '1'부터 시작한다.

3) 팀 매칭 관리 기능

팀 매칭 관리 탭에서, 다음과 같은 규칙으로 팀을 매칭할 수 있다.

  • '코스별' '미션'마다 '무작위로' 팀을 매칭할 수 있다.
    • 예를 들어 프론트엔드의 숫자 야구 게임 미션은 프론트엔드 크루들로만 무작위로 팀이 매칭되고, 백엔드의 숫자 야구 게임 미션은 백엔드 크루들로만 무작위로 팀이 매칭된다.
  • 팀 매칭 시 1팀당 인원 수 에 입력한 값 보다 더 적은 수의 크루들로 구성된 팀이 없어야 한다. 남은 인원은 앞 팀부터 순서대로 배정한다.
    • 예를 들어, 크루가 11명일 때 1팀당 인원 수로 3명을 입력 하면, 4 4 3으로 팀이 구성되어야 한다.
    • 팀은 재매칭할 수 있다.
  • 팀 매칭 결과는 프로그램 실행 결과 예시와 같이 쉼표로 구분한다.

💻 프로그램 실행 결과

1) 크루 관리

image

2) 팀 매칭 관리

image


✅ 프로그래밍 요구사항

마크업

  • 제공하는 아래의 마크업을 활용하여 프로그램을 구현한다.

크루 관리

<div id="app">
  <header>
    <h1>우테코 크루와 팀 매칭 관리 보드</h1>
    <nav>
      <ul>
        <li>
          <button>크루 관리</button>
        </li>
        <li>
          <button>팀 매칭 관리</button>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h3>크루를 관리할 코스를 선택해주세요</h3>
      <div>
        <input type="radio" name="course" value="frontend" />
        <label for="frontend">프론트엔드</label>
        <input type="radio" name="course" value="backend" />
        <label for="backend">백엔드</label>
      </div>
    </section>
    <section>
      <h3>프론트엔드 크루 관리</h3>
      <form>
        <label>크루 이름</label>
        <input type="text" />
        <button>확인</button>
      </form>
    </section>
    <section>
      <h3>프론트엔드 크루 목록</h3>
      <table border="1">
        <thead>
          <tr>
            <th></th>
            <th>크루</th>
            <th>관리</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td></td>
            <td>
              <button>삭제</button>
            </td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>
</div>

팀 매칭 관리

<div id="app">
  <header>
    <h1>우테코 크루와 팀 매칭 관리 보드</h1>
    <nav>
      <ul>
        <li>
          <button>크루 관리</button>
        </li>
        <li>
          <button>팀 매칭 관리</button>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h3>팀 매칭을 관리할 코스, 미션을 선택하세요.</h3>
      <form>
        <select>
          <option>프론트엔드</option>
          <option>백엔드</option>
        </select>
        <select>
          <option>숫자야구게임</option>
        </select>
        <button>확인</button>
      </form>
    </section>
    <section>
      <h3>프론트엔드 숫자야구게임 미션의 팀 매칭</h3>
      <div>
        <div>
          <p>아직 매칭된 팀이 없습니다. 팀을 매칭하겠습니까?</p>
          <form>
            <label>1팀당 인원 수</label>
            <input type="number" />
            <button>팀 매칭</button>
          </form>
        </div>
        <h4>크루 목록</h4>
        <ul>
          <li></li>
          <li>포코</li>
        </ul>
      </div>
    </section>
    <!-- 팀 매칭이 된 경우 -->
    <section>
      <h3>프론트엔드 숫자야구게임 조회</h3>
      <p>팀이 매칭되었습니다.</p>
      <ul>
        <li>준,포코</li>
      </ul>
      <p>
        팀을 재매칭 하시겠습니까?
        <button>재매칭</button>
      </p>
    </section>
  </main>
</div>

DOM 선택자

각 요소에 아래와 같은 선택자를 반드시 지정한다.

  • 크루 관리 버튼의 메뉴 id는 crew-tab이다.
  • 팀 관리 버튼의 메뉴 id는 team-tab이다.

크루 관리 탭

코스 선택 radio input

  • 프론트엔드 코스 선택 radio input의 id는 frontend-course이다.
  • 백엔드 코스 선택 radio input의 id는 backend-course이다.

크루 추가/삭제 button

  • 크루 이름을 입력하기 위한 input의 id는crew-name-input이다.
  • 크루 추가를 위한 확인 버튼의 id는 add-crew-buttton이다.
  • 크루 삭제를 위한 삭제 버튼의 class는 delete-crew-buttton이다.

크루 table

  • 크루 목록을 보여주기 위한 table의 id는 crew-table이다.

팀 매칭 관리 탭

  • 코스를 선택하는 select의 id는 course-select이다.
  • 미션을 선택하는 select의 id는 mission-select이다.
  • 미션에 해당하는 팀을 관리하기 위한 확인 버튼의 id는 show-team-matcher-button이다.
  • 팀 매칭을 위한 인원 입력 요소의 id는 team-member-count-input이다.
  • 팀 매칭을 위한 버튼의 id는 match-team-button이다.
  • 팀 매칭 결과를 보여주기 위한 ul의 id는 team-match-result이다.
  • 팀 재매칭을 위한 버튼의 id는 rematch-team-button이다.

📄 데이터

  • 팀 매칭을 위한 select option에 아래 데이터를 반드시 예시와 같이 괄호안에 있는 값을 option의 value로 추가해야 한다.
# 코스
- 프론트엔드(frontend)
- 백엔드(backend)

ex) <option value="frontend">프론트엔드</option>

# 미션
- 숫자야구게임(baseball)
- 자동차경주(racingcar)
- 로또(lotto)
- 장바구니(shopping-cart)
- 결제(payments)
- 지하철노선도(subway)
- 성능개선(performance)
- 배포(deploy)

ex) <option value="baseball">숫자야구게임</option>

라이브러리

  • 팀을 랜덤하게 매칭하는 기능은 MissionUtils 라이브러리Random.shuffle을 사용해 구현한다.
    • MissionUtils 라이브러리 스크립트는 index.html에 이미 포함되어 전역 객체에 추가되어 있으므로, 따로 import 하지 않아도 구현 코드 어디에서든 사용할 수 있다.

공통 요구사항

  • 스크립트 추가 외에 주어진 index.html파일은 수정할 수 없다.
    • 스타일(css)은 채점 요소가 아니다.
  • 모든 예외 발생 상황은 alert메서드를 이용하여 처리한다.
  • 외부 라이브러리(jQuery, Lodash 등)를 사용하지 않고, 순수 Vanilla JS로만 구현한다.
  • 자바스크립트 코드 컨벤션을 지키면서 프로그래밍 한다. 정답이 없으므로, 다양한 컨벤션을 비교해보며 스스로 더 적절해보이는 컨벤션을 자율적으로 선택한다.
  • indent(인덴트, 들여쓰기) depth를 3이 넘지 않도록 구현한다. 2까지만 허용한다.
    • 예를 들어 while문 안에 if문이 있으면 들여쓰기는 2이다.
    • 힌트: indent(인덴트, 들여쓰기) depth를 줄이는 좋은 방법은 함수(또는 메소드)를 분리하면 된다.
  • 함수(또는 메소드)가 한 가지 일만 하도록 최대한 작게 만들어라.
  • 변수 선언시 var 를 사용하지 않는다. constlet 을 사용한다.
  • import 문을 이용해 스크립트를 모듈화하고 불러올 수 있게 만든다.
  • 함수(또는 메소드)의 길이가 15라인을 넘어가지 않도록 구현한다.
    • 함수(또는 메소드)가 한 가지 일만 잘 하도록 구현한다.

📝 과제 진행 요구사항

✉️ 미션 제출 방법

  • 미션 구현을 완료한 후 GitHub을 통해 제출해야 한다.
  • GitHub에 미션을 제출한 후 우아한테크코스 지원 플랫폼 에 접속하여 프리코스 과제를 제출한다.
    • 자세한 방법은 링크 를 참고한다.
    • Pull Request만 보내고, 지원 플랫폼에서 과제를 제출하지 않으면 최종 제출하지 않은 것으로 처리되니 주의한다.

🚨 과제 제출 전 체크리스트 - 0점 방지를 위한 주의사항

  • 요구사항에 명시된 출력값 형식을 지키지 않을 경우 기능 구현을 모두 정상적으로 했더라도 0점으로 처리된다.
  • 기능 구현을 완료한 뒤 아래 가이드에 따라 테스트를 실행했을 때 모든 테스트가 성공하는 지 확인한다. 테스트가 실패할 경우 0점으로 처리되므로, 반드시 확인 후 제출한다.

✔️ 테스트 실행 가이드

  • 테스트 실행에 필요한 패키지 설치를 위해 Node.js 버전 14 이상이 필요하다.
  • 다음 명령어를 입력해 패키지를 설치한다.
// {폴더 경로}/javascript-teammatching-precourse/ 에서
npm install
  • 설치가 완료되었다면, 다음 명령어를 입력해 테스트를 실행한다.
// {폴더 경로}/javascript-teammatching-precourse/ 에서
npm run test
  • 아래와 같은 화면이 나오며 모든 테스트가 pass한다면 성공!

테스트 결과