[FE] 코딩해듀오 docs 페이지 리팩터링 및 이미지 배포

frontend/src/components/CoduoDocs/ContentBox/ContentBox.styles.ts

@@ -41,7 +41,7 @@ export const ContentItem = styled(Link)<{ $isActive: boolean }>`
     left: -2rem;
 
     width: 3px;
-    height: 140%;
+    height: 160%;
 
     background-color: ${({ $isActive, theme }) => ($isActive ? theme.color.secondary[500] : theme.color.black[200])};
 

frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import ContentBox from '@/components/CoduoDocs/ContentBox/ContentBox';
 import FloatingSidebar from '@/components/CoduoDocs/FloatingSidebar/FloatingSidebar';
 
-import { START_CONTENT } from '@/constants/coduoDocs';
+import { PAIR_PROGRAMMING_CONCEPT } from '@/constants/coduoDocs';
 
 const meta = {
   title: 'component/CoduoDocs/FloatingSidebar',
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof FloatingSidebar>;
 export const Default: Story = {
   render: () => (
     <FloatingSidebar>
-      <ContentBox title="시작하기" contents={START_CONTENT} activeSection="input-name" />
+      <ContentBox title="시작하기" contents={PAIR_PROGRAMMING_CONCEPT} activeSection="input-name" />
     </FloatingSidebar>
   ),
 };

frontend/src/components/CoduoDocs/FloatingSidebar/FloatingSidebar.styles.ts

@@ -6,7 +6,7 @@ export const Layout = styled.div`
   gap: 2.3rem;
 
   position: fixed;
-  top: 15rem;
+  top: 12rem;
   left: 4%;
 
   background-color: ${({ theme }) => theme.color.black[0]};

frontend/src/components/CoduoDocs/Quote/Quote.tsx

@@ -7,7 +7,7 @@ interface QuoteProps {
   isNewBrowserOpen?: boolean;
 }
 
-const Quote = ({ text, href, linkText, isNewBrowserOpen = false }: QuoteProps) => {
+const Quote = ({ text, href, linkText, isNewBrowserOpen = true }: QuoteProps) => {
   return (
     <S.Container>
       <S.QuoteBar>|</S.QuoteBar>

frontend/src/components/CoduoDocs/SourceCode/SourceCode.styles.ts

@@ -11,11 +11,11 @@ export const Container = styled.div`
   padding: 3rem 4rem;
   border-radius: 0.5rem;
 
-  background-color: ${({ theme }) => theme.color.black[200]};
+  background-color: ${({ theme }) => theme.color.black[800]};
 `;
 
 export const Content = styled.p`
-  color: ${({ theme }) => theme.color.black[900]};
+  color: ${({ theme }) => theme.color.black[100]};
   font-size: ${({ theme }) => theme.fontSize.base};
   line-height: 1.8;
   white-space: pre-wrap;

frontend/src/components/CoduoDocs/DocsImage/DocsImage.styles.ts → frontend/src/components/CoduoDocs/Steps/Steps.styles.ts

@@ -4,20 +4,21 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 2rem;
+
+  margin-top: 3rem;
 `;
 export const Contents = styled.p`
   color: ${({ theme }) => theme.color.black[900]};
   font-size: ${({ theme }) => theme.fontSize.lg};
 `;
 
 export const Image = styled.img`
-  width: 90rem;
-  height: 50rem;
+  width: 80rem;
+
   object-fit: cover;
   object-position: center;
 
   @media (width <= 1000px) {
     width: 60rem;
-    height: 30rem;
   }
 `;

frontend/src/components/CoduoDocs/Steps/Steps.tsx

@@ -0,0 +1,35 @@
+import Quote from '@/components/CoduoDocs/Quote/Quote';
+import SourceCode from '@/components/CoduoDocs/SourceCode/SourceCode';
+
+import * as S from './Steps.styles';
+
+interface Data {
+  title?: string;
+  src?: string;
+  id?: string;
+  info?: string;
+  sourceCode?: string[];
+}
+
+interface DocsImageProps {
+  steps?: Data[];
+}
+
+const Steps = ({ steps }: DocsImageProps) => {
+  return (
+    <>
+      {steps?.map((data, index) => {
+        return (
+          <S.Container key={index} id={data.id}>
+            {data.title && <S.Contents>{data.title}</S.Contents>}
+            {data.info && <Quote text={data.info} />}
+            {data.src && <S.Image src={data.src} alt={data.id} />}
+            {data.sourceCode?.map((sourceCode, index) => <SourceCode key={index} code={sourceCode}></SourceCode>)}
+          </S.Container>
+        );
+      })}
+    </>
+  );
+};
+
+export default Steps;

frontend/src/components/_common/Header/Header.tsx

@@ -28,11 +28,11 @@ const Header = () => {
         <S.Logo src={LogoIcon} alt="" />
       </Link>
       <S.LinkContainer>
-        <S.ResponsiveLink to="/coduo-docs" aria-label="코딩해듀오 시작하기로 이동">
-          <TextButton text="코딩해듀오 시작하기" />
+        <S.ResponsiveLink to="/coduo-docs" aria-label="코딩해듀오 가이드북으로 이동">
+          <TextButton text="코딩해듀오 가이드북" />
         </S.ResponsiveLink>
         <S.ResponsiveIcon>
-          <Link to="/coduo-docs" aria-label="코딩해듀오 시작하기로 이동">
+          <Link to="/coduo-docs" aria-label="코딩해듀오 가이드북으로 이동">
             <IconButton icon={<FaBook size={theme.iconSize.sm} aria-hidden="true" />} size="sm" />
           </Link>
         </S.ResponsiveIcon>

frontend/src/constants/coduoDocs/howToStart.ts

@@ -0,0 +1,106 @@
+export const HOW_TO_START = [
+  {
+    id: 'coduo-guide',
+    title: '코딩해듀오 가이드북',
+    content: `코딩해듀오 가이드북에 오신 것을 환영합니다! 
+            코딩해듀오는 페어 프로그래밍을 처음 접하는 사용자가 페어프로그래밍을 시작하기 위해 필요한 모든 것을 제공하는 서비스입니다. 
+            여기에서는 코딩해듀오를 어떻게 시작할 수 있는지 소개합니다.`,
+    steps: [
+      {
+        title: '1. 방 생성하기',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855075/coduo-start.webp',
+        alt: 'create-room',
+        info: '가장 먼저 방을 생성해주세요. 방 만들기 버튼을 누르면 페어 프로그래밍을 진행할 방이 생성됩니다',
+      },
+    ],
+  },
+  {
+    id: 'start-mission',
+    subtitle: '미션과 함께 시작하기',
+    content: `코딩해듀오는 원활한 페어 프로그래밍 진행을 위해 연습 미션을 제공하고 있습니다.`,
+    quote: {
+      href: 'https://github.com/coduo-missions',
+      linkText: '미션 레포지토리로 이동',
+      text: '미션 레포지토리에서 미션을 미리 확인해 보세요.',
+    },
+    steps: [
+      {
+        title: '1. 미션과 함께 시작하기',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855172/start-with-mission.webp',
+        id: 'start-with-mission',
+      },
+      {
+        title: '2. 미션 확인하기',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855172/select-mission.webp',
+        id: 'select-mission',
+        info: `레포지토리로 이동 버튼을 클릭하면 해당하는 미션의 레포지토리로 이동합니다. 확인 후 원하는 미션 버튼을 클릭해주세요.`,
+      },
+      {
+        title: '3. 브랜치 생성하기',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855171/create-branch.webp',
+        id: 'create-branch',
+        info: `미션 버튼 클릭 시 브랜치 이름을 입력 할 수 있습니다. 자신의 깃허브 ID로 브랜치 이름을 입력하고 브랜치 생성하기 버튼을 클릭해주세요.`,
+      },
+      {
+        title: '4. 생성한 브랜치 확인하기',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855171/check-branch.webp',
+        id: 'check-branch-created',
+        info: `미션 레포지토리에서 자신의 브랜치가 생성되었는지 확인해주세요.`,
+      },
+      {
+        title: '5. fork 하기',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734858436/create-fork.png',
+        id: 'fork-repository',
+        info: `상단의 fork 버튼을 눌러 해당 미션을 자신의 레포지토리로 fork 해주세요.`,
+      },
+      {
+        title: '6. 레포지토리 주소 복사하기',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855171/copy-code.webp',
+        id: 'copy-repository-address',
+        info: `fork 해 온 레포지토리 주소를 복사해주세요.`,
+      },
+      {
+        title: '7. 로컬에 clone 하기',
+        id: 'clone-in-local',
+        info: `
+        cd 명령어를 통해 원하는 폴더로 이동 후 레포지토리를 clone하고, 본인이 사용하는 통합 개발 환경(IDE)으로 열어 미션을 시작합니다.`,
+        sourceCode: [` cd {이동할 폴더 이름}`, `git clone {복사한 레포지토리 주소}`, ` code {실행할 파일 이름}`],
+      },
+    ],
+  },
+  {
+    id: 'start-free',
+    subtitle: '자유롭게 시작하기',
+    steps: [
+      {
+        title: '1. 미션 없이 시작하기',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/start-free.webp',
+        id: 'start-without-mission',
+        info: "'그냥 시작할래요' 버튼을 누르면 미션 없이 자유롭게 시작할 수 있습니다.",
+      },
+      {
+        title: '2. 이름 입력하기 ',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/link-pair.webp',
+        id: 'input-pair-name',
+        info: '사용할 이름을 입력해 줍니다. 페어 정보 연동하기 버튼을 누르면 코딩해듀오에 가입 되어 있는 페어의 아이디를 연동할 수 있습니다.',
+      },
+      {
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/input-pair-name.webp',
+        id: 'input-pair-name',
+        info: '연동 없이 시작할 경우, 사용할 페어 이름을 입력해 줍니다.',
+      },
+      {
+        title: '3. 역할 정하기',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/select-role.webp',
+        id: 'select-role',
+        info: '페어와 논의하여 드라이버와 내비게이터를 정해줍니다. 관련 내용은 설명을 참고해 주세요.',
+      },
+      {
+        title: '4. 타이머 설정하기',
+        id: 'set-timer',
+        src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734869420/set-timer.webp',
+        info: '페어프로그래밍을 진행 할 시간을 정해주세요. 버튼을 클릭하거나 "직접 설정"을 통해 자유롭게 정할 수 있습니다.',
+      },
+    ],
+  },
+];

frontend/src/constants/coduoDocs/index.ts

@@ -0,0 +1,14 @@
+import { HOW_TO_START } from '@/constants/coduoDocs/howToStart';
+import { START_WITH_MISSION, START_FREE, ABOUT_PAIR_PROGRAMMING } from '@/constants/coduoDocs/sidebar';
+
+import { PAIR_PROGRAMMING_CONCEPT, NOTIONS, ABOUT_PAIR_ROOM } from './pairProgrammingConcept';
+
+export {
+  PAIR_PROGRAMMING_CONCEPT,
+  NOTIONS,
+  ABOUT_PAIR_ROOM,
+  HOW_TO_START,
+  START_WITH_MISSION,
+  START_FREE,
+  ABOUT_PAIR_PROGRAMMING,
+};

frontend/src/constants/coduoDocs/pairProgrammingConcept.ts

@@ -0,0 +1,62 @@
+export const PAIR_PROGRAMMING_CONCEPT = [
+  {
+    id: 'what-is-pair-programming',
+    title: '페어 프로그래밍에 대해',
+    subtitle: '페어 프로그래밍이란?',
+    quote: {
+      text: '페어 프로그래밍에 대한 정보는 다음 레퍼런스를 기반으로 작성했습니다.',
+      linkText: '자세한 정보 보기',
+      href: 'https://www.techtarget.com/searchsoftwarequality/definition/Pair-programming',
+    },
+    content:
+      '페어 프로그래밍(Pair Programming)은 두 명의 프로그래머가 한 컴퓨터에서 함께 작업하며 소프트웨어 코드를 작성하는 협업 방식입니다. 페어 프로그래밍에서는 두 사람이 각각 드라이버(Driver) 와 내비게이터(Navigator) 역할을 번갈아 가며 수행합니다.',
+    code: `드라이버(Driver)
+실제로 코드를 작성하는 사람으로, 키보드와 마우스를 사용해 코드를 타이핑합니다.
+
+내비게이터(Navigator)
+작성된 코드를 실시간으로 검토하고 개선할 부분을 제안하며, 코드의 전반적인 구조와 논리를 생각합니다.`,
+  },
+];
+
+export const NOTIONS = [
+  {
+    quote: '페어 프로그래밍을 효과적으로 수행하려면 다음과 같은 부분들을 유의해야 합니다.',
+  },
+  {
+    strong: '지속적인 의사소통 유지하기',
+    info: '페어 프로그래밍의 핵심은 지속적인 의사소통입니다. 만약 두 개발자 사이에 대화가 없다면, 그들은 아마도 사고 과정을 공유하고 있지 않을 것입니다. 드라이버는 코드를 작성하면서 자신의 생각을 말로 표현해야 하며, 내비게이터는 적극적으로 의견을 제시하고 질문해야 합니다. 이를 통해 아이디어를 효과적으로 교환하고 문제를 함께 해결할 수 있습니다.',
+  },
+  {
+    strong: '역할 정기적으로 교대하기와 코드 자주 커밋하기',
+    info: '드라이버와 내비게이터 역할을 일정 간격으로 바꾸는 것이 중요합니다. 이는 개발자 간의 기술 공유를 촉진하고 집중력을 유지하는 데 도움이 됩니다. 역할을 전환할 때마다 코드를 커밋하는 것이 좋습니다. 작은 단위로 자주 커밋하면 작업 진행 상황을 명확히 할 수 있고, 나중에 코드를 리뷰하거나 문제를 해결할 때 유용합니다.',
+  },
+  {
+    strong: '적절한 페어 구성과 익숙한 개발 환경 사용하기',
+    info: '페어를 이룰 때는 두 개발자가 원활하게 협력할 수 있는지 신중히 고려해야 합니다. 성격이나 작업 스타일이 맞지 않으면 생산성이 떨어질 수 있습니다. 또한, 두 개발자 모두 사용하는 개발 환경에 익숙해야 합니다. 그렇지 않으면 페어 프로그래밍의 균형이 깨질 수 있습니다. 필요한 경우, 시작 전에 개발 환경을 함께 설정하고 익히는 시간을 가지는 것이 좋습니다.',
+  },
+  {
+    strong: '필요할 때 명확히 설명 요청하기와 적절한 휴식 취하기',
+    info: '특히 경험이 적은 개발자가 전문가와 작업할 때는 배울 수 있는 모든 기회를 활용해야 합니다. 이해가 되지 않는 부분이 있다면 주저하지 말고 설명을 요청해야 합니다. 동시에, 두 개발자 모두에게 적합한 페이스로 작업해야 합니다. 필요할 때는 휴식을 취하여 집중력을 유지하고 생산성을 높일 수 있습니다. 정기적인 휴식은 장기적으로 더 효율적인 작업을 가능하게 합니다.',
+  },
+];
+
+export const ABOUT_PAIR_ROOM = [
+  { subtitle: '페어룸이란?', id: 'what-is-pair-room' },
+  { quote: '코딩해듀오에서는 페어룸을 제공하여 페어 프로그래밍을 더욱 유용하고 쉽게 하도록 도와줍니다.' },
+  {
+    strong: '투두 리스트',
+    info: '투두 리스트를 제공하여, 페어가 함께 목표와 할 일을 설정하고 관리할 수 있습니다. 이를 통해 작업의 방향성을 명확히 하고 진행 상황을 실시간으로 파악할 수 있습니다. 또한, 우선순위를 설정하여 중요한 작업에 집중할 수 있으며, 완료된 작업을 체크하면서 성취감을 느낄 수 있습니다.',
+  },
+  {
+    strong: '레퍼런스',
+    info: '페어 프로그래밍 도중 참고한 레퍼런스를 저장할 수 있습니다. 저장된 레퍼런스는 카테고리별로 정리되어 나중에 쉽게 찾아볼 수 있어 프로젝트 완료 후에도 학습 자료로 활용할 수 있습니다.',
+  },
+  {
+    strong: '알람 기능',
+    info: '설정한 시간이 지나면 역할을 변경할 수 있도록 알람이 울려 적절한 시점에 역할을 교체할 수 있도록 돕습니다.',
+  },
+  {
+    strong: '회고',
+    info: '페어 프로그래밍 세션이 종료되면 회고를 진행합니다. 이 과정에서 잘된 점, 개선할 점, 배운 점 등을 함께 논의하고 기록합니다. 회고 기능은 구조화된 템플릿을 제공하여 효과적인 회고를 가능하게 하며, 이전 회고 내용을 쉽게 참조할 수 있어 지속적인 개선이 가능합니다.',
+  },
+];