woowacourse-teams · anttiey · Feb 19, 2025 · Feb 19, 2025 · Feb 19, 2025 · Feb 19, 2025
diff --git a/frontend/src/components/CoduoDocs/Quote/Quote.styles.ts b/frontend/src/components/CoduoDocs/Quote/Quote.styles.ts
@@ -15,9 +15,8 @@ export const QuoteBar = styled.span`
 `;
 
 export const Content = styled.p`
-  color: ${({ theme }) => theme.color.black[900]};
+  color: ${({ theme }) => theme.color.black[500]};
   font-size: ${({ theme }) => theme.fontSize.base};
-  font-weight: ${({ theme }) => theme.fontWeight.extraLight};
 `;
 
 export const TextLink = styled.a`

diff --git a/frontend/src/components/CoduoDocs/Steps/Steps.styles.ts b/frontend/src/components/CoduoDocs/Steps/Steps.styles.ts
@@ -3,17 +3,26 @@ import styled from 'styled-components';
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
 
-  margin-top: 3rem;
+  margin-top: 1rem;
 `;
-export const Contents = styled.p`
+
+export const Title = styled.p`
   color: ${({ theme }) => theme.color.black[900]};
   font-size: ${({ theme }) => theme.fontSize.lg};
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+`;
+
+export const Content = styled.p`
+  color: ${({ theme }) => theme.color.black[900]};
+  font-size: ${({ theme }) => theme.fontSize.base};
+  line-height: 1.9;
 `;
 
 export const Image = styled.img`
   width: 80rem;
+  margin-top: 1rem;
 
   object-fit: cover;
   object-position: center;

diff --git a/frontend/src/components/CoduoDocs/Steps/Steps.tsx b/frontend/src/components/CoduoDocs/Steps/Steps.tsx
@@ -1,4 +1,3 @@
-import Quote from '@/components/CoduoDocs/Quote/Quote';
 import SourceCode from '@/components/CoduoDocs/SourceCode/SourceCode';
 
 import * as S from './Steps.styles';
@@ -21,8 +20,8 @@ const Steps = ({ steps }: DocsImageProps) => {
       {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.title && <S.Title>{data.title}</S.Title>}
+            {data.info && <S.Content>{data.info}</S.Content>}
             {data.src && <S.Image src={data.src} alt={data.id} />}
             {data.sourceCode?.map((sourceCode, index) => <SourceCode key={index} code={sourceCode}></SourceCode>)}
           </S.Container>

diff --git a/frontend/src/constants/coduoDocs/howToStart.ts b/frontend/src/constants/coduoDocs/howToStart.ts
@@ -1,106 +1,86 @@
-export const HOW_TO_START = [
+export const CREATE_PAIR_ROOM_STEPS = [
   {
-    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: 'create-room',
+    title: '1. 방 생성하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855075/coduo-start.webp',
+    info: '가장 먼저 방을 생성해주세요. 방 만들기 버튼을 누르면 페어 프로그래밍을 진행할 방이 생성됩니다',
+  },
+];
+
+export const MISSION_START_STEPS = [
+  {
+    id: 'start-with-mission',
+    title: '1. 미션과 함께 시작하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855172/start-with-mission.webp',
+    info: "'미션과 함께 시작할래요' 버튼을 누르면 미션과 함께 페어 프로그래밍을 시작할 수 있습니다.",
+  },
+  {
+    id: 'select-mission',
+    title: '2. 미션 확인하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855172/select-mission.webp',
+    info: `'레포지토리로 이동하기' 버튼을 클릭하면 미션 레포지토리를 확인할 수 있습니다. 확인 후 원하는 미션 버튼을 클릭해 주세요.`,
+  },
+  {
+    id: 'create-branch',
+    title: '3. 브랜치 생성하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855171/create-branch.webp',
+    info: `미션 버튼을 클릭하면 사용할 브랜치를 생성할 수 있습니다. 자신의 깃허브 ID로 브랜치 이름을 입력하고 '브랜치 생성하기' 버튼을 클릭해 주세요.`,
+  },
+  {
+    id: 'check-branch-created',
+    title: '4. 생성한 브랜치 확인하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855171/check-branch.webp',
+    info: `미션 레포지토리에서 브랜치가 생성되었는지 확인해 주세요.`,
+  },
+  {
+    id: 'fork-repository',
+    title: '5. 미션 레포지토리 fork 하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734858436/create-fork.png',
+    info: `상단의 fork 버튼을 눌러 미션 레포지토리를 자신의 레포지토리로 fork 해 주세요.`,
+  },
+  {
+    id: 'copy-repository-address',
+    title: '6. 레포지토리 주소 복사하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734855171/copy-code.webp',
+    info: `fork 한 레포지토리 주소를 복사해주세요.`,
+  },
+  {
+    id: 'clone-in-local',
+    title: '7. 로컬에 clone 하기',
+    info: `
+    cd 명령어를 통해 원하는 폴더로 이동 후 레포지토리를 clone하고, 본인이 사용하는 통합 개발 환경(IDE)으로 열어 미션을 시작합니다.`,
+    sourceCode: [` cd {이동할 폴더 이름}`, `git clone {복사한 레포지토리 주소}`, ` code {실행할 파일 이름}`],
+  },
+];
+
+export const FREE_START_STEPS = [
+  {
+    id: 'start-without-mission',
+    title: '1. 미션 없이 시작하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/start-free.webp',
+    info: "'그냥 시작할래요' 버튼을 누르면 미션 없이 자유롭게 시작할 수 있습니다.",
+  },
+  {
+    id: 'input-pair-name',
+    title: '2. 이름 입력하기 ',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/link-pair.webp',
+    info: "사용할 이름을 입력해 줍니다. '페어 정보 연동하기' 버튼을 누르면 코딩해듀오에 가입 되어 있는 페어의 아이디를 연동할 수 있습니다.",
+  },
+  {
+    id: 'input-pair-name',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/input-pair-name.webp',
+    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: 'select-role',
+    title: '3. 역할 정하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734868518/select-role.webp',
+    info: '페어와 논의하여 드라이버와 내비게이터를 정해줍니다. 관련 내용은 설명을 참고해 주세요.',
   },
   {
-    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: '페어프로그래밍을 진행 할 시간을 정해주세요. 버튼을 클릭하거나 "직접 설정"을 통해 자유롭게 정할 수 있습니다.',
-      },
-    ],
+    id: 'set-timer',
+    title: '4. 타이머 설정하기',
+    src: 'https://res.cloudinary.com/dtxv2v5kx/image/upload/v1734869420/set-timer.webp',
+    info: "페어 프로그래밍을 진행 할 시간을 정해주세요. 버튼을 클릭하거나 '직접 설정 버튼' 을 통해 자유롭게 정할 수 있습니다.",
   },
 ];
diff --git a/frontend/src/constants/coduoDocs/index.ts b/frontend/src/constants/coduoDocs/index.ts
@@ -1,14 +1,5 @@
-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,
-};
+export { PAIR_PROGRAMMING_CONCEPT, NOTIONS, ABOUT_PAIR_ROOM, START_WITH_MISSION, START_FREE, ABOUT_PAIR_PROGRAMMING };
diff --git a/frontend/src/constants/coduoDocs/pairProgrammingConcept.ts b/frontend/src/constants/coduoDocs/pairProgrammingConcept.ts
@@ -1,11 +1,10 @@
 export const PAIR_PROGRAMMING_CONCEPT = [
   {
     id: 'what-is-pair-programming',
-    title: '페어 프로그래밍에 대해',
     subtitle: '페어 프로그래밍이란?',
     quote: {
       text: '페어 프로그래밍에 대한 정보는 다음 레퍼런스를 기반으로 작성했습니다.',
-      linkText: '자세한 정보 보기',
+      linkText: '레퍼런스로 이동',
       href: 'https://www.techtarget.com/searchsoftwarequality/definition/Pair-programming',
     },
     content:
@@ -19,9 +18,6 @@ export const PAIR_PROGRAMMING_CONCEPT = [
 ];
 
 export const NOTIONS = [
-  {
-    quote: '페어 프로그래밍을 효과적으로 수행하려면 다음과 같은 부분들을 유의해야 합니다.',
-  },
   {
     strong: '지속적인 의사소통 유지하기',
     info: '페어 프로그래밍의 핵심은 지속적인 의사소통입니다. 만약 두 개발자 사이에 대화가 없다면, 그들은 아마도 사고 과정을 공유하고 있지 않을 것입니다. 드라이버는 코드를 작성하면서 자신의 생각을 말로 표현해야 하며, 내비게이터는 적극적으로 의견을 제시하고 질문해야 합니다. 이를 통해 아이디어를 효과적으로 교환하고 문제를 함께 해결할 수 있습니다.',
@@ -41,22 +37,20 @@ export const NOTIONS = [
 ];
 
 export const ABOUT_PAIR_ROOM = [
-  { subtitle: '페어룸이란?', id: 'what-is-pair-room' },
-  { quote: '코딩해듀오에서는 페어룸을 제공하여 페어 프로그래밍을 더욱 유용하고 쉽게 하도록 도와줍니다.' },
   {
-    strong: '투두 리스트',
-    info: '투두 리스트를 제공하여, 페어가 함께 목표와 할 일을 설정하고 관리할 수 있습니다. 이를 통해 작업의 방향성을 명확히 하고 진행 상황을 실시간으로 파악할 수 있습니다. 또한, 우선순위를 설정하여 중요한 작업에 집중할 수 있으며, 완료된 작업을 체크하면서 성취감을 느낄 수 있습니다.',
+    strong: '페어룸 타이머',
+    info: '설정한 시간이 지나면 페어 프로그래밍 역할을 변경할 수 있도록 타이머 알람이 울려 적절한 시점에 역할을 교체할 수 있도록 돕습니다.',
   },
   {
-    strong: '레퍼런스',
-    info: '페어 프로그래밍 도중 참고한 레퍼런스를 저장할 수 있습니다. 저장된 레퍼런스는 카테고리별로 정리되어 나중에 쉽게 찾아볼 수 있어 프로젝트 완료 후에도 학습 자료로 활용할 수 있습니다.',
+    strong: '투두 리스트',
+    info: '페어와 함께 해야 할 일을 설정하고 관리할 수 있습니다. 이를 통해 작업의 방향성을 명확히 하고 진행 상황을 실시간으로 파악할 수 있습니다. 또한, 우선 순위를 설정하여 중요한 작업에 집중할 수 있으며, 완료된 작업을 체크하면서 성취감을 느낄 수 있습니다.',
   },
   {
-    strong: '알람 기능',
-    info: '설정한 시간이 지나면 역할을 변경할 수 있도록 알람이 울려 적절한 시점에 역할을 교체할 수 있도록 돕습니다.',
+    strong: '레퍼런스 링크',
+    info: '페어 프로그래밍 하면서 참고한 레퍼런스 링크를 저장할 수 있습니다. 저장된 레퍼런스는 나중에 쉽게 찾아볼 수 있어 프로젝트 완료 후에도 학습 자료로 활용할 수 있습니다.',
   },
   {
-    strong: '회고',
-    info: '페어 프로그래밍 세션이 종료되면 회고를 진행합니다. 이 과정에서 잘된 점, 개선할 점, 배운 점 등을 함께 논의하고 기록합니다. 회고 기능은 구조화된 템플릿을 제공하여 효과적인 회고를 가능하게 하며, 이전 회고 내용을 쉽게 참조할 수 있어 지속적인 개선이 가능합니다.',
+    strong: '페어 프로그래밍 회고',
+    info: '페어 프로그래밍이 종료되면 회고를 진행합니다. 이 과정에서 잘된 점, 개선할 점, 배운 점 등을 함께 논의하고 기록합니다. 회고 기능은 구조화된 템플릿을 제공하여 효과적인 회고를 가능하게 하며, 이전 회고 내용을 쉽게 참조할 수 있어 지속적인 개선이 가능합니다.',
   },
 ];
diff --git a/frontend/src/constants/coduoDocs/sidebar.ts b/frontend/src/constants/coduoDocs/sidebar.ts
@@ -17,7 +17,7 @@ export const START_WITH_MISSION = [
   },
   {
     id: 'fork-repository',
-    subtitle: 'fork 하기',
+    subtitle: '미션 레포지토리 fork 하기',
   },
   {
     id: 'copy-repository-address',
@@ -53,6 +53,10 @@ export const ABOUT_PAIR_PROGRAMMING = [
     id: 'what-is-pair-programming',
     subtitle: '페어 프로그래밍이란?',
   },
+  {
+    id: 'pair-programming-caution',
+    subtitle: '페어 프로그래밍 시 유의할 점',
+  },
   {
     id: 'what-is-pair-room',
     subtitle: '페어룸이란?',