-
Notifications
You must be signed in to change notification settings - Fork 12
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주차] 임채리 미션 제출합니다. #22
base: master
Are you sure you want to change the base?
Changes from 36 commits
6da31f4
d5b2b16
f30fff5
966fcc1
868dc9a
110561e
6b22e7c
b547e76
fb558bf
dd9104c
545d73e
8911384
b652549
e8eee80
d1287b1
7bb6932
e294746
0488d3e
c3aa5f4
ed39bca
477c450
6881ec7
fbd57b0
50d015a
0f0694b
824308b
49b6612
5e91548
41e5f06
37d218e
4eae14a
b7b05ec
10db4bf
abfcbc4
92cad81
5cc0761
baa0dd3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,67 @@ | ||
import styled from 'styled-components'; | ||
import { createGlobalStyle } from 'styled-components'; | ||
import { RecoilRoot } from 'recoil'; | ||
import ChatRoomListPage from './pages/ChatRoomListPage'; | ||
import FriendsPage from './pages/FriendsPage'; | ||
import SettingsPage from './pages/SettingsPage'; | ||
import ChatsPage from './pages/ChatsPage'; | ||
import NavBar from './NavBar'; | ||
import { BrowserRouter, Route, Routes } from 'react-router-dom'; | ||
//vercel 배포 | ||
function App() { | ||
return <div>화이팅!!</div>; | ||
return ( | ||
<BrowserRouter> | ||
<RecoilRoot> | ||
<GlobalStyle /> | ||
<Wrapper> | ||
<Container> | ||
<NavBar /> | ||
<Routes> | ||
<Route path="/" element={<FriendsPage />} /> | ||
<Route path="/chatlist" element={<ChatRoomListPage />} /> | ||
<Route path="/chatroom/:roomid" element={<ChatsPage />} /> | ||
<Route path="/settings" element={<SettingsPage />} /> | ||
</Routes> | ||
</Container> | ||
</Wrapper> | ||
</RecoilRoot> | ||
</BrowserRouter> | ||
); | ||
} | ||
|
||
const GlobalStyle = createGlobalStyle` | ||
body { | ||
font-family: "Helvetica", "Arial", sans-serif; | ||
width: 100%; | ||
height: 100%; | ||
background-color: white; | ||
} | ||
|
||
button { | ||
background-color: transparent; | ||
font-size: 20px; | ||
cursor: pointer; | ||
border: none; | ||
} | ||
|
||
`; | ||
|
||
const Wrapper = styled.div` | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
height: 100vh; | ||
flex-direction: column; | ||
border-radius: 20px; | ||
`; | ||
|
||
const Container = styled.div` | ||
border-radius: 20px; | ||
width: 400px; | ||
height: 600px; | ||
box-shadow: 1px 1px 10px gray; | ||
display: grid; | ||
grid-template-columns: 1fr 5fr; | ||
`; | ||
|
||
export default App; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { Link } from 'react-router-dom'; | ||
import styled from 'styled-components'; | ||
import { BsPersonFill, BsChatFill, BsThreeDots } from 'react-icons/bs'; | ||
|
||
const NavBar = () => { | ||
return ( | ||
<Nav> | ||
<Icons> | ||
<Link to="/"> | ||
<BsPersonFill color={'#696969'} /> | ||
</Link> | ||
</Icons> | ||
<Icons> | ||
<Link to="/chatlist"> | ||
<BsChatFill color={'#696969'} /> | ||
</Link> | ||
</Icons> | ||
<Icons> | ||
<Link to="/settings"> | ||
<BsThreeDots color={'#696969'} /> | ||
</Link> | ||
</Icons> | ||
</Nav> | ||
); | ||
}; | ||
|
||
const Nav = styled.div` | ||
display: flex; | ||
flex-direction: column; | ||
background-color: #dcdcdc; | ||
border-radius: 20px 0px 0px 20px; | ||
`; | ||
|
||
const Icons = styled.li` | ||
list-style: none; | ||
font-size: 30px; | ||
margin-top: 20px; | ||
display: flex; | ||
justify-content: center; | ||
`; | ||
|
||
export default NavBar; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { atom } from 'recoil'; | ||
import message from './data/message.json'; | ||
import user from './data/user.json'; | ||
import { IChatBoard,IUser } from './interface'; | ||
|
||
|
||
export const listAtom = atom<IChatBoard[]>({ | ||
key: 'chatList', | ||
default: message | ||
}); | ||
|
||
export const userAtom = atom<IUser>({ | ||
key: 'user', | ||
default: user[0] | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import React from 'react'; | ||
import styled from 'styled-components'; | ||
import { IChatRoomList } from '../../interface'; | ||
|
||
const ChatRoom = ({ text, name }: IChatRoomList) => { | ||
return ( | ||
<ChatRoomContainer> | ||
<ChatRoomImg src={`./img/${name}.png`} /> | ||
<div> | ||
<ChatRoomName>{name}</ChatRoomName> | ||
<ChatRoomText>{text}</ChatRoomText> | ||
</div> | ||
</ChatRoomContainer> | ||
); | ||
}; | ||
|
||
const ChatRoomContainer = styled.div` | ||
display: grid; | ||
grid-template-columns: 1fr 5fr; | ||
height: 50px; | ||
margin-bottom: 10px; | ||
margin-left: 10px; | ||
`; | ||
|
||
const ChatRoomImg = styled.img` | ||
width: 40px; | ||
height: 40px; | ||
border-radius: 50%; | ||
`; | ||
|
||
const ChatRoomName = styled.div` | ||
font-size: 17px; | ||
font-weight: 500; | ||
`; | ||
|
||
const ChatRoomText = styled.div` | ||
color: gray; | ||
font-size: 13px; | ||
margin-top: 2px; | ||
`; | ||
|
||
export default ChatRoom; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import message from '../../data/message.json'; | ||
import ChatRoom from './ChatRoom'; | ||
import { Link } from 'react-router-dom'; | ||
|
||
function ChatRoomList() { | ||
return ( | ||
<div> | ||
{message.map((Msg) => ( | ||
<Link | ||
to={`/chatroom/${Msg.roomid}`} | ||
style={{ textDecoration: 'none', color: 'black' }} | ||
> | ||
<ChatRoom | ||
key={Msg.userid} | ||
text={Msg.msg[Msg.msg.length - 1].text} | ||
name={Msg.name} | ||
roomid={Msg.roomid} | ||
/> | ||
</Link> | ||
))} | ||
</div> | ||
); | ||
} | ||
|
||
export default ChatRoomList; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import React from 'react'; | ||
import styled from 'styled-components'; | ||
import { IUser, IChatRoomList } from '../../interface'; | ||
import { userAtom } from '../../atoms'; | ||
import { useRecoilState } from 'recoil'; | ||
|
||
const Chat = ({ name, text }: IChatRoomList) => { | ||
const [currentUser] = useRecoilState<IUser>(userAtom); | ||
|
||
return ( | ||
<> | ||
{name === currentUser.name ? ( | ||
<Li1> | ||
<UserImg src={`../img/${name}.png`} /> | ||
<div> | ||
<UserName1>{name}</UserName1> | ||
<Text>{text}</Text> | ||
</div> | ||
</Li1> | ||
) : ( | ||
<Li2> | ||
<UserImg src={`../img/${name}.png`} /> | ||
<div> | ||
<UserName2>{name}</UserName2> | ||
<Text>{text}</Text> | ||
</div> | ||
</Li2> | ||
)} | ||
</> | ||
); | ||
}; | ||
|
||
const Li1 = styled.li` | ||
display: flex; | ||
flex-direction: row-reverse; | ||
margin-right: 20px; | ||
margin-bottom: 10px; | ||
`; | ||
|
||
const Li2 = styled.li` | ||
display: flex; | ||
flex-direction: row; | ||
margin-bottom: 10px; | ||
`; | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Li1 과 Li2 에서 사용하는 속성이 중복되는게 많은 것 같아서 flex-direction 이랑 margin-right를 props로 주어 하나의 style로 만들어주면 어떨까싶습니다! |
||
const UserImg = styled.img` | ||
width: 30px; | ||
height: 30px; | ||
border-radius: 50%; | ||
`; | ||
|
||
const UserName1 = styled.span` | ||
display: flex; | ||
flex-direction: row-reverse; | ||
padding: 5px; | ||
margin-bottom: 5px; | ||
margin-right: 5px; | ||
`; | ||
|
||
const UserName2 = styled.span` | ||
display: flex; | ||
flex-direction: row; | ||
padding: 5px; | ||
margin-bottom: 5px; | ||
margin-left: 5px; | ||
`; | ||
|
||
const Text = styled.span` | ||
background-color: white; | ||
margin: 10px; | ||
padding: 10px; | ||
border-radius: 10px; | ||
font-size: 13px; | ||
margin-top: 10px; | ||
`; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 혹시 여기는 margin-top 에만 20px를 주고싶어서 margin과 margin top을 따로 써주신걸까요?? 참고하시라고 margin 방향 나눠서 작성하는 법 놓고가요! |
||
|
||
export default Chat; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
import React, { useRef, useEffect } from 'react'; | ||
import Chat from './Chat'; | ||
import styled from 'styled-components'; | ||
import { IChatBoard } from '../../interface'; | ||
import { listAtom } from '../../atoms'; | ||
import { useRecoilState } from 'recoil'; | ||
|
||
function ChatBoard({ roomid }: any) { | ||
const [chatList] = useRecoilState<IChatBoard[]>(listAtom); | ||
const chatBoardRef = useRef<HTMLDivElement>(null); | ||
|
||
const scrollDown = () => { | ||
if (chatBoardRef.current) { | ||
chatBoardRef.current.scrollTop = chatBoardRef.current.scrollHeight; | ||
} | ||
}; | ||
|
||
useEffect(() => { | ||
scrollDown(); | ||
}, [chatList]); | ||
|
||
const currentChatList = chatList[roomid].msg; | ||
|
||
return ( | ||
<ChatBoardContainer ref={chatBoardRef}> | ||
<UserChat> | ||
{currentChatList.map((li: any) => ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 저는 map을 쓸 때 옆에 타입을 지정해주지 않았는데 혹시 이거 지정해주신 이유가 있을까요??? (혹시 썼어야하는건지 잘 몰라서요 ..!! / 혹은 제가 map을 썼을 경우와 다른 점이 있나싶어서.!) |
||
<Chat key={li.name} name={li.name} text={li.text} /> | ||
))} | ||
</UserChat> | ||
</ChatBoardContainer> | ||
); | ||
} | ||
|
||
const ChatBoardContainer = styled.div` | ||
background-color: #85c1e9; | ||
overflow: auto; | ||
`; | ||
|
||
const UserChat = styled.ul` | ||
list-style: none; | ||
`; | ||
|
||
export default ChatBoard; |
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.
채팅방 목록에서 나와의 채팅방으로 이동할때 경로가 "/chatroom/undefined" 이렇게 이동되어서 화면이 안뜨는데 혹시 이유가 뭘까요..! 친구목록에서 나와의 채팅방은 "/chatroom/0" 이 경로로 잘 들어가지네요!