[3주차] 김선영 과제 제출#11
Conversation
|
안녕하세요 이번 코드리뷰 파트너 오지은입니다:) |
| width: 100%; | ||
| background-color: white; | ||
| `; | ||
| const InputField = styled.textarea` |
There was a problem hiding this comment.
styled.input 태그를 이용하면 따로 enter 처리를 해주지 않아도 돼서 편해요!
사용해보셔도 좋을 것 같아요:)
| const chatListRef = useRef<HTMLDivElement>(null); | ||
| useEffect(() => { | ||
| chatListRef.current?.scrollTo(0, chatListRef.current.scrollHeight); | ||
| console.log("스크롤!"); |
| background-color: white; | ||
| border-radius: 10px; | ||
| } | ||
| ::-webkit-scrollbar-track { |
There was a problem hiding this comment.
속성을 부여하지 않은 스크롤 커스텀은 없애줘도 될 것 같아요!
| height: 40px; | ||
| border-radius: 15px; | ||
| object-fit: cover; | ||
| opacity: ${({ selected }: { selected?: boolean }) => |
There was a problem hiding this comment.
이렇게 props를 전달해줘서 불투명도를 조절하는 것도 너무 좋네요! 배워갑니다:)
YooSeonHo
left a comment
YooSeonHo
left a comment
There was a problem hiding this comment.
안녕하세요 선영님~!
단톡방을 만드실 줄은 상상도 못 했어요~~~~
4주차 과제 때 편하시겠다 생각했습니다!!! 부러워용
recoil, redux를 이용해서 상태 관리 하는 것도 좋은 방법 일 거 같아요!!!
고생 많으셨고 스터디 때 봬요!! 저희 토론 세션도 함께 한답니당.
| @@ -0,0 +1,11 @@ | |||
| import { Chat } from "../interface"; | |||
|
|
|||
| interface ChatItemProps { | |||
There was a problem hiding this comment.
오 props용 interface를 만들면 더 편하게 할 수 있군요~!
| <ChatWrapper> | ||
| <ChatBalloon>{chat.text}</ChatBalloon> | ||
| <p> | ||
| {time}:{minute} |
| gap: 10px; | ||
| margin: 10px; | ||
| justify-content: ${({ isCurUser }: { isCurUser: boolean }) => | ||
| isCurUser ? "flex-end" : "flex-start"}; |
There was a problem hiding this comment.
오 저는 margin으로 처리했는데 flex로도 해봐야겠어요
| onConcat(value); | ||
| setValue(""); | ||
| // 엔터로 전송, shift+엔터로 줄바꿈 | ||
| const handleEnter = (e: React.KeyboardEvent<HTMLTextAreaElement>) => { |
There was a problem hiding this comment.
되게 번거로울 거 같아서 input으로 바꿨는데 textArea가 더 좋은 거 같아요 ㅠ.ㅠ
There was a problem hiding this comment.
안녕하세요 선영님 ! 프론트 운영진 유세은 입니다 👍
데모링크 돌려보면서 채팅 인원을 3명으로 구성해주신 부분들에서 인상 깊다고 느꼈습니다! 다른 상태 관리 라이브러리 없이 기능 구현도 잘해주시고 디자인도 잘해주셔서 몇 가지 코멘트만 남겨봤습니다 ~ 참고로 커스텀 훅으로 useInput 같은 훅을 만든다면 로직을 줄여볼 수 있을 것 같습니다.
PR 에 적어주신 border 속성이 적용되지 않은 부분은 저는 예전에 id 로 해결했던 기억이 나네요~ globalStyle 에서 id 로 css 속성 정해주듯이
#border {
border: 1px solid lightgray;
border-radius: 20px;
}
이런 식으로 필요한 부분에 border 를 id 로 주면 해결할 수 있지 않을까요?
그럼 이따 스터디 시간에 뵙겠습니다 👋
| width: 350px; | ||
| height: 95vh; |
| <ChatWrapper> | ||
| <ChatBalloon isCurUser={false}>{chat.text}</ChatBalloon> | ||
| {time}:{minute} | ||
| </ChatWrapper> |
There was a problem hiding this comment.
이 부분은 위의 코드와 중복되는 부분이 있는 것 같아요 !
isCurUser 를 props 받는 컴포넌트로 분리하는 게 좋을 것 같아요~
| <GlobalStyle /> | ||
| <UserList curUser={curUser} users={users} changeUser={changeUser} /> | ||
| <ChatList curUser={curUser} users={users} chats={chats} /> | ||
| <InputForm onConcat={onConcat} /> |
There was a problem hiding this comment.
Concat 이라는 네이밍이 모호한 부분이 있는 거 같아서 AddChats 이런 식으로 구체적으로 명시해줘도 좋을 듯 합니다 ~
5 participants
배포
https://react-messanger-16th-ebon.vercel.app/
아쉬운점
ChatItem.tsx다음과 같이 레이아웃을 구성했는데, 더 효율적이게 구성할 수 있는 방법이 있을지, 구성 컴포넌트 이름은 어떻게 하는게 좋을지 고민입니다미션 목표
필수 구현 기능