🔧 221215: 클린 프론트엔드 페이지 수정

### 클린 프론트엔드 페이지 수정 * 커리큘럼 텍스트 수정 * masthead 텍스트 수정 * 인터뷰 텍스트 수정 * 마스터 정보 수정 * faq페이지 수정 * 제목 수정
code-squad · Dec 15, 2022 · c870e22 · c870e22
2 parents 9278665 + 3f62076
commit c870e22
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 72 deletions.
diff --git a/content/code-together/course/clean-frontend/curriculum_part1.mdx b/content/code-together/course/clean-frontend/curriculum_part1.mdx
@@ -2,16 +2,17 @@
 path: code-together/course/clean-frontend
 templateKey: codeTogether_clean-frontend_part1
 index: 1
-tabName: 주제
+tabName: 전체
 subjectList:
-  - name: 함수로 만드는 애플리케이션
+  - name: "함수로 만드는 \n애플리케이션"
     details:
       - 함수 역할과 함수 나누기
       - 고차함수
+      - 함수 합성
       - 클로저, 커링
       - immutable
 
-  - name: 객체로 만드는 애플리케이션
+  - name: "객체로 만드는 \n애플리케이션"
     details:
       - class, prototype, this
       - OOP, 상속
@@ -25,12 +26,12 @@ subjectList:
 
   - name: 리팩토링과 UI테스팅
     details:
-      - ""
+      - "리팩토링과 vitest 기반 테스팅"
 
 masterInfoList:
   - picture: crong
     name: 크롱
     position: Crong, 웹 프론트엔드 마스터
-    nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”"
-    introduce: 복잡하고 다양한 프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. 열정이 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다. 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받은 과정입니다
+    nutshell: "“복잡하고 다양한 프론트엔드개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. \n열정 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다”"
+    introduce: 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받았습니다.
 ---
diff --git 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: ""
 ---
diff --git 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다양한 웹 프론트엔드 지식을 바닐라 자바스크립트로 익혀\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
 ---
diff --git 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,66 +28,55 @@ planList:
     description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다.
     color: "#B4E791"
 
-  - name: 마스터 코드리뷰
-    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민해보는 시간입니다.
+  - name: 마스터 피드백
+    description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민합니다. 마지막 주차에 1:1 코드리뷰를 받아볼 수 있습니다.
     color: "#C7E8EF"
 ---
 
 <table id="table">
   <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>

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

diff --git 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 }) => {

diff --git 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%;
   }

diff --git a/...pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/...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;
   }

diff --git 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
@@ -8,17 +8,18 @@ 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;
 
   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
@@ -53,17 +53,20 @@ export default ({ data, path }: PageProps<ICodeTogetherTemplateProps>) => {
   const timeTableInfo = strainFrontmatterInfoBody(timeTable);
   const graduateReviewInfo = strainFrontmatterInfo(graduateReview);
 
+  const courseTitle = mastheadInfo.title;
+  const currentCourse = path.split("/").pop() as "clean-frontend" | "javascript";
+
   return (
     <GlobalTheme>
       <GlobalHeader title={mastheadInfo.title} description={mastheadInfo.description} url={path} />
       <main style={{ overflowX: "hidden" }}>
         <HomeGlobalNavigationBar />
         <Masthead {...{ mastheadInfo }} />
         <Registration {...{ registrations }} />
-        <DetailCurriculum {...{ curriculumInfo }} />
+        <DetailCurriculum {...{ curriculumInfo, courseTitle }} />
         <TimeTable {...{ timeTableInfo }} />
-        <GraduateReview {...{ graduateReviewInfo }} />
-        <FAQ course="javascript" />
+        <GraduateReview {...{ graduateReviewInfo, courseTitle }} />
+        <FAQ course={currentCourse} />
         <Footer />
       </main>
     </GlobalTheme>