#170 ♻️ Refactor: HomeFeed 모듈화하기

FRONTENDSCHOOL5 · Sep 22, 2023 · bfdacc6 · bfdacc6
1 parent da41715
commit bfdacc6
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -12,10 +12,13 @@
 <br />
 
 ## 목차
+
 <<<<<<< HEAD
 <<<<<<< HEAD
 =======
->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
+
+> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
+
 1. [프로젝트 소개](#1-프로젝트-소개)<br/>
 2. [팀원 소개](#2-팀-소개)<br/>
 3. [개발 기간](#3-개발-기간)<br/>
@@ -32,8 +35,8 @@
 <br />
 
 ## 1. 프로젝트 소개
-<<<<<<< HEAD
-=======
+
+# <<<<<<< HEAD
 
 1. 프로젝트 소개
 2. 팀 소개
@@ -51,9 +54,10 @@
 <br />
 
 ## 1. 서비스 소개
->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8
-=======
->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
+
+> > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8
+> > > > > > >
+> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
 
 - 니고네고는 레고를 좋아하는 사람들을 위한 **레고 전용 플랫폼**입니다. <br />
 - 니고네고에서 사용자는 자신이 직접 조립한 레고 사진을 공유하고 다양한 유저와 소통할 수 있습니다. <br />
@@ -66,9 +70,10 @@
 <<<<<<< HEAD
 <<<<<<< HEAD
 =======
->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
-안녕하세요.
-저희는 K(권순호)K(김민지)O(오연주)L(이수아)로 이루어진 꿀조🍯입니다!
+
+> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
+> > > > > > > 안녕하세요.
+> > > > > > > 저희는 K(권순호)K(김민지)O(오연주)L(이수아)로 이루어진 꿀조🍯입니다!
 
 ### 1. 팀원 소개
 
@@ -78,9 +83,8 @@
 | <a href="https://github.com/snowkwon420"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a><br/> | <a href="https://github.com/kimmming"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a><br/> | <a href="https://github.com/Oh5Yeonju"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a><br/> | <a href="https://github.com/suconpa"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a><br/> |
 |                                                                <code>팀원</code>                                                                 |                                                               <code>팀원</code>                                                               |                                                               <code>팀장</code>                                                                |                                                              <code>팀원</code>                                                               |
 
+# <<<<<<< HEAD
 
-<<<<<<< HEAD
-=======
 안녕하세요
 저희는 K(김민지)K(권순호)O(오연주)L(이수아)로 이루어진 꿀조🍯입니다!
 
@@ -91,10 +95,10 @@
 | <img src="https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/117130358/ce15b9da-ed37-4e20-a25e-a13ea239be44" width="180" height="180">  | <img src="https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/117130358/edb95316-8c20-4aa6-806c-1093e32acbac" width="180" height="180"> |                                                     <img src="" width="180" height="180">                                                      | <img src="https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/117130358/844ca019-f967-4298-9b20-472e67009057" width="180" height="180"> |
 | <a href="https://github.com/snowkwon420"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a><br/> |  <a href="https://github.com/kimmming"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a><br/>  | <a href="https://github.com/Oh5Yeonju"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a><br/> |  <a href="https://github.com/suconpa"><img src="https://img.shields.io/badge/GitHub-181717?style=flat&logo=GitHub&logoColor=white"/></a><br/>   |
 |                                                                <code>팀원</code>                                                                 |                                                                <code>팀원</code>                                                                |                                                               <code>팀원</code>                                                                |                                                                <code>팀원</code>                                                                |
->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8
-=======
->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
 
+> > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8
+> > > > > > >
+> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
 
 ### 2. 역할 분담
 
@@ -254,6 +258,7 @@ final-11-NigoNego
 1. 매일 아침 회의 : 당일 진행할 작업 내용 공유
 2. 매일 저녁 회의 : 진행 상황 공유
 ```
+
 <<<<<<< HEAD
 <<<<<<< HEAD
 
@@ -263,12 +268,12 @@ final-11-NigoNego
 
 <img src="https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/117130358/a81bc375-5819-46ca-8a80-80b196254b58" width="150px"> <img src="https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/117130358/595c5907-5a16-407b-a335-13a39566d483" width="150px"> <img src="https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/117130358/186fb197-b3e6-4edf-a189-15e33f2fbb89" width="150px"> <img src="https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/117130358/a81bc375-5819-46ca-8a80-80b196254b58" width="150px">
 
->>>>>>> 8cadd691a860aa7e033ad64e53f8e52054bb14e8
-=======
+> > > > > > > # 8cadd691a860aa7e033ad64e53f8e52054bb14e8
 
 <img src="https://github.com/FRONTENDSCHOOL5/final-11-NigoNego/assets/117130358/f91f41fc-a7f7-4239-8dec-69abe3107c24" width="600" >
 
->>>>>>> bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
+> > > > > > > bea8f4e316b519a9d4f6628ea18d4cb7a080a9fc
+
 ### 6-2. 페어코딩
 
 라이브쉐어를 이용해 로그인/회원가입 페이지를 함께 작업했습니다. <br /><br />
@@ -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 : 필요한 주석 추가 및 변경 |
 
 <br />
 
@@ -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
 
 <br />
 

diff --git 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
@@ -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
@@ -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
@@ -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() {
       <LogoColorImg width="160px" height="160px" />
       <p>유저를 검색해 팔로우 해보세요.</p>
 
-      {/* <ButtonMiddle h="44" content="검색" onClick={handleButtonClick} /> */}
       <ButtonMiddle onClick={handleButtonClick}>검색</ButtonMiddle>
     </ContentWrapper>
   );
@@ -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
@@ -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
@@ -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) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,8 +34,6 @@ export default function JoinMember() { @@
         },
       });
-      const navigate = useNavigate();
       const handleUserNameChange = e => {
         setUserName(e.target.value);
       };
@@ Expand Down @@