🚀 240905: 코드 투게더 스타일 개선, 마스터 정보 변경

code-squad · Sep 5, 2024 · 041e334 · 041e334
2 parents 888dccc + d023fcc
commit 041e334
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 131 deletions.
diff --git a/README.md b/README.md
@@ -1,54 +1,19 @@
 <p align="center">
-  <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts">
-    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
+  <a href="https://codesquad.kr">
+    <img width="50px" src="https://lucas.codesquad.kr/favi/favicon-96x96.png">
   </a>
 </p>
-<h1 align="center">
-  Gatsby minimal TypeScript starter
-</h1>
 
-## 🚀 Quick start
+<h2 align="center">
+  코드스쿼드 홈페이지
+</h2>
 
-1.  **Create a Gatsby site.**
+자유롭게 탐험하며 함께 성장하는 동료를 만날 수 있는 코드스쿼드 입니다.
 
-    Use the Gatsby CLI to create a new site, specifying the minimal TypeScript starter.
+<h2>
+  유지보수 관련 스토리북 주소
+</h2>
 
-    ```shell
-    # create a new Gatsby site using the minimal TypeScript starter
-    npm init gatsby
-    ```
+- https://627a29cdb418b5004a1d4cb8-bliqdwctlk.chromatic.com/?path=/story/home-introduction--page
 
-2.  **Start developing.**
-
-    Navigate into your new site’s directory and start it up.
-
-    ```shell
-    cd my-gatsby-site/
-    npm run develop
-    ```
-
-3.  **Open the code and start customizing!**
-
-    Your site is now running at http://localhost:8000!
-
-    Edit `src/pages/index.tsx` to see your site update in real-time!
-
-4.  **Learn more**
-
-    - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
-
-    - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
-
-    - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
-
-    - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
-
-    - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
-
-    - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter-ts)
-
-## 🚀 Quick start (Gatsby Cloud)
-
-Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
-
-[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-minimal-ts)
+해당 페이지는 [Gatsby minimal TypeScript Starter](https://github.com/gatsbyjs/gatsby-starter-minimal-ts) 를 통해 만들어졌습니다.
diff --git a/content/main/masters.mdx b/content/main/masters.mdx
@@ -42,24 +42,6 @@ masters:
         image: smallMastersCourse
         path: /masters
 
-  - image: ivy
-    field: 모바일 안드로이드
-    name: 아이비
-    introduce: Ivy, 모바일 안드로이드 마스터
-    nutshell: "“가치 있는 무언가를 만드는 과정을 즐길 수 있다면, 직접 부딪혀서 확인해보세요!”"
-    careers:
-      - 원밀리언라인즈코딩 CEO
-      - 우아한테크캠프 안드로이드 교육
-      - 네이버 부스트캠프 안드로이드 교육
-      - 원티드 프리온보딩 안드로이드 코스
-      - Udemy 안드로이드 앱개발 부트캠프
-      - 전 카카오페이지 안드로이드 개발자
-    schedules:
-      - title: 마스터즈
-        subtitle: 모바일 안드로이드 클래스
-        image: smallMastersCourse
-        path: /masters
-
   - image: jk
     field: 모바일 iOS
     name: JK

diff --git a/content/masters/curriculum_android.mdx b/content/masters/curriculum_android.mdx
diff --git a/src/assets/img/picture/dangle.png b/src/assets/img/picture/dangle.png
diff --git a/src/assets/img/picture/index.ts b/src/assets/img/picture/index.ts
@@ -1,5 +1,6 @@
 import jk from "./jk.png";
 import crong from "./crong.png";
+import dangle from "./dangle.png";
 import honux from "./honux.png";
 import ivy from "./ivy.png";
 import silver from "./silver.png";
@@ -16,6 +17,7 @@ import howToStudy from "./howtostudy.png";
 export default {
   jk,
   crong,
+  dangle,
   honux,
   ivy,
   silver,

diff --git a/src/components/Registration/Registration.tsx b/src/components/Registration/Registration.tsx
@@ -17,6 +17,8 @@ const Registration: React.FC<{ registrations: RegistrationType[] }> = ({ registr
 
 const RegistrationWrapper = styled.div`
   display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
   @media ${({ theme }) => theme.device.mobile} {
     padding: 0 2.4rem;
     padding-top: 8rem;

diff --git a/src/pageComponents/code-together/Course/Course.tsx b/src/pageComponents/code-together/Course/Course.tsx
@@ -76,14 +76,19 @@ const TitleWrapper = styled.div`
 
 const CourseListWrapper = styled.div`
   width: 100%;
-  margin-top: 4rem;
-  padding: 8rem 0 16rem 0;
-  background-color: ${({ theme: { color } }) => color.surface.offWhite1};
+  @media ${({ theme }) => theme.device.mobile} {
+    padding: 4.8rem 0 5.6rem 0;
+  }
+  @media ${({ theme }) => theme.device.tablet} {
+    padding: 4.8rem 0 13.6rem 0;
+  }
+  @media ${({ theme }) => theme.device.desktop} {
+    padding: 8rem 0 16rem 0;
+  }
 `;
 
 const CourseList = styled.ul`
   margin: 0 auto 6.4rem auto;
-  background-color: ${({ theme: { color } }) => color.surface.offWhite1};
   display: flex;
   flex-flow: row wrap;
   & > *:nth-child(2n - 1) {
@@ -95,13 +100,14 @@ const CourseList = styled.ul`
   @media ${({ theme }) => theme.device.mobile} {
     flex-direction: column;
     margin-bottom: 3.2rem;
+    padding: 0 2.4rem;
     & > *:not(:last-child) {
       margin-bottom: 2.4rem;
     }
   }
   @media ${({ theme }) => theme.device.tablet} {
     flex-direction: column;
-    padding: 8rem;
+    padding: 0 8rem;
     & > *:not(:last-child) {
       margin-bottom: 3.2rem;
     }

diff --git a/src/pageComponents/code-together/CourseList/CourseList.tsx b/src/pageComponents/code-together/CourseList/CourseList.tsx
@@ -58,15 +58,9 @@ const CourseWrapper = styled.ul`
 
 const CourseListWrapper = styled.ul`
   display: flex;
+  flex-direction: column;
   justify-content: center;
-  & > *:not(:last-child) {
-    margin-right: 2.4rem;
-  }
-  @media ${({ theme }) => theme.device.mobile} {
-    & > *:not(:last-child) {
-      margin-right: 1.6rem;
-    }
-  }
+  gap: 1.2rem;
 `;
 
 const CodeTogetherCourseListQuery = graphql`

diff --git a/src/pageComponents/code-together/Feature/Feature.tsx b/src/pageComponents/code-together/Feature/Feature.tsx
@@ -31,7 +31,7 @@ const Feature: React.FC = ({}) => {
 
 const FeatureWrapper = styled.div`
   margin: 0 auto;
-  margin-top: 8rem;
+  margin-bottom: 18rem;
   @media ${({ theme }) => theme.device.mobile} {
     padding: 0 2.4rem;
   }

diff --git a/src/pageComponents/code-together/StudyFeature/StudyFeature.tsx b/src/pageComponents/code-together/StudyFeature/StudyFeature.tsx
@@ -19,37 +19,45 @@ const StudyFeature: React.FC = () => {
   const { isDesktop, isMobile } = useResponsive();
 
   return (
-    <StudyWrapper>
-      <TitleSet subtitle={SUBTITLE.CODE_TOGETHER} title={TITLE.HOW_STUDY} />
-      <FeatureList>
-        {studyFeatures.map(({ title, descriptions, img }) => (
-          <FeatureItem key={title}>
-            <ImageCard
-              {...{ descriptions, title }}
-              img={features[img]}
-              medium={isDesktop}
-              vertical={isMobile}
-            />
-          </FeatureItem>
-        ))}
-      </FeatureList>
-    </StudyWrapper>
+    <StudyBackgroundWrapper>
+      <StudyWrapper>
+        <TitleSet subtitle={SUBTITLE.CODE_TOGETHER} title={TITLE.HOW_STUDY} />
+        <FeatureList>
+          {studyFeatures.map(({ title, descriptions, img }) => (
+            <FeatureItem key={title}>
+              <ImageCard
+                {...{ descriptions, title }}
+                img={features[img]}
+                medium={isDesktop}
+                vertical={isMobile}
+              />
+            </FeatureItem>
+          ))}
+        </FeatureList>
+      </StudyWrapper>
+    </StudyBackgroundWrapper>
   );
 };
 
-const StudyWrapper = styled.div`
-  padding-top: 18rem;
+const StudyBackgroundWrapper = styled.div`
+  width: 100%;
+  background-color: ${({ theme: { color } }) => color.surface.offWhite1};
+  @media ${({ theme }) => theme.device.mobile} {
+    background-color: ${({ theme: { color } }) => color.surface.white20};
+  }
+`;
+
+const StudyWrapper = styled.div<{ backgroundColor?: string }>`
   margin: 0 auto;
-  margin-top: 8rem;
   @media ${({ theme }) => theme.device.mobile} {
     padding: 0 2.4rem;
   }
   @media ${({ theme }) => theme.device.tablet} {
-    padding: 0 8rem;
+    padding: 8rem 8rem;
   }
   @media ${({ theme }) => theme.device.desktop} {
     width: 106.2rem;
-    padding: 0 18.9rem;
+    padding: 8rem 18.9rem;
   }
 `;
 

diff --git a/src/pageComponents/main/Master/Master.tsx b/src/pageComponents/main/Master/Master.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled, { useTheme } from "styled-components";
 import { graphql, Link, useStaticQuery } from "gatsby";
 // Type
-import { MasterType } from "@type/Master";
+import type { MasterType } from "@type/Master";
 // Typography
 import { Typography } from "typography";
 // Components
@@ -29,6 +29,12 @@ const Master: React.FC = () => {
     setMasterIntroduce(masters[index]);
   };
 
+  const dangleCareers: MasterType["careers"] = [
+    "전 Amazon Web Services Technical Trainer",
+    "전 카카오 Backend engineer",
+    "전 NHN NEXT UI/Web programming 전공 졸업",
+  ];
+
   return (
     <MasterWrapper>
       <MasterCourseIntroduceWrapper>
@@ -103,6 +109,47 @@ const Master: React.FC = () => {
             )}
           </IntroduceWrapper>
         </MasterInformationWrapper>
+
+        {/* 하드코딩 */}
+        {masterIntroduce.name === "호눅스" && (
+          <MasterInformationWrapper>
+            <MasterImg alt="dangle-profile" src={picture["dangle"]} />
+            <IntroduceWrapper>
+              <Introduce>
+                <NicknameWrapper>
+                  <Typography type={isMobile ? "SHLBold" : "HLBold"}>Dangle</Typography>
+                  <MasterIntroduceWrapper>
+                    <Typography type={isMobile ? "XSBody" : "SBody"}>
+                      당글, 웹 백엔드 마스터
+                    </Typography>
+                  </MasterIntroduceWrapper>
+                </NicknameWrapper>
+                <MasterNutshellWrapper>
+                  <Typography type={isMobile ? "SHLBold" : "MBold"}>
+                    “개발에 정답은 없다고 생각합니다. 현재 상황에서 최선의 답을 찾을 뿐."
+                  </Typography>
+                </MasterNutshellWrapper>
+                <CareerWrapper>
+                  {dangleCareers?.map((career) => (
+                    <li key={career}>
+                      <Typography
+                        type={isMobile ? "XSBody" : "SBody"}
+                        style={{
+                          display: "inline",
+                          verticalAlign: "middle",
+                          color: color.greyScale.grey1,
+                        }}
+                      >
+                        {career}
+                      </Typography>
+                    </li>
+                  ))}
+                </CareerWrapper>
+              </Introduce>
+            </IntroduceWrapper>
+          </MasterInformationWrapper>
+          /* 하드코딩 */
+        )}
       </div>
     </MasterWrapper>
   );