From bfdacc65eb3bce9c950d3c64964ff0f6be180df6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=88=98=EC=95=84?= Date: Fri, 22 Sep 2023 16:10:22 +0900 Subject: [PATCH] =?UTF-8?q?#170=20=E2=99=BB=EF=B8=8F=20Refactor:=20HomeFee?= =?UTF-8?q?d=20=EB=AA=A8=EB=93=88=ED=99=94=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 114 ++++++++++-------- src/Hooks/UseFetchToken.jsx | 12 ++ src/components/HomePost/HomePost.jsx | 1 + src/pages/HomeFeed/HomeFeed.jsx | 30 ++--- src/pages/HomePage/HomePage.jsx | 12 +- src/pages/JoinPage/JoinMember.jsx | 2 - .../MyProfilePage/MyProfilePage.jsx | 1 + 7 files changed, 87 insertions(+), 85 deletions(-) diff --git a/README.md b/README.md index eb5ac5f..1823ac2 100644 --- a/README.md +++ b/README.md @@ -12,10 +12,13 @@
## 목차 + <<<<<<< HEAD <<<<<<< HEAD ======= ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc + +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc + 1. [프로젝트 소개](#1-프로젝트-소개)
2. [팀원 소개](#2-팀-소개)
3. [개발 기간](#3-개발-기간)
@@ -32,8 +35,8 @@
## 1. 프로젝트 소개 -<<<<<<< HEAD -======= + +# <<<<<<< HEAD 1. 프로젝트 소개 2. 팀 소개 @@ -51,9 +54,10 @@
## 1. 서비스 소개 ->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8 -======= ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc + +> > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8 +> > > > > > > +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc - 니고네고는 레고를 좋아하는 사람들을 위한 **레고 전용 플랫폼**입니다.
- 니고네고에서 사용자는 자신이 직접 조립한 레고 사진을 공유하고 다양한 유저와 소통할 수 있습니다.
@@ -66,9 +70,10 @@ <<<<<<< HEAD <<<<<<< HEAD ======= ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc -안녕하세요. -저희는 K(권순호)K(김민지)O(오연주)L(이수아)로 이루어진 꿀조🍯입니다! + +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc +> > > > > > > 안녕하세요. +> > > > > > > 저희는 K(권순호)K(김민지)O(오연주)L(이수아)로 이루어진 꿀조🍯입니다! ### 1. 팀원 소개 @@ -78,9 +83,8 @@ |
|
|
|
| | 팀원 | 팀원 | 팀장 | 팀원 | +# <<<<<<< HEAD -<<<<<<< HEAD -======= 안녕하세요 저희는 K(김민지)K(권순호)O(오연주)L(이수아)로 이루어진 꿀조🍯입니다! @@ -91,10 +95,10 @@ | | | | | |
|
|
|
| | 팀원 | 팀원 | 팀원 | 팀원 | ->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8 -======= ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc +> > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8 +> > > > > > > +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc ### 2. 역할 분담 @@ -254,6 +258,7 @@ final-11-NigoNego 1. 매일 아침 회의 : 당일 진행할 작업 내용 공유 2. 매일 저녁 회의 : 진행 상황 공유 ``` + <<<<<<< HEAD <<<<<<< HEAD @@ -263,12 +268,12 @@ final-11-NigoNego ->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8 -======= +> > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8 ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc + ### 6-2. 페어코딩 라이브쉐어를 이용해 로그인/회원가입 페이지를 함께 작업했습니다.

@@ -288,13 +293,18 @@ main - dev - feature[기능] <<<<<<< HEAD <<<<<<< HEAD + ## 7. 주요기능 + ======= + ## 7.주요기능 ->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8 -======= + +> > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8 + ## 7. 주요기능 ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc + +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc - 핵심 기능 : 게시물 업로드, 팔로우 기능, 상품 등록, 댓글 @@ -308,7 +318,6 @@ main - dev - feature[기능] | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- | | ![splash page](https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/85488522/2495580b-6579-4298-a13f-dce3e0ffe7b6) | ![로그인 페이지](https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/85488522/c04f6554-eddb-430f-bdb1-3300ce7ab1bd) | ![회원가입 최종](https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/85488522/47eda093-4a61-47e8-af7e-89e527955e39) | ![프로필설정](https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/117130358/f5db86de-b67f-461d-b2ae-0bf55fa5d0e0) | - ### 주요기능 | 홈피드 | 게시글 상세 | 게시글 업로드 | 유저프로필 | @@ -327,24 +336,25 @@ main - dev - feature[기능] <<<<<<< HEAD <<<<<<< HEAD -| 커밋 컨벤션 | +| 커밋 컨벤션 | ======= -| 코드 컨벤션 | ->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8 -======= -| 커밋 컨벤션 | ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc -| ------------------------------------------------------- | -| ✨ Feat : 새로운 기능 추가 | -| 💄 Design : CSS, 사용자 UI 디자인 변경 | -| 📝 Docs : 문서 수정 | -| 🎨 Style : 코드포맷, 세미콜론, 개행, 코드 구조, 형태 | -| 🤔 Test : 테스트 | -| ♻️ Refactor : 코드 리팩토링 | -| 🐛 Fix : 버그 및 오류 수정 | -| 🔥 Remove : 불필요한 파일 삭제 | -| 🔨 Chore : 빌드 업무, 패키지매니저, 폴더트리, 세팅 수정 | -| 💡 Comment : 필요한 주석 추가 및 변경 | +| 코드 컨벤션 | + +> > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8 +> > > > > > > +> > > > > > > | 커밋 컨벤션 | +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc +> > > > > > > | ------------------------------------------------------- | +> > > > > > > | ✨ Feat : 새로운 기능 추가 | +> > > > > > > | 💄 Design : CSS, 사용자 UI 디자인 변경 | +> > > > > > > | 📝 Docs : 문서 수정 | +> > > > > > > | 🎨 Style : 코드포맷, 세미콜론, 개행, 코드 구조, 형태 | +> > > > > > > | 🤔 Test : 테스트 | +> > > > > > > | ♻️ Refactor : 코드 리팩토링 | +> > > > > > > | 🐛 Fix : 버그 및 오류 수정 | +> > > > > > > | 🔥 Remove : 불필요한 파일 삭제 | +> > > > > > > | 🔨 Chore : 빌드 업무, 패키지매니저, 폴더트리, 세팅 수정 | +> > > > > > > | 💡 Comment : 필요한 주석 추가 및 변경 |
@@ -353,7 +363,9 @@ main - dev - feature[기능] <<<<<<< HEAD <<<<<<< HEAD ======= ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc + +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc + #### 📍 반응형으로 제작하기 UI는 반응형으로 구현하였지만 화면이 커지면 무한스크롤이 제대로 동작하지 않았습니다. 무한스크롤 기능을 다시 한 번 구현하여 모든 화면에 대응하는 무한스크롤을 구현하고 싶습니다. @@ -363,8 +375,9 @@ UI는 반응형으로 구현하였지만 화면이 커지면 무한스크롤이 전역으로 관리할 데이터와 아닌 데이터를 구분하지 않고 페이지마다 불러와서 중복된 API가 많았습니다. 이로 인해 API의 통일성이 없어 데이터 통신에 어려움을 겪었습니다. #### 📍 다른 사람이 구현한 코드 리팩토링하기 -<<<<<<< HEAD -======= + +# <<<<<<< HEAD + #### 반응형으로 제작하기 UI는 반응형으로 구현하였지만 화면이 커지면 무한스크롤이 제대로 동작하지 않았습니다. 무한스크롤 기능을 다시 한 번 구현하여 모든 화면에 대응하는 무한스크롤을 구현하고 싶습니다. @@ -378,9 +391,10 @@ UI는 반응형으로 구현하였지만 화면이 커지면 무한스크롤이 전역으로 관리할 데이터와 아닌 데이터를 구분하지 않고 페이지마다 불러와서 중복된 API가 많았습니다. 이로 인해 API의 통일성이 없어 데이터 통신에 어려움을 겪었습니다. #### 다른 사람이 구현한 코드 리팩토링하기 ->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8 -======= ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc + +> > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8 +> > > > > > > +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc 비슷한 기능을 맡아 작업하다보니 다른 팀원이 구현한 기능에 대한 이해도가 부족하다는 생각이 들었습니다. 다른 사람이 구현한 코드를 리뷰하거나 리팩토링해보고 싶습니다. @@ -389,8 +403,9 @@ UI는 반응형으로 구현하였지만 화면이 커지면 무한스크롤이 <<<<<<< HEAD <<<<<<< HEAD ======= ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc -여러 측면을 고려하여 컴포넌트를 제작하여 재사용성을 높히고 싶습니다. + +> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc +> > > > > > > 여러 측면을 고려하여 컴포넌트를 제작하여 재사용성을 높히고 싶습니다. #### 📍 웹 접근성과 웹 표준을 지키는 코드(lighthouse로 구체적인 수치 기록) 작성하기 @@ -401,14 +416,15 @@ UI는 반응형으로 구현하였지만 화면이 커지면 무한스크롤이 지도 api 사용 해서 직거래 위치 pin 추가 <<<<<<< HEAD ======= + #### 기능 및 서비스 추가 - 조립된상품/ 조립하기전 상품 구분해서 나누는 서비스 추가하기 - 레고 카테고리 나누기 - 지도 api 사용 해서 직거래 위치 pin 해보기 ->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8 -======= ->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc + > > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8 + > > > > > > > + > > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
diff --git a/src/Hooks/UseFetchToken.jsx b/src/Hooks/UseFetchToken.jsx index 26b9c0a..df79ed8 100644 --- a/src/Hooks/UseFetchToken.jsx +++ b/src/Hooks/UseFetchToken.jsx @@ -113,6 +113,17 @@ const UseFetchToken = () => { } }; + const getFeedData = async (num, skip) => { + try { + const response = await getDataBase.get( + `/post/feed/?limit=${num}&skip=${skip}`, + ); + return response.data.posts; + } catch (error) { + console.error('getFeed에러', error); + } + }; + return { GetHomeFeedData, getPostListLimit, @@ -124,6 +135,7 @@ const UseFetchToken = () => { postHeart, deleteHeart, postJoin, + getFeedData, }; }; diff --git a/src/components/HomePost/HomePost.jsx b/src/components/HomePost/HomePost.jsx index ce7a7d8..f5d947c 100644 --- a/src/components/HomePost/HomePost.jsx +++ b/src/components/HomePost/HomePost.jsx @@ -13,6 +13,7 @@ export default function HomePost({ data }) { const [userId, setUserId] = useRecoilState(atomId); const postMainHandler = e => { + // 여기에 댓글 API 넣기 navigate('/postmain', { state: { id: data.id, diff --git a/src/pages/HomeFeed/HomeFeed.jsx b/src/pages/HomeFeed/HomeFeed.jsx index c2d4922..7ec284e 100644 --- a/src/pages/HomeFeed/HomeFeed.jsx +++ b/src/pages/HomeFeed/HomeFeed.jsx @@ -1,34 +1,25 @@ import React, { useState, useEffect, useRef } from 'react'; -import { useRecoilValue } from 'recoil'; -// import { useNavigate } from 'react-router-dom'; -import accountNameAtom from '../../atom/accountName'; import styled from 'styled-components'; import HomePost from '../../components/HomePost/HomePost'; import Navbar from '../../components/common/Navbar/Navbar'; import { HeaderBasicNav } from '../../components/common/Header/Header'; -import authAtom from '../../atom/authToken'; import UseFetchToken from '../../Hooks/UseFetchToken'; import Layout from '../../styles/Layout'; -function HomeFeed(props) { - const { GetHomeFeedData } = UseFetchToken(); - - const auth = useRecoilValue(authAtom); - - const accountname = useRecoilValue(accountNameAtom); +function HomeFeed() { const [userData, setUserData] = useState([]); const postListRef = useRef(null); + const { getFeedData } = UseFetchToken(); useEffect(() => { fetchData(0); // 초기 데이터 로드 }, []); - const fetchData = skip => { - GetHomeFeedData(5, skip) - .then(response => { - setUserData(prevData => [...prevData, ...response.data.posts]); - }) - .catch(error => console.error(error)); + const fetchData = async skip => { + const res = await getFeedData(5, skip); + if (res) { + setUserData(prev => [...prev, ...res]); + } }; useEffect(() => { @@ -71,13 +62,6 @@ function HomeFeed(props) { ); } -const HomePostImg = styled.img` - width: 100%; - aspect-ratio: 5 / 3; - border-radius: 10px; - object-fit: cover; -`; - const MyHomePostwarpper = styled.div` height: 86vh; padding-bottom: 20px; diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx index e36062e..02e393c 100644 --- a/src/pages/HomePage/HomePage.jsx +++ b/src/pages/HomePage/HomePage.jsx @@ -5,7 +5,7 @@ import Navbar from '../../components/common/Navbar/Navbar'; import { ButtonMiddle } from '../../components/common/button/Button'; import { ReactComponent as LogoColorImg } from '../../assets/image/LogoColorImg.svg'; import { useNavigate } from 'react-router-dom'; -import Layout from "../../styles/Layout"; +import Layout from '../../styles/Layout'; function HomePage() { return ( @@ -28,7 +28,6 @@ function HomeBlank() {

유저를 검색해 팔로우 해보세요.

- {/* */} 검색 ); @@ -43,13 +42,4 @@ const ContentWrapper = styled.div` margin-top: 4.8rem; `; -const Wrapper = styled.div` - display: flex; - flex-direction: column; - img { - height: 100px; - width: 100px; - } -`; - export default HomePage; diff --git a/src/pages/JoinPage/JoinMember.jsx b/src/pages/JoinPage/JoinMember.jsx index 51cb196..0f342ef 100644 --- a/src/pages/JoinPage/JoinMember.jsx +++ b/src/pages/JoinPage/JoinMember.jsx @@ -34,8 +34,6 @@ export default function JoinMember() { }, }); - const navigate = useNavigate(); - const handleUserNameChange = e => { setUserName(e.target.value); }; diff --git a/src/pages/ProfilePage/MyProfilePage/MyProfilePage.jsx b/src/pages/ProfilePage/MyProfilePage/MyProfilePage.jsx index 79bd8b1..61e55b8 100644 --- a/src/pages/ProfilePage/MyProfilePage/MyProfilePage.jsx +++ b/src/pages/ProfilePage/MyProfilePage/MyProfilePage.jsx @@ -21,6 +21,7 @@ export default function MyProfilePage() { const accountName = location.state.userData.user.accountname; const userData = location.state.userData.user; + console.log(location); const handleClickList = e => { e.preventDefault(); if (!isClickedList) {