From 45938be14280202778d7a286459c229b4d2f3df3 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 6 Dec 2022 19:01:07 +0900
Subject: [PATCH 01/53] =?UTF-8?q?update(gatsby-test):=20=EA=B2=BD=EB=A1=9C?=
 =?UTF-8?q?=EB=A5=BC=20=ED=86=B5=ED=95=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=A5=BC=20=EB=A7=8C=EB=93=9C=EB=8A=94=20=EB=8F=99=EC=9E=91=20?=
 =?UTF-8?q?gatsby-node=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=97=AC=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=EB=8A=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../clean-javascript/curriculum_part1.mdx     | 34 +++++++
 .../clean-javascript/curriculum_part2.mdx     | 32 +++++++
 .../course/clean-javascript/interviews.mdx    | 20 ++++
 .../course/clean-javascript/masthead.mdx      | 20 ++++
 .../course/clean-javascript/plan.mdx          | 91 +++++++++++++++++++
 .../course/clean-javascript/registrations.mdx |  7 ++
 .../course/clean-swift/curriculum_part1.mdx   | 34 +++++++
 .../course/clean-swift/curriculum_part2.mdx   | 32 +++++++
 .../course/clean-swift/interviews.mdx         | 20 ++++
 .../course/clean-swift/masthead.mdx           | 20 ++++
 .../code-together/course/clean-swift/plan.mdx | 91 +++++++++++++++++++
 .../course/clean-swift/registrations.mdx      |  7 ++
 .../course/javascript/curriculum_part1.mdx    | 34 +++++++
 .../course/javascript/curriculum_part2.mdx    | 32 +++++++
 .../course/javascript/interviews.mdx          | 20 ++++
 .../course/javascript/masthead.mdx            | 20 ++++
 .../code-together/course/javascript/plan.mdx  | 91 +++++++++++++++++++
 .../course/javascript/registrations.mdx       |  7 ++
 gatsby-node.ts                                | 13 +++
 19 files changed, 625 insertions(+)
 create mode 100644 content/code-together/course/clean-javascript/curriculum_part1.mdx
 create mode 100644 content/code-together/course/clean-javascript/curriculum_part2.mdx
 create mode 100644 content/code-together/course/clean-javascript/interviews.mdx
 create mode 100644 content/code-together/course/clean-javascript/masthead.mdx
 create mode 100644 content/code-together/course/clean-javascript/plan.mdx
 create mode 100644 content/code-together/course/clean-javascript/registrations.mdx
 create mode 100644 content/code-together/course/clean-swift/curriculum_part1.mdx
 create mode 100644 content/code-together/course/clean-swift/curriculum_part2.mdx
 create mode 100644 content/code-together/course/clean-swift/interviews.mdx
 create mode 100644 content/code-together/course/clean-swift/masthead.mdx
 create mode 100644 content/code-together/course/clean-swift/plan.mdx
 create mode 100644 content/code-together/course/clean-swift/registrations.mdx
 create mode 100644 content/code-together/course/javascript/curriculum_part1.mdx
 create mode 100644 content/code-together/course/javascript/curriculum_part2.mdx
 create mode 100644 content/code-together/course/javascript/interviews.mdx
 create mode 100644 content/code-together/course/javascript/masthead.mdx
 create mode 100644 content/code-together/course/javascript/plan.mdx
 create mode 100644 content/code-together/course/javascript/registrations.mdx
 create mode 100644 gatsby-node.ts

diff --git a/content/code-together/course/clean-javascript/curriculum_part1.mdx b/content/code-together/course/clean-javascript/curriculum_part1.mdx
new file mode 100644
index 00000000..0141ddfa
--- /dev/null
+++ b/content/code-together/course/clean-javascript/curriculum_part1.mdx
@@ -0,0 +1,34 @@
+---
+index: 1
+tabName: 파트 1
+subjectList:
+  - name: 개발 환경, 기본 연산과 조건문
+    details:
+      - vscode 기반 개발환경
+      - 정수/실수를 활용한 연산
+      - 변수를 활용한 복잡한 계산
+
+  - name: 함수
+    details:
+      - 함수 선언과 호출
+      - 연속된 함수 호출과 스택
+      - 변수의 유효범위
+
+  - name: 반복문과 배열
+    details:
+      - 문자열 기본과 반복문
+      - 배열 순회, 선언, 변경
+      - 고차함수
+
+  - name: 객체
+    details:
+      - 객체 정의 및 접근
+      - 객체를 활요한 프로그래밍 기초
+
+masterInfo:
+  avatar: mediumCrong
+  name: 크롱
+  position: Crong, 웹 프론트엔드 마스터
+  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+---
diff --git a/content/code-together/course/clean-javascript/curriculum_part2.mdx b/content/code-together/course/clean-javascript/curriculum_part2.mdx
new file mode 100644
index 00000000..8c8b8a2c
--- /dev/null
+++ b/content/code-together/course/clean-javascript/curriculum_part2.mdx
@@ -0,0 +1,32 @@
+---
+index: 2
+tabName: 파트 2
+subjectList:
+  - name: 브라우저 웹 개발
+    details:
+      - 웹UI 동작 방식
+      - HTML을 활용한 구조 개발
+      - CSS를 활용한 스타일 개발
+
+  - name: 재귀
+    details:
+      - 재귀적인 사고를 통한 문제 해결
+      - 무한배열 분석
+
+  - name: 비동기 프로그래밍
+    details:
+      - 비동기와 동기의 차이
+      - 비동기 제어
+
+  - name: 웹 애플리케이션 개발
+    details:
+      - 자바스크립트 객체와 UI 개발
+      - 웹 애플리케이션 로직 개발
+
+masterInfo:
+  avatar: mediumCrong
+  name: 크롱
+  position: Crong, 웹 프론트엔드 마스터
+  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+---
diff --git a/content/code-together/course/clean-javascript/interviews.mdx b/content/code-together/course/clean-javascript/interviews.mdx
new file mode 100644
index 00000000..a0fa385c
--- /dev/null
+++ b/content/code-together/course/clean-javascript/interviews.mdx
@@ -0,0 +1,20 @@
+---
+interviews:
+  - writerPhoto: ""
+    nutshell: 능동적인 학습을 이끌어주는 과정
+    content: 수동적으로 진도를 따라가는 것이 아니라 능동적으로 함께 학습할 수 있습니다. 그 과정을 통해 더욱 잘 이해할 수 있었고, 무엇보다 재미를 느낄 수 있었습니다.
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: 절대 까먹을 수 없는, 머리와 손이 기억하는 나의 코드들!
+    content: 배우고 돌아서면 까먹는 학습이 아닙니다. 주어진 미션을 함께 해나가는 과정을 통해 하나 하나 모두 내 것이 되는 과정입니다.
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: 왕초보도 학습 의지만 있다면!
+    content: 프로그래밍 학습 경험이 전혀 없는 왕초보일지라도, 학습 의지만 있다면 도전할 가치가 충분한 과정입니다. 프로그래밍 공부를 어떻게 시작할지 엄두가 나지 않아 망설이고 있다면 적극 추천합니다!
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+---
diff --git a/content/code-together/course/clean-javascript/masthead.mdx b/content/code-together/course/clean-javascript/masthead.mdx
new file mode 100644
index 00000000..01e3ed07
--- /dev/null
+++ b/content/code-together/course/clean-javascript/masthead.mdx
@@ -0,0 +1,20 @@
+---
+title: 자바스크립트
+description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."
+targets:
+  - "프로그래밍 기초를 제대로 학습하고 싶은 초보자"
+  - "풀타임 학습이 어려운 직장인, 대학생, 취업 준비생"
+  - "스스로, 또 함께 소프트웨어를 학습하며 성장하고 싶은 분"
+courseInfos:
+  - title: 파트 당 4주
+    content: 파트2 시작 전 1주 브레이크 기간 포함 총 9주
+    img: calendar
+
+  - title: 매주 월•화•수, 오후 7시~10시
+    content: ""
+    img: clock
+
+  - title: 파트 당 30만원
+    coreTime: 총 60만원
+    img: coin
+---
diff --git a/content/code-together/course/clean-javascript/plan.mdx b/content/code-together/course/clean-javascript/plan.mdx
new file mode 100644
index 00000000..b535eb9d
--- /dev/null
+++ b/content/code-together/course/clean-javascript/plan.mdx
@@ -0,0 +1,91 @@
+---
+tags:
+  - name: 스스로
+    color: "#FFF4B3"
+
+  - name: 그룹과
+    color: "#B4E791"
+
+  - name: 마스터와
+    color: "#C7E8EF"
+
+  - name: 모두 함께
+    color: "#FF9F92"
+
+planList:
+  - name: 데일리 스크럼
+    description: 그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.
+    color: "#B4E791"
+
+  - name: 모각코(모여서 각자 코딩)
+    description: 모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.
+    color: "#B4E791"
+
+  - name: 그룹 피어세션
+    description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
+    color: "#B4E791"
+
+  - name: 마스터 코드리뷰
+    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.
+    color: "#C7E8EF"
+---
+
+<table id="table">
+  <thead>
+    <tr>
+      <td></td>
+      <td>월</td>
+      <td>화</td>
+      <td>수</td>
+      <td>금</td>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>13:00</td>
+      <td colspan="2">미션과 VOD#1 공개</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>19:00</td>
+      <td colspan="3">체크인</td>
+      <td rowspan="3" class="tag3">
+        <div>커뮤니티 이벤트<br/>(2주차)</div>
+        <br/>
+        <div>마스터 특강<br/>(3주차)</div>
+      </td>
+    </tr>
+    <tr>
+      <td>19:00 ~ 19:30</td>
+      <td colspan="3" class="tag1">데일리 스크럼</td>
+    </tr>
+    <tr>
+      <td>19:30 ~ 20:30</td>
+      <td rowspan="3">
+        <div>집중 풀이 시간<br/>(모각코 / 2.5h)</div>
+        <br/>
+        <div>VOD#2 공개<br/>(20:30)</div>
+      </td>
+      <td colspan="2" class="tag1">그룹 피어세션</td>
+    </tr>
+    <tr>
+      <td>20:30 ~ 21:30</td>
+      <td rowspan="2"><div>집중 풀이 시간<br />(모각코 / 1.5h)</div><br/>
+        <div>VOD#2 공개<br/>(21:00)</div>
+      </td>
+      <td class="tag2">마스터 코드리뷰<br/>(Live)</td>
+      <td rowspan="3"></td>
+    </tr>
+    <tr>
+      <td>21:30 ~ 22:00</td>
+      <td class="tag0">주간 학습정리<br/>및 회고</td>
+    </tr>
+    <tr>
+      <td>22:00</td>
+      <td colspan="2">결과 제출, VOD#3 공개</td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/content/code-together/course/clean-javascript/registrations.mdx b/content/code-together/course/clean-javascript/registrations.mdx
new file mode 100644
index 00000000..bbe314f3
--- /dev/null
+++ b/content/code-together/course/clean-javascript/registrations.mdx
@@ -0,0 +1,7 @@
+---
+registrations:
+  - title: "코드투게더 자바스크립트 과정 대기자 신청하기"
+    description: ""
+    caption: "교육 기간: 미정"
+    path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform"
+---
diff --git a/content/code-together/course/clean-swift/curriculum_part1.mdx b/content/code-together/course/clean-swift/curriculum_part1.mdx
new file mode 100644
index 00000000..0141ddfa
--- /dev/null
+++ b/content/code-together/course/clean-swift/curriculum_part1.mdx
@@ -0,0 +1,34 @@
+---
+index: 1
+tabName: 파트 1
+subjectList:
+  - name: 개발 환경, 기본 연산과 조건문
+    details:
+      - vscode 기반 개발환경
+      - 정수/실수를 활용한 연산
+      - 변수를 활용한 복잡한 계산
+
+  - name: 함수
+    details:
+      - 함수 선언과 호출
+      - 연속된 함수 호출과 스택
+      - 변수의 유효범위
+
+  - name: 반복문과 배열
+    details:
+      - 문자열 기본과 반복문
+      - 배열 순회, 선언, 변경
+      - 고차함수
+
+  - name: 객체
+    details:
+      - 객체 정의 및 접근
+      - 객체를 활요한 프로그래밍 기초
+
+masterInfo:
+  avatar: mediumCrong
+  name: 크롱
+  position: Crong, 웹 프론트엔드 마스터
+  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+---
diff --git a/content/code-together/course/clean-swift/curriculum_part2.mdx b/content/code-together/course/clean-swift/curriculum_part2.mdx
new file mode 100644
index 00000000..8c8b8a2c
--- /dev/null
+++ b/content/code-together/course/clean-swift/curriculum_part2.mdx
@@ -0,0 +1,32 @@
+---
+index: 2
+tabName: 파트 2
+subjectList:
+  - name: 브라우저 웹 개발
+    details:
+      - 웹UI 동작 방식
+      - HTML을 활용한 구조 개발
+      - CSS를 활용한 스타일 개발
+
+  - name: 재귀
+    details:
+      - 재귀적인 사고를 통한 문제 해결
+      - 무한배열 분석
+
+  - name: 비동기 프로그래밍
+    details:
+      - 비동기와 동기의 차이
+      - 비동기 제어
+
+  - name: 웹 애플리케이션 개발
+    details:
+      - 자바스크립트 객체와 UI 개발
+      - 웹 애플리케이션 로직 개발
+
+masterInfo:
+  avatar: mediumCrong
+  name: 크롱
+  position: Crong, 웹 프론트엔드 마스터
+  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+---
diff --git a/content/code-together/course/clean-swift/interviews.mdx b/content/code-together/course/clean-swift/interviews.mdx
new file mode 100644
index 00000000..a0fa385c
--- /dev/null
+++ b/content/code-together/course/clean-swift/interviews.mdx
@@ -0,0 +1,20 @@
+---
+interviews:
+  - writerPhoto: ""
+    nutshell: 능동적인 학습을 이끌어주는 과정
+    content: 수동적으로 진도를 따라가는 것이 아니라 능동적으로 함께 학습할 수 있습니다. 그 과정을 통해 더욱 잘 이해할 수 있었고, 무엇보다 재미를 느낄 수 있었습니다.
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: 절대 까먹을 수 없는, 머리와 손이 기억하는 나의 코드들!
+    content: 배우고 돌아서면 까먹는 학습이 아닙니다. 주어진 미션을 함께 해나가는 과정을 통해 하나 하나 모두 내 것이 되는 과정입니다.
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: 왕초보도 학습 의지만 있다면!
+    content: 프로그래밍 학습 경험이 전혀 없는 왕초보일지라도, 학습 의지만 있다면 도전할 가치가 충분한 과정입니다. 프로그래밍 공부를 어떻게 시작할지 엄두가 나지 않아 망설이고 있다면 적극 추천합니다!
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+---
diff --git a/content/code-together/course/clean-swift/masthead.mdx b/content/code-together/course/clean-swift/masthead.mdx
new file mode 100644
index 00000000..01e3ed07
--- /dev/null
+++ b/content/code-together/course/clean-swift/masthead.mdx
@@ -0,0 +1,20 @@
+---
+title: 자바스크립트
+description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."
+targets:
+  - "프로그래밍 기초를 제대로 학습하고 싶은 초보자"
+  - "풀타임 학습이 어려운 직장인, 대학생, 취업 준비생"
+  - "스스로, 또 함께 소프트웨어를 학습하며 성장하고 싶은 분"
+courseInfos:
+  - title: 파트 당 4주
+    content: 파트2 시작 전 1주 브레이크 기간 포함 총 9주
+    img: calendar
+
+  - title: 매주 월•화•수, 오후 7시~10시
+    content: ""
+    img: clock
+
+  - title: 파트 당 30만원
+    coreTime: 총 60만원
+    img: coin
+---
diff --git a/content/code-together/course/clean-swift/plan.mdx b/content/code-together/course/clean-swift/plan.mdx
new file mode 100644
index 00000000..b535eb9d
--- /dev/null
+++ b/content/code-together/course/clean-swift/plan.mdx
@@ -0,0 +1,91 @@
+---
+tags:
+  - name: 스스로
+    color: "#FFF4B3"
+
+  - name: 그룹과
+    color: "#B4E791"
+
+  - name: 마스터와
+    color: "#C7E8EF"
+
+  - name: 모두 함께
+    color: "#FF9F92"
+
+planList:
+  - name: 데일리 스크럼
+    description: 그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.
+    color: "#B4E791"
+
+  - name: 모각코(모여서 각자 코딩)
+    description: 모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.
+    color: "#B4E791"
+
+  - name: 그룹 피어세션
+    description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
+    color: "#B4E791"
+
+  - name: 마스터 코드리뷰
+    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.
+    color: "#C7E8EF"
+---
+
+<table id="table">
+  <thead>
+    <tr>
+      <td></td>
+      <td>월</td>
+      <td>화</td>
+      <td>수</td>
+      <td>금</td>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>13:00</td>
+      <td colspan="2">미션과 VOD#1 공개</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>19:00</td>
+      <td colspan="3">체크인</td>
+      <td rowspan="3" class="tag3">
+        <div>커뮤니티 이벤트<br/>(2주차)</div>
+        <br/>
+        <div>마스터 특강<br/>(3주차)</div>
+      </td>
+    </tr>
+    <tr>
+      <td>19:00 ~ 19:30</td>
+      <td colspan="3" class="tag1">데일리 스크럼</td>
+    </tr>
+    <tr>
+      <td>19:30 ~ 20:30</td>
+      <td rowspan="3">
+        <div>집중 풀이 시간<br/>(모각코 / 2.5h)</div>
+        <br/>
+        <div>VOD#2 공개<br/>(20:30)</div>
+      </td>
+      <td colspan="2" class="tag1">그룹 피어세션</td>
+    </tr>
+    <tr>
+      <td>20:30 ~ 21:30</td>
+      <td rowspan="2"><div>집중 풀이 시간<br />(모각코 / 1.5h)</div><br/>
+        <div>VOD#2 공개<br/>(21:00)</div>
+      </td>
+      <td class="tag2">마스터 코드리뷰<br/>(Live)</td>
+      <td rowspan="3"></td>
+    </tr>
+    <tr>
+      <td>21:30 ~ 22:00</td>
+      <td class="tag0">주간 학습정리<br/>및 회고</td>
+    </tr>
+    <tr>
+      <td>22:00</td>
+      <td colspan="2">결과 제출, VOD#3 공개</td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/content/code-together/course/clean-swift/registrations.mdx b/content/code-together/course/clean-swift/registrations.mdx
new file mode 100644
index 00000000..bbe314f3
--- /dev/null
+++ b/content/code-together/course/clean-swift/registrations.mdx
@@ -0,0 +1,7 @@
+---
+registrations:
+  - title: "코드투게더 자바스크립트 과정 대기자 신청하기"
+    description: ""
+    caption: "교육 기간: 미정"
+    path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform"
+---
diff --git a/content/code-together/course/javascript/curriculum_part1.mdx b/content/code-together/course/javascript/curriculum_part1.mdx
new file mode 100644
index 00000000..0141ddfa
--- /dev/null
+++ b/content/code-together/course/javascript/curriculum_part1.mdx
@@ -0,0 +1,34 @@
+---
+index: 1
+tabName: 파트 1
+subjectList:
+  - name: 개발 환경, 기본 연산과 조건문
+    details:
+      - vscode 기반 개발환경
+      - 정수/실수를 활용한 연산
+      - 변수를 활용한 복잡한 계산
+
+  - name: 함수
+    details:
+      - 함수 선언과 호출
+      - 연속된 함수 호출과 스택
+      - 변수의 유효범위
+
+  - name: 반복문과 배열
+    details:
+      - 문자열 기본과 반복문
+      - 배열 순회, 선언, 변경
+      - 고차함수
+
+  - name: 객체
+    details:
+      - 객체 정의 및 접근
+      - 객체를 활요한 프로그래밍 기초
+
+masterInfo:
+  avatar: mediumCrong
+  name: 크롱
+  position: Crong, 웹 프론트엔드 마스터
+  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+---
diff --git a/content/code-together/course/javascript/curriculum_part2.mdx b/content/code-together/course/javascript/curriculum_part2.mdx
new file mode 100644
index 00000000..8c8b8a2c
--- /dev/null
+++ b/content/code-together/course/javascript/curriculum_part2.mdx
@@ -0,0 +1,32 @@
+---
+index: 2
+tabName: 파트 2
+subjectList:
+  - name: 브라우저 웹 개발
+    details:
+      - 웹UI 동작 방식
+      - HTML을 활용한 구조 개발
+      - CSS를 활용한 스타일 개발
+
+  - name: 재귀
+    details:
+      - 재귀적인 사고를 통한 문제 해결
+      - 무한배열 분석
+
+  - name: 비동기 프로그래밍
+    details:
+      - 비동기와 동기의 차이
+      - 비동기 제어
+
+  - name: 웹 애플리케이션 개발
+    details:
+      - 자바스크립트 객체와 UI 개발
+      - 웹 애플리케이션 로직 개발
+
+masterInfo:
+  avatar: mediumCrong
+  name: 크롱
+  position: Crong, 웹 프론트엔드 마스터
+  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+---
diff --git a/content/code-together/course/javascript/interviews.mdx b/content/code-together/course/javascript/interviews.mdx
new file mode 100644
index 00000000..a0fa385c
--- /dev/null
+++ b/content/code-together/course/javascript/interviews.mdx
@@ -0,0 +1,20 @@
+---
+interviews:
+  - writerPhoto: ""
+    nutshell: 능동적인 학습을 이끌어주는 과정
+    content: 수동적으로 진도를 따라가는 것이 아니라 능동적으로 함께 학습할 수 있습니다. 그 과정을 통해 더욱 잘 이해할 수 있었고, 무엇보다 재미를 느낄 수 있었습니다.
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: 절대 까먹을 수 없는, 머리와 손이 기억하는 나의 코드들!
+    content: 배우고 돌아서면 까먹는 학습이 아닙니다. 주어진 미션을 함께 해나가는 과정을 통해 하나 하나 모두 내 것이 되는 과정입니다.
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: 왕초보도 학습 의지만 있다면!
+    content: 프로그래밍 학습 경험이 전혀 없는 왕초보일지라도, 학습 의지만 있다면 도전할 가치가 충분한 과정입니다. 프로그래밍 공부를 어떻게 시작할지 엄두가 나지 않아 망설이고 있다면 적극 추천합니다!
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+---
diff --git a/content/code-together/course/javascript/masthead.mdx b/content/code-together/course/javascript/masthead.mdx
new file mode 100644
index 00000000..01e3ed07
--- /dev/null
+++ b/content/code-together/course/javascript/masthead.mdx
@@ -0,0 +1,20 @@
+---
+title: 자바스크립트
+description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."
+targets:
+  - "프로그래밍 기초를 제대로 학습하고 싶은 초보자"
+  - "풀타임 학습이 어려운 직장인, 대학생, 취업 준비생"
+  - "스스로, 또 함께 소프트웨어를 학습하며 성장하고 싶은 분"
+courseInfos:
+  - title: 파트 당 4주
+    content: 파트2 시작 전 1주 브레이크 기간 포함 총 9주
+    img: calendar
+
+  - title: 매주 월•화•수, 오후 7시~10시
+    content: ""
+    img: clock
+
+  - title: 파트 당 30만원
+    coreTime: 총 60만원
+    img: coin
+---
diff --git a/content/code-together/course/javascript/plan.mdx b/content/code-together/course/javascript/plan.mdx
new file mode 100644
index 00000000..b535eb9d
--- /dev/null
+++ b/content/code-together/course/javascript/plan.mdx
@@ -0,0 +1,91 @@
+---
+tags:
+  - name: 스스로
+    color: "#FFF4B3"
+
+  - name: 그룹과
+    color: "#B4E791"
+
+  - name: 마스터와
+    color: "#C7E8EF"
+
+  - name: 모두 함께
+    color: "#FF9F92"
+
+planList:
+  - name: 데일리 스크럼
+    description: 그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.
+    color: "#B4E791"
+
+  - name: 모각코(모여서 각자 코딩)
+    description: 모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.
+    color: "#B4E791"
+
+  - name: 그룹 피어세션
+    description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
+    color: "#B4E791"
+
+  - name: 마스터 코드리뷰
+    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.
+    color: "#C7E8EF"
+---
+
+<table id="table">
+  <thead>
+    <tr>
+      <td></td>
+      <td>월</td>
+      <td>화</td>
+      <td>수</td>
+      <td>금</td>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>13:00</td>
+      <td colspan="2">미션과 VOD#1 공개</td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>19:00</td>
+      <td colspan="3">체크인</td>
+      <td rowspan="3" class="tag3">
+        <div>커뮤니티 이벤트<br/>(2주차)</div>
+        <br/>
+        <div>마스터 특강<br/>(3주차)</div>
+      </td>
+    </tr>
+    <tr>
+      <td>19:00 ~ 19:30</td>
+      <td colspan="3" class="tag1">데일리 스크럼</td>
+    </tr>
+    <tr>
+      <td>19:30 ~ 20:30</td>
+      <td rowspan="3">
+        <div>집중 풀이 시간<br/>(모각코 / 2.5h)</div>
+        <br/>
+        <div>VOD#2 공개<br/>(20:30)</div>
+      </td>
+      <td colspan="2" class="tag1">그룹 피어세션</td>
+    </tr>
+    <tr>
+      <td>20:30 ~ 21:30</td>
+      <td rowspan="2"><div>집중 풀이 시간<br />(모각코 / 1.5h)</div><br/>
+        <div>VOD#2 공개<br/>(21:00)</div>
+      </td>
+      <td class="tag2">마스터 코드리뷰<br/>(Live)</td>
+      <td rowspan="3"></td>
+    </tr>
+    <tr>
+      <td>21:30 ~ 22:00</td>
+      <td class="tag0">주간 학습정리<br/>및 회고</td>
+    </tr>
+    <tr>
+      <td>22:00</td>
+      <td colspan="2">결과 제출, VOD#3 공개</td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>
diff --git a/content/code-together/course/javascript/registrations.mdx b/content/code-together/course/javascript/registrations.mdx
new file mode 100644
index 00000000..bbe314f3
--- /dev/null
+++ b/content/code-together/course/javascript/registrations.mdx
@@ -0,0 +1,7 @@
+---
+registrations:
+  - title: "코드투게더 자바스크립트 과정 대기자 신청하기"
+    description: ""
+    caption: "교육 기간: 미정"
+    path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform"
+---
diff --git a/gatsby-node.ts b/gatsby-node.ts
new file mode 100644
index 00000000..b425d934
--- /dev/null
+++ b/gatsby-node.ts
@@ -0,0 +1,13 @@
+exports.createPages = async ({ graphql, actions }) => {
+  const { data } = await graphql(`
+    query slug {
+      allMdx {
+        nodes {
+          slug
+        }
+      }
+    }
+  `);
+
+  console.log(data.allMdx.nodes.filter((v) => v.slug.match("code-together/course/")));
+};

From 341f6ce332c8b87279c1ac56f5cfd35b0e698623 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 15:56:05 +0900
Subject: [PATCH 02/53] =?UTF-8?q?:zap:=20=EB=94=94=ED=85=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=BB=A4=EB=A6=AC=ED=81=98=EB=9F=BC=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

이미지 수정, mdx문서 이미지에 맞게 수정, 쿼리 수정
---
 content/masters/curriculum_android.mdx        | 12 +++++-----
 content/masters/curriculum_back.mdx           | 12 +++++-----
 content/masters/curriculum_front.mdx          | 12 +++++-----
 content/masters/curriculum_ios.mdx            | 12 +++++-----
 .../Curriculum/Curriculum.tsx                 |  6 +++--
 .../Curriculum/MasterInfo/MasterInfo.tsx      | 22 +++++--------------
 .../DetailCurriculum/DetailCurriculum.tsx     |  4 ++--
 7 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/content/masters/curriculum_android.mdx b/content/masters/curriculum_android.mdx
index 74529cf4..2a0faa69 100644
--- a/content/masters/curriculum_android.mdx
+++ b/content/masters/curriculum_android.mdx
@@ -34,10 +34,10 @@ curriculum:
       - name: 이슈 관리 서비스
         detail: Jetpack Compose, Broadcast, Notification
 
-masterInfo:
-  avatar: mediumIvy
-  name: 아이비
-  position: Ivy, 모바일 안드로이드 마스터
-  nutshell: "안드로이드 앱 개발을 여러가지 미션과 프로젝트와 함께 시작해보아요! ”"
-  introduce: 마스터의 피드백과 협업 경험을 함께 얻을 수 있습니다.
+masterInfoList:
+  - picture: ivy
+    name: 아이비
+    position: Ivy, 모바일 안드로이드 마스터
+    nutshell: "안드로이드 앱 개발을 여러가지 미션과 프로젝트와 함께 시작해보아요! ”"
+    introduce: 마스터의 피드백과 협업 경험을 함께 얻을 수 있습니다.
 ---
diff --git a/content/masters/curriculum_back.mdx b/content/masters/curriculum_back.mdx
index 800781d7..a370109e 100644
--- a/content/masters/curriculum_back.mdx
+++ b/content/masters/curriculum_back.mdx
@@ -31,10 +31,10 @@ curriculum:
       - name: 이슈 관리 서비스
         detail: 도커와 컨테이너, 서버 모니터링 및 성능 분석
 
-masterInfo:
-  avatar: mediumHonux
-  name: 호눅스
-  position: Honux, 웹 백엔드 마스터
-  nutshell: '"서버 인프라 뿐만 아니라 사람과도 협업을 하며 성장하는 방법을 배웁니다"'
-  introduce: 자바, 스프링, 데이터베이스,HTTP, 클라우드도 배우지만 함께 배우고, 함께 자라는 법도 익힙니다.
+masterInfoList:
+  - picture: honux
+    name: 호눅스
+    position: Honux, 웹 백엔드 마스터
+    nutshell: '"서버 인프라 뿐만 아니라 사람과도 협업을 하며 성장하는 방법을 배웁니다"'
+    introduce: 자바, 스프링, 데이터베이스,HTTP, 클라우드도 배우지만 함께 배우고, 함께 자라는 법도 익힙니다.
 ---
diff --git a/content/masters/curriculum_front.mdx b/content/masters/curriculum_front.mdx
index ec2c3643..2dbac264 100644
--- a/content/masters/curriculum_front.mdx
+++ b/content/masters/curriculum_front.mdx
@@ -43,10 +43,10 @@ curriculum:
       - name: 이슈 관리 서비스
         detail: 컴포넌트 기반 개발, 스토리 북, 최적화, 테스팅
 
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: '"바닐라JS에서 프레임웍까지 프론트엔드 최고의 커리큘럼으로 배우세요"'
-  introduce: 바닐라JS를 좋아하고, UX향상에 도움이 되는 개발 방법에 관심이 많아요
+masterInfoList:
+  - picture: crong
+    name: 크롱
+    position: Crong, 웹 프론트엔드 마스터
+    nutshell: '"바닐라JS에서 프레임웍까지 프론트엔드 최고의 커리큘럼으로 배우세요"'
+    introduce: 바닐라JS를 좋아하고, UX향상에 도움이 되는 개발 방법에 관심이 많아요
 ---
diff --git a/content/masters/curriculum_ios.mdx b/content/masters/curriculum_ios.mdx
index 4f7916f2..49172f4e 100644
--- a/content/masters/curriculum_ios.mdx
+++ b/content/masters/curriculum_ios.mdx
@@ -34,10 +34,10 @@ curriculum:
       - name: 이슈 관리 서비스
         detail: 코어 ML, 뷰렌더링 원리
 
-masterInfo:
-  avatar: mediumJk
-  name: JK
-  position: 제이케이, 모바일 iOS 마스터
-  nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”"
-  introduce: 매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.
+masterInfoList:
+  - picture: jk
+    name: JK
+    position: 제이케이, 모바일 iOS 마스터
+    nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”"
+    introduce: 매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.
 ---
diff --git a/src/pageComponents/masters/DetailCurriculum/Curriculum/Curriculum.tsx b/src/pageComponents/masters/DetailCurriculum/Curriculum/Curriculum.tsx
index 4cbe3ce2..20a0c5e7 100644
--- a/src/pageComponents/masters/DetailCurriculum/Curriculum/Curriculum.tsx
+++ b/src/pageComponents/masters/DetailCurriculum/Curriculum/Curriculum.tsx
@@ -11,7 +11,7 @@ import { useResponsive } from "lib/hooks";
 
 const Curriculum: React.FC<{ curriculumInfo: CurriculumType }> = ({ curriculumInfo }) => {
   const { isMobile } = useResponsive();
-  const { curriculum, masterInfo } = curriculumInfo;
+  const { curriculum, masterInfoList } = curriculumInfo;
 
   return (
     <CurriculumWrapper>
@@ -36,7 +36,9 @@ const Curriculum: React.FC<{ curriculumInfo: CurriculumType }> = ({ curriculumIn
             <DivideLine />
           </li>
         ))}
-        <MasterInfo {...{ masterInfo }} />
+        {masterInfoList.map((masterInfo) => (
+          <MasterInfo {...{ masterInfo }} />
+        ))}
       </CurriculumList>
     </CurriculumWrapper>
   );
diff --git a/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
index b630e933..d68c0c38 100644
--- a/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
+++ b/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
@@ -5,33 +5,23 @@ import { Typography } from "typography";
 // Components
 import { Avatar } from "components";
 // Assets
-import avatars from "assets/img/avatars";
+import pictures from "assets/img/picture";
 // Libs
 import { useResponsive } from "lib/hooks";
+import { MasterInfoType } from "@type/Master";
 
-type mastersInfo = {
-  avatar: keyof typeof avatars;
-  name: string;
-  position: string;
-  introduce: string;
-  nutshell: string;
-};
-interface IMasterInfo {
-  masterInfo: mastersInfo;
-}
-
-const MasterInfo: React.FC<IMasterInfo> = ({ masterInfo }) => {
+const MasterInfo: React.FC<{ masterInfo: MasterInfoType }> = ({ masterInfo }) => {
   const { isMobile } = useResponsive();
-  const { name, position, nutshell, avatar, introduce } = masterInfo;
+  const { name, position, nutshell, picture, introduce } = masterInfo;
 
   return (
     <MasterInfoWrapper>
       <AvatarWrapper>
         <Avatar
-          key={avatars[avatar]}
+          key={pictures[picture]}
           width={isMobile ? "8rem" : "12rem"}
           height={isMobile ? "8rem" : "12rem"}
-          src={avatars[avatar]}
+          src={pictures[picture]}
         />
       </AvatarWrapper>
       <InfoWrapper>
diff --git a/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.tsx b/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.tsx
index 7f86d540..3fe009c5 100644
--- a/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.tsx
+++ b/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.tsx
@@ -107,8 +107,8 @@ const CurriculumQuery = graphql`
                 name
               }
             }
-            masterInfo {
-              avatar
+            masterInfoList {
+              picture
               introduce
               name
               nutshell

From 89d04086c11daeff89123f63e598e0a041e61d73 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:03:35 +0900
Subject: [PATCH 03/53] =?UTF-8?q?:art:=20=ED=94=84=EB=A6=AC=EC=BD=94?=
 =?UTF-8?q?=EC=8A=A4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

마스터 프로필 사이 간격 수정, 커리큘럼 타입 수정
---
 .../DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx       | 2 +-
 .../pre-course/DetailCurriculum/DetailCurriculum.tsx            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pageComponents/pre-course/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/pre-course/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
index 25582e4e..dc37c5e0 100644
--- a/src/pageComponents/pre-course/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
+++ b/src/pageComponents/pre-course/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
@@ -54,7 +54,7 @@ const MasterInfo: React.FC<IMasterInfo> = ({ masterInfo }) => {
 
 const MasterInfoWrapper = styled.li`
   display: flex;
-  margin-top: 1rem;
+  margin-top: 4rem;
   @media ${({ theme }) => theme.device.mobile} {
     flex-direction: column;
   }
diff --git a/src/pageComponents/pre-course/DetailCurriculum/DetailCurriculum.tsx b/src/pageComponents/pre-course/DetailCurriculum/DetailCurriculum.tsx
index 689ad685..75321532 100644
--- a/src/pageComponents/pre-course/DetailCurriculum/DetailCurriculum.tsx
+++ b/src/pageComponents/pre-course/DetailCurriculum/DetailCurriculum.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { graphql, useStaticQuery } from "gatsby";
 // Type
-import { CodeTogetherCurriculumType } from "@type/CodeTogetherCurriculum";
+import { type CodeTogetherCurriculumType } from "@type/CodeTogetherCurriculum";
 // Components
 import { TitleSet, TabNavigationBar } from "components";
 import { Curriculum } from "./Curriculum";

From 732d04f72d5bf4b0d03120afb27a8ae4b4fde6ae Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:25:33 +0900
Subject: [PATCH 04/53] =?UTF-8?q?:bug:=20caniuse=EB=9D=BC=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=97=85=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 033a7c44..20c9ff82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12864,9 +12864,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001338",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001338.tgz",
-      "integrity": "sha512-1gLHWyfVoRDsHieO+CaeYe7jSo/MT7D7lhaXUiwwbuR5BwQxORs0f1tAwUSQr3YbxRXJvxHM/PA5FfPQRnsPeQ=="
+      "version": "1.0.30001439",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz",
+      "integrity": "sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A=="
     },
     "capture-exit": {
       "version": "2.0.0",

From d8855f46feb9e4df27a4d3baf10d57d31457a024 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:29:53 +0900
Subject: [PATCH 05/53] =?UTF-8?q?:art:=20=EB=B0=B0=EB=84=88=20=EC=9D=BC?=
 =?UTF-8?q?=EC=8B=9C=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pageComponents/main/Banner/Banner.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pageComponents/main/Banner/Banner.tsx b/src/pageComponents/main/Banner/Banner.tsx
index 70cf2850..9f435082 100644
--- a/src/pageComponents/main/Banner/Banner.tsx
+++ b/src/pageComponents/main/Banner/Banner.tsx
@@ -20,6 +20,11 @@ const Banner: React.FC<IBannerProps> = ({ setBannerStatus }) => {
     setBannerStatus(false);
   };
 
+  React.useEffect(() => {
+    // 배너가 필요한 경우 제거
+    setBannerStatus(false);
+  }, []);
+
   return (
     <BannerWrapper>
       <BannerPopup {...{ title, description, to, onCloseButtonClicked: closeHandler }} />

From fd0c9f01778cd0f8ae2d0a7b10a9a1ab910e3002 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:30:17 +0900
Subject: [PATCH 06/53] =?UTF-8?q?:art:=20=EB=A7=88=EC=8A=A4=ED=84=B0?=
 =?UTF-8?q?=EC=A6=88=20=EB=8C=80=EA=B8=B0=EC=9E=90=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pageComponents/main/CourseList/CourseList.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pageComponents/main/CourseList/CourseList.tsx b/src/pageComponents/main/CourseList/CourseList.tsx
index eb1752bd..94a06f72 100644
--- a/src/pageComponents/main/CourseList/CourseList.tsx
+++ b/src/pageComponents/main/CourseList/CourseList.tsx
@@ -18,12 +18,12 @@ const CourseList: React.FC = () => {
           description={LINK_DESCRIPTION.PRE_COURSE}
           icon={thumbnails.mediumCodeTogether}
         />
-        <LinkButton
+        {/* <LinkButton
           to={INTERNAL.MASTERS}
           title={LINK.MASTERS_MAX}
           description={LINK_DESCRIPTION.MASTERS}
           icon={thumbnails.mediumMastersCourse}
-        />
+        /> */}
         <LinkButton
           to={INTERNAL.CODE_TOGETHER}
           title={LINK.CODE_TOGETHER}

From c7ded3b9271ae3d623ef5deacc475b2937443301 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:32:29 +0900
Subject: [PATCH 07/53] =?UTF-8?q?:art:=20=EB=8C=80=EA=B8=B0=EC=9E=90=20?=
 =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EB=B2=84=ED=8A=BC=20=EC=9D=BC=EC=8B=9C?=
 =?UTF-8?q?=EC=A0=81=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/masters/index.tsx    | 2 +-
 src/pages/pre-course/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/masters/index.tsx b/src/pages/masters/index.tsx
index dbce06c6..ca1da9d4 100644
--- a/src/pages/masters/index.tsx
+++ b/src/pages/masters/index.tsx
@@ -28,7 +28,7 @@ const MatsersPage: React.FC = () => {
       <main style={{ overflowX: "hidden" }}>
         <HomeGlobalNavigationBar />
         <Masthead />
-        <MastersRegistration />
+        {/* <MastersRegistration /> */}
         <EducationFeatures />
         <DetailCurriculum />
         <PreCourseLinkButton />
diff --git a/src/pages/pre-course/index.tsx b/src/pages/pre-course/index.tsx
index 49ef43ad..10e077d5 100644
--- a/src/pages/pre-course/index.tsx
+++ b/src/pages/pre-course/index.tsx
@@ -20,7 +20,7 @@ const PreCoursePage: React.FC = () => {
       <main style={{ overflowX: "hidden" }}>
         <HomeGlobalNavigationBar />
         <Masthead />
-        <Registration />
+        {/* <Registration /> */}
         <DetailCurriculum />
         <TimeTable />
         <FAQ course="pre-course" />

From 4b3600f9b636925165f3b1a4e943d33f089ef9ff Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:33:01 +0900
Subject: [PATCH 08/53] =?UTF-8?q?:label:=20MasterPictureInfoType=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@type/Master.ts | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/@type/Master.ts b/src/@type/Master.ts
index 4196146b..e9dd8cec 100644
--- a/src/@type/Master.ts
+++ b/src/@type/Master.ts
@@ -1,4 +1,3 @@
-import avatars from "assets/img/avatars";
 import thumbnails from "assets/img/illusts/thumbnail";
 import picture from "assets/img/picture";
 
@@ -20,14 +19,6 @@ export interface MasterType {
 }
 
 export interface MasterInfoType {
-  avatar: keyof typeof avatars;
-  name: string;
-  position: string;
-  introduce: string;
-  nutshell: string;
-}
-
-export interface MasterPictureInfoType {
   picture: keyof typeof picture;
   name: string;
   position: string;

From 05520878b4216d977e41c40108b42c3ae308a3e8 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:43:06 +0900
Subject: [PATCH 09/53] =?UTF-8?q?:speech=5Fballoon:=20=EA=B0=81=20?=
 =?UTF-8?q?=EC=BD=98=ED=85=90=EC=B8=A0=EC=97=90=20=EB=A7=9E=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=ED=8F=B4=EB=8D=94=EA=B5=AC=EC=A1=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../clean-frontend/curriculum_part1.mdx       | 35 +++++++
 .../course/clean-frontend/interviews.mdx      | 22 +++++
 .../course/clean-frontend/masthead.mdx        | 22 +++++
 .../plan.mdx                                  |  2 +
 .../course/clean-frontend/registrations.mdx   |  9 ++
 .../clean-javascript/curriculum_part1.mdx     | 34 -------
 .../clean-javascript/curriculum_part2.mdx     | 32 -------
 .../course/clean-javascript/interviews.mdx    | 20 ----
 .../course/clean-javascript/masthead.mdx      | 20 ----
 .../course/clean-javascript/registrations.mdx |  7 --
 .../course/clean-swift/curriculum_part1.mdx   | 34 -------
 .../course/clean-swift/curriculum_part2.mdx   | 32 -------
 .../course/clean-swift/interviews.mdx         | 20 ----
 .../course/clean-swift/masthead.mdx           | 20 ----
 .../code-together/course/clean-swift/plan.mdx | 91 ------------------
 .../course/clean-swift/registrations.mdx      |  7 --
 .../course/javascript/curriculum_part1.mdx    | 14 +--
 .../course/javascript/curriculum_part2.mdx    | 14 +--
 .../course/javascript/interviews.mdx          |  2 +
 .../course/javascript/masthead.mdx            |  2 +
 .../code-together/course/javascript/plan.mdx  |  2 +
 .../course/javascript/registrations.mdx       |  2 +
 content/code-together/courseList.mdx          |  2 +-
 content/javascript/curriculum_part1.mdx       | 35 -------
 content/javascript/curriculum_part2.mdx       | 33 -------
 content/javascript/interviews.mdx             | 21 -----
 content/javascript/masthead.mdx               | 21 -----
 content/javascript/plan.mdx                   | 92 -------------------
 content/javascript/registrations.mdx          |  8 --
 29 files changed, 115 insertions(+), 540 deletions(-)
 create mode 100644 content/code-together/course/clean-frontend/curriculum_part1.mdx
 create mode 100644 content/code-together/course/clean-frontend/interviews.mdx
 create mode 100644 content/code-together/course/clean-frontend/masthead.mdx
 rename content/code-together/course/{clean-javascript => clean-frontend}/plan.mdx (96%)
 create mode 100644 content/code-together/course/clean-frontend/registrations.mdx
 delete mode 100644 content/code-together/course/clean-javascript/curriculum_part1.mdx
 delete mode 100644 content/code-together/course/clean-javascript/curriculum_part2.mdx
 delete mode 100644 content/code-together/course/clean-javascript/interviews.mdx
 delete mode 100644 content/code-together/course/clean-javascript/masthead.mdx
 delete mode 100644 content/code-together/course/clean-javascript/registrations.mdx
 delete mode 100644 content/code-together/course/clean-swift/curriculum_part1.mdx
 delete mode 100644 content/code-together/course/clean-swift/curriculum_part2.mdx
 delete mode 100644 content/code-together/course/clean-swift/interviews.mdx
 delete mode 100644 content/code-together/course/clean-swift/masthead.mdx
 delete mode 100644 content/code-together/course/clean-swift/plan.mdx
 delete mode 100644 content/code-together/course/clean-swift/registrations.mdx
 delete mode 100644 content/javascript/curriculum_part1.mdx
 delete mode 100644 content/javascript/curriculum_part2.mdx
 delete mode 100644 content/javascript/interviews.mdx
 delete mode 100644 content/javascript/masthead.mdx
 delete mode 100644 content/javascript/plan.mdx
 delete mode 100644 content/javascript/registrations.mdx

diff --git a/content/code-together/course/clean-frontend/curriculum_part1.mdx b/content/code-together/course/clean-frontend/curriculum_part1.mdx
new file mode 100644
index 00000000..aa006279
--- /dev/null
+++ b/content/code-together/course/clean-frontend/curriculum_part1.mdx
@@ -0,0 +1,35 @@
+---
+path: code-together/course/clean-frontend
+templateKey: codeTogether_clean-frontend_part1
+index: 1
+tabName: 주제
+subjectList:
+  - name: 함수로 만드는 애플리케이션
+    details:
+      - 함수 역할과 함수 나누기
+      - 고차함수
+      - 클로저, 커링
+      - immutable
+
+  - name: 객체로 만드는 애플리케이션
+    details:
+      - class, prototype, this
+      - OOP, 상속
+      - 뷰-모델 바인딩
+
+  - name: 네트워크 통신 핸들링 (최적화와 에러처리)
+    details:
+      - 서버와 동기화
+      - 캐시
+      - 에러핸들링, 요청취소
+
+  - name: 리팩토링과 UI테스팅
+    details:
+
+masterInfoList:
+  - picture: crong
+    name: 크롱
+    position: Crong, 웹 프론트엔드 마스터
+    nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+    introduce: 복잡하고 다양한 프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. 열정이 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다.\n 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받은 과정입니다
+---
diff --git a/content/code-together/course/clean-frontend/interviews.mdx b/content/code-together/course/clean-frontend/interviews.mdx
new file mode 100644
index 00000000..c17e6281
--- /dev/null
+++ b/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: ""
+---
diff --git a/content/code-together/course/clean-frontend/masthead.mdx b/content/code-together/course/clean-frontend/masthead.mdx
new file mode 100644
index 00000000..7001db5e
--- /dev/null
+++ b/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다양한 웹 프론트엔드 지식을 바닐라 자바스크립트로 익혀 FrontEnd Framework에 필요한 개념을 이해합니다."
+targets:
+  - "프론트엔드 주니어 개발자(1년차 ~ 3년차 수준)"
+  - "웹 프론트엔드 자바스크립트의 다양한 개발 패턴을 배우고 싶은 분"
+
+courseInfos:
+  - title: 4주
+    content: ""
+    img: calendar
+
+  - title: 매주 월•화•수, 오후 7시~10시
+    content: ""
+    img: clock
+
+  - title: 파트 당 44만원
+    content: ""
+    img: coin
+---
diff --git a/content/code-together/course/clean-javascript/plan.mdx b/content/code-together/course/clean-frontend/plan.mdx
similarity index 96%
rename from content/code-together/course/clean-javascript/plan.mdx
rename to content/code-together/course/clean-frontend/plan.mdx
index b535eb9d..2af0878c 100644
--- a/content/code-together/course/clean-javascript/plan.mdx
+++ b/content/code-together/course/clean-frontend/plan.mdx
@@ -1,4 +1,6 @@
 ---
+path: code-together/course/clean-frontend
+templateKey: codeTogether_clean-frontend_plan
 tags:
   - name: 스스로
     color: "#FFF4B3"
diff --git a/content/code-together/course/clean-frontend/registrations.mdx b/content/code-together/course/clean-frontend/registrations.mdx
new file mode 100644
index 00000000..ce1482bd
--- /dev/null
+++ b/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"
+---
diff --git a/content/code-together/course/clean-javascript/curriculum_part1.mdx b/content/code-together/course/clean-javascript/curriculum_part1.mdx
deleted file mode 100644
index 0141ddfa..00000000
--- a/content/code-together/course/clean-javascript/curriculum_part1.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-index: 1
-tabName: 파트 1
-subjectList:
-  - name: 개발 환경, 기본 연산과 조건문
-    details:
-      - vscode 기반 개발환경
-      - 정수/실수를 활용한 연산
-      - 변수를 활용한 복잡한 계산
-
-  - name: 함수
-    details:
-      - 함수 선언과 호출
-      - 연속된 함수 호출과 스택
-      - 변수의 유효범위
-
-  - name: 반복문과 배열
-    details:
-      - 문자열 기본과 반복문
-      - 배열 순회, 선언, 변경
-      - 고차함수
-
-  - name: 객체
-    details:
-      - 객체 정의 및 접근
-      - 객체를 활요한 프로그래밍 기초
-
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
----
diff --git a/content/code-together/course/clean-javascript/curriculum_part2.mdx b/content/code-together/course/clean-javascript/curriculum_part2.mdx
deleted file mode 100644
index 8c8b8a2c..00000000
--- a/content/code-together/course/clean-javascript/curriculum_part2.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-index: 2
-tabName: 파트 2
-subjectList:
-  - name: 브라우저 웹 개발
-    details:
-      - 웹UI 동작 방식
-      - HTML을 활용한 구조 개발
-      - CSS를 활용한 스타일 개발
-
-  - name: 재귀
-    details:
-      - 재귀적인 사고를 통한 문제 해결
-      - 무한배열 분석
-
-  - name: 비동기 프로그래밍
-    details:
-      - 비동기와 동기의 차이
-      - 비동기 제어
-
-  - name: 웹 애플리케이션 개발
-    details:
-      - 자바스크립트 객체와 UI 개발
-      - 웹 애플리케이션 로직 개발
-
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
----
diff --git a/content/code-together/course/clean-javascript/interviews.mdx b/content/code-together/course/clean-javascript/interviews.mdx
deleted file mode 100644
index a0fa385c..00000000
--- a/content/code-together/course/clean-javascript/interviews.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-interviews:
-  - writerPhoto: ""
-    nutshell: 능동적인 학습을 이끌어주는 과정
-    content: 수동적으로 진도를 따라가는 것이 아니라 능동적으로 함께 학습할 수 있습니다. 그 과정을 통해 더욱 잘 이해할 수 있었고, 무엇보다 재미를 느낄 수 있었습니다.
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
-
-  - writerPhoto: ""
-    nutshell: 절대 까먹을 수 없는, 머리와 손이 기억하는 나의 코드들!
-    content: 배우고 돌아서면 까먹는 학습이 아닙니다. 주어진 미션을 함께 해나가는 과정을 통해 하나 하나 모두 내 것이 되는 과정입니다.
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
-
-  - writerPhoto: ""
-    nutshell: 왕초보도 학습 의지만 있다면!
-    content: 프로그래밍 학습 경험이 전혀 없는 왕초보일지라도, 학습 의지만 있다면 도전할 가치가 충분한 과정입니다. 프로그래밍 공부를 어떻게 시작할지 엄두가 나지 않아 망설이고 있다면 적극 추천합니다!
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
----
diff --git a/content/code-together/course/clean-javascript/masthead.mdx b/content/code-together/course/clean-javascript/masthead.mdx
deleted file mode 100644
index 01e3ed07..00000000
--- a/content/code-together/course/clean-javascript/masthead.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: 자바스크립트
-description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."
-targets:
-  - "프로그래밍 기초를 제대로 학습하고 싶은 초보자"
-  - "풀타임 학습이 어려운 직장인, 대학생, 취업 준비생"
-  - "스스로, 또 함께 소프트웨어를 학습하며 성장하고 싶은 분"
-courseInfos:
-  - title: 파트 당 4주
-    content: 파트2 시작 전 1주 브레이크 기간 포함 총 9주
-    img: calendar
-
-  - title: 매주 월•화•수, 오후 7시~10시
-    content: ""
-    img: clock
-
-  - title: 파트 당 30만원
-    coreTime: 총 60만원
-    img: coin
----
diff --git a/content/code-together/course/clean-javascript/registrations.mdx b/content/code-together/course/clean-javascript/registrations.mdx
deleted file mode 100644
index bbe314f3..00000000
--- a/content/code-together/course/clean-javascript/registrations.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-registrations:
-  - title: "코드투게더 자바스크립트 과정 대기자 신청하기"
-    description: ""
-    caption: "교육 기간: 미정"
-    path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform"
----
diff --git a/content/code-together/course/clean-swift/curriculum_part1.mdx b/content/code-together/course/clean-swift/curriculum_part1.mdx
deleted file mode 100644
index 0141ddfa..00000000
--- a/content/code-together/course/clean-swift/curriculum_part1.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-index: 1
-tabName: 파트 1
-subjectList:
-  - name: 개발 환경, 기본 연산과 조건문
-    details:
-      - vscode 기반 개발환경
-      - 정수/실수를 활용한 연산
-      - 변수를 활용한 복잡한 계산
-
-  - name: 함수
-    details:
-      - 함수 선언과 호출
-      - 연속된 함수 호출과 스택
-      - 변수의 유효범위
-
-  - name: 반복문과 배열
-    details:
-      - 문자열 기본과 반복문
-      - 배열 순회, 선언, 변경
-      - 고차함수
-
-  - name: 객체
-    details:
-      - 객체 정의 및 접근
-      - 객체를 활요한 프로그래밍 기초
-
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
----
diff --git a/content/code-together/course/clean-swift/curriculum_part2.mdx b/content/code-together/course/clean-swift/curriculum_part2.mdx
deleted file mode 100644
index 8c8b8a2c..00000000
--- a/content/code-together/course/clean-swift/curriculum_part2.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-index: 2
-tabName: 파트 2
-subjectList:
-  - name: 브라우저 웹 개발
-    details:
-      - 웹UI 동작 방식
-      - HTML을 활용한 구조 개발
-      - CSS를 활용한 스타일 개발
-
-  - name: 재귀
-    details:
-      - 재귀적인 사고를 통한 문제 해결
-      - 무한배열 분석
-
-  - name: 비동기 프로그래밍
-    details:
-      - 비동기와 동기의 차이
-      - 비동기 제어
-
-  - name: 웹 애플리케이션 개발
-    details:
-      - 자바스크립트 객체와 UI 개발
-      - 웹 애플리케이션 로직 개발
-
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
----
diff --git a/content/code-together/course/clean-swift/interviews.mdx b/content/code-together/course/clean-swift/interviews.mdx
deleted file mode 100644
index a0fa385c..00000000
--- a/content/code-together/course/clean-swift/interviews.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-interviews:
-  - writerPhoto: ""
-    nutshell: 능동적인 학습을 이끌어주는 과정
-    content: 수동적으로 진도를 따라가는 것이 아니라 능동적으로 함께 학습할 수 있습니다. 그 과정을 통해 더욱 잘 이해할 수 있었고, 무엇보다 재미를 느낄 수 있었습니다.
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
-
-  - writerPhoto: ""
-    nutshell: 절대 까먹을 수 없는, 머리와 손이 기억하는 나의 코드들!
-    content: 배우고 돌아서면 까먹는 학습이 아닙니다. 주어진 미션을 함께 해나가는 과정을 통해 하나 하나 모두 내 것이 되는 과정입니다.
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
-
-  - writerPhoto: ""
-    nutshell: 왕초보도 학습 의지만 있다면!
-    content: 프로그래밍 학습 경험이 전혀 없는 왕초보일지라도, 학습 의지만 있다면 도전할 가치가 충분한 과정입니다. 프로그래밍 공부를 어떻게 시작할지 엄두가 나지 않아 망설이고 있다면 적극 추천합니다!
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
----
diff --git a/content/code-together/course/clean-swift/masthead.mdx b/content/code-together/course/clean-swift/masthead.mdx
deleted file mode 100644
index 01e3ed07..00000000
--- a/content/code-together/course/clean-swift/masthead.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: 자바스크립트
-description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."
-targets:
-  - "프로그래밍 기초를 제대로 학습하고 싶은 초보자"
-  - "풀타임 학습이 어려운 직장인, 대학생, 취업 준비생"
-  - "스스로, 또 함께 소프트웨어를 학습하며 성장하고 싶은 분"
-courseInfos:
-  - title: 파트 당 4주
-    content: 파트2 시작 전 1주 브레이크 기간 포함 총 9주
-    img: calendar
-
-  - title: 매주 월•화•수, 오후 7시~10시
-    content: ""
-    img: clock
-
-  - title: 파트 당 30만원
-    coreTime: 총 60만원
-    img: coin
----
diff --git a/content/code-together/course/clean-swift/plan.mdx b/content/code-together/course/clean-swift/plan.mdx
deleted file mode 100644
index b535eb9d..00000000
--- a/content/code-together/course/clean-swift/plan.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-tags:
-  - name: 스스로
-    color: "#FFF4B3"
-
-  - name: 그룹과
-    color: "#B4E791"
-
-  - name: 마스터와
-    color: "#C7E8EF"
-
-  - name: 모두 함께
-    color: "#FF9F92"
-
-planList:
-  - name: 데일리 스크럼
-    description: 그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.
-    color: "#B4E791"
-
-  - name: 모각코(모여서 각자 코딩)
-    description: 모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.
-    color: "#B4E791"
-
-  - name: 그룹 피어세션
-    description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
-    color: "#B4E791"
-
-  - name: 마스터 코드리뷰
-    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.
-    color: "#C7E8EF"
----
-
-<table id="table">
-  <thead>
-    <tr>
-      <td></td>
-      <td>월</td>
-      <td>화</td>
-      <td>수</td>
-      <td>금</td>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr>
-      <td>13:00</td>
-      <td colspan="2">미션과 VOD#1 공개</td>
-      <td></td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>19:00</td>
-      <td colspan="3">체크인</td>
-      <td rowspan="3" class="tag3">
-        <div>커뮤니티 이벤트<br/>(2주차)</div>
-        <br/>
-        <div>마스터 특강<br/>(3주차)</div>
-      </td>
-    </tr>
-    <tr>
-      <td>19:00 ~ 19:30</td>
-      <td colspan="3" class="tag1">데일리 스크럼</td>
-    </tr>
-    <tr>
-      <td>19:30 ~ 20:30</td>
-      <td rowspan="3">
-        <div>집중 풀이 시간<br/>(모각코 / 2.5h)</div>
-        <br/>
-        <div>VOD#2 공개<br/>(20:30)</div>
-      </td>
-      <td colspan="2" class="tag1">그룹 피어세션</td>
-    </tr>
-    <tr>
-      <td>20:30 ~ 21:30</td>
-      <td rowspan="2"><div>집중 풀이 시간<br />(모각코 / 1.5h)</div><br/>
-        <div>VOD#2 공개<br/>(21:00)</div>
-      </td>
-      <td class="tag2">마스터 코드리뷰<br/>(Live)</td>
-      <td rowspan="3"></td>
-    </tr>
-    <tr>
-      <td>21:30 ~ 22:00</td>
-      <td class="tag0">주간 학습정리<br/>및 회고</td>
-    </tr>
-    <tr>
-      <td>22:00</td>
-      <td colspan="2">결과 제출, VOD#3 공개</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
diff --git a/content/code-together/course/clean-swift/registrations.mdx b/content/code-together/course/clean-swift/registrations.mdx
deleted file mode 100644
index bbe314f3..00000000
--- a/content/code-together/course/clean-swift/registrations.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-registrations:
-  - title: "코드투게더 자바스크립트 과정 대기자 신청하기"
-    description: ""
-    caption: "교육 기간: 미정"
-    path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform"
----
diff --git a/content/code-together/course/javascript/curriculum_part1.mdx b/content/code-together/course/javascript/curriculum_part1.mdx
index 0141ddfa..1093c9c6 100644
--- a/content/code-together/course/javascript/curriculum_part1.mdx
+++ b/content/code-together/course/javascript/curriculum_part1.mdx
@@ -1,4 +1,6 @@
 ---
+path: code-together/course/javascript
+templateKey: codeTogether_javascript_part1
 index: 1
 tabName: 파트 1
 subjectList:
@@ -25,10 +27,10 @@ subjectList:
       - 객체 정의 및 접근
       - 객체를 활요한 프로그래밍 기초
 
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+masterInfoList:
+  - picture: crong
+    name: 크롱
+    position: Crong, 웹 프론트엔드 마스터
+    nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+    introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
 ---
diff --git a/content/code-together/course/javascript/curriculum_part2.mdx b/content/code-together/course/javascript/curriculum_part2.mdx
index 8c8b8a2c..1e4b98ca 100644
--- a/content/code-together/course/javascript/curriculum_part2.mdx
+++ b/content/code-together/course/javascript/curriculum_part2.mdx
@@ -1,4 +1,6 @@
 ---
+path: code-together/course/javascript
+templateKey: codeTogether_javascript_part2
 index: 2
 tabName: 파트 2
 subjectList:
@@ -23,10 +25,10 @@ subjectList:
       - 자바스크립트 객체와 UI 개발
       - 웹 애플리케이션 로직 개발
 
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+masterInfoList:
+  - picture: crong
+    name: 크롱
+    position: Crong, 웹 프론트엔드 마스터
+    nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+    introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
 ---
diff --git a/content/code-together/course/javascript/interviews.mdx b/content/code-together/course/javascript/interviews.mdx
index a0fa385c..fc9a015b 100644
--- a/content/code-together/course/javascript/interviews.mdx
+++ b/content/code-together/course/javascript/interviews.mdx
@@ -1,4 +1,6 @@
 ---
+path: code-together/course/javascript
+templateKey: codeTogether_javascript_reviews
 interviews:
   - writerPhoto: ""
     nutshell: 능동적인 학습을 이끌어주는 과정
diff --git a/content/code-together/course/javascript/masthead.mdx b/content/code-together/course/javascript/masthead.mdx
index 01e3ed07..4f227633 100644
--- a/content/code-together/course/javascript/masthead.mdx
+++ b/content/code-together/course/javascript/masthead.mdx
@@ -1,4 +1,6 @@
 ---
+path: code-together/course/javascript
+templateKey: codeTogether_javascript_masthead
 title: 자바스크립트
 description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."
 targets:
diff --git a/content/code-together/course/javascript/plan.mdx b/content/code-together/course/javascript/plan.mdx
index b535eb9d..d688bfbf 100644
--- a/content/code-together/course/javascript/plan.mdx
+++ b/content/code-together/course/javascript/plan.mdx
@@ -1,4 +1,6 @@
 ---
+path: code-together/course/javascript
+templateKey: codeTogether_javascript_plan
 tags:
   - name: 스스로
     color: "#FFF4B3"
diff --git a/content/code-together/course/javascript/registrations.mdx b/content/code-together/course/javascript/registrations.mdx
index bbe314f3..460d533b 100644
--- a/content/code-together/course/javascript/registrations.mdx
+++ b/content/code-together/course/javascript/registrations.mdx
@@ -1,4 +1,6 @@
 ---
+path: code-together/course/javascript
+templateKey: codeTogether_javascript_registrations
 registrations:
   - title: "코드투게더 자바스크립트 과정 대기자 신청하기"
     description: ""
diff --git a/content/code-together/courseList.mdx b/content/code-together/courseList.mdx
index 852194c4..6d69a030 100644
--- a/content/code-together/courseList.mdx
+++ b/content/code-together/courseList.mdx
@@ -3,7 +3,7 @@ templateKey: codeTogether_courses_list
 courses:
   - title: "자바스크립트 파트1•2"
     description: "프로그래밍 기초부터 간단한 웹 애플리케이션 개발까지 경험해보는"
-    path: "/code-together/javascript"
+    path: "/code-together/course/javascript"
 
   - title: "클린 프론트엔드"
     description: "프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 익혀보는"
diff --git a/content/javascript/curriculum_part1.mdx b/content/javascript/curriculum_part1.mdx
deleted file mode 100644
index 1a676a2c..00000000
--- a/content/javascript/curriculum_part1.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-templateKey: codeTogether_javascript_part1
-index: 1
-tabName: 파트 1
-subjectList:
-  - name: 개발 환경, 기본 연산과 조건문
-    details:
-      - vscode 기반 개발환경
-      - 정수/실수를 활용한 연산
-      - 변수를 활용한 복잡한 계산
-
-  - name: 함수
-    details:
-      - 함수 선언과 호출
-      - 연속된 함수 호출과 스택
-      - 변수의 유효범위
-
-  - name: 반복문과 배열
-    details:
-      - 문자열 기본과 반복문
-      - 배열 순회, 선언, 변경
-      - 고차함수
-
-  - name: 객체
-    details:
-      - 객체 정의 및 접근
-      - 객체를 활요한 프로그래밍 기초
-
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
----
diff --git a/content/javascript/curriculum_part2.mdx b/content/javascript/curriculum_part2.mdx
deleted file mode 100644
index f193dd7f..00000000
--- a/content/javascript/curriculum_part2.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
----
-templateKey: codeTogether_javascript_part2
-index: 2
-tabName: 파트 2
-subjectList:
-  - name: 브라우저 웹 개발
-    details:
-      - 웹UI 동작 방식
-      - HTML을 활용한 구조 개발
-      - CSS를 활용한 스타일 개발
-
-  - name: 재귀
-    details:
-      - 재귀적인 사고를 통한 문제 해결
-      - 무한배열 분석
-
-  - name: 비동기 프로그래밍
-    details:
-      - 비동기와 동기의 차이
-      - 비동기 제어
-
-  - name: 웹 애플리케이션 개발
-    details:
-      - 자바스크립트 객체와 UI 개발
-      - 웹 애플리케이션 로직 개발
-
-masterInfo:
-  avatar: mediumCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
----
diff --git a/content/javascript/interviews.mdx b/content/javascript/interviews.mdx
deleted file mode 100644
index b004f01d..00000000
--- a/content/javascript/interviews.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-templateKey: codeTogether_javascript_reviews
-interviews:
-  - writerPhoto: ""
-    nutshell: 능동적인 학습을 이끌어주는 과정
-    content: 수동적으로 진도를 따라가는 것이 아니라 능동적으로 함께 학습할 수 있습니다. 그 과정을 통해 더욱 잘 이해할 수 있었고, 무엇보다 재미를 느낄 수 있었습니다.
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
-
-  - writerPhoto: ""
-    nutshell: 절대 까먹을 수 없는, 머리와 손이 기억하는 나의 코드들!
-    content: 배우고 돌아서면 까먹는 학습이 아닙니다. 주어진 미션을 함께 해나가는 과정을 통해 하나 하나 모두 내 것이 되는 과정입니다.
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
-
-  - writerPhoto: ""
-    nutshell: 왕초보도 학습 의지만 있다면!
-    content: 프로그래밍 학습 경험이 전혀 없는 왕초보일지라도, 학습 의지만 있다면 도전할 가치가 충분한 과정입니다. 프로그래밍 공부를 어떻게 시작할지 엄두가 나지 않아 망설이고 있다면 적극 추천합니다!
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
----
diff --git a/content/javascript/masthead.mdx b/content/javascript/masthead.mdx
deleted file mode 100644
index c8e9de3f..00000000
--- a/content/javascript/masthead.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
----
-templateKey: codeTogether_javascript_masthead
-title: 자바스크립트
-description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."
-targets:
-  - "프로그래밍 기초를 제대로 학습하고 싶은 초보자"
-  - "풀타임 학습이 어려운 직장인, 대학생, 취업 준비생"
-  - "스스로, 또 함께 소프트웨어를 학습하며 성장하고 싶은 분"
-courseInfos:
-  - title: 파트 당 4주
-    content: 파트2 시작 전 1주 브레이크 기간 포함 총 9주
-    img: calendar
-
-  - title: 매주 월•화•수, 오후 7시~10시
-    content: ""
-    img: clock
-
-  - title: 파트 당 30만원
-    coreTime: 총 60만원
-    img: coin
----
diff --git a/content/javascript/plan.mdx b/content/javascript/plan.mdx
deleted file mode 100644
index 3892dc2c..00000000
--- a/content/javascript/plan.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
----
-templateKey: codeTogether_javascript_plan
-tags:
-  - name: 스스로
-    color: "#FFF4B3"
-
-  - name: 그룹과
-    color: "#B4E791"
-
-  - name: 마스터와
-    color: "#C7E8EF"
-
-  - name: 모두 함께
-    color: "#FF9F92"
-
-planList:
-  - name: 데일리 스크럼
-    description: 그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.
-    color: "#B4E791"
-
-  - name: 모각코(모여서 각자 코딩)
-    description: 모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.
-    color: "#B4E791"
-
-  - name: 그룹 피어세션
-    description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
-    color: "#B4E791"
-
-  - name: 마스터 코드리뷰
-    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.
-    color: "#C7E8EF"
----
-
-<table id="table">
-  <thead>
-    <tr>
-      <td></td>
-      <td>월</td>
-      <td>화</td>
-      <td>수</td>
-      <td>금</td>
-    </tr>
-  </thead>
-
-  <tbody>
-    <tr>
-      <td>13:00</td>
-      <td colspan="2">미션과 VOD#1 공개</td>
-      <td></td>
-      <td></td>
-    </tr>
-    <tr>
-      <td>19:00</td>
-      <td colspan="3">체크인</td>
-      <td rowspan="3" class="tag3">
-        <div>커뮤니티 이벤트<br/>(2주차)</div>
-        <br/>
-        <div>마스터 특강<br/>(3주차)</div>
-      </td>
-    </tr>
-    <tr>
-      <td>19:00 ~ 19:30</td>
-      <td colspan="3" class="tag1">데일리 스크럼</td>
-    </tr>
-    <tr>
-      <td>19:30 ~ 20:30</td>
-      <td rowspan="3">
-        <div>집중 풀이 시간<br/>(모각코 / 2.5h)</div>
-        <br/>
-        <div>VOD#2 공개<br/>(20:30)</div>
-      </td>
-      <td colspan="2" class="tag1">그룹 피어세션</td>
-    </tr>
-    <tr>
-      <td>20:30 ~ 21:30</td>
-      <td rowspan="2"><div>집중 풀이 시간<br />(모각코 / 1.5h)</div><br/>
-        <div>VOD#2 공개<br/>(21:00)</div>
-      </td>
-      <td class="tag2">마스터 코드리뷰<br/>(Live)</td>
-      <td rowspan="3"></td>
-    </tr>
-    <tr>
-      <td>21:30 ~ 22:00</td>
-      <td class="tag0">주간 학습정리<br/>및 회고</td>
-    </tr>
-    <tr>
-      <td>22:00</td>
-      <td colspan="2">결과 제출, VOD#3 공개</td>
-      <td></td>
-    </tr>
-  </tbody>
-</table>
diff --git a/content/javascript/registrations.mdx b/content/javascript/registrations.mdx
deleted file mode 100644
index 453ca3f3..00000000
--- a/content/javascript/registrations.mdx
+++ /dev/null
@@ -1,8 +0,0 @@
----
-templateKey: codeTogether_javascript_registrations
-registrations:
-  - title: "코드투게더 자바스크립트 과정 대기자 신청하기"
-    description: ""
-    caption: "교육 기간: 미정"
-    path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform"
----

From fb03575ffd899c04667869a2c633050f4dde5992 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:43:28 +0900
Subject: [PATCH 10/53] =?UTF-8?q?:sparkles:=20=EB=8B=A4=EC=9D=B4=EB=82=98?=
 =?UTF-8?q?=EB=AF=B9=ED=95=98=EA=B2=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=A5=BC=20=EB=A7=8C=EB=93=9C=EB=8A=94=20gatsby-node=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatsby-node.ts | 47 ++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/gatsby-node.ts b/gatsby-node.ts
index b425d934..3f9042e9 100644
--- a/gatsby-node.ts
+++ b/gatsby-node.ts
@@ -1,13 +1,50 @@
-exports.createPages = async ({ graphql, actions }) => {
-  const { data } = await graphql(`
-    query slug {
+import path from "path";
+import { type GatsbyNode } from "gatsby";
+
+const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+  const { data } = await graphql<{ allMdx: any }>(`
+    query {
       allMdx {
         nodes {
-          slug
+          frontmatter {
+            templateKey
+            path
+          }
         }
       }
     }
   `);
 
-  console.log(data.allMdx.nodes.filter((v) => v.slug.match("code-together/course/")));
+  if (!data) return;
+
+  const pathArr = data.allMdx.nodes.filter(({ frontmatter }: { frontmatter: any }) => {
+    return frontmatter?.path?.match("code-together/course/");
+  });
+
+  const onlyPathArr: string[] = pathArr.map(({ frontmatter }: { frontmatter: any }) => {
+    return frontmatter.path;
+  });
+
+  const slugList: string[] = [...new Set(onlyPathArr)];
+
+  const codeTogetherTemplate = path.resolve("src/template/codeTogetherTemplate.tsx");
+
+  slugList.forEach((slug: string) => {
+    const locationArr = slug.split("/");
+    const courseName = locationArr[locationArr.length - 1];
+    createPage({
+      path: `/${slug}`,
+      component: codeTogetherTemplate,
+      context: {
+        masthead: `codeTogether_${courseName}_masthead`,
+        registration: `codeTogether_${courseName}_plan`,
+        deatilCurriculum: `codeTogether_${courseName}_part*`,
+        timetable: `codeTogether_${courseName}_plan`,
+        graduateReview: `codeTogether_${courseName}_reviews`,
+      },
+    });
+  });
 };
+
+export { createPages };

From 5a1eb5087b268a6cd5f0b4ba988c8ddfff6fe830 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:44:01 +0900
Subject: [PATCH 11/53] =?UTF-8?q?:label:=20=EA=B0=81=20=EC=BB=A4=EB=A6=AC?=
 =?UTF-8?q?=ED=81=98=EB=9F=BC=20=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@type/CodeTogetherCurriculum.ts | 4 ++--
 src/@type/Curriculum.ts             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/@type/CodeTogetherCurriculum.ts b/src/@type/CodeTogetherCurriculum.ts
index fedcba2a..db3293be 100644
--- a/src/@type/CodeTogetherCurriculum.ts
+++ b/src/@type/CodeTogetherCurriculum.ts
@@ -1,4 +1,4 @@
-import { MasterPictureInfoType } from "./Master";
+import { MasterInfoType } from "./Master";
 
 export interface CodeTogetherSubjectInfoType {
   details: string[];
@@ -8,5 +8,5 @@ export interface CodeTogetherSubjectInfoType {
 export interface CodeTogetherCurriculumType {
   tabName: string;
   subjectList: CodeTogetherSubjectInfoType[];
-  masterInfoList: MasterPictureInfoType[];
+  masterInfoList: MasterInfoType[];
 }
diff --git a/src/@type/Curriculum.ts b/src/@type/Curriculum.ts
index 5e1750f2..62a69de0 100644
--- a/src/@type/Curriculum.ts
+++ b/src/@type/Curriculum.ts
@@ -4,5 +4,5 @@ import { SubjectType } from "./Subject";
 export interface CurriculumType {
   tabName: string;
   curriculum: SubjectType[];
-  masterInfo: MasterInfoType;
+  masterInfoList: MasterInfoType[];
 }

From 42e591cb1a5d324ecad92798ee9a0c685cde7544 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 16:45:38 +0900
Subject: [PATCH 12/53] =?UTF-8?q?:sparkles:=20=EB=8B=A4=EC=9D=B4=EB=82=98?=
 =?UTF-8?q?=EB=AF=B9=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

임시 자바스크립트 템플릿 적용, 데이터 요청 부분 수정
---
 .../Curriculum/Curriculum.tsx                 | 117 ++++++++
 .../Curriculum/MasterInfo/MasterInfo.test.tsx |  45 ++++
 .../Curriculum/MasterInfo/MasterInfo.tsx      | 135 ++++++++++
 .../Curriculum/MasterInfo/index.ts            |   1 +
 .../DetailCurriculum/Curriculum/index.ts      |   1 +
 .../DetailCurriculum.docs.mdx                 |  63 +++++
 .../DetailCurriculum.stories.tsx              |  20 ++
 .../DetailCurriculum/DetailCurriculum.tsx     | 106 ++++++++
 .../DetailCurriculum/index.ts                 |   1 +
 .../GraduateReview/GraduateReview.docs.mdx    |  38 +++
 .../GraduateReview/GraduateReview.stories.tsx |  20 ++
 .../GraduateReview/GraduateReview.tsx         |  46 ++++
 .../GraduateReview/index.ts                   |   1 +
 .../Masthead/Masthead.docs.mdx                |  31 +++
 .../Masthead/Masthead.stories.tsx             |  20 ++
 .../Masthead/Masthead.tsx                     |  49 ++++
 .../codeTogetherTemplate/Masthead/index.ts    |   1 +
 .../Registration/Registration.docs.mdx        |  27 ++
 .../Registration/Registration.stories.tsx     |  20 ++
 .../Registration/Registration.tsx             |  31 +++
 .../Registration/index.ts                     |   1 +
 .../TimeTable/TimeTable.css                   |  36 +++
 .../TimeTable/TimeTable.docs.mdx              | 116 ++++++++
 .../TimeTable/TimeTable.stories.tsx           |  20 ++
 .../TimeTable/TimeTable.tsx                   | 251 ++++++++++++++++++
 .../codeTogetherTemplate/TimeTable/index.ts   |   1 +
 .../codeTogetherTemplate/index.ts             |   5 +
 .../Curriculum/Curriculum.tsx                 |   6 +-
 .../Curriculum/MasterInfo/MasterInfo.tsx      |  22 +-
 .../DetailCurriculum/DetailCurriculum.tsx     |   4 +-
 src/template/codeTogetherTemplate.tsx         | 123 +++++++++
 31 files changed, 1338 insertions(+), 20 deletions(-)
 create mode 100644 src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/index.ts
 create mode 100644 src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/index.ts
 create mode 100644 src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.docs.mdx
 create mode 100644 src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/DetailCurriculum/index.ts
 create mode 100644 src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.docs.mdx
 create mode 100644 src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/GraduateReview/index.ts
 create mode 100644 src/pageComponents/codeTogetherTemplate/Masthead/Masthead.docs.mdx
 create mode 100644 src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/Masthead/index.ts
 create mode 100644 src/pageComponents/codeTogetherTemplate/Registration/Registration.docs.mdx
 create mode 100644 src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/Registration/index.ts
 create mode 100644 src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.css
 create mode 100644 src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.docs.mdx
 create mode 100644 src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx
 create mode 100644 src/pageComponents/codeTogetherTemplate/TimeTable/index.ts
 create mode 100644 src/pageComponents/codeTogetherTemplate/index.ts
 create mode 100644 src/template/codeTogetherTemplate.tsx

diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx
new file mode 100644
index 00000000..a3b7d3a7
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx
@@ -0,0 +1,117 @@
+import React from "react";
+import styled from "styled-components";
+// Type
+import { CodeTogetherCurriculumType } from "@type/CodeTogetherCurriculum";
+// Typography
+import { Typography } from "typography";
+// Components
+import { MasterInfo } from "./MasterInfo";
+
+const Curriculum: React.FC<{ curriculumInfo: CodeTogetherCurriculumType }> = ({
+  curriculumInfo,
+}) => {
+  const { subjectList, masterInfoList } = curriculumInfo;
+
+  return (
+    <CurriculumWrapper>
+      <CurriculumList>
+        <SubjectList>
+          {subjectList.map(({ name, details }) => (
+            <SubjectItem key={name}>
+              <SubjectTitle>
+                <Typography type="SHLBold">{name}</Typography>
+              </SubjectTitle>
+              <SubjectDetailList>
+                {details.map((detail) => (
+                  <li key={detail}>
+                    <Typography type="MBody" as="span">
+                      {detail}
+                    </Typography>
+                  </li>
+                ))}
+              </SubjectDetailList>
+            </SubjectItem>
+          ))}
+        </SubjectList>
+        <DivideLine />
+        {masterInfoList.map((masterInfo) => (
+          <MasterInfo {...{ masterInfo }} />
+        ))}
+      </CurriculumList>
+    </CurriculumWrapper>
+  );
+};
+
+const CurriculumWrapper = styled.div`
+  display: flex;
+  @media ${({ theme }) => theme.device.mobile} {
+    width: 100%;
+    padding: 3.2rem 2.4rem;
+    box-sizing: border-box;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    width: 100%;
+    padding: 8rem 8rem;
+    box-sizing: border-box;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    width: 107rem;
+    padding: 8rem 4rem;
+  }
+`;
+
+const CurriculumList = styled.ul`
+  width: 98.2rem;
+`;
+const SubjectList = styled.ul`
+  & > *:not(:first-child) {
+    margin-top: 3rem;
+  }
+`;
+const SubjectItem = styled.li`
+  display: flex;
+  @media ${({ theme }) => theme.device.mobile} {
+    flex-direction: column;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    flex-direction: column;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    & > * {
+      margin-right: 2.4rem;
+    }
+  }
+`;
+const SubjectTitle = styled.h6`
+  color: ${({ theme: { color } }) => color.black};
+  @media ${({ theme }) => theme.device.mobile} {
+    width: 100%;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    width: 100%;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    width: 19rem;
+  }
+`;
+const SubjectDetailList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  color: ${({ theme: { color } }) => color.greyScale.grey2};
+  list-style: disc;
+  list-style-position: inside;
+  @media ${({ theme }) => theme.device.mobile} {
+    margin-left: 1rem;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    margin-left: 1rem;
+    margin-top: 0.8rem;
+  }
+`;
+const DivideLine = styled.div`
+  border-bottom: 0.1rem solid ${({ theme: { color } }) => color.greyScale.grey4};
+  margin: 5.6rem 0;
+  width: 100%;
+`;
+
+export default Curriculum;
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
new file mode 100644
index 00000000..bf85d05e
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { render } from "@testing-library/react";
+// Testing-Component
+import { MasterInfo } from ".";
+// Assets
+import avatars from "assets/img/avatars";
+// lib
+import { TestProvider } from "lib/testUtils";
+
+describe("<MasterInfo>", () => {
+  const masterInfo = {
+    avatar: "mediumCrong" as keyof typeof avatars,
+    introduce: "매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.",
+    name: "JK",
+    nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”",
+    position: "모바일 iOS 마스터",
+  };
+
+  const renderMasterInfo = () =>
+    render(
+      <TestProvider>
+        <MasterInfo {...{ masterInfo }} />
+      </TestProvider>
+    );
+  it("마스터의 이미지가 보여진다.", async () => {
+    const { getByAltText } = renderMasterInfo();
+
+    const masterAvatar = getByAltText("avatar");
+    expect(masterAvatar.getAttribute("src")).toBe("test-file-stub");
+  });
+  it("마스터의 이름, 직책이 보여진다.", async () => {
+    const { getByText } = renderMasterInfo();
+    const { name, position } = masterInfo;
+
+    getByText(name);
+    getByText(position);
+  });
+  it("마스터의 한마디와 간략한 소개가 보여진다.", async () => {
+    const { getByText } = renderMasterInfo();
+    const { introduce, nutshell } = masterInfo;
+
+    getByText(introduce);
+    getByText(nutshell);
+  });
+});
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
new file mode 100644
index 00000000..91e7a0c4
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
@@ -0,0 +1,135 @@
+import React from "react";
+import styled from "styled-components";
+// Typography
+import { Typography } from "typography";
+// Components
+import { Avatar } from "components";
+// Assets
+import avatars from "assets/img/avatars";
+// Libs
+import { useResponsive } from "lib/hooks";
+
+type mastersInfo = {
+  avatar: keyof typeof avatars;
+  name: string;
+  position: string;
+  introduce: string;
+  nutshell: string;
+};
+interface IMasterInfo {
+  masterInfo: mastersInfo;
+}
+
+const MasterInfo: React.FC<IMasterInfo> = ({ masterInfo }) => {
+  const { isMobile } = useResponsive();
+  const { name, position, nutshell, avatar, introduce } = masterInfo;
+
+  return (
+    <MasterInfoWrapper>
+      <AvatarWrapper>
+        <Avatar
+          key={avatars[avatar]}
+          width={isMobile ? "8rem" : "12rem"}
+          height={isMobile ? "8rem" : "12rem"}
+          src={avatars[avatar]}
+        />
+      </AvatarWrapper>
+      <InfoWrapper>
+        <NameWrapper>
+          <Typography type="HLBold">{name}</Typography>
+          <PositionWrapper>
+            <Typography type="SBody">{position}</Typography>
+          </PositionWrapper>
+        </NameWrapper>
+        <NutshellWrapper>
+          <Typography type="SHLBold">{nutshell}</Typography>
+        </NutshellWrapper>
+        <IntroduceWrapper>
+          <Typography type="MBody">{introduce}</Typography>
+        </IntroduceWrapper>
+      </InfoWrapper>
+    </MasterInfoWrapper>
+  );
+};
+
+const MasterInfoWrapper = styled.li`
+  display: flex;
+  @media ${({ theme }) => theme.device.mobile} {
+    flex-direction: column;
+  }
+`;
+const AvatarWrapper = styled.div`
+  @media ${({ theme }) => theme.device.mobile} {
+    width: 8rem;
+    height: 8rem;
+    position: absolute;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    width: 12rem;
+    height: 12rem;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    width: 12rem;
+    height: 12rem;
+  }
+`;
+const InfoWrapper = styled.div`
+  @media ${({ theme }) => theme.device.tablet} {
+    margin-left: 4rem;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    margin-left: 4rem;
+  }
+`;
+
+const NameWrapper = styled.div`
+  display: flex;
+  color: ${({ theme: { color } }) => color.black};
+  @media ${({ theme }) => theme.device.mobile} {
+    height: 8rem;
+    margin-left: 9.8rem;
+    flex-direction: column;
+    justify-content: center;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    align-items: flex-end;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    align-items: flex-end;
+  }
+`;
+const PositionWrapper = styled.div`
+  color: ${({ theme: { color } }) => color.greyScale.grey1};
+  @media ${({ theme }) => theme.device.tablet} {
+    padding-left: 0.8rem;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    padding-left: 0.8rem;
+  }
+`;
+const NutshellWrapper = styled.div`
+  color: ${({ theme: { color } }) => color.black};
+  @media ${({ theme }) => theme.device.mobile} {
+    margin-top: 2.4rem;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    margin-top: 1.6rem;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    margin-top: 1.6rem;
+  }
+`;
+const IntroduceWrapper = styled.div`
+  color: ${({ theme: { color } }) => color.greyScale.grey2};
+  @media ${({ theme }) => theme.device.mobile} {
+    margin-top: 1.6rem;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    margin-top: 0.8rem;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    margin-top: 0.8rem;
+  }
+`;
+
+export default MasterInfo;
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/index.ts b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/index.ts
new file mode 100644
index 00000000..b060905b
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/index.ts
@@ -0,0 +1 @@
+export { default as MasterInfo } from "./MasterInfo";
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/index.ts b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/index.ts
new file mode 100644
index 00000000..c4cc5385
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/index.ts
@@ -0,0 +1 @@
+export { default as Curriculum } from "./Curriculum";
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.docs.mdx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.docs.mdx
new file mode 100644
index 00000000..4ca65292
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.docs.mdx
@@ -0,0 +1,63 @@
+<!-- Custom-MDX-Documentation.mdx -->
+
+### 파일 디렉토리
+
+`/content/javascript/curriculum_part*.mdx`
+
+### 예시
+
+```
+---
+templateKey: codeTogether_javascript_part1
+index: 1
+tabName: 파트 1
+subjectList:
+  - name: 개발 환경, 기본 연산과 조건문
+    details:
+      - vscode 기반 개발환경
+      - 정수/실수를 활용한 연산
+      - 변수를 활용한 복잡한 계산
+
+  - name: 함수
+    details:
+      - 함수 선언과 호출
+      - 연속된 함수 호출과 스택
+      - 변수의 유효범위
+
+  - name: 반복문과 배열
+    details:
+      - 문자열 기본과 반복문
+      - 배열 순회, 선언, 변경
+      - 고차함수
+
+  - name: 객체
+    details:
+      - 객체 정의 및 접근
+      - 객체를 활요한 프로그래밍 기초
+
+masterInfo:
+  avatar: profileCrong
+  name: 크롱
+  position: Crong, 웹 프론트엔드 마스터
+  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
+  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
+---
+```
+
+### 항목별 설명
+
+- templateKey: codeTogether_javascript_part~ 의 값을 입력해 주어야 페이지에서 인식할 수 있습니다. masters_curriculum~ mdx문서 하나는 한 탭의 내용을 작성할 수 있습니다.
+- index: 탭에 보여질 순서를 입력할 수 있습니다.
+- tabName: 탭에 보여지는 문구를 입력할 수 있습니다.
+- subjectList: 커리큘럼의 각 항목을 보여주는 리스트입니다.
+  - name: 커리큘럼의 이름을 입력할 수 있습니다.
+  - detail: 해당 커리큘럼의 상세내용을 입력할 수 있습니다.
+
+---
+
+- masterInfo: 마스터의 정보를 입력하는 곳 입니다.
+  - avatar: 마스터의 이미지로 보여질 파일의 이름을 입력할 수 있습니다.
+  - name: 마스터의 이미지 바로 옆에 보여질 큰 문구를 입력할 수 있습니다.
+  - position: 이름 옆에 적혀질 옅은 회색의 문구를 입력할 수 있습니다.
+  - nutshell: 마스터의 이름 바로 밑에 적혀질 문구를 적을 수 있습니다. 따옴표를 사용하고 싶다면 "“~따옴표를 써보세요”" 와같이 입력하면 됩니다.
+  - introduce: 마스터의 한마디 밑에 적여질 옅은 회색의 문구를 입력할 수 있습니다.
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx
new file mode 100644
index 00000000..889851d0
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+// Type
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+// Story-Component
+import { DetailCurriculum } from ".";
+import DetailCurriculumDocs from "./DetailCurriculum.docs.mdx";
+
+export default {
+  title: "pagecomponent/code-together/javascript/DetailCurriculum",
+  component: DetailCurriculum,
+  parameters: {
+    docs: {
+      page: DetailCurriculumDocs,
+    },
+  },
+} as ComponentMeta<typeof DetailCurriculum>;
+
+const Template: ComponentStory<typeof DetailCurriculum> = () => <DetailCurriculum />;
+
+export const Default = Template.bind({});
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx
new file mode 100644
index 00000000..1e6aa489
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import styled from "styled-components";
+import { graphql, useStaticQuery } from "gatsby";
+// Type
+import { CodeTogetherCurriculumType } from "@type/CodeTogetherCurriculum";
+// Components
+import { TitleSet, TabNavigationBar } from "components";
+import { Curriculum } from "./Curriculum";
+// Assets
+import { SUBTITLE, TITLE } from "assets/static/phrases";
+
+const DetailCurriculum: React.FC<{ curriculumInfo: CodeTogetherCurriculumType[] }> = ({
+  curriculumInfo,
+}) => {
+  const titles = curriculumInfo.map(({ tabName }) => tabName);
+
+  const [curriculumIndex, setCurriculumIndex] = React.useState(0);
+
+  return (
+    <DetailCurriculumWrapper>
+      <TitleSetWrapper>
+        <TitleSet
+          subtitle={SUBTITLE.JAVASCRIPT_COURSE}
+          title={TITLE.JAVASCRIPT_DETAIL_CURRICULUM}
+        />
+      </TitleSetWrapper>
+      <TabNavigationBarWrapper>
+        <TabNavigationBar {...{ titles }} onIndexChanged={setCurriculumIndex} />
+      </TabNavigationBarWrapper>
+      <CurriculumWrapper>
+        <Curriculum {...{ curriculumInfo: curriculumInfo[curriculumIndex] }} />
+      </CurriculumWrapper>
+    </DetailCurriculumWrapper>
+  );
+};
+
+const DetailCurriculumWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  @media ${({ theme }) => theme.device.mobile} {
+    margin-top: 9.7rem;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    margin-top: 18rem;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    margin-top: 18rem;
+    align-items: center;
+    width: 100%;
+    min-width: 144rem;
+  }
+`;
+
+const TitleSetWrapper = styled.div`
+  @media ${({ theme }) => theme.device.mobile} {
+    padding: 0 2.4rem;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    padding: 0 8rem;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    align-items: center;
+  }
+`;
+
+const TabNavigationBarWrapper = styled.div`
+  @media ${({ theme }) => theme.device.mobile} {
+    padding-top: 2.4rem;
+    padding-left: 2.4rem;
+    overflow-x: auto;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    margin-top: 5.2rem;
+    padding-left: 8.2rem;
+    overflow-x: auto;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    margin: 0 auto;
+    margin-top: 5.2rem;
+    padding: 0 18.9rem;
+    width: 106.2rem;
+  }
+`;
+
+const CurriculumWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: ${({ theme: { color } }) => color.surface.offWhite1};
+  @media ${({ theme }) => theme.device.mobile} {
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    min-width: 144rem;
+  }
+`;
+
+export default DetailCurriculum;
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/index.ts b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/index.ts
new file mode 100644
index 00000000..0bfe7304
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/index.ts
@@ -0,0 +1 @@
+export { default as DetailCurriculum } from "./DetailCurriculum";
diff --git a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.docs.mdx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.docs.mdx
new file mode 100644
index 00000000..ba4f9911
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.docs.mdx
@@ -0,0 +1,38 @@
+<!-- Custom-MDX-Documentation.mdx -->
+
+### 파일 디렉토리
+
+`/content/javascript/interviews.mdx`
+
+### 예시
+
+```
+templateKey: codeTogether_javascript_reviews
+interviews:
+  - writerPhoto: ""
+    nutshell: 능동적인 학습을 이끌어주는 과정
+    content: 수동적으로 진도를 따라가는 것이 아니라 능동적으로 함께 학습할 수 있습니다. 그 과정을 통해 더욱 잘 이해할 수 있었고, 무엇보다 재미를 느낄 수 있었습니다.
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: 절대 까먹을 수 없는, 머리와 손이 기억하는 나의 코드들!
+    content: 배우고 돌아서면 까먹는 학습이 아닙니다. 주어진 미션을 함께 해나가는 과정을 통해 하나 하나 모두 내 것이 되는 과정입니다.
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: 왕초보도 학습 의지만 있다면!
+    content: 프로그래밍 학습 경험이 전혀 없는 왕초보일지라도, 학습 의지만 있다면 도전할 가치가 충분한 과정입니다. 프로그래밍 공부를 어떻게 시작할지 엄두가 나지 않아 망설이고 있다면 적극 추천합니다!
+    writer: 2022년 4월(1기) 수료생
+    writerInfo: ""
+```
+
+### 항목별 설명
+
+- interviewList: 각 인터뷰 카드의 리스트를 나타냅니다. 각 카드의 항목은 아래와 같습니다.
+  - writerPhoto: 이미지 파일의 이름을 입력할 수 있습니다. 새로운 이미지를 사용하기 위해서는 해당 값이 필요할 땐 개발자에게 이미지와 추가적인 배포가 필요합니다. 아무런 값이 없다면 예씨의 이미지가 보여집니다.
+  - nutshell: 큰 따옴표의 옆의 한마디 문구를 입력할 수 있습니다.
+  - content: nutshell 값의 밑에 나타내는 직접적인 인터뷰 내용을 입력할 수 있습니다.
+  - writer: 작성자의 이름을 입력할 수 있습니다.
+  - writerInfo: 작성자 옆의 간단한 정보를 입력할 수 있습니다.
diff --git a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx
new file mode 100644
index 00000000..dd3565c3
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+// Type
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+// Story-Component
+import { GraduateReview } from ".";
+import GraduateReviewDocs from "./GraduateReview.docs.mdx";
+
+export default {
+  title: "pagecomponent/code-together/javascript/GraduateReview",
+  component: GraduateReview,
+  parameters: {
+    docs: {
+      page: GraduateReviewDocs,
+    },
+  },
+} as ComponentMeta<typeof GraduateReview>;
+
+const Template: ComponentStory<typeof GraduateReview> = () => <GraduateReview />;
+
+export const Default = Template.bind({});
diff --git a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
new file mode 100644
index 00000000..c7d7b22e
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { graphql, useStaticQuery } from "gatsby";
+// Type
+import { InterviewType } from "@type/Interview";
+// Components
+import { Interview } from "components/Interview";
+// Assets
+import { SUBTITLE, TITLE } from "assets/static/phrases";
+// Libs
+import { useResponsive } from "lib/hooks";
+
+const GraduateReview: React.FC<{ data: any }> = ({ data }) => {
+  const { isMobile } = useResponsive();
+
+  const { mdx } = data;
+  const { frontmatter } = mdx;
+  const { interviews }: { interviews: InterviewType[] } = frontmatter;
+
+  return (
+    <div style={{ marginTop: isMobile ? "12rem" : "18rem" }}>
+      <Interview
+        subtitle={SUBTITLE.JAVASCRIPT}
+        title={TITLE.STUDENT_INTERVIEW}
+        {...{ interviews }}
+      />
+    </div>
+  );
+};
+
+// const JavascriptReviewQuery = graphql`
+//   query JavascriptReviewQuery {
+//     mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_reviews" } }) {
+//       frontmatter {
+//         interviews {
+//           writerPhoto
+//           nutshell
+//           content
+//           writer
+//           writerInfo
+//         }
+//       }
+//     }
+//   }
+// `;
+
+export default GraduateReview;
diff --git a/src/pageComponents/codeTogetherTemplate/GraduateReview/index.ts b/src/pageComponents/codeTogetherTemplate/GraduateReview/index.ts
new file mode 100644
index 00000000..4afacc33
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/index.ts
@@ -0,0 +1 @@
+export { default as GraduateReview } from "./GraduateReview";
diff --git a/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.docs.mdx b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.docs.mdx
new file mode 100644
index 00000000..33b7f1f8
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.docs.mdx
@@ -0,0 +1,31 @@
+<!-- Custom-MDX-Documentation.mdx -->
+
+### 파일 디렉토리
+
+`/content/javascript/masthead.mdx`
+
+### 예시
+
+```
+---
+templateKey: codeTogether_javascript_masthead
+title: 자바스크립트
+description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."
+targets:
+  - "프로그래밍 기초를 제대로 학습하고 싶은 초보자"
+  - "풀타임 학습이 어려운 직장인, 대학생, 취업 준비생"
+  - "스스로, 또 함께 소프트웨어를 학습하며 성장하고 싶은 분"
+trainingDuration: 파트 1 4주 & 파트 2 4주 (파트 2 시작 전 1주 Break)
+coreTime: 매주 월, 화, 수, 오후 7시~10시
+cost: 파트 당 30만원
+---
+```
+
+### 컬럼별 설명
+
+- title: 제목을 입력할 수 있습니다.
+- description: 제목 아래의 설명을 입력할 수 있습니다.
+- targets: 교육과정 대상자에 보여질 문구들을 입력할 수 있습니다. 작성된 순서되로 보여집니다.
+- trainingDuration: 교육기간 항목의 문구를 입력할 수 있습니다.
+- coreTime: 과정의 코어타임을 입력할 수 있습니다.
+- cost: 비용 항목의 문구를 입력할 수 있습니다.
diff --git a/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx
new file mode 100644
index 00000000..c926be06
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+// Type
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+// Story-Component
+import { Masthead } from ".";
+import MastheadDocs from "./Masthead.docs.mdx";
+
+export default {
+  title: "pagecomponent/code-together/javascript/Masthead",
+  component: Masthead,
+  parameters: {
+    docs: {
+      page: MastheadDocs,
+    },
+  },
+} as ComponentMeta<typeof Masthead>;
+
+const Template: ComponentStory<typeof Masthead> = () => <Masthead />;
+
+export const Default = Template.bind({});
diff --git a/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx
new file mode 100644
index 00000000..83992068
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { useTheme } from "styled-components";
+import { graphql, useStaticQuery } from "gatsby";
+// Components
+import { CourseInfo } from "components";
+// Assets
+import headers from "assets/img/illusts/header";
+import { TITLE } from "assets/static/phrases";
+// Lib
+import { strainMdxInfo } from "lib/utils";
+import { useResponsive } from "lib/hooks";
+import { MasterInfoType } from "@type/Master";
+
+const Masthead: React.FC<{ mastheadInfo: any }> = ({ mastheadInfo }) => {
+  const { isMobile, isTablet } = useResponsive();
+  const { color } = useTheme();
+  const { title, description, targets, courseInfos } = mastheadInfo;
+
+  let backgroundImage = headers.desktopPattern1;
+  if (isMobile) backgroundImage = headers.mobilePattern1;
+  if (isTablet) backgroundImage = headers.tabletPattern1;
+
+  return (
+    <CourseInfo
+      {...{ title, description, targets, courseInfos, backgroundImage }}
+      backgroundColor={color.primary.green4}
+      process={TITLE.CODE_TOGETHER_COURSE}
+    />
+  );
+};
+
+// const JavaScriptMastheadQuery = graphql`
+//   query JavaScriptMastheadQuery {
+//     mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_masthead" } }) {
+//       frontmatter {
+//         title
+//         description
+//         targets
+//         courseInfos {
+//           title
+//           content
+//           img
+//         }
+//       }
+//     }
+//   }
+// `;
+
+export default Masthead;
diff --git a/src/pageComponents/codeTogetherTemplate/Masthead/index.ts b/src/pageComponents/codeTogetherTemplate/Masthead/index.ts
new file mode 100644
index 00000000..97b55bb0
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/Masthead/index.ts
@@ -0,0 +1 @@
+export { default as Masthead } from "./Masthead";
diff --git a/src/pageComponents/codeTogetherTemplate/Registration/Registration.docs.mdx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.docs.mdx
new file mode 100644
index 00000000..0d16539e
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/Registration/Registration.docs.mdx
@@ -0,0 +1,27 @@
+<!-- Custom-MDX-Documentation.mdx -->
+
+### 파일 디렉토리
+
+`/content/javascript/registrations.mdx`
+
+### 예시
+
+```
+---
+templateKey: codeTogether_javascript_registrations
+registrations:
+  - title: "코드투게더 자바스크립트 과정 대기자 신청하기"
+    description: ""
+    caption: "교육 기간 : 2022년 하반기 (예정)"
+    path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform"
+---
+
+```
+
+### 항목별 설명
+
+- registrations: 각 과정에 맞는 항목들을 입력할 수 있습니다.
+  - title: 가운데에 있는 화살표 옆의 큰 글자를 입력할 수 있습니다.
+  - description: 자바스크립트 페이지에서는 사용되지 않는 속성이므로 빈 문자열을 설정합니다.
+  - caption: 추가적으로 설명해주는 캡션을 입력할 수 있습니다.
+  - path: 해당 버튼을 클릭하였을 때 이동될 URL을 입력할 수 있습니다.
diff --git a/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx
new file mode 100644
index 00000000..595158cf
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+// Type
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+// Story-Component
+import { Registration } from ".";
+import RegistrationDocs from "./Registration.docs.mdx";
+
+export default {
+  title: "pagecomponent/code-together/javascript/Registration",
+  component: Registration,
+  parameters: {
+    docs: {
+      page: RegistrationDocs,
+    },
+  },
+} as ComponentMeta<typeof Registration>;
+
+const Template: ComponentStory<typeof Registration> = () => <Registration />;
+
+export const Default = Template.bind({});
diff --git a/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
new file mode 100644
index 00000000..8d8e344c
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { graphql, useStaticQuery } from "gatsby";
+// Type
+import { RegistrationType } from "@type/Registration";
+// Components
+import { Registration } from "components";
+// Libs
+import { strainMdxInfo } from "lib/utils";
+
+const JavascriptRegistration: React.FC<{ data: any }> = ({ data }) => {
+  const { registrations }: { registrations: RegistrationType[] } = strainMdxInfo(data);
+
+  return <Registration {...{ registrations }} />;
+};
+
+// const JavascriptRegistrationQuery = graphql`
+//   query JavascriptRegistrationQuery {
+//     mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_registrations" } }) {
+//       frontmatter {
+//         registrations {
+//           title
+//           description
+//           caption
+//           path
+//         }
+//       }
+//     }
+//   }
+// `;
+
+export default JavascriptRegistration;
diff --git a/src/pageComponents/codeTogetherTemplate/Registration/index.ts b/src/pageComponents/codeTogetherTemplate/Registration/index.ts
new file mode 100644
index 00000000..2636060a
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/Registration/index.ts
@@ -0,0 +1 @@
+export { default as Registration } from "./Registration";
diff --git a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.css b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.css
new file mode 100644
index 00000000..613a00aa
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.css
@@ -0,0 +1,36 @@
+@media screen and (max-width: calc(767px)) {
+  #table {
+    width: 100%;
+  }
+}
+@media (min-width: 768px) and (max-width: calc(1439px)) {
+  #table {
+    width: 100%;
+  }
+}
+@media (min-width: 1440px) {
+  #table {
+    width: 68rem;
+  }
+}
+
+#table {
+  border-collapse: collapse;
+  font-size: 1.4rem;
+  text-align: center;
+}
+
+#table td,
+#table th {
+  vertical-align: middle;
+  border: 1px solid #000;
+  padding: 1.5rem;
+}
+
+#table th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: center;
+  background-color: #04aa6d;
+  color: white;
+}
diff --git a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.docs.mdx b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.docs.mdx
new file mode 100644
index 00000000..74db08fd
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.docs.mdx
@@ -0,0 +1,116 @@
+<!-- Custom-MDX-Documentation.mdx -->
+
+### 파일 디렉토리
+
+`/content/javascript/plan.mdx`
+
+### 예시
+
+```
+---
+templateKey: codeTogether_javascript_plan
+tags:
+  - name: 스스로
+    color: "#FFF4B3"
+
+  - name: 그룹과
+    color: "#B4E791"
+
+  - name: 마스터와
+    color: "#C7E8EF"
+
+  - name: 모두 함께
+    color: "#FF9F92"
+
+planList:
+  - name: 데일리 스크럼
+    description: 그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.
+    color: "#B4E791"
+
+  - name: 모각코(모여서 각자 코딩)
+    description: 모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.
+    color: "#B4E791"
+
+  - name: 그룹 피어세션
+    description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
+    color: "#B4E791"
+
+  - name: 마스터 코드리뷰
+    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.
+    color: "#C7E8EF"
+---
+
+<table id="table">
+  <tr>
+    <td></td>
+    <td>월</td>
+    <td>화</td>
+    <td>수</td>
+    <td>금</td>
+  </tr>
+  <tr>
+    <td>13:00</td>
+    <td colspan="2">미션과 VOD#1 공개</td>
+    <td></td>
+    <td></td>
+  </tr>
+  <tr>
+    <td>19:00</td>
+    <td colspan="3">체크인</td>
+    <td rowspan="3" class="tag3">
+      <div>커뮤니티 이벤트<br/>(2주차)</div>
+      <br/>
+      <div>마스터 특강<br/>(3주차)</div>
+    </td>
+
+  </tr>
+  <tr>
+    <td>19:00 ~ 19:30</td>
+    <td colspan="3" class="tag1">데일리 스크럼</td>
+  </tr>
+  <tr>
+    <td>19:30 ~ 20:30</td>
+    <td rowspan="3">
+      <div>집중 풀이 시간<br/>(모각코 / 2.5h)</div>
+      <br/>
+      <div>VOD#2 공개<br/>(20:30)</div>
+    </td>
+    <td colspan="2" class="tag1">그룹 피어세션</td>
+
+  </tr>
+  <tr>
+    <td>20:30 ~ 21:30</td>
+    <td rowspan="2"><div>집중 풀이 시간<br />(모각코 / 1.5h)</div><br/>
+      <div>VOD#2 공개<br/>(21:00)</div>
+    </td>
+    <td class="tag2">마스터 코드리뷰<br/>(Live)</td>
+    <td rowspan="3"></td>
+  </tr>
+  <tr>
+    <td>21:30 ~ 22:00</td>
+    <td class="tag0">주간 학습정리<br/>및 회고</td>
+  </tr>
+  <tr>
+    <td>22:00</td>
+    <td colspan="2">결과 제출, VOD#3 공개</td>
+    <td></td>
+  </tr>
+</table>
+
+
+```
+
+### 항목별 설명
+
+- tags: 상단의 아이콘에 쓰여질 태그들에 대한 문구와 색상을 입력할 수 있습니다.
+
+  - name: 각 태그에 달릴 이름을 입력할 수 있습니다.
+  - color: 태그의 앞에 붙을 라벨의 색상을 입력할 수 있습니다.
+
+- planList: 각 일정이 어떤 내용을 나타내는지 입력할 수 있습니다.
+  - name: 일정의 이름을 입력할 수 있습니다.
+  - description: 일정에 대한 설명을 입력할 수 있습니다.
+  - color: 각 일정의 이름에 적용될 색상을 입력할 수 있습니다.
+
+밑의 HTML tag를 이용하여 표를 그릴 수 있습니다. 각 태그에 사용된 색상에 맞게 class를 추가해주면 해당 표의 색상이 수정됩니다.
+table tag를 사용하는 간단한 방법은 [해당링크](https://blog.fearcat.in/a?ID=01600-106c5142-8314-4dd2-9830-6e0586e0d3bd) 에서 보실 수 있습니다.
diff --git a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx
new file mode 100644
index 00000000..b9a73008
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+// Type
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+// Story-Component
+import { TimeTable } from ".";
+import TimeTableDocs from "./TimeTable.docs.mdx";
+
+export default {
+  title: "pagecomponent/code-together/javascript/TimeTable",
+  component: TimeTable,
+  parameters: {
+    docs: {
+      page: TimeTableDocs,
+    },
+  },
+} as ComponentMeta<typeof TimeTable>;
+
+const Template: ComponentStory<typeof TimeTable> = () => <TimeTable />;
+
+export const Default = Template.bind({});
diff --git a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx
new file mode 100644
index 00000000..4f40bac9
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx
@@ -0,0 +1,251 @@
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import { graphql, useStaticQuery } from "gatsby";
+import { MDXRenderer } from "gatsby-plugin-mdx";
+import "./TimeTable.css";
+// Type
+import { PlanType, TagType } from "@type/TimeTable";
+// Typography
+import { Typography } from "typography";
+// Components
+import { TitleSet } from "components";
+// Assets
+import { SUBTITLE, TITLE } from "assets/static/phrases";
+// Utils
+import { strainMdxInfoBody } from "lib/utils";
+import { useResponsive } from "lib/hooks";
+
+const TimeTable: React.FC<{data:any}> = ({ data }) => {
+  const { isMobile } = useResponsive();
+  const {
+    color: { greyScale },
+  } = useTheme();
+
+  const { planList, tags, body }: { planList: PlanType[]; tags: TagType[]; body: string } =
+    strainMdxInfoBody(data);
+
+  React.useEffect(() => {
+    tags.forEach((tag, i: number) => {
+      const tdElements = document.getElementsByClassName(`tag${i}`);
+      Array.from(tdElements).forEach((ele: any) => {
+        ele.style.backgroundColor = tag.color;
+      });
+    });
+  }, []);
+
+  return (
+    <TimeTableWrapper>
+      <TitleSet subtitle={SUBTITLE.CODE_TOGETHER} title={TITLE.HOW_STUDY} />
+      <PlanWrapper>
+        <MDXRenderer>{body}</MDXRenderer>
+        <DescriptionWrapper>
+          <TagList>
+            {tags.map(({ color, name }: TagType) => (
+              <TagWrapper key={name}>
+                <TagColor aria-label={`${name}-tag-color`} background={color} />
+                <Typography type="XSBody">{name}</Typography>
+              </TagWrapper>
+            ))}
+          </TagList>
+          <PlanList>
+            {planList.map(({ name, description, color }) => (
+              <PlanListWrapper key={name}>
+                <PlanLabel {...{ color }}>
+                  <Typography type={isMobile ? "MBold" : "SBold"}>{name}</Typography>
+                </PlanLabel>
+                <Typography style={{ color: greyScale.grey1 }} type={isMobile ? "MBody" : "SBody"}>
+                  {description}
+                </Typography>
+              </PlanListWrapper>
+            ))}
+          </PlanList>
+        </DescriptionWrapper>
+      </PlanWrapper>
+    </TimeTableWrapper>
+  );
+};
+
+const TimeTableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  @media ${({ theme }) => theme.device.mobile} {
+    padding: 0 2.4rem;
+    padding-top: 12rem;
+    & > *:not(:last-child) {
+      margin-bottom: 2.4rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    padding: 0 8rem;
+    padding-top: 18rem;
+    & > *:not(:last-child) {
+      margin-bottom: 8rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    width: 106.2rem;
+    padding: 0 18.9rem;
+    padding-top: 18rem;
+    margin: 0 auto;
+    align-items: space-between;
+    & > *:not(:last-child) {
+      margin-bottom: 8rem;
+    }
+  }
+`;
+
+const PlanList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  @media ${({ theme }) => theme.device.mobile} {
+    & > *:not(:last-child) {
+      margin-bottom: 2.4rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    padding-right: 7.9rem;
+    & > *:not(:last-child) {
+      margin-bottom: 2.4rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    width: 30rem;
+    & > *:not(:last-child) {
+      margin-bottom: 2.4rem;
+    }
+  }
+`;
+
+const PlanLabel = styled.div<{ color: string }>`
+  background-color: ${({ color }) => color};
+  border-radius: 99rem;
+  padding: 0.3rem 1.6rem;
+`;
+
+const PlanWrapper = styled.div`
+  display: flex;
+  color: ${({ theme: { color } }) => color.black};
+  @media ${({ theme }) => theme.device.mobile} {
+    flex-direction: column;
+    & > *:not(:last-child) {
+      margin-bottom: 2.4rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    flex-direction: column;
+    & > *:not(:last-child) {
+      margin-bottom: 8rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    justify-content: space-between;
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+`;
+
+const DescriptionWrapper = styled.div`
+  display: flex;
+  @media ${({ theme }) => theme.device.mobile} {
+    flex-direction: column;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    align-items: flex-start;
+    & > *:not(:last-child) {
+      margin-right: 8.7rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    flex-direction: column;
+    margin-left: 8rem;
+  }
+`;
+const PlanListWrapper = styled.li`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  @media ${({ theme }) => theme.device.mobile} {
+    & > *:not(:last-child) {
+      margin-bottom: 1.6rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    & > *:not(:last-child) {
+      margin-bottom: 0.8rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    & > *:not(:last-child) {
+      margin-bottom: 0.8rem;
+    }
+  }
+`;
+const TagColor = styled.div<{ background: string }>`
+  background-color: ${({ background }) => background};
+  border-radius: 50%;
+  width: 1.6rem;
+  height: 1.6rem;
+`;
+const TagList = styled.ul`
+  display: flex;
+  @media ${({ theme }) => theme.device.mobile} {
+    margin-bottom: 4rem;
+    & > *:not(:last-child) {
+      margin-right: 1.6rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    flex-direction: column;
+    & > *:not(:last-child) {
+      margin-bottom: 1.6rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    margin-bottom: 3.2rem;
+    & > *:not(:last-child) {
+      margin-right: 1.6rem;
+    }
+  }
+`;
+const TagWrapper = styled.li`
+  display: flex;
+  align-items: center;
+  @media ${({ theme }) => theme.device.mobile} {
+    & > *:not(:last-child) {
+      margin-right: 0.4rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    width: 7.1rem;
+    & > *:not(:last-child) {
+      margin-right: 0.8rem;
+    }
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    & > *:not(:last-child) {
+      margin-right: 0.4rem;
+    }
+  }
+`;
+
+// const JavascriptTimeTableQuery = graphql`
+//   query JavascriptTimeTableQuery {
+//     mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_plan" } }) {
+//       body
+//       frontmatter {
+//         planList {
+//           name
+//           description
+//           color
+//         }
+//         tags {
+//           name
+//           color
+//         }
+//       }
+//     }
+//   }
+// `;
+
+export default TimeTable;
diff --git a/src/pageComponents/codeTogetherTemplate/TimeTable/index.ts b/src/pageComponents/codeTogetherTemplate/TimeTable/index.ts
new file mode 100644
index 00000000..46d9c8a1
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/TimeTable/index.ts
@@ -0,0 +1 @@
+export { default as TimeTable } from "./TimeTable";
diff --git a/src/pageComponents/codeTogetherTemplate/index.ts b/src/pageComponents/codeTogetherTemplate/index.ts
new file mode 100644
index 00000000..7e01237f
--- /dev/null
+++ b/src/pageComponents/codeTogetherTemplate/index.ts
@@ -0,0 +1,5 @@
+export { Masthead } from "./Masthead";
+export { Registration } from "./Registration";
+export { DetailCurriculum } from "./DetailCurriculum";
+export { TimeTable } from "./TimeTable";
+export { GraduateReview } from "./GraduateReview";
diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx b/src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx
index ed263e93..a3b7d3a7 100644
--- a/src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx
+++ b/src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx
@@ -10,7 +10,7 @@ import { MasterInfo } from "./MasterInfo";
 const Curriculum: React.FC<{ curriculumInfo: CodeTogetherCurriculumType }> = ({
   curriculumInfo,
 }) => {
-  const { subjectList, masterInfo } = curriculumInfo;
+  const { subjectList, masterInfoList } = curriculumInfo;
 
   return (
     <CurriculumWrapper>
@@ -34,7 +34,9 @@ const Curriculum: React.FC<{ curriculumInfo: CodeTogetherCurriculumType }> = ({
           ))}
         </SubjectList>
         <DivideLine />
-        <MasterInfo {...{ masterInfo }} />
+        {masterInfoList.map((masterInfo) => (
+          <MasterInfo {...{ masterInfo }} />
+        ))}
       </CurriculumList>
     </CurriculumWrapper>
   );
diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
index 91e7a0c4..a6ccdd0c 100644
--- a/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
+++ b/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
@@ -5,33 +5,23 @@ import { Typography } from "typography";
 // Components
 import { Avatar } from "components";
 // Assets
-import avatars from "assets/img/avatars";
+import pictures from "assets/img/picture";
 // Libs
 import { useResponsive } from "lib/hooks";
+import { MasterInfoType } from "@type/Master";
 
-type mastersInfo = {
-  avatar: keyof typeof avatars;
-  name: string;
-  position: string;
-  introduce: string;
-  nutshell: string;
-};
-interface IMasterInfo {
-  masterInfo: mastersInfo;
-}
-
-const MasterInfo: React.FC<IMasterInfo> = ({ masterInfo }) => {
+const MasterInfo: React.FC<{ masterInfo: MasterInfoType }> = ({ masterInfo }) => {
   const { isMobile } = useResponsive();
-  const { name, position, nutshell, avatar, introduce } = masterInfo;
+  const { name, position, nutshell, picture, introduce } = masterInfo;
 
   return (
     <MasterInfoWrapper>
       <AvatarWrapper>
         <Avatar
-          key={avatars[avatar]}
+          key={pictures[picture]}
           width={isMobile ? "8rem" : "12rem"}
           height={isMobile ? "8rem" : "12rem"}
-          src={avatars[avatar]}
+          src={pictures[picture]}
         />
       </AvatarWrapper>
       <InfoWrapper>
diff --git a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.tsx b/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.tsx
index 75dfbf46..a953422b 100644
--- a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.tsx
+++ b/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.tsx
@@ -121,8 +121,8 @@ const JavascriptCurriculumQuery = graphql`
               details
               name
             }
-            masterInfo {
-              avatar
+            masterInfoList {
+              picture
               introduce
               name
               nutshell
diff --git a/src/template/codeTogetherTemplate.tsx b/src/template/codeTogetherTemplate.tsx
new file mode 100644
index 00000000..edb3463d
--- /dev/null
+++ b/src/template/codeTogetherTemplate.tsx
@@ -0,0 +1,123 @@
+import React from "react";
+import { graphql, PageProps } from "gatsby";
+// Theme
+import GlobalTheme from "lib/context/GlobalTheme";
+import GlobalHeader from "lib/context/GlobalHeader";
+// Components
+import { HomeGlobalNavigationBar, Footer, FAQ } from "components/";
+import {
+  Masthead,
+  Registration,
+  DetailCurriculum,
+  TimeTable,
+  GraduateReview,
+} from "pageComponents/javascript";
+// Assets
+import { SEO_TITLE, SEO_DESCRIPTION } from "assets/static/seo";
+import { INTERNAL } from "assets/static/urls";
+
+export default ({ data }: PageProps) => {
+  console.log(data);
+
+  return (
+    <GlobalTheme>
+      <GlobalHeader
+        title={SEO_TITLE.JAVASCRIPT}
+        description={SEO_DESCRIPTION.JAVASCRIPT}
+        url={INTERNAL.JAVASCRIPT}
+      />
+      <main style={{ overflowX: "hidden" }}>
+        <HomeGlobalNavigationBar />
+        <Masthead />
+        <Registration />
+        <DetailCurriculum />
+        <TimeTable />
+        <GraduateReview />
+        <FAQ course="javascript" />
+        <Footer />
+      </main>
+    </GlobalTheme>
+  );
+};
+
+export const codeTogetherQuery = graphql`
+  query codeTogetherQuery(
+    $deatilCurriculum: String
+    $graduateReview: String
+    $masthead: String
+    $registration: String
+    $timetable: String
+  ) {
+    allMdx(
+      sort: { order: ASC, fields: [frontmatter___index] }
+      filter: { frontmatter: { templateKey: { glob: $deatilCurriculum } } }
+    ) {
+      edges {
+        node {
+          frontmatter {
+            tabName
+            index
+            subjectList {
+              details
+              name
+            }
+            masterInfoList {
+              picture
+              introduce
+              name
+              nutshell
+              position
+            }
+          }
+        }
+      }
+    }
+    graduateReveiw: mdx(frontmatter: { templateKey: { eq: $graduateReview } }) {
+      frontmatter {
+        interviews {
+          writerPhoto
+          nutshell
+          content
+          writer
+          writerInfo
+        }
+      }
+    }
+    masthead: mdx(frontmatter: { templateKey: { eq: $masthead } }) {
+      frontmatter {
+        title
+        description
+        targets
+        courseInfos {
+          title
+          content
+          img
+        }
+      }
+    }
+    registration: mdx(frontmatter: { templateKey: { eq: $registration } }) {
+      frontmatter {
+        registrations {
+          title
+          description
+          caption
+          path
+        }
+      }
+    }
+    timeTable: mdx(frontmatter: { templateKey: { eq: $timetable } }) {
+      body
+      frontmatter {
+        planList {
+          name
+          description
+          color
+        }
+        tags {
+          name
+          color
+        }
+      }
+    }
+  }
+`;

From 65b0699451b8a46863d24e52e42be36e745d2628 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:08:56 +0900
Subject: [PATCH 13/53] =?UTF-8?q?:sparkles:=20frontmatter=EB=A5=BC=20?=
 =?UTF-8?q?=EC=A0=95=EC=A0=9C=ED=95=B4=EC=A3=BC=EB=8A=94=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/utils/index.ts                 | 1 +
 src/lib/utils/strainFrontmatterInfo.ts | 7 +++++++
 2 files changed, 8 insertions(+)
 create mode 100644 src/lib/utils/strainFrontmatterInfo.ts

diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 80b10acf..a6dfaaba 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -5,4 +5,5 @@ export { default as getSplittedPhrase } from "./getSplittedPhrase";
 export { default as strainMdxInfo } from "./strainMdxInfo";
 export { default as strainAllMdxInfo } from "./strainAllMdxInfo";
 export { default as strainAllMdxInfoBody } from "./strainAllMdxInfoBody";
+export { default as strainFrontmatterInfo } from "./strainFrontmatterInfo";
 export { default as strainMdxInfoBody } from "./strainMdxInfoBody";
diff --git a/src/lib/utils/strainFrontmatterInfo.ts b/src/lib/utils/strainFrontmatterInfo.ts
new file mode 100644
index 00000000..d83f11bc
--- /dev/null
+++ b/src/lib/utils/strainFrontmatterInfo.ts
@@ -0,0 +1,7 @@
+function strainFrontmatterInfo(data: any) {
+  const { frontmatter } = data;
+
+  return frontmatter;
+}
+
+export default strainFrontmatterInfo;

From 1b025aef50388003619042629c49064ae572bc2f Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:09:24 +0900
Subject: [PATCH 14/53] =?UTF-8?q?:bug:=20graduateReveiw=EC=98=A4=ED=83=80?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95,=20=ED=83=80=EC=9E=85=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80,=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=A0=95=EC=A0=9C?=
 =?UTF-8?q?=EA=B0=92=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/template/codeTogetherTemplate.tsx | 48 ++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/template/codeTogetherTemplate.tsx b/src/template/codeTogetherTemplate.tsx
index edb3463d..632d49d1 100644
--- a/src/template/codeTogetherTemplate.tsx
+++ b/src/template/codeTogetherTemplate.tsx
@@ -1,12 +1,17 @@
 import React from "react";
 import { graphql, PageProps } from "gatsby";
+import { type InterviewType } from "@type/Interview";
+import { type MastheadType } from "@type/Masthead";
+import { type RegistrationType } from "@type/Registration";
+import type { PlanType, TagType } from "@type/TimeTable";
+import { type CodeTogetherCurriculumType } from "@type/CodeTogetherCurriculum";
 // Theme
 import GlobalTheme from "lib/context/GlobalTheme";
 import GlobalHeader from "lib/context/GlobalHeader";
 // Components
 import { HomeGlobalNavigationBar, Footer, FAQ } from "components/";
+import { Masthead } from "pageComponents/codeTogetherTemplate";
 import {
-  Masthead,
   Registration,
   DetailCurriculum,
   TimeTable,
@@ -15,10 +20,45 @@ import {
 // Assets
 import { SEO_TITLE, SEO_DESCRIPTION } from "assets/static/seo";
 import { INTERNAL } from "assets/static/urls";
+import { strainAllMdxInfo, strainFrontmatterInfo } from "lib/utils";
 
-export default ({ data }: PageProps) => {
+interface ICodeTogetherTemplateProps {
+  allMdx: {
+    edges: {
+      node: {
+        frontmatter: CodeTogetherCurriculumType[];
+      };
+    };
+  };
+  graduateReview: {
+    frontmatter: InterviewType[];
+  };
+  masthead: {
+    frontmatter: MastheadType;
+  };
+  registration: {
+    frontmatter: RegistrationType;
+  };
+  timeTable: {
+    frontmatter: { planList: PlanType[]; tags: TagType[]; body: string };
+  };
+}
+export default ({ data }: PageProps<ICodeTogetherTemplateProps>) => {
   console.log(data);
+  const { allMdx, graduateReview, masthead, registration, timeTable } = data;
 
+  console.log(allMdx);
+  console.log(graduateReview);
+  console.log(masthead);
+  console.log(registration);
+  console.log(timeTable);
+  const mastheadInfo = strainFrontmatterInfo(masthead);
+  const curriculumInfo = strainAllMdxInfo({ allMdx: allMdx });
+  const graduateReviewInfo = strainFrontmatterInfo(graduateReview);
+  const registrationInfo = strainFrontmatterInfo(registration);
+  const timeTableInfo = strainFrontmatterInfo(timeTable);
+
+  console.log(mastheadInfo);
   return (
     <GlobalTheme>
       <GlobalHeader
@@ -28,7 +68,7 @@ export default ({ data }: PageProps) => {
       />
       <main style={{ overflowX: "hidden" }}>
         <HomeGlobalNavigationBar />
-        <Masthead />
+        <Masthead {...{ mastheadInfo }} />
         <Registration />
         <DetailCurriculum />
         <TimeTable />
@@ -72,7 +112,7 @@ export const codeTogetherQuery = graphql`
         }
       }
     }
-    graduateReveiw: mdx(frontmatter: { templateKey: { eq: $graduateReview } }) {
+    graduateReview: mdx(frontmatter: { templateKey: { eq: $graduateReview } }) {
       frontmatter {
         interviews {
           writerPhoto

From 2d5bb360c4116aa79c4e4ad084a10afb47dd9be7 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:09:44 +0900
Subject: [PATCH 15/53] =?UTF-8?q?:label:=20masthead=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/@type/Masthead.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/@type/Masthead.ts

diff --git a/src/@type/Masthead.ts b/src/@type/Masthead.ts
new file mode 100644
index 00000000..c3e2096f
--- /dev/null
+++ b/src/@type/Masthead.ts
@@ -0,0 +1,14 @@
+import icons from "assets/img/icons";
+
+interface ICourseDetailInfo {
+  title: string;
+  content: string;
+  img: keyof typeof icons;
+}
+
+export interface MastheadType {
+  title: string;
+  description: string;
+  targets: string[];
+  courseInfos: ICourseDetailInfo[];
+}

From 52111c58eefb4fb6e2cef778d1a0f45eac798ed7 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:10:08 +0900
Subject: [PATCH 16/53] =?UTF-8?q?:art:=20masthead=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Masthead/Masthead.tsx                     | 26 +++----------------
 src/template/codeTogetherTemplate.tsx         | 10 ++-----
 2 files changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx
index 83992068..c2070710 100644
--- a/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx
+++ b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx
@@ -1,19 +1,18 @@
 import React from "react";
 import { useTheme } from "styled-components";
-import { graphql, useStaticQuery } from "gatsby";
+import { type MastheadType } from "@type/Masthead";
 // Components
 import { CourseInfo } from "components";
 // Assets
 import headers from "assets/img/illusts/header";
 import { TITLE } from "assets/static/phrases";
 // Lib
-import { strainMdxInfo } from "lib/utils";
 import { useResponsive } from "lib/hooks";
-import { MasterInfoType } from "@type/Master";
 
-const Masthead: React.FC<{ mastheadInfo: any }> = ({ mastheadInfo }) => {
-  const { isMobile, isTablet } = useResponsive();
+const Masthead: React.FC<{ mastheadInfo: MastheadType }> = ({ mastheadInfo }) => {
   const { color } = useTheme();
+  const { isMobile, isTablet } = useResponsive();
+
   const { title, description, targets, courseInfos } = mastheadInfo;
 
   let backgroundImage = headers.desktopPattern1;
@@ -29,21 +28,4 @@ const Masthead: React.FC<{ mastheadInfo: any }> = ({ mastheadInfo }) => {
   );
 };
 
-// const JavaScriptMastheadQuery = graphql`
-//   query JavaScriptMastheadQuery {
-//     mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_masthead" } }) {
-//       frontmatter {
-//         title
-//         description
-//         targets
-//         courseInfos {
-//           title
-//           content
-//           img
-//         }
-//       }
-//     }
-//   }
-// `;
-
 export default Masthead;
diff --git a/src/template/codeTogetherTemplate.tsx b/src/template/codeTogetherTemplate.tsx
index 632d49d1..b5556431 100644
--- a/src/template/codeTogetherTemplate.tsx
+++ b/src/template/codeTogetherTemplate.tsx
@@ -43,22 +43,16 @@ interface ICodeTogetherTemplateProps {
     frontmatter: { planList: PlanType[]; tags: TagType[]; body: string };
   };
 }
+
 export default ({ data }: PageProps<ICodeTogetherTemplateProps>) => {
-  console.log(data);
   const { allMdx, graduateReview, masthead, registration, timeTable } = data;
 
-  console.log(allMdx);
-  console.log(graduateReview);
-  console.log(masthead);
-  console.log(registration);
-  console.log(timeTable);
   const mastheadInfo = strainFrontmatterInfo(masthead);
+  const registrationInfo = strainFrontmatterInfo(registration);
   const curriculumInfo = strainAllMdxInfo({ allMdx: allMdx });
   const graduateReviewInfo = strainFrontmatterInfo(graduateReview);
-  const registrationInfo = strainFrontmatterInfo(registration);
   const timeTableInfo = strainFrontmatterInfo(timeTable);
 
-  console.log(mastheadInfo);
   return (
     <GlobalTheme>
       <GlobalHeader

From 6cec95c9ba34873b295026a8fd1e13653b5dbf7d Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:17:00 +0900
Subject: [PATCH 17/53] =?UTF-8?q?:fire:=20=EC=9E=90=EB=B0=94=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Curriculum/Curriculum.tsx                 | 117 --------
 .../Curriculum/MasterInfo/MasterInfo.test.tsx |  45 ----
 .../Curriculum/MasterInfo/MasterInfo.tsx      | 125 ---------
 .../Curriculum/MasterInfo/index.ts            |   1 -
 .../DetailCurriculum/Curriculum/index.ts      |   1 -
 .../DetailCurriculum.docs.mdx                 |  63 -----
 .../DetailCurriculum.stories.tsx              |  20 --
 .../DetailCurriculum.test.mock.ts             |  78 ------
 .../DetailCurriculum.test.tsx                 |  66 -----
 .../DetailCurriculum/DetailCurriculum.tsx     | 138 ----------
 .../javascript/DetailCurriculum/index.ts      |   1 -
 .../GraduateReview/GraduateReview.docs.mdx    |  38 ---
 .../GraduateReview/GraduateReview.stories.tsx |  20 --
 .../GraduateReview/GraduateReview.tsx         |  46 ----
 .../javascript/GraduateReview/index.ts        |   1 -
 .../javascript/Masthead/Masthead.docs.mdx     |  31 ---
 .../javascript/Masthead/Masthead.stories.tsx  |  20 --
 .../javascript/Masthead/Masthead.test.mock.ts |  31 ---
 .../javascript/Masthead/Masthead.test.tsx     |  51 ----
 .../javascript/Masthead/Masthead.tsx          |  50 ----
 .../javascript/Masthead/index.ts              |   1 -
 .../Registration/Registration.docs.mdx        |  27 --
 .../Registration/Registration.stories.tsx     |  20 --
 .../Registration/Registration.test.mock.ts    |  20 --
 .../Registration/Registration.test.tsx        |  32 ---
 .../javascript/Registration/Registration.tsx  |  32 ---
 .../javascript/Registration/index.ts          |   1 -
 .../javascript/TimeTable/TimeTable.css        |  36 ---
 .../javascript/TimeTable/TimeTable.docs.mdx   | 116 --------
 .../TimeTable/TimeTable.stories.tsx           |  20 --
 .../TimeTable/TimeTable.test.mock.ts          |  51 ----
 .../javascript/TimeTable/TimeTable.test.tsx   |  63 -----
 .../javascript/TimeTable/TimeTable.tsx        | 252 ------------------
 .../javascript/TimeTable/index.ts             |   1 -
 src/pageComponents/javascript/index.ts        |   5 -
 35 files changed, 1620 deletions(-)
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/index.ts
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/Curriculum/index.ts
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.docs.mdx
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.stories.tsx
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.test.mock.ts
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.test.tsx
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.tsx
 delete mode 100644 src/pageComponents/javascript/DetailCurriculum/index.ts
 delete mode 100644 src/pageComponents/javascript/GraduateReview/GraduateReview.docs.mdx
 delete mode 100644 src/pageComponents/javascript/GraduateReview/GraduateReview.stories.tsx
 delete mode 100644 src/pageComponents/javascript/GraduateReview/GraduateReview.tsx
 delete mode 100644 src/pageComponents/javascript/GraduateReview/index.ts
 delete mode 100644 src/pageComponents/javascript/Masthead/Masthead.docs.mdx
 delete mode 100644 src/pageComponents/javascript/Masthead/Masthead.stories.tsx
 delete mode 100644 src/pageComponents/javascript/Masthead/Masthead.test.mock.ts
 delete mode 100644 src/pageComponents/javascript/Masthead/Masthead.test.tsx
 delete mode 100644 src/pageComponents/javascript/Masthead/Masthead.tsx
 delete mode 100644 src/pageComponents/javascript/Masthead/index.ts
 delete mode 100644 src/pageComponents/javascript/Registration/Registration.docs.mdx
 delete mode 100644 src/pageComponents/javascript/Registration/Registration.stories.tsx
 delete mode 100644 src/pageComponents/javascript/Registration/Registration.test.mock.ts
 delete mode 100644 src/pageComponents/javascript/Registration/Registration.test.tsx
 delete mode 100644 src/pageComponents/javascript/Registration/Registration.tsx
 delete mode 100644 src/pageComponents/javascript/Registration/index.ts
 delete mode 100644 src/pageComponents/javascript/TimeTable/TimeTable.css
 delete mode 100644 src/pageComponents/javascript/TimeTable/TimeTable.docs.mdx
 delete mode 100644 src/pageComponents/javascript/TimeTable/TimeTable.stories.tsx
 delete mode 100644 src/pageComponents/javascript/TimeTable/TimeTable.test.mock.ts
 delete mode 100644 src/pageComponents/javascript/TimeTable/TimeTable.test.tsx
 delete mode 100644 src/pageComponents/javascript/TimeTable/TimeTable.tsx
 delete mode 100644 src/pageComponents/javascript/TimeTable/index.ts
 delete mode 100644 src/pageComponents/javascript/index.ts

diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx b/src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx
deleted file mode 100644
index a3b7d3a7..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-// Type
-import { CodeTogetherCurriculumType } from "@type/CodeTogetherCurriculum";
-// Typography
-import { Typography } from "typography";
-// Components
-import { MasterInfo } from "./MasterInfo";
-
-const Curriculum: React.FC<{ curriculumInfo: CodeTogetherCurriculumType }> = ({
-  curriculumInfo,
-}) => {
-  const { subjectList, masterInfoList } = curriculumInfo;
-
-  return (
-    <CurriculumWrapper>
-      <CurriculumList>
-        <SubjectList>
-          {subjectList.map(({ name, details }) => (
-            <SubjectItem key={name}>
-              <SubjectTitle>
-                <Typography type="SHLBold">{name}</Typography>
-              </SubjectTitle>
-              <SubjectDetailList>
-                {details.map((detail) => (
-                  <li key={detail}>
-                    <Typography type="MBody" as="span">
-                      {detail}
-                    </Typography>
-                  </li>
-                ))}
-              </SubjectDetailList>
-            </SubjectItem>
-          ))}
-        </SubjectList>
-        <DivideLine />
-        {masterInfoList.map((masterInfo) => (
-          <MasterInfo {...{ masterInfo }} />
-        ))}
-      </CurriculumList>
-    </CurriculumWrapper>
-  );
-};
-
-const CurriculumWrapper = styled.div`
-  display: flex;
-  @media ${({ theme }) => theme.device.mobile} {
-    width: 100%;
-    padding: 3.2rem 2.4rem;
-    box-sizing: border-box;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    width: 100%;
-    padding: 8rem 8rem;
-    box-sizing: border-box;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    width: 107rem;
-    padding: 8rem 4rem;
-  }
-`;
-
-const CurriculumList = styled.ul`
-  width: 98.2rem;
-`;
-const SubjectList = styled.ul`
-  & > *:not(:first-child) {
-    margin-top: 3rem;
-  }
-`;
-const SubjectItem = styled.li`
-  display: flex;
-  @media ${({ theme }) => theme.device.mobile} {
-    flex-direction: column;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    flex-direction: column;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    & > * {
-      margin-right: 2.4rem;
-    }
-  }
-`;
-const SubjectTitle = styled.h6`
-  color: ${({ theme: { color } }) => color.black};
-  @media ${({ theme }) => theme.device.mobile} {
-    width: 100%;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    width: 100%;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    width: 19rem;
-  }
-`;
-const SubjectDetailList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme: { color } }) => color.greyScale.grey2};
-  list-style: disc;
-  list-style-position: inside;
-  @media ${({ theme }) => theme.device.mobile} {
-    margin-left: 1rem;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    margin-left: 1rem;
-    margin-top: 0.8rem;
-  }
-`;
-const DivideLine = styled.div`
-  border-bottom: 0.1rem solid ${({ theme: { color } }) => color.greyScale.grey4};
-  margin: 5.6rem 0;
-  width: 100%;
-`;
-
-export default Curriculum;
diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx b/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
deleted file mode 100644
index bf85d05e..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-// Testing-Component
-import { MasterInfo } from ".";
-// Assets
-import avatars from "assets/img/avatars";
-// lib
-import { TestProvider } from "lib/testUtils";
-
-describe("<MasterInfo>", () => {
-  const masterInfo = {
-    avatar: "mediumCrong" as keyof typeof avatars,
-    introduce: "매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.",
-    name: "JK",
-    nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”",
-    position: "모바일 iOS 마스터",
-  };
-
-  const renderMasterInfo = () =>
-    render(
-      <TestProvider>
-        <MasterInfo {...{ masterInfo }} />
-      </TestProvider>
-    );
-  it("마스터의 이미지가 보여진다.", async () => {
-    const { getByAltText } = renderMasterInfo();
-
-    const masterAvatar = getByAltText("avatar");
-    expect(masterAvatar.getAttribute("src")).toBe("test-file-stub");
-  });
-  it("마스터의 이름, 직책이 보여진다.", async () => {
-    const { getByText } = renderMasterInfo();
-    const { name, position } = masterInfo;
-
-    getByText(name);
-    getByText(position);
-  });
-  it("마스터의 한마디와 간략한 소개가 보여진다.", async () => {
-    const { getByText } = renderMasterInfo();
-    const { introduce, nutshell } = masterInfo;
-
-    getByText(introduce);
-    getByText(nutshell);
-  });
-});
diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
deleted file mode 100644
index a6ccdd0c..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-// Typography
-import { Typography } from "typography";
-// Components
-import { Avatar } from "components";
-// Assets
-import pictures from "assets/img/picture";
-// Libs
-import { useResponsive } from "lib/hooks";
-import { MasterInfoType } from "@type/Master";
-
-const MasterInfo: React.FC<{ masterInfo: MasterInfoType }> = ({ masterInfo }) => {
-  const { isMobile } = useResponsive();
-  const { name, position, nutshell, picture, introduce } = masterInfo;
-
-  return (
-    <MasterInfoWrapper>
-      <AvatarWrapper>
-        <Avatar
-          key={pictures[picture]}
-          width={isMobile ? "8rem" : "12rem"}
-          height={isMobile ? "8rem" : "12rem"}
-          src={pictures[picture]}
-        />
-      </AvatarWrapper>
-      <InfoWrapper>
-        <NameWrapper>
-          <Typography type="HLBold">{name}</Typography>
-          <PositionWrapper>
-            <Typography type="SBody">{position}</Typography>
-          </PositionWrapper>
-        </NameWrapper>
-        <NutshellWrapper>
-          <Typography type="SHLBold">{nutshell}</Typography>
-        </NutshellWrapper>
-        <IntroduceWrapper>
-          <Typography type="MBody">{introduce}</Typography>
-        </IntroduceWrapper>
-      </InfoWrapper>
-    </MasterInfoWrapper>
-  );
-};
-
-const MasterInfoWrapper = styled.li`
-  display: flex;
-  @media ${({ theme }) => theme.device.mobile} {
-    flex-direction: column;
-  }
-`;
-const AvatarWrapper = styled.div`
-  @media ${({ theme }) => theme.device.mobile} {
-    width: 8rem;
-    height: 8rem;
-    position: absolute;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    width: 12rem;
-    height: 12rem;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    width: 12rem;
-    height: 12rem;
-  }
-`;
-const InfoWrapper = styled.div`
-  @media ${({ theme }) => theme.device.tablet} {
-    margin-left: 4rem;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    margin-left: 4rem;
-  }
-`;
-
-const NameWrapper = styled.div`
-  display: flex;
-  color: ${({ theme: { color } }) => color.black};
-  @media ${({ theme }) => theme.device.mobile} {
-    height: 8rem;
-    margin-left: 9.8rem;
-    flex-direction: column;
-    justify-content: center;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    align-items: flex-end;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    align-items: flex-end;
-  }
-`;
-const PositionWrapper = styled.div`
-  color: ${({ theme: { color } }) => color.greyScale.grey1};
-  @media ${({ theme }) => theme.device.tablet} {
-    padding-left: 0.8rem;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    padding-left: 0.8rem;
-  }
-`;
-const NutshellWrapper = styled.div`
-  color: ${({ theme: { color } }) => color.black};
-  @media ${({ theme }) => theme.device.mobile} {
-    margin-top: 2.4rem;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    margin-top: 1.6rem;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    margin-top: 1.6rem;
-  }
-`;
-const IntroduceWrapper = styled.div`
-  color: ${({ theme: { color } }) => color.greyScale.grey2};
-  @media ${({ theme }) => theme.device.mobile} {
-    margin-top: 1.6rem;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    margin-top: 0.8rem;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    margin-top: 0.8rem;
-  }
-`;
-
-export default MasterInfo;
diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/index.ts b/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/index.ts
deleted file mode 100644
index b060905b..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as MasterInfo } from "./MasterInfo";
diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/index.ts b/src/pageComponents/javascript/DetailCurriculum/Curriculum/index.ts
deleted file mode 100644
index c4cc5385..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/Curriculum/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Curriculum } from "./Curriculum";
diff --git a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.docs.mdx b/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.docs.mdx
deleted file mode 100644
index 4ca65292..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.docs.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
-<!-- Custom-MDX-Documentation.mdx -->
-
-### 파일 디렉토리
-
-`/content/javascript/curriculum_part*.mdx`
-
-### 예시
-
-```
----
-templateKey: codeTogether_javascript_part1
-index: 1
-tabName: 파트 1
-subjectList:
-  - name: 개발 환경, 기본 연산과 조건문
-    details:
-      - vscode 기반 개발환경
-      - 정수/실수를 활용한 연산
-      - 변수를 활용한 복잡한 계산
-
-  - name: 함수
-    details:
-      - 함수 선언과 호출
-      - 연속된 함수 호출과 스택
-      - 변수의 유효범위
-
-  - name: 반복문과 배열
-    details:
-      - 문자열 기본과 반복문
-      - 배열 순회, 선언, 변경
-      - 고차함수
-
-  - name: 객체
-    details:
-      - 객체 정의 및 접근
-      - 객체를 활요한 프로그래밍 기초
-
-masterInfo:
-  avatar: profileCrong
-  name: 크롱
-  position: Crong, 웹 프론트엔드 마스터
-  nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-  introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.
----
-```
-
-### 항목별 설명
-
-- templateKey: codeTogether_javascript_part~ 의 값을 입력해 주어야 페이지에서 인식할 수 있습니다. masters_curriculum~ mdx문서 하나는 한 탭의 내용을 작성할 수 있습니다.
-- index: 탭에 보여질 순서를 입력할 수 있습니다.
-- tabName: 탭에 보여지는 문구를 입력할 수 있습니다.
-- subjectList: 커리큘럼의 각 항목을 보여주는 리스트입니다.
-  - name: 커리큘럼의 이름을 입력할 수 있습니다.
-  - detail: 해당 커리큘럼의 상세내용을 입력할 수 있습니다.
-
----
-
-- masterInfo: 마스터의 정보를 입력하는 곳 입니다.
-  - avatar: 마스터의 이미지로 보여질 파일의 이름을 입력할 수 있습니다.
-  - name: 마스터의 이미지 바로 옆에 보여질 큰 문구를 입력할 수 있습니다.
-  - position: 이름 옆에 적혀질 옅은 회색의 문구를 입력할 수 있습니다.
-  - nutshell: 마스터의 이름 바로 밑에 적혀질 문구를 적을 수 있습니다. 따옴표를 사용하고 싶다면 "“~따옴표를 써보세요”" 와같이 입력하면 됩니다.
-  - introduce: 마스터의 한마디 밑에 적여질 옅은 회색의 문구를 입력할 수 있습니다.
diff --git a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.stories.tsx b/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.stories.tsx
deleted file mode 100644
index 889851d0..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-// Type
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-// Story-Component
-import { DetailCurriculum } from ".";
-import DetailCurriculumDocs from "./DetailCurriculum.docs.mdx";
-
-export default {
-  title: "pagecomponent/code-together/javascript/DetailCurriculum",
-  component: DetailCurriculum,
-  parameters: {
-    docs: {
-      page: DetailCurriculumDocs,
-    },
-  },
-} as ComponentMeta<typeof DetailCurriculum>;
-
-const Template: ComponentStory<typeof DetailCurriculum> = () => <DetailCurriculum />;
-
-export const Default = Template.bind({});
diff --git a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.test.mock.ts b/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.test.mock.ts
deleted file mode 100644
index 0a377b56..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.test.mock.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-export const DetailCurriculumQueryResult = {
-  allMdx: {
-    edges: [
-      {
-        node: {
-          frontmatter: {
-            tabName: "파트 1",
-            index: 1,
-            subjectList: [
-              {
-                details: [
-                  "vscode 기반 개발환경",
-                  "정수/실수를 활용한 연산",
-                  "변수를 활용한 복잡한 계산",
-                ],
-                name: "개발 환경, 기본 연산과 조건문",
-              },
-              {
-                details: ["함수 선언과 호출", "연속된 함수 호출과 스택", "변수의 유효범위"],
-                name: "함수",
-              },
-              {
-                details: ["문자열 기본과 반복문", "배열 순회, 선언, 변경", "고차함수"],
-                name: "반복문과 배열",
-              },
-              {
-                details: ["객체 정의 및 접근", "객체를 활용한 프로그래밍 기초"],
-                name: "객체",
-              },
-            ],
-            masterInfo: {
-              avatar: "crong",
-              name: "크롱",
-              position: "Crong, 웹 프론트엔드 마스터",
-              nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”",
-              introduce:
-                "프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.",
-            },
-          },
-        },
-      },
-      {
-        node: {
-          frontmatter: {
-            tabName: "파트 2",
-            index: 2,
-            subjectList: [
-              {
-                details: ["웹UI 동작 방식", "HTML을 활용한 구조 개발", "CSS를 활용한 스타일 개발"],
-                name: "브라우저 웹 개발",
-              },
-              {
-                details: ["재귀적인 사고를 통한 문제 해결", "무한배열 분석"],
-                name: "재귀",
-              },
-              {
-                details: ["비동기와 동기의 차이", "비동기 제어"],
-                name: "비동기 프로그래밍",
-              },
-              {
-                details: ["자바스크립트 객체와 UI 개발, 웹 애플리케이션 로직 개발"],
-                name: "웹 애플리케이션 개발",
-              },
-            ],
-            masterInfo: {
-              avatar: "crong",
-              name: "크롱",
-              position: "Crong, 웹 프론트엔드 마스터",
-              nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”",
-              introduce:
-                "프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다.",
-            },
-          },
-        },
-      },
-    ],
-  },
-};
diff --git a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.test.tsx b/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.test.tsx
deleted file mode 100644
index fadc0fc1..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.test.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from "react";
-import * as Gatsby from "gatsby";
-import { fireEvent, render } from "@testing-library/react";
-// Type
-import {
-  CodeTogetherCurriculumType,
-  CodeTogetherSubjectInfoType,
-} from "@type/CodeTogetherCurriculum";
-// Testing-Component
-import { DetailCurriculum } from ".";
-// Mock
-import { DetailCurriculumQueryResult } from "./DetailCurriculum.test.mock";
-// lib
-import { TestProvider } from "lib/testUtils";
-import { strainAllMdxInfo } from "lib/utils";
-
-describe("<DetailCurriculum>", () => {
-  const renderDetailCurriculum = () =>
-    render(
-      <TestProvider>
-        <DetailCurriculum />
-      </TestProvider>
-    );
-  const useStaticQuery = jest.spyOn(Gatsby, "useStaticQuery");
-  useStaticQuery.mockImplementation(() => DetailCurriculumQueryResult);
-  const curriculumInfo: CodeTogetherCurriculumType[] = strainAllMdxInfo(
-    DetailCurriculumQueryResult
-  );
-  const titles = curriculumInfo.map(({ tabName }) => tabName);
-  const masters = curriculumInfo.map(({ masterInfo }) => masterInfo);
-  const subjectList = curriculumInfo.map(({ subjectList }) => subjectList);
-  it("각 탭들이 보여진다.", async () => {
-    const { getByText } = renderDetailCurriculum();
-
-    titles.forEach((title: string) => {
-      getByText(title);
-    });
-  });
-  it("각 탭들을 클릭하면 클락한 탭에대한 내용들이 보여진다.", async () => {
-    const { getByText } = renderDetailCurriculum();
-
-    titles.forEach((title, i) => {
-      const tabTitle = getByText(title);
-      fireEvent.click(tabTitle);
-
-      subjectList[i].forEach(({ name, details }: CodeTogetherSubjectInfoType) => {
-        getByText(name);
-      });
-    });
-  });
-  it("각 탭들을 클릭하면 탭에 맞는 마스터의 정보가 보여진다.", async () => {
-    const { getByText } = renderDetailCurriculum();
-
-    titles.forEach((title, i) => {
-      const tabTitle = getByText(title);
-      fireEvent.click(tabTitle);
-
-      const { name, position, introduce, nutshell } = masters[i];
-
-      getByText(name);
-      getByText(position);
-      getByText(introduce);
-      getByText(nutshell);
-    });
-  });
-});
diff --git a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.tsx b/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.tsx
deleted file mode 100644
index a953422b..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { graphql, useStaticQuery } from "gatsby";
-// Type
-import { CodeTogetherCurriculumType } from "@type/CodeTogetherCurriculum";
-// Components
-import { TitleSet, TabNavigationBar } from "components";
-import { Curriculum } from "./Curriculum";
-// Assets
-import { SUBTITLE, TITLE } from "assets/static/phrases";
-// Utils
-import { strainAllMdxInfo } from "lib/utils";
-
-const DetailCurriculum: React.FC = () => {
-  const curriculumInfo: CodeTogetherCurriculumType[] = strainAllMdxInfo(
-    useStaticQuery(JavascriptCurriculumQuery)
-  );
-  const titles = curriculumInfo.map(({ tabName }) => tabName);
-
-  const [curriculumIndex, setCurriculumIndex] = React.useState(0);
-
-  return (
-    <DetailCurriculumWrapper>
-      <TitleSetWrapper>
-        <TitleSet
-          subtitle={SUBTITLE.JAVASCRIPT_COURSE}
-          title={TITLE.JAVASCRIPT_DETAIL_CURRICULUM}
-        />
-      </TitleSetWrapper>
-      <TabNavigationBarWrapper>
-        <TabNavigationBar {...{ titles }} onIndexChanged={setCurriculumIndex} />
-      </TabNavigationBarWrapper>
-      <CurriculumWrapper>
-        <Curriculum {...{ curriculumInfo: curriculumInfo[curriculumIndex] }} />
-      </CurriculumWrapper>
-    </DetailCurriculumWrapper>
-  );
-};
-
-const DetailCurriculumWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  @media ${({ theme }) => theme.device.mobile} {
-    margin-top: 9.7rem;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    margin-top: 18rem;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    margin-top: 18rem;
-    align-items: center;
-    width: 100%;
-    min-width: 144rem;
-  }
-`;
-
-const TitleSetWrapper = styled.div`
-  @media ${({ theme }) => theme.device.mobile} {
-    padding: 0 2.4rem;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    padding: 0 8rem;
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    align-items: center;
-  }
-`;
-
-const TabNavigationBarWrapper = styled.div`
-  @media ${({ theme }) => theme.device.mobile} {
-    padding-top: 2.4rem;
-    padding-left: 2.4rem;
-    overflow-x: auto;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    margin-top: 5.2rem;
-    padding-left: 8.2rem;
-    overflow-x: auto;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    margin: 0 auto;
-    margin-top: 5.2rem;
-    padding: 0 18.9rem;
-    width: 106.2rem;
-  }
-`;
-
-const CurriculumWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  background-color: ${({ theme: { color } }) => color.surface.offWhite1};
-  @media ${({ theme }) => theme.device.mobile} {
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    min-width: 144rem;
-  }
-`;
-
-const JavascriptCurriculumQuery = graphql`
-  query JavascriptCurriculumQuery {
-    allMdx(
-      sort: { order: ASC, fields: [frontmatter___index] }
-      filter: { frontmatter: { templateKey: { glob: "codeTogether_javascript_part*" } } }
-    ) {
-      edges {
-        node {
-          frontmatter {
-            tabName
-            index
-            subjectList {
-              details
-              name
-            }
-            masterInfoList {
-              picture
-              introduce
-              name
-              nutshell
-              position
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
-export default DetailCurriculum;
diff --git a/src/pageComponents/javascript/DetailCurriculum/index.ts b/src/pageComponents/javascript/DetailCurriculum/index.ts
deleted file mode 100644
index 0bfe7304..00000000
--- a/src/pageComponents/javascript/DetailCurriculum/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DetailCurriculum } from "./DetailCurriculum";
diff --git a/src/pageComponents/javascript/GraduateReview/GraduateReview.docs.mdx b/src/pageComponents/javascript/GraduateReview/GraduateReview.docs.mdx
deleted file mode 100644
index ba4f9911..00000000
--- a/src/pageComponents/javascript/GraduateReview/GraduateReview.docs.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-<!-- Custom-MDX-Documentation.mdx -->
-
-### 파일 디렉토리
-
-`/content/javascript/interviews.mdx`
-
-### 예시
-
-```
-templateKey: codeTogether_javascript_reviews
-interviews:
-  - writerPhoto: ""
-    nutshell: 능동적인 학습을 이끌어주는 과정
-    content: 수동적으로 진도를 따라가는 것이 아니라 능동적으로 함께 학습할 수 있습니다. 그 과정을 통해 더욱 잘 이해할 수 있었고, 무엇보다 재미를 느낄 수 있었습니다.
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
-
-  - writerPhoto: ""
-    nutshell: 절대 까먹을 수 없는, 머리와 손이 기억하는 나의 코드들!
-    content: 배우고 돌아서면 까먹는 학습이 아닙니다. 주어진 미션을 함께 해나가는 과정을 통해 하나 하나 모두 내 것이 되는 과정입니다.
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
-
-  - writerPhoto: ""
-    nutshell: 왕초보도 학습 의지만 있다면!
-    content: 프로그래밍 학습 경험이 전혀 없는 왕초보일지라도, 학습 의지만 있다면 도전할 가치가 충분한 과정입니다. 프로그래밍 공부를 어떻게 시작할지 엄두가 나지 않아 망설이고 있다면 적극 추천합니다!
-    writer: 2022년 4월(1기) 수료생
-    writerInfo: ""
-```
-
-### 항목별 설명
-
-- interviewList: 각 인터뷰 카드의 리스트를 나타냅니다. 각 카드의 항목은 아래와 같습니다.
-  - writerPhoto: 이미지 파일의 이름을 입력할 수 있습니다. 새로운 이미지를 사용하기 위해서는 해당 값이 필요할 땐 개발자에게 이미지와 추가적인 배포가 필요합니다. 아무런 값이 없다면 예씨의 이미지가 보여집니다.
-  - nutshell: 큰 따옴표의 옆의 한마디 문구를 입력할 수 있습니다.
-  - content: nutshell 값의 밑에 나타내는 직접적인 인터뷰 내용을 입력할 수 있습니다.
-  - writer: 작성자의 이름을 입력할 수 있습니다.
-  - writerInfo: 작성자 옆의 간단한 정보를 입력할 수 있습니다.
diff --git a/src/pageComponents/javascript/GraduateReview/GraduateReview.stories.tsx b/src/pageComponents/javascript/GraduateReview/GraduateReview.stories.tsx
deleted file mode 100644
index dd3565c3..00000000
--- a/src/pageComponents/javascript/GraduateReview/GraduateReview.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-// Type
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-// Story-Component
-import { GraduateReview } from ".";
-import GraduateReviewDocs from "./GraduateReview.docs.mdx";
-
-export default {
-  title: "pagecomponent/code-together/javascript/GraduateReview",
-  component: GraduateReview,
-  parameters: {
-    docs: {
-      page: GraduateReviewDocs,
-    },
-  },
-} as ComponentMeta<typeof GraduateReview>;
-
-const Template: ComponentStory<typeof GraduateReview> = () => <GraduateReview />;
-
-export const Default = Template.bind({});
diff --git a/src/pageComponents/javascript/GraduateReview/GraduateReview.tsx b/src/pageComponents/javascript/GraduateReview/GraduateReview.tsx
deleted file mode 100644
index e22e17e4..00000000
--- a/src/pageComponents/javascript/GraduateReview/GraduateReview.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import { graphql, useStaticQuery } from "gatsby";
-// Type
-import { InterviewType } from "@type/Interview";
-// Components
-import { Interview } from "components/Interview";
-// Assets
-import { SUBTITLE, TITLE } from "assets/static/phrases";
-// Libs
-import { useResponsive } from "lib/hooks";
-
-const GraduateReview: React.FC = () => {
-  const { isMobile } = useResponsive();
-  const data = useStaticQuery(JavascriptReviewQuery);
-  const { mdx } = data;
-  const { frontmatter } = mdx;
-  const { interviews }: { interviews: InterviewType[] } = frontmatter;
-
-  return (
-    <div style={{ marginTop: isMobile ? "12rem" : "18rem" }}>
-      <Interview
-        subtitle={SUBTITLE.JAVASCRIPT}
-        title={TITLE.STUDENT_INTERVIEW}
-        {...{ interviews }}
-      />
-    </div>
-  );
-};
-
-const JavascriptReviewQuery = graphql`
-  query JavascriptReviewQuery {
-    mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_reviews" } }) {
-      frontmatter {
-        interviews {
-          writerPhoto
-          nutshell
-          content
-          writer
-          writerInfo
-        }
-      }
-    }
-  }
-`;
-
-export default GraduateReview;
diff --git a/src/pageComponents/javascript/GraduateReview/index.ts b/src/pageComponents/javascript/GraduateReview/index.ts
deleted file mode 100644
index 4afacc33..00000000
--- a/src/pageComponents/javascript/GraduateReview/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as GraduateReview } from "./GraduateReview";
diff --git a/src/pageComponents/javascript/Masthead/Masthead.docs.mdx b/src/pageComponents/javascript/Masthead/Masthead.docs.mdx
deleted file mode 100644
index 33b7f1f8..00000000
--- a/src/pageComponents/javascript/Masthead/Masthead.docs.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-<!-- Custom-MDX-Documentation.mdx -->
-
-### 파일 디렉토리
-
-`/content/javascript/masthead.mdx`
-
-### 예시
-
-```
----
-templateKey: codeTogether_javascript_masthead
-title: 자바스크립트
-description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다."
-targets:
-  - "프로그래밍 기초를 제대로 학습하고 싶은 초보자"
-  - "풀타임 학습이 어려운 직장인, 대학생, 취업 준비생"
-  - "스스로, 또 함께 소프트웨어를 학습하며 성장하고 싶은 분"
-trainingDuration: 파트 1 4주 & 파트 2 4주 (파트 2 시작 전 1주 Break)
-coreTime: 매주 월, 화, 수, 오후 7시~10시
-cost: 파트 당 30만원
----
-```
-
-### 컬럼별 설명
-
-- title: 제목을 입력할 수 있습니다.
-- description: 제목 아래의 설명을 입력할 수 있습니다.
-- targets: 교육과정 대상자에 보여질 문구들을 입력할 수 있습니다. 작성된 순서되로 보여집니다.
-- trainingDuration: 교육기간 항목의 문구를 입력할 수 있습니다.
-- coreTime: 과정의 코어타임을 입력할 수 있습니다.
-- cost: 비용 항목의 문구를 입력할 수 있습니다.
diff --git a/src/pageComponents/javascript/Masthead/Masthead.stories.tsx b/src/pageComponents/javascript/Masthead/Masthead.stories.tsx
deleted file mode 100644
index c926be06..00000000
--- a/src/pageComponents/javascript/Masthead/Masthead.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-// Type
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-// Story-Component
-import { Masthead } from ".";
-import MastheadDocs from "./Masthead.docs.mdx";
-
-export default {
-  title: "pagecomponent/code-together/javascript/Masthead",
-  component: Masthead,
-  parameters: {
-    docs: {
-      page: MastheadDocs,
-    },
-  },
-} as ComponentMeta<typeof Masthead>;
-
-const Template: ComponentStory<typeof Masthead> = () => <Masthead />;
-
-export const Default = Template.bind({});
diff --git a/src/pageComponents/javascript/Masthead/Masthead.test.mock.ts b/src/pageComponents/javascript/Masthead/Masthead.test.mock.ts
deleted file mode 100644
index 6533ce39..00000000
--- a/src/pageComponents/javascript/Masthead/Masthead.test.mock.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export const MastHeadQueryResult = {
-  mdx: {
-    frontmatter: {
-      title: "마스터즈 코스",
-      description:
-        "마스터즈 코스는 초보 프로그래머를 벗어나 실무 개발자로 도약하는 데 도움을 주는 코드스쿼드의 정규 과정입니다.",
-      targets: [
-        "프로그래밍 언어를 하나라도 학습해본 경험이 있는 사람",
-        "6개월 이상 프로그래밍을 공부해보았고, 동료와 함께 성장하고 싶은 사람",
-        "실무 프로그래머로 가는 길이 궁금한 사람",
-      ],
-      courseInfos: [
-        {
-          title: "파트 당 4주",
-          content: "파트2 시작 전 1주 브레이크 기간 포함 총 9주",
-          img: "calendar",
-        },
-        {
-          title: "매주 월•화•수, 오후 7시~10시",
-          content: "",
-          img: "clock",
-        },
-        {
-          title: "파트 당 30만원",
-          content: "총 60만원",
-          img: "coin",
-        },
-      ],
-    },
-  },
-};
diff --git a/src/pageComponents/javascript/Masthead/Masthead.test.tsx b/src/pageComponents/javascript/Masthead/Masthead.test.tsx
deleted file mode 100644
index ef1b310c..00000000
--- a/src/pageComponents/javascript/Masthead/Masthead.test.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import * as Gatsby from "gatsby";
-import { render } from "@testing-library/react";
-// Testing-Component
-import { Masthead } from ".";
-// Mock
-import { MastHeadQueryResult } from "./Masthead.test.mock";
-// Lib
-import { strainMdxInfo } from "lib/utils";
-import { TestProvider } from "lib/testUtils";
-
-describe("<Masthead>", () => {
-  const renderMasthead = () =>
-    render(
-      <TestProvider>
-        <Masthead />
-      </TestProvider>
-    );
-  const useStaticQuery = jest.spyOn(Gatsby, "useStaticQuery");
-  useStaticQuery.mockImplementation(() => MastHeadQueryResult);
-  const { title, description, targets, courseInfos } = strainMdxInfo(MastHeadQueryResult);
-  it("제목과 설명이 보여진다.", () => {
-    const { getByText } = renderMasthead();
-
-    getByText(title);
-    getByText(description);
-  });
-  it("교육과정의 대상자가 보여진다.", () => {
-    const { getByText } = renderMasthead();
-
-    targets.forEach((target: string) => {
-      getByText(target);
-    });
-  });
-  it("코스에 대한 정보들의 제목과 설명이 보여진다.", () => {
-    const { getByText } = renderMasthead();
-
-    for (const { title, content } of courseInfos) {
-      getByText(title + (content ? "/" : ""));
-      if (content) getByText(content);
-    }
-  });
-  it("코스에 대한 정보들의 아이콘들이 보여진다.", () => {
-    const { getByAltText } = renderMasthead();
-
-    for (const { img, title } of courseInfos) {
-      const featureImage = getByAltText(`course-info-img-${title}`);
-      expect(featureImage?.getAttribute("src")).toBe("test-file-stub");
-    }
-  });
-});
diff --git a/src/pageComponents/javascript/Masthead/Masthead.tsx b/src/pageComponents/javascript/Masthead/Masthead.tsx
deleted file mode 100644
index 94dc21a2..00000000
--- a/src/pageComponents/javascript/Masthead/Masthead.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-import { useTheme } from "styled-components";
-import { graphql, useStaticQuery } from "gatsby";
-// Components
-import { CourseInfo } from "components";
-// Assets
-import headers from "assets/img/illusts/header";
-import { TITLE } from "assets/static/phrases";
-// Lib
-import { strainMdxInfo } from "lib/utils";
-import { useResponsive } from "lib/hooks";
-
-const Masthead: React.FC = () => {
-  const { isMobile, isTablet } = useResponsive();
-  const { color } = useTheme();
-  const { title, description, targets, courseInfos } = strainMdxInfo(
-    useStaticQuery(JavaScriptMastheadQuery)
-  );
-
-  let backgroundImage = headers.desktopPattern1;
-  if (isMobile) backgroundImage = headers.mobilePattern1;
-  if (isTablet) backgroundImage = headers.tabletPattern1;
-
-  return (
-    <CourseInfo
-      {...{ title, description, targets, courseInfos, backgroundImage }}
-      backgroundColor={color.primary.green4}
-      process={TITLE.CODE_TOGETHER_COURSE}
-    />
-  );
-};
-
-const JavaScriptMastheadQuery = graphql`
-  query JavaScriptMastheadQuery {
-    mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_masthead" } }) {
-      frontmatter {
-        title
-        description
-        targets
-        courseInfos {
-          title
-          content
-          img
-        }
-      }
-    }
-  }
-`;
-
-export default Masthead;
diff --git a/src/pageComponents/javascript/Masthead/index.ts b/src/pageComponents/javascript/Masthead/index.ts
deleted file mode 100644
index 97b55bb0..00000000
--- a/src/pageComponents/javascript/Masthead/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Masthead } from "./Masthead";
diff --git a/src/pageComponents/javascript/Registration/Registration.docs.mdx b/src/pageComponents/javascript/Registration/Registration.docs.mdx
deleted file mode 100644
index 0d16539e..00000000
--- a/src/pageComponents/javascript/Registration/Registration.docs.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-<!-- Custom-MDX-Documentation.mdx -->
-
-### 파일 디렉토리
-
-`/content/javascript/registrations.mdx`
-
-### 예시
-
-```
----
-templateKey: codeTogether_javascript_registrations
-registrations:
-  - title: "코드투게더 자바스크립트 과정 대기자 신청하기"
-    description: ""
-    caption: "교육 기간 : 2022년 하반기 (예정)"
-    path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform"
----
-
-```
-
-### 항목별 설명
-
-- registrations: 각 과정에 맞는 항목들을 입력할 수 있습니다.
-  - title: 가운데에 있는 화살표 옆의 큰 글자를 입력할 수 있습니다.
-  - description: 자바스크립트 페이지에서는 사용되지 않는 속성이므로 빈 문자열을 설정합니다.
-  - caption: 추가적으로 설명해주는 캡션을 입력할 수 있습니다.
-  - path: 해당 버튼을 클릭하였을 때 이동될 URL을 입력할 수 있습니다.
diff --git a/src/pageComponents/javascript/Registration/Registration.stories.tsx b/src/pageComponents/javascript/Registration/Registration.stories.tsx
deleted file mode 100644
index 595158cf..00000000
--- a/src/pageComponents/javascript/Registration/Registration.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-// Type
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-// Story-Component
-import { Registration } from ".";
-import RegistrationDocs from "./Registration.docs.mdx";
-
-export default {
-  title: "pagecomponent/code-together/javascript/Registration",
-  component: Registration,
-  parameters: {
-    docs: {
-      page: RegistrationDocs,
-    },
-  },
-} as ComponentMeta<typeof Registration>;
-
-const Template: ComponentStory<typeof Registration> = () => <Registration />;
-
-export const Default = Template.bind({});
diff --git a/src/pageComponents/javascript/Registration/Registration.test.mock.ts b/src/pageComponents/javascript/Registration/Registration.test.mock.ts
deleted file mode 100644
index 0b9c25a2..00000000
--- a/src/pageComponents/javascript/Registration/Registration.test.mock.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export const RegistrationResult = {
-  mdx: {
-    frontmatter: {
-      registrations: [
-        {
-          title: "자바스크립트 파트1 신청하기",
-          description: "코드투게더 과정",
-          caption: "교육 기간: 2022년 4월 4일 ~ 4월 29일(4주)",
-          path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform",
-        },
-        {
-          title: "자바스크립트 파트2 신청하기",
-          description: "코드투게더 과정",
-          caption: "교육 기간: 2022년 5월 2일 ~ 5월 27일(4주)",
-          path: "https://docs.google.com/forms/d/e/1FAIpQLSdjZIqBAxYHtBxFjXCUD9B5dAljmbMfuPfVTc-DF2xdn1EuCA/viewform",
-        },
-      ],
-    },
-  },
-};
diff --git a/src/pageComponents/javascript/Registration/Registration.test.tsx b/src/pageComponents/javascript/Registration/Registration.test.tsx
deleted file mode 100644
index 6fb73d47..00000000
--- a/src/pageComponents/javascript/Registration/Registration.test.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import * as Gatsby from "gatsby";
-import { render } from "@testing-library/react";
-// Testing-Component
-import { Registration } from ".";
-// Mocks
-import { RegistrationResult } from "./Registration.test.mock";
-// Libs
-import { TestProvider } from "lib/testUtils";
-import { strainMdxInfo } from "lib/utils";
-import { RegistrationType } from "@type/Registration";
-
-describe("<Registration>", () => {
-  const renderRegistration = () =>
-    render(
-      <TestProvider>
-        <Registration />
-      </TestProvider>
-    );
-  const useStaticQuery = jest.spyOn(Gatsby, "useStaticQuery");
-  useStaticQuery.mockImplementation(() => ({ ...RegistrationResult }));
-  const { registrations } = strainMdxInfo(RegistrationResult);
-  it("참여자 모집중인 과정이 보여진다.", async () => {
-    const { getByText, getAllByText } = renderRegistration();
-
-    registrations.forEach(({ title, description, caption }: RegistrationType) => {
-      getByText(title);
-      getAllByText(description);
-      getByText(caption);
-    });
-  });
-});
diff --git a/src/pageComponents/javascript/Registration/Registration.tsx b/src/pageComponents/javascript/Registration/Registration.tsx
deleted file mode 100644
index f8149ca9..00000000
--- a/src/pageComponents/javascript/Registration/Registration.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-import { graphql, useStaticQuery } from "gatsby";
-// Type
-import { RegistrationType } from "@type/Registration";
-// Components
-import { Registration } from "components";
-// Libs
-import { strainMdxInfo } from "lib/utils";
-
-const JavascriptRegistration: React.FC = () => {
-  const data = useStaticQuery(JavascriptRegistrationQuery);
-  const { registrations }: { registrations: RegistrationType[] } = strainMdxInfo(data);
-
-  return <Registration {...{ registrations }} />;
-};
-
-const JavascriptRegistrationQuery = graphql`
-  query JavascriptRegistrationQuery {
-    mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_registrations" } }) {
-      frontmatter {
-        registrations {
-          title
-          description
-          caption
-          path
-        }
-      }
-    }
-  }
-`;
-
-export default JavascriptRegistration;
diff --git a/src/pageComponents/javascript/Registration/index.ts b/src/pageComponents/javascript/Registration/index.ts
deleted file mode 100644
index 2636060a..00000000
--- a/src/pageComponents/javascript/Registration/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Registration } from "./Registration";
diff --git a/src/pageComponents/javascript/TimeTable/TimeTable.css b/src/pageComponents/javascript/TimeTable/TimeTable.css
deleted file mode 100644
index 613a00aa..00000000
--- a/src/pageComponents/javascript/TimeTable/TimeTable.css
+++ /dev/null
@@ -1,36 +0,0 @@
-@media screen and (max-width: calc(767px)) {
-  #table {
-    width: 100%;
-  }
-}
-@media (min-width: 768px) and (max-width: calc(1439px)) {
-  #table {
-    width: 100%;
-  }
-}
-@media (min-width: 1440px) {
-  #table {
-    width: 68rem;
-  }
-}
-
-#table {
-  border-collapse: collapse;
-  font-size: 1.4rem;
-  text-align: center;
-}
-
-#table td,
-#table th {
-  vertical-align: middle;
-  border: 1px solid #000;
-  padding: 1.5rem;
-}
-
-#table th {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  text-align: center;
-  background-color: #04aa6d;
-  color: white;
-}
diff --git a/src/pageComponents/javascript/TimeTable/TimeTable.docs.mdx b/src/pageComponents/javascript/TimeTable/TimeTable.docs.mdx
deleted file mode 100644
index 74db08fd..00000000
--- a/src/pageComponents/javascript/TimeTable/TimeTable.docs.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
-<!-- Custom-MDX-Documentation.mdx -->
-
-### 파일 디렉토리
-
-`/content/javascript/plan.mdx`
-
-### 예시
-
-```
----
-templateKey: codeTogether_javascript_plan
-tags:
-  - name: 스스로
-    color: "#FFF4B3"
-
-  - name: 그룹과
-    color: "#B4E791"
-
-  - name: 마스터와
-    color: "#C7E8EF"
-
-  - name: 모두 함께
-    color: "#FF9F92"
-
-planList:
-  - name: 데일리 스크럼
-    description: 그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.
-    color: "#B4E791"
-
-  - name: 모각코(모여서 각자 코딩)
-    description: 모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.
-    color: "#B4E791"
-
-  - name: 그룹 피어세션
-    description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
-    color: "#B4E791"
-
-  - name: 마스터 코드리뷰
-    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.
-    color: "#C7E8EF"
----
-
-<table id="table">
-  <tr>
-    <td></td>
-    <td>월</td>
-    <td>화</td>
-    <td>수</td>
-    <td>금</td>
-  </tr>
-  <tr>
-    <td>13:00</td>
-    <td colspan="2">미션과 VOD#1 공개</td>
-    <td></td>
-    <td></td>
-  </tr>
-  <tr>
-    <td>19:00</td>
-    <td colspan="3">체크인</td>
-    <td rowspan="3" class="tag3">
-      <div>커뮤니티 이벤트<br/>(2주차)</div>
-      <br/>
-      <div>마스터 특강<br/>(3주차)</div>
-    </td>
-
-  </tr>
-  <tr>
-    <td>19:00 ~ 19:30</td>
-    <td colspan="3" class="tag1">데일리 스크럼</td>
-  </tr>
-  <tr>
-    <td>19:30 ~ 20:30</td>
-    <td rowspan="3">
-      <div>집중 풀이 시간<br/>(모각코 / 2.5h)</div>
-      <br/>
-      <div>VOD#2 공개<br/>(20:30)</div>
-    </td>
-    <td colspan="2" class="tag1">그룹 피어세션</td>
-
-  </tr>
-  <tr>
-    <td>20:30 ~ 21:30</td>
-    <td rowspan="2"><div>집중 풀이 시간<br />(모각코 / 1.5h)</div><br/>
-      <div>VOD#2 공개<br/>(21:00)</div>
-    </td>
-    <td class="tag2">마스터 코드리뷰<br/>(Live)</td>
-    <td rowspan="3"></td>
-  </tr>
-  <tr>
-    <td>21:30 ~ 22:00</td>
-    <td class="tag0">주간 학습정리<br/>및 회고</td>
-  </tr>
-  <tr>
-    <td>22:00</td>
-    <td colspan="2">결과 제출, VOD#3 공개</td>
-    <td></td>
-  </tr>
-</table>
-
-
-```
-
-### 항목별 설명
-
-- tags: 상단의 아이콘에 쓰여질 태그들에 대한 문구와 색상을 입력할 수 있습니다.
-
-  - name: 각 태그에 달릴 이름을 입력할 수 있습니다.
-  - color: 태그의 앞에 붙을 라벨의 색상을 입력할 수 있습니다.
-
-- planList: 각 일정이 어떤 내용을 나타내는지 입력할 수 있습니다.
-  - name: 일정의 이름을 입력할 수 있습니다.
-  - description: 일정에 대한 설명을 입력할 수 있습니다.
-  - color: 각 일정의 이름에 적용될 색상을 입력할 수 있습니다.
-
-밑의 HTML tag를 이용하여 표를 그릴 수 있습니다. 각 태그에 사용된 색상에 맞게 class를 추가해주면 해당 표의 색상이 수정됩니다.
-table tag를 사용하는 간단한 방법은 [해당링크](https://blog.fearcat.in/a?ID=01600-106c5142-8314-4dd2-9830-6e0586e0d3bd) 에서 보실 수 있습니다.
diff --git a/src/pageComponents/javascript/TimeTable/TimeTable.stories.tsx b/src/pageComponents/javascript/TimeTable/TimeTable.stories.tsx
deleted file mode 100644
index b9a73008..00000000
--- a/src/pageComponents/javascript/TimeTable/TimeTable.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-// Type
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-// Story-Component
-import { TimeTable } from ".";
-import TimeTableDocs from "./TimeTable.docs.mdx";
-
-export default {
-  title: "pagecomponent/code-together/javascript/TimeTable",
-  component: TimeTable,
-  parameters: {
-    docs: {
-      page: TimeTableDocs,
-    },
-  },
-} as ComponentMeta<typeof TimeTable>;
-
-const Template: ComponentStory<typeof TimeTable> = () => <TimeTable />;
-
-export const Default = Template.bind({});
diff --git a/src/pageComponents/javascript/TimeTable/TimeTable.test.mock.ts b/src/pageComponents/javascript/TimeTable/TimeTable.test.mock.ts
deleted file mode 100644
index 22645469..00000000
--- a/src/pageComponents/javascript/TimeTable/TimeTable.test.mock.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-export const JavascriptTimeTableQueryResult = {
-  mdx: {
-    body: 'var _excluded = ["components"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  "templateKey": "codeTogether_javascript_plan",\n  "tags": [{\n    "name": "스스로",\n    "color": "#FFF4B3"\n  }, {\n    "name": "그룹과",\n    "color": "#B4E791"\n  }, {\n    "name": "마스터와",\n    "color": "#C7E8EF"\n  }, {\n    "name": "모두함께",\n    "color": "#FF9F92"\n  }],\n  "planList": [{\n    "name": "데일리 스크럼",\n    "description": "그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.",\n    "color": "#B4E791"\n  }, {\n    "name": "모각코(모여서 각자 코딩)",\n    "description": "모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.",\n    "color": "#B4E791"\n  }, {\n    "name": "그룹 피어세션",\n    "description": "이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.",\n    "color": "#B4E791"\n  }, {\n    "name": "마스터 코드리뷰",\n    "description": "미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.",\n    "color": "#C7E8EF"\n  }]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = "wrapper";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: "MDXLayout"\n  }), mdx("table", {\n    id: "table"\n  }, mdx("tr", null, mdx("td", null), mdx("td", null, "\\uC6D4"), mdx("td", null, "\\uD654"), mdx("td", null, "\\uC218"), mdx("td", null, "\\uAE08")), mdx("tr", null, mdx("td", null, "13:00"), mdx("td", {\n    colSpan: "2"\n  }, "\\uBBF8\\uC158\\uACF5\\uAC1C VOD#1 \\uACF5\\uAC1C"), mdx("td", null), mdx("td", null)), mdx("tr", null, mdx("td", null, "19:00"), mdx("td", {\n    colSpan: "3"\n  }, "\\uCCB4\\uD06C\\uC778"), mdx("td", {\n    rowSpan: "3",\n    className: "tag3"\n  }, mdx("div", null, "\\uCEE4\\uBBA4\\uB2C8\\uD2F0 \\uC774\\uBCA4\\uD2B8", mdx("br", null), "(2\\uC8FC\\uCC28)"), mdx("br", null), mdx("div", null, "\\uB9C8\\uC2A4\\uD130 \\uD2B9\\uAC15", mdx("br", null), "(3\\uC8FC\\uCC28)"))), mdx("tr", null, mdx("td", null, "19:00 ~ 19:30"), mdx("td", {\n    colSpan: "3",\n    className: "tag1"\n  }, "\\uB370\\uC77C\\uB9AC \\uC2A4\\uD06C\\uB7FC")), mdx("tr", null, mdx("td", null, "19:30 ~ 20:30"), mdx("td", {\n    rowSpan: "3"\n  }, mdx("div", null, "\\uC9D1\\uC911 \\uD480\\uC774 \\uC2DC\\uAC04", mdx("br", null), "(\\uBAA8\\uAC01\\uCF54 / 2.5h)"), mdx("br", null), mdx("div", null, "VOD#2 \\uACF5\\uAC1C", mdx("br", null), "(20:30)")), mdx("td", {\n    colSpan: "2",\n    className: "tag1"\n  }, "\\uADF8\\uB8F9 \\uD53C\\uC5B4\\uC138\\uC158")), mdx("tr", null, mdx("td", null, "20:30 ~ 21:30"), mdx("td", {\n    rowSpan: "2"\n  }, mdx("div", null, "\\uC9D1\\uC911 \\uD480\\uC774 \\uC2DC\\uAC04", mdx("br", null), "(\\uBAA8\\uAC01\\uCF54 / 1.5h)"), mdx("br", null), mdx("div", null, "VOD#2 \\uACF5\\uAC1C", mdx("br", null), "(21:00)")), mdx("td", {\n    className: "tag2"\n  }, "\\uB9C8\\uC2A4\\uD130 \\uCF54\\uB4DC\\uB9AC\\uBDF0", mdx("br", null), "(Live)"), mdx("td", {\n    rowSpan: "3"\n  })), mdx("tr", null, mdx("td", null, "21:30 ~ 22:00"), mdx("td", {\n    className: "tag0"\n  }, "\\uC8FC\\uAC04 \\uD559\\uC2B5\\uC815\\uB9AC", mdx("br", null), "\\uBC0F \\uD68C\\uACE0")), mdx("tr", null, mdx("td", null, "22:00"), mdx("td", {\n    colSpan: "2"\n  }, "\\uACB0\\uACFC \\uC81C\\uCD9C VOD#3 \\uACF5\\uAC1C"), mdx("td", null))));\n}\n;\nMDXContent.isMDXComponent = true;',
-    frontmatter: {
-      planList: [
-        {
-          name: "데일리 스크럼",
-          description:
-            "그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.",
-          color: "#B4E791",
-        },
-        {
-          name: "모각코(모여서 각자 코딩)",
-          description:
-            "모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.",
-          color: "#B4E791",
-        },
-        {
-          name: "그룹 피어세션",
-          description:
-            "이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.",
-          color: "#B4E791",
-        },
-        {
-          name: "마스터 코드리뷰",
-          description:
-            "미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.",
-          color: "#C7E8EF",
-        },
-      ],
-      tags: [
-        {
-          name: "스스로",
-          color: "#FFF4B3",
-        },
-        {
-          name: "그룹과",
-          color: "#B4E791",
-        },
-        {
-          name: "마스터와",
-          color: "#C7E8EF",
-        },
-        {
-          name: "모두 함께",
-          color: "#FF9F92",
-        },
-      ],
-    },
-  },
-};
diff --git a/src/pageComponents/javascript/TimeTable/TimeTable.test.tsx b/src/pageComponents/javascript/TimeTable/TimeTable.test.tsx
deleted file mode 100644
index 0f6b8fda..00000000
--- a/src/pageComponents/javascript/TimeTable/TimeTable.test.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from "react";
-import * as Gatsby from "gatsby";
-import { render } from "@testing-library/react";
-// Type
-import { PlanType, TagType } from "@type/TimeTable";
-// Testing-Component
-import { TimeTable } from ".";
-// Mocks
-import { JavascriptTimeTableQueryResult } from "./TimeTable.test.mock";
-// Static
-import { SUBTITLE, TITLE } from "assets/static/phrases";
-// Utils
-import { TestProvider } from "lib/testUtils";
-import { strainMdxInfoBody } from "lib/utils";
-
-describe("<TimeTable>", () => {
-  const renderTimeTable = () =>
-    render(
-      <TestProvider>
-        <TimeTable />
-      </TestProvider>
-    );
-  const useStaticQuery = jest.spyOn(Gatsby, "useStaticQuery");
-  useStaticQuery.mockImplementation(() => ({ ...JavascriptTimeTableQueryResult }));
-  const { planList, tags, body } = strainMdxInfoBody(JavascriptTimeTableQueryResult);
-  it("해당 컴포넌트의 제목이 보여진다.", () => {
-    const { getByText } = renderTimeTable();
-
-    getByText(SUBTITLE.CODE_TOGETHER);
-    getByText(TITLE.HOW_STUDY);
-  });
-  it("각 태그의 제목이 보여진다.", () => {
-    const { getByText } = renderTimeTable();
-
-    tags.forEach(({ name }: TagType) => {
-      getByText(name);
-    });
-  });
-  it("각 태그 앞에는 태그별 연관되어 있는 색상을 가진 원이 보여진다.", () => {
-    const { getByLabelText } = renderTimeTable();
-
-    tags.forEach(({ name, color }: TagType) => {
-      const tagColorElement = getByLabelText(`${name}-tag-color`);
-      expect(tagColorElement).toHaveStyle(`background-color: ${color}`);
-    });
-  });
-  it("각 계획의 항목에 대한 이름과 설명이 보여진다.", () => {
-    const { getByText } = renderTimeTable();
-
-    planList.forEach(({ name, description }: PlanType) => {
-      getByText(name);
-      getByText(description);
-    });
-  });
-  it("각 계획의 항목이름은 그에 맞는 색상을 가지고 있다.", () => {
-    const { getByText } = renderTimeTable();
-
-    planList.forEach(({ name, color }: PlanType) => {
-      const label = getByText(name);
-      expect(label.parentElement).toHaveStyle(`background-color: ${color}`);
-    });
-  });
-});
diff --git a/src/pageComponents/javascript/TimeTable/TimeTable.tsx b/src/pageComponents/javascript/TimeTable/TimeTable.tsx
deleted file mode 100644
index 140125b3..00000000
--- a/src/pageComponents/javascript/TimeTable/TimeTable.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import React from "react";
-import styled, { useTheme } from "styled-components";
-import { graphql, useStaticQuery } from "gatsby";
-import { MDXRenderer } from "gatsby-plugin-mdx";
-import "./TimeTable.css";
-// Type
-import { PlanType, TagType } from "@type/TimeTable";
-// Typography
-import { Typography } from "typography";
-// Components
-import { TitleSet } from "components";
-// Assets
-import { SUBTITLE, TITLE } from "assets/static/phrases";
-// Utils
-import { strainMdxInfoBody } from "lib/utils";
-import { useResponsive } from "lib/hooks";
-
-const TimeTable: React.FC = () => {
-  const { isMobile } = useResponsive();
-  const {
-    color: { greyScale },
-  } = useTheme();
-
-  const data = useStaticQuery(JavascriptTimeTableQuery);
-  const { planList, tags, body }: { planList: PlanType[]; tags: TagType[]; body: string } =
-    strainMdxInfoBody(data);
-
-  React.useEffect(() => {
-    tags.forEach((tag, i: number) => {
-      const tdElements = document.getElementsByClassName(`tag${i}`);
-      Array.from(tdElements).forEach((ele: any) => {
-        ele.style.backgroundColor = tag.color;
-      });
-    });
-  }, []);
-
-  return (
-    <TimeTableWrapper>
-      <TitleSet subtitle={SUBTITLE.CODE_TOGETHER} title={TITLE.HOW_STUDY} />
-      <PlanWrapper>
-        <MDXRenderer>{body}</MDXRenderer>
-        <DescriptionWrapper>
-          <TagList>
-            {tags.map(({ color, name }: TagType) => (
-              <TagWrapper key={name}>
-                <TagColor aria-label={`${name}-tag-color`} background={color} />
-                <Typography type="XSBody">{name}</Typography>
-              </TagWrapper>
-            ))}
-          </TagList>
-          <PlanList>
-            {planList.map(({ name, description, color }) => (
-              <PlanListWrapper key={name}>
-                <PlanLabel {...{ color }}>
-                  <Typography type={isMobile ? "MBold" : "SBold"}>{name}</Typography>
-                </PlanLabel>
-                <Typography style={{ color: greyScale.grey1 }} type={isMobile ? "MBody" : "SBody"}>
-                  {description}
-                </Typography>
-              </PlanListWrapper>
-            ))}
-          </PlanList>
-        </DescriptionWrapper>
-      </PlanWrapper>
-    </TimeTableWrapper>
-  );
-};
-
-const TimeTableWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  @media ${({ theme }) => theme.device.mobile} {
-    padding: 0 2.4rem;
-    padding-top: 12rem;
-    & > *:not(:last-child) {
-      margin-bottom: 2.4rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    padding: 0 8rem;
-    padding-top: 18rem;
-    & > *:not(:last-child) {
-      margin-bottom: 8rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    width: 106.2rem;
-    padding: 0 18.9rem;
-    padding-top: 18rem;
-    margin: 0 auto;
-    align-items: space-between;
-    & > *:not(:last-child) {
-      margin-bottom: 8rem;
-    }
-  }
-`;
-
-const PlanList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  @media ${({ theme }) => theme.device.mobile} {
-    & > *:not(:last-child) {
-      margin-bottom: 2.4rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    padding-right: 7.9rem;
-    & > *:not(:last-child) {
-      margin-bottom: 2.4rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    width: 30rem;
-    & > *:not(:last-child) {
-      margin-bottom: 2.4rem;
-    }
-  }
-`;
-
-const PlanLabel = styled.div<{ color: string }>`
-  background-color: ${({ color }) => color};
-  border-radius: 99rem;
-  padding: 0.3rem 1.6rem;
-`;
-
-const PlanWrapper = styled.div`
-  display: flex;
-  color: ${({ theme: { color } }) => color.black};
-  @media ${({ theme }) => theme.device.mobile} {
-    flex-direction: column;
-    & > *:not(:last-child) {
-      margin-bottom: 2.4rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    flex-direction: column;
-    & > *:not(:last-child) {
-      margin-bottom: 8rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    justify-content: space-between;
-    width: 100%;
-    margin: 0 auto;
-    overflow: hidden;
-  }
-`;
-
-const DescriptionWrapper = styled.div`
-  display: flex;
-  @media ${({ theme }) => theme.device.mobile} {
-    flex-direction: column;
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    align-items: flex-start;
-    & > *:not(:last-child) {
-      margin-right: 8.7rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    flex-direction: column;
-    margin-left: 8rem;
-  }
-`;
-const PlanListWrapper = styled.li`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  @media ${({ theme }) => theme.device.mobile} {
-    & > *:not(:last-child) {
-      margin-bottom: 1.6rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    & > *:not(:last-child) {
-      margin-bottom: 0.8rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    & > *:not(:last-child) {
-      margin-bottom: 0.8rem;
-    }
-  }
-`;
-const TagColor = styled.div<{ background: string }>`
-  background-color: ${({ background }) => background};
-  border-radius: 50%;
-  width: 1.6rem;
-  height: 1.6rem;
-`;
-const TagList = styled.ul`
-  display: flex;
-  @media ${({ theme }) => theme.device.mobile} {
-    margin-bottom: 4rem;
-    & > *:not(:last-child) {
-      margin-right: 1.6rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    flex-direction: column;
-    & > *:not(:last-child) {
-      margin-bottom: 1.6rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    margin-bottom: 3.2rem;
-    & > *:not(:last-child) {
-      margin-right: 1.6rem;
-    }
-  }
-`;
-const TagWrapper = styled.li`
-  display: flex;
-  align-items: center;
-  @media ${({ theme }) => theme.device.mobile} {
-    & > *:not(:last-child) {
-      margin-right: 0.4rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.tablet} {
-    width: 7.1rem;
-    & > *:not(:last-child) {
-      margin-right: 0.8rem;
-    }
-  }
-  @media ${({ theme }) => theme.device.desktop} {
-    & > *:not(:last-child) {
-      margin-right: 0.4rem;
-    }
-  }
-`;
-
-const JavascriptTimeTableQuery = graphql`
-  query JavascriptTimeTableQuery {
-    mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_plan" } }) {
-      body
-      frontmatter {
-        planList {
-          name
-          description
-          color
-        }
-        tags {
-          name
-          color
-        }
-      }
-    }
-  }
-`;
-
-export default TimeTable;
diff --git a/src/pageComponents/javascript/TimeTable/index.ts b/src/pageComponents/javascript/TimeTable/index.ts
deleted file mode 100644
index 46d9c8a1..00000000
--- a/src/pageComponents/javascript/TimeTable/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as TimeTable } from "./TimeTable";
diff --git a/src/pageComponents/javascript/index.ts b/src/pageComponents/javascript/index.ts
deleted file mode 100644
index 7e01237f..00000000
--- a/src/pageComponents/javascript/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { Masthead } from "./Masthead";
-export { Registration } from "./Registration";
-export { DetailCurriculum } from "./DetailCurriculum";
-export { TimeTable } from "./TimeTable";
-export { GraduateReview } from "./GraduateReview";

From 8dfe168eeb6e7fbdb7e5bb01a8481cd588927c21 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:42:01 +0900
Subject: [PATCH 18/53] =?UTF-8?q?:fire:=20=EC=9E=90=EB=B0=94=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A6=BD=ED=8A=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/code-together/javascript/index.tsx  | 40 -------------------
 .../javascript/javascript.stories.tsx         | 14 -------
 2 files changed, 54 deletions(-)
 delete mode 100644 src/pages/code-together/javascript/index.tsx
 delete mode 100644 src/pages/code-together/javascript/javascript.stories.tsx

diff --git a/src/pages/code-together/javascript/index.tsx b/src/pages/code-together/javascript/index.tsx
deleted file mode 100644
index dd4d06f0..00000000
--- a/src/pages/code-together/javascript/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from "react";
-// Theme
-import GlobalTheme from "lib/context/GlobalTheme";
-import GlobalHeader from "lib/context/GlobalHeader";
-// Components
-import { HomeGlobalNavigationBar, Footer, FAQ } from "components/";
-import {
-  Masthead,
-  Registration,
-  DetailCurriculum,
-  TimeTable,
-  GraduateReview,
-} from "pageComponents/javascript";
-// Assets
-import { SEO_TITLE, SEO_DESCRIPTION } from "assets/static/seo";
-import { INTERNAL } from "assets/static/urls";
-
-const JavascriptPage: React.FC = () => {
-  return (
-    <GlobalTheme>
-      <GlobalHeader
-        title={SEO_TITLE.JAVASCRIPT}
-        description={SEO_DESCRIPTION.JAVASCRIPT}
-        url={INTERNAL.JAVASCRIPT}
-      />
-      <main style={{ overflowX: "hidden" }}>
-        <HomeGlobalNavigationBar />
-        <Masthead />
-        <Registration />
-        <DetailCurriculum />
-        <TimeTable />
-        <GraduateReview />
-        <FAQ course="javascript" />
-        <Footer />
-      </main>
-    </GlobalTheme>
-  );
-};
-
-export default JavascriptPage;
diff --git a/src/pages/code-together/javascript/javascript.stories.tsx b/src/pages/code-together/javascript/javascript.stories.tsx
deleted file mode 100644
index 30376bde..00000000
--- a/src/pages/code-together/javascript/javascript.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-// Type
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-// Story-Component
-import JavascriptPage from ".";
-
-export default {
-  title: "page/code-together/javascript",
-  component: JavascriptPage,
-} as ComponentMeta<typeof JavascriptPage>;
-
-const Template: ComponentStory<typeof JavascriptPage> = () => <JavascriptPage />;
-
-export const Default = Template.bind({});

From ea63d9b54e7e9f66202da2dbaa76f8677930a43e Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:42:38 +0900
Subject: [PATCH 19/53] =?UTF-8?q?:art:=20=EB=A7=88=EC=8A=A4=ED=84=B0=20?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EC=97=90=20key?=
 =?UTF-8?q?=EA=B0=92=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailCurriculum/Curriculum/Curriculum.tsx                  | 2 +-
 .../masters/DetailCurriculum/Curriculum/Curriculum.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx
index a3b7d3a7..acd8e3c5 100644
--- a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx
@@ -35,7 +35,7 @@ const Curriculum: React.FC<{ curriculumInfo: CodeTogetherCurriculumType }> = ({
         </SubjectList>
         <DivideLine />
         {masterInfoList.map((masterInfo) => (
-          <MasterInfo {...{ masterInfo }} />
+          <MasterInfo key={masterInfo.name} {...{ masterInfo }} />
         ))}
       </CurriculumList>
     </CurriculumWrapper>
diff --git a/src/pageComponents/masters/DetailCurriculum/Curriculum/Curriculum.tsx b/src/pageComponents/masters/DetailCurriculum/Curriculum/Curriculum.tsx
index 20a0c5e7..16ffc903 100644
--- a/src/pageComponents/masters/DetailCurriculum/Curriculum/Curriculum.tsx
+++ b/src/pageComponents/masters/DetailCurriculum/Curriculum/Curriculum.tsx
@@ -37,7 +37,7 @@ const Curriculum: React.FC<{ curriculumInfo: CurriculumType }> = ({ curriculumIn
           </li>
         ))}
         {masterInfoList.map((masterInfo) => (
-          <MasterInfo {...{ masterInfo }} />
+          <MasterInfo key={masterInfo.name} {...{ masterInfo }} />
         ))}
       </CurriculumList>
     </CurriculumWrapper>

From 774a2839f8059144532ca9f4c0b7e4f538f69379 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:42:51 +0900
Subject: [PATCH 20/53] =?UTF-8?q?:white=5Fcheck=5Fmark:=20=EB=A7=88?=
 =?UTF-8?q?=EC=8A=A4=ED=84=B0=EC=A6=88=20=EB=A7=81=ED=81=AC=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/CourseList/CourseList.test.tsx              | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/pageComponents/main/CourseList/CourseList.test.tsx b/src/pageComponents/main/CourseList/CourseList.test.tsx
index d21f2398..5e44a016 100644
--- a/src/pageComponents/main/CourseList/CourseList.test.tsx
+++ b/src/pageComponents/main/CourseList/CourseList.test.tsx
@@ -23,20 +23,12 @@ describe("<CourseList>", () => {
     const [preCourseLink] = getAllByRole("link");
     expect(preCourseLink?.getAttribute("href")).toBe(INTERNAL.PRE_COURSE);
   });
-  it("마스터즈•max 링크가 보여진다.", async () => {
-    const { getByText, getAllByRole } = renderCourseList();
-    getByText(LINK.MASTERS_MAX);
-    getByText(LINK_DESCRIPTION.MASTERS);
-
-    const [_, mastersLink] = getAllByRole("link");
-    expect(mastersLink?.getAttribute("href")).toBe(INTERNAL.MASTERS);
-  });
-  it("코드투게더 링크가 보여진다..", async () => {
+  it("코드투게더 링크가 보여진다.", async () => {
     const { getByText, getAllByRole } = renderCourseList();
     getByText(LINK.CODE_TOGETHER);
     getByText(LINK_DESCRIPTION.CODE_TOGETHER);
 
-    const [_, __, codeTogetherLink] = getAllByRole("link");
+    const [_, codeTogetherLink] = getAllByRole("link");
     expect(codeTogetherLink?.getAttribute("href")).toBe(INTERNAL.CODE_TOGETHER);
   });
 });

From 6708afee92da460b3a6d56798c3ccf4b086f298c Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:43:46 +0900
Subject: [PATCH 21/53] =?UTF-8?q?:white=5Fcheck=5Fmark:=20masterInfo=20pro?=
 =?UTF-8?q?ps=EA=B0=92=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Curriculum/MasterInfo/MasterInfo.test.tsx                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx b/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
index bf85d05e..12c40627 100644
--- a/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
+++ b/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
@@ -3,13 +3,13 @@ import { render } from "@testing-library/react";
 // Testing-Component
 import { MasterInfo } from ".";
 // Assets
-import avatars from "assets/img/avatars";
+import pictures from "assets/img/picture";
 // lib
 import { TestProvider } from "lib/testUtils";
 
 describe("<MasterInfo>", () => {
   const masterInfo = {
-    avatar: "mediumCrong" as keyof typeof avatars,
+    picture: "crong" as keyof typeof pictures,
     introduce: "매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.",
     name: "JK",
     nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”",

From 82d52177736507d598bf77997487f90ddd0e914b Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 17:45:24 +0900
Subject: [PATCH 22/53] =?UTF-8?q?:white=5Fcheck=5Fmark:=20detailCurriculum?=
 =?UTF-8?q?=EC=9D=98=20masterInfo=EA=B4=80=EB=A0=A8=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailCurriculum.test.mock.ts             | 50 +++++++++++--------
 .../DetailCurriculum.test.tsx                 |  4 +-
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.mock.ts b/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.mock.ts
index 5e63fdbd..4aae4605 100644
--- a/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.mock.ts
+++ b/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.mock.ts
@@ -66,13 +66,15 @@ export const DetailCurriculumQueryResult = {
                 ],
               },
             ],
-            masterInfo: {
-              avatar: "crong",
-              introduce: "바닐라JS를 좋아하고, UX향상에 도움이 되는 개발 방법에 관심이 많아요",
-              name: "크롱",
-              nutshell: '"바닐라JS에서 프레임웍까지 프론트엔드 최고의 커리큘럼으로 배우세요"',
-              position: "Crong, 웹 프론트엔드 마스터",
-            },
+            masterInfoList: [
+              {
+                picture: "crong",
+                introduce: "바닐라JS를 좋아하고, UX향상에 도움이 되는 개발 방법에 관심이 많아요",
+                name: "크롱",
+                nutshell: '"바닐라JS에서 프레임웍까지 프론트엔드 최고의 커리큘럼으로 배우세요"',
+                position: "Crong, 웹 프론트엔드 마스터",
+              },
+            ],
           },
         },
       },
@@ -125,14 +127,16 @@ export const DetailCurriculumQueryResult = {
                 ],
               },
             ],
-            masterInfo: {
-              avatar: "honux",
-              introduce:
-                "자바, 스프링, 데이터베이스,HTTP, 클라우드도 배우지만 함께 배우고, 함께 자라는 법도 익힙니다.",
-              name: "호눅스",
-              nutshell: '"서버 인프라 뿐만 아니라 사람과도 협업을 하며 성장하는 방법을 배웁니다"',
-              position: "Honux, 웹 백엔드 마스터",
-            },
+            masterInfoList: [
+              {
+                picture: "honux",
+                introduce:
+                  "자바, 스프링, 데이터베이스,HTTP, 클라우드도 배우지만 함께 배우고, 함께 자라는 법도 익힙니다.",
+                name: "호눅스",
+                nutshell: '"서버 인프라 뿐만 아니라 사람과도 협업을 하며 성장하는 방법을 배웁니다"',
+                position: "Honux, 웹 백엔드 마스터",
+              },
+            ],
           },
         },
       },
@@ -189,13 +193,15 @@ export const DetailCurriculumQueryResult = {
                 ],
               },
             ],
-            masterInfo: {
-              avatar: "jk",
-              introduce: "매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.",
-              name: "JK",
-              nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”",
-              position: "모바일 iOS 마스터",
-            },
+            masterInfoList: [
+              {
+                picture: "jk",
+                introduce: "매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.",
+                name: "JK",
+                nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”",
+                position: "모바일 iOS 마스터",
+              },
+            ],
           },
         },
       },
diff --git a/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.tsx b/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.tsx
index 0088e131..57c53600 100644
--- a/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.tsx
+++ b/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.tsx
@@ -50,13 +50,13 @@ describe("<DetailCurriculum>", () => {
     const { getByText } = renderDetailCurriculum();
     const curriculumInfo: CurriculumType[] = strainAllMdxInfo(DetailCurriculumQueryResult);
     const titles = curriculumInfo.map(({ tabName }) => tabName);
-    const masters = curriculumInfo.map(({ masterInfo }) => masterInfo);
+    const masters = curriculumInfo.map(({ masterInfoList }) => masterInfoList);
 
     titles.forEach((title, i) => {
       const tabTitle = getByText(title);
       fireEvent.click(tabTitle);
 
-      const { name, position, introduce, nutshell } = masters[i];
+      const { name, position, introduce, nutshell } = masters[i][0];
 
       getByText(name);
       getByText(position);

From 20c40ed84ac5f745d9277ed08926f701fed31548 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 18:01:47 +0900
Subject: [PATCH 23/53] =?UTF-8?q?:speech=5Fballoon:=20deatil=EA=B0=92=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/code-together/course/clean-frontend/curriculum_part1.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/content/code-together/course/clean-frontend/curriculum_part1.mdx b/content/code-together/course/clean-frontend/curriculum_part1.mdx
index aa006279..f5faf876 100644
--- a/content/code-together/course/clean-frontend/curriculum_part1.mdx
+++ b/content/code-together/course/clean-frontend/curriculum_part1.mdx
@@ -25,6 +25,7 @@ subjectList:
 
   - name: 리팩토링과 UI테스팅
     details:
+      - ""
 
 masterInfoList:
   - picture: crong

From 16df6f08756ff901dc0932a8f9380e9ba428957f Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 18:02:00 +0900
Subject: [PATCH 24/53] =?UTF-8?q?:art:=20console.log=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatsby-node.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/gatsby-node.ts b/gatsby-node.ts
index 3f9042e9..559a7aab 100644
--- a/gatsby-node.ts
+++ b/gatsby-node.ts
@@ -38,7 +38,7 @@ const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
       component: codeTogetherTemplate,
       context: {
         masthead: `codeTogether_${courseName}_masthead`,
-        registration: `codeTogether_${courseName}_plan`,
+        registration: `codeTogether_${courseName}_registrations`,
         deatilCurriculum: `codeTogether_${courseName}_part*`,
         timetable: `codeTogether_${courseName}_plan`,
         graduateReview: `codeTogether_${courseName}_reviews`,

From 65edce09219651577f5c24a27fc7165a058b5d4c Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 18:03:24 +0900
Subject: [PATCH 25/53] =?UTF-8?q?:art:=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=AA=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Registration/Registration.tsx             | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
index 8d8e344c..436d9ace 100644
--- a/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
+++ b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
@@ -4,28 +4,11 @@ import { graphql, useStaticQuery } from "gatsby";
 import { RegistrationType } from "@type/Registration";
 // Components
 import { Registration } from "components";
-// Libs
-import { strainMdxInfo } from "lib/utils";
-
-const JavascriptRegistration: React.FC<{ data: any }> = ({ data }) => {
-  const { registrations }: { registrations: RegistrationType[] } = strainMdxInfo(data);
 
+const CodeTogetherRegistration: React.FC<{ registrations: RegistrationType[] }> = ({
+  registrations,
+}) => {
   return <Registration {...{ registrations }} />;
 };
 
-// const JavascriptRegistrationQuery = graphql`
-//   query JavascriptRegistrationQuery {
-//     mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_registrations" } }) {
-//       frontmatter {
-//         registrations {
-//           title
-//           description
-//           caption
-//           path
-//         }
-//       }
-//     }
-//   }
-// `;
-
-export default JavascriptRegistration;
+export default CodeTogetherRegistration;

From 0218600faa4675190939098a80f6545b1ec5bf1a Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 18:10:13 +0900
Subject: [PATCH 26/53] =?UTF-8?q?:sparkles:=20=EB=8B=A4=EC=9D=B4=EB=82=98?=
 =?UTF-8?q?=EB=AF=B9=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=9C=EC=9E=91=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/utils/index.ts                        |  1 +
 src/lib/utils/strainFrontmatterInfoBody.ts    |  7 ++++++
 .../Curriculum/MasterInfo/MasterInfo.tsx      | 22 +++++------------
 .../DetailCurriculum/DetailCurriculum.tsx     |  1 -
 .../GraduateReview/GraduateReview.tsx         | 24 ++++---------------
 .../TimeTable/TimeTable.tsx                   |  7 +++---
 src/template/codeTogetherTemplate.tsx         | 22 +++++++++--------
 7 files changed, 34 insertions(+), 50 deletions(-)
 create mode 100644 src/lib/utils/strainFrontmatterInfoBody.ts

diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index a6dfaaba..75dfad7d 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -6,4 +6,5 @@ export { default as strainMdxInfo } from "./strainMdxInfo";
 export { default as strainAllMdxInfo } from "./strainAllMdxInfo";
 export { default as strainAllMdxInfoBody } from "./strainAllMdxInfoBody";
 export { default as strainFrontmatterInfo } from "./strainFrontmatterInfo";
+export { default as strainFrontmatterInfoBody } from "./strainFrontmatterInfoBody";
 export { default as strainMdxInfoBody } from "./strainMdxInfoBody";
diff --git a/src/lib/utils/strainFrontmatterInfoBody.ts b/src/lib/utils/strainFrontmatterInfoBody.ts
new file mode 100644
index 00000000..2878a485
--- /dev/null
+++ b/src/lib/utils/strainFrontmatterInfoBody.ts
@@ -0,0 +1,7 @@
+function strainFrontmatterInfoBody(data: any) {
+  const { frontmatter, body } = data;
+
+  return { ...frontmatter, body };
+}
+
+export default strainFrontmatterInfoBody;
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
index 91e7a0c4..a6ccdd0c 100644
--- a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
@@ -5,33 +5,23 @@ import { Typography } from "typography";
 // Components
 import { Avatar } from "components";
 // Assets
-import avatars from "assets/img/avatars";
+import pictures from "assets/img/picture";
 // Libs
 import { useResponsive } from "lib/hooks";
+import { MasterInfoType } from "@type/Master";
 
-type mastersInfo = {
-  avatar: keyof typeof avatars;
-  name: string;
-  position: string;
-  introduce: string;
-  nutshell: string;
-};
-interface IMasterInfo {
-  masterInfo: mastersInfo;
-}
-
-const MasterInfo: React.FC<IMasterInfo> = ({ masterInfo }) => {
+const MasterInfo: React.FC<{ masterInfo: MasterInfoType }> = ({ masterInfo }) => {
   const { isMobile } = useResponsive();
-  const { name, position, nutshell, avatar, introduce } = masterInfo;
+  const { name, position, nutshell, picture, introduce } = masterInfo;
 
   return (
     <MasterInfoWrapper>
       <AvatarWrapper>
         <Avatar
-          key={avatars[avatar]}
+          key={pictures[picture]}
           width={isMobile ? "8rem" : "12rem"}
           height={isMobile ? "8rem" : "12rem"}
-          src={avatars[avatar]}
+          src={pictures[picture]}
         />
       </AvatarWrapper>
       <InfoWrapper>
diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx
index 1e6aa489..f956c843 100644
--- a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { graphql, useStaticQuery } from "gatsby";
 // Type
 import { CodeTogetherCurriculumType } from "@type/CodeTogetherCurriculum";
 // Components
diff --git a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
index c7d7b22e..a0bd819a 100644
--- a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
+++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
@@ -9,12 +9,12 @@ import { SUBTITLE, TITLE } from "assets/static/phrases";
 // Libs
 import { useResponsive } from "lib/hooks";
 
-const GraduateReview: React.FC<{ data: any }> = ({ data }) => {
+const GraduateReview: React.FC<{ graduateReviewInfo: { interviews: InterviewType[] } }> = ({
+  graduateReviewInfo,
+}) => {
   const { isMobile } = useResponsive();
 
-  const { mdx } = data;
-  const { frontmatter } = mdx;
-  const { interviews }: { interviews: InterviewType[] } = frontmatter;
+  const { interviews } = graduateReviewInfo;
 
   return (
     <div style={{ marginTop: isMobile ? "12rem" : "18rem" }}>
@@ -27,20 +27,4 @@ const GraduateReview: React.FC<{ data: any }> = ({ data }) => {
   );
 };
 
-// const JavascriptReviewQuery = graphql`
-//   query JavascriptReviewQuery {
-//     mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_reviews" } }) {
-//       frontmatter {
-//         interviews {
-//           writerPhoto
-//           nutshell
-//           content
-//           writer
-//           writerInfo
-//         }
-//       }
-//     }
-//   }
-// `;
-
 export default GraduateReview;
diff --git a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx
index 4f40bac9..83dfd8f8 100644
--- a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx
+++ b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx
@@ -15,14 +15,15 @@ import { SUBTITLE, TITLE } from "assets/static/phrases";
 import { strainMdxInfoBody } from "lib/utils";
 import { useResponsive } from "lib/hooks";
 
-const TimeTable: React.FC<{data:any}> = ({ data }) => {
+const TimeTable: React.FC<{
+  timeTableInfo: { planList: PlanType[]; tags: TagType[]; body: string };
+}> = ({ timeTableInfo }) => {
   const { isMobile } = useResponsive();
   const {
     color: { greyScale },
   } = useTheme();
 
-  const { planList, tags, body }: { planList: PlanType[]; tags: TagType[]; body: string } =
-    strainMdxInfoBody(data);
+  const { planList, tags, body } = timeTableInfo;
 
   React.useEffect(() => {
     tags.forEach((tag, i: number) => {
diff --git a/src/template/codeTogetherTemplate.tsx b/src/template/codeTogetherTemplate.tsx
index b5556431..6ac435b1 100644
--- a/src/template/codeTogetherTemplate.tsx
+++ b/src/template/codeTogetherTemplate.tsx
@@ -10,17 +10,17 @@ import GlobalTheme from "lib/context/GlobalTheme";
 import GlobalHeader from "lib/context/GlobalHeader";
 // Components
 import { HomeGlobalNavigationBar, Footer, FAQ } from "components/";
-import { Masthead } from "pageComponents/codeTogetherTemplate";
 import {
+  Masthead,
   Registration,
   DetailCurriculum,
   TimeTable,
   GraduateReview,
-} from "pageComponents/javascript";
+} from "pageComponents/codeTogetherTemplate";
 // Assets
 import { SEO_TITLE, SEO_DESCRIPTION } from "assets/static/seo";
 import { INTERNAL } from "assets/static/urls";
-import { strainAllMdxInfo, strainFrontmatterInfo } from "lib/utils";
+import { strainAllMdxInfo, strainFrontmatterInfo, strainFrontmatterInfoBody } from "lib/utils";
 
 interface ICodeTogetherTemplateProps {
   allMdx: {
@@ -31,7 +31,9 @@ interface ICodeTogetherTemplateProps {
     };
   };
   graduateReview: {
-    frontmatter: InterviewType[];
+    frontmatter: {
+      interviews: InterviewType[];
+    };
   };
   masthead: {
     frontmatter: MastheadType;
@@ -48,10 +50,10 @@ export default ({ data }: PageProps<ICodeTogetherTemplateProps>) => {
   const { allMdx, graduateReview, masthead, registration, timeTable } = data;
 
   const mastheadInfo = strainFrontmatterInfo(masthead);
-  const registrationInfo = strainFrontmatterInfo(registration);
+  const { registrations } = strainFrontmatterInfo(registration);
   const curriculumInfo = strainAllMdxInfo({ allMdx: allMdx });
+  const timeTableInfo = strainFrontmatterInfoBody(timeTable);
   const graduateReviewInfo = strainFrontmatterInfo(graduateReview);
-  const timeTableInfo = strainFrontmatterInfo(timeTable);
 
   return (
     <GlobalTheme>
@@ -63,10 +65,10 @@ export default ({ data }: PageProps<ICodeTogetherTemplateProps>) => {
       <main style={{ overflowX: "hidden" }}>
         <HomeGlobalNavigationBar />
         <Masthead {...{ mastheadInfo }} />
-        <Registration />
-        <DetailCurriculum />
-        <TimeTable />
-        <GraduateReview />
+        <Registration {...{ registrations }} />
+        <DetailCurriculum {...{ curriculumInfo }} />
+        <TimeTable {...{ timeTableInfo }} />
+        <GraduateReview {...{ graduateReviewInfo }} />
         <FAQ course="javascript" />
         <Footer />
       </main>

From d8b0b2a0465f2883dca4dce3088f3bfc6c378c04 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Mon, 12 Dec 2022 18:11:29 +0900
Subject: [PATCH 27/53] =?UTF-8?q?:white=5Fcheck=5Fmark:=20masterInfo=20?=
 =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Curriculum/MasterInfo/MasterInfo.test.tsx                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
index bf85d05e..12c40627 100644
--- a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx
@@ -3,13 +3,13 @@ import { render } from "@testing-library/react";
 // Testing-Component
 import { MasterInfo } from ".";
 // Assets
-import avatars from "assets/img/avatars";
+import pictures from "assets/img/picture";
 // lib
 import { TestProvider } from "lib/testUtils";
 
 describe("<MasterInfo>", () => {
   const masterInfo = {
-    avatar: "mediumCrong" as keyof typeof avatars,
+    picture: "crong" as keyof typeof pictures,
     introduce: "매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.",
     name: "JK",
     nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”",

From 10820135380e3abe34ae60d8dc2d37f7f31f85ba Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 14:59:32 +0900
Subject: [PATCH 28/53] =?UTF-8?q?:art:=20=ED=81=B4=EB=A6=B0=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=A0=ED=8A=B8=EC=97=94=EB=93=9C=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/code-together/courseList.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/code-together/courseList.mdx b/content/code-together/courseList.mdx
index 6d69a030..b21f0b24 100644
--- a/content/code-together/courseList.mdx
+++ b/content/code-together/courseList.mdx
@@ -7,5 +7,5 @@ courses:
 
   - title: "클린 프론트엔드"
     description: "프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 익혀보는"
-    path: "https://docs.google.com/forms/d/e/1FAIpQLSeMe3ql6Ifi9FpHy1yqSrasSq8lqgbhdEvrOhQEP6KB2kwTDA/viewform"
+    path: "/code-together/course/clean-frontend"
 ---

From 844d3cca63305c0b7bf5fad7cbed0d0efdd51df2 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 14:59:52 +0900
Subject: [PATCH 29/53] =?UTF-8?q?:speech=5Fballoon:=20=EC=9D=B8=ED=84=B0?=
 =?UTF-8?q?=EB=B7=B0=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/code-together/course/clean-frontend/interviews.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/code-together/course/clean-frontend/interviews.mdx b/content/code-together/course/clean-frontend/interviews.mdx
index c17e6281..e5fdd30a 100644
--- a/content/code-together/course/clean-frontend/interviews.mdx
+++ b/content/code-together/course/clean-frontend/interviews.mdx
@@ -3,19 +3,19 @@ path: code-together/course/clean-frontend
 templateKey: codeTogether_clean-frontend_reviews
 interviews:
   - writerPhoto: ""
-    nutshell: ""
+    nutshell: "원리 파악"
     content: 원리를 모르고 사용했던 기능들의 원리를 생각해보고 구현해볼 수 있는 좋은 시간이었습니다
     writer: ""
     writerInfo: ""
 
   - writerPhoto: ""
-    nutshell: ""
+    nutshell: "협업의 중요성"
     content: 다른 팀 분들과 만나서 얘기하는게 즐거웠습니다. 바닐라로 프론트 코드 짜면서 나의 부족한 점도 알게되어서 좋았습니다.
     writer: ""
     writerInfo: ""
 
   - writerPhoto: ""
-    nutshell: ""
+    nutshell: "코드 리뷰"
     content: 프론트엔드 개발자들과 만날 수 있는 시간을 가져서 좋았고, 1:1 코드리뷰와 피드백도 좋았습니다!
     writer: ""
     writerInfo: ""

From 234768f17ada2501bf4140d4e85bc3642d661fde Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 15:00:20 +0900
Subject: [PATCH 30/53] =?UTF-8?q?:sparkles:=20=ED=85=9C=ED=94=8C=EB=A6=BF?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=B3=84=20=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A0=EB=A6=AC=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailCurriculum.stories.tsx              | 44 ++++++++++++++-
 .../GraduateReview/GraduateReview.stories.tsx | 34 +++++++++++-
 .../Masthead/Masthead.stories.tsx             | 32 ++++++++++-
 .../Registration/Registration.stories.tsx     | 14 ++++-
 .../TimeTable/TimeTable.stories.tsx           | 53 ++++++++++++++++++-
 5 files changed, 167 insertions(+), 10 deletions(-)

diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx
index 889851d0..6c15ef4f 100644
--- a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx
@@ -6,7 +6,7 @@ import { DetailCurriculum } from ".";
 import DetailCurriculumDocs from "./DetailCurriculum.docs.mdx";
 
 export default {
-  title: "pagecomponent/code-together/javascript/DetailCurriculum",
+  title: "pagecomponent/template/code-together/DetailCurriculum",
   component: DetailCurriculum,
   parameters: {
     docs: {
@@ -15,6 +15,46 @@ export default {
   },
 } as ComponentMeta<typeof DetailCurriculum>;
 
-const Template: ComponentStory<typeof DetailCurriculum> = () => <DetailCurriculum />;
+export interface CodeTogetherSubjectInfoType {
+  details: string[];
+  name: string;
+}
+
+const Template: ComponentStory<typeof DetailCurriculum> = (args) => <DetailCurriculum {...args} />;
 
 export const Default = Template.bind({});
+Default.args = {
+  curriculumInfo: [
+    {
+      tabName: "주제",
+      subjectList: [
+        {
+          details: ["함수 역할과 함수 나누기", "고차함수", "클로저, 커링", "immutable"],
+          name: "함수로 만드는 애플리케이션",
+        },
+        {
+          details: ["class, prototype, this", "OOP, 상속", "뷰-모델 바인딩"],
+          name: "객체로 만드는 애플리케이션",
+        },
+        {
+          details: ["서버와 동기화", "캐시", "에러핸들링, 요청취소"],
+          name: "네트워크 통신 핸들링 (최적화와 에러처리)",
+        },
+        {
+          details: [""],
+          name: "리팩토링과 UI테스팅",
+        },
+      ],
+      masterInfoList: [
+        {
+          picture: "crong",
+          introduce:
+            "복잡하고 다양한 프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. 열정이 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다.\\n 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받은 과정입니다",
+          name: "크롱",
+          nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”",
+          position: "Crong, 웹 프론트엔드 마스터",
+        },
+      ],
+    },
+  ],
+};
diff --git a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx
index dd3565c3..4b035c55 100644
--- a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx
+++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx
@@ -6,7 +6,7 @@ import { GraduateReview } from ".";
 import GraduateReviewDocs from "./GraduateReview.docs.mdx";
 
 export default {
-  title: "pagecomponent/code-together/javascript/GraduateReview",
+  title: "pagecomponent/template/code-together/GraduateReview",
   component: GraduateReview,
   parameters: {
     docs: {
@@ -15,6 +15,36 @@ export default {
   },
 } as ComponentMeta<typeof GraduateReview>;
 
-const Template: ComponentStory<typeof GraduateReview> = () => <GraduateReview />;
+const Template: ComponentStory<typeof GraduateReview> = (arg) => <GraduateReview {...arg} />;
 
 export const Default = Template.bind({});
+Default.args = {
+  graduateReviewInfo: {
+    interviews: [
+      {
+        writerPhoto: "smallJk",
+        nutshell: "원리 파악",
+        content:
+          "원리를 모르고 사용했던 기능들의 원리를 생각해보고 구현해볼 수 있는 좋은 시간이었습니다",
+        writer: "",
+        writerInfo: "",
+      },
+      {
+        writerPhoto: "smallCrong",
+        nutshell: "협업의 중요성",
+        content:
+          "다른 팀 분들과 만나서 얘기하는게 즐거웠습니다. 바닐라로 프론트 코드 짜면서 나의 부족한 점도 알게되어서 좋았습니다.",
+        writer: "",
+        writerInfo: "",
+      },
+      {
+        writerPhoto: "smallHonux",
+        nutshell: "코드 리뷰",
+        content:
+          "프론트엔드 개발자들과 만날 수 있는 시간을 가져서 좋았고, 1:1 코드리뷰와 피드백도 좋았습니다!",
+        writer: "",
+        writerInfo: "",
+      },
+    ],
+  },
+};
diff --git a/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx
index c926be06..e1a5ef7e 100644
--- a/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx
+++ b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx
@@ -6,7 +6,7 @@ import { Masthead } from ".";
 import MastheadDocs from "./Masthead.docs.mdx";
 
 export default {
-  title: "pagecomponent/code-together/javascript/Masthead",
+  title: "pagecomponent/template/code-together/Masthead",
   component: Masthead,
   parameters: {
     docs: {
@@ -15,6 +15,34 @@ export default {
   },
 } as ComponentMeta<typeof Masthead>;
 
-const Template: ComponentStory<typeof Masthead> = () => <Masthead />;
+const Template: ComponentStory<typeof Masthead> = (args) => <Masthead {...args} />;
 
 export const Default = Template.bind({});
+Default.args = {
+  mastheadInfo: {
+    title: "클린 프론트엔드 개발",
+    description:
+      "클린 자바스크립트 개발 패턴을 익힙니다.\n다양한 웹 프론트엔드 지식을 바닐라 자바스크립트로 익혀 FrontEnd Framework에 필요한 개념을 이해합니다.",
+    targets: [
+      "프론트엔드 주니어 개발자(1년차 ~ 3년차 수준)",
+      "웹 프론트엔드 자바스크립트의 다양한 개발 패턴을 배우고 싶은 분",
+    ],
+    courseInfos: [
+      {
+        title: "4주",
+        content: "",
+        img: "calendar",
+      },
+      {
+        title: "매주 월•화•수, 오후 7시~10시",
+        content: "",
+        img: "clock",
+      },
+      {
+        title: "파트 당 44만원",
+        content: "",
+        img: "coin",
+      },
+    ],
+  },
+};
diff --git a/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx
index 595158cf..1fed90b3 100644
--- a/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx
+++ b/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx
@@ -6,7 +6,7 @@ import { Registration } from ".";
 import RegistrationDocs from "./Registration.docs.mdx";
 
 export default {
-  title: "pagecomponent/code-together/javascript/Registration",
+  title: "pagecomponent/template/code-together/Registration",
   component: Registration,
   parameters: {
     docs: {
@@ -15,6 +15,16 @@ export default {
   },
 } as ComponentMeta<typeof Registration>;
 
-const Template: ComponentStory<typeof Registration> = () => <Registration />;
+const Template: ComponentStory<typeof Registration> = (args) => <Registration {...args} />;
 
 export const Default = Template.bind({});
+Default.args = {
+  registrations: [
+    {
+      title: "코드투게더 클린 프론트엔드 과정 대기자 신청하기",
+      description: "",
+      caption: "교육 기간: 2023년 1월~4월 사이",
+      path: "https://docs.google.com/forms/d/e/1FAIpQLSeMe3ql6Ifi9FpHy1yqSrasSq8lqgbhdEvrOhQEP6KB2kwTDA/viewform",
+    },
+  ],
+};
diff --git a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx
index b9a73008..1d065b66 100644
--- a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx
+++ b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx
@@ -6,7 +6,7 @@ import { TimeTable } from ".";
 import TimeTableDocs from "./TimeTable.docs.mdx";
 
 export default {
-  title: "pagecomponent/code-together/javascript/TimeTable",
+  title: "pagecomponent/template/code-together/TimeTable",
   component: TimeTable,
   parameters: {
     docs: {
@@ -15,6 +15,55 @@ export default {
   },
 } as ComponentMeta<typeof TimeTable>;
 
-const Template: ComponentStory<typeof TimeTable> = () => <TimeTable />;
+const Template: ComponentStory<typeof TimeTable> = (args) => <TimeTable {...args} />;
 
 export const Default = Template.bind({});
+Default.args = {
+  timeTableInfo: {
+    planList: [
+      {
+        name: "데일리 스크럼",
+        description:
+          "그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.",
+        color: "#B4E791",
+      },
+      {
+        name: "모각코(모여서 각자 코딩)",
+        description:
+          "모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.",
+        color: "#B4E791",
+      },
+      {
+        name: "그룹 피어세션",
+        description:
+          "이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.",
+        color: "#B4E791",
+      },
+      {
+        name: "마스터 코드리뷰",
+        description:
+          "미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.",
+        color: "#C7E8EF",
+      },
+    ],
+    tags: [
+      {
+        name: "스스로",
+        color: "#FFF4B3",
+      },
+      {
+        name: "그룹과",
+        color: "#B4E791",
+      },
+      {
+        name: "마스터와",
+        color: "#C7E8EF",
+      },
+      {
+        name: "모두 함께",
+        color: "#FF9F92",
+      },
+    ],
+    body: 'var _excluded = ["components"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  "path": "code-together/course/clean-frontend",\n  "templateKey": "codeTogether_clean-frontend_plan",\n  "tags": [{\n    "name": "스스로",\n    "color": "#FFF4B3"\n  }, {\n    "name": "그룹과",\n    "color": "#B4E791"\n  }, {\n    "name": "마스터와",\n    "color": "#C7E8EF"\n  }, {\n    "name": "모두 함께",\n    "color": "#FF9F92"\n  }],\n  "planList": [{\n    "name": "데일리 스크럼",\n    "description": "그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.",\n    "color": "#B4E791"\n  }, {\n    "name": "모각코(모여서 각자 코딩)",\n    "description": "모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.",\n    "color": "#B4E791"\n  }, {\n    "name": "그룹 피어세션",\n    "description": "이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.",\n    "color": "#B4E791"\n  }, {\n    "name": "마스터 코드리뷰",\n    "description": "미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.",\n    "color": "#C7E8EF"\n  }]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = "wrapper";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: "MDXLayout"\n  }), mdx("table", {\n    id: "table"\n  }, mdx("thead", null, mdx("tr", null, mdx("td", null), mdx("td", null, "\\uC6D4"), mdx("td", null, "\\uD654"), mdx("td", null, "\\uC218"), mdx("td", null, "\\uAE08"))), mdx("tbody", null, mdx("tr", null, mdx("td", null, "13:00"), mdx("td", {\n    colSpan: "2"\n  }, "\\uBBF8\\uC158\\uACFC VOD#1 \\uACF5\\uAC1C"), mdx("td", null), mdx("td", null)), mdx("tr", null, mdx("td", null, "19:00"), mdx("td", {\n    colSpan: "3"\n  }, "\\uCCB4\\uD06C\\uC778"), mdx("td", {\n    rowSpan: "3",\n    className: "tag3"\n  }, mdx("div", null, "\\uCEE4\\uBBA4\\uB2C8\\uD2F0 \\uC774\\uBCA4\\uD2B8", mdx("br", null), "(2\\uC8FC\\uCC28)"), mdx("br", null), mdx("div", null, "\\uB9C8\\uC2A4\\uD130 \\uD2B9\\uAC15", mdx("br", null), "(3\\uC8FC\\uCC28)"))), mdx("tr", null, mdx("td", null, "19:00 ~ 19:30"), mdx("td", {\n    colSpan: "3",\n    className: "tag1"\n  }, "\\uB370\\uC77C\\uB9AC \\uC2A4\\uD06C\\uB7FC")), mdx("tr", null, mdx("td", null, "19:30 ~ 20:30"), mdx("td", {\n    rowSpan: "3"\n  }, mdx("div", null, "\\uC9D1\\uC911 \\uD480\\uC774 \\uC2DC\\uAC04", mdx("br", null), "(\\uBAA8\\uAC01\\uCF54 / 2.5h)"), mdx("br", null), mdx("div", null, "VOD#2 \\uACF5\\uAC1C", mdx("br", null), "(20:30)")), mdx("td", {\n    colSpan: "2",\n    className: "tag1"\n  }, "\\uADF8\\uB8F9 \\uD53C\\uC5B4\\uC138\\uC158")), mdx("tr", null, mdx("td", null, "20:30 ~ 21:30"), mdx("td", {\n    rowSpan: "2"\n  }, mdx("div", null, "\\uC9D1\\uC911 \\uD480\\uC774 \\uC2DC\\uAC04", mdx("br", null), "(\\uBAA8\\uAC01\\uCF54 / 1.5h)"), mdx("br", null), mdx("div", null, "VOD#2 \\uACF5\\uAC1C", mdx("br", null), "(21:00)")), mdx("td", {\n    className: "tag2"\n  }, "\\uB9C8\\uC2A4\\uD130 \\uCF54\\uB4DC\\uB9AC\\uBDF0", mdx("br", null), "(Live)"), mdx("td", {\n    rowSpan: "3"\n  })), mdx("tr", null, mdx("td", null, "21:30 ~ 22:00"), mdx("td", {\n    className: "tag0"\n  }, "\\uC8FC\\uAC04 \\uD559\\uC2B5\\uC815\\uB9AC", mdx("br", null), "\\uBC0F \\uD68C\\uACE0")), mdx("tr", null, mdx("td", null, "22:00"), mdx("td", {\n    colSpan: "2"\n  }, "\\uACB0\\uACFC \\uC81C\\uCD9C, VOD#3 \\uACF5\\uAC1C"), mdx("td", null)))));\n}\n;\nMDXContent.isMDXComponent = true;',
+  },
+};

From 7532e756c2e4f888bad692f9d73ba0525fa41383 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 15:00:38 +0900
Subject: [PATCH 31/53] =?UTF-8?q?:fire:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=BF=BC=EB=A6=AC=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20strain=EA=B4=80=EB=A0=A8=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../codeTogetherTemplate/GraduateReview/GraduateReview.tsx      | 1 -
 .../codeTogetherTemplate/Registration/Registration.tsx          | 2 +-
 src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx | 2 --
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
index a0bd819a..c3ac5edc 100644
--- a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
+++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { graphql, useStaticQuery } from "gatsby";
 // Type
 import { InterviewType } from "@type/Interview";
 // Components
diff --git a/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
index 436d9ace..1bd56d27 100644
--- a/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
+++ b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { graphql, useStaticQuery } from "gatsby";
 // Type
 import { RegistrationType } from "@type/Registration";
 // Components
@@ -8,6 +7,7 @@ import { Registration } from "components";
 const CodeTogetherRegistration: React.FC<{ registrations: RegistrationType[] }> = ({
   registrations,
 }) => {
+  console.log(registrations);
   return <Registration {...{ registrations }} />;
 };
 
diff --git a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx
index 83dfd8f8..5893b65e 100644
--- a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx
+++ b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import styled, { useTheme } from "styled-components";
-import { graphql, useStaticQuery } from "gatsby";
 import { MDXRenderer } from "gatsby-plugin-mdx";
 import "./TimeTable.css";
 // Type
@@ -12,7 +11,6 @@ import { TitleSet } from "components";
 // Assets
 import { SUBTITLE, TITLE } from "assets/static/phrases";
 // Utils
-import { strainMdxInfoBody } from "lib/utils";
 import { useResponsive } from "lib/hooks";
 
 const TimeTable: React.FC<{

From e5dcc1e585559d50fa211b546ae331e6862b7770 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 15:02:27 +0900
Subject: [PATCH 32/53] =?UTF-8?q?:fire:=20=EC=82=AC=EC=9A=A9=EB=90=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=83=80=EC=9E=85=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailCurriculum/DetailCurriculum.stories.tsx            | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx
index 6c15ef4f..ad859389 100644
--- a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx
@@ -15,11 +15,6 @@ export default {
   },
 } as ComponentMeta<typeof DetailCurriculum>;
 
-export interface CodeTogetherSubjectInfoType {
-  details: string[];
-  name: string;
-}
-
 const Template: ComponentStory<typeof DetailCurriculum> = (args) => <DetailCurriculum {...args} />;
 
 export const Default = Template.bind({});

From 662f338a442aa5c75a2d9bef557620af61b23b1c Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 15:25:32 +0900
Subject: [PATCH 33/53] =?UTF-8?q?:fire:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20import=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pageComponents/code-together/Course/Course.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pageComponents/code-together/Course/Course.tsx b/src/pageComponents/code-together/Course/Course.tsx
index 7827b47f..ba50230a 100644
--- a/src/pageComponents/code-together/Course/Course.tsx
+++ b/src/pageComponents/code-together/Course/Course.tsx
@@ -5,7 +5,6 @@ import { graphql, useStaticQuery } from "gatsby";
 import { CourseType } from "@type/Course";
 // Components
 import { MButton, TitleSet, CourseCard } from "components";
-// import { CourseCard } from "./CourseCard";
 // Assets
 import thumbnail from "assets/img/illusts/thumbnail";
 import { SUBTITLE, TITLE } from "assets/static/phrases";

From f790e4ff717dd5501e241f1d187dde7cb0e514b9 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 15:25:56 +0900
Subject: [PATCH 34/53] =?UTF-8?q?:speech=5Fballoon:=20=EC=9E=90=EB=B0=94?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A6=BD=ED=8A=B8,=20=ED=81=B4=EB=A6=B0?=
 =?UTF-8?q?=ED=94=84=EB=A1=A0=ED=8A=B8=20=EC=97=94=EB=93=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EB=90=9C=20=EB=A7=81=ED=81=AC=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/code-together/courses.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/code-together/courses.mdx b/content/code-together/courses.mdx
index 6f2dcef5..b6113a0c 100644
--- a/content/code-together/courses.mdx
+++ b/content/code-together/courses.mdx
@@ -5,7 +5,7 @@ courses:
     title: 자바스크립트
     cost: 300,000원
     img: mediumJavascript
-    path: /code-together/javascript
+    path: /code-together/course/javascript
     tags:
       - 대기자 모집 중
 
@@ -13,7 +13,7 @@ courses:
     title: 클린 프론트엔드
     cost: 440,000원
     img: mediumCleanFE
-    path: https://docs.google.com/forms/d/e/1FAIpQLSeMe3ql6Ifi9FpHy1yqSrasSq8lqgbhdEvrOhQEP6KB2kwTDA/viewform
+    path: /code-together/course/clean-frontend
     tags:
       - 대기자 모집 중
 

From 2d1e832e1fbf88bd82c28068b93e8175d5c915a0 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 15:43:32 +0900
Subject: [PATCH 35/53] =?UTF-8?q?:art:=20=EC=82=AC=EC=9A=A9=ED=95=98?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20url=EA=B0=92=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/static/urls.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/static/urls.ts b/src/assets/static/urls.ts
index 8a8a9496..a3034da4 100644
--- a/src/assets/static/urls.ts
+++ b/src/assets/static/urls.ts
@@ -8,7 +8,6 @@ const INTERNAL = {
   REFUND_POLICY: "/refund",
   SUBSCRIPTION: "/subscription",
   TEAM_CULTURE: "/team-culture",
-  JAVASCRIPT: "/code-together/javascript",
   NOT_FOUND: "/404",
 };
 

From 6ab407ebccffcc2f7db99cf81f85906ec52e1cab Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 15:43:43 +0900
Subject: [PATCH 36/53] =?UTF-8?q?:fire:=20console.log=EB=AC=B8=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../codeTogetherTemplate/Registration/Registration.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
index 1bd56d27..cb758557 100644
--- a/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
+++ b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx
@@ -7,7 +7,6 @@ import { Registration } from "components";
 const CodeTogetherRegistration: React.FC<{ registrations: RegistrationType[] }> = ({
   registrations,
 }) => {
-  console.log(registrations);
   return <Registration {...{ registrations }} />;
 };
 

From d8a66469ea6cb60159f7a8ba7df781fc5984e87b Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 15:44:06 +0900
Subject: [PATCH 37/53] =?UTF-8?q?:mag:=20=ED=81=AC=EB=A1=AC=20=ED=83=AD=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EC=88=98=EC=A0=95,=20seo=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EC=A0=9C=EB=AA=A9=EA=B3=BC=20=EC=84=A4=EB=AA=85=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/template/codeTogetherTemplate.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/template/codeTogetherTemplate.tsx b/src/template/codeTogetherTemplate.tsx
index 6ac435b1..e00ed729 100644
--- a/src/template/codeTogetherTemplate.tsx
+++ b/src/template/codeTogetherTemplate.tsx
@@ -18,8 +18,6 @@ import {
   GraduateReview,
 } from "pageComponents/codeTogetherTemplate";
 // Assets
-import { SEO_TITLE, SEO_DESCRIPTION } from "assets/static/seo";
-import { INTERNAL } from "assets/static/urls";
 import { strainAllMdxInfo, strainFrontmatterInfo, strainFrontmatterInfoBody } from "lib/utils";
 
 interface ICodeTogetherTemplateProps {
@@ -46,7 +44,7 @@ interface ICodeTogetherTemplateProps {
   };
 }
 
-export default ({ data }: PageProps<ICodeTogetherTemplateProps>) => {
+export default ({ data, path }: PageProps<ICodeTogetherTemplateProps>) => {
   const { allMdx, graduateReview, masthead, registration, timeTable } = data;
 
   const mastheadInfo = strainFrontmatterInfo(masthead);
@@ -57,11 +55,7 @@ export default ({ data }: PageProps<ICodeTogetherTemplateProps>) => {
 
   return (
     <GlobalTheme>
-      <GlobalHeader
-        title={SEO_TITLE.JAVASCRIPT}
-        description={SEO_DESCRIPTION.JAVASCRIPT}
-        url={INTERNAL.JAVASCRIPT}
-      />
+      <GlobalHeader title={mastheadInfo.title} description={mastheadInfo.description} url={path} />
       <main style={{ overflowX: "hidden" }}>
         <HomeGlobalNavigationBar />
         <Masthead {...{ mastheadInfo }} />

From a7c7d2169ba872c6a80709092ed5a9cb0a54cb8b Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Tue, 13 Dec 2022 15:46:21 +0900
Subject: [PATCH 38/53] =?UTF-8?q?:fire:=20\n=EB=AC=B8=EA=B5=AC=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../code-together/course/clean-frontend/curriculum_part1.mdx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/code-together/course/clean-frontend/curriculum_part1.mdx b/content/code-together/course/clean-frontend/curriculum_part1.mdx
index f5faf876..68a33da7 100644
--- a/content/code-together/course/clean-frontend/curriculum_part1.mdx
+++ b/content/code-together/course/clean-frontend/curriculum_part1.mdx
@@ -32,5 +32,5 @@ masterInfoList:
     name: 크롱
     position: Crong, 웹 프론트엔드 마스터
     nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-    introduce: 복잡하고 다양한 프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. 열정이 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다.\n 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받은 과정입니다
+    introduce: 복잡하고 다양한 프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. 열정이 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다. 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받은 과정입니다
 ---

From 55bdddc1744313c29ce689f12f6f471e331fd82e Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 11:50:02 +0900
Subject: [PATCH 39/53] =?UTF-8?q?:speech=5Fballoon:=20masthead=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/code-together/course/clean-frontend/masthead.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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

From bd9fc1205468976f5fe260cf1479aeca89f34918 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 11:50:19 +0900
Subject: [PATCH 40/53] =?UTF-8?q?:speech=5Fballoon:=20=EB=A7=88=EC=8A=A4?=
 =?UTF-8?q?=ED=84=B0=20=EC=A0=95=EB=B3=B4=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../course/clean-frontend/curriculum_part1.mdx             | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/content/code-together/course/clean-frontend/curriculum_part1.mdx b/content/code-together/course/clean-frontend/curriculum_part1.mdx
index 68a33da7..763c020c 100644
--- a/content/code-together/course/clean-frontend/curriculum_part1.mdx
+++ b/content/code-together/course/clean-frontend/curriculum_part1.mdx
@@ -8,6 +8,7 @@ subjectList:
     details:
       - 함수 역할과 함수 나누기
       - 고차함수
+      - 함수 합성
       - 클로저, 커링
       - immutable
 
@@ -25,12 +26,12 @@ subjectList:
 
   - name: 리팩토링과 UI테스팅
     details:
-      - ""
+      - "리팩토링과 vitest 기반 테스팅"
 
 masterInfoList:
   - picture: crong
     name: 크롱
     position: Crong, 웹 프론트엔드 마스터
-    nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-    introduce: 복잡하고 다양한 프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. 열정이 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다. 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받은 과정입니다
+    nutshell: "“복잡하고 다양한 프론트엔드개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. \n열정 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다”"
+    introduce: 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받았습니다.
 ---

From 61e14d24d56fc6023f7c1011124d929aa0634574 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 11:50:33 +0900
Subject: [PATCH 41/53] =?UTF-8?q?:speech=5Fballoon:=20=EC=A1=B8=EC=97=85?=
 =?UTF-8?q?=EC=9E=90=20=EB=A6=AC=EB=B7=B0=20=EB=82=B4=EC=9A=A9=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../course/clean-frontend/interviews.mdx             | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

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

From 4508227f68980bdb403ac491dd7a8c1f6b41fa1e Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 11:50:45 +0900
Subject: [PATCH 42/53] =?UTF-8?q?:speech=5Fballoon:=20faq=EB=82=B4?=
 =?UTF-8?q?=EC=9A=A9=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/faq/lists.mdx | 63 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/content/faq/lists.mdx b/content/faq/lists.mdx
index 14a87ca2..92aad091 100644
--- a/content/faq/lists.mdx
+++ b/content/faq/lists.mdx
@@ -294,4 +294,67 @@ https://github.com/code-squad/test-item-pool/blob/master/level2-common/level2.md
     content: "yoda@codesquad.kr 로 이력서(자유 양식)를 보내주세요.\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"
 ---

From 37a5df454af4897f13b10c369750cb397f2ab8b4 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 11:51:11 +0900
Subject: [PATCH 43/53] =?UTF-8?q?:lipstick:=20=EB=A7=88=EC=8A=A4=EC=A0=80?=
 =?UTF-8?q?=20nutshell=EB=B6=80=EB=B6=84=EC=97=90=20white-space=20=20lineb?=
 =?UTF-8?q?reak=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
index a6ccdd0c..84139fec 100644
--- a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx
@@ -99,6 +99,7 @@ const PositionWrapper = styled.div`
 `;
 const NutshellWrapper = styled.div`
   color: ${({ theme: { color } }) => color.black};
+  white-space: pre-line;
   @media ${({ theme }) => theme.device.mobile} {
     margin-top: 2.4rem;
   }

From 2195a5ff3280699a835054c6f457e196c8d20539 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 12:09:03 +0900
Subject: [PATCH 44/53] =?UTF-8?q?:speech=5Fballoon:=20=ED=95=99=EC=8A=B5?=
 =?UTF-8?q?=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../course/clean-frontend/plan.mdx            | 72 ++++++++-----------
 1 file changed, 31 insertions(+), 41 deletions(-)

diff --git a/content/code-together/course/clean-frontend/plan.mdx b/content/code-together/course/clean-frontend/plan.mdx
index 2af0878c..4d78828f 100644
--- a/content/code-together/course/clean-frontend/plan.mdx
+++ b/content/code-together/course/clean-frontend/plan.mdx
@@ -11,13 +11,14 @@ tags:
   - name: 마스터와
     color: "#C7E8EF"
 
-  - name: 모두 함께
-    color: "#FF9F92"
-
 planList:
-  - name: 데일리 스크럼
-    description: 그룹원들과 서로의 학습 상태를 확인하며 이전에 학습한 키워드, 오늘 학습하고 도전할 것들을 공유합니다.
-    color: "#B4E791"
+  - name: 주간 목표 공유
+    description: 공개된 미션을 확인하고, 각자의 이번 주 학습 목표를 세워 동료들에게 공유합니다.
+    color: "#FFF4B3"
+
+  - name: 미션 수행
+    description: 주어진 학습 자료와 키워드를 바탕으로 미션을 수행합니다. 각자 학습하는 과정에서 동료들과 온라인으로 질문과 고민을 나눌 수 있습니다.
+    color: "#FFF4B3"
 
   - name: 모각코(모여서 각자 코딩)
     description: 모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.
@@ -27,8 +28,8 @@ planList:
     description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
     color: "#B4E791"
 
-  - name: 마스터 코드리뷰
-    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.
+  - name: 마스터 피드백
+    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민합니다. 마지막 주차에 1:1 코드리뷰를 받아볼 수 있습니다.
     color: "#C7E8EF"
 ---
 
@@ -36,57 +37,46 @@ planList:
   <thead>
     <tr>
       <td></td>
+      <td>금</td>
       <td>월</td>
       <td>화</td>
       <td>수</td>
-      <td>금</td>
+      <td>목</td>
     </tr>
   </thead>
 
   <tbody>
     <tr>
-      <td>13:00</td>
-      <td colspan="2">미션과 VOD#1 공개</td>
+      <td>19:00</td>
+      <td>미션과 <br/>학습자료 공개</td>
+      <td></td>
+      <td></td>
       <td></td>
       <td></td>
     </tr>
     <tr>
-      <td>19:00</td>
-      <td colspan="3">체크인</td>
-      <td rowspan="3" class="tag3">
-        <div>커뮤니티 이벤트<br/>(2주차)</div>
-        <br/>
-        <div>마스터 특강<br/>(3주차)</div>
-      </td>
-    </tr>
-    <tr>
-      <td>19:00 ~ 19:30</td>
-      <td colspan="3" class="tag1">데일리 스크럼</td>
-    </tr>
-    <tr>
-      <td>19:30 ~ 20:30</td>
-      <td rowspan="3">
-        <div>집중 풀이 시간<br/>(모각코 / 2.5h)</div>
-        <br/>
-        <div>VOD#2 공개<br/>(20:30)</div>
-      </td>
-      <td colspan="2" class="tag1">그룹 피어세션</td>
+      <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:30 ~ 21:30</td>
-      <td rowspan="2"><div>집중 풀이 시간<br />(모각코 / 1.5h)</div><br/>
-        <div>VOD#2 공개<br/>(21:00)</div>
-      </td>
-      <td class="tag2">마스터 코드리뷰<br/>(Live)</td>
-      <td rowspan="3"></td>
+      <td>20:00 ~ 21:00</td>
+      <td rowspan="2" class="tag1">모각코</td>
+      <td rowspan="2" class="tag2">마스터 피드백</td>
     </tr>
     <tr>
-      <td>21:30 ~ 22:00</td>
-      <td class="tag0">주간 학습정리<br/>및 회고</td>
+      <td>21:00 ~ 22:00</td>
+      <td class="tag0">주간 목표 공유</td>
     </tr>
     <tr>
-      <td>22:00</td>
-      <td colspan="2">결과 제출, VOD#3 공개</td>
+      <td> ~ 24:00</td>
+      <td></td>
+      <td class="tag0">1차 PR 제출</td>
+      <td></td>
+      <td class="tag0">2차 PR 제출</td>
       <td></td>
     </tr>
   </tbody>

From 9a1aca32dd96ec27d718c148b694cb7a7e51e7c6 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 12:20:43 +0900
Subject: [PATCH 45/53] =?UTF-8?q?:speech=5Fballoon:=20=EA=B0=9C=ED=96=89?=
 =?UTF-8?q?=20=EB=AC=B8=EA=B5=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/code-together/course/clean-frontend/masthead.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/code-together/course/clean-frontend/masthead.mdx b/content/code-together/course/clean-frontend/masthead.mdx
index 54083506..c05a6943 100644
--- a/content/code-together/course/clean-frontend/masthead.mdx
+++ b/content/code-together/course/clean-frontend/masthead.mdx
@@ -2,7 +2,7 @@
 path: code-together/course/clean-frontend
 templateKey: codeTogether_clean-frontend_masthead
 title: 클린 프론트엔드
-description: "클린 자바스크립트 개발 패턴을 익힙니다.\n다양한 웹 프론트엔드 지식을 바닐라 자바스크립트로 익혀 프론트엔드 프레임워크에 필요한 개념을 이해합니다."
+description: "클린 자바스크립트 개발 패턴을 익힙니다.\n다양한 웹 프론트엔드 지식을 바닐라 자바스크립트로 익혀\n 프론트엔드 프레임워크에 필요한 개념을 이해합니다."
 targets:
   - "프론트엔드 주니어 개발자(1년차 ~ 3년차 수준)"
   - "웹 프론트엔드 자바스크립트의 다양한 개발 패턴을 배우고 싶은 분"

From 8063b1f5e1a197132cbee9280514f1b66e1cdb0f Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 12:25:08 +0900
Subject: [PATCH 46/53] =?UTF-8?q?:speech=5Fballoon:=20=ED=83=AD=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EC=A0=84=EC=B2=B4=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../course/clean-frontend/curriculum_part1.mdx              | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/code-together/course/clean-frontend/curriculum_part1.mdx b/content/code-together/course/clean-frontend/curriculum_part1.mdx
index 763c020c..adbe13ee 100644
--- a/content/code-together/course/clean-frontend/curriculum_part1.mdx
+++ b/content/code-together/course/clean-frontend/curriculum_part1.mdx
@@ -2,9 +2,9 @@
 path: code-together/course/clean-frontend
 templateKey: codeTogether_clean-frontend_part1
 index: 1
-tabName: 주제
+tabName: 전체
 subjectList:
-  - name: 함수로 만드는 애플리케이션
+  - name: "함수로 만드는 \n애플리케이션"
     details:
       - 함수 역할과 함수 나누기
       - 고차함수
@@ -12,7 +12,7 @@ subjectList:
       - 클로저, 커링
       - immutable
 
-  - name: 객체로 만드는 애플리케이션
+  - name: "객체로 만드는 \n애플리케이션"
     details:
       - class, prototype, this
       - OOP, 상속

From 763ea3f47fc18b97ee213163c413f80f7a0fdb99 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 12:34:54 +0900
Subject: [PATCH 47/53] =?UTF-8?q?:bento:=20=ED=95=84=EC=9A=94=ED=95=9C=20?=
 =?UTF-8?q?=EB=AC=B8=EA=B5=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/static/phrases.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/assets/static/phrases.ts b/src/assets/static/phrases.ts
index 3b567c54..29920975 100644
--- a/src/assets/static/phrases.ts
+++ b/src/assets/static/phrases.ts
@@ -1,4 +1,5 @@
 const SUBTITLE = {
+  CURRICULUMS: " 과정의",
   CODESQUAD_IN_MEDIA: "언론 보도 및 매체",
   CULTURE: "코드스쿼드의 가치가 녹아있는",
   FEATURE: "코드스쿼드는",
@@ -14,8 +15,7 @@ const SUBTITLE = {
   WELFARE: "코드스쿼드 복지",
   CODE_TOGETHER: "코드투게더는",
   CODE_TOGETHER_COURSE: "코드투게더의",
-  JAVASCRIPT: "자바스크립트 과정을 경험한",
-  JAVASCRIPT_COURSE: "자바스크립트 과정의",
+  CODE_TOGETHER_INTERVIEW: " 과정을 경험한",
   PRE_COURSE: "프리 코스의",
   PRE_COURSE_TIME_TABLE: "우리는 과정중에",
   WE: "우리는",
@@ -29,6 +29,7 @@ const TITLE = {
   MASTER: "분야별 전문 마스터",
   GRADUATE_INTERVIEW: "졸업생 후기",
   EDUCATION_FEATURES: "교육 특징",
+  CODE_TOGETHER_DETAIL_CURRICULUM: "상세 커리큘럼",
   MASTERS_DETAIL_CURRICULUM: "각 클래스 별 상세 커리큘럼",
   JAVASCRIPT_DETAIL_CURRICULUM: "각 파트 별 상세 커리큘럼",
   PRE_COURSE_DETAIL_CURRICULUM: "각 클래스별 상세 커리큘럼",

From d12c2b9717e622dc981d098fc13c53357c9e74af Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 12:35:28 +0900
Subject: [PATCH 48/53] =?UTF-8?q?:art:=20=EA=B0=81=20=EC=A3=BC=EC=A0=9C?=
 =?UTF-8?q?=EC=9D=98=20=EB=AC=B8=EA=B5=AC=EC=97=90=20shite-space=EA=B0=80?=
 =?UTF-8?q?=20=EB=93=A4=EC=96=B4=EA=B0=80=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailCurriculum/Curriculum/Curriculum.tsx                   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx
index acd8e3c5..d0b89200 100644
--- a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx
@@ -84,6 +84,7 @@ const SubjectItem = styled.li`
 `;
 const SubjectTitle = styled.h6`
   color: ${({ theme: { color } }) => color.black};
+  white-space: pre-line;
   @media ${({ theme }) => theme.device.mobile} {
     width: 100%;
   }

From 6133450751642692b329a24cc0bdbbfac1f21d17 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 12:35:56 +0900
Subject: [PATCH 49/53] =?UTF-8?q?:art:=20=EA=B0=81=20=ED=85=9C=ED=94=8C?=
 =?UTF-8?q?=EB=A6=BF=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20=EC=98=AC=EB=B0=94=EB=A5=B8=20=EC=A0=9C=EB=AA=A9=EC=9D=B4=20?=
 =?UTF-8?q?=EB=B3=B4=EC=97=AC=EC=A7=80=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailCurriculum/DetailCurriculum.tsx             | 11 ++++++-----
 .../GraduateReview/GraduateReview.tsx                 |  9 +++++----
 src/template/codeTogetherTemplate.tsx                 |  6 ++++--
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx
index f956c843..053d7456 100644
--- a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx
+++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx
@@ -8,9 +8,10 @@ import { Curriculum } from "./Curriculum";
 // Assets
 import { SUBTITLE, TITLE } from "assets/static/phrases";
 
-const DetailCurriculum: React.FC<{ curriculumInfo: CodeTogetherCurriculumType[] }> = ({
-  curriculumInfo,
-}) => {
+const DetailCurriculum: React.FC<{
+  curriculumInfo: CodeTogetherCurriculumType[];
+  courseTitle: string;
+}> = ({ curriculumInfo, courseTitle }) => {
   const titles = curriculumInfo.map(({ tabName }) => tabName);
 
   const [curriculumIndex, setCurriculumIndex] = React.useState(0);
@@ -19,8 +20,8 @@ const DetailCurriculum: React.FC<{ curriculumInfo: CodeTogetherCurriculumType[]
     <DetailCurriculumWrapper>
       <TitleSetWrapper>
         <TitleSet
-          subtitle={SUBTITLE.JAVASCRIPT_COURSE}
-          title={TITLE.JAVASCRIPT_DETAIL_CURRICULUM}
+          subtitle={`${courseTitle}${SUBTITLE.CURRICULUMS}`}
+          title={TITLE.CODE_TOGETHER_DETAIL_CURRICULUM}
         />
       </TitleSetWrapper>
       <TabNavigationBarWrapper>
diff --git a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
index c3ac5edc..b39a8307 100644
--- a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
+++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx
@@ -8,9 +8,10 @@ import { SUBTITLE, TITLE } from "assets/static/phrases";
 // Libs
 import { useResponsive } from "lib/hooks";
 
-const GraduateReview: React.FC<{ graduateReviewInfo: { interviews: InterviewType[] } }> = ({
-  graduateReviewInfo,
-}) => {
+const GraduateReview: React.FC<{
+  graduateReviewInfo: { interviews: InterviewType[] };
+  courseTitle: string;
+}> = ({ graduateReviewInfo, courseTitle }) => {
   const { isMobile } = useResponsive();
 
   const { interviews } = graduateReviewInfo;
@@ -18,7 +19,7 @@ const GraduateReview: React.FC<{ graduateReviewInfo: { interviews: InterviewType
   return (
     <div style={{ marginTop: isMobile ? "12rem" : "18rem" }}>
       <Interview
-        subtitle={SUBTITLE.JAVASCRIPT}
+        subtitle={`${courseTitle}${SUBTITLE.CODE_TOGETHER_INTERVIEW}`}
         title={TITLE.STUDENT_INTERVIEW}
         {...{ interviews }}
       />
diff --git a/src/template/codeTogetherTemplate.tsx b/src/template/codeTogetherTemplate.tsx
index e00ed729..b725b82a 100644
--- a/src/template/codeTogetherTemplate.tsx
+++ b/src/template/codeTogetherTemplate.tsx
@@ -53,6 +53,8 @@ export default ({ data, path }: PageProps<ICodeTogetherTemplateProps>) => {
   const timeTableInfo = strainFrontmatterInfoBody(timeTable);
   const graduateReviewInfo = strainFrontmatterInfo(graduateReview);
 
+  const courseTitle = mastheadInfo.title;
+
   return (
     <GlobalTheme>
       <GlobalHeader title={mastheadInfo.title} description={mastheadInfo.description} url={path} />
@@ -60,9 +62,9 @@ export default ({ data, path }: PageProps<ICodeTogetherTemplateProps>) => {
         <HomeGlobalNavigationBar />
         <Masthead {...{ mastheadInfo }} />
         <Registration {...{ registrations }} />
-        <DetailCurriculum {...{ curriculumInfo }} />
+        <DetailCurriculum {...{ curriculumInfo, courseTitle }} />
         <TimeTable {...{ timeTableInfo }} />
-        <GraduateReview {...{ graduateReviewInfo }} />
+        <GraduateReview {...{ graduateReviewInfo, courseTitle }} />
         <FAQ course="javascript" />
         <Footer />
       </main>

From 24324ad80421eddeac420cd36aa283f52cbcf489 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 12:52:22 +0900
Subject: [PATCH 50/53] =?UTF-8?q?:label:=20faq=20course=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FAQ/FAQ.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FAQ/FAQ.tsx b/src/components/FAQ/FAQ.tsx
index 68e8e300..fbb29fec 100644
--- a/src/components/FAQ/FAQ.tsx
+++ b/src/components/FAQ/FAQ.tsx
@@ -11,7 +11,7 @@ import { SUBTITLE, TITLE } from "assets/static/phrases";
 import { strainMdxInfo } from "lib/utils";
 
 type IFaq = {
-  course?: "masters" | "javascript" | "pre-course";
+  course?: "masters" | "javascript" | "pre-course" | "clean-frontend";
 };
 
 const FAQ: React.FC<IFaq> = ({ course }) => {

From 3f62076c28cd2e2e12031a4d01bb26b08e7e0456 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 12:52:36 +0900
Subject: [PATCH 51/53] =?UTF-8?q?:art:=20faq=EB=B6=80=EB=B6=84=EC=97=90=20?=
 =?UTF-8?q?=EC=98=AC=EB=B0=94=EB=A5=B8=20=EB=82=B4=EC=9A=A9=EC=9D=B4=20?=
 =?UTF-8?q?=EB=93=A4=EC=96=B4=EA=B0=80=EB=8F=84=EB=A1=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/template/codeTogetherTemplate.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/template/codeTogetherTemplate.tsx b/src/template/codeTogetherTemplate.tsx
index b725b82a..373d68f2 100644
--- a/src/template/codeTogetherTemplate.tsx
+++ b/src/template/codeTogetherTemplate.tsx
@@ -54,6 +54,7 @@ export default ({ data, path }: PageProps<ICodeTogetherTemplateProps>) => {
   const graduateReviewInfo = strainFrontmatterInfo(graduateReview);
 
   const courseTitle = mastheadInfo.title;
+  const currentCourse = path.split("/").pop() as "clean-frontend" | "javascript";
 
   return (
     <GlobalTheme>
@@ -65,7 +66,7 @@ export default ({ data, path }: PageProps<ICodeTogetherTemplateProps>) => {
         <DetailCurriculum {...{ curriculumInfo, courseTitle }} />
         <TimeTable {...{ timeTableInfo }} />
         <GraduateReview {...{ graduateReviewInfo, courseTitle }} />
-        <FAQ course="javascript" />
+        <FAQ course={currentCourse} />
         <Footer />
       </main>
     </GlobalTheme>

From 056cf7bfbcc543e81c77b824ab8d7c297372ffe2 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 13:12:51 +0900
Subject: [PATCH 52/53] =?UTF-8?q?:bug:=20=ED=81=B4=EB=A6=B0=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=A0=ED=8A=B8=EC=97=94=EB=93=9C=20=EB=AC=B8=EA=B5=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/static/phrases.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/static/phrases.ts b/src/assets/static/phrases.ts
index 29920975..44064b91 100644
--- a/src/assets/static/phrases.ts
+++ b/src/assets/static/phrases.ts
@@ -132,6 +132,7 @@ const CATEGORTY_TPL: { [key: string]: string } = {
   javascript: "코드투게더 JS 과정",
   "pre-course": "프리코스",
   etc: "기타",
+  "clean-frontend": "클린 프론트엔드",
 };
 
 export { DESCRIPTION, LINK_DESCRIPTION, LINK, MESSAGE, SUBTITLE, TITLE, CATEGORTY_TPL };

From 4e4b9011d9487f41c60949fc4c02a5daeeabee69 Mon Sep 17 00:00:00 2001
From: HTMLhead <mrdoo309@gmail.com>
Date: Thu, 15 Dec 2022 15:08:05 +0900
Subject: [PATCH 53/53] =?UTF-8?q?:speech=5Fballoon:=20=EB=AA=A8=EA=B0=81?=
 =?UTF-8?q?=EC=BD=94=20=EC=84=A4=EB=AA=85=20=EB=AC=B8=EA=B5=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/code-together/course/clean-frontend/plan.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/code-together/course/clean-frontend/plan.mdx b/content/code-together/course/clean-frontend/plan.mdx
index 4d78828f..e49625a9 100644
--- a/content/code-together/course/clean-frontend/plan.mdx
+++ b/content/code-together/course/clean-frontend/plan.mdx
@@ -21,7 +21,7 @@ planList:
     color: "#FFF4B3"
 
   - name: 모각코(모여서 각자 코딩)
-    description: 모각코 시간에는 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 학습을 도울 수 있는 멘토가 일정시간 함께 참석해 질의응답을 주고 받을 수 있습니다.
+    description: 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 서로의 코드를 보면서 피드백을 나누기도 하고, 궁금한 점을 공유하고 함께 해결해 볼 수 있습니다.
     color: "#B4E791"
 
   - name: 그룹 피어세션