Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] 회고 페이지 구현 #828

Open
wants to merge 9 commits into
base: FE/dev
Choose a base branch
from
Open

[FE] 회고 페이지 구현 #828

wants to merge 9 commits into from

Conversation

dle234
Copy link
Contributor

@dle234 dle234 commented Oct 18, 2024

연관된 이슈

구현한 기능

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

상세 설명

  • 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(공통)

@dle234 dle234 added the 🧑‍💻 feat 신규 기능 개발 label Oct 18, 2024
@dle234 dle234 self-assigned this Oct 18, 2024
Copy link
Contributor

@greetings1012 greetings1012 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다! 몇 가지 궁금한 사항 남겨두었으니 시간날 때 확인해주세요!

Comment on lines +104 to +110
path: 'retrospect',
element: <Retrospect readOnly={false} />,
},
{
path: 'retrospect/:retrospectId',
element: <Retrospect />,
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저희 회고 한번 하면 수정 못하나요...?

Comment on lines +19 to +26
const renderAnswer = (index: number, id: string) => (
<S.Textarea
placeholder="질문에 대한 답변을 작성해주세요."
id={id}
value={answers[index]}
onChange={(event) => handleChange(index, event.target.value)}
/>
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

컴포넌트로 분리해주세요 🥲

Comment on lines +19 to +26
},
};
else
return {
title: '회고 작성하기',
buttonText: '나중에 작성하기',
onButtonClick: () => {
alert('나중에 작성하시겠습니까?');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

alert 대신 간단한 모달은 어떤가요?

Copy link
Contributor

@greetings1012 greetings1012 Oct 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

파일명에 오타가 있네요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🧑‍💻 feat 신규 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants