[FE] 🔖 운영 서버 이관

frontend/netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+    from = "/*"
+    to = "/index.html"
+    status = 200

frontend/src/apis/github.ts

@@ -21,13 +21,13 @@ export const getSHAforMain = async (repositoryName: string) => {
   }
 };
 
-interface CreateBranchProps {
+interface AddBranchProps {
   repositoryName: string;
   branchName: string;
   sha: string;
 }
 
-export const createBranch = async ({ repositoryName, branchName, sha }: CreateBranchProps) => {
+export const addBranch = async ({ repositoryName, branchName, sha }: AddBranchProps) => {
   try {
     const result = await octokit.request(`POST /repos/${CODUO_ORGANIZATION}/${repositoryName}/git/refs`, {
       ref: `refs/heads/${branchName}`,

frontend/src/apis/member.ts

@@ -54,17 +54,21 @@ export const getMyPairRooms = async (): Promise<GetMyPairRoomsResponse[]> => {
   return response.json();
 };
 
-interface GetUserIsInPairRoomRequest {
+export interface Retrospect {
   accessCode: string;
+  answer: string;
 }
 
-interface GetUserIsInPairRoomResponse {
-  exists: boolean;
-}
+export const getMyRetrospects = async (): Promise<{ retrospects: Retrospect[] }> => {
+  const response = await fetcher.get({
+    url: `${API_URL}/retrospects`,
+    errorMessage: ERROR_MESSAGES.GET_USER_RETROSPECTS,
+  });
 
-export const getUserIsInPairRoom = async ({
-  accessCode,
-}: GetUserIsInPairRoomRequest): Promise<GetUserIsInPairRoomResponse> => {
+  return await response.json();
+};
+
+export const getUserIsInPairRoom = async (accessCode: string): Promise<{ exists: boolean }> => {
   const response = await fetcher.get({
     url: `${API_URL}/member/${accessCode}/exists`,
     errorMessage: ERROR_MESSAGES.GET_USER_IS_IN_PAIR_ROOM,
@@ -73,15 +77,7 @@ export const getUserIsInPairRoom = async ({
   return await response.json();
 };
 
-interface GetUserRetrospectExistsRequest {
-  accessCode: string;
-}
-interface GetUserRetrospectExistsResponse {
-  existRetrospect: boolean;
-}
-export const getUserRetrospectExists = async ({
-  accessCode,
-}: GetUserRetrospectExistsRequest): Promise<GetUserRetrospectExistsResponse> => {
+export const getUserRetrospectExists = async (accessCode: string): Promise<{ existRetrospect: boolean }> => {
   const response = await fetcher.get({
     url: `${API_URL}/member/retrospect/${accessCode}/exists`,
     errorMessage: ERROR_MESSAGES.GET_USER_RETROSPECT_EXISTS,

frontend/src/apis/pairRoom.ts

@@ -90,7 +90,7 @@ export const updatePairRoomStatus = async ({ accessCode }: UpdatePairRoomStatusR
   });
 };
 
-export const deletePairRoom = async (accessCode: string) => {
+export const deletePairRoom = async ({ accessCode }: { accessCode: string }) => {
   await fetcher.delete({
     url: `${API_URL}/pair-room/${accessCode}`,
     errorMessage: ERROR_MESSAGES.DELETE_PAIR_ROOM,

frontend/src/apis/retrospect.ts

@@ -17,15 +17,11 @@ export const addRetrospect = async ({ accessCode, answers }: AddRetrospectReques
   });
 };
 
-interface GetRetrospectRequest {
-  accessCode: string;
-}
-
 interface GetRetrospectResponse {
   answers: string[];
 }
 
-export const getRetrospectAnswer = async ({ accessCode }: GetRetrospectRequest): Promise<GetRetrospectResponse> => {
+export const getRetrospect = async (accessCode: string): Promise<GetRetrospectResponse> => {
   const response = await fetcher.get({
     url: `${API_URL}/retrospects/${accessCode}`,
     errorMessage: ERROR_MESSAGES.GET_RETROSPECT,
@@ -34,23 +30,9 @@ export const getRetrospectAnswer = async ({ accessCode }: GetRetrospectRequest):
   return await response.json();
 };
 
-export const deleteRetrospectAnswer = async ({ accessCode }: GetRetrospectRequest) => {
+export const deleteRetrospect = async ({ accessCode }: { accessCode: string }) => {
   await fetcher.delete({
     url: `${API_URL}/retrospects/${accessCode}`,
     errorMessage: ERROR_MESSAGES.DELETE_RETROSPECT,
   });
 };
-
-export interface Retrospect {
-  accessCode: string;
-  answer: string;
-}
-
-export const getUserRetrospects = async (): Promise<{ retrospects: Retrospect[] }> => {
-  const response = await fetcher.get({
-    url: `${API_URL}/retrospects`,
-    errorMessage: ERROR_MESSAGES.GET_USER_RETROSPECTS,
-  });
-
-  return await response.json();
-};

frontend/src/assets/index.ts

@@ -1,15 +1,46 @@
 import AlarmSound from '@/assets/audio/alarm_sound.mp3';
-import Driver from '@/assets/images/characters/driver.png';
-import Navigator from '@/assets/images/characters/navigator.png';
 import CheckBoxChecked from '@/assets/images/check_box_checked.svg';
 import CheckBoxUnchecked from '@/assets/images/check_box_unchecked.svg';
+import checkBranchCreated from '@/assets/images/docs/check-branch-created.webp';
+import clone from '@/assets/images/docs/clone.webp';
+import createBranch from '@/assets/images/docs/create-branch.webp';
+import createFork from '@/assets/images/docs/create-fork.webp';
+import createRoom from '@/assets/images/docs/create-room.webp';
+import forkRepository from '@/assets/images/docs/fork-repository.webp';
+import inputName from '@/assets/images/docs/input-name.webp';
+import inputPairName from '@/assets/images/docs/input-pair-name.webp';
+import selectDriver from '@/assets/images/docs/select-driver.webp';
+import selectMission from '@/assets/images/docs/select-mission.webp';
+import setRole from '@/assets/images/docs/set-role.webp';
+import setTimer from '@/assets/images/docs/set-timer.webp';
+import startFree from '@/assets/images/docs/start-free.webp';
+import startWithMission from '@/assets/images/docs/start-with-mission.webp';
+import Driver from '@/assets/images/driver.png';
 import GithubLogoWhite from '@/assets/images/github-mark-white.png';
 import GithubLogo from '@/assets/images/github-mark.png';
 import LogoIcon from '@/assets/images/logo_icon.svg';
 import LogoIconWithTitle from '@/assets/images/logo_icon_with_title.svg';
 import LogoTitle from '@/assets/images/logo_title.svg';
+import Navigator from '@/assets/images/navigator.png';
 import Wave from '@/assets/images/wave.svg';
 
+export const DOCS_IMAGES = {
+  checkBranchCreated,
+  clone,
+  createBranch,
+  createFork,
+  createRoom,
+  forkRepository,
+  inputName,
+  inputPairName,
+  selectDriver,
+  selectMission,
+  setRole,
+  setTimer,
+  startFree,
+  startWithMission,
+};
+
 export {
   GithubLogo,
   GithubLogoWhite,

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

@@ -0,0 +1,65 @@
+import { Link } from 'react-router-dom';
+
+import styled from 'styled-components';
+
+export const Title = styled.p`
+  color: ${({ theme }) => theme.color.primary[800]};
+  font-size: ${({ theme }) => theme.fontSize.base};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+
+  @media (width <= 1400px) {
+    font-size: ${({ theme }) => theme.fontSize.base};
+  }
+`;
+
+export const ContentList = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  position: relative;
+
+  padding-left: 15px;
+
+  @media (width <= 1400px) {
+    gap: 0.8rem;
+  }
+`;
+
+export const ContentItem = styled(Link)<{ $isActive: boolean }>`
+  position: relative;
+
+  color: ${({ $isActive, theme }) => ($isActive ? theme.color.black[900] : theme.color.black[300])};
+  font-size: ${({ theme }) => theme.fontSize.base};
+  text-decoration: none;
+
+  transition: all 0.1s;
+
+  &::before {
+    position: absolute;
+    top: -0.4rem;
+    left: -2rem;
+
+    width: 3px;
+    height: 140%;
+
+    background-color: ${({ $isActive, theme }) => ($isActive ? theme.color.secondary[500] : theme.color.black[200])};
+
+    transition: all 0.2s;
+    content: '';
+  }
+
+  @media (width <= 1400px) {
+    font-size: ${({ theme }) => theme.fontSize.md};
+  }
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+
+  @media (width <= 1400px) {
+    gap: 0.9rem;
+  }
+`;

frontend/src/components/CoduoDocs/FloatingSidebar/ContentBox.tsx → frontend/src/components/CoduoDocs/ContentBox/ContentBox.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Content } from '@/pages/CoduoDocs/CoduoDocs.type';
 
-import * as S from './FloatingSidebar.styles';
+import * as S from './ContentBox.styles';
 
 interface ContentBoxProps {
   title: string;

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

@@ -6,7 +6,7 @@ export const Container = styled.div`
   gap: 2rem;
 `;
 export const Contents = styled.p`
-  color: ${({ theme }) => theme.color.black[90]};
+  color: ${({ theme }) => theme.color.black[900]};
   font-size: ${({ theme }) => theme.fontSize.lg};
 `;
 

frontend/src/components/CoduoDocs/DocsImage/DocsImage.tsx

@@ -3,20 +3,16 @@ import * as S from './DocsImage.styles';
 interface DocsImageProps {
   information?: string;
   src: string;
-  webpSrc: string;
   alt: string;
   id?: string;
 }
 
-const DocsImage = ({ information, src, alt, webpSrc, id, children }: React.PropsWithChildren<DocsImageProps>) => {
+const DocsImage = ({ information, src, alt, id, children }: React.PropsWithChildren<DocsImageProps>) => {
   return (
     <S.Container>
       {information && <S.Contents id={id}>{information}</S.Contents>}
       {children}
-      <picture>
-        <source srcSet={webpSrc} type="image/webp" />
-        <img src={src} alt={alt} loading="lazy" />
-      </picture>
+      <img src={src} alt={alt} loading="lazy" />
     </S.Container>
   );
 };

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import ContentBox from '@/components/CoduoDocs/FloatingSidebar/ContentBox';
+import ContentBox from '@/components/CoduoDocs/ContentBox/ContentBox';
 import FloatingSidebar from '@/components/CoduoDocs/FloatingSidebar/FloatingSidebar';
 
 import { START_CONTENT } from '@/constants/coduoDocs';

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

@@ -1,5 +1,3 @@
-import { Link } from 'react-router-dom';
-
 import styled from 'styled-components';
 
 export const Layout = styled.div`
@@ -11,7 +9,7 @@ export const Layout = styled.div`
   top: 15rem;
   left: 4%;
 
-  background-color: ${({ theme }) => theme.color.black[10]};
+  background-color: ${({ theme }) => theme.color.black[0]};
 
   @media (width <= 1400px) {
     gap: 1.8rem;
@@ -26,65 +24,3 @@ export const Layout = styled.div`
     display: none;
   }
 `;
-
-export const Title = styled.p`
-  color: ${({ theme }) => theme.color.primary[700]};
-  font-size: ${({ theme }) => theme.fontSize.base};
-  font-weight: ${({ theme }) => theme.fontWeight.semibold};
-
-  @media (width <= 1400px) {
-    font-size: ${({ theme }) => theme.fontSize.base};
-  }
-`;
-
-export const ContentList = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  position: relative;
-
-  padding-left: 15px;
-
-  @media (width <= 1400px) {
-    gap: 0.8rem;
-  }
-`;
-
-export const ContentItem = styled(Link)<{ $isActive: boolean }>`
-  position: relative;
-
-  color: ${({ $isActive, theme }) => ($isActive ? theme.color.black[90] : theme.color.black[60])};
-  font-size: ${({ theme }) => theme.fontSize.lg};
-  text-decoration: none;
-
-  transition: all 0.1s;
-
-  &::before {
-    position: absolute;
-    top: 0;
-    left: -2rem;
-
-    width: 3px;
-    height: 145%;
-
-    background-color: ${({ $isActive, theme }) => ($isActive ? theme.color.secondary[500] : theme.color.black[30])};
-
-    transition: all 0.2s;
-    content: '';
-  }
-
-  @media (width <= 1400px) {
-    font-size: ${({ theme }) => theme.fontSize.md};
-  }
-`;
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 1.1rem;
-
-  @media (width <= 1400px) {
-    gap: 0.9rem;
-  }
-`;

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

@@ -9,26 +9,26 @@ export const Container = styled.div`
 `;
 
 export const QuoteBar = styled.span`
-  color: ${({ theme }) => theme.color.black[50]};
+  color: ${({ theme }) => theme.color.black[200]};
   font-size: ${({ theme }) => theme.fontSize.h5};
   font-weight: ${({ theme }) => theme.fontWeight.extraBold};
 `;
 
 export const Content = styled.p`
-  color: ${({ theme }) => theme.color.black[90]};
+  color: ${({ theme }) => theme.color.black[900]};
   font-size: ${({ theme }) => theme.fontSize.base};
   font-weight: ${({ theme }) => theme.fontWeight.extraLight};
 `;
 
 export const TextLink = styled.a`
-  color: ${({ theme }) => theme.color.primary[700]};
+  color: ${({ theme }) => theme.color.primary[800]};
   font-size: ${({ theme }) => theme.fontSize.base};
   font-weight: ${({ theme }) => theme.fontWeight.semibold};
   text-decoration: underline;
 
   transition: color 0.2s ease;
 
   &:hover {
-    color: ${({ theme }) => theme.color.primary[800]};
+    color: ${({ theme }) => theme.color.primary[900]};
   }
 `;