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

[4주차] 정희수 미션 제출합니다. #16

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
7 changes: 7 additions & 0 deletions src/assets/ContentInfo.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,5 +47,12 @@
"to":3,
"content":"test6",
"date":"02:20"
},
{
"id":7,
"from":0,
"to":4,
"content":"test7",
"date":"02:21"
}
Copy link
Member

Choose a reason for hiding this comment

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

희수님이 코드리뷰 남겨주신대로 저랑 이 부분이 조금 다르군요..!
저는 기존 과제에서는 concat을 사용했고, 이번 과제에 roomId를 추가하면서 concat 사용이 힘들었는데, 희수님처럼 구현하면 제가 저번 과제 했던 것 처럼 concat을 쉽게 사용할 수 있었겠네요! 방법하나 알아갑니다 👍

]
29 changes: 28 additions & 1 deletion src/pages/Chatting/ChatItem.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { contentState} from '../../recoil/atom';
import {useRecoilState,useRecoilValue,} from 'recoil';

type ChatItemProps = {
id: number;
Expand All @@ -11,11 +13,24 @@ type ChatItemProps = {

function ChatItem({id,name,src,number}:ChatItemProps){
const chatLink = '/room/' + id;

const [content, setContent] = useRecoilState(contentState);
const result = content.filter(c=>(c.to === id || c.from === id));
const lastContent = result[result.length-1];

return (
<StyledItem to={chatLink}>
<StyledBox>
<StyledImage width={"45px"} height={"45px"} src={src}/>&nbsp;
{name}
<StyledFontBox>
Copy link
Member

Choose a reason for hiding this comment

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

큰 styled component 안에 있는 요소들은 선택자로 관리하시면 굳이 새로운 styled component 만들지 않으셔도 돼요!.!

{name}
<StyledFont>
{lastContent.content}
</StyledFont>
</StyledFontBox>
<StyledDate>
{lastContent.date}
</StyledDate>
</StyledBox>
</StyledItem>
);
Expand All @@ -26,6 +41,18 @@ type StyledProps = {
height: string;
}

const StyledDate = styled.div`
float: right;
object-align: top;
color: gray;
font-size: small;
`

const StyledFontBox = styled.div`
display: flex;
flex-direction: column;
width:200px;
`
const StyledFont = styled.div`
font-size: small;
color: gray;
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Room/MsgBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ const MsgBox = () => {
contentList.map((c)=>(
<MsgItem
user = {msg.from}
key = {c.id}
to = {c.to}
from = {c.from}
date = {c.date}
content = {c.content}
key = {c.id}
/>
))
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Setting/Setting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Setting = () => {
<StyledBlock>
<Header/>
<StyledContent>
설정
더보기
</StyledContent>
</StyledBlock>
);
Expand Down
2 changes: 1 addition & 1 deletion src/recoil/atom.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,4 @@ export const contentSelector = selector({

return result;
},
});
});