[FE] 회고 페이지 구현

[dle234]

연관된 이슈

• closes: #806

구현한 기능

• 회고 생성 폼
• 회고 확인 페이지

상세 설명

• Retrospect 페이지는 readonly 라는 props 를 넘길 수 있음
  • retrospect/:retrospectId -> readonly : true → RetrospectView(RetrospectHeader + RetrospectContent)
  • retrospect-> readonly : false → RetrospectForm(RetrospectHeader + RetrospectContent)

공통 부분

• 전체 Layout UI
• header UI, header 에 해당 페어룸으로 이동하는 버튼
• 질문UI, 질문에 대한 답변 UI
• 질문 map

다른 부분

• editable

  • 답변 tag : textarea
  • header text
  • 답변 리스트 : 사용자가 작성, 답변 상태 관리
  • 답변 작성 요청 버튼(api post)
  • accessCode 가져오는 방법 : 페어룸 종료 시 location state 에서 가져오기
  • route : /retrospect

• readOnly

  • 답변 tag : pre
  • header text
  • 답변 리스트 : 회고 데이터 api get
  • accessCode 가져오는 방법 : 회고 데이터 get 할때 같이 가져옴
  • route: /retrospect/:retrospectId

컴포넌트 설명

• Retrospect 페이지는 Layout UI 제공 + readOnly props 에 따라 다른 렌더링 컴포넌트(공통)
• RetrospectView : api 요청하여 질문에 대한 답변, accessCode 가져옴, header+content 렌더링
• RetrospectForm : location 의 accessCode 받고, useInputAnswer 훅으로 textarea 의 입력 상태, submit 을 관리함. header+content+submit Button 렌더링
• RetrospectContent: 이미 정의되어있는 질문리스트를 map 으로 돌림.(공통)
  • renderAnswer 로 Text, Textarea 를 넘겨줄 수 있음
• RetrospectHeader: Header 에 readOnly 에 따른 text 와 onClick 이벤트 props 생성하여 Header 컴포넌트 렌더링
• Header: header UI(공통)