Skip to content

[3주차] 이호연 과제 제출합니다. #16

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.

Sign up for GitHub

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

Open
comforest wants to merge 8 commits into
base: comforest
Choose a base branch
from
Open

[3주차] 이호연 과제 제출합니다. #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
eff77d3
fix: 이미지 margin 수정
Apr 7, 2021
d8ecbac
feat: react router dom 추가
Apr 7, 2021
c9bf039
feat: Chat 화면 라우터 적용
Apr 7, 2021
5a61b68
feat: 좌측 네비게이션 바 제작
Apr 7, 2021
840d381
feat: 채팅 목록 완성
Apr 13, 2021
6b767e9
refactor: 체팅 화면 바뀐 데이터 정리
comforest Apr 29, 2021
597b1cc
feat: Chat 화면과 메인 화면 Data 연동
comforest Apr 29, 2021
596c00a
feat: User 목록 화면
comforest Apr 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
.idea/

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
Expand Down
88 changes: 88 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@testing-library/user-event": "^12.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"styled-components": "^5.2.1",
"web-vitals": "^0.2.4"
Expand Down
Binary file added public/ic_chat.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/ic_person.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/ic_setting.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
75 changes: 38 additions & 37 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/muji.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
<head>
<meta charset="utf-8" />
<link href="%PUBLIC_URL%/muji.jpg" rel="icon" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="#000000" name="theme-color" />
<meta
content="Web site created using create-react-app"
name="description"
/>
<link href="%PUBLIC_URL%/index.css" rel="text/css" />
<link href="%PUBLIC_URL%/logo192.png" rel="apple-touch-icon" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link href="%PUBLIC_URL%/manifest.json" rel="manifest" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>카카오톡 따라하기</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>카카오톡 따라하기</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
130 changes: 34 additions & 96 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { useState } from 'react';
import styled, { createGlobalStyle } from 'styled-components';
import Header from './Header';
import ChatContainer from './ChatContainer';
import ChatInput from './ChatInput';
import ChatList from './ChatList/index';
import User from './User/index';
import Setting from './Setting/index';
import Nav from './Nav';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { sampleChatList, sampleUserList } from './SampleData';
import { useState } from 'react';

const StyledGlobal = createGlobalStyle`
body {
Expand All @@ -13,103 +16,38 @@ const StyledGlobal = createGlobalStyle`

const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: auto;
min-height: 100%;

background: #9bbbd4;
flex-direction: row;
`;

const userList = [
{
id: 0,
img: `${process.env.PUBLIC_URL}/muji.jpg`,
name: '무지',
status: '현재 접속 중',
},
{
id: 1,
img: `${process.env.PUBLIC_URL}/corn.png`,
name: '콘',
status: '현재 접속 중',
},
];

const sampleChat = [
{
user: userList[0],
chatList: ['안녕하세요'],
},
{
user: userList[1],
chatList: [
'안녕하세요',
'저도 반갑습니다',
`저는 ${userList[1].name}입니다.`,
],
},
{
user: userList[0],
chatList: ['안녕하세요', '반갑습니다', `저는 ${userList[0].name}입니다.`],
},
{
user: userList[1],
chatList: [
'안녕하세요',
'저도 반갑습니다',
`저는 ${userList[1].name}입니다.`,
],
},
{
user: userList[0],
chatList: [
'안녕하세요',
'반갑습니다',
`테스트 입력입니다테스트 입력입니다테스트 입력입니다테스트 입력입니다`,
],
},
{
user: userList[1],
chatList: [
'안녕하세요',
'저도 반갑습니다',
`저는 ${userList[1].name}입니다.`,
],
},
];

export default () => {
const [currentUser, setCurrentUser] = useState(userList[0]);
const [ownerUser, setOwnerUser] = useState(userList[0]);
const [chatData, setChatData] = useState(sampleChat);

const sendMessage = (message) => {
if (message === '') {
alert('빈 텍스트 입니다');
return;
}

const lastChatItem = chatData[chatData.length - 1];
if (lastChatItem.user.id === currentUser.id) {
lastChatItem.chatList.push(message);
setChatData([...chatData]);
} else {
const nextChatItem = { user: currentUser, chatList: [message] };
const newChatData = [...chatData, nextChatItem];
setChatData(newChatData);
}
};

const toggleCurrentUser = () => {
setCurrentUser(currentUser.id === 0 ? userList[1] : userList[0]);
};
const [chatList, setChatList] = useState(sampleChatList);
const [userList, setUserList] = useState(sampleUserList);

return (
<StyledContainer>
<Router>
<StyledGlobal />
<Header user={currentUser} onClickImage={toggleCurrentUser} />
<ChatContainer chatData={chatData} ownerUserId={ownerUser.id} />
<ChatInput onSendMessage={sendMessage} />
</StyledContainer>

<StyledContainer>
<Switch>
<Route
path={['/', '/user', '/chat', '/setting']}
component={Nav}
exact
/>
</Switch>

<Switch>
Copy link

@sbl133 sbl133 May 8, 2021

Choose a reason for hiding this comment

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

웹페이지를 처음 시작할때 안에 내용이 없고 레이아웃만 뜨던데
제 생각에는 아마 여기서 path = "/" 일때 반환하는 component가 없어서 그런거 같아요
웹페이지가 처음 시작할때 path가 "/"인것을 감안해서 그 경우에도 반환하는 component가 있을면 좋을거 같습니다

<Route
path="/user"
render={(props) => <User {...props} userList={userList} />}
Copy link

@seank200 seank200 May 8, 2021

Choose a reason for hiding this comment

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

일반적으로 Component의 이름과 파일 이름을 동일하게 설정하는 편인데 User/index.js에 있다고 설명이 있으면 좋을 듯 합니다

/>
Comment on lines +40 to +43
Copy link

@sebastianrcnt sebastianrcnt May 8, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

Suggested change
<Route
path="/user"
render={(props) => <User {...props} userList={userList} />}
/>
<Route
path="/user"
>
<User userList={userList} />
</Route>

혹시 이렇게 해도 작동 하던가요??
이렇게 하면 좀 더 직관적이고 좋을 것 같다는 생각이 들어용
prop으로 익명함수를 전달하는 것보다 children으로 넣어주는 패턴이 리액트의 설계의도와도 잘 맞을 듯 합니다 ㅎㅎ

<Route
path="/chat"
render={(props) => <ChatList {...props} chatList={chatList} />}
/>
<Route path="/setting" component={Setting} />
</Switch>
</StyledContainer>
</Router>
);
};
4 changes: 2 additions & 2 deletions src/ChatContainer.js → src/Chat/ChatContainer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useRef } from 'react';
import { Fragment, useEffect, useRef } from 'react';
import styled from 'styled-components';
import ChatItemContainer from './ChatItemsContainer';
import * as ReactDOM from 'react-dom';
Expand All @@ -17,7 +17,7 @@ export default (props) => {
const list = props.chatData.map((item, index) => {
return (
<ChatItemContainer
Comment on lines 17 to 19
Copy link

@sebastianrcnt sebastianrcnt May 8, 2021

Choose a reason for hiding this comment

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

list보다는 좀 더 구체적인 이름이면 좋을 것 같아요. ChatItemList 도 괜찮아보이네용.
(대문자인 이유는 JSX 컴포넌트들의 리스트라는 걸 암시)

Suggested change
const list = props.chatData.map((item, index) => {
return (
<ChatItemContainer
const ChatItemList = props.chatData.map((chatItem, index) => {
return (
<ChatItemContainer

chatList={item.chatList}
chatList={item.chat}
user={item.user}
ownerUserId={props.ownerUserId}
ref={index === props.chatData.length - 1 ? lastItem : undefined}
Comment on lines 17 to 23
Copy link

@sebastianrcnt sebastianrcnt May 8, 2021

Choose a reason for hiding this comment

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

요 부분에서

index === props.chatData.length - 1

을 쓰는것보다

그 위에서

const isLatestChat = index === props.chatData.length - 1;

이렇게 해보는건 어떨까요? 그러면 이 줄을

ref={isLatestChat ? lastItem : undefined}

이렇게 바꿔볼 수 있어서 가독성도 올라갈것같네요~!

Expand Down
1 change: 1 addition & 0 deletions src/ChatInput.js → src/Chat/ChatInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const StyledSubmitButton = styled.input.attrs({
type: 'image',
})`
height: auto;
width: 55px;

flex: 0 0 auto;
background: yellow;
Expand Down
Loading