From 27f252f0000cf50fe20fa1bbde37344bf0cdf56f Mon Sep 17 00:00:00 2001 From: llinjae Date: Sat, 12 Aug 2023 03:22:06 +0900 Subject: [PATCH 01/30] =?UTF-8?q?Add=20:=20Thread=20PostList=20=EB=B0=8F?= =?UTF-8?q?=20Feed=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc | 25 ++++++- public/images/d.svg | 0 public/images/heart.svg | 5 ++ src/App.js | 7 -- src/Router.js | 2 - src/index.js | 13 ++-- src/pages/PostList/PostList.jsx | 19 +++++- src/pages/PostList/PostList.scss | 57 ++++++++++++++++ src/pages/PostList/components/Feed.jsx | 46 +++++++++++++ src/pages/PostList/components/Feed.scss | 86 +++++++++++++++++++++++++ src/style/common.scss | 17 ++++- 11 files changed, 258 insertions(+), 19 deletions(-) delete mode 100644 public/images/d.svg create mode 100644 public/images/heart.svg delete mode 100644 src/App.js create mode 100644 src/pages/PostList/PostList.scss create mode 100644 src/pages/PostList/components/Feed.jsx create mode 100644 src/pages/PostList/components/Feed.scss diff --git a/.eslintrc b/.eslintrc index 9cf9d00..b916ac3 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,3 +1,26 @@ { - "extends": ["react-app", "plugin:prettier/recommended"] + "extends": ["react-app", "plugin:prettier/recommended"], + "rules": { + "no-var": "warn", + "no-multiple-empty-lines": "warn", + "no-nested-ternary": "warn", + "no-console": "warn", + "eqeqeq": "warn", + "dot-notation": "warn", + "no-unused-vars": "warn", + "react/destructuring-assignment": "warn", + "react/jsx-pascal-case": "warn", + "react/no-direct-mutation-state": "warn", + "react/jsx-no-useless-fragment": "warn", + "react/no-unused-state": "warn", + "react/jsx-key": "warn", + "react/self-closing-comp": "warn", + "react/jsx-curly-brace-presence": "warn", + "prettier/prettier": [ + "error", + { + "endOfLine": "auto" + } + ] + } } diff --git a/public/images/d.svg b/public/images/d.svg deleted file mode 100644 index e69de29..0000000 diff --git a/public/images/heart.svg b/public/images/heart.svg new file mode 100644 index 0000000..f153c29 --- /dev/null +++ b/public/images/heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 2e89847..0000000 --- a/src/App.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from "react"; - -const App = () => { - return
동철님
; -}; - -export default App; diff --git a/src/Router.js b/src/Router.js index 0547cbc..b79832d 100644 --- a/src/Router.js +++ b/src/Router.js @@ -1,13 +1,11 @@ import React from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; -import App from './App'; import PostList from './pages/PostList/PostList'; const Router = () => { return ( - } /> } /> diff --git a/src/index.js b/src/index.js index cac8343..3d4015a 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,8 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import Router from "./Router"; -import "./style/reset.scss"; -import "./style/common.scss"; -import "./style/variables.scss"; +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import Router from './Router'; +import './style/reset.scss'; +import './style/common.scss'; -const root = ReactDOM.createRoot(document.getElementById("root")); +const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index 5aa2f0e..cce9922 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -1,7 +1,24 @@ import React from 'react'; +import './PostList.scss'; +import Feed from './components/Feed'; const PostList = () => { - return
PostList
; + return ( +
+
+
+
+ + + +
+
+
+ +
+
+
+ ); }; export default PostList; diff --git a/src/pages/PostList/PostList.scss b/src/pages/PostList/PostList.scss new file mode 100644 index 0000000..27eeb06 --- /dev/null +++ b/src/pages/PostList/PostList.scss @@ -0,0 +1,57 @@ +@import '../../style/variables.scss'; + +.postListContainer { + display: flex; + align-items: center; + width: 100%; + height: 80vh; +} + +.postListContentContainer { + max-width: 90%; + width: 100%; + height: calc(100% - 80px); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 24px; + border: 1px solid blue; +} + +.feedContainer { + width: 90%; + height: 80%; + + display: flex; + flex-direction: column; + gap: 24px; + + .feedContentContainer { + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } + } +} + +.btnBox { + width: 90%; + height: 56px; + display: flex; + justify-content: end; + + .btn { + border: none; + border-radius: 6px; + background-color: $blue; + color: white; + font-weight: 800; + font-size: 16px; + width: 120px; + padding: 0px 34px; + justify-content: center; + align-items: center; + } +} diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx new file mode 100644 index 0000000..c6ac64f --- /dev/null +++ b/src/pages/PostList/components/Feed.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import './Feed.scss'; + +const Feed = () => { + return ( +
+
+
+ 프로필 이미지 +

+ 이인재 +

+
+
+

00.00.00

+ +
+
+
+

+ 일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 + 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 + 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 + ELIZA의 이름을 따서 명명되었다. +

+
+
+
+

좋아요 00

+

댓글 00

+
+ 좋아요 버튼 +
+
+ ); +}; + +export default Feed; diff --git a/src/pages/PostList/components/Feed.scss b/src/pages/PostList/components/Feed.scss new file mode 100644 index 0000000..6b4b18d --- /dev/null +++ b/src/pages/PostList/components/Feed.scss @@ -0,0 +1,86 @@ +@import '../../../style/variables.scss'; + +.feed { + width: 100%; + height: auto; + padding: 0 8px 12px 8px; + border-bottom: 1px solid #e6e6e6; + display: flex; + flex-direction: column; + gap: 10px; + + .feedProfileBox { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + height: 50px; + + .feedProfileBoxLeft { + display: flex; + align-items: center; + gap: 16px; + + .profileImg { + width: 40px; + height: 40px; + border: 1px solid $grey88; + border-radius: 50%; + } + + .userName { + font-size: 20px; + } + } + + .feedProfileBoxRight { + display: flex; + align-items: center; + gap: 16px; + + .date { + color: $grey60; + font-weight: 400; + } + + .deleteBtn { + outline: none; + border: none; + background-color: transparent; + color: $red; + font-size: 14px; + cursor: pointer; + } + } + } + + .feedContentBox { + width: 100%; + height: auto; + + .feedContent { + font-size: 20px; + font-weight: 400; + line-height: 25px; + } + } + + .feedDescriptionBox { + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; + height: 50px; + + .feedDescriptionTop { + display: flex; + gap: 10px; + color: $grey60; + } + + .feedHeartImg { + width: 32px; + height: 32px; + } + } +} diff --git a/src/style/common.scss b/src/style/common.scss index 9c43632..8fe1ab2 100644 --- a/src/style/common.scss +++ b/src/style/common.scss @@ -1,6 +1,21 @@ * { box-sizing: border-box; - font-family: "Noto Sans KR", sans-serif; + font-family: 'Noto Sans KR', sans-serif; +} + +html { + max-width: 576px; + width: 100vw; + height: 100vh; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; +} + +body { + width: 100%; + height: 80vh; } a { From 19e0492f211ec239ab6182087a8d8d69090ed942 Mon Sep 17 00:00:00 2001 From: llinjae Date: Sat, 12 Aug 2023 03:25:23 +0900 Subject: [PATCH 02/30] =?UTF-8?q?Docs=20:=20README.md=EC=97=90=20conventio?= =?UTF-8?q?n=20=EB=82=B4=EC=9A=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 35c9fbf..1b03ac4 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,31 @@ -48기 Frontend C팀 +48기 Frontend C팀 : 이인재 박동철 정다인 -이인재 박동철 정다인 + -화이팅 +\*\*\* Git Commit message + +- Add : 레이아웃 / 기능 추가 +- Remove : 내용 삭제 (폴더 / 파일 삭제) +- Modify : 수정 (JSON 데이터 포맷 변경 / 버튼 색깔 변경 / 폰트 변경) +- Fix : 버그/오류 해결 +- Refactor : 코드 리팩토링 (멘토 리뷰 반영 / 스스로 리팩토링 / 중복 코드 제거 / 불필요 코드 제거 / 성능 개선) +- Docs : 문서에 관련된 수정작업(README.md 등) + +\*\*\* 브랜치명 + +- 첫 글자 대문자(파스칼) 그리고 UI 나 feature 표시 ex) UI/PostList, feature/PostList + +\*\*\* 파일 셋업 + +- 상태관리 : 소문자로 시작 + 카멜 +- 컴포넌트 / pages : 첫 글자 대문자(파스칼) +- 폴더명 / style파일명 : 소문자만 + +\*\*\* 코드 작성 ( 네이밍은 길어도 상관 없음 ) + +- 변수: 특정 의미를 갖도록 네이밍 +- 스타일: 특정 의미를 갖도록 네이밍 +- Route의 path: snake case로 ex) path='/post-list' + +👉🏻 변수, state : 소문자 카멜케이스 const myData = 10; +👉🏻 function : 소문자 카멜케이스 && arrow function const myFunc = () => {...} From b544d92d7c7e6ab26897b99712d422dca575cea8 Mon Sep 17 00:00:00 2001 From: llinjae Date: Sat, 12 Aug 2023 03:32:23 +0900 Subject: [PATCH 03/30] =?UTF-8?q?Docs=20:=20README.md=EC=97=90=20conventio?= =?UTF-8?q?n=20=EB=82=B4=EC=9A=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 35c9fbf..1b03ac4 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,31 @@ -48기 Frontend C팀 +48기 Frontend C팀 : 이인재 박동철 정다인 -이인재 박동철 정다인 + -화이팅 +\*\*\* Git Commit message + +- Add : 레이아웃 / 기능 추가 +- Remove : 내용 삭제 (폴더 / 파일 삭제) +- Modify : 수정 (JSON 데이터 포맷 변경 / 버튼 색깔 변경 / 폰트 변경) +- Fix : 버그/오류 해결 +- Refactor : 코드 리팩토링 (멘토 리뷰 반영 / 스스로 리팩토링 / 중복 코드 제거 / 불필요 코드 제거 / 성능 개선) +- Docs : 문서에 관련된 수정작업(README.md 등) + +\*\*\* 브랜치명 + +- 첫 글자 대문자(파스칼) 그리고 UI 나 feature 표시 ex) UI/PostList, feature/PostList + +\*\*\* 파일 셋업 + +- 상태관리 : 소문자로 시작 + 카멜 +- 컴포넌트 / pages : 첫 글자 대문자(파스칼) +- 폴더명 / style파일명 : 소문자만 + +\*\*\* 코드 작성 ( 네이밍은 길어도 상관 없음 ) + +- 변수: 특정 의미를 갖도록 네이밍 +- 스타일: 특정 의미를 갖도록 네이밍 +- Route의 path: snake case로 ex) path='/post-list' + +👉🏻 변수, state : 소문자 카멜케이스 const myData = 10; +👉🏻 function : 소문자 카멜케이스 && arrow function const myFunc = () => {...} From 4151d23c5ca0cc4abd01e8906b5272a652a38a64 Mon Sep 17 00:00:00 2001 From: llinjae Date: Sat, 12 Aug 2023 10:16:00 +0900 Subject: [PATCH 04/30] =?UTF-8?q?Modify=20:=20PostList=20=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/PostList.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/pages/PostList/PostList.scss b/src/pages/PostList/PostList.scss index 27eeb06..6a6ed1f 100644 --- a/src/pages/PostList/PostList.scss +++ b/src/pages/PostList/PostList.scss @@ -3,29 +3,30 @@ .postListContainer { display: flex; align-items: center; + justify-content: center; width: 100%; height: 80vh; + border: 1px solid #000; } .postListContentContainer { - max-width: 90%; + max-width: 100%; + max-height: 100%; width: 100%; height: calc(100% - 80px); display: flex; flex-direction: column; align-items: center; - justify-content: center; - gap: 24px; + justify-content: space-between; border: 1px solid blue; } .feedContainer { width: 90%; - height: 80%; + height: 85%; display: flex; flex-direction: column; - gap: 24px; .feedContentContainer { overflow-y: scroll; From 0654d2627db84b754dcfcfcca180d7fdbe97ac5d Mon Sep 17 00:00:00 2001 From: llinjae Date: Sat, 12 Aug 2023 15:28:33 +0900 Subject: [PATCH 05/30] =?UTF-8?q?Add=20:=20Mock=20Data=EB=A1=9C=20?= =?UTF-8?q?=EB=8F=99=EC=A0=81=EC=9D=B8=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/data.json | 26 +++++++++++++++++++++++++ src/pages/PostList/PostList.jsx | 21 ++++++++++++++++---- src/pages/PostList/PostList.scss | 2 -- src/pages/PostList/components/Feed.jsx | 13 ++++--------- src/pages/PostList/components/Feed.scss | 1 + 5 files changed, 48 insertions(+), 15 deletions(-) diff --git a/public/data/data.json b/public/data/data.json index e69de29..50aef2d 100644 --- a/public/data/data.json +++ b/public/data/data.json @@ -0,0 +1,26 @@ +[ + { + "id": 0, + "userImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", + "userName": "이인재", + "feedContent": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다." + }, + { + "id": 1, + "userImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "userName": "John", + "feedContent": "일라이자 효과는 컴퓨터 과학에서, 무의식적으로 컴퓨터의 행위를 인간의 행위와 유사한 것으로 추정하고 의인화하는 경향이다." + }, + { + "id": 2, + "userImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", + "userName": "Julia", + "feedContent": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기" + }, + { + "id": 3, + "userImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "userName": "pliossun", + "feedContent": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기" + } +] diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index cce9922..132239f 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -1,16 +1,29 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import './PostList.scss'; import Feed from './components/Feed'; const PostList = () => { + const [feedsData, setFeedsData] = useState([]); + + useEffect(() => { + fetch('/data/data.json', { + method: 'GET', + headers: { + 'Content-Type': 'application/json;charset=utf-8', + }, + }) + .then(res => res.json()) + .then(data => setFeedsData(data)); + }); + return (
- - - + {feedsData.map((feedData, index) => ( + + ))}
diff --git a/src/pages/PostList/PostList.scss b/src/pages/PostList/PostList.scss index 6a6ed1f..d95842a 100644 --- a/src/pages/PostList/PostList.scss +++ b/src/pages/PostList/PostList.scss @@ -6,7 +6,6 @@ justify-content: center; width: 100%; height: 80vh; - border: 1px solid #000; } .postListContentContainer { @@ -18,7 +17,6 @@ flex-direction: column; align-items: center; justify-content: space-between; - border: 1px solid blue; } .feedContainer { diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index c6ac64f..a3dc495 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -1,18 +1,18 @@ import React from 'react'; import './Feed.scss'; -const Feed = () => { +const Feed = ({ feedData }) => { return (
프로필 이미지

- 이인재 + {feedData.userName}

@@ -21,12 +21,7 @@ const Feed = () => {
-

- 일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 - 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 - 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 - ELIZA의 이름을 따서 명명되었다. -

+

{feedData.feedContent}

diff --git a/src/pages/PostList/components/Feed.scss b/src/pages/PostList/components/Feed.scss index 6b4b18d..fa25d2c 100644 --- a/src/pages/PostList/components/Feed.scss +++ b/src/pages/PostList/components/Feed.scss @@ -81,6 +81,7 @@ .feedHeartImg { width: 32px; height: 32px; + cursor: pointer; } } } From b967fc5ac76f94df0fc6e8c50bf25f465e70a0b1 Mon Sep 17 00:00:00 2001 From: llinjae Date: Sun, 13 Aug 2023 12:01:45 +0900 Subject: [PATCH 06/30] =?UTF-8?q?ADD=20:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 31 ------------------------- public/data/data.json | 4 ++++ public/images/fillheart.svg | 3 +++ src/pages/PostList/PostList.jsx | 26 +++++++++++++++++---- src/pages/PostList/PostList.scss | 1 + src/pages/PostList/components/Feed.jsx | 32 +++++++++++++++++++++----- src/style/common.scss | 3 +++ 7 files changed, 59 insertions(+), 41 deletions(-) delete mode 100644 README.md create mode 100644 public/images/fillheart.svg diff --git a/README.md b/README.md deleted file mode 100644 index 1b03ac4..0000000 --- a/README.md +++ /dev/null @@ -1,31 +0,0 @@ -48기 Frontend C팀 : 이인재 박동철 정다인 - - - -\*\*\* Git Commit message - -- Add : 레이아웃 / 기능 추가 -- Remove : 내용 삭제 (폴더 / 파일 삭제) -- Modify : 수정 (JSON 데이터 포맷 변경 / 버튼 색깔 변경 / 폰트 변경) -- Fix : 버그/오류 해결 -- Refactor : 코드 리팩토링 (멘토 리뷰 반영 / 스스로 리팩토링 / 중복 코드 제거 / 불필요 코드 제거 / 성능 개선) -- Docs : 문서에 관련된 수정작업(README.md 등) - -\*\*\* 브랜치명 - -- 첫 글자 대문자(파스칼) 그리고 UI 나 feature 표시 ex) UI/PostList, feature/PostList - -\*\*\* 파일 셋업 - -- 상태관리 : 소문자로 시작 + 카멜 -- 컴포넌트 / pages : 첫 글자 대문자(파스칼) -- 폴더명 / style파일명 : 소문자만 - -\*\*\* 코드 작성 ( 네이밍은 길어도 상관 없음 ) - -- 변수: 특정 의미를 갖도록 네이밍 -- 스타일: 특정 의미를 갖도록 네이밍 -- Route의 path: snake case로 ex) path='/post-list' - -👉🏻 변수, state : 소문자 카멜케이스 const myData = 10; -👉🏻 function : 소문자 카멜케이스 && arrow function const myFunc = () => {...} diff --git a/public/data/data.json b/public/data/data.json index 50aef2d..e1c1544 100644 --- a/public/data/data.json +++ b/public/data/data.json @@ -3,24 +3,28 @@ "id": 0, "userImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", "userName": "이인재", + "date": 1689087600000, "feedContent": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다." }, { "id": 1, "userImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", "userName": "John", + "date": 1686495600000, "feedContent": "일라이자 효과는 컴퓨터 과학에서, 무의식적으로 컴퓨터의 행위를 인간의 행위와 유사한 것으로 추정하고 의인화하는 경향이다." }, { "id": 2, "userImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", "userName": "Julia", + "date": 1691830007441, "feedContent": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기" }, { "id": 3, "userImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", "userName": "pliossun", + "date": 1676127600000, "feedContent": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기" } ] diff --git a/public/images/fillheart.svg b/public/images/fillheart.svg new file mode 100644 index 0000000..a5279f8 --- /dev/null +++ b/public/images/fillheart.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index 132239f..b098508 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -14,16 +14,34 @@ const PostList = () => { }) .then(res => res.json()) .then(data => setFeedsData(data)); - }); + }, []); + + const noListMessage = '게시글이 없습니다.'; + + const handleRemove = targetId => { + const newList = feedsData.filter(data => data.id !== targetId); + setFeedsData(newList); + if (newList.length === 0) return

게시글이 없습니다.

; + }; return (
- {feedsData.map((feedData, index) => ( - - ))} + {feedsData.length === 0 ? ( +

{noListMessage}

+ ) : ( + <> + {feedsData.map((feedData, index) => ( + + ))} + + )}
diff --git a/src/pages/PostList/PostList.scss b/src/pages/PostList/PostList.scss index d95842a..273d5a6 100644 --- a/src/pages/PostList/PostList.scss +++ b/src/pages/PostList/PostList.scss @@ -52,5 +52,6 @@ padding: 0px 34px; justify-content: center; align-items: center; + cursor: pointer; } } diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index a3dc495..e08cacd 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -1,7 +1,17 @@ -import React from 'react'; +import React, { useState } from 'react'; import './Feed.scss'; -const Feed = ({ feedData }) => { +const Feed = ({ feedData, handleRemove }) => { + const [heartToggle, setHeartToggle] = useState(false); + const [like, setLike] = useState(0); + + const feedDate = new Date(feedData.date).toLocaleDateString(); + + const handleHeartToggle = () => { + setHeartToggle(!heartToggle); + setLike(heartToggle ? like - 1 : like + 1); + }; + return (
@@ -16,8 +26,13 @@ const Feed = ({ feedData }) => {

-

00.00.00

- +

{feedDate}

+
@@ -25,12 +40,17 @@ const Feed = ({ feedData }) => {
-

좋아요 00

+

좋아요 {like}

댓글 00

좋아요 버튼
diff --git a/src/style/common.scss b/src/style/common.scss index 8fe1ab2..fa7a35d 100644 --- a/src/style/common.scss +++ b/src/style/common.scss @@ -16,6 +16,9 @@ html { body { width: 100%; height: 80vh; + border: 1px solid #e6e6e6; + border-radius: 16px; + background-color: white; } a { From c1f80e3708bdf3b68857e54553de376c65d1abeb Mon Sep 17 00:00:00 2001 From: llinjae Date: Sun, 13 Aug 2023 12:18:32 +0900 Subject: [PATCH 07/30] =?UTF-8?q?Refactor=20:=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/PostList.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index b098508..e121d18 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -21,7 +21,6 @@ const PostList = () => { const handleRemove = targetId => { const newList = feedsData.filter(data => data.id !== targetId); setFeedsData(newList); - if (newList.length === 0) return

게시글이 없습니다.

; }; return ( From 4e95ad97cfc42da20f9b442a98dddd2d6f73ea29 Mon Sep 17 00:00:00 2001 From: llinjae Date: Mon, 14 Aug 2023 02:23:01 +0900 Subject: [PATCH 08/30] =?UTF-8?q?Modify=20:=20Mock=20Data=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/data.json | 28 +++++++++++++++----------- src/pages/PostList/components/Feed.jsx | 6 +++--- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/public/data/data.json b/public/data/data.json index e1c1544..2ce9987 100644 --- a/public/data/data.json +++ b/public/data/data.json @@ -2,29 +2,33 @@ { "id": 0, "userImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", - "userName": "이인재", - "date": 1689087600000, - "feedContent": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다." + "nickname": "이인재", + "content": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다.", + "createdAt": 1689087600000, + "updatedAt": 11 }, { "id": 1, "userImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "userName": "John", - "date": 1686495600000, - "feedContent": "일라이자 효과는 컴퓨터 과학에서, 무의식적으로 컴퓨터의 행위를 인간의 행위와 유사한 것으로 추정하고 의인화하는 경향이다." + "nickname": "John", + "content": "일라이자 효과는 컴퓨터 과학에서, 무의식적으로 컴퓨터의 행위를 인간의 행위와 유사한 것으로 추정하고 의인화하는 경향이다.", + "createdAt": 1686495600000, + "updatedAt": 11 }, { "id": 2, "userImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", - "userName": "Julia", - "date": 1691830007441, - "feedContent": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기" + "nickname": "Julia", + "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", + "createdAt": 1691830007441, + "updatedAt": 11 }, { "id": 3, "userImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "userName": "pliossun", - "date": 1676127600000, - "feedContent": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기" + "nickname": "pliossun", + "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", + "createdAt": 1676127600000, + "updatedAt": 11 } ] diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index e08cacd..3622a5c 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -5,7 +5,7 @@ const Feed = ({ feedData, handleRemove }) => { const [heartToggle, setHeartToggle] = useState(false); const [like, setLike] = useState(0); - const feedDate = new Date(feedData.date).toLocaleDateString(); + const feedDate = new Date(feedData.createdAt).toLocaleDateString(); const handleHeartToggle = () => { setHeartToggle(!heartToggle); @@ -22,7 +22,7 @@ const Feed = ({ feedData, handleRemove }) => { alt="프로필 이미지" />

- {feedData.userName} + {feedData.nickname}

@@ -36,7 +36,7 @@ const Feed = ({ feedData, handleRemove }) => {
-

{feedData.feedContent}

+

{feedData.content}

From df2861a58018f0f39609f0064ac33f05da72bdb9 Mon Sep 17 00:00:00 2001 From: llinjae Date: Mon, 14 Aug 2023 02:33:51 +0900 Subject: [PATCH 09/30] =?UTF-8?q?Add=20:=20Feed=EC=9D=98=20=ED=94=84?= =?UTF-8?q?=EB=A1=9C=ED=95=84=20=EC=98=81=EC=97=AD=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=EB=82=B4=EC=9A=A9=20=EC=88=A8=EA=B8=B0=EA=B8=B0=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/Feed.jsx | 49 +++++++++++++++---------- src/pages/PostList/components/Feed.scss | 2 + 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 3622a5c..dcb204a 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -4,6 +4,7 @@ import './Feed.scss'; const Feed = ({ feedData, handleRemove }) => { const [heartToggle, setHeartToggle] = useState(false); const [like, setLike] = useState(0); + const [hideFeedContent, setHideFeedContent] = useState(true); const feedDate = new Date(feedData.createdAt).toLocaleDateString(); @@ -12,9 +13,13 @@ const Feed = ({ feedData, handleRemove }) => { setLike(heartToggle ? like - 1 : like + 1); }; + const handleHideFeedContent = () => { + setHideFeedContent(!hideFeedContent); + }; + return (
-
+
{
-
-

{feedData.content}

-
-
-
-

좋아요 {like}

-

댓글 00

-
- 좋아요 버튼 -
+ {hideFeedContent && ( + <> +
+

{feedData.content}

+
+
+
+

좋아요 {like}

+

댓글 00

+
+ 좋아요 버튼 +
+ + )}
); }; diff --git a/src/pages/PostList/components/Feed.scss b/src/pages/PostList/components/Feed.scss index fa25d2c..c7a5fbf 100644 --- a/src/pages/PostList/components/Feed.scss +++ b/src/pages/PostList/components/Feed.scss @@ -15,6 +15,8 @@ justify-content: space-between; width: 100%; height: 50px; + user-select: none; + cursor: pointer; .feedProfileBoxLeft { display: flex; From b8f7a4be3bfc6dffa0dd4e3157c8563cb0b55d5e Mon Sep 17 00:00:00 2001 From: llinjae Date: Mon, 14 Aug 2023 02:35:27 +0900 Subject: [PATCH 10/30] =?UTF-8?q?Modify=20:=20FeedContent=20=EC=88=A8?= =?UTF-8?q?=EA=B8=B4=20=EC=83=81=ED=83=9C=EA=B0=80=20=EC=B4=88=EA=B8=B0=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=EA=B0=80=20=EB=90=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/Feed.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index dcb204a..bc636c3 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -40,7 +40,7 @@ const Feed = ({ feedData, handleRemove }) => {
- {hideFeedContent && ( + {!hideFeedContent && ( <>

{feedData.content}

From 1a0dd15a323b36378df79138e16f8a0ed43b41c0 Mon Sep 17 00:00:00 2001 From: llinjae Date: Mon, 14 Aug 2023 09:29:12 +0900 Subject: [PATCH 11/30] =?UTF-8?q?Refactor=20:=20feed=20Content=20=EC=98=81?= =?UTF-8?q?=EC=97=AD=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/Feed.jsx | 28 +++++------------- src/pages/PostList/components/Feed.scss | 31 -------------------- src/pages/PostList/components/FeedItem.jsx | 30 +++++++++++++++++++ src/pages/PostList/components/FeedItem.scss | 32 +++++++++++++++++++++ 4 files changed, 69 insertions(+), 52 deletions(-) create mode 100644 src/pages/PostList/components/FeedItem.jsx create mode 100644 src/pages/PostList/components/FeedItem.scss diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index bc636c3..56a5403 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import './Feed.scss'; +import FeedItem from './FeedItem'; const Feed = ({ feedData, handleRemove }) => { const [heartToggle, setHeartToggle] = useState(false); @@ -41,27 +42,12 @@ const Feed = ({ feedData, handleRemove }) => {
{!hideFeedContent && ( - <> -
-

{feedData.content}

-
-
-
-

좋아요 {like}

-

댓글 00

-
- 좋아요 버튼 -
- + )}
); diff --git a/src/pages/PostList/components/Feed.scss b/src/pages/PostList/components/Feed.scss index c7a5fbf..6db5cbb 100644 --- a/src/pages/PostList/components/Feed.scss +++ b/src/pages/PostList/components/Feed.scss @@ -55,35 +55,4 @@ } } } - - .feedContentBox { - width: 100%; - height: auto; - - .feedContent { - font-size: 20px; - font-weight: 400; - line-height: 25px; - } - } - - .feedDescriptionBox { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; - height: 50px; - - .feedDescriptionTop { - display: flex; - gap: 10px; - color: $grey60; - } - - .feedHeartImg { - width: 32px; - height: 32px; - cursor: pointer; - } - } } diff --git a/src/pages/PostList/components/FeedItem.jsx b/src/pages/PostList/components/FeedItem.jsx new file mode 100644 index 0000000..c2d691c --- /dev/null +++ b/src/pages/PostList/components/FeedItem.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import './FeedItem.scss'; + +const FeedItem = ({ like, heartToggle, handleHeartToggle, feedData }) => { + return ( + <> +
+

{feedData.content}

+
+
+
+

좋아요 {like}

+

댓글 00

+
+ 좋아요 버튼 +
+ + ); +}; + +export default FeedItem; diff --git a/src/pages/PostList/components/FeedItem.scss b/src/pages/PostList/components/FeedItem.scss new file mode 100644 index 0000000..3929db9 --- /dev/null +++ b/src/pages/PostList/components/FeedItem.scss @@ -0,0 +1,32 @@ +@import '../../../style/variables.scss'; + +.feedContentBox { + width: 100%; + height: auto; + + .feedContent { + font-size: 20px; + font-weight: 400; + line-height: 25px; + } +} + +.feedDescriptionBox { + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; + height: 50px; + + .feedDescriptionTop { + display: flex; + gap: 10px; + color: $grey60; + } + + .feedHeartImg { + width: 32px; + height: 32px; + cursor: pointer; + } +} From b927f524c2be08f3111ef2ca8afd71cdf204b3eb Mon Sep 17 00:00:00 2001 From: llinjae Date: Mon, 14 Aug 2023 09:32:43 +0900 Subject: [PATCH 12/30] =?UTF-8?q?Modify=20:=20Feed=20Profile=20=EC=98=81?= =?UTF-8?q?=EC=97=AD=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/Feed.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/PostList/components/Feed.scss b/src/pages/PostList/components/Feed.scss index 6db5cbb..2219b16 100644 --- a/src/pages/PostList/components/Feed.scss +++ b/src/pages/PostList/components/Feed.scss @@ -3,7 +3,7 @@ .feed { width: 100%; height: auto; - padding: 0 8px 12px 8px; + padding: 12px 8px; border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: column; From 20e1abeae069dc7118e6f60955149c292984f1c0 Mon Sep 17 00:00:00 2001 From: llinjae Date: Mon, 14 Aug 2023 18:39:22 +0900 Subject: [PATCH 13/30] =?UTF-8?q?Add=20:=20Feed=20Detail=20UI=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/CommentItem.jsx | 44 +++++++++ .../PostList/components/CommentItem.scss | 89 +++++++++++++++++++ src/pages/PostList/components/Feed.jsx | 71 +++++++++------ src/pages/PostList/components/Feed.scss | 37 +++++++- src/pages/PostList/components/FeedItem.jsx | 30 ------- src/pages/PostList/components/FeedItem.scss | 32 ------- 6 files changed, 210 insertions(+), 93 deletions(-) create mode 100644 src/pages/PostList/components/CommentItem.jsx create mode 100644 src/pages/PostList/components/CommentItem.scss delete mode 100644 src/pages/PostList/components/FeedItem.jsx delete mode 100644 src/pages/PostList/components/FeedItem.scss diff --git a/src/pages/PostList/components/CommentItem.jsx b/src/pages/PostList/components/CommentItem.jsx new file mode 100644 index 0000000..efcee5c --- /dev/null +++ b/src/pages/PostList/components/CommentItem.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import './CommentItem.scss'; + +const CommentItem = ({ feedData, feedDate }) => { + return ( + <> +
+ + +
+ +
+
+ 프로필 이미지 +
+
+

+ {feedData.nickname} +

+
+

{feedDate}

+ + +
+
+

+ sdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjs +

+
+
+
+ + ); +}; + +export default CommentItem; diff --git a/src/pages/PostList/components/CommentItem.scss b/src/pages/PostList/components/CommentItem.scss new file mode 100644 index 0000000..9235314 --- /dev/null +++ b/src/pages/PostList/components/CommentItem.scss @@ -0,0 +1,89 @@ +@import '../../../style/variables.scss'; +.inputForm { + width: 100%; + display: grid; + grid-template-columns: 6fr 1fr; + gap: 8px; + height: 50px; + margin: 24px 0; + + .feedInput { + border: 1px solid #e6e6e6; + border-radius: 4px; + } + + .postBtn { + border: 1px solid $grey60; + background-color: #fff; + border-radius: 4px; + cursor: pointer; + } +} + +.commentContainer { + max-width: 100%; + width: 100%; + height: auto; + + .commentProfileBox { + display: flex; + justify-content: space-between; + gap: 24px; + padding: 0 8px; + margin-bottom: 24px; + height: auto; + + .commentProfileImg { + width: 32px; + height: 32px; + border-radius: 50%; + } + + .commentRightBox { + width: 100%; + display: flex; + flex-direction: column; + + .commentDetailUserInfo { + display: flex; + justify-content: space-between; + + .userName { + font-size: 16px; + } + } + + .userCommentBox { + width: 100%; + word-break: break-all; + } + } + + .commentProfileBoxRight { + display: flex; + align-items: center; + + .date { + color: $grey60; + font-weight: 400; + } + + .deleteBtn { + outline: none; + border: none; + background-color: transparent; + color: $red; + font-size: 14px; + cursor: pointer; + } + + .editBtn { + outline: none; + border: none; + background-color: transparent; + font-size: 14px; + cursor: pointer; + } + } + } +} diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 56a5403..c386456 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import './Feed.scss'; -import FeedItem from './FeedItem'; +import CommentItem from './CommentItem'; const Feed = ({ feedData, handleRemove }) => { const [heartToggle, setHeartToggle] = useState(false); @@ -19,37 +19,52 @@ const Feed = ({ feedData, handleRemove }) => { }; return ( -
-
-
+ <> +
+
+
+ 프로필 이미지 +

+ {feedData.nickname} +

+
+
+

{feedDate}

+ +
+
+
+

{feedData.content}

+
+
+
+

좋아요 {like}

+

댓글 00

+
프로필 이미지 -

- {feedData.nickname} -

-
-
-

{feedDate}

-
- {!hideFeedContent && ( - - )} -
+ + + ); }; diff --git a/src/pages/PostList/components/Feed.scss b/src/pages/PostList/components/Feed.scss index 2219b16..3d531cf 100644 --- a/src/pages/PostList/components/Feed.scss +++ b/src/pages/PostList/components/Feed.scss @@ -3,11 +3,13 @@ .feed { width: 100%; height: auto; - padding: 12px 8px; + padding: 12px 8px 24px 8px; border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: column; gap: 10px; + cursor: pointer; + user-select: none; .feedProfileBox { display: flex; @@ -15,8 +17,6 @@ justify-content: space-between; width: 100%; height: 50px; - user-select: none; - cursor: pointer; .feedProfileBoxLeft { display: flex; @@ -55,4 +55,35 @@ } } } + + .feedContentBox { + width: 100%; + height: auto; + + .feedContent { + font-size: 20px; + font-weight: 400; + line-height: 25px; + } + } + + .feedDescriptionBox { + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; + height: 50px; + + .feedDescriptionTop { + display: flex; + gap: 10px; + color: $grey60; + } + + .feedHeartImg { + width: 32px; + height: 32px; + cursor: pointer; + } + } } diff --git a/src/pages/PostList/components/FeedItem.jsx b/src/pages/PostList/components/FeedItem.jsx deleted file mode 100644 index c2d691c..0000000 --- a/src/pages/PostList/components/FeedItem.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import './FeedItem.scss'; - -const FeedItem = ({ like, heartToggle, handleHeartToggle, feedData }) => { - return ( - <> -
-

{feedData.content}

-
-
-
-

좋아요 {like}

-

댓글 00

-
- 좋아요 버튼 -
- - ); -}; - -export default FeedItem; diff --git a/src/pages/PostList/components/FeedItem.scss b/src/pages/PostList/components/FeedItem.scss deleted file mode 100644 index 3929db9..0000000 --- a/src/pages/PostList/components/FeedItem.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import '../../../style/variables.scss'; - -.feedContentBox { - width: 100%; - height: auto; - - .feedContent { - font-size: 20px; - font-weight: 400; - line-height: 25px; - } -} - -.feedDescriptionBox { - display: flex; - flex-direction: column; - gap: 8px; - width: 100%; - height: 50px; - - .feedDescriptionTop { - display: flex; - gap: 10px; - color: $grey60; - } - - .feedHeartImg { - width: 32px; - height: 32px; - cursor: pointer; - } -} From d2197b9db81bca794d7d002fb87fb53128e15ab3 Mon Sep 17 00:00:00 2001 From: llinjae Date: Mon, 14 Aug 2023 18:40:35 +0900 Subject: [PATCH 14/30] =?UTF-8?q?Add=20:=20Feed=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=EC=8B=9C=20=EB=8C=93=EA=B8=80=EC=B0=BD(detail)=20=EB=82=98?= =?UTF-8?q?=EC=98=A4=EB=8F=84=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/Feed.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index c386456..95a5da3 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -62,8 +62,9 @@ const Feed = ({ feedData, handleRemove }) => { />
- - + {!hideFeedContent && ( + + )} ); }; From 9598a5123e941cf6a16e81a10e79cfdb1ed20c54 Mon Sep 17 00:00:00 2001 From: llinjae Date: Tue, 15 Aug 2023 01:24:29 +0900 Subject: [PATCH 15/30] =?UTF-8?q?Modify=20:=20=EB=8C=93=EA=B8=80=20UI=20st?= =?UTF-8?q?yle=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/CommentItem.jsx | 2 +- src/pages/PostList/components/CommentItem.scss | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/PostList/components/CommentItem.jsx b/src/pages/PostList/components/CommentItem.jsx index efcee5c..cbc1dcf 100644 --- a/src/pages/PostList/components/CommentItem.jsx +++ b/src/pages/PostList/components/CommentItem.jsx @@ -32,7 +32,7 @@ const CommentItem = ({ feedData, feedDate }) => {

- sdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjssdafasddsafasdfasdfsafasfasdfjs + sdafasdfdsafadasfsdafasdfdsafadasfsdafasdfdsafadasfsdafasdfdsafadasfsdafasdfdsafadasfsdafasdfdsafadasf

diff --git a/src/pages/PostList/components/CommentItem.scss b/src/pages/PostList/components/CommentItem.scss index 9235314..cc1b183 100644 --- a/src/pages/PostList/components/CommentItem.scss +++ b/src/pages/PostList/components/CommentItem.scss @@ -43,9 +43,11 @@ width: 100%; display: flex; flex-direction: column; + gap: 10px; .commentDetailUserInfo { display: flex; + align-items: center; justify-content: space-between; .userName { From 08d2429bf9298eadee99e994fa3851ae0375643a Mon Sep 17 00:00:00 2001 From: llinjae Date: Tue, 15 Aug 2023 09:15:46 +0900 Subject: [PATCH 16/30] =?UTF-8?q?Refactor=20:=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=B0=8F=20=ED=95=98=ED=8A=B8=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20=ED=86=A0=EA=B8=80=EB=90=98=EB=8A=94=20?= =?UTF-8?q?=EA=B2=83=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/PostList.jsx | 4 ++-- src/pages/PostList/components/Feed.jsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index e121d18..6a8cd2b 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -32,9 +32,9 @@ const PostList = () => {

{noListMessage}

) : ( <> - {feedsData.map((feedData, index) => ( + {feedsData.map(feedData => ( diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 95a5da3..279b90f 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -9,7 +9,8 @@ const Feed = ({ feedData, handleRemove }) => { const feedDate = new Date(feedData.createdAt).toLocaleDateString(); - const handleHeartToggle = () => { + const handleHeartToggle = e => { + e.stopPropagation(); setHeartToggle(!heartToggle); setLike(heartToggle ? like - 1 : like + 1); }; From 36dd1a90d827977a80f7afba13f76e1b2d98e52d Mon Sep 17 00:00:00 2001 From: llinjae Date: Tue, 15 Aug 2023 15:11:38 +0900 Subject: [PATCH 17/30] =?UTF-8?q?Refactor=20:=20Mentor=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 ++ src/pages/PostList/PostList.jsx | 38 +++++------- src/pages/PostList/PostList.scss | 61 ++++++++----------- .../PostList/components/CommentItem.scss | 3 +- src/pages/PostList/components/Feed.jsx | 22 ++++--- src/pages/PostList/components/Feed.scss | 2 +- 6 files changed, 61 insertions(+), 70 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..35c9fbf --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +48기 Frontend C팀 + +이인재 박동철 정다인 + +화이팅 diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index 6a8cd2b..a04e0b1 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; -import './PostList.scss'; import Feed from './components/Feed'; +import './PostList.scss'; const PostList = () => { const [feedsData, setFeedsData] = useState([]); @@ -25,27 +25,21 @@ const PostList = () => { return (
-
-
-
- {feedsData.length === 0 ? ( -

{noListMessage}

- ) : ( - <> - {feedsData.map(feedData => ( - - ))} - - )} -
-
-
- -
+
+ {feedsData.length === 0 ? ( +

{noListMessage}

+ ) : ( + feedsData.map(feedData => ( + + )) + )} +
+
+
); diff --git a/src/pages/PostList/PostList.scss b/src/pages/PostList/PostList.scss index 273d5a6..9e7c0f7 100644 --- a/src/pages/PostList/PostList.scss +++ b/src/pages/PostList/PostList.scss @@ -1,57 +1,46 @@ @import '../../style/variables.scss'; .postListContainer { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 80vh; -} - -.postListContentContainer { max-width: 100%; max-height: 100%; width: 100%; - height: calc(100% - 80px); + height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; -} + padding: 24px 0; -.feedContainer { - width: 90%; - height: 85%; + .feedContainer { + width: 90%; + height: 85%; - display: flex; - flex-direction: column; - - .feedContentContainer { + display: flex; + flex-direction: column; overflow-y: scroll; &::-webkit-scrollbar { display: none; } } -} -.btnBox { - width: 90%; - height: 56px; - display: flex; - justify-content: end; - - .btn { - border: none; - border-radius: 6px; - background-color: $blue; - color: white; - font-weight: 800; - font-size: 16px; - width: 120px; - padding: 0px 34px; - justify-content: center; - align-items: center; - cursor: pointer; + .btnBox { + width: 90%; + height: 56px; + display: flex; + justify-content: end; + + .btn { + border: none; + border-radius: 6px; + background-color: $blue; + color: white; + font-weight: 800; + font-size: 16px; + padding: 0px 34px; + justify-content: center; + align-items: center; + cursor: pointer; + } } } diff --git a/src/pages/PostList/components/CommentItem.scss b/src/pages/PostList/components/CommentItem.scss index cc1b183..684f617 100644 --- a/src/pages/PostList/components/CommentItem.scss +++ b/src/pages/PostList/components/CommentItem.scss @@ -4,12 +4,13 @@ display: grid; grid-template-columns: 6fr 1fr; gap: 8px; - height: 50px; margin: 24px 0; + height: 50px; .feedInput { border: 1px solid #e6e6e6; border-radius: 4px; + height: 50px; } .postBtn { diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 279b90f..a3673fc 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -1,22 +1,24 @@ import React, { useState } from 'react'; -import './Feed.scss'; import CommentItem from './CommentItem'; +import './Feed.scss'; const Feed = ({ feedData, handleRemove }) => { - const [heartToggle, setHeartToggle] = useState(false); - const [like, setLike] = useState(0); - const [hideFeedContent, setHideFeedContent] = useState(true); + const [isHeartButtonToggle, setIsHeartButtonToggle] = useState(false); + const [feedLikeCount, setFeedLikeCount] = useState(0); + const [isHideFeedContent, setIsHideFeedContent] = useState(true); const feedDate = new Date(feedData.createdAt).toLocaleDateString(); const handleHeartToggle = e => { e.stopPropagation(); - setHeartToggle(!heartToggle); - setLike(heartToggle ? like - 1 : like + 1); + setIsHeartButtonToggle(!isHeartButtonToggle); + setFeedLikeCount( + isHeartButtonToggle ? feedLikeCount - 1 : feedLikeCount + 1, + ); }; const handleHideFeedContent = () => { - setHideFeedContent(!hideFeedContent); + setIsHideFeedContent(!isHideFeedContent); }; return ( @@ -48,14 +50,14 @@ const Feed = ({ feedData, handleRemove }) => {
-

좋아요 {like}

+

좋아요 {feedLikeCount}

댓글 00

{ />
- {!hideFeedContent && ( + {!isHideFeedContent && ( )} diff --git a/src/pages/PostList/components/Feed.scss b/src/pages/PostList/components/Feed.scss index 3d531cf..6c8fde3 100644 --- a/src/pages/PostList/components/Feed.scss +++ b/src/pages/PostList/components/Feed.scss @@ -3,7 +3,7 @@ .feed { width: 100%; height: auto; - padding: 12px 8px 24px 8px; + padding: 12px 8px 24px; border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: column; From c726390682fa41e37bdd0cfe11b8a25bb72eb913 Mon Sep 17 00:00:00 2001 From: llinjae Date: Tue, 15 Aug 2023 18:22:48 +0900 Subject: [PATCH 18/30] =?UTF-8?q?ADD=20:=20=EB=8C=93=EA=B8=80=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/CommentItem.jsx | 60 ++++++++++++------- src/pages/PostList/components/Feed.jsx | 2 +- 2 files changed, 39 insertions(+), 23 deletions(-) diff --git a/src/pages/PostList/components/CommentItem.jsx b/src/pages/PostList/components/CommentItem.jsx index cbc1dcf..50ac360 100644 --- a/src/pages/PostList/components/CommentItem.jsx +++ b/src/pages/PostList/components/CommentItem.jsx @@ -1,42 +1,58 @@ -import React from 'react'; +import React, { useState } from 'react'; import './CommentItem.scss'; const CommentItem = ({ feedData, feedDate }) => { + const [feedComment, setFeedComment] = useState(''); + const [feedCommentList, setFeedCommentList] = useState([]); + + const onCommentChange = e => { + setFeedComment(e.target.value); + }; + + const handleWriteComment = e => { + e.preventDefault(); + if (feedComment === '') return; + setFeedComment(''); + setFeedCommentList(cur => [feedComment, ...cur]); + }; + return ( <> -
+
-
-
- 프로필 이미지 -
-
-

- {feedData.nickname} -

-
-

{feedDate}

- - + {feedCommentList.map((elements, index) => ( +
+
+ 프로필 이미지 +
+
+

+ {feedData.nickname} +

+
+

{feedDate}

+ + +
+

{elements}

-

- sdafasdfdsafadasfsdafasdfdsafadasfsdafasdfdsafadasfsdafasdfdsafadasfsdafasdfdsafadasfsdafasdfdsafadasf -

-
+ ))} ); }; diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index a3673fc..1969e6c 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -3,8 +3,8 @@ import CommentItem from './CommentItem'; import './Feed.scss'; const Feed = ({ feedData, handleRemove }) => { - const [isHeartButtonToggle, setIsHeartButtonToggle] = useState(false); const [feedLikeCount, setFeedLikeCount] = useState(0); + const [isHeartButtonToggle, setIsHeartButtonToggle] = useState(false); const [isHideFeedContent, setIsHideFeedContent] = useState(true); const feedDate = new Date(feedData.createdAt).toLocaleDateString(); From 158a86a0216a43c162d34049d07b4b5f2a09532a Mon Sep 17 00:00:00 2001 From: llinjae Date: Wed, 16 Aug 2023 09:43:23 +0900 Subject: [PATCH 19/30] =?UTF-8?q?ADD=20:=20=EB=8C=93=EA=B8=80=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84=20=EC=99=84?= =?UTF-8?q?=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/CommentItem.jsx | 20 +++++++++++++++++-- .../PostList/components/CommentItem.scss | 4 ++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/pages/PostList/components/CommentItem.jsx b/src/pages/PostList/components/CommentItem.jsx index 50ac360..99d4ff2 100644 --- a/src/pages/PostList/components/CommentItem.jsx +++ b/src/pages/PostList/components/CommentItem.jsx @@ -16,6 +16,15 @@ const CommentItem = ({ feedData, feedDate }) => { setFeedCommentList(cur => [feedComment, ...cur]); }; + const handleDeleteComment = targetId => { + const newComment = feedCommentList + .slice(0, targetId) + .concat(feedCommentList.slice(targetId + 1)); + setFeedCommentList(newComment); + }; + + const handleEditCOmment = () => {}; + return ( <>
@@ -44,8 +53,15 @@ const CommentItem = ({ feedData, feedDate }) => {

{feedDate}

- - + +

{elements}

diff --git a/src/pages/PostList/components/CommentItem.scss b/src/pages/PostList/components/CommentItem.scss index 684f617..ae0c8e9 100644 --- a/src/pages/PostList/components/CommentItem.scss +++ b/src/pages/PostList/components/CommentItem.scss @@ -1,4 +1,5 @@ @import '../../../style/variables.scss'; + .inputForm { width: 100%; display: grid; @@ -11,6 +12,9 @@ border: 1px solid #e6e6e6; border-radius: 4px; height: 50px; + + &:focus { + } } .postBtn { From 7f79db394f3b77c70c3041ea45941ad0bc05922b Mon Sep 17 00:00:00 2001 From: llinjae Date: Wed, 16 Aug 2023 15:07:43 +0900 Subject: [PATCH 20/30] =?UTF-8?q?ADD=20:=20localStorage=EB=A1=9C=20?= =?UTF-8?q?=EC=A2=8B=EC=95=84=EC=9A=94=20state=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/Feed.jsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 1969e6c..0532564 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import CommentItem from './CommentItem'; import './Feed.scss'; @@ -9,9 +9,18 @@ const Feed = ({ feedData, handleRemove }) => { const feedDate = new Date(feedData.createdAt).toLocaleDateString(); + useEffect(() => { + const heartData = localStorage.getItem('heart'); + if (heartData !== null) setIsHeartButtonToggle(JSON.parse(heartData)); + }, []); + + useEffect(() => { + localStorage.setItem('heart', JSON.stringify(isHeartButtonToggle)); + }, [isHeartButtonToggle]); + const handleHeartToggle = e => { e.stopPropagation(); - setIsHeartButtonToggle(!isHeartButtonToggle); + setIsHeartButtonToggle(prev => !prev); setFeedLikeCount( isHeartButtonToggle ? feedLikeCount - 1 : feedLikeCount + 1, ); @@ -65,7 +74,7 @@ const Feed = ({ feedData, handleRemove }) => { />
- {!isHideFeedContent && ( + {isHideFeedContent && ( )} From 9b1189dd2de96302660d2dcb05176766f3f2a64b Mon Sep 17 00:00:00 2001 From: llinjae Date: Wed, 16 Aug 2023 15:49:16 +0900 Subject: [PATCH 21/30] =?UTF-8?q?Refactor=20:=20Button,=20Input=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=AC=EC=82=AC?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/data.json | 24 +++++++++---------- src/components/Button.jsx | 8 +++++-- src/components/Input.jsx | 16 +++++++++++++ src/pages/PostList/PostList.jsx | 3 ++- src/pages/PostList/components/CommentItem.jsx | 16 ++++++------- .../PostList/components/CommentItem.scss | 3 --- src/pages/PostList/components/Feed.jsx | 4 ++-- 7 files changed, 45 insertions(+), 29 deletions(-) create mode 100644 src/components/Input.jsx diff --git a/public/data/data.json b/public/data/data.json index 2ce9987..1835fcc 100644 --- a/public/data/data.json +++ b/public/data/data.json @@ -1,34 +1,34 @@ [ { "id": 0, - "userImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", + "profile_image": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", "nickname": "이인재", "content": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다.", - "createdAt": 1689087600000, - "updatedAt": 11 + "created_at": 1689087600000, + "updated_at": 11 }, { "id": 1, - "userImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "profile_image": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", "nickname": "John", "content": "일라이자 효과는 컴퓨터 과학에서, 무의식적으로 컴퓨터의 행위를 인간의 행위와 유사한 것으로 추정하고 의인화하는 경향이다.", - "createdAt": 1686495600000, - "updatedAt": 11 + "created_at": 1686495600000, + "updated_at": 11 }, { "id": 2, - "userImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", + "profile_image": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", "nickname": "Julia", "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", - "createdAt": 1691830007441, - "updatedAt": 11 + "created_at": 1691830007441, + "updated_at": 11 }, { "id": 3, - "userImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "profile_image": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", "nickname": "pliossun", "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", - "createdAt": 1676127600000, - "updatedAt": 11 + "created_at": 1676127600000, + "updated_at": 11 } ] diff --git a/src/components/Button.jsx b/src/components/Button.jsx index eda2d6e..d4ad012 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -1,7 +1,11 @@ import React from 'react'; -const Button = () => { - return
Button
; +const Button = ({ text, onClick, className, disabled }) => { + return ( + + ); }; export default Button; diff --git a/src/components/Input.jsx b/src/components/Input.jsx new file mode 100644 index 0000000..056878f --- /dev/null +++ b/src/components/Input.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +const Input = ({ placeholder, name, value, onChange, type, className }) => { + return ( + + ); +}; + +export default Input; diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index a04e0b1..d4a0fb2 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react'; +import Button from '../../components/Button'; import Feed from './components/Feed'; import './PostList.scss'; @@ -39,7 +40,7 @@ const PostList = () => { )}
- +
); diff --git a/src/pages/PostList/components/CommentItem.jsx b/src/pages/PostList/components/CommentItem.jsx index 99d4ff2..cd7f5a4 100644 --- a/src/pages/PostList/components/CommentItem.jsx +++ b/src/pages/PostList/components/CommentItem.jsx @@ -1,4 +1,6 @@ import React, { useState } from 'react'; +import Input from '../../../components/Input'; +import Button from '../../../components/Button'; import './CommentItem.scss'; const CommentItem = ({ feedData, feedDate }) => { @@ -23,19 +25,17 @@ const CommentItem = ({ feedData, feedDate }) => { setFeedCommentList(newComment); }; - const handleEditCOmment = () => {}; - return ( <> - - + - +

{elements}

diff --git a/src/pages/PostList/components/CommentItem.scss b/src/pages/PostList/components/CommentItem.scss index ae0c8e9..cdc3f7d 100644 --- a/src/pages/PostList/components/CommentItem.scss +++ b/src/pages/PostList/components/CommentItem.scss @@ -12,9 +12,6 @@ border: 1px solid #e6e6e6; border-radius: 4px; height: 50px; - - &:focus { - } } .postBtn { diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 0532564..a4a3f4c 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -7,7 +7,7 @@ const Feed = ({ feedData, handleRemove }) => { const [isHeartButtonToggle, setIsHeartButtonToggle] = useState(false); const [isHideFeedContent, setIsHideFeedContent] = useState(true); - const feedDate = new Date(feedData.createdAt).toLocaleDateString(); + const feedDate = new Date(feedData.created_at).toLocaleDateString(); useEffect(() => { const heartData = localStorage.getItem('heart'); @@ -37,7 +37,7 @@ const Feed = ({ feedData, handleRemove }) => {
프로필 이미지

From 223d6f2bdf931b39fce2a17edfabf5de78132070 Mon Sep 17 00:00:00 2001 From: llinjae Date: Wed, 16 Aug 2023 16:20:25 +0900 Subject: [PATCH 22/30] =?UTF-8?q?Refactor=20:=20=EC=A2=8B=EC=95=84?= =?UTF-8?q?=EC=9A=94=20=EC=88=98=EA=B0=80=200=EB=B0=91=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EB=82=B4=EB=A0=A4=EA=B0=80=EB=8A=94=20=EA=B2=83=20=EB=B0=A9?= =?UTF-8?q?=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/Feed.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index a4a3f4c..c656642 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -20,10 +20,14 @@ const Feed = ({ feedData, handleRemove }) => { const handleHeartToggle = e => { e.stopPropagation(); - setIsHeartButtonToggle(prev => !prev); - setFeedLikeCount( - isHeartButtonToggle ? feedLikeCount - 1 : feedLikeCount + 1, - ); + + if (!isHeartButtonToggle) { + setFeedLikeCount(feedLikeCount + 1); + setIsHeartButtonToggle(true); + } else if (feedLikeCount > 0) { + setFeedLikeCount(feedLikeCount - 1); + setIsHeartButtonToggle(false); + } }; const handleHideFeedContent = () => { From da2c16d1dd7cbf0bd710e5790dd48ad9fb1ef30f Mon Sep 17 00:00:00 2001 From: llinjae Date: Wed, 16 Aug 2023 16:36:07 +0900 Subject: [PATCH 23/30] =?UTF-8?q?Add=20:=20=EA=B8=80=EC=93=B0=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=EA=B8=80=20=EC=9E=91=EC=84=B1=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/data.json | 8 ++++---- src/pages/PostList/PostList.jsx | 8 +++++++- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/public/data/data.json b/public/data/data.json index 1835fcc..89e5599 100644 --- a/public/data/data.json +++ b/public/data/data.json @@ -4,7 +4,7 @@ "profile_image": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", "nickname": "이인재", "content": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다.", - "created_at": 1689087600000, + "created_at": "Sun May 11 2023 15:47:29 GMT+0900", "updated_at": 11 }, { @@ -12,7 +12,7 @@ "profile_image": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", "nickname": "John", "content": "일라이자 효과는 컴퓨터 과학에서, 무의식적으로 컴퓨터의 행위를 인간의 행위와 유사한 것으로 추정하고 의인화하는 경향이다.", - "created_at": 1686495600000, + "created_at": "Sun May 22 2023 15:47:29 GMT+0900", "updated_at": 11 }, { @@ -20,7 +20,7 @@ "profile_image": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", "nickname": "Julia", "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", - "created_at": 1691830007441, + "created_at": "Sun June 24 2023 15:47:29 GMT+0900", "updated_at": 11 }, { @@ -28,7 +28,7 @@ "profile_image": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", "nickname": "pliossun", "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", - "created_at": 1676127600000, + "created_at": "Sun June 30 2023 15:47:29 GMT+0900", "updated_at": 11 } ] diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index d4a0fb2..bb86adc 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -1,10 +1,12 @@ import React, { useEffect, useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import Button from '../../components/Button'; import Feed from './components/Feed'; import './PostList.scss'; const PostList = () => { const [feedsData, setFeedsData] = useState([]); + const navigate = useNavigate(); useEffect(() => { fetch('/data/data.json', { @@ -24,6 +26,10 @@ const PostList = () => { setFeedsData(newList); }; + const goToCreatePost = () => { + navigate('/create-post'); + }; + return (

@@ -40,7 +46,7 @@ const PostList = () => { )}
-
); From f54f2a088702c483e5d868424a842dbd0f2fcacc Mon Sep 17 00:00:00 2001 From: llinjae Date: Thu, 17 Aug 2023 01:27:38 +0900 Subject: [PATCH 24/30] =?UTF-8?q?Refactor=20:=20FormatDate=20utils=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=EC=97=90=20=EB=94=B0=EB=A1=9C=20=EB=B3=B4?= =?UTF-8?q?=EA=B4=80=ED=95=98=EC=97=AC=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/data.json | 112 ++++++++++++++---- src/pages/PostList/PostList.jsx | 21 +++- src/pages/PostList/components/CommentItem.jsx | 28 +++-- src/pages/PostList/components/Feed.jsx | 42 +++---- src/utils/formatDate.js | 6 + 5 files changed, 149 insertions(+), 60 deletions(-) create mode 100644 src/utils/formatDate.js diff --git a/public/data/data.json b/public/data/data.json index 89e5599..bd2b6eb 100644 --- a/public/data/data.json +++ b/public/data/data.json @@ -1,34 +1,106 @@ [ { - "id": 0, - "profile_image": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", - "nickname": "이인재", + "userId": 0, "content": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다.", - "created_at": "Sun May 11 2023 15:47:29 GMT+0900", - "updated_at": 11 + "profileImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", + "nickname": "이인재", + "comments": [ + { + "threadId": 0, + "profileImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", + "nickname": "John", + "content": "코딩 안 해!", + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" + }, + { + "threadId": 1, + "profileImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", + "nickname": "pliossun", + "content": "코딩 노잼!", + "createdAt": "2023-08-17 00:14:22", + "updatedAt": "2023-08-17 00:14:22" + } + ], + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" }, { - "id": 1, - "profile_image": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "nickname": "John", + "userId": 1, "content": "일라이자 효과는 컴퓨터 과학에서, 무의식적으로 컴퓨터의 행위를 인간의 행위와 유사한 것으로 추정하고 의인화하는 경향이다.", - "created_at": "Sun May 22 2023 15:47:29 GMT+0900", - "updated_at": 11 + "profileImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "nickname": "John", + "comments": [ + { + "threadId": 0, + "profileImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "nickname": "이인재", + "content": "코딩 안 해!", + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" + }, + { + "threadId": 1, + "nickname": "John", + "content": "코딩 노잼!", + "profileImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "createdAt": "2023-08-17 00:14:22", + "updatedAt": "2023-08-17 00:14:22" + } + ], + "createdAt": "Sun May 22 2023 15:47:29 GMT+0900", + "updatedAt": "2023-08-17 00:14:22" }, { - "id": 2, - "profile_image": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", - "nickname": "Julia", + "userId": 2, "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", - "created_at": "Sun June 24 2023 15:47:29 GMT+0900", - "updated_at": 11 + "profileImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", + "nickname": "Julia", + "comments": [ + { + "threadId": 0, + "profileImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", + "nickname": "이인재", + "content": "코딩 안 해!", + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" + }, + { + "threadId": 1, + "profileImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", + "nickname": "John", + "content": "코딩 노잼!", + "createdAt": "2023-08-17 00:14:22", + "updatedAt": "2023-08-17 00:14:22" + } + ], + "createdAt": "Sun June 24 2023 15:47:29 GMT+0900", + "updatedAt": "2023-08-17 00:14:22" }, { - "id": 3, - "profile_image": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "nickname": "pliossun", + "userId": 3, "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", - "created_at": "Sun June 30 2023 15:47:29 GMT+0900", - "updated_at": 11 + "profileImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "nickname": "pliossun", + "comments": [ + { + "threadId": 0, + "profileImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "nickname": "이인재", + "content": "코딩 안 해!", + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" + }, + { + "threadId": 1, + "profileImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "nickname": "John", + "content": "코딩 노잼!", + "createdAt": "2023-08-17 00:14:22", + "updatedAt": "2023-08-17 00:14:22" + } + ], + "createdAt": "Sun June 30 2023 15:47:29 GMT+0900", + "updatedAt": "2023-08-19 00:14:22" } ] diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index bb86adc..870ca88 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -22,8 +22,21 @@ const PostList = () => { const noListMessage = '게시글이 없습니다.'; const handleRemove = targetId => { - const newList = feedsData.filter(data => data.id !== targetId); - setFeedsData(newList); + // fetch('주소', { + // method: 'DELETE', + // }) + // .then(res => { + // if (!res.ok) { + // throw new Error('삭제 못해요'); + // } + // return res.json(); + // }) + // .then(data => { + // if (!data) alert('삭제를 실패했습니다.'); + // if (data.message === 'ok') { + // setFeedsData(feedsData.filter(data => data.userId !== targetId)); + // } + // }); }; const goToCreatePost = () => { @@ -33,12 +46,12 @@ const PostList = () => { return (
- {feedsData.length === 0 ? ( + {!feedsData ? (

{noListMessage}

) : ( feedsData.map(feedData => ( diff --git a/src/pages/PostList/components/CommentItem.jsx b/src/pages/PostList/components/CommentItem.jsx index cd7f5a4..241eaa2 100644 --- a/src/pages/PostList/components/CommentItem.jsx +++ b/src/pages/PostList/components/CommentItem.jsx @@ -1,6 +1,4 @@ import React, { useState } from 'react'; -import Input from '../../../components/Input'; -import Button from '../../../components/Button'; import './CommentItem.scss'; const CommentItem = ({ feedData, feedDate }) => { @@ -15,6 +13,22 @@ const CommentItem = ({ feedData, feedDate }) => { e.preventDefault(); if (feedComment === '') return; setFeedComment(''); + + fetch('주소', { + method: 'POST', + headers: { + 'Content-Type': 'application/json;charset=utf-8', + }, + }) + .then(res => res.json()) + .then(data => { + const res = data.map(d => ({ + ...d, + body: d.comments, + })); + setFeedComment(res); + }); + setFeedCommentList(cur => [feedComment, ...cur]); }; @@ -28,22 +42,21 @@ const CommentItem = ({ feedData, feedDate }) => { return ( <>
- -
- {feedCommentList.map((elements, index) => (
프로필 이미지
@@ -70,5 +83,4 @@ const CommentItem = ({ feedData, feedDate }) => { ); }; - export default CommentItem; diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index c656642..7667d58 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -1,28 +1,18 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; +import { formatDate } from '../../../utils/formatDate'; import CommentItem from './CommentItem'; import './Feed.scss'; const Feed = ({ feedData, handleRemove }) => { const [feedLikeCount, setFeedLikeCount] = useState(0); const [isHeartButtonToggle, setIsHeartButtonToggle] = useState(false); - const [isHideFeedContent, setIsHideFeedContent] = useState(true); - - const feedDate = new Date(feedData.created_at).toLocaleDateString(); - - useEffect(() => { - const heartData = localStorage.getItem('heart'); - if (heartData !== null) setIsHeartButtonToggle(JSON.parse(heartData)); - }, []); - - useEffect(() => { - localStorage.setItem('heart', JSON.stringify(isHeartButtonToggle)); - }, [isHeartButtonToggle]); + const [isShowFeedContent, setIsShowFeedContent] = useState(false); const handleHeartToggle = e => { e.stopPropagation(); if (!isHeartButtonToggle) { - setFeedLikeCount(feedLikeCount + 1); + setFeedLikeCount(prev => prev + 1); setIsHeartButtonToggle(true); } else if (feedLikeCount > 0) { setFeedLikeCount(feedLikeCount - 1); @@ -30,18 +20,18 @@ const Feed = ({ feedData, handleRemove }) => { } }; - const handleHideFeedContent = () => { - setIsHideFeedContent(!isHideFeedContent); + const handleShowFeedContent = () => { + setIsShowFeedContent(!isShowFeedContent); }; return ( <> -
+
프로필 이미지

@@ -49,10 +39,10 @@ const Feed = ({ feedData, handleRemove }) => {

-

{feedDate}

+

{formatDate(feedData)}

@@ -64,22 +54,18 @@ const Feed = ({ feedData, handleRemove }) => {

좋아요 {feedLikeCount}

-

댓글 00

+

댓글 {feedData.comments.length}

좋아요 버튼
- {isHideFeedContent && ( - + {isShowFeedContent && ( + )} ); diff --git a/src/utils/formatDate.js b/src/utils/formatDate.js new file mode 100644 index 0000000..4835696 --- /dev/null +++ b/src/utils/formatDate.js @@ -0,0 +1,6 @@ +export const formatDate = feed => { + const feedDate = new Date(feed.createdAt).toLocaleDateString().split(''); + feedDate.pop(); + const formattedFeedDate = feedDate.join('').replaceAll('.', '-'); + return formattedFeedDate; +}; From 45b0a62d0a5da896578260ef99386cf701cb5dd2 Mon Sep 17 00:00:00 2001 From: llinjae Date: Thu, 17 Aug 2023 01:54:07 +0900 Subject: [PATCH 25/30] =?UTF-8?q?Modify=20:=20Mock=20Data=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/data.json | 226 ++++++++++-------- src/pages/PostList/PostList.jsx | 4 +- src/pages/PostList/components/CommentItem.jsx | 9 +- src/pages/PostList/components/Feed.jsx | 10 +- src/utils/{formatDate.js => FormatDate.js} | 2 +- 5 files changed, 131 insertions(+), 120 deletions(-) rename src/utils/{formatDate.js => FormatDate.js} (84%) diff --git a/public/data/data.json b/public/data/data.json index bd2b6eb..80fcc6b 100644 --- a/public/data/data.json +++ b/public/data/data.json @@ -1,106 +1,120 @@ -[ - { - "userId": 0, - "content": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다.", - "profileImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", - "nickname": "이인재", - "comments": [ - { - "threadId": 0, - "profileImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", - "nickname": "John", - "content": "코딩 안 해!", - "createdAt": "2023-08-16 00:14:22", - "updatedAt": "2023-08-16 00:14:22" - }, - { - "threadId": 1, - "profileImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", - "nickname": "pliossun", - "content": "코딩 노잼!", - "createdAt": "2023-08-17 00:14:22", - "updatedAt": "2023-08-17 00:14:22" - } - ], - "createdAt": "2023-08-16 00:14:22", - "updatedAt": "2023-08-16 00:14:22" - }, - { - "userId": 1, - "content": "일라이자 효과는 컴퓨터 과학에서, 무의식적으로 컴퓨터의 행위를 인간의 행위와 유사한 것으로 추정하고 의인화하는 경향이다.", - "profileImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "nickname": "John", - "comments": [ - { - "threadId": 0, - "profileImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "nickname": "이인재", - "content": "코딩 안 해!", - "createdAt": "2023-08-16 00:14:22", - "updatedAt": "2023-08-16 00:14:22" - }, - { - "threadId": 1, - "nickname": "John", - "content": "코딩 노잼!", - "profileImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "createdAt": "2023-08-17 00:14:22", - "updatedAt": "2023-08-17 00:14:22" - } - ], - "createdAt": "Sun May 22 2023 15:47:29 GMT+0900", - "updatedAt": "2023-08-17 00:14:22" - }, - { - "userId": 2, - "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", - "profileImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", - "nickname": "Julia", - "comments": [ - { - "threadId": 0, - "profileImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", - "nickname": "이인재", - "content": "코딩 안 해!", - "createdAt": "2023-08-16 00:14:22", - "updatedAt": "2023-08-16 00:14:22" - }, - { - "threadId": 1, - "profileImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", - "nickname": "John", - "content": "코딩 노잼!", - "createdAt": "2023-08-17 00:14:22", - "updatedAt": "2023-08-17 00:14:22" - } - ], - "createdAt": "Sun June 24 2023 15:47:29 GMT+0900", - "updatedAt": "2023-08-17 00:14:22" - }, - { - "userId": 3, - "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", - "profileImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "nickname": "pliossun", - "comments": [ - { - "threadId": 0, - "profileImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "nickname": "이인재", - "content": "코딩 안 해!", - "createdAt": "2023-08-16 00:14:22", - "updatedAt": "2023-08-16 00:14:22" - }, - { - "threadId": 1, - "profileImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", - "nickname": "John", - "content": "코딩 노잼!", - "createdAt": "2023-08-17 00:14:22", - "updatedAt": "2023-08-17 00:14:22" - } - ], - "createdAt": "Sun June 30 2023 15:47:29 GMT+0900", - "updatedAt": "2023-08-19 00:14:22" - } -] +{ + "data": [ + { + "postId": 1, + "userName": "wecode", + "profileImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", + "isMyPost": false, + "content": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다.", + "isLiked": false, + "likeCount": 9, + "commentsCount": 11, + "comments": [ + { + "commentId": 1, + "userName": "John", + "comment": "코딩 안 해!", + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" + }, + { + "commentId": 2, + "userName": "pliossun", + "comment": "코딩 노잼!", + "createdAt": "2023-08-17 00:14:22", + "updatedAt": "2023-08-17 00:14:22" + } + ], + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" + }, + { + "postId": 2, + "userName": "John", + "profileImage": "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjF8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "isMyPost": false, + "content": "일라이자 효과는 컴퓨터 과학에서, 무의식적으로 컴퓨터의 행위를 인간의 행위와 유사한 것으로 추정하고 의인화하는 경향이다.", + "isLiked": false, + "likeCount": 2, + "commentsCount": 13, + "comments": [ + { + "commentId": 1, + "userName": "이인재", + "comment": "코딩 안 해!", + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" + }, + { + "commentId": 2, + "userName": "John", + "comment": "코딩 노잼!", + "createdAt": "2023-08-17 00:14:22", + "updatedAt": "2023-08-17 00:14:22" + } + ], + "createdAt": "Sun May 22 2023 15:47:29 GMT+0900", + "updatedAt": "2023-08-17 00:14:22" + }, + { + "postId": 3, + "userName": "Julia", + "profileImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", + "isMyPost": false, + "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", + "isLiked": false, + "likeCount": 3, + "commentsCount": 11, + "comments": [ + { + "commentId": 1, + "profileImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", + "userName": "이인재", + "comment": "코딩 안 해!", + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" + }, + { + "commentId": 2, + "profileImage": "https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60", + "userName": "John", + "comment": "코딩 노잼!", + "createdAt": "2023-08-17 00:14:22", + "updatedAt": "2023-08-17 00:14:22" + } + ], + "createdAt": "Sun June 24 2023 15:47:29 GMT+0900", + "updatedAt": "2023-08-17 00:14:22" + }, + { + "postId": 4, + "userName": "pliossun", + "profileImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "isMyPost": false, + "content": "성별과 성격과 같은 인간의 특성을 AI 음성 비서에게 돌리기", + "isLiked": false, + "likeCount": 5, + "commentsCount": 3, + "comments": [ + { + "commentId": 1, + "profileImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "userName": "이인재", + "comment": "코딩 안 해!", + "createdAt": "2023-08-16 00:14:22", + "updatedAt": "2023-08-16 00:14:22" + }, + { + "commentId": 2, + "profileImage": "https://images.unsplash.com/photo-1500048993953-d23a436266cf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60", + "userName": "John", + "comment": "코딩 노잼!", + "createdAt": "2023-08-17 00:14:22", + "updatedAt": "2023-08-17 00:14:22" + } + ], + "createdAt": "Sun June 30 2023 15:47:29 GMT+0900", + "updatedAt": "2023-08-19 00:14:22" + } + ] +} diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index 870ca88..f78e328 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -46,10 +46,10 @@ const PostList = () => { return (
- {!feedsData ? ( + {!feedsData.data ? (

{noListMessage}

) : ( - feedsData.map(feedData => ( + feedsData.data.map(feedData => ( { const [feedCommentList, setFeedCommentList] = useState([]); const onCommentChange = e => { - setFeedComment(e.target.value); + const { value } = e.target; + setFeedComment(value); }; const handleWriteComment = e => { @@ -22,11 +23,7 @@ const CommentItem = ({ feedData, feedDate }) => { }) .then(res => res.json()) .then(data => { - const res = data.map(d => ({ - ...d, - body: d.comments, - })); - setFeedComment(res); + console.log('data', data); }); setFeedCommentList(cur => [feedComment, ...cur]); diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 7667d58..c031057 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { formatDate } from '../../../utils/formatDate'; +import { FormatDate } from '../../../utils/FormatDate'; import CommentItem from './CommentItem'; import './Feed.scss'; @@ -15,13 +15,13 @@ const Feed = ({ feedData, handleRemove }) => { setFeedLikeCount(prev => prev + 1); setIsHeartButtonToggle(true); } else if (feedLikeCount > 0) { - setFeedLikeCount(feedLikeCount - 1); + setFeedLikeCount(prev => prev - 1); setIsHeartButtonToggle(false); } }; const handleShowFeedContent = () => { - setIsShowFeedContent(!isShowFeedContent); + setIsShowFeedContent(prev => !prev); }; return ( @@ -39,7 +39,7 @@ const Feed = ({ feedData, handleRemove }) => {

-

{formatDate(feedData)}

+

{FormatDate(feedData)}

{isShowFeedContent && ( - + )} ); diff --git a/src/utils/formatDate.js b/src/utils/FormatDate.js similarity index 84% rename from src/utils/formatDate.js rename to src/utils/FormatDate.js index 4835696..a0c4c72 100644 --- a/src/utils/formatDate.js +++ b/src/utils/FormatDate.js @@ -1,4 +1,4 @@ -export const formatDate = feed => { +export const FormatDate = feed => { const feedDate = new Date(feed.createdAt).toLocaleDateString().split(''); feedDate.pop(); const formattedFeedDate = feedDate.join('').replaceAll('.', '-'); From 25bf77377896133da356d02d43b6356b8dceb7c4 Mon Sep 17 00:00:00 2001 From: llinjae Date: Thu, 17 Aug 2023 10:16:37 +0900 Subject: [PATCH 26/30] =?UTF-8?q?Modify=20:=20fetch=ED=95=A0=20=EB=95=8C?= =?UTF-8?q?=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=95=88=20=EB=90=98=EB=8A=94?= =?UTF-8?q?=20=EA=B2=83=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/PostList.jsx | 51 +++++++++++-------- src/pages/PostList/components/CommentItem.jsx | 32 +++++++++--- src/pages/PostList/components/Feed.jsx | 30 ++++++----- 3 files changed, 71 insertions(+), 42 deletions(-) diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index f78e328..4f2b237 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -4,6 +4,8 @@ import Button from '../../components/Button'; import Feed from './components/Feed'; import './PostList.scss'; +const noListMessage = '게시글이 없습니다.'; + const PostList = () => { const [feedsData, setFeedsData] = useState([]); const navigate = useNavigate(); @@ -13,30 +15,37 @@ const PostList = () => { method: 'GET', headers: { 'Content-Type': 'application/json;charset=utf-8', + Authorization: localStorage.getItem('access_token'), }, }) .then(res => res.json()) - .then(data => setFeedsData(data)); + .then(data => { + const sortedFeedList = data.data.sort( + (a, b) => b.createdAt - a.createdAt, + ); + setFeedsData(sortedFeedList); + }); }, []); - const noListMessage = '게시글이 없습니다.'; - const handleRemove = targetId => { - // fetch('주소', { - // method: 'DELETE', - // }) - // .then(res => { - // if (!res.ok) { - // throw new Error('삭제 못해요'); - // } - // return res.json(); - // }) - // .then(data => { - // if (!data) alert('삭제를 실패했습니다.'); - // if (data.message === 'ok') { - // setFeedsData(feedsData.filter(data => data.userId !== targetId)); - // } - // }); + fetch('/data/data.json', { + method: 'DELETE', + }) + .then(res => { + if (!res.ok) { + throw new Error('삭제 못해요'); + } + return res.json(); + }) + .then(data => { + if (!data) alert('삭제를 실패했습니다.'); + if (data.message === 'ok') { + const newFeedList = feedsData.filter( + data => data.userId !== targetId, + ); + setFeedsData(newFeedList); + } + }); }; const goToCreatePost = () => { @@ -46,12 +55,12 @@ const PostList = () => { return (
- {!feedsData.data ? ( + {!feedsData ? (

{noListMessage}

) : ( - feedsData.data.map(feedData => ( + feedsData.map(feedData => ( diff --git a/src/pages/PostList/components/CommentItem.jsx b/src/pages/PostList/components/CommentItem.jsx index 8671c6d..e1ad399 100644 --- a/src/pages/PostList/components/CommentItem.jsx +++ b/src/pages/PostList/components/CommentItem.jsx @@ -5,7 +5,7 @@ const CommentItem = ({ feedData, feedDate }) => { const [feedComment, setFeedComment] = useState(''); const [feedCommentList, setFeedCommentList] = useState([]); - const onCommentChange = e => { + const handleCommentChange = e => { const { value } = e.target; setFeedComment(value); }; @@ -15,11 +15,13 @@ const CommentItem = ({ feedData, feedDate }) => { if (feedComment === '') return; setFeedComment(''); - fetch('주소', { + fetch('/data/data.json', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8', + Authorization: localStorage.getItem('access_token'), }, + body: JSON.stringify({}), }) .then(res => res.json()) .then(data => { @@ -30,10 +32,24 @@ const CommentItem = ({ feedData, feedDate }) => { }; const handleDeleteComment = targetId => { - const newComment = feedCommentList - .slice(0, targetId) - .concat(feedCommentList.slice(targetId + 1)); - setFeedCommentList(newComment); + fetch('주소', { + method: 'DELETE', + }) + .then(res => { + if (!res.ok) { + throw new Error(`${res.status}`); + } + return res.json(); + }) + .then(data => { + if (!data) alert('삭제를 실패했습니다.'); + if (data.message === 'ok') { + const newComment = feedCommentList + .slice(0, targetId) + .concat(feedCommentList.slice(targetId + 1)); + setFeedCommentList(newComment); + } + }); }; return ( @@ -44,7 +60,7 @@ const CommentItem = ({ feedData, feedDate }) => { placeholder="댓글을 작성해주세요." value={feedComment} className="feedInput" - onChange={onCommentChange} + onChange={handleCommentChange} /> @@ -59,7 +75,7 @@ const CommentItem = ({ feedData, feedDate }) => {

- {feedData.nickname} + {feedData.userName}

{feedDate}

diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index c031057..9e5ba19 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -4,20 +4,24 @@ import CommentItem from './CommentItem'; import './Feed.scss'; const Feed = ({ feedData, handleRemove }) => { - const [feedLikeCount, setFeedLikeCount] = useState(0); + const [feedLikeCount, setFeedLikeCount] = useState(feedData.likeCount); const [isHeartButtonToggle, setIsHeartButtonToggle] = useState(false); const [isShowFeedContent, setIsShowFeedContent] = useState(false); - const handleHeartToggle = e => { - e.stopPropagation(); - - if (!isHeartButtonToggle) { - setFeedLikeCount(prev => prev + 1); - setIsHeartButtonToggle(true); - } else if (feedLikeCount > 0) { - setFeedLikeCount(prev => prev - 1); - setIsHeartButtonToggle(false); - } + const handleHeartToggle = () => { + fetch('/data/data.json', { + method: 'POST', + headers: { + Authorization: localStorage.getItem('access_token'), + }, + }) + .then(res => res.json()) + .then(data => { + if (data.message === 'ok') { + setIsHeartButtonToggle(prev => !prev); + setFeedLikeCount(prev => (isHeartButtonToggle ? prev - 1 : prev + 1)); + } + }); }; const handleShowFeedContent = () => { @@ -35,14 +39,14 @@ const Feed = ({ feedData, handleRemove }) => { alt="프로필 이미지" />

- {feedData.nickname} + {feedData.userName}

{FormatDate(feedData)}

From e9f57bd881c042877f9190ff1556aac4890335d5 Mon Sep 17 00:00:00 2001 From: llinjae Date: Thu, 17 Aug 2023 12:49:09 +0900 Subject: [PATCH 27/30] =?UTF-8?q?Refactor=20:=20=EC=82=AD=EC=A0=9C=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=B0=8F=20=ED=95=98=ED=8A=B8=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=B2=A4=ED=8A=B8=20=EC=A0=84=ED=8C=8C=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/PostList.jsx | 41 +++++++++---------- src/pages/PostList/components/CommentItem.jsx | 12 +++--- src/pages/PostList/components/Feed.jsx | 19 +++++++-- src/pages/PostList/components/Feed.scss | 10 ++++- src/utils/FormatDate.js | 5 ++- 5 files changed, 54 insertions(+), 33 deletions(-) diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index 4f2b237..9fc776c 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -15,37 +15,36 @@ const PostList = () => { method: 'GET', headers: { 'Content-Type': 'application/json;charset=utf-8', - Authorization: localStorage.getItem('access_token'), + // Authorization: localStorage.getItem('access_token'), }, }) .then(res => res.json()) .then(data => { - const sortedFeedList = data.data.sort( - (a, b) => b.createdAt - a.createdAt, - ); - setFeedsData(sortedFeedList); + setFeedsData(data.data); }); }, []); const handleRemove = targetId => { fetch('/data/data.json', { method: 'DELETE', - }) - .then(res => { - if (!res.ok) { - throw new Error('삭제 못해요'); - } - return res.json(); - }) - .then(data => { - if (!data) alert('삭제를 실패했습니다.'); - if (data.message === 'ok') { - const newFeedList = feedsData.filter( - data => data.userId !== targetId, - ); - setFeedsData(newFeedList); - } - }); + body: JSON.stringify({ + postId: targetId, + }), + }); + // .then(res => { + // if (!res.ok) { + // throw new Error(`${res.status} error`); + // } + // return res.json(); + // }) + // .then(data => { + // if (data.message === 'ok') { + // const newFeedList = feedsData.filter( + // data => data.postId !== targetId, + // ); + // setFeedsData(newFeedList); + // } + // }); }; const goToCreatePost = () => { diff --git a/src/pages/PostList/components/CommentItem.jsx b/src/pages/PostList/components/CommentItem.jsx index e1ad399..f6b76e8 100644 --- a/src/pages/PostList/components/CommentItem.jsx +++ b/src/pages/PostList/components/CommentItem.jsx @@ -19,25 +19,23 @@ const CommentItem = ({ feedData, feedDate }) => { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8', - Authorization: localStorage.getItem('access_token'), + // Authorization: localStorage.getItem('access_token'), }, - body: JSON.stringify({}), + // body: JSON.stringify({}), }) .then(res => res.json()) .then(data => { - console.log('data', data); + setFeedCommentList(cur => [data, ...cur]); }); - - setFeedCommentList(cur => [feedComment, ...cur]); }; const handleDeleteComment = targetId => { - fetch('주소', { + fetch('/data/data.json', { method: 'DELETE', }) .then(res => { if (!res.ok) { - throw new Error(`${res.status}`); + throw new Error(`${res.status} error`); } return res.json(); }) diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 9e5ba19..35fe4eb 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -8,11 +8,13 @@ const Feed = ({ feedData, handleRemove }) => { const [isHeartButtonToggle, setIsHeartButtonToggle] = useState(false); const [isShowFeedContent, setIsShowFeedContent] = useState(false); - const handleHeartToggle = () => { + const handleHeartToggle = e => { + e.stopPropagation(); fetch('/data/data.json', { method: 'POST', headers: { - Authorization: localStorage.getItem('access_token'), + 'Content-Type': 'application/json;charset=utf-8', + // Authorization: localStorage.getItem('access_token'), }, }) .then(res => res.json()) @@ -28,6 +30,8 @@ const Feed = ({ feedData, handleRemove }) => { setIsShowFeedContent(prev => !prev); }; + const handleEdit = () => {}; + return ( <>
@@ -46,10 +50,19 @@ const Feed = ({ feedData, handleRemove }) => {

{FormatDate(feedData)}

+
diff --git a/src/pages/PostList/components/Feed.scss b/src/pages/PostList/components/Feed.scss index 6c8fde3..790b9d2 100644 --- a/src/pages/PostList/components/Feed.scss +++ b/src/pages/PostList/components/Feed.scss @@ -38,7 +38,7 @@ .feedProfileBoxRight { display: flex; align-items: center; - gap: 16px; + gap: 10px; .date { color: $grey60; @@ -53,6 +53,14 @@ font-size: 14px; cursor: pointer; } + + .editBtn { + outline: none; + border: none; + background-color: transparent; + font-size: 14px; + cursor: pointer; + } } } diff --git a/src/utils/FormatDate.js b/src/utils/FormatDate.js index a0c4c72..a6c66e5 100644 --- a/src/utils/FormatDate.js +++ b/src/utils/FormatDate.js @@ -1,6 +1,9 @@ export const FormatDate = feed => { const feedDate = new Date(feed.createdAt).toLocaleDateString().split(''); feedDate.pop(); - const formattedFeedDate = feedDate.join('').replaceAll('.', '-'); + const formattedFeedDate = feedDate + .filter(el => el !== '') + .join('') + .replaceAll('.', '-'); return formattedFeedDate; }; From 389d7158dc4c4a83abf493502eedbbd2e2ea475e Mon Sep 17 00:00:00 2001 From: llinjae Date: Thu, 17 Aug 2023 20:48:41 +0900 Subject: [PATCH 28/30] =?UTF-8?q?Add=20:=20currentUser=EA=B0=80=20?= =?UTF-8?q?=EC=95=84=EB=8B=88=EB=A9=B4=20=EC=82=AD=EC=A0=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B2=84=ED=8A=BC=20=EC=82=AC=EB=9D=BC=EC=A7=80?= =?UTF-8?q?=EA=B2=8C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/data/data.json | 11 +++- src/pages/PostList/PostList.jsx | 8 ++- src/pages/PostList/components/CommentItem.jsx | 21 ++++++-- src/pages/PostList/components/Feed.jsx | 50 +++++++++++-------- src/pages/PostList/components/Feed.scss | 4 ++ 5 files changed, 66 insertions(+), 28 deletions(-) diff --git a/public/data/data.json b/public/data/data.json index 80fcc6b..63ab39f 100644 --- a/public/data/data.json +++ b/public/data/data.json @@ -1,10 +1,10 @@ { "data": [ { - "postId": 1, + "postId": 9, "userName": "wecode", "profileImage": "https://ca.slack-edge.com/TH0U6FBTN-U05CNSZS4ET-02b82fbf4c55-512", - "isMyPost": false, + "isMyPost": true, "content": "일라이자 효과는 인간의 사고 과정과 감정을 AI 시스템에 잘못 돌리는 사람들의 경향을 말하며, 따라서 시스템이 실제보다 더 지능적이라고 믿는다. 이 현상은 1966년 MIT 교수 조셉 웨이젠바움이 만든 챗봇인 ELIZA의 이름을 따서 명명되었다.", "isLiked": false, "likeCount": 9, @@ -23,6 +23,13 @@ "comment": "코딩 노잼!", "createdAt": "2023-08-17 00:14:22", "updatedAt": "2023-08-17 00:14:22" + }, + { + "commentId": 3, + "userName": "pliossun", + "comment": "코딩 노잼!", + "createdAt": "2023-08-17 00:14:22", + "updatedAt": "2023-08-17 00:14:22" } ], "createdAt": "2023-08-16 00:14:22", diff --git a/src/pages/PostList/PostList.jsx b/src/pages/PostList/PostList.jsx index 9fc776c..690262a 100644 --- a/src/pages/PostList/PostList.jsx +++ b/src/pages/PostList/PostList.jsx @@ -25,8 +25,14 @@ const PostList = () => { }, []); const handleRemove = targetId => { - fetch('/data/data.json', { + fetch('http://10.58.52.158:3000/threads/contentDelete', { method: 'DELETE', + headers: { + 'Content-Type': 'application/json;charset=utf-8', + // Authorization: localStorage.getItem('access_token'), + Authorization: + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjIyLCJlbWFpbCI6InRob21wc29uQGdtYWlsLmNvbSIsImlhdCI6MTY5MjI1MzIwMH0.g4rFX5-jmpIee6AQSVCDHJURVqbdT3hmIsVmfSh6EP4', + }, body: JSON.stringify({ postId: targetId, }), diff --git a/src/pages/PostList/components/CommentItem.jsx b/src/pages/PostList/components/CommentItem.jsx index f6b76e8..c2a0f28 100644 --- a/src/pages/PostList/components/CommentItem.jsx +++ b/src/pages/PostList/components/CommentItem.jsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import Input from '../../../components/Input'; import './CommentItem.scss'; const CommentItem = ({ feedData, feedDate }) => { @@ -10,18 +11,30 @@ const CommentItem = ({ feedData, feedDate }) => { setFeedComment(value); }; + // const getComments = () => { + // const num = feedData.comments.map(el => el.comment); + // for (let i = 0; i < num.length; i++) { + // return num[i]; + // } + // }; + const handleWriteComment = e => { e.preventDefault(); if (feedComment === '') return; setFeedComment(''); - fetch('/data/data.json', { + fetch('http://10.58.52.158:3000/threads/commentUp', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8', // Authorization: localStorage.getItem('access_token'), + Authorization: + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOjIyLCJlbWFpbCI6InRob21wc29uQGdtYWlsLmNvbSIsImlhdCI6MTY5MjI1MzIwMH0.g4rFX5-jmpIee6AQSVCDHJURVqbdT3hmIsVmfSh6EP4', }, - // body: JSON.stringify({}), + body: JSON.stringify({ + content: feedComment, + threadId: feedData.postId, + }), }) .then(res => res.json()) .then(data => { @@ -53,11 +66,11 @@ const CommentItem = ({ feedData, feedDate }) => { return ( <>
- diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 35fe4eb..c9af950 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -1,13 +1,18 @@ import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import { FormatDate } from '../../../utils/FormatDate'; import CommentItem from './CommentItem'; import './Feed.scss'; const Feed = ({ feedData, handleRemove }) => { const [feedLikeCount, setFeedLikeCount] = useState(feedData.likeCount); - const [isHeartButtonToggle, setIsHeartButtonToggle] = useState(false); + const [isHeartButtonToggle, setIsHeartButtonToggle] = useState( + feedData.isLiked, + ); const [isShowFeedContent, setIsShowFeedContent] = useState(false); + const navigate = useNavigate(); + const handleHeartToggle = e => { e.stopPropagation(); fetch('/data/data.json', { @@ -26,15 +31,16 @@ const Feed = ({ feedData, handleRemove }) => { }); }; - const handleShowFeedContent = () => { + const handleShowFeedContent = targetId => { setIsShowFeedContent(prev => !prev); }; - const handleEdit = () => {}; - return ( <> -
+
handleShowFeedContent(feedData.postId)} + >
{

{FormatDate(feedData)}

- - +
+ + +
@@ -71,7 +79,7 @@ const Feed = ({ feedData, handleRemove }) => {

좋아요 {feedLikeCount}

-

댓글 {feedData.comments.length}

+

댓글 {feedData.commentsCount}

Date: Thu, 17 Aug 2023 21:01:55 +0900 Subject: [PATCH 29/30] =?UTF-8?q?Refactor=20:=20className=20warning=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/PostList/components/Feed.jsx | 2 +- src/pages/PostList/components/Feed.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index c9af950..9b2d4db 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -54,7 +54,7 @@ const Feed = ({ feedData, handleRemove }) => {

{FormatDate(feedData)}

-
+
- + + +

{elements}

diff --git a/src/pages/PostList/components/CommentItem.scss b/src/pages/PostList/components/CommentItem.scss index cdc3f7d..9eb9a4f 100644 --- a/src/pages/PostList/components/CommentItem.scss +++ b/src/pages/PostList/components/CommentItem.scss @@ -88,6 +88,14 @@ font-size: 14px; cursor: pointer; } + + .btnBoxHide { + display: none; + } + + .btnBoxShow { + display: block; + } } } } diff --git a/src/pages/PostList/components/Feed.jsx b/src/pages/PostList/components/Feed.jsx index 9b2d4db..fe82565 100644 --- a/src/pages/PostList/components/Feed.jsx +++ b/src/pages/PostList/components/Feed.jsx @@ -13,14 +13,17 @@ const Feed = ({ feedData, handleRemove }) => { const navigate = useNavigate(); - const handleHeartToggle = e => { - e.stopPropagation(); + const handleHeartToggle = () => { + // e.stopPropagation(); fetch('/data/data.json', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8', // Authorization: localStorage.getItem('access_token'), }, + body: JSON.stringify({ + isLiked: isHeartButtonToggle, + }), }) .then(res => res.json()) .then(data => { @@ -37,44 +40,46 @@ const Feed = ({ feedData, handleRemove }) => { return ( <> -
handleShowFeedContent(feedData.postId)} - > -
-
- 프로필 이미지 -

- {feedData.userName} -

-
-
-

{FormatDate(feedData)}

-
- - +
+
handleShowFeedContent(feedData.postId)} + > +
+
+ 프로필 이미지 +

+ {feedData.userName} +

+
+
+

{FormatDate(feedData)}

+
+ + +
-
-
-

{feedData.content}

+
+

{feedData.content}

+
@@ -82,7 +87,10 @@ const Feed = ({ feedData, handleRemove }) => {

댓글 {feedData.commentsCount}

{ + handleHeartToggle(); + setIsHeartButtonToggle(prev => !prev); + }} className="feedHeartImg" src={`/images/${isHeartButtonToggle ? 'fill' : ''}heart.svg`} alt="좋아요 버튼" diff --git a/src/pages/PostList/components/Feed.scss b/src/pages/PostList/components/Feed.scss index d03c701..c0eb057 100644 --- a/src/pages/PostList/components/Feed.scss +++ b/src/pages/PostList/components/Feed.scss @@ -8,66 +8,69 @@ display: flex; flex-direction: column; gap: 10px; - cursor: pointer; user-select: none; - .feedProfileBox { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - height: 50px; + .feedExceptDescription { + cursor: pointer; - .feedProfileBoxLeft { + .feedProfileBox { display: flex; align-items: center; - gap: 16px; - - .profileImg { - width: 40px; - height: 40px; - border: 1px solid $grey88; - border-radius: 50%; - } - - .userName { - font-size: 20px; - } - } - - .feedProfileBoxRight { - display: flex; - align-items: center; - gap: 10px; - - .date { - color: $grey60; - font-weight: 400; - } - - .deleteBtn { - outline: none; - border: none; - background-color: transparent; - color: $red; - font-size: 14px; - cursor: pointer; - } - - .editBtn { - outline: none; - border: none; - background-color: transparent; - font-size: 14px; - cursor: pointer; - } - - .btnBoxHide { - display: none; + justify-content: space-between; + width: 100%; + height: 50px; + + .feedProfileBoxLeft { + display: flex; + align-items: center; + gap: 16px; + + .profileImg { + width: 40px; + height: 40px; + border: 1px solid $grey88; + border-radius: 50%; + } + + .userName { + font-size: 20px; + } } - .btnBoxShow { - display: block; + .feedProfileBoxRight { + display: flex; + align-items: center; + gap: 10px; + + .date { + color: $grey60; + font-weight: 400; + } + + .deleteBtn { + outline: none; + border: none; + background-color: transparent; + color: $red; + font-size: 14px; + cursor: pointer; + } + + .editBtn { + outline: none; + border: none; + background-color: transparent; + font-size: 14px; + cursor: pointer; + } + + .btnBoxHide { + display: none; + } + + .btnBoxShow { + display: block; + } } } }