[FE] 🚀 테스트 서버 배포

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/CompletedPairRoom/ReferenceCard/Header/Header.tsx

@@ -23,7 +23,7 @@ const Header = ({ selectedCategoryName, onButtonClick }: React.PropsWithChildren
         <IoIosLink size={theme.fontSize.h6} color={theme.color.primary[700]} />
         <p>링크</p>
       </S.Container>
-      <Button size="sm" width="fit-content" rounded={true} onClick={handleButtonClick}>
+      <Button size="sm" rounded={true} onClick={handleButtonClick}>
         {selectedCategoryName}
       </Button>
     </S.Layout>

frontend/src/components/CompletedPairRoom/ReferenceCard/ReferenceList/ReferenceList.styles.ts

@@ -1,16 +1,27 @@
+import { MdClose } from 'react-icons/md';
 import styled, { css } from 'styled-components';
 
 export const Layout = styled.div<{ $columns: number }>`
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  align-items: ${({ $columns }) => ($columns > 2 ? 'center' : '')};
+  align-items: ${({ $columns }) => $columns > 2 && 'center'};
   gap: 1rem;
   overflow-y: auto;
 
   padding: 3rem;
 `;
 
+export const EmptyLayout = styled.div`
+  flex-grow: 1;
+
+  height: 0;
+  padding: 2rem;
+
+  color: ${({ theme }) => theme.color.black[400]};
+  font-size: ${({ theme }) => theme.fontSize.md};
+`;
+
 export const List = styled.ul<{ $columns: number }>`
   gap: 3rem 0;
 
@@ -35,16 +46,6 @@ export const List = styled.ul<{ $columns: number }>`
   }
 `;
 
-export const EmptyLayout = styled.div`
-  flex-grow: 1;
-
-  height: 0;
-  padding: 2rem;
-
-  color: ${({ theme }) => theme.color.black[400]};
-  font-size: ${({ theme }) => theme.fontSize.md};
-`;
-
 export const Item = styled.div`
   display: flex;
   flex-direction: column;
@@ -53,7 +54,7 @@ export const Item = styled.div`
 
   width: 17rem;
   height: 20rem;
-  border: 1px solid ${({ theme }) => theme.color.black[300]};
+  border: 1px solid ${({ theme }) => theme.color.black[100]};
   border-radius: 1.5rem;
 `;
 
@@ -74,8 +75,8 @@ export const EmptyImage = styled.div`
   width: 100%;
   height: 10rem;
 
-  background-color: ${({ theme }) => theme.color.black[400]};
-  color: ${({ theme }) => theme.color.black[700]};
+  background-color: ${({ theme }) => theme.color.black[200]};
+  color: ${({ theme }) => theme.color.black[300]};
   font-size: ${({ theme }) => theme.fontSize.sm};
   line-height: 1.3;
 
@@ -123,3 +124,24 @@ export const Content = styled.p`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
 `;
+
+export const DeleteButton = styled(MdClose)`
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  width: 2rem;
+  height: 2rem;
+  padding: 0.3rem;
+  border-radius: 100%;
+
+  background-color: ${({ theme }) => theme.color.black[900]};
+  opacity: 0.6;
+  color: ${({ theme }) => theme.color.black[50]};
+
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+`;

frontend/src/components/CompletedPairRoom/TodoListCard/TodoItem/TodoItem.styles.ts

@@ -10,7 +10,7 @@ export const Layout = styled.div<{ $isChecked: boolean; $isIconHovered: boolean
   padding: 1.6rem;
   border-radius: 1rem;
 
-  background: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[300] : theme.color.secondary[200])};
+  background: ${({ $isChecked, theme }) => ($isChecked ? theme.color.black[200] : theme.color.secondary[100])};
   font-size: ${({ theme }) => theme.fontSize.md};
 
   transition: background 0.1s ease;

frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.tsx

@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom';
 import Button from '@/components/_common/Button/Button';
 import { Modal } from '@/components/_common/Modal';
 
+import useClickEnterKey from '@/hooks/_common/customEvent/useClickEnterKey';
+
 import { theme } from '@/styles/theme';
 
 import * as S from './PairRoomCreateModal.styles';
@@ -13,6 +15,8 @@ interface PairRoomCreateModalProps {
 }
 
 const PairRoomCreateModal = ({ isOpen, closeModal }: PairRoomCreateModalProps) => {
+  const { buttonRef } = useClickEnterKey(isOpen);
+
   return (
     <Modal isOpen={isOpen} close={closeModal} size="60rem">
       <Modal.Header title="페어룸 선택" subTitle="어떤 방식으로 페어룸을 만들까요?" />
@@ -26,7 +30,7 @@ const PairRoomCreateModal = ({ isOpen, closeModal }: PairRoomCreateModalProps) =
           to="/onboarding?mission=true"
           aria-label="코딩해듀오가 깃허브 리포지토리로 제공하는 미션과 함께 시작할래요"
         >
-          <Button size="lg" width="100%" height="6rem" fontSize={theme.fontSize.lg} color="secondary">
+          <Button ref={buttonRef} size="lg" width="100%" height="6rem" fontSize={theme.fontSize.lg} color="secondary">
             미션과 함께 시작할래요
           </Button>
         </Link>

frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx

@@ -8,6 +8,7 @@ import useToastStore from '@/stores/toastStore';
 
 import { getPairRoomExists } from '@/apis/pairRoom';
 
+import useClickEnterKey from '@/hooks/_common/customEvent/useClickEnterKey';
 import useInput from '@/hooks/_common/useInput';
 
 interface PairRoomEntryModal {
@@ -19,7 +20,9 @@ const PairRoomEntryModal = ({ isOpen, closeModal }: PairRoomEntryModal) => {
   const navigate = useNavigate();
 
   const { addToast } = useToastStore();
+
   const { value, resetValue, handleChange } = useInput();
+  const { buttonRef } = useClickEnterKey(isOpen);
 
   const enterPairRoom = async () => {
     const { exists } = await getPairRoomExists(value);
@@ -50,7 +53,7 @@ const PairRoomEntryModal = ({ isOpen, closeModal }: PairRoomEntryModal) => {
         <Button size="lg" onClick={closeModal} filled={false}>
           닫기
         </Button>
-        <Button size="lg" disabled={!value} onClick={enterPairRoom}>
+        <Button ref={buttonRef} size="lg" disabled={!value} onClick={enterPairRoom}>
           완료
         </Button>
       </Modal.Footer>

frontend/src/components/MyPage/PairRoomButton/PairRoomButton.styles.ts

@@ -157,7 +157,7 @@ export const PairRoomButton = styled.button<{ $status: PairRoomStatus; $color: '
 
   &:hover::before {
     background-position: 105.8% 0;
-    opacity: 1;
+    opacity: 0.9;
   }
 
   &:hover ${StatusText} {

frontend/src/components/PairRoom/GuideModal/GuideModal.tsx

@@ -9,6 +9,7 @@ import { Modal } from '@/components/_common/Modal';
 
 import useToastStore from '@/stores/toastStore';
 
+import useClickEnterKey from '@/hooks/_common/customEvent/useClickEnterKey';
 import useCopyClipBoard from '@/hooks/_common/useCopyClipboard';
 
 import { theme } from '@/styles/theme';
@@ -27,6 +28,7 @@ const GuideModal = ({ isOpen, close, accessCode }: GuideModalProps) => {
   const { addToast } = useToastStore();
 
   const [, onCopy] = useCopyClipBoard();
+  const { buttonRef } = useClickEnterKey(isOpen);
 
   const checkPermission = () => {
     if (Notification.permission !== 'granted') {
@@ -104,7 +106,7 @@ const GuideModal = ({ isOpen, close, accessCode }: GuideModalProps) => {
         <Modal.Footer position="CENTER">
           <S.ButtonContainer>
             <p>모두 확인하셨나요?</p>
-            <Button width="18rem" size="lg" onClick={close}>
+            <Button ref={buttonRef} width="18rem" size="lg" onClick={close}>
               시작하기
             </Button>
           </S.ButtonContainer>

frontend/src/components/PairRoom/PairListCard/PairListCard.styles.ts

@@ -14,7 +14,3 @@ export const Layout = styled.div<{ $isOpen: boolean }>`
 
   transition: min-width 0.3s;
 `;
-
-export const Sidebar = styled.div`
-  overflow: hidden;
-`;

frontend/src/components/PairRoom/PairListCard/PairListCard.tsx

@@ -44,12 +44,10 @@ const PairListCard = ({ driver, navigator, missionUrl, accessCode }: PairListCar
     <S.Layout $isOpen={isOpen} aria-label="페어 목록">
       <PairRoomCard>
         <Header isOpen={isOpen} toggleOpen={toggleOpen} />
-        <S.Sidebar>
-          <AccessCodeSection isOpen={isOpen} accessCode={accessCode} />
-          {missionUrl !== '' && <RepositorySection isOpen={isOpen} missionUrl={missionUrl} />}
-          <PairListSection isOpen={isOpen} driver={driver} navigator={navigator} />
-          <CompleteRoomButton isOpen={isOpen} openModal={openModal} />
-        </S.Sidebar>
+        <AccessCodeSection isOpen={isOpen} accessCode={accessCode} />
+        {missionUrl !== '' && <RepositorySection isOpen={isOpen} missionUrl={missionUrl} />}
+        <PairListSection isOpen={isOpen} driver={driver} navigator={navigator} />
+        <CompleteRoomButton isOpen={isOpen} openModal={openModal} />
       </PairRoomCard>
       <ConfirmModal
         isOpen={isModalOpen}

frontend/src/components/PairRoom/PairRoleCard/PairRoleCard.styles.ts

@@ -72,11 +72,11 @@ const RoleLabel = styled.div`
 `;
 
 export const DriverLabel = styled(RoleLabel)`
-  background-color: ${({ theme }) => theme.color.secondary[600]};
+  background-color: ${({ theme }) => theme.color.secondary[500]};
 `;
 
 export const NavigatorLabel = styled(RoleLabel)`
-  background-color: ${({ theme }) => theme.color.primary[800]};
+  background-color: ${({ theme }) => theme.color.primary[600]};
 `;
 
 export const DriverText = styled.p`