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 000000000..adbe13eee --- /dev/null +++ b/content/code-together/course/clean-frontend/curriculum_part1.mdx @@ -0,0 +1,37 @@ +--- +path: code-together/course/clean-frontend +templateKey: codeTogether_clean-frontend_part1 +index: 1 +tabName: 전체 +subjectList: + - name: "함수로 만드는 \n애플리케이션" + details: + - 함수 역할과 함수 나누기 + - 고차함수 + - 함수 합성 + - 클로저, 커링 + - immutable + + - name: "객체로 만드는 \n애플리케이션" + details: + - class, prototype, this + - OOP, 상속 + - 뷰-모델 바인딩 + + - name: 네트워크 통신 핸들링 (최적화와 에러처리) + details: + - 서버와 동기화 + - 캐시 + - 에러핸들링, 요청취소 + + - name: 리팩토링과 UI테스팅 + details: + - "리팩토링과 vitest 기반 테스팅" + +masterInfoList: + - picture: crong + name: 크롱 + position: Crong, 웹 프론트엔드 마스터 + nutshell: "“복잡하고 다양한 프론트엔드개발 세계에 필요한 다양한 패턴과 개념을 배워보세요. \n열정 넘치는 동료와 함께 즐거움을 느끼면서 프로그래밍을 배울 수 있습니다”" + introduce: 이 과정은 2022년 카카오(주) 프론트엔드 개발자들이 배우며 매우 좋은 평가를 받았습니다. +--- 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 000000000..b67c600fe --- /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 000000000..c05a69433 --- /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다양한 웹 프론트엔드 지식을 바닐라 자바스크립트로 익혀\n 프론트엔드 프레임워크에 필요한 개념을 이해합니다." +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-frontend/plan.mdx b/content/code-together/course/clean-frontend/plan.mdx new file mode 100644 index 000000000..e49625a93 --- /dev/null +++ b/content/code-together/course/clean-frontend/plan.mdx @@ -0,0 +1,83 @@ +--- +path: code-together/course/clean-frontend +templateKey: codeTogether_clean-frontend_plan +tags: + - name: 스스로 + color: "#FFF4B3" + + - name: 그룹과 + color: "#B4E791" + + - name: 마스터와 + color: "#C7E8EF" + +planList: + - name: 주간 목표 공유 + description: 공개된 미션을 확인하고, 각자의 이번 주 학습 목표를 세워 동료들에게 공유합니다. + color: "#FFF4B3" + + - name: 미션 수행 + description: 주어진 학습 자료와 키워드를 바탕으로 미션을 수행합니다. 각자 학습하는 과정에서 동료들과 온라인으로 질문과 고민을 나눌 수 있습니다. + color: "#FFF4B3" + + - name: 모각코(모여서 각자 코딩) + description: 그룹원과 미션에 대해 자유롭게 소통하며 학습합니다. 서로의 코드를 보면서 피드백을 나누기도 하고, 궁금한 점을 공유하고 함께 해결해 볼 수 있습니다. + color: "#B4E791" + + - name: 그룹 피어세션 + description: 이전 미션에 대해 함께 이야기하며 단순히 코드를 설명하는 것이 아닌, 문제 해결 과정에서의 각자 경험을 공유합니다. + color: "#B4E791" + + - name: 마스터 피드백 + description: 미션 코드에 대해 마스터와 함께 리뷰하며 다양한 코드를 마주하고, 좋은 코드에 대해 같이 고민합니다. 마지막 주차에 1:1 코드리뷰를 받아볼 수 있습니다. + color: "#C7E8EF" +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
금월화수목
19:00미션과
학습자료 공개
19:00 ~ 20:00미션수행미션수행
공통 피드백 확인
및 중간 피어세션
미션수행최종 피어세션
20:00 ~ 21:00모각코마스터 피드백
21:00 ~ 22:00주간 목표 공유
~ 24:001차 PR 제출2차 PR 제출
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 000000000..ce1482bd3 --- /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/javascript/curriculum_part1.mdx b/content/code-together/course/javascript/curriculum_part1.mdx similarity index 51% rename from content/javascript/curriculum_part1.mdx rename to content/code-together/course/javascript/curriculum_part1.mdx index 1a676a2cb..1093c9c6b 100644 --- a/content/javascript/curriculum_part1.mdx +++ b/content/code-together/course/javascript/curriculum_part1.mdx @@ -1,4 +1,5 @@ --- +path: code-together/course/javascript templateKey: codeTogether_javascript_part1 index: 1 tabName: 파트 1 @@ -26,10 +27,10 @@ subjectList: - 객체 정의 및 접근 - 객체를 활요한 프로그래밍 기초 -masterInfo: - avatar: mediumCrong - name: 크롱 - position: Crong, 웹 프론트엔드 마스터 - nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”" - introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다. +masterInfoList: + - picture: crong + name: 크롱 + position: Crong, 웹 프론트엔드 마스터 + nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”" + introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다. --- 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 000000000..1e4b98cab --- /dev/null +++ b/content/code-together/course/javascript/curriculum_part2.mdx @@ -0,0 +1,34 @@ +--- +path: code-together/course/javascript +templateKey: codeTogether_javascript_part2 +index: 2 +tabName: 파트 2 +subjectList: + - name: 브라우저 웹 개발 + details: + - 웹UI 동작 방식 + - HTML을 활용한 구조 개발 + - CSS를 활용한 스타일 개발 + + - name: 재귀 + details: + - 재귀적인 사고를 통한 문제 해결 + - 무한배열 분석 + + - name: 비동기 프로그래밍 + details: + - 비동기와 동기의 차이 + - 비동기 제어 + + - name: 웹 애플리케이션 개발 + details: + - 자바스크립트 객체와 UI 개발 + - 웹 애플리케이션 로직 개발 + +masterInfoList: + - picture: crong + name: 크롱 + position: Crong, 웹 프론트엔드 마스터 + nutshell: "“코드스쿼드만의 협력, 배려, 즐거움을 느끼면서 프로그래밍을 시작해 보세요”" + introduce: 프로그래밍을 시작할 때는 스스로 학습하는 방법을 깨닫고, 동료들과 함께 학습하면서 성장하는 것이 좋습니다. ‘코드투게더'는 그렇게 함께 배우는 목적으로 만들었습니다. 또한 무엇을 해야할지 어렵지 않도록 가장 필요한 내용만을 담아 커리큘럼을 구성했습니다. +--- diff --git a/content/javascript/interviews.mdx b/content/code-together/course/javascript/interviews.mdx similarity index 96% rename from content/javascript/interviews.mdx rename to content/code-together/course/javascript/interviews.mdx index b004f01d4..fc9a015b9 100644 --- a/content/javascript/interviews.mdx +++ b/content/code-together/course/javascript/interviews.mdx @@ -1,4 +1,5 @@ --- +path: code-together/course/javascript templateKey: codeTogether_javascript_reviews interviews: - writerPhoto: "" diff --git a/content/javascript/masthead.mdx b/content/code-together/course/javascript/masthead.mdx similarity index 95% rename from content/javascript/masthead.mdx rename to content/code-together/course/javascript/masthead.mdx index c8e9de3ff..4f2276335 100644 --- a/content/javascript/masthead.mdx +++ b/content/code-together/course/javascript/masthead.mdx @@ -1,4 +1,5 @@ --- +path: code-together/course/javascript templateKey: codeTogether_javascript_masthead title: 자바스크립트 description: "자바스크립트와 함께 프로그래밍 기초부터\n간단한 웹 애플리케이션 개발까지 경험해보는 코드투게더 과정입니다." diff --git a/content/javascript/plan.mdx b/content/code-together/course/javascript/plan.mdx similarity index 98% rename from content/javascript/plan.mdx rename to content/code-together/course/javascript/plan.mdx index 3892dc2c5..d688bfbf5 100644 --- a/content/javascript/plan.mdx +++ b/content/code-together/course/javascript/plan.mdx @@ -1,4 +1,5 @@ --- +path: code-together/course/javascript templateKey: codeTogether_javascript_plan tags: - name: 스스로 diff --git a/content/javascript/registrations.mdx b/content/code-together/course/javascript/registrations.mdx similarity index 89% rename from content/javascript/registrations.mdx rename to content/code-together/course/javascript/registrations.mdx index 453ca3f34..460d533b4 100644 --- a/content/javascript/registrations.mdx +++ b/content/code-together/course/javascript/registrations.mdx @@ -1,4 +1,5 @@ --- +path: code-together/course/javascript templateKey: codeTogether_javascript_registrations registrations: - title: "코드투게더 자바스크립트 과정 대기자 신청하기" diff --git a/content/code-together/courseList.mdx b/content/code-together/courseList.mdx index 852194c44..b21f0b246 100644 --- a/content/code-together/courseList.mdx +++ b/content/code-together/courseList.mdx @@ -3,9 +3,9 @@ templateKey: codeTogether_courses_list courses: - title: "자바스크립트 파트1•2" description: "프로그래밍 기초부터 간단한 웹 애플리케이션 개발까지 경험해보는" - path: "/code-together/javascript" + path: "/code-together/course/javascript" - title: "클린 프론트엔드" description: "프론트엔드 개발 세계에 필요한 다양한 패턴과 개념을 익혀보는" - path: "https://docs.google.com/forms/d/e/1FAIpQLSeMe3ql6Ifi9FpHy1yqSrasSq8lqgbhdEvrOhQEP6KB2kwTDA/viewform" + path: "/code-together/course/clean-frontend" --- diff --git a/content/code-together/courses.mdx b/content/code-together/courses.mdx index 6f2dcef56..b6113a0c7 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: - 대기자 모집 중 diff --git a/content/faq/lists.mdx b/content/faq/lists.mdx index 14a87ca2a..92aad091b 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" --- diff --git a/content/javascript/curriculum_part2.mdx b/content/javascript/curriculum_part2.mdx deleted file mode 100644 index f193dd7fb..000000000 --- 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/masters/curriculum_android.mdx b/content/masters/curriculum_android.mdx index 74529cf4e..2a0faa69d 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 800781d72..a370109e9 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 ec2c36430..2dbac2649 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 4f7916f29..49172f4e0 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/gatsby-node.ts b/gatsby-node.ts new file mode 100644 index 000000000..559a7aabc --- /dev/null +++ b/gatsby-node.ts @@ -0,0 +1,50 @@ +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 { + frontmatter { + templateKey + path + } + } + } + } + `); + + 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}_registrations`, + deatilCurriculum: `codeTogether_${courseName}_part*`, + timetable: `codeTogether_${courseName}_plan`, + graduateReview: `codeTogether_${courseName}_reviews`, + }, + }); + }); +}; + +export { createPages }; diff --git a/package-lock.json b/package-lock.json index 033a7c447..20c9ff82b 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", diff --git a/src/@type/CodeTogetherCurriculum.ts b/src/@type/CodeTogetherCurriculum.ts index fedcba2ab..db3293be3 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 5e1750f29..62a69de03 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[]; } diff --git a/src/@type/Master.ts b/src/@type/Master.ts index 4196146b6..e9dd8cec8 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; diff --git a/src/@type/Masthead.ts b/src/@type/Masthead.ts new file mode 100644 index 000000000..c3e2096f5 --- /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[]; +} diff --git a/src/assets/static/phrases.ts b/src/assets/static/phrases.ts index 3b567c545..44064b91c 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: "각 클래스별 상세 커리큘럼", @@ -131,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 }; diff --git a/src/assets/static/urls.ts b/src/assets/static/urls.ts index 8a8a9496a..a3034da46 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", }; diff --git a/src/components/FAQ/FAQ.tsx b/src/components/FAQ/FAQ.tsx index 68e8e3001..fbb29fecc 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 = ({ course }) => { diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts index 80b10acf9..75dfad7d2 100644 --- a/src/lib/utils/index.ts +++ b/src/lib/utils/index.ts @@ -5,4 +5,6 @@ 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 strainFrontmatterInfoBody } from "./strainFrontmatterInfoBody"; 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 000000000..d83f11bce --- /dev/null +++ b/src/lib/utils/strainFrontmatterInfo.ts @@ -0,0 +1,7 @@ +function strainFrontmatterInfo(data: any) { + const { frontmatter } = data; + + return frontmatter; +} + +export default strainFrontmatterInfo; diff --git a/src/lib/utils/strainFrontmatterInfoBody.ts b/src/lib/utils/strainFrontmatterInfoBody.ts new file mode 100644 index 000000000..2878a4852 --- /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/code-together/Course/Course.tsx b/src/pageComponents/code-together/Course/Course.tsx index 7827b47ff..ba50230ac 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"; diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx similarity index 93% rename from src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx rename to src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/Curriculum.tsx index ed263e93e..d0b892001 100644 --- a/src/pageComponents/javascript/DetailCurriculum/Curriculum/Curriculum.tsx +++ b/src/pageComponents/codeTogetherTemplate/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 ( @@ -34,7 +34,9 @@ const Curriculum: React.FC<{ curriculumInfo: CodeTogetherCurriculumType }> = ({ ))} - + {masterInfoList.map((masterInfo) => ( + + ))} ); @@ -82,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/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx similarity index 93% rename from src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx rename to src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx index bf85d05e9..12c406271 100644 --- a/src/pageComponents/javascript/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("", () => { const masterInfo = { - avatar: "mediumCrong" as keyof typeof avatars, + picture: "crong" as keyof typeof pictures, introduce: "매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.", name: "JK", nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”", diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx similarity index 87% rename from src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx rename to src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx index 91e7a0c4b..84139fec0 100644 --- a/src/pageComponents/javascript/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 = ({ 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 ( @@ -109,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/javascript/DetailCurriculum/Curriculum/MasterInfo/index.ts b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/index.ts similarity index 100% rename from src/pageComponents/javascript/DetailCurriculum/Curriculum/MasterInfo/index.ts rename to src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/MasterInfo/index.ts diff --git a/src/pageComponents/javascript/DetailCurriculum/Curriculum/index.ts b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/index.ts similarity index 100% rename from src/pageComponents/javascript/DetailCurriculum/Curriculum/index.ts rename to src/pageComponents/codeTogetherTemplate/DetailCurriculum/Curriculum/index.ts diff --git a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.docs.mdx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.docs.mdx similarity index 100% rename from src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.docs.mdx rename to src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.docs.mdx diff --git a/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx new file mode 100644 index 000000000..ad859389a --- /dev/null +++ b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.stories.tsx @@ -0,0 +1,55 @@ +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/template/code-together/DetailCurriculum", + component: DetailCurriculum, + parameters: { + docs: { + page: DetailCurriculumDocs, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (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/javascript/DetailCurriculum/DetailCurriculum.tsx b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx similarity index 71% rename from src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.tsx rename to src/pageComponents/codeTogetherTemplate/DetailCurriculum/DetailCurriculum.tsx index 75dfbf461..053d7456b 100644 --- a/src/pageComponents/javascript/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 @@ -8,13 +7,11 @@ 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 DetailCurriculum: React.FC<{ + curriculumInfo: CodeTogetherCurriculumType[]; + courseTitle: string; +}> = ({ curriculumInfo, courseTitle }) => { const titles = curriculumInfo.map(({ tabName }) => tabName); const [curriculumIndex, setCurriculumIndex] = React.useState(0); @@ -23,8 +20,8 @@ const DetailCurriculum: React.FC = () => { @@ -106,33 +103,4 @@ const CurriculumWrapper = styled.div` } `; -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 - } - masterInfo { - avatar - introduce - name - nutshell - position - } - } - } - } - } - } -`; - export default DetailCurriculum; diff --git a/src/pageComponents/javascript/DetailCurriculum/index.ts b/src/pageComponents/codeTogetherTemplate/DetailCurriculum/index.ts similarity index 100% rename from src/pageComponents/javascript/DetailCurriculum/index.ts rename to src/pageComponents/codeTogetherTemplate/DetailCurriculum/index.ts diff --git a/src/pageComponents/javascript/GraduateReview/GraduateReview.docs.mdx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.docs.mdx similarity index 100% rename from src/pageComponents/javascript/GraduateReview/GraduateReview.docs.mdx rename to src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.docs.mdx diff --git a/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx new file mode 100644 index 000000000..4b035c551 --- /dev/null +++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.stories.tsx @@ -0,0 +1,50 @@ +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/template/code-together/GraduateReview", + component: GraduateReview, + parameters: { + docs: { + page: GraduateReviewDocs, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (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/GraduateReview/GraduateReview.tsx b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx new file mode 100644 index 000000000..b39a83079 --- /dev/null +++ b/src/pageComponents/codeTogetherTemplate/GraduateReview/GraduateReview.tsx @@ -0,0 +1,30 @@ +import React from "react"; +// 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<{ + graduateReviewInfo: { interviews: InterviewType[] }; + courseTitle: string; +}> = ({ graduateReviewInfo, courseTitle }) => { + const { isMobile } = useResponsive(); + + const { interviews } = graduateReviewInfo; + + return ( +
+ +
+ ); +}; + +export default GraduateReview; diff --git a/src/pageComponents/javascript/GraduateReview/index.ts b/src/pageComponents/codeTogetherTemplate/GraduateReview/index.ts similarity index 100% rename from src/pageComponents/javascript/GraduateReview/index.ts rename to src/pageComponents/codeTogetherTemplate/GraduateReview/index.ts diff --git a/src/pageComponents/javascript/Masthead/Masthead.docs.mdx b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.docs.mdx similarity index 100% rename from src/pageComponents/javascript/Masthead/Masthead.docs.mdx rename to src/pageComponents/codeTogetherTemplate/Masthead/Masthead.docs.mdx diff --git a/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx new file mode 100644 index 000000000..e1a5ef7eb --- /dev/null +++ b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.stories.tsx @@ -0,0 +1,48 @@ +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/template/code-together/Masthead", + component: Masthead, + parameters: { + docs: { + page: MastheadDocs, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (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/javascript/Masthead/Masthead.tsx b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx similarity index 56% rename from src/pageComponents/javascript/Masthead/Masthead.tsx rename to src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx index 94dc21a20..c20707106 100644 --- a/src/pageComponents/javascript/Masthead/Masthead.tsx +++ b/src/pageComponents/codeTogetherTemplate/Masthead/Masthead.tsx @@ -1,21 +1,19 @@ 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"; -const Masthead: React.FC = () => { - const { isMobile, isTablet } = useResponsive(); +const Masthead: React.FC<{ mastheadInfo: MastheadType }> = ({ mastheadInfo }) => { const { color } = useTheme(); - const { title, description, targets, courseInfos } = strainMdxInfo( - useStaticQuery(JavaScriptMastheadQuery) - ); + const { isMobile, isTablet } = useResponsive(); + + const { title, description, targets, courseInfos } = mastheadInfo; let backgroundImage = headers.desktopPattern1; if (isMobile) backgroundImage = headers.mobilePattern1; @@ -30,21 +28,4 @@ const Masthead: React.FC = () => { ); }; -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/codeTogetherTemplate/Masthead/index.ts similarity index 100% rename from src/pageComponents/javascript/Masthead/index.ts rename to src/pageComponents/codeTogetherTemplate/Masthead/index.ts diff --git a/src/pageComponents/javascript/Registration/Registration.docs.mdx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.docs.mdx similarity index 100% rename from src/pageComponents/javascript/Registration/Registration.docs.mdx rename to src/pageComponents/codeTogetherTemplate/Registration/Registration.docs.mdx diff --git a/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx new file mode 100644 index 000000000..1fed90b3e --- /dev/null +++ b/src/pageComponents/codeTogetherTemplate/Registration/Registration.stories.tsx @@ -0,0 +1,30 @@ +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/template/code-together/Registration", + component: Registration, + parameters: { + docs: { + page: RegistrationDocs, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (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/Registration/Registration.tsx b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx new file mode 100644 index 000000000..cb758557f --- /dev/null +++ b/src/pageComponents/codeTogetherTemplate/Registration/Registration.tsx @@ -0,0 +1,13 @@ +import React from "react"; +// Type +import { RegistrationType } from "@type/Registration"; +// Components +import { Registration } from "components"; + +const CodeTogetherRegistration: React.FC<{ registrations: RegistrationType[] }> = ({ + registrations, +}) => { + return ; +}; + +export default CodeTogetherRegistration; diff --git a/src/pageComponents/javascript/Registration/index.ts b/src/pageComponents/codeTogetherTemplate/Registration/index.ts similarity index 100% rename from src/pageComponents/javascript/Registration/index.ts rename to src/pageComponents/codeTogetherTemplate/Registration/index.ts diff --git a/src/pageComponents/javascript/TimeTable/TimeTable.css b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.css similarity index 100% rename from src/pageComponents/javascript/TimeTable/TimeTable.css rename to src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.css diff --git a/src/pageComponents/javascript/TimeTable/TimeTable.docs.mdx b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.docs.mdx similarity index 100% rename from src/pageComponents/javascript/TimeTable/TimeTable.docs.mdx rename to src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.docs.mdx diff --git a/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx new file mode 100644 index 000000000..1d065b66e --- /dev/null +++ b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.stories.tsx @@ -0,0 +1,69 @@ +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/template/code-together/TimeTable", + component: TimeTable, + parameters: { + docs: { + page: TimeTableDocs, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (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;', + }, +}; diff --git a/src/pageComponents/javascript/TimeTable/TimeTable.tsx b/src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx similarity index 89% rename from src/pageComponents/javascript/TimeTable/TimeTable.tsx rename to src/pageComponents/codeTogetherTemplate/TimeTable/TimeTable.tsx index 140125b34..5893b65ea 100644 --- a/src/pageComponents/javascript/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,18 +11,17 @@ 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 TimeTable: React.FC<{ + timeTableInfo: { planList: PlanType[]; tags: TagType[]; body: string }; +}> = ({ timeTableInfo }) => { const { isMobile } = useResponsive(); const { color: { greyScale }, } = useTheme(); - const data = useStaticQuery(JavascriptTimeTableQuery); - const { planList, tags, body }: { planList: PlanType[]; tags: TagType[]; body: string } = - strainMdxInfoBody(data); + const { planList, tags, body } = timeTableInfo; React.useEffect(() => { tags.forEach((tag, i: number) => { @@ -230,23 +228,23 @@ const TagWrapper = styled.li` } `; -const JavascriptTimeTableQuery = graphql` - query JavascriptTimeTableQuery { - mdx(frontmatter: { templateKey: { eq: "codeTogether_javascript_plan" } }) { - body - frontmatter { - planList { - name - description - color - } - tags { - name - color - } - } - } - } -`; +// 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/codeTogetherTemplate/TimeTable/index.ts similarity index 100% rename from src/pageComponents/javascript/TimeTable/index.ts rename to src/pageComponents/codeTogetherTemplate/TimeTable/index.ts diff --git a/src/pageComponents/javascript/index.ts b/src/pageComponents/codeTogetherTemplate/index.ts similarity index 100% rename from src/pageComponents/javascript/index.ts rename to src/pageComponents/codeTogetherTemplate/index.ts diff --git a/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.stories.tsx b/src/pageComponents/javascript/DetailCurriculum/DetailCurriculum.stories.tsx deleted file mode 100644 index 889851d00..000000000 --- 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; - -const Template: ComponentStory = () => ; - -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 0a377b564..000000000 --- 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 fadc0fc15..000000000 --- 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("", () => { - const renderDetailCurriculum = () => - render( - - - - ); - 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/GraduateReview/GraduateReview.stories.tsx b/src/pageComponents/javascript/GraduateReview/GraduateReview.stories.tsx deleted file mode 100644 index dd3565c32..000000000 --- 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; - -const Template: ComponentStory = () => ; - -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 e22e17e46..000000000 --- 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 ( -
- -
- ); -}; - -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/Masthead/Masthead.stories.tsx b/src/pageComponents/javascript/Masthead/Masthead.stories.tsx deleted file mode 100644 index c926be065..000000000 --- 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; - -const Template: ComponentStory = () => ; - -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 6533ce39f..000000000 --- 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 ef1b310ce..000000000 --- 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("", () => { - const renderMasthead = () => - render( - - - - ); - 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/Registration/Registration.stories.tsx b/src/pageComponents/javascript/Registration/Registration.stories.tsx deleted file mode 100644 index 595158cff..000000000 --- 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; - -const Template: ComponentStory = () => ; - -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 0b9c25a27..000000000 --- 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 6fb73d471..000000000 --- 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("", () => { - const renderRegistration = () => - render( - - - - ); - 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 f8149ca99..000000000 --- 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 ; -}; - -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/TimeTable/TimeTable.stories.tsx b/src/pageComponents/javascript/TimeTable/TimeTable.stories.tsx deleted file mode 100644 index b9a730080..000000000 --- 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; - -const Template: ComponentStory = () => ; - -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 226454691..000000000 --- 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 0f6b8fdac..000000000 --- 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("", () => { - const renderTimeTable = () => - render( - - - - ); - 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/main/Banner/Banner.tsx b/src/pageComponents/main/Banner/Banner.tsx index 70cf2850e..9f4350820 100644 --- a/src/pageComponents/main/Banner/Banner.tsx +++ b/src/pageComponents/main/Banner/Banner.tsx @@ -20,6 +20,11 @@ const Banner: React.FC = ({ setBannerStatus }) => { setBannerStatus(false); }; + React.useEffect(() => { + // 배너가 필요한 경우 제거 + setBannerStatus(false); + }, []); + return ( diff --git a/src/pageComponents/main/CourseList/CourseList.test.tsx b/src/pageComponents/main/CourseList/CourseList.test.tsx index d21f2398c..5e44a0169 100644 --- a/src/pageComponents/main/CourseList/CourseList.test.tsx +++ b/src/pageComponents/main/CourseList/CourseList.test.tsx @@ -23,20 +23,12 @@ describe("", () => { 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); }); }); diff --git a/src/pageComponents/main/CourseList/CourseList.tsx b/src/pageComponents/main/CourseList/CourseList.tsx index eb1752bd9..94a06f721 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} /> - + /> */} = ({ curriculumInfo }) => { const { isMobile } = useResponsive(); - const { curriculum, masterInfo } = curriculumInfo; + const { curriculum, masterInfoList } = curriculumInfo; return ( @@ -36,7 +36,9 @@ const Curriculum: React.FC<{ curriculumInfo: CurriculumType }> = ({ curriculumIn ))} - + {masterInfoList.map((masterInfo) => ( + + ))} ); diff --git a/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx b/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.test.tsx index bf85d05e9..12c406271 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("", () => { const masterInfo = { - avatar: "mediumCrong" as keyof typeof avatars, + picture: "crong" as keyof typeof pictures, introduce: "매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다.", name: "JK", nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”", diff --git a/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx index b630e9338..d68c0c385 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 = ({ 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 ( diff --git a/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.mock.ts b/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.mock.ts index 5e63fdbdc..4aae46055 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 0088e131d..57c53600f 100644 --- a/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.tsx +++ b/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.test.tsx @@ -50,13 +50,13 @@ describe("", () => { 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); diff --git a/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.tsx b/src/pageComponents/masters/DetailCurriculum/DetailCurriculum.tsx index 7f86d5400..3fe009c5b 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 diff --git a/src/pageComponents/pre-course/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/pre-course/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx index 25582e4e2..dc37c5e0e 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 = ({ 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 689ad685a..75321532b 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"; diff --git a/src/pages/code-together/javascript/index.tsx b/src/pages/code-together/javascript/index.tsx deleted file mode 100644 index dd4d06f0c..000000000 --- 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 ( - - -
- - - - - - - -
-
- - ); -}; - -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 30376bdea..000000000 --- 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; - -const Template: ComponentStory = () => ; - -export const Default = Template.bind({}); diff --git a/src/pages/masters/index.tsx b/src/pages/masters/index.tsx index dbce06c6f..ca1da9d45 100644 --- a/src/pages/masters/index.tsx +++ b/src/pages/masters/index.tsx @@ -28,7 +28,7 @@ const MatsersPage: React.FC = () => {
- + {/* */} diff --git a/src/pages/pre-course/index.tsx b/src/pages/pre-course/index.tsx index 49ef43ad7..10e077d52 100644 --- a/src/pages/pre-course/index.tsx +++ b/src/pages/pre-course/index.tsx @@ -20,7 +20,7 @@ const PreCoursePage: React.FC = () => {
- + {/* */} diff --git a/src/template/codeTogetherTemplate.tsx b/src/template/codeTogetherTemplate.tsx new file mode 100644 index 000000000..373d68f25 --- /dev/null +++ b/src/template/codeTogetherTemplate.tsx @@ -0,0 +1,156 @@ +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, + Registration, + DetailCurriculum, + TimeTable, + GraduateReview, +} from "pageComponents/codeTogetherTemplate"; +// Assets +import { strainAllMdxInfo, strainFrontmatterInfo, strainFrontmatterInfoBody } from "lib/utils"; + +interface ICodeTogetherTemplateProps { + allMdx: { + edges: { + node: { + frontmatter: CodeTogetherCurriculumType[]; + }; + }; + }; + graduateReview: { + frontmatter: { + interviews: InterviewType[]; + }; + }; + masthead: { + frontmatter: MastheadType; + }; + registration: { + frontmatter: RegistrationType; + }; + timeTable: { + frontmatter: { planList: PlanType[]; tags: TagType[]; body: string }; + }; +} + +export default ({ data, path }: PageProps) => { + const { allMdx, graduateReview, masthead, registration, timeTable } = data; + + const mastheadInfo = strainFrontmatterInfo(masthead); + const { registrations } = strainFrontmatterInfo(registration); + const curriculumInfo = strainAllMdxInfo({ allMdx: allMdx }); + const timeTableInfo = strainFrontmatterInfoBody(timeTable); + const graduateReviewInfo = strainFrontmatterInfo(graduateReview); + + const courseTitle = mastheadInfo.title; + const currentCourse = path.split("/").pop() as "clean-frontend" | "javascript"; + + return ( + + +
+ + + + + + + +
+ + ); +}; + +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 + } + } + } + } + } + graduateReview: 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 + } + } + } + } +`;