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

Feature(#185): 질문이 들어오면 발표자에게도 반영하기(인디케이터, 질문리스트) #201

Merged

Conversation

Byeonjin
Copy link
Collaborator

@Byeonjin Byeonjin commented Dec 5, 2023

작업 개요

질문이 들어오면 발표자에게도 반영하기(인디케이터, 질문리스트) close #185

작업 사항

  • 발표자의 질문 리스트가 새로운 질문이 발생할 때마다 업데이트 되도록 구현했습니다.(QuestionList 컴포넌트가 questionStateList 리코일 state에 따라 업데이트 되도록 하였습니다.)

  • 질문 리스트 버블 인디케이터가 확인하지 않은 메세지의 개수를 표시해줍니다.

  • 질문자가 질문 입력 후 엔터를 치면 해당 질문이 전송되도록 구현했습니다.

  • stateQuestionList를 selector를 이용해 파생된 상태로 만들어 질문의 개수를 관리하도록 변경했습니다.

고민한 점들(필수 X)

스크린샷(필수 X)

2023-12-05.7.03.03.mov

- 발표자의 질문 리스트가 새로운 질문이 발생할 때마다 업데이트 되도록 구현했습니다.(QuestionList 컴포넌트가 questionStateList 리코일 state에 따라 업데이트 되도록 하였습니다.)

- 질문자가 질문 입력 후 엔터를 치면 해당 질문이 전송되도록 구현했습니다.

- stateQuestionList를 selector를 이용해 파생된 상태로 만들어 관리하도록 변경했습니다.
@Byeonjin Byeonjin added ✨ Feat 기능 개발 FE 프론트엔드 작업 labels Dec 5, 2023
@Byeonjin Byeonjin added this to the 5주차 milestone Dec 5, 2023
@Byeonjin Byeonjin self-assigned this Dec 5, 2023
Copy link

netlify bot commented Dec 5, 2023

Deploy Preview for boarlog failed.

Name Link
🔨 Latest commit 2b73fe2
🔍 Latest deploy log https://app.netlify.com/sites/boarlog/deploys/656ef6ac9da4620008bf9bc7

Copy link
Collaborator

@Jw705 Jw705 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 +97 to +99
onKeyDown={(event) => {
handleInputEnter(event);
}}
Copy link
Collaborator

Choose a reason for hiding this comment

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

enter 키 반영 감사합니다!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

좋은 아이디어 감사합니다!

Comment on lines +3 to +10
const questionListState = atom<string[]>({
key: "questionListState",
default: []
});
export const questionCountState = selector<number>({
key: "questionCountState",
get: ({ get }) => get(questionListState).length
});
Copy link
Collaborator

Choose a reason for hiding this comment

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

통합해서 관리하는 거 좋은 것 같네요👍 저도 시간 나면 통합할 것은 통합해봐야겠어요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

저는 selector까지 분리된다면 state 파일이 너무 많아질 것 같아서 일단은 한 파일에서 사용을 해봤습니다.
그런데 혹시 파일 분리를 하는게 좋을까요?
결국 사용될 때는 atom하고 똑같은 API로 사용되기 때문에 헷갈릴 수 있다는 생각이 드네요.

Copy link
Collaborator

Choose a reason for hiding this comment

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

@Byeonjin 저는 지금도 괜찮다고 생각해요! 비슷한 기능을 수행하는 거라 같이 있어도 크게 햇갈리지는 않는 것 같아요. 한 파일당 한 state를 저장하는게 recoil의 철학이라면 (저는 잘 모르겠지만..) 분리해야겠지만 아니라면 지금도 좋아보입니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

우선 현 방식으로 유지해도 괜찮을 것 같다는 생각입니다! 오히려 각각의 파일로 나누기 시작하면 너무 많아질 것 같아서... 나중에는 state 파일 찾는데 힘들어지지 않을까 싶어요! 생각보다 저희가 recoil로 다루는 state들이 많아서 이 부분을 어떻게 해결할지 생각해볼 필요가 있겠네요 :)

Copy link
Collaborator

@LellowMellow LellowMellow left a comment

Choose a reason for hiding this comment

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

코드 너무 잘 읽었습니다! 연관된 state 모아서 관리해주신 점이 좋았습니다!!

key={key}
className="h-21 p-4 border mt-4 first-of-type:mt-0 bg-grayscale-white border-grayscale-lightgray rounded-lg"
>
<li className="h-21 p-4 border mt-4 first-of-type:mt-0 bg-grayscale-white border-grayscale-lightgray rounded-lg">
Copy link
Collaborator

Choose a reason for hiding this comment

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

first-of-type은 처음 알았네요! 배워갑니다

Comment on lines +3 to +10
const questionListState = atom<string[]>({
key: "questionListState",
default: []
});
export const questionCountState = selector<number>({
key: "questionCountState",
get: ({ get }) => get(questionListState).length
});
Copy link
Collaborator

Choose a reason for hiding this comment

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

우선 현 방식으로 유지해도 괜찮을 것 같다는 생각입니다! 오히려 각각의 파일로 나누기 시작하면 너무 많아질 것 같아서... 나중에는 state 파일 찾는데 힘들어지지 않을까 싶어요! 생각보다 저희가 recoil로 다루는 state들이 많아서 이 부분을 어떻게 해결할지 생각해볼 필요가 있겠네요 :)

@Byeonjin Byeonjin merged commit c624be0 into boostcampwm2023:dev Dec 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE 프론트엔드 작업 ✨ Feat 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature: 질문이 들어오면 발표자에게도 반영하기(인디케이터, 질문리스트)
3 participants