[FE] 회고 페이지 버그 수정

frontend/src/App.tsx

@@ -17,7 +17,8 @@
 import MyPage from '@/pages/MyPage/MyPage';
 import PairRoomOnboarding from '@/pages/PairRoomOnboarding/PairRoomOnboarding';
 import PrivateRoutes from '@/pages/PrivateRoutes';
-import Retrospect from '@/pages/Retrospect/Retrospect';
+import RetrospectForm from '@/pages/RetrospectForm/RetrospectForm';
+import RetrospectView from '@/pages/RetrospectView/RetrospectView';
 import SignUp from '@/pages/SignUp/SignUp';
 
 import HowToPair from '@/components/Landing/HowToPair/HowToPair';
@@ -50,7 +51,7 @@
 
   useEffect(() => {
     if (window.location.pathname !== '/callback') updateUser();
   }, []);
 
   const router = createBrowserRouter([
     {
@@ -100,11 +101,11 @@
             },
             {
               path: ':accessCode/retrospect',
-              element: <Retrospect />,
+              element: <RetrospectView />,
             },
             {
               path: ':accessCode/retrospectForm',
-              element: <Retrospect readOnly={false} />,
+              element: <RetrospectForm />,
             },
           ],
         },

frontend/src/components/PairRoomOnboarding/InformationBox/InformationBox.tsx

@@ -3,17 +3,19 @@ import { RiInformation2Line } from 'react-icons/ri';
 import * as S from './InformationBox.styles';
 
 interface InformationBoxProps {
-  title: string;
+  title?: string;
   description: string;
 }
 
 const InformationBox = ({ title, description }: InformationBoxProps) => {
   return (
     <S.Layout role="presentation">
-      <S.Title>
-        <RiInformation2Line size="2rem" aria-hidden="true" />
-        {title}
-      </S.Title>
+      {title && (
+        <S.Title>
+          <RiInformation2Line size="2rem" aria-hidden="true" />
+          {title}
+        </S.Title>
+      )}
       <S.Description>{description}</S.Description>
     </S.Layout>
   );

frontend/src/components/Retrospect/Header/Header.styles.ts

@@ -0,0 +1,36 @@
+import styled, { css } from 'styled-components';
+
+export const buttonStyles = css`
+  width: 11rem;
+  border-color: ${({ theme }) => theme.color.secondary[600]};
+
+  color: ${({ theme }) => theme.color.secondary[600]};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.color.secondary[700]};
+
+    color: ${({ theme }) => theme.color.secondary[700]};
+  }
+`;
+
+export const Layout = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const Title = styled.h1`
+  color: ${({ theme }) => theme.color.primary[800]};
+  font-size: ${({ theme }) => theme.fontSize.h3};
+  font-weight: ${({ theme }) => theme.fontWeight.semibold};
+`;
+
+export const SubTitle = styled.h2`
+  color: ${({ theme }) => theme.color.primary[700]};
+  font-size: ${({ theme }) => theme.fontSize.lg};
+`;

frontend/src/components/Retrospect/Header/Header.tsx

@@ -0,0 +1,26 @@
+import Button from '@/components/common/Button/Button';
+
+import * as S from './Header.styles';
+
+interface HeaderProps {
+  title: string;
+  subTitle: string;
+  buttonText: string;
+  onButtonClick: () => void;
+}
+
+const Header = ({ title, subTitle, buttonText, onButtonClick }: HeaderProps) => {
+  return (
+    <S.Layout>
+      <S.TitleContainer>
+        <S.Title>{title}</S.Title>
+        <S.SubTitle>{subTitle}</S.SubTitle>
+      </S.TitleContainer>
+      <Button $css={S.buttonStyles} filled={false} rounded={true} size="sm" color="primary" onClick={onButtonClick}>
+        {buttonText}
+      </Button>
+    </S.Layout>
+  );
+};
+
+export default Header;

frontend/src/components/Retrospect/Question/Question.styles.ts

@@ -3,15 +3,17 @@ import styled from 'styled-components';
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 2.5rem;
+  gap: 2rem;
+`;
+
+export const LabelContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
 `;
 
 export const Label = styled.label`
   color: ${({ theme }) => theme.color.primary[700]};
   font-size: ${({ theme }) => theme.fontSize.lg};
-`;
-
-export const Subtitle = styled.p`
-  color: ${({ theme }) => theme.color.black[70]};
-  font-size: ${({ theme }) => theme.fontSize.md};
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
 `;

frontend/src/components/Retrospect/Question/Question.tsx

@@ -1,15 +1,20 @@
+import InformationBox from '@/components/PairRoomOnboarding/InformationBox/InformationBox';
+
 import * as S from './Question.styles';
 
 interface QuestionProps extends React.PropsWithChildren {
+  readonly?: boolean;
   id: string;
   title: string;
   subtitle: string;
 }
 
-const Question = ({ id, title, subtitle, children }: QuestionProps) => (
+const Question = ({ readonly = false, id, title, subtitle, children }: QuestionProps) => (
   <S.Container>
-    <S.Label htmlFor={id}>{title}</S.Label>
-    <S.Subtitle>💡 {subtitle}</S.Subtitle>
+    <S.LabelContainer>
+      <S.Label htmlFor={id}>{title}</S.Label>
+      {!readonly && <InformationBox description={`💡 ${subtitle}`} />}
+    </S.LabelContainer>
     {children}
   </S.Container>
 );