[FE] 회고 페이지 구현

frontend/src/App.tsx

@@ -15,6 +15,7 @@ import Loading from '@/pages/Loading/Loading';
 import Main from '@/pages/Main/Main';
 import MyPage from '@/pages/MyPage/MyPage';
 import PairRoomOnboarding from '@/pages/PairRoomOnboarding/PairRoomOnboarding';
+import Retrospect from '@/pages/Retrospect/Retrospect';
 import SignUp from '@/pages/SignUp/SignUp';
 
 import HowToPair from '@/components/Landing/HowToPair/HowToPair';
@@ -71,7 +72,7 @@ const App = () => {
           path: 'onboarding',
           element: (
             <Suspense fallback={<Loading />}>
-              <PairRoomOnboarding />{' '}
+              <PairRoomOnboarding />
             </Suspense>
           ),
         },
@@ -99,6 +100,14 @@ const App = () => {
           path: 'my-page',
           element: <MyPage />,
         },
+        {
+          path: 'retrospect',
+          element: <Retrospect readOnly={false} />,
+        },
+        {
+          path: 'retrospect/:retrospectId',
+          element: <Retrospect />,
+        },
         {
           path: 'error',
           element: <Error />,

frontend/src/apis/retrospect.ts

@@ -0,0 +1,37 @@
+import fetcher from '@/apis/fetcher';
+
+import { ERROR_MESSAGES } from '@/constants/message';
+const API_URL = process.env.REACT_APP_API_URL;
+
+interface AddRetrospectRequest {
+  pairRoomAccessCode: string;
+  answers: string[];
+}
+
+export const addRetrospect = async ({ pairRoomAccessCode, answers }: AddRetrospectRequest) => {
+  const response = await fetcher.post({
+    url: `${API_URL}/retrospect`,
+    body: JSON.stringify({ pairRoomAccessCode, answers }),
+    errorMessage: ERROR_MESSAGES.ADD_RETROSPECT,
+  });
+
+  return await response.json();
+};
+
+interface GetRetrospectRequest {
+  retrospectId: string;
+}
+
+interface GetRetrospectResponse {
+  pairRoomAccessCode: string;
+  answer: string[];
+}
+
+export const getRetrospectAnswer = async ({ retrospectId }: GetRetrospectRequest): Promise<GetRetrospectResponse> => {
+  const response = await fetcher.get({
+    url: `${API_URL}/retrospect/${retrospectId}`,
+    errorMessage: ERROR_MESSAGES.GET_RETROSPECT,
+  });
+
+  return await response.json();
+};

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

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+`;
+
+export const Label = styled.label`
+  color: ${({ theme }) => theme.color.primary[700]};
+  font-size: ${({ theme }) => theme.fontSize.lg};
+`;

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

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+import * as S from './Question.styles';
+
+interface QuestionProps {
+  id: string;
+  question: string;
+  children: ReactNode;
+}
+
+const Question = ({ id, question, children }: QuestionProps) => (
+  <S.Container>
+    <S.Label htmlFor={id}>{question}</S.Label>
+    {children}
+  </S.Container>
+);
+
+export default Question;

frontend/src/components/Retrospect/RetrospectContent/RetrospectContent.tsx

@@ -0,0 +1,20 @@
+import { RetrospectQuestion } from '@/components/Retrospect/retrospect.type';
+import Question from '@/components/Retrospect/RetrospectContent/Question/Question';
+
+interface RetrospectContentProps {
+  questions: RetrospectQuestion[];
+  renderAnswer: (index: number, id: string) => React.ReactNode;
+}
+const RetrospectContent = ({ questions, renderAnswer }: RetrospectContentProps) => {
+  return (
+    <>
+      {questions.map((question, index) => (
+        <Question key={question.id} id={question.id} question={question.value}>
+          {renderAnswer(index, question.id)}
+        </Question>
+      ))}
+    </>
+  );
+};
+
+export default RetrospectContent;

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

@@ -0,0 +1,64 @@
+import styled, { css } from 'styled-components';
+
+export const LayoutForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+
+  width: 100%;
+`;
+
+const positionFixed = css`
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+
+  transform: translate(-50%);
+`;
+
+export const SubmitButton = css`
+  ${positionFixed}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 60%;
+  min-width: 76.8rem;
+  height: 6rem;
+  border-radius: 0;
+
+  &:active {
+    ${positionFixed}
+  }
+
+  &:hover {
+    ${positionFixed}
+  }
+
+  @media (max-width: ${({ theme }) => theme.deviceWidth.mobile}) {
+    width: 100%;
+  }
+`;
+
+export const Textarea = styled.textarea`
+  width: 100%;
+  min-height: 20rem;
+  max-height: 35rem;
+  padding: 2rem;
+  border: 1px solid #d9d9d9;
+  border-radius: 1rem;
+
+  background-color: #fdfdfd;
+  font-size: ${({ theme }) => theme.fontSize.md};
+  resize: vertical;
+
+  &:focus {
+    border: 1.5px solid ${({ theme }) => theme.color.primary[600]};
+
+    background-color: ${({ theme }) => theme.color.primary[100]};
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.color.black[50]};
+  }
+`;

frontend/src/components/Retrospect/RetrospectForm/RetrospectForm.tsx

@@ -0,0 +1,41 @@
+import { useLocation } from 'react-router-dom';
+
+import Button from '@/components/common/Button/Button';
+import RetrospectContent from '@/components/Retrospect/RetrospectContent/RetrospectContent';
+import RetrospectHeader from '@/components/Retrospect/RetrospectHeader/RetrospectHeader';
+
+import useInputAnswer from '@/hooks/Retrospect/const useInputAnswer';
+
+import { RETROSPECT_QUESTIONS } from '@/constants/retrospect';
+
+import * as S from './RetrospectForm.styles';
+
+const RetrospectForm = () => {
+  const location = useLocation();
+  const pairRoomAccessCode = location.state.accessCode;
+
+  const { answers, handleChange, hasEmptyField, handleSubmit } = useInputAnswer(pairRoomAccessCode);
+
+  const renderAnswer = (index: number, id: string) => (
+    <S.Textarea
+      placeholder="질문에 대한 답변을 작성해주세요."
+      id={id}
+      value={answers[index]}
+      onChange={(event) => handleChange(index, event.target.value)}
+    />
+  );
+
+  return (
+    <>
+      <RetrospectHeader readOnly={false} accessCode={pairRoomAccessCode} />
+      <S.LayoutForm onSubmit={handleSubmit}>
+        <RetrospectContent questions={RETROSPECT_QUESTIONS} renderAnswer={renderAnswer} />
+        <Button disabled={hasEmptyField()} type="submit" css={S.SubmitButton}>
+          작성 완료
+        </Button>
+      </S.LayoutForm>
+    </>
+  );
+};
+
+export default RetrospectForm;

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

@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components';
+
+export const Layout = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+export const Title = styled.p`
+  color: ${({ theme }) => theme.color.primary[800]};
+  font-size: ${({ theme }) => theme.fontSize.h6};
+`;
+
+export const ButtonStyle = css`
+  width: 10rem;
+  border-color: ${({ theme }) => theme.color.primary[700]};
+
+  color: ${({ theme }) => theme.color.primary[700]};
+
+  &:hover {
+    border-color: ${({ theme }) => theme.color.primary[800]};
+
+    color: ${({ theme }) => theme.color.primary[800]};
+  }
+`;

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

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

frontend/src/components/Retrospect/RetrospectHeader/RetrospectHeader.tsx

@@ -0,0 +1,35 @@
+import { useNavigate } from 'react-router-dom';
+
+import Header from '@/components/Retrospect/RetrospectHeader/Header/Header';
+
+interface RetrospectHeaderProps {
+  readOnly: boolean;
+  accessCode: string;
+}
+
+const RetrospectHeader = ({ readOnly, accessCode }: RetrospectHeaderProps) => {
+  const navigate = useNavigate();
+  const getHeaderProps = (isReadOnly: boolean) => {
+    if (isReadOnly)
+      return {
+        title: '"방제목" 에서의 회고입니다!',
+        buttonText: '페어룸으로 이동',
+        onButtonClick: () => {
+          navigate(`/room/${accessCode}`);
+        },
+      };
+    else
+      return {
+        title: '회고 작성하기',
+        buttonText: '나중에 작성하기',
+        onButtonClick: () => {
+          alert('나중에 작성하시겠습니까?');
+          navigate(`/room/${accessCode}`);
+        },
+      };
+  };
+
+  return <Header {...getHeaderProps(readOnly)} />;
+};
+
+export default RetrospectHeader;

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export const Text = styled.pre`
+  overflow-y: auto;
+
+  width: 100%;
+  min-height: 10rem;
+  max-height: 35rem;
+  margin: 0;
+
+  font-size: ${({ theme }) => theme.fontSize.md};
+  font-weight: 300;
+  white-space: pre-wrap;
+  font-family: 'Pretendard Variable', sans-serif !important;
+  word-wrap: break-word;
+`;

frontend/src/components/Retrospect/RetrospectView/RetrospectView.tsx

@@ -0,0 +1,27 @@
+import { useParams } from 'react-router-dom';
+
+import RetrospectContent from '@/components/Retrospect/RetrospectContent/RetrospectContent';
+import RetrospectHeader from '@/components/Retrospect/RetrospectHeader/RetrospectHeader';
+
+import { useGetRetrospectAnswer } from '@/queries/Retrospect/useGetRetrospectAnswer';
+
+import { RETROSPECT_QUESTIONS } from '@/constants/retrospect';
+
+import * as S from './RetrospectView.styles';
+
+const RetrospectView = () => {
+  const params = useParams();
+  const retrospectId = params.retrospectId || '';
+  const { pairRoomAccessCode, answer } = useGetRetrospectAnswer(retrospectId);
+
+  const renderAnswer = (index: number) => <S.Text>{answer[index]}</S.Text>;
+
+  return (
+    <>
+      <RetrospectHeader readOnly={true} accessCode={pairRoomAccessCode} />
+      <RetrospectContent questions={RETROSPECT_QUESTIONS} renderAnswer={renderAnswer} />
+    </>
+  );
+};
+
+export default RetrospectView;

frontend/src/components/Retrospect/retrospect.type.ts

@@ -0,0 +1,4 @@
+export interface RetrospectQuestion {
+  value: string;
+  id: string;
+}

frontend/src/constants/message.ts

@@ -17,4 +17,6 @@ export const ERROR_MESSAGES = {
   CHECK_USER_LOGIN: '로그인 여부를 확인하지 못했습니다. 다시 시도해 주세요.',
   GET_MEMBER: '회원 정보를 가져오지 못했습니다. 다시 시도해 주세요.',
   DELETE_MEMBER: '회원 탈퇴에 실패했습니다. 다시 시도해 주세요.',
+  ADD_RETROSPECT: '회고를 작성하지 못했어요. 다시 시도해 주세요.',
+  GET_RETROSPECT: '회고 내용을 불러오지 못했어요. 새로고침 해 주세요.',
 };

frontend/src/constants/queryKeys.ts

@@ -10,4 +10,5 @@ export const QUERY_KEYS = {
   GET_SIGN_IN: 'getSignIn',
   GET_SIGN_OUT: 'getSignOut',
   GET_TODOS: 'getTodos',
+  GET_RETROSPECT_ANSWER: 'getRetrospectAnswer',
 };

frontend/src/constants/retrospect.ts

@@ -0,0 +1,7 @@
+export const RETROSPECT_QUESTIONS = [
+  { value: '1.이번 페어프로그래밍을 통해 어쩌구', id: '1' },
+  { value: '2.이번 페어프로그래밍을 통해 어쩌구', id: '2' },
+  { value: '3.이번 페어프로그래밍을 통해 어쩌구', id: '3' },
+  { value: '4.이번 페어프로그래밍을 통해 어쩌구', id: '4' },
+  { value: '5.이번 페어프로그래밍을 통해 어쩌구', id: '5' },
+];