-
Notifications
You must be signed in to change notification settings - Fork 0
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
Feature(#185): 질문이 들어오면 발표자에게도 반영하기(인디케이터, 질문리스트) #201
Conversation
- 발표자의 질문 리스트가 새로운 질문이 발생할 때마다 업데이트 되도록 구현했습니다.(QuestionList 컴포넌트가 questionStateList 리코일 state에 따라 업데이트 되도록 하였습니다.) - 질문자가 질문 입력 후 엔터를 치면 해당 질문이 전송되도록 구현했습니다. - stateQuestionList를 selector를 이용해 파생된 상태로 만들어 관리하도록 변경했습니다.
❌ Deploy Preview for boarlog failed.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생 많으셨습니다! 소켓 첫 사용이라 복잡하셨을텐데 너무 잘 구현하셨네요👍
onKeyDown={(event) => { | ||
handleInputEnter(event); | ||
}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
enter 키 반영 감사합니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
좋은 아이디어 감사합니다!
const questionListState = atom<string[]>({ | ||
key: "questionListState", | ||
default: [] | ||
}); | ||
export const questionCountState = selector<number>({ | ||
key: "questionCountState", | ||
get: ({ get }) => get(questionListState).length | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
통합해서 관리하는 거 좋은 것 같네요👍 저도 시간 나면 통합할 것은 통합해봐야겠어요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저는 selector까지 분리된다면 state 파일이 너무 많아질 것 같아서 일단은 한 파일에서 사용을 해봤습니다.
그런데 혹시 파일 분리를 하는게 좋을까요?
결국 사용될 때는 atom하고 똑같은 API로 사용되기 때문에 헷갈릴 수 있다는 생각이 드네요.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Byeonjin 저는 지금도 괜찮다고 생각해요! 비슷한 기능을 수행하는 거라 같이 있어도 크게 햇갈리지는 않는 것 같아요. 한 파일당 한 state를 저장하는게 recoil의 철학이라면 (저는 잘 모르겠지만..) 분리해야겠지만 아니라면 지금도 좋아보입니다.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
우선 현 방식으로 유지해도 괜찮을 것 같다는 생각입니다! 오히려 각각의 파일로 나누기 시작하면 너무 많아질 것 같아서... 나중에는 state 파일 찾는데 힘들어지지 않을까 싶어요! 생각보다 저희가 recoil로 다루는 state들이 많아서 이 부분을 어떻게 해결할지 생각해볼 필요가 있겠네요 :)
There was a problem hiding this 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"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
와 first-of-type
은 처음 알았네요! 배워갑니다
const questionListState = atom<string[]>({ | ||
key: "questionListState", | ||
default: [] | ||
}); | ||
export const questionCountState = selector<number>({ | ||
key: "questionCountState", | ||
get: ({ get }) => get(questionListState).length | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
우선 현 방식으로 유지해도 괜찮을 것 같다는 생각입니다! 오히려 각각의 파일로 나누기 시작하면 너무 많아질 것 같아서... 나중에는 state 파일 찾는데 힘들어지지 않을까 싶어요! 생각보다 저희가 recoil로 다루는 state들이 많아서 이 부분을 어떻게 해결할지 생각해볼 필요가 있겠네요 :)
작업 개요
질문이 들어오면 발표자에게도 반영하기(인디케이터, 질문리스트) close #185
작업 사항
발표자의 질문 리스트가 새로운 질문이 발생할 때마다 업데이트 되도록 구현했습니다.(QuestionList 컴포넌트가 questionStateList 리코일 state에 따라 업데이트 되도록 하였습니다.)
질문 리스트 버블 인디케이터가 확인하지 않은 메세지의 개수를 표시해줍니다.
질문자가 질문 입력 후 엔터를 치면 해당 질문이 전송되도록 구현했습니다.
stateQuestionList를 selector를 이용해 파생된 상태로 만들어 질문의 개수를 관리하도록 변경했습니다.
고민한 점들(필수 X)
스크린샷(필수 X)
2023-12-05.7.03.03.mov