diff --git a/content/faq/lists.mdx b/content/faq/lists.mdx index ca37182c9..fcb0ff773 100644 --- a/content/faq/lists.mdx +++ b/content/faq/lists.mdx @@ -4,14 +4,14 @@ lists: - course: masters category: 교육 과정 title: 마스터즈는 1년에 몇 번 진행하나요? - content: 매년 상반기에 한 번 과정을 진행하고 있습니다. 2025년 마스터즈는 2월 3일(월)에 시작하고, 6월 27일(금)에 수료합니다. 7월 CS 과정은 선택사항입니다 - editDate: "2024-10-07" + content: 매년 상반기에 한 번 과정을 진행하고 있습니다. 2026년 마스터즈는 2월 2일(월)에 시작하고 7월 30일(목)에 수료합니다. 7월 CS 과정은 선택사항입니다 + editDate: "2025-09-29" - course: masters category: 교육 과정 title: 과정은 오프라인으로 진행되나요? - content: 네, 코드스쿼드 교육 공간에서 오프라인으로 진행되지만, 온라인으로 지방 또는 해외에서도 참여 가능합니다. - editDate: "2024-10-10" + content: 네, 코드스쿼드 교육 공간에서 오프라인으로 진행됩니다. + editDate: "2025-09-29" - course: masters category: 지원 및 선발 @@ -52,25 +52,27 @@ lists: category: 지원 및 선발 title: 선발 과정에서는 어떤 프로그래밍 언어를 사용해야 하나요? content: "지원하신 클래스에 따라 아래 언어 사용을 권장드리고 있습니다.\n -- 웹 프론트엔드 : JavaScript\n - 웹 백엔드 : Java\n -- 데이터 엔지니어 : Python\n -- 모바일 iOS : Swift\n -- 모바일 안드로이드 : Kotlin\n\n 다른 언어 사용도 가능합니다만, 합격자의 경우 마스터즈 시작 전에 본인의 클래스에 맞는 언어를 따로 학습하셔야 합니다." - editDate: "2024-10-07" + editDate: "2025-09-29" - course: masters category: 교육 과정 title: 마스터즈에서 사용하는 pc는 윈도우/맥 상관없나요? - content: 웹 프론트엔드, 웹 백엔드, 데이터 엔지니어, 모바일 Android 클래스는 윈도우와 맥 모두 가능합니다. 모바일 iOS 클래스는 맥을 필수적으로 준비해주셔야 합니다. - editDate: "2024-10-07" + content: 윈도우, 맥, 리눅스 모두 가능합니다. + editDate: "2025-09-29" - course: masters - category: 지원 및 선발 - title: 마스터즈의 여러 클래스를 동시에 수강할 수 있나요? - content: 가능하지 않습니다. 모든 클래스는 풀타임(월~금, 10시~18시)으로 진행되기 때문에, 하나의 클래스만 수강하실 수 있습니다. - editDate: "2022-06-14" + category: 교육 과정 + title: 다른 일을 병행하며 마스터즈에 참여할 수 있을까요? + content: 마스터즈는 풀타임(월~금, 10:00~18:00) 과정이며, 정해진 시간에 집중해서 학습할 수 있어야 합니다. 온라인으로 진행되더라도, Slack으로 실시간으로 소통하며 라이브로 수업이 진행되기 때문에 다른 일과 병행하기 어렵다고 생각됩니다. + editDate: "2025-09-29" + + # - course: masters + # category: 지원 및 선발 + # title: 마스터즈의 여러 클래스를 동시에 수강할 수 있나요? + # content: 가능하지 않습니다. 모든 클래스는 풀타임(월~금, 10시~18시)으로 진행되기 때문에, 하나의 클래스만 수강하실 수 있습니다. + # editDate: "2022-06-14" - course: masters category: 지원 및 선발 @@ -87,9 +89,8 @@ lists: - course: masters category: 결제 title: 수강료 환급이나 국비 지원이 되는 과정인가요? - content: "코드스쿼드에서 따로 제공드리는 할인이나 환급 과정은 없으며, 국비 지원 기관에도 해당되지 않습니다.\n -다만 수강생 개인적으로 서울시, 경기도 등에서 지원하는 청년 수당이나 취업 수당을 신청하여 받은 사례는 있습니다." - editDate: "2022-06-14" + content: 수강료는 월 단위로 매달 수강료 50만원씩 결제합니다. 결제 방법은 과정에 합류하신 후 자세히 안내받으실 수 있습니다. + editDate: "2025-09-29" - course: masters category: 취업 diff --git a/content/main/masters.mdx b/content/main/masters.mdx index 619780a9a..95c93002b 100644 --- a/content/main/masters.mdx +++ b/content/main/masters.mdx @@ -15,14 +15,14 @@ masters: - 전 Initech, TmaxSoft 웹 보안 엔지니어 schedules: - title: 마스터즈 - subtitle: 웹 프론트엔드 클래스 + subtitle: 웹 백엔드 2026 image: smallMastersCourse path: /masters - - title: 코드투게더 - subtitle: 자바스크립트 과정 - image: smallCodeTogether - path: /code-together/javascript + # - title: 코드투게더 + # subtitle: 자바스크립트 과정 + # image: smallCodeTogether + # path: /code-together/javascript - image: honux field: 웹 백엔드 @@ -38,7 +38,7 @@ masters: - 한양대학교 전자컴퓨터공학 박사 졸업 schedules: - title: 마스터즈 - subtitle: 웹 백엔드 클래스 + subtitle: 웹 백엔드 2026 image: smallMastersCourse path: /masters @@ -55,8 +55,8 @@ masters: - 전 오로라 플래닛 모바일 스타트업 대표 - 전 브리지텍 기술연구소 차장 schedules: - - title: 마스터즈 - subtitle: 모바일 iOS 클래스 - image: smallMastersCourse - path: /masters + # - title: 마스터즈 + # subtitle: 모바일 iOS 클래스 + # image: smallMastersCourse + # path: /masters --- diff --git a/content/masters/curriculum_back.mdx b/content/masters/curriculum_back.mdx index 6d57ff4f6..e829dd70b 100644 --- a/content/masters/curriculum_back.mdx +++ b/content/masters/curriculum_back.mdx @@ -26,4 +26,10 @@ masterInfoList: position: Honux, 웹 백엔드 마스터 nutshell: '"서버 인프라 뿐만 아니라 사람과도 협업을 하며 성장하는 방법을 배웁니다"' introduce: 자바, 스프링, 데이터베이스,HTTP, 클라우드도 배우지만 함께 배우고, 함께 자라는 법도 익힙니다. + + - picture: crong + name: 크롱 + position: Crong, 웹 프론트엔드 마스터 + nutshell: '"우리 모두 꾸준히 학습하며 성장하는 행복한 개발자가 되면 좋겠습니다."' + introduce: 바닐라JS를 좋아하고, UX향상에 도움이 되는 개발 방법에 관심이 많아요 --- diff --git a/content/masters/curriculum_front.mdx b/content/masters/curriculum_front.mdx index 420145776..b1c71b1b9 100644 --- a/content/masters/curriculum_front.mdx +++ b/content/masters/curriculum_front.mdx @@ -1,35 +1,35 @@ --- -templateKey: masters_curriculum_front -index: 1 -tabName: JS 풀스택 -curriculum: - - subject: 개인 및 그룹 프로젝트 - subjectList: - - name: Todo 애플리케이션 - detail: HTML,CSS, Node.js, 개발환경, git +# templateKey: masters_curriculum_front +# index: 1 +# tabName: JS 풀스택 +# curriculum: +# - subject: 개인 및 그룹 프로젝트 +# subjectList: +# - name: Todo 애플리케이션 +# detail: HTML,CSS, Node.js, 개발환경, git - - name: "동적 Todo\n애플리케이션" - detail: DOM, Event, VanillaJS, Express +# - name: "동적 Todo\n애플리케이션" +# detail: DOM, Event, VanillaJS, Express - - name: 비동기 시각화 - detail: React 프로그래밍, 비동기 프로그래밍, 인터랙티브 프로그래밍 +# - name: 비동기 시각화 +# detail: React 프로그래밍, 비동기 프로그래밍, 인터랙티브 프로그래밍 - - name: 뉴스스탠드 - detail: React 프로그래밍, TypeScript, 상태 관리, APIs 설계, 데이터베이스(RDB/ NoSQL), Cloud Serverless 환경 +# - name: 뉴스스탠드 +# detail: React 프로그래밍, TypeScript, 상태 관리, APIs 설계, 데이터베이스(RDB/ NoSQL), Cloud Serverless 환경 - - name: 리액트 만들기 - detail: 프레임워크 인터널, 리액트 아키텍쳐 +# - name: 리액트 만들기 +# detail: 프레임워크 인터널, 리액트 아키텍쳐 - - name: 이슈관리 앱 (그룹) - detail: React 고급 프로그래밍, 최적화, 에러핸들링, 테스팅, CDN 사용 및 관리, CI/CD +# - name: 이슈관리 앱 (그룹) +# detail: React 고급 프로그래밍, 최적화, 에러핸들링, 테스팅, CDN 사용 및 관리, CI/CD - - name: AI 연동 프로젝트 - detail: React, LLM 및 다양한 머신러닝 클라우드 APIs(Google, AWS, Stability API 등) +# - name: AI 연동 프로젝트 +# detail: React, LLM 및 다양한 머신러닝 클라우드 APIs(Google, AWS, Stability API 등) -masterInfoList: - - picture: crong - 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 fb184cb10..f5a1a67c8 100644 --- a/content/masters/curriculum_ios.mdx +++ b/content/masters/curriculum_ios.mdx @@ -1,35 +1,35 @@ --- -templateKey: masters_curriculum_ios -index: 4 -tabName: "모바일 iOS" -curriculum: - - subject: 개인 및 그룹 프로젝트 - subjectList: - - name: 사진 액자 앱 - detail: HIG, iOS 앱 설계, 뷰컨트롤러 프로그래밍 +# templateKey: masters_curriculum_ios +# index: 4 +# tabName: "모바일 iOS" +# curriculum: +# - subject: 개인 및 그룹 프로젝트 +# subjectList: +# - name: 사진 액자 앱 +# detail: HIG, iOS 앱 설계, 뷰컨트롤러 프로그래밍 - - name: 포커 게임 앱 - detail: MVC 역할 분리, 뷰 프로그래밍, 메모리 관리, 객체지향 프로그래밍 +# - name: 포커 게임 앱 +# detail: MVC 역할 분리, 뷰 프로그래밍, 메모리 관리, 객체지향 프로그래밍 - - name: 드로잉 앱 - detail: 이벤트 처리와 응답 체인, 옵저버와 노티피케이션, 프로토콜 지향 프로그래밍 +# - name: 드로잉 앱 +# detail: 이벤트 처리와 응답 체인, 옵저버와 노티피케이션, 프로토콜 지향 프로그래밍 - - name: 할 일 관리 앱 - detail: 테이블 뷰, 데이터소스, 드래그 앤 드롭, 함수형 프로그래밍, 단위 테스트 +# - name: 할 일 관리 앱 +# detail: 테이블 뷰, 데이터소스, 드래그 앤 드롭, 함수형 프로그래밍, 단위 테스트 - - name: 사진 관리 앱 - detail: 콜랙션 뷰, 동시성 프로그래밍, 짝프로그래밍, 앱 배포 +# - name: 사진 관리 앱 +# detail: 콜랙션 뷰, 동시성 프로그래밍, 짝프로그래밍, 앱 배포 - - name: 이슈 관리 앱 - detail: 네트워크 프로그래밍, 영구저장소, 뷰렌더링 원리, 리액티브 프로그래밍 +# - name: 이슈 관리 앱 +# detail: 네트워크 프로그래밍, 영구저장소, 뷰렌더링 원리, 리액티브 프로그래밍 - - name: 중고거래 앱 - detail: SwiftUI, UITest, 파편화, 앱 아키텍처 개선 +# - name: 중고거래 앱 +# detail: SwiftUI, UITest, 파편화, 앱 아키텍처 개선 -masterInfoList: - - picture: jk - name: JK - position: 제이케이, 모바일 iOS 마스터 - nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”" - introduce: 매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다. +# masterInfoList: +# - picture: jk +# name: JK +# position: 제이케이, 모바일 iOS 마스터 +# nutshell: "“나와 지인들에게 필요한 iOS 앱을 직접 만들고 출시까지 도전해보세요”" +# introduce: 매력적인 애플 플랫폼에서 함께 성장할 개발자를 기다립니다. --- diff --git a/content/masters/masthead.mdx b/content/masters/masthead.mdx index d6ae156ee..084c5619e 100644 --- a/content/masters/masthead.mdx +++ b/content/masters/masthead.mdx @@ -1,22 +1,23 @@ --- templateKey: masters_masthead -title: 마스터즈 +title: 마스터즈 웹 백엔드 2026 description: "마스터즈는 현장처럼 학습하며 분야별 최고의 개발자로 도약하는데 도움을 주는 풀타임 과정 입니다." courseInfos: - - title: 5개월(필수) + 1개월(CS선택) - content: "온+오프라인" + - title: 2026년 2월 시작 - 5개월(필수) + 1개월(CS선택) + content: "오프라인" img: calendar - title: 월~금, 오전 10시~오후 6시 content: "풀타임" img: clock - - title: 77만원 - content: "5개월 기준 총 385만원" + - title: 월 50만원 + content: "6개월 기준 총 300만원" img: coin targets: - - "프로그래밍 언어를 하나라도 학습해본 경험이 있는 사람" - - "6개월 이상 프로그래밍을 공부해보았고, 동료와 함께 성장하고 싶은 사람" + - "하나 이상의 프로그래밍 언어를 학습해본 경험이 있는 사람" + - "동료와 함께 성장하고 싶은 사람" - "실무 프로그래머로 가는 길이 궁금한 사람" + - "인공지능 시대에 경쟁력을 확보하고 싶은 사람" --- diff --git a/content/masters/registration.mdx b/content/masters/registration.mdx index 6e5ef2c0a..a19299181 100644 --- a/content/masters/registration.mdx +++ b/content/masters/registration.mdx @@ -1,6 +1,11 @@ --- templateKey: masters_registrations registrations: + - title: "🙌 마스터즈 웹 백엔드 2026 대기자 신청" + description: "" + caption: "신청 기간 : 2025.10.02 ~" + path: "https://forms.gle/TrXPA4mbZoXabuaS9" + - title: "🎥 25년도, 웹개발자 어떻게 공부해야 하는가" description: "" caption: "영상 업로드 날짜 : 2024.10.23" @@ -10,9 +15,4 @@ registrations: description: "" caption: "진행 날짜 : 2024.11.14" path: "https://youtu.be/iXrk-NW6WqE" - - - title: "🙌 2025 마스터즈 신청 마감했습니다" - description: "" - caption: "선발 지원 기간 : 2024.11.29 ~ 2024.12.03" - path: "" --- diff --git a/content/masters/schedule.mdx b/content/masters/schedule.mdx index a69556ffd..3f1f72431 100644 --- a/content/masters/schedule.mdx +++ b/content/masters/schedule.mdx @@ -4,27 +4,30 @@ progress: - label: 대기자 신청 title: 대기자 신청 subtitle: 다가올 마스터즈에 미리 대기자 신청을 해보세요 - description: 마스터즈는 보통 매년 상반기에 진행하며, 선발 전 6개월 동안 홈페이지를 통해 대기자 신청을 받고 있습니다. 정확한 선발 일정은 홈페이지를 통해 공지되며, 대기자분들은 메일을 통해 이 소식을 가장 빠르게 받으실 수 있습니다. + description: 마스터즈는 보통 매년 상반기에 진행하며, 선발 전 3개월 동안 홈페이지를 통해 대기자 신청을 받고 있습니다. 정확한 선발 일정은 홈페이지를 통해 공지되며, 대기자분들은 메일을 통해 이 소식을 가장 빠르게 받으실 수 있습니다. - label: 지원 및 선발 title: 지원 및 선발 - subtitle: 지원자의 프로그래밍 경험과 실력 그리고 학습 태도를 확인하기 위한 선발 과정이 있습니다 - description: "마스터즈는 하나의 개발 언어라도 학습해 본 경험이 있는 분들에게 알맞은 과정입니다. 지원자의 프로그래밍 경험과 실력 그리고 학습 태도를 확인하기 위한 선발 과정이 있습니다.\n\n 먼저 기본적인 프로그래밍이 가능한지 확인합니다. 어떤 언어든지 배열에서 값을 읽고, 원하는 조건으로 비교하는 함수를 작성할 수 있는 수준이 최소 수준입니다. 그리고 6개월 동안 다양한 멤버들과 함께 협력하고, 스스로 포기하지 않으며 도전적으로 학습할 수 있는지 여러 방면으로 확인하고 있습니다.\n\n 단지 프로그래밍 실력만으로 합격 여부를 결정하지 않습니다. 선발된 지원자는 마스터즈의 멤버로 함께하게 됩니다." + subtitle: 지원자의 프로그래밍 경험과 실력 그리고 학습 태도를 확인하기 위한 선발 과정이 있습니다. + description: "마스터즈는 하나의 개발 언어라도 학습해 본 경험이 있는 분들에게 알맞은 과정입니다.\n\n + 먼저 기본적인 프로그래밍이 가능한지 확인합니다. 어떤 언어든지 배열에서 값을 읽고, 원하는 조건으로 비교하는 함수를 작성할 수 있는 수준이 최소 수준입니다. 그리고 6개월 동안 다양한 멤버들과 함께 협력하고, 스스로 포기하지 않으며 도전적으로 학습할 수 있는지 여러 방면으로 확인하고 있습니다.\n\n + 단지 프로그래밍 실력만으로 합격 여부를 결정하지 않습니다. 선발된 지원자는 마스터즈의 멤버로 함께하게 됩니다." - - label: 프로그래밍 연습 - title: 프로그래밍 연습 + - label: 프로그래밍 실습 + title: 프로그래밍 실습 subtitle: 먼저 클래스별 프로그래밍 언어와 친해지는 시간을 갖습니다 - description: "작은 미션에 도전하면서 프로그래밍 언어의 기초를 반복적으로 연습합니다. 필수적으로 알아야 하는 개념을 익히고, 동료들과 함께 학습하고 협력하는 연습을 합니다." + description: "작은 미션에 도전하면서 프로그래밍 언어의 기초를 반복적으로 학습하고 실습합니다. \n + 필수적으로 알아야 하는 개념을 익히고, 동료들과 함께 학습하고 협력하는 연습을 합니다." - - label: 클래스별 과정+그룹 프로젝트 - title: 클래스별 과정+그룹 프로젝트 - subtitle: 각 클래스로 나뉜 멤버들은 분야별로 심화된 주제를 학습하고, 다른 클래스와 함께 실전 프로젝트를 진행합니다 - description: "여러 개의 미니 프로젝트를 통해 모바일 앱이나 웹 서비스를 만들면서 분야별로 필요한 지식을 학습합니다. 또한 주 1~2회 밀도있는 마스터 클래스를 통해 핵심 지식을 빠르게 습득합니다.\n\n - 기획과 디자인이 포함된 프로젝트를 통해, 난이도별 요구사항을 구현하며 실무 역량을 다양하게 경험할 수 있습니다. 다른 클래스 멤버들과 한 팀이 되어 스프린트 계획, 배포, 리뷰, 리팩토링, 테스팅 등의 공학적인 방법을 함께 실천합니다.\n\n - 다양한 개인/팀 프로젝트를 경험하며 실제로 서비스 가능한 결과물을 만들어 냅니다. 같은 분야와 협업하고 때론 다른 분야와 협력하며 클래스별 핵심 지식을 나만의 지식으로 매듭지을 수 있습니다." + - label: 웹 백엔드 과정+그룹 프로젝트 + title: 웹 백엔드 과정+그룹 프로젝트 + subtitle: 웹 백엔드 분야의 심화된 주제를 학습하고, 실전 프로젝트를 통해 웹벡인드 중심으로 클라우드 배포까지 진행하며 서비스 가능한 결과물을 만들어 냅니다 + description: "몇 가지 미니 프로젝트를 통해 웹 서비스를 만들면서 분야별로 필요한 지식을 학습합니다. 또한 주 2 ~ 3회 밀도있는 마스터 클래스를 통해 핵심 지식을 빠르게 습득합니다.\n\n + 기획과 디자인이 포함된 프로젝트를 통해, 난이도별 요구사항을 구현하며 실무 역량을 다양하게 경험할 수 있습니다. 다른 멤버들과 한 팀이 되어 스프린트 계획, 배포, 리뷰, 리팩토링, 테스팅 등의 공학적인 방법을 함께 실천합니다.\n\n + 다양한 개인/팀 프로젝트를 경험하며 실제로 서비스 가능한 결과물을 만들어 냅니다. AI 시대에 맞춰 AI 도구를 성장에 도움이 되는 올바른 방향으로 사용하는 방법을 익힙니다. 같은 분야와 협업하고 때론 다른 분야와 협력하며 클래스별 핵심 지식을 나만의 지식으로 매듭지을 수 있습니다." - - label: CS10 - title: CS10 + - label: CS08 + title: CS08 subtitle: 마스터즈 멤버들은 마지막 4주 동안 컴퓨터 기초를 학습할 기회를 선택할 수 있습니다 description: "컴퓨터 시스템 구조, 운영체제, 네트워크, 자료구조와 알고리즘, 데이터모델링에 대한 기초 지식을 학습하고, 학습한 지식을 바탕으로 총 8개의 미션을 해결합니다.\n\n 컴퓨터 사이언스를 한 달 만에 완성한다는 것은 매우 어려운 일입니다. 이 과정에서는 본인의 역량에 맞는 속도와 분량을 정해서 CS를 학습할 수 있고, 충분히 익히지 못한 지식은 스스로 꾸준히 보강할 수 있습니다." diff --git a/package.json b/package.json index 9a2376b58..ae9147c7f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "homepage", - "version": "1.0.0", + "version": "1.4.10", "private": true, "description": "homepage", "author": "HTMLhead", diff --git a/src/assets/static/phrases.ts b/src/assets/static/phrases.ts index 3317848c1..d2999fa50 100644 --- a/src/assets/static/phrases.ts +++ b/src/assets/static/phrases.ts @@ -110,7 +110,7 @@ const LINK = { const LINK_DESCRIPTION = { CODE_TOGETHER: "온라인으로 함께 배우는 단기 과정", CONFIRM_RECRUIT: "코드스쿼드의 교육 가치에 공감한다면", - MASTERS: "분야별 최고의 개발자가 되기 위한 풀타임 과정", + MASTERS: "최고의 개발자가 되기 위한 풀타임 과정", PRE_COURSE: "프로그래밍 기초를 다지며 마스터즈를 준비할 수 있는 과정", RECEIVE_SUBSCRIPTION: "원하는 코스의 오픈 소식을 가장 먼저 알고 싶다면?", }; @@ -122,7 +122,7 @@ const MESSAGE = { COMPANY_CEO_NAME: "대표자: 김정", COMPANY_EMAIL: "대표 이메일: ", COMPANY_EMAIL_ADDRESS: "yoda@codesquad.kr", - COMPANY_NAME: "코드스쿼드 (v1.4.9)", + COMPANY_NAME: "코드스쿼드 (v1.4.10)", COMPANY_REGISTRATION_NUMBER: "사업자등록번호: 676-88-00504", COMPANY_MAIL_ORDER_SALES_REGISTRATION_NUMBER: "통신판매신고: 제 2017-서울강남-04281호", COMPANY_TEL_NUMBER: "전화: 070-4117-1005", diff --git a/src/components/CourseInfo/InfoItem/InfoItem.tsx b/src/components/CourseInfo/InfoItem/InfoItem.tsx index b7133ce0a..319c2c8ee 100644 --- a/src/components/CourseInfo/InfoItem/InfoItem.tsx +++ b/src/components/CourseInfo/InfoItem/InfoItem.tsx @@ -22,8 +22,9 @@ const InfoItem: React.FC = ({ icon, title, content }) => { }; const InfoItemWrapper = styled.li` - display: flex; + display: inline-flex; align-items: center; + white-space: nowrap; & > *:not(:last-child) { margin-right: 0.4rem; } diff --git a/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx b/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx index d68c0c385..743186cc6 100644 --- a/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx +++ b/src/pageComponents/masters/DetailCurriculum/Curriculum/MasterInfo/MasterInfo.tsx @@ -44,6 +44,7 @@ const MasterInfo: React.FC<{ masterInfo: MasterInfoType }> = ({ masterInfo }) => const MasterInfoWrapper = styled.li` display: flex; + margin-top: 4rem; @media ${({ theme }) => theme.device.mobile} { flex-direction: column; }