📖 230912: 코드투게더-클린 리액트 프로그래밍 페이지 추가

- 클린 리액트 프로그래밍 페이지 추가
- 과정 아이콘 파일 추가 및 적용(medium-cr.svg)
- masthead.mdx에서 사용할 tool.svg 추가 및 적용

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

@@ -0,0 +1,48 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_part1
+index: 1
+tabName: 전체
+subjectList:
+  - name: 컴포넌트 디자인과 Hooks
+    details:
+      - 클린코드를 위한 필수 JS 문법
+      - 렌더링 최적화를 고려한 리액트 훅 구현
+      - 커스텀 훅
+      - 컴포넌트 디자인
+
+  - name: UX를 고려한 동시성 제어
+    details:
+      - 애니메이션
+      - 비동기 처리
+      - 리액트 애니메이션 기법
+      - 데이터 통신
+      - 에러 처리
+      - 요청 취소
+      - 로딩과 캐싱처리(SWR)
+
+  - name: 직관적인 상태 제어
+    details:
+      - 데이터 구조 만들기
+      - 상태 전달
+      - 상태관리를 위한 아키텍쳐
+      - Flux 패턴과 상태머신
+      - immutable 과 함수형 상태변경
+
+  - name: 더 빠른 애플리케이션
+    details:
+      - 프로토콜지향 프로그래밍
+      - 의존성 분석하기
+
+  - name: 테스팅 가능한 코드 구현
+    details:
+      - 프론트엔드 테스팅
+      - 컴포넌트 테스팅
+
+masterInfoList:
+  - picture: crong
+    name: 크롱
+    position: Crong, 웹 프론트엔드 마스터
+    nutshell: "“리액트를 사용해서 클린코드와 최적화를 구현하는 것이 매우 중요합니다.”"
+    introduce: 본 과정을 통해서 유지보수에 유리한 코드를 만들고, UX를 향상시키는 방법을 알게 됩니다. 또한 매주 1:1 코드리뷰를 받으실 수 있고, 열정을 가진 새로운 동료와 기술공유 & 네트워킹이 가능합니다.
+---

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

@@ -0,0 +1,22 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_reviews
+interviews:
+  - writerPhoto: ""
+    nutshell: "웹프론트엔드 생태계를 조감할 수 있는 과정"
+    content: "단순하게 리액트를 배우는 것을 넘어 웹프론트엔드 생태계를 전반적으로 조감할 수 있었습니다. 특히 리액트의 개념과 원리를 이해하고 파생되는 라이브러리들의 작동원리까지 파악할 수 있어서 좋았습니다."
+    writer: ""
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: "동작 원리부터 이해하는 과정"
+    content: "리액트 동작 원리부터 알려주셔서 이해에 도움이 많이 됐습니다. 코드 리뷰와 함께 여러 조언도 해주셔서 너무 좋았어요!"
+    writer: ""
+    writerInfo: ""
+
+  - writerPhoto: ""
+    nutshell: "개발과 개발자의 성장에 대해 고민할 수 있는 과정"
+    content: "개발에 대한 접근 방법과 개발자로서의 성장 방법을 고민할 수 있었습니다. 개발을 어떻게 해야 하는지, 개발자는 어떻게 성장해야 하는지에 대해서 알게 해주셔서 좋았습니다."
+    writer: ""
+    writerInfo: ""
+---

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

@@ -0,0 +1,27 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_masthead
+title: "클린 리액트 프로그래밍"
+description: "리액트를 올바르고 간결하게 구현하는 방법을 배웁니다."
+targets:    
+  - "웹프론트엔드 개발자 (1~3년차 권장)"
+  - "리액트 기본 사용법을 알고 있거나 경험한 분"
+  - "정해진 코어타임에 참석할 수 있고, 코어타임 외 학습 시간을 충분히 확보할 수 있는 분"
+
+courseInfos:
+  - title: 5주
+    content: "1주차 코어타임만 오프라인"
+    img: calendar
+
+  - title: 매주 목, 오후 7시 30분~10시 30분
+    content: ""
+    img: clock
+
+  - title: React, Next.js, JavaScript, CSS(tailwindcss 등)
+    content: ""
+    img: tool
+
+  - title: 77만원
+    content: ""
+    img: coin
+---

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

@@ -0,0 +1,73 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_plan
+tags:
+  - name: 스스로
+    color: "#FFF4B3"
+
+  - name: 그룹과
+    color: "#B4E791"
+
+  - name: 마스터와
+    color: "#C7E8EF"
+
+planList:
+  - name: 미션 수행
+    description: 주어진 학습 자료와 키워드를 바탕으로 미션을 수행합니다. 각자 학습하는 과정에서 동료들과 온라인으로 질문과 고민을 나눌 수 있습니다.
+    color: "#FFF4B3"
+
+  - name: 그룹 피어세션
+    description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
+    color: "#B4E791"
+
+  - name: 마스터 피드백
+    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민합니다.
+    color: "#C7E8EF"
+---
+
+<table id="table">
+  <thead>
+    <tr>
+      <td></td>
+      <td>금</td>
+      <td>월</td>
+      <td>화</td>
+      <td>수</td>
+      <td>목</td>
+    </tr>
+  </thead>
+
+  <tbody>
+    <tr>
+      <td>19:00</td>
+      <td>미션과 <br/>학습자료 공개</td>
+      <td></td>
+      <td></td>
+      <td></td>
+      <td></td>
+    </tr>
+    <tr>
+      <td>19:30 ~ 20:30</td>
+      <td rowspan="3" class="tag0">미션수행</td>
+      <td rowspan="3" class="tag0">미션수행</td>
+      <td rowspan="3" class="tag0">미션수행</td>
+      <td rowspan="3" class="tag2">활동 리뷰</td>
+      <td class="tag1">그룹 피어세션</td>
+    </tr>
+    <tr>
+      <td>20:30 ~ 21:30</td>
+      <td rowspan="2" class="tag2">마스터 피드백</td>
+    </tr>
+    <tr>
+      <td>21:30 ~ 22:30</td>
+    </tr>
+    <tr>
+      <td> ~ 24:00</td>
+      <td></td>
+      <td></td>
+      <td class="tag0">PR 제출</td>
+      <td></td>
+      <td></td>
+    </tr>
+  </tbody>
+</table>

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

@@ -0,0 +1,9 @@
+---
+path: code-together/course/clean-react
+templateKey: codeTogether_clean-react_registrations
+registrations:
+  - title: "클린 리액트 프로그래밍 과정 대기자 신청하기"
+    description: ""
+    caption: "교육 기간 : 2023년 11월 2일 ~ 12월 7일"
+    path: "https://docs.google.com/forms/d/e/1FAIpQLScPPQgJReCfr-71qAPmmfBQCZXNhq-m7DNGMBdp-0ber7ZcCQ/viewform?usp=sf_link"
+---

content/code-together/courseList.mdx

@@ -1,15 +1,15 @@
 ---
 templateKey: codeTogether_courses_list
 courses:
-  - title: "자바스크립트 파트1•2"
-    description: "프로그래밍 기초부터 간단한 웹 애플리케이션 개발까지 경험해보는"
-    path: "/code-together/course/javascript"
-
-  - title: "클린 프론트엔드"
-    description: "프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 익혀보는"
-    path: "/code-together/course/clean-frontend"
-
   - title: "만들면서 배우는 iOS 아키텍처"
     description: "스위프트 언어와 iOS 플랫폼에서 유지보수하기 좋은 구조를 만들어 보는"
     path: "/code-together/course/ios-architecture"
+
+  - title: "클린 리액트 프로그래밍" 
+    description: "리액트를 올바르고 간결하게 구현하는 방법을 배우는"
+    path: "/code-together/course/clean-react"
+
+  - title: "자바스크립트 파트1•2"
+    description: "프로그래밍 기초부터 간단한 웹 애플리케이션 개발까지 경험해보는"
+    path: "/code-together/course/javascript"
 ---

content/code-together/courses.mdx

@@ -9,19 +9,27 @@ courses:
     tags:
       - 대기자 모집 중
 
-  - category: 프론트엔드
-    title: 클린 프론트엔드
-    cost: 440,000원
-    img: mediumCleanFE
-    path: /code-together/course/clean-frontend
-    tags:
-      - 대기자 모집 중
-
   - category: iOS
     title: 만들면서 배우는 iOS 아키텍처
     cost: 880,000원
     img: mediumSwift
     path: /code-together/course/ios-architecture
     tags:
       - 대기자 모집 중
+
+  - category: 프론트엔드
+    title: 클린 리액트 프로그래밍
+    cost: 770,000원
+    img: mediumCleanReact
+    path: /code-together/course/clean-react
+    tags:
+      - 대기자 모집 중
+
+  - category: 프론트엔드
+    title: 클린 프론트엔드
+    cost: 440,000원
+    img: mediumCleanFE
+    path: /code-together/course/clean-frontend
+    tags:
+      - 준비 중
 ---

content/faq/lists.mdx

@@ -422,4 +422,75 @@ https://github.com/code-squad/test-item-pool/blob/master/level2-common/level2.md
     title: 고용노동부에서 지원하는 재직자 교육 과정(내일배움카드교육 등)에 해당되나요?
     content: 아니요, 해당되지 않습니다.
     editDate: "2022-12-23"
+
+  - course: clean-react
+    category: 교육 과정
+    title: 과정은 온라인으로 진행되나요?
+    content: "네, 온라인 과정이며 줌과 슬랙을 활용합니다. \n
+다만 1주차 코어타임은 오프라인(@코드스쿼드)에 모여 활동할 수 있습니다."
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 수강신청
+    title: 현재 재직 중이 아니라면 참여할 수 없나요?
+    content: "아니요, 교육 과정 대상자에 해당된다면 재직여부와 상관없이 참여할 수 있습니다. \n
+    다만 현재 재직 중은 아니더라도 리액트의 개발 경험이 필요합니다."
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 수강신청
+    title: 과정 수강을 위해 어느 정도의 리액트 개발 경험이 필요한가요?
+    content: "본 과정은 리액트로 최소한 추가, 삭제 가능한 todo 애플리케이션은 만들어 봤어야 참여할 수 있는 난이도입니다."
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 수강신청
+    title: 코어타임에 함께할 수 없다면 신청할 수 없나요?
+    content: 코드투게더 과정은 동료, 마스터와 함께 학습하는 과정입니다. 모두의 학습과 성장을 위해 정해진 코어타임은 반드시 출석해야 합니다.
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 교육 과정
+    title: 정해진 코어타임에만 출석하면 되나요?
+    content: "목요일 코어타임은 이번 주에 본인이 학습하고 도전한 것을 동료 및 마스터와 공유하는 시간입니다.\n
+    따라서 코어타임 이외에도 스스로 학습할 수 있는 시간을 충분히 확보하시는 것을 적극적으로 권장합니다."
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 수강신청
+    title: 과정을 어떻게 신청할 수 있나요?
+    content: "모집 시기가 되면 대기자 분들에게 메일로 수강신청 방법을 안내드리고 있습니다.\n
+그때 자세한 방법을 확인하실 수 있습니다."
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 수강신청
+    title: 별도의 선발 과정은 없나요?
+    content: 네, 없습니다. 다만 과정의 난이도가 중급이기 때문에 초보자는 신청이 어렵습니다.
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 교육 과정
+    title: 수강생은 총 몇 명인가요?
+    content: 약 15명의 수강생이 함께 학습합니다.
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 수강신청
+    title: 과정 중간에 빈자리가 생긴다면 등록할 수 있나요?
+    content: 아니요, 과정 특성상 중간에 합류하시는 것은 어렵습니다.
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 결제
+    title: 수강료 결제는 어떻게 하나요?
+    content: "수강료는 과정 시작 전에 결제합니다. 결제 방법은 과정에 신청하시면 자세히 안내받으실 수 있습니다.\n
+만약 재직 중인 회사에서 교육 비용을 지원해 주는 경우, 법인 카드로 결제 또는 비용 입금 후 세금계산서 발행이 가능합니다."
+    editDate: "2023-09-11"
+
+  - course: clean-react
+    category: 결제
+    title: 고용노동부에서 지원하는 재직자 교육 과정(내일배움카드교육 등)에 해당되나요?
+    content: 아니요, 해당되지 않습니다.
+    editDate: "2023-09-11"
 ---

src/assets/img/icons/index.ts

@@ -18,6 +18,7 @@ import facebook from "./facebook.svg";
 import kakaotalk from "./kakaotalk.svg";
 import medium from "./medium.svg";
 import youtube from "./youtube.svg";
+import tool from "./tool.svg";
 
 export default {
   book,
@@ -40,4 +41,5 @@ export default {
   kakaotalk,
   medium,
   youtube,
+  tool,
 };

src/assets/img/illusts/thumbnail/index.ts

@@ -10,6 +10,7 @@ import mediumReact from "./medium-rct.svg";
 import mediumReactPart1 from "./medium-rct-part1.svg";
 import mediumReactPart2 from "./medium-rct-part2.svg";
 import mediumCleanFE from "./medium-cf.svg";
+import mediumCleanReact from "./medium-cr.svg";
 import smallCodeTogether from "./small-ct.svg";
 import smallMastersCourse from "./small-mc.svg";
 import smallJavascript from "./small-js.svg";
@@ -31,6 +32,7 @@ export default {
   mediumReactPart1,
   mediumReactPart2,
   mediumCleanFE,
+  mediumCleanReact,
   smallCodeTogether,
   smallMastersCourse,
   smallJavascript,