From eff77d34d9b6d1e48b43e3ac54f0576a7e105734 Mon Sep 17 00:00:00 2001 From: HoYean Lee Date: Wed, 7 Apr 2021 14:01:24 +0900 Subject: [PATCH 1/8] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20margin?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ChatItemsContainer.js | 2 +- src/ProfileCard.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ChatItemsContainer.js b/src/ChatItemsContainer.js index f09329a..0b4a8ec 100644 --- a/src/ChatItemsContainer.js +++ b/src/ChatItemsContainer.js @@ -30,7 +30,7 @@ const StyledImg = styled.img` height: 50px; width: 50px; border-radius: 50%; - margin: 10px; + margin: 0 10px 10px; `; const StyledChatItem = styled.p` diff --git a/src/ProfileCard.js b/src/ProfileCard.js index eabf38f..ed07004 100644 --- a/src/ProfileCard.js +++ b/src/ProfileCard.js @@ -12,7 +12,7 @@ const StyledImg = styled.img` height: 70px; width: 70px; border-radius: 30%; - margin: 0px 10px 10px; + margin: 10px; `; const StyledLabelContainer = styled.div` From d8ecbac433780862afac571fad6f55d238133520 Mon Sep 17 00:00:00 2001 From: HoYean Lee Date: Wed, 7 Apr 2021 14:03:00 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20react=20router=20dom=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 ++ package-lock.json | 88 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 91 insertions(+) diff --git a/.gitignore b/.gitignore index 4d29575..fec43d6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +.idea/ + # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies diff --git a/package-lock.json b/package-lock.json index c491ee3..51b7ba9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7021,6 +7021,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -9887,6 +9900,15 @@ "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" }, + "mini-create-react-context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", + "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + } + }, "mini-css-extract-plugin": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", @@ -12310,6 +12332,52 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.0.tgz", @@ -12765,6 +12833,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -14537,6 +14610,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmpl": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", @@ -14977,6 +15060,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 16bb883..9930df3 100644 --- a/package.json +++ b/package.json @@ -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" From c9bf039d47cf4b59508654efe3f639b9c130e8fa Mon Sep 17 00:00:00 2001 From: HoYean Lee Date: Wed, 7 Apr 2021 23:14:52 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20Chat=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=84=B0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 109 +++------------------------ src/{ => Chat}/ChatContainer.js | 0 src/{ => Chat}/ChatInput.js | 0 src/{ => Chat}/ChatItemsContainer.js | 0 src/{ => Chat}/Header.js | 0 src/{ => Chat}/ProfileCard.js | 0 src/Chat/index.js | 107 ++++++++++++++++++++++++++ 7 files changed, 116 insertions(+), 100 deletions(-) rename src/{ => Chat}/ChatContainer.js (100%) rename src/{ => Chat}/ChatInput.js (100%) rename src/{ => Chat}/ChatItemsContainer.js (100%) rename src/{ => Chat}/Header.js (100%) rename src/{ => Chat}/ProfileCard.js (100%) create mode 100644 src/Chat/index.js diff --git a/src/App.js b/src/App.js index c75b73d..d42d568 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,7 @@ import { useState } from 'react'; import styled, { createGlobalStyle } from 'styled-components'; -import Header from './Header'; -import ChatContainer from './ChatContainer'; -import ChatInput from './ChatInput'; +import Chat from './Chat/index'; +import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; const StyledGlobal = createGlobalStyle` body { @@ -11,105 +10,15 @@ const StyledGlobal = createGlobalStyle` } `; -const StyledContainer = styled.div` - display: flex; - flex-direction: column; - height: auto; - min-height: 100%; - - background: #9bbbd4; -`; - -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]); - }; - return ( - + -
- - - + + + + + + ); }; diff --git a/src/ChatContainer.js b/src/Chat/ChatContainer.js similarity index 100% rename from src/ChatContainer.js rename to src/Chat/ChatContainer.js diff --git a/src/ChatInput.js b/src/Chat/ChatInput.js similarity index 100% rename from src/ChatInput.js rename to src/Chat/ChatInput.js diff --git a/src/ChatItemsContainer.js b/src/Chat/ChatItemsContainer.js similarity index 100% rename from src/ChatItemsContainer.js rename to src/Chat/ChatItemsContainer.js diff --git a/src/Header.js b/src/Chat/Header.js similarity index 100% rename from src/Header.js rename to src/Chat/Header.js diff --git a/src/ProfileCard.js b/src/Chat/ProfileCard.js similarity index 100% rename from src/ProfileCard.js rename to src/Chat/ProfileCard.js diff --git a/src/Chat/index.js b/src/Chat/index.js new file mode 100644 index 0000000..a82c4a2 --- /dev/null +++ b/src/Chat/index.js @@ -0,0 +1,107 @@ +import styled from 'styled-components'; +import { useState } from 'react'; +import ChatInput from './ChatInput'; +import ChatContainer from './ChatContainer'; +import Header from './Header'; + +const StyledContainer = styled.div` + display: flex; + flex-direction: column; + height: auto; + min-height: 100%; + + background: #9bbbd4; +`; + +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]); + }; + + return ( + +
+ + + + ); +}; From 5a61b68eea2c4be68956c07a07d37f21bf1ecc2f Mon Sep 17 00:00:00 2001 From: HoYean Lee Date: Thu, 8 Apr 2021 01:09:36 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=EC=A2=8C=EC=B8=A1=20=EB=84=A4?= =?UTF-8?q?=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20=EB=B0=94=20=EC=A0=9C?= =?UTF-8?q?=EC=9E=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/ic_chat.png | Bin 0 -> 18307 bytes public/ic_person.png | Bin 0 -> 8044 bytes public/ic_setting.png | Bin 0 -> 5888 bytes src/App.js | 32 +++++++++++++++++++----- src/Chat/index.js | 4 ++- src/ChatList/index.js | 15 +++++++++++ src/Nav.js | 56 ++++++++++++++++++++++++++++++++++++++++++ src/Setting/index.js | 5 ++++ src/User/index.js | 5 ++++ 9 files changed, 110 insertions(+), 7 deletions(-) create mode 100644 public/ic_chat.png create mode 100644 public/ic_person.png create mode 100644 public/ic_setting.png create mode 100644 src/ChatList/index.js create mode 100644 src/Nav.js create mode 100644 src/Setting/index.js create mode 100644 src/User/index.js diff --git a/public/ic_chat.png b/public/ic_chat.png new file mode 100644 index 0000000000000000000000000000000000000000..5bb12ed71c72b45de7fabeafbd77922438eb3f2e GIT binary patch literal 18307 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%0D2(RvDRDvL;5xTGjewvUMhU81f)_k$|#+ z=A|U5JmBRCp7df@M!XYi6ncFiT$S$B=)rIY+h?)Q2&j(^Iifc&QV6*6UEyy91+MJ?{>UwEBELER@`NYend6CnPIHcCk;t z;H3VV^tdRWIR~D43KY?Hb1-^AKJ%7>p~BV_u<{Ipkp{A}Bey+jsD=7q6Ece<01}C8Fm}ML~YWEl$++`;n^Y zQqmkW$&=Wo7%ndtZQaa0TAiBizAT;NZ4S^Y*P&)$_7<}n)FEoS?I=#H&yTTlFzpBc znR7+r;)8ZAPD0|qd5faQ#1mWfMg>JH<>@`PEhtcF|S*89KTavy33=)wH9>i7G^ z;@^)K(bhLPCko8A=E(qB?T(%?sQab>HI9v6Uo=h3&#x#{&?kLsudI1fsq#%U9guF^ z{Y`ug?CnzDSS=s&3_2002GQ7Vg?)=Wmpf6UjY2E>|qss$p04BFE^PI4-*;+b)`93 z{UO(lHnYp7(*geEN-G;AVFu388|~+uykEo0;x^bF^5(I7!Am(zrOS)b7T~svi8k53 z9QoUQ1_RQ=LCr5-?41YBNb=oDGH}Vy-H-PZ6_c0N`c1(K>=zRhIjL(Wbi!|R*?`C= zUlCgJ=d9zCSF{Ozc_+a0hlS9cGqo8eaW(NIOlDa;C7s6W%4)EWyWK^_?&9z0-rW@0 zBBjbn-O@(lhm~R_Rb-c+-(15P+{ZT-xuQL6n&*y4#7wLcP~gS8t^p%GvB9?>s`&WY4jphRHlJ}LET~h-gqDG-U5OAjK5=8yPqv9 zZMMBfUlNjh>J=W`9;z5W$Wk@og8A-3sNCH4H?K<;&?U94=1FK|caCSp)anPV4)C-2 z_kZXtJ!g2b9Zy>8hV~Uo8A?%Ds;zv*QSv=rxp;-Bcpxw(U7KjFBXg%$X357gTVtkf zxcU1K2XH+d1%~F>aV<^0%-G-=3)$*-SO=W}ZqQNha?mexu!76yM57@1(5n1EN6jjAawl1~9`jceEIQ^4`U9hv zoxXkoWCIm^`Sdezh_%$})712xZj6R9G`+Dd|b1xK?{D#~{_A z1A>NCd$&x6>b-TVW{YJj(^`cvqXqqgQ*J?9>GAFJijkQj1p>-Rv(4`A(dy^LuGX42 zcPwvG>HZQ`lufLH}G~`KBAz#d(Qj-;m5H$ixPLQh7lb*eAL0 zDz|22+tMP+;V|@*+u20&NW_4YW)=44IcZbNN07zXff$V{4&>pbg-)#*V7m=(5kWE@ z9eQadim6^S3$oU@Td~lgF>{X_3~a>{49Kp1H3@kQf7YhO9c>`z1@sca&1IK2FUc~p z1?qfD?js!}Wqt0mKVOoLoahkkJ^gCjH+y2aeFl4av&bAMi4?cgJ=uwdjq@hQtK*Hw6lK$=c)TD6zEjhXo0bssFwBToDYE!dedH?nuo#+Md#JiM3c~cippr2m3w(xMwR-@<&dZD%; z-8HwkOkk<6KiN8$KW5g{+t^MrpJ?^Hb;f}jk^FRke=(2;k+Q`-Rc%V$Re6$Bo5qnp z2!EEJ^am_zFJd^I%(Dx~to})z>TErlU*@WH5o}cip?h}glA2O9KCMOSOq+??3WRtNc2&&XZQ-GS9W{3fQkpW<8rC}Iwl&n}vy9?Bb zr85SL=@>OJ;k_Po*mIxQYT4O!RvDYcw$2sUgFi@%3GT;rQV>aih4r@@(=nA|LY2P7 zuqT682cJmAtyH(2W3QeCTV+7#e)5aSCMVuJ=MI8iORS#cth)8E6J~p9ezvhF;9_7i zynDXu(Vl1$buDm>dS7iZ2M!<0n0_}6`ow)DS9=vK_po#H3>fG3KNiptVxA-QcJ*)v76C| z3u-t&Kc&Nbf*D_U;n=nOzWN2zr!3AJud1BdU?r+24->jcq|0}IUpq7HhtaGo$LUxT zH{BT#x&k-1O+Y(ti?XQwoKRC>>QSOIXVDUIE}$iF=yFV>on6{Z+X-JH(|p(C*JsqL zj#s>{XLuNV4nxJgh5<&Oo2|=+uH5*jy<1yW$weP3eo%7T&$r|`QEgtUN*JeigLbf#7{gg;}SRx-*@ z-{ENI(SA@Uxo0K;*d@ic@4lq_pFcm<8zok)>l48Oohu&b-uOvJF1m_}UV8atvOs@y z>_vpuq2|yX&h4RNFQyrO{i3a>i@W~3FeE606sGSOQvd}hF}N>B>>OE#*&M#SH!T^#p0+_(2n{0HnDf;a#G literal 0 HcmV?d00001 diff --git a/src/App.js b/src/App.js index d42d568..e4e7b2f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,9 @@ -import { useState } from 'react'; import styled, { createGlobalStyle } from 'styled-components'; import Chat from './Chat/index'; +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'; const StyledGlobal = createGlobalStyle` @@ -10,15 +13,32 @@ const StyledGlobal = createGlobalStyle` } `; +const StyledContainer = styled.div` + display: flex; + flex-direction: row; +`; + export default () => { return ( - - - - - + + + + + + + + + + + + + ); }; diff --git a/src/Chat/index.js b/src/Chat/index.js index a82c4a2..44361b4 100644 --- a/src/Chat/index.js +++ b/src/Chat/index.js @@ -7,6 +7,7 @@ import Header from './Header'; const StyledContainer = styled.div` display: flex; flex-direction: column; + width: 100%; height: auto; min-height: 100%; @@ -71,7 +72,8 @@ const sampleChat = [ }, ]; -export default () => { +export default (props) => { + console.log(props); const [currentUser, setCurrentUser] = useState(userList[0]); const [ownerUser, setOwnerUser] = useState(userList[0]); const [chatData, setChatData] = useState(sampleChat); diff --git a/src/ChatList/index.js b/src/ChatList/index.js new file mode 100644 index 0000000..0470b02 --- /dev/null +++ b/src/ChatList/index.js @@ -0,0 +1,15 @@ +import styled from 'styled-components'; +import { useState } from 'react'; + +const StyledContainer = styled.div` + display: flex; + flex-direction: column; +`; + +export default () => { + return ( + +

ChatList

+ + ); +}; diff --git a/src/Nav.js b/src/Nav.js new file mode 100644 index 0000000..e5a18e9 --- /dev/null +++ b/src/Nav.js @@ -0,0 +1,56 @@ +import styled from 'styled-components'; +import { Link } from 'react-router-dom'; + +const StyledContainer = styled.div` + display: flex; + flex-direction: column; + height: 100vh; + background: #ececed; +`; + +const StyledList = styled.ul` + padding: 0 20px; +`; + +const StyledListItem = styled.li` + list-style: none; + margin: 10px 0; +`; + +const StyledListItemImage = styled.img` + width: 40px; + height: 40px; + padding: 10px; +`; + +export default () => { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/Setting/index.js b/src/Setting/index.js new file mode 100644 index 0000000..ceb0841 --- /dev/null +++ b/src/Setting/index.js @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export default () => { + return

Setting

; +}; diff --git a/src/User/index.js b/src/User/index.js new file mode 100644 index 0000000..45383ed --- /dev/null +++ b/src/User/index.js @@ -0,0 +1,5 @@ +import styled from 'styled-components'; + +export default () => { + return

user

; +}; From 840d38149586c50ea142cf137a7580af5941890a Mon Sep 17 00:00:00 2001 From: HoYean Lee Date: Wed, 14 Apr 2021 04:42:38 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 75 ++++++++++----------- src/App.js | 13 ++-- src/Chat/index.js | 64 ++---------------- src/ChatList/ChatListItem.js | 36 ++++++++++ src/ChatList/index.js | 83 ++++++++++++++++++++++- src/Nav.js | 6 +- src/SampleData.js | 124 +++++++++++++++++++++++++++++++++++ src/index.css | 4 ++ src/index.js | 1 + 9 files changed, 301 insertions(+), 105 deletions(-) create mode 100644 src/ChatList/ChatListItem.js create mode 100644 src/SampleData.js create mode 100644 src/index.css diff --git a/public/index.html b/public/index.html index 6cd9cb5..0e4d6db 100644 --- a/public/index.html +++ b/public/index.html @@ -1,43 +1,44 @@ - - - - - - - - - - + + - 카카오톡 따라하기 - - - -
- + 카카오톡 따라하기 + + + +
+ - + To begin the development, run `npm start` or `yarn start`. + To create a production bundle, use `npm run build` or `yarn build`. +--> + diff --git a/src/App.js b/src/App.js index e4e7b2f..a3821a7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,11 @@ import styled, { createGlobalStyle } from 'styled-components'; -import Chat from './Chat/index'; 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 } from './SampleData'; +import { useState } from 'react'; const StyledGlobal = createGlobalStyle` body { @@ -19,6 +20,8 @@ const StyledContainer = styled.div` `; export default () => { + const [chatList, setChatList] = useState(sampleChatList); + return ( @@ -26,16 +29,18 @@ export default () => { - - + } + /> diff --git a/src/Chat/index.js b/src/Chat/index.js index 44361b4..de5165f 100644 --- a/src/Chat/index.js +++ b/src/Chat/index.js @@ -3,6 +3,8 @@ import { useState } from 'react'; import ChatInput from './ChatInput'; import ChatContainer from './ChatContainer'; import Header from './Header'; +import { userList, sampleChat } from '../SampleData'; +import { useParams } from 'react-router-dom'; const StyledContainer = styled.div` display: flex; @@ -14,66 +16,12 @@ const StyledContainer = styled.div` background: #9bbbd4; `; -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 (props) => { + const { id } = useParams(); + + console.log(id); console.log(props); + const [currentUser, setCurrentUser] = useState(userList[0]); const [ownerUser, setOwnerUser] = useState(userList[0]); const [chatData, setChatData] = useState(sampleChat); diff --git a/src/ChatList/ChatListItem.js b/src/ChatList/ChatListItem.js new file mode 100644 index 0000000..177a4af --- /dev/null +++ b/src/ChatList/ChatListItem.js @@ -0,0 +1,36 @@ +import styled from 'styled-components'; + +const StyledContainer = styled.div` + display: flex; + flex-direction: row; + margin: 10px 0; +`; + +const StyledLabelContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const StyledProfileImage = styled.img` + width: 70px; + height: 70px; +`; +const StyledText = styled.p` + margin: 5px 0; +`; + +export default ({ item }) => { + const otherUser = + item.userList[0].id === 0 ? item.userList[1] : item.userList[0]; + const lastChatList = item.chatList[item.chatList.length - 1]; + const lastChatText = lastChatList.chat[lastChatList.chat.length - 1]; + return ( + + + + {otherUser.name} + {lastChatText} + + + ); +}; diff --git a/src/ChatList/index.js b/src/ChatList/index.js index 0470b02..a99ea8f 100644 --- a/src/ChatList/index.js +++ b/src/ChatList/index.js @@ -1,15 +1,92 @@ import styled from 'styled-components'; -import { useState } from 'react'; +import { Fragment, useEffect, useState } from 'react'; +import { Link, Route, Switch } from 'react-router-dom'; +import Chat from '../Chat/index'; +import ChatListItem from './ChatListItem'; const StyledContainer = styled.div` display: flex; flex-direction: column; + width: 100%; `; -export default () => { +const StyledSearchForm = styled.form` + display: flex; + flex-direction: row; + width: 100%; +`; + +const StyledSearchInput = styled.input.attrs({ + type: 'text', +})` + font-size: 1.5em; + padding: 10px 20px; + flex-grow: 1; +`; + +const List = ({ chatList }) => { + const [searchText, setSearchText] = useState(''); + const [chatItemComponents, setChatItemComponents] = useState([]); + + const myChatList = []; + for (const chatData of chatList) { + for (const userData of chatData.userList) { + if (userData.id === 0) { + myChatList.push(chatData); + break; + } + } + } + + useEffect(() => { + const filteredList = + searchText === '' + ? myChatList + : myChatList.filter((item) => { + if (searchText === '') return true; + for (const userData of item.userList) { + if (userData.name.includes(searchText)) return true; + } + return false; + }); + + setChatItemComponents( + filteredList.map((item) => { + return ( + + + + ); + }) + ); + }, [searchText]); + + const onSearchTextChanged = (e) => { + console.log(`_${e.target.value}_`); + setSearchText(e.target.value); + }; + return ( -

ChatList

+ + + + {chatItemComponents} ); }; + +export default ({ chatList }) => { + return ( + + + } /> + } + exact + /> + + + ); +}; diff --git a/src/Nav.js b/src/Nav.js index e5a18e9..ecdfcb9 100644 --- a/src/Nav.js +++ b/src/Nav.js @@ -28,7 +28,7 @@ export default () => { - + @@ -36,7 +36,7 @@ export default () => { - + @@ -44,7 +44,7 @@ export default () => { - + diff --git a/src/SampleData.js b/src/SampleData.js new file mode 100644 index 0000000..a41c788 --- /dev/null +++ b/src/SampleData.js @@ -0,0 +1,124 @@ +export const userList = [ + { + id: 0, + img: `${process.env.PUBLIC_URL}/muji.jpg`, + name: '무지', + status: '현재 접속 중', + }, + { + id: 1, + img: `${process.env.PUBLIC_URL}/corn.png`, + name: '콘', + status: '현재 접속 중', + }, + { + id: 2, + img: `${process.env.PUBLIC_URL}/tube.jpg`, + name: '튜브', + status: '현재 접속 중', + }, + { + id: 3, + img: `${process.env.PUBLIC_URL}/lion.png`, + name: '라이언', + status: '현재 접속 중', + }, + { + id: 4, + img: `${process.env.PUBLIC_URL}/frodo.png`, + name: '프로도', + status: '현재 접속 중', + }, + { + id: 5, + img: `${process.env.PUBLIC_URL}/apeach.png`, + name: '어피치', + status: '현재 접속 중', + }, +]; + +export 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 const sampleChatList = [ + { + id: 0, + userList: [userList[0], userList[1]], + chatList: [ + { + userId: userList[0].id, + chat: ['안녕하세요', '열심히 하겠습니다.'], + }, + ], + }, + { + id: 1, + userList: [userList[0], userList[2]], + chatList: [ + { + userId: userList[0].id, + chat: ['안녕하세요', '열심히 하겠습니다.'], + }, + ], + }, + { + id: 2, + userList: [userList[0], userList[3]], + chatList: [ + { + userId: userList[0].id, + chat: ['안녕하세요', '열심히 하겠습니다.'], + }, + ], + }, + { + id: 3, + userList: [userList[0], userList[3]], + chatList: [ + { + userId: userList[0].id, + chat: ['안녕하세요', '열심히 하겠습니다.'], + }, + ], + }, +]; diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..48f5326 --- /dev/null +++ b/src/index.css @@ -0,0 +1,4 @@ +a { + text-decoration: none; + color: black; +} diff --git a/src/index.js b/src/index.js index c1f31c5..d2cff4a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; +import './index.css'; ReactDOM.render( From 6b767e906d68aee3aa57df9e8666f1ebd8076f7d Mon Sep 17 00:00:00 2001 From: comforest Date: Thu, 29 Apr 2021 20:41:12 +0900 Subject: [PATCH 6/8] =?UTF-8?q?refactor:=20=EC=B2=B4=ED=8C=85=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=20=EB=B0=94=EB=80=90=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Chat/ChatContainer.js | 4 ++-- src/Chat/ChatInput.js | 1 + src/Chat/index.js | 19 +++++++++---------- src/ChatList/index.js | 5 ++++- src/SampleData.js | 8 ++++---- 5 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/Chat/ChatContainer.js b/src/Chat/ChatContainer.js index 1a15ba6..2a85357 100644 --- a/src/Chat/ChatContainer.js +++ b/src/Chat/ChatContainer.js @@ -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'; @@ -17,7 +17,7 @@ export default (props) => { const list = props.chatData.map((item, index) => { return ( { +export default ({ datas }) => { const { id } = useParams(); - console.log(id); - console.log(props); + const data = datas[id]; - const [currentUser, setCurrentUser] = useState(userList[0]); - const [ownerUser, setOwnerUser] = useState(userList[0]); - const [chatData, setChatData] = useState(sampleChat); + const [currentUser, setCurrentUser] = useState(data.userList[0]); + const [ownerUser, setOwnerUser] = useState(data.userList[0]); + const [chatData, setChatData] = useState(data.chatList); const sendMessage = (message) => { if (message === '') { @@ -34,10 +33,10 @@ export default (props) => { const lastChatItem = chatData[chatData.length - 1]; if (lastChatItem.user.id === currentUser.id) { - lastChatItem.chatList.push(message); + lastChatItem.chat.push(message); setChatData([...chatData]); } else { - const nextChatItem = { user: currentUser, chatList: [message] }; + const nextChatItem = { user: currentUser, chat: [message] }; const newChatData = [...chatData, nextChatItem]; setChatData(newChatData); } diff --git a/src/ChatList/index.js b/src/ChatList/index.js index a99ea8f..9ddea69 100644 --- a/src/ChatList/index.js +++ b/src/ChatList/index.js @@ -80,7 +80,10 @@ export default ({ chatList }) => { return ( - } /> + } + /> } diff --git a/src/SampleData.js b/src/SampleData.js index a41c788..59480e7 100644 --- a/src/SampleData.js +++ b/src/SampleData.js @@ -86,7 +86,7 @@ export const sampleChatList = [ userList: [userList[0], userList[1]], chatList: [ { - userId: userList[0].id, + user: userList[0], chat: ['안녕하세요', '열심히 하겠습니다.'], }, ], @@ -96,7 +96,7 @@ export const sampleChatList = [ userList: [userList[0], userList[2]], chatList: [ { - userId: userList[0].id, + user: userList[0], chat: ['안녕하세요', '열심히 하겠습니다.'], }, ], @@ -106,7 +106,7 @@ export const sampleChatList = [ userList: [userList[0], userList[3]], chatList: [ { - userId: userList[0].id, + user: userList[0], chat: ['안녕하세요', '열심히 하겠습니다.'], }, ], @@ -116,7 +116,7 @@ export const sampleChatList = [ userList: [userList[0], userList[3]], chatList: [ { - userId: userList[0].id, + user: userList[0], chat: ['안녕하세요', '열심히 하겠습니다.'], }, ], From 597b1cc6912f132dff4c7b1dcaec0846c6bfe00c Mon Sep 17 00:00:00 2001 From: comforest Date: Thu, 29 Apr 2021 20:50:53 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20Chat=20=ED=99=94=EB=A9=B4=EA=B3=BC?= =?UTF-8?q?=20=EB=A9=94=EC=9D=B8=20=ED=99=94=EB=A9=B4=20Data=20=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Chat/index.js | 8 ++++++-- src/ChatList/index.js | 4 ++-- src/SampleData.js | 47 ------------------------------------------- 3 files changed, 8 insertions(+), 51 deletions(-) diff --git a/src/Chat/index.js b/src/Chat/index.js index be025ae..fa224ed 100644 --- a/src/Chat/index.js +++ b/src/Chat/index.js @@ -3,7 +3,6 @@ import { useState } from 'react'; import ChatInput from './ChatInput'; import ChatContainer from './ChatContainer'; import Header from './Header'; -import { userList, sampleChat } from '../SampleData'; import { useParams } from 'react-router-dom'; const StyledContainer = styled.div` @@ -40,10 +39,15 @@ export default ({ datas }) => { const newChatData = [...chatData, nextChatItem]; setChatData(newChatData); } + data.chatList = chatData; }; const toggleCurrentUser = () => { - setCurrentUser(currentUser.id === 0 ? userList[1] : userList[0]); + setCurrentUser( + currentUser.id === data.userList[0].id + ? data.userList[1] + : data.userList[0] + ); }; return ( diff --git a/src/ChatList/index.js b/src/ChatList/index.js index 9ddea69..c024590 100644 --- a/src/ChatList/index.js +++ b/src/ChatList/index.js @@ -51,9 +51,9 @@ const List = ({ chatList }) => { }); setChatItemComponents( - filteredList.map((item) => { + filteredList.map((item, index) => { return ( - + ); diff --git a/src/SampleData.js b/src/SampleData.js index 59480e7..32228c1 100644 --- a/src/SampleData.js +++ b/src/SampleData.js @@ -37,52 +37,8 @@ export const userList = [ }, ]; -export 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 const sampleChatList = [ { - id: 0, userList: [userList[0], userList[1]], chatList: [ { @@ -92,7 +48,6 @@ export const sampleChatList = [ ], }, { - id: 1, userList: [userList[0], userList[2]], chatList: [ { @@ -102,7 +57,6 @@ export const sampleChatList = [ ], }, { - id: 2, userList: [userList[0], userList[3]], chatList: [ { @@ -112,7 +66,6 @@ export const sampleChatList = [ ], }, { - id: 3, userList: [userList[0], userList[3]], chatList: [ { From 596c00a5e2e581f66e785ebcf885335251dd60b9 Mon Sep 17 00:00:00 2001 From: comforest Date: Thu, 29 Apr 2021 21:04:56 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20User=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 8 +++-- src/SampleData.js | 18 +++++------ src/User/UserListItem.js | 31 +++++++++++++++++++ src/User/index.js | 65 ++++++++++++++++++++++++++++++++++++++-- 4 files changed, 109 insertions(+), 13 deletions(-) create mode 100644 src/User/UserListItem.js diff --git a/src/App.js b/src/App.js index a3821a7..1dcd0a8 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,7 @@ 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 } from './SampleData'; +import { sampleChatList, sampleUserList } from './SampleData'; import { useState } from 'react'; const StyledGlobal = createGlobalStyle` @@ -21,6 +21,7 @@ const StyledContainer = styled.div` export default () => { const [chatList, setChatList] = useState(sampleChatList); + const [userList, setUserList] = useState(sampleUserList); return ( @@ -36,7 +37,10 @@ export default () => { - + } + /> } diff --git a/src/SampleData.js b/src/SampleData.js index 32228c1..8a46eb0 100644 --- a/src/SampleData.js +++ b/src/SampleData.js @@ -1,4 +1,4 @@ -export const userList = [ +export const sampleUserList = [ { id: 0, img: `${process.env.PUBLIC_URL}/muji.jpg`, @@ -39,37 +39,37 @@ export const userList = [ export const sampleChatList = [ { - userList: [userList[0], userList[1]], + userList: [sampleUserList[0], sampleUserList[1]], chatList: [ { - user: userList[0], + user: sampleUserList[0], chat: ['안녕하세요', '열심히 하겠습니다.'], }, ], }, { - userList: [userList[0], userList[2]], + userList: [sampleUserList[0], sampleUserList[2]], chatList: [ { - user: userList[0], + user: sampleUserList[0], chat: ['안녕하세요', '열심히 하겠습니다.'], }, ], }, { - userList: [userList[0], userList[3]], + userList: [sampleUserList[0], sampleUserList[3]], chatList: [ { - user: userList[0], + user: sampleUserList[0], chat: ['안녕하세요', '열심히 하겠습니다.'], }, ], }, { - userList: [userList[0], userList[3]], + userList: [sampleUserList[0], sampleUserList[3]], chatList: [ { - user: userList[0], + user: sampleUserList[0], chat: ['안녕하세요', '열심히 하겠습니다.'], }, ], diff --git a/src/User/UserListItem.js b/src/User/UserListItem.js new file mode 100644 index 0000000..f7c6d07 --- /dev/null +++ b/src/User/UserListItem.js @@ -0,0 +1,31 @@ +import styled from 'styled-components'; + +const StyledContainer = styled.div` + display: flex; + flex-direction: row; + margin: 10px 0; +`; + +const StyledLabelContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const StyledProfileImage = styled.img` + width: 70px; + height: 70px; +`; +const StyledText = styled.p` + margin: 5px 0; +`; + +export default ({ user }) => { + return ( + + + + {user.name} + + + ); +}; diff --git a/src/User/index.js b/src/User/index.js index 45383ed..99b0b5e 100644 --- a/src/User/index.js +++ b/src/User/index.js @@ -1,5 +1,66 @@ import styled from 'styled-components'; +import { Fragment, useEffect, useState } from 'react'; +import UserListItem from './UserListItem'; -export default () => { - return

user

; +const StyledContainer = styled.div` + display: flex; + flex-direction: column; + width: 100%; +`; + +const StyledSearchForm = styled.form` + display: flex; + flex-direction: row; + width: 100%; +`; + +const StyledSearchInput = styled.input.attrs({ + type: 'text', +})` + font-size: 1.5em; + padding: 10px 20px; + flex-grow: 1; +`; + +export default ({ userList }) => { + const [searchText, setSearchText] = useState(''); + const [componentList, setComponentList] = useState([]); + + const friendList = []; + for (const userData of userList) { + if (userData.id !== 0) { + friendList.push(userData); + } + } + + useEffect(() => { + const filteredList = + searchText === '' + ? friendList + : friendList.filter((item) => { + if (searchText === '') return true; + if (item.name.includes(searchText)) return true; + + return false; + }); + + setComponentList( + filteredList.map((item, index) => { + return ; + }) + ); + }, [searchText]); + + const onSearchTextChanged = (e) => { + setSearchText(e.target.value); + }; + + return ( + + + + + {componentList} + + ); };