🚀 221209: 다이나믹 라우팅 기능 추가, 클린 프론트엔드 페이지 추가

### 다이나믹 라우팅 기능 추가
* 문서의 파일구조와 templateKey를 통한 구분으로 페이지가 만들어지도록 수정

### 클린 프론트엔드 페이지 추가
* 다이나믹 라우팅 기능을 통해 코드투게더 관련 코스들의 페이지가 만들어지도록 개선

content/code-together/course/clean-frontend/curriculum_part1.mdx

@@ -0,0 +1,37 @@
+---
+path: code-together/course/clean-frontend
+templateKey: codeTogether_clean-frontend_part1
+index: 1
+tabName: 전체
+subjectList:
+  - name: "함수로 만드는 \n애플리케이션"
+    details:
+      - 함수 역할과 함수 나누기
+      - 고차함수
+      - 함수 합성
+      - 클로저, 커링
+      - immutable
+
+  - name: "객체로 만드는 \n애플리케이션"
+    details:
+      - class, prototype, this
+      - OOP, 상속
+      - 뷰-모델 바인딩
+
+  - name: 네트워크 통신 핸들링 (최적화와 에러처리)
+    details:
+      - 서버와 동기화
+      - 캐시
+      - 에러핸들링, 요청취소
+
+  - name: 리팩토링과 UI테스팅
+    details:
+      - "리팩토링과 vitest 기반 테스팅"
+
+masterInfoList:
+  - picture: crong
+    name: 크롱
+    position: Crong, 웹 프론트엔드 마스터
+    nutshell: "“복잡하고 다양한 프론트엔드개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. \n열정 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다”"
+    introduce: 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받았습니다.
+---

content/code-together/course/clean-frontend/interviews.mdx

@@ -0,0 +1,22 @@
+---
+path: code-together/course/clean-frontend
+templateKey: codeTogether_clean-frontend_reviews
+interviews:
+  - writerPhoto: ""
+    nutshell: "기본 원리를 생각하게 하는 과정"
+    content: 원리를 모르고 사용했던 기능들의 원리를 생각하고 구현해 볼 수 있는 좋은 시간이었습니다.
+    writer: ""
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: "동료와 함께 학습하며 부족함을 채워가는 과정"
+    content: 동료들과 함게 이야기하며 학습하는 것이 즐거웠습니다. 바닐라 자바스크립트로 프론트엔드 코드를 짜면서 저의 부족한 점도 알 수 있었어요.
+    writer: ""
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: "마스터의 코드 리뷰와 피드백"
+    content: 여러 프론트엔드 개발자를 만날 수 있어서 좋았고, 1:1 코드 리뷰와 피드백도 유익했습니다.
+    writer: ""
+    writerInfo: ""
+---

content/code-together/course/clean-frontend/masthead.mdx

@@ -0,0 +1,22 @@
+---
+path: code-together/course/clean-frontend
+templateKey: codeTogether_clean-frontend_masthead
+title: 클린 프론트엔드
+description: "클린 자바스크립트 개발 패턴을 익힙니다.\n다양한 웹 프론트엔드 지식을 바닐라 자바스크립트로 익혀\n 프론트엔드 프레임워크에 필요한 개념을 이해합니다."
+targets:
+  - "프론트엔드 주니어 개발자(1년차 ~ 3년차 수준)"
+  - "웹 프론트엔드 자바스크립트의 다양한 개발 패턴을 배우고 싶은 분"
+
+courseInfos:
+  - title: 4주
+    content: ""
+    img: calendar
+
+  - title: 매주 화•목, 오후 7시~10시
+    content: ""
+    img: clock
+
+  - title: 44만원
+    content: ""
+    img: coin
+---

content/code-together/course/clean-frontend/plan.mdx

@@ -0,0 +1,83 @@
+---
+path: code-together/course/clean-frontend
+templateKey: codeTogether_clean-frontend_plan
+tags:
+  - name: 스스로
+    color: "#FFF4B3"
+
+  - name: 그룹과
+    color: "#B4E791"
+
+  - name: 마스터와
+    color: "#C7E8EF"
+
+planList:
+  - name: 주간 목표 공유
+    description: 공개된 미션을 확인하고, 각자의 이번 주 학습 목표를 세워 동료들에게 공유합니다.
+    color: "#FFF4B3"
+
+  - name: 미션 수행
+    description: 주어진 학습 자료와 키워드를 바탕으로 미션을 수행합니다. 각자 학습하는 과정에서 동료들과 온라인으로 질문과 고민을 나눌 수 있습니다.
+    color: "#FFF4B3"
+
+  - name: 모각코(모여서 각자 코딩)
+    description: 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 서로의 코드를 보면서 피드백을 나누기도 하고, 궁금한 점을 공유하고 함께 해결해 볼 수 있습니다.
+    color: "#B4E791"
+
+  - name: 그룹 피어세션
+    description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
+    color: "#B4E791"
+
+  - name: 마스터 피드백
+    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민합니다. 마지막 주차에 1:1 코드리뷰를 받아볼 수 있습니다.
+    color: "#C7E8EF"
+---
+
+<table id="table">
+  <thead>
+    <tr>
+      <td></td>
+      <td>금</td>
+      <td>월</td>
+      <td>화</td>
+      <td>수</td>
+      <td>목</td>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>19:00</td>
+      <td>미션과 <br/>학습자료 공개</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>19:00 ~ 20:00</td>
+      <td rowspan="2" class="tag0">미션수행</td>
+      <td rowspan="3" class="tag0">미션수행</td>
+      <td class="tag1"><div>공통 피드백 확인 <br />및 중간 피어세션</div></td>
+      <td rowspan="3" class="tag0">미션수행</td>
+      <td class="tag1">최종 피어세션</td>
+    </tr>
+    <tr>
+      <td>20:00 ~ 21:00</td>
+      <td rowspan="2" class="tag1">모각코</td>
+      <td rowspan="2" class="tag2">마스터 피드백</td>
+    </tr>
+    <tr>
+      <td>21:00 ~ 22:00</td>
+      <td class="tag0">주간 목표 공유</td>
+    </tr>
+    <tr>
+      <td> ~ 24:00</td>
+      <td></td>
+      <td class="tag0">1차 PR 제출</td>
+      <td></td>
+      <td class="tag0">2차 PR 제출</td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>

content/code-together/course/clean-frontend/registrations.mdx

@@ -0,0 +1,9 @@
+---
+path: code-together/course/clean-frontend
+templateKey: codeTogether_clean-frontend_registrations
+registrations:
+  - title: "코드투게더 클린 프론트엔드 과정 대기자 신청하기"
+    description: ""
+    caption: "교육 기간: 2023년 1월~4월 사이"
+    path: "https://docs.google.com/forms/d/e/1FAIpQLSeMe3ql6Ifi9FpHy1yqSrasSq8lqgbhdEvrOhQEP6KB2kwTDA/viewform"
+---

content/javascript/curriculum_part1.mdx → content/code-together/course/javascript/curriculum_part1.mdx

@@ -1,4 +1,5 @@
 ---
+path: code-together/course/javascript
 templateKey: codeTogether_javascript_part1
 index: 1
 tabName: 파트 1
@@ -26,10 +27,10 @@ subjectList:
       - 객체 정의 및 접근
       - 객체를 활요한 프로그래밍 기초
 
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+masterInfoList:
+  - picture: crong
+    name: 크롱
+    position: Crong, 웹 프론트엔드 마스터
+    nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+    introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
 ---

content/code-together/course/javascript/curriculum_part2.mdx

@@ -0,0 +1,34 @@
+---
+path: code-together/course/javascript
+templateKey: codeTogether_javascript_part2
+index: 2
+tabName: 파트 2
+subjectList:
+  - name: 브라우저 웹 개발
+    details:
+      - 웹UI 동작 방식
+      - HTML을 활용한 구조 개발
+      - CSS를 활용한 스타일 개발
+
+  - name: 재귀
+    details:
+      - 재귀적인 사고를 통한 문제 해결
+      - 무한배열 분석
+
+  - name: 비동기 프로그래밍
+    details:
+      - 비동기와 동기의 차이
+      - 비동기 제어
+
+  - name: 웹 애플리케이션 개발
+    details:
+      - 자바스크립트 객체와 UI 개발
+      - 웹 애플리케이션 로직 개발
+
+masterInfoList:
+  - picture: crong
+    name: 크롱
+    position: Crong, 웹 프론트엔드 마스터
+    nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+    introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+---

content/javascript/interviews.mdx → content/code-together/course/javascript/interviews.mdx

@@ -1,4 +1,5 @@
 ---
+path: code-together/course/javascript
 templateKey: codeTogether_javascript_reviews
 interviews:
   - writerPhoto: ""

content/javascript/masthead.mdx → content/code-together/course/javascript/masthead.mdx

@@ -1,4 +1,5 @@
 ---
+path: code-together/course/javascript
 templateKey: codeTogether_javascript_masthead
 title: 자바스크립트
 description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."

content/javascript/plan.mdx → content/code-together/course/javascript/plan.mdx

@@ -1,4 +1,5 @@
 ---
+path: code-together/course/javascript
 templateKey: codeTogether_javascript_plan
 tags:
   - name: 스스로

content/javascript/registrations.mdx → content/code-together/course/javascript/registrations.mdx

@@ -1,4 +1,5 @@
 ---
+path: code-together/course/javascript
 templateKey: codeTogether_javascript_registrations
 registrations:
   - title: "코드투게더 자바스크립트 과정 대기자 신청하기"

content/code-together/courseList.mdx

@@ -3,9 +3,9 @@ templateKey: codeTogether_courses_list
 courses:
   - title: "자바스크립트 파트1•2"
     description: "프로그래밍 기초부터 간단한 웹 애플리케이션 개발까지 경험해보는"
-    path: "/code-together/javascript"
+    path: "/code-together/course/javascript"
 
   - title: "클린 프론트엔드"
     description: "프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 익혀보는"
-    path: "https://docs.google.com/forms/d/e/1FAIpQLSeMe3ql6Ifi9FpHy1yqSrasSq8lqgbhdEvrOhQEP6KB2kwTDA/viewform"
+    path: "/code-together/course/clean-frontend"
 ---

content/code-together/courses.mdx

@@ -5,15 +5,15 @@ courses:
     title: 자바스크립트
     cost: 300,000원
     img: mediumJavascript
-    path: /code-together/javascript
+    path: /code-together/course/javascript
     tags:
       - 대기자 모집 중
 
   - category: 프론트엔드
     title: 클린 프론트엔드
     cost: 440,000원
     img: mediumCleanFE
-    path: https://docs.google.com/forms/d/e/1FAIpQLSeMe3ql6Ifi9FpHy1yqSrasSq8lqgbhdEvrOhQEP6KB2kwTDA/viewform
+    path: /code-together/course/clean-frontend
     tags:
       - 대기자 모집 중
 

content/faq/lists.mdx

@@ -294,4 +294,67 @@ https://github.com/code-squad/test-item-pool/blob/master/level2-common/level2.md
     content: "[email protected] 로 이력서(자유 양식)를 보내주세요.\n
 지원 포지션에 따라 채용 절차는 다를 수 있습니다. 상세 내용은 채용 페이지를 확인해 주세요."
     editDate: "2022-06-14"        
+
+  - course: clean-frontend
+    category: 교육 과정
+    title: 클린 프론트엔드 과정은 1년에 몇 번 진행하나요?
+    content: 2023년 1월~4월 사이에 과정을 처음 오픈할 예정입니다. 이후 오픈 시기는 아직 미정입니다.
+    editDate: "2022-12-15"
+
+  - course: clean-frontend
+    category: 교육 과정
+    title: 과정은 온라인으로 진행되나요?
+    content: "네, 온라인 과정이며 줌과 슬랙을 활용합니다. \n
+다만 마지막 주차 중 하루는 오프라인(@코드스쿼드)에 모여 활동할 수 있습니다."
+    editDate: "2022-12-15"
+
+  - course: clean-frontend
+    category: 수강신청
+    title: 현재 재직 중이 아니라면 참여할 수 없나요?
+    content: 아니요, 교육 과정 대상자에 해당된다면 재직여부와 상관없이 참여할 수 있습니다.
+    editDate: "2022-12-15"
+
+  - course: clean-frontend
+    category: 수강신청
+    title: 코어타임에 함께할 수 없다면 신청할 수 없나요?
+    content: 코드투게더 과정은 동료, 마스터와 함께 학습하는 과정입니다. 모두의 학습과 성장을 위해 정해진 코어타임은 지켜주셔야 합니다.
+    editDate: "2022-12-15"
+
+  - course: clean-frontend
+    category: 수강신청
+    title: 과정을 어떻게 신청할 수 있나요?
+    content: "모집 시기가 되면 대기자 분들에게 메일로 수강신청 방법을 안내드리고 있습니다.\n
+그때 자세한 방법을 확인하실 수 있습니다."
+    editDate: "2022-12-15"
+
+  - course: clean-frontend
+    category: 수강신청
+    title: 별도의 선발 과정은 없나요?
+    content: 네, 없습니다. 다만 과정의 난이도가 중급이기 때문에 초보자는 신청이 어렵습니다.
+    editDate: "2022-12-15"
+
+  - course: clean-frontend
+    category: 교육 과정
+    title: 수강생은 총 몇 명인가요?
+    content: 약 20명의 수강생이 함께 학습합니다.
+    editDate: "2022-12-15"
+
+  - course: clean-frontend
+    category: 수강신청
+    title: 과정 중간에 빈자리가 생긴다면 등록할 수 있나요?
+    content: 아니요, 과정 특성상 중간에 합류하시는 것은 어렵습니다.
+    editDate: "2022-12-15"
+
+  - course: clean-frontend
+    category: 결제
+    title: 수강료 결제는 어떻게 하나요?
+    content: "수강료는 과정 시작 전에 결제합니다. 결제 방법은 과정에 신청하시면 자세히 안내받으실 수 있습니다.\n
+만약 재직 중인 회사에서 교육 비용을 지원해 주는 경우, 법인 카드로 결제 또는 비용 입금 후 세금계산서 발행이 가능합니다."
+    editDate: "2022-12-15"
+
+  - course: clean-frontend
+    category: 결제
+    title: 고용노동부에서 지원하는 재직자 교육 과정(내일배움카드교육 등)에 해당되나요?
+    content: 아니요, 해당되지 않습니다.
+    editDate: "2022-12-15"
 ---