-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #79 from SWM-METEOR/FIN-429
마이페이지 API 연동 및 좋아요 한 글 모아보기 구현
- Loading branch information
Showing
11 changed files
with
245 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
61 changes: 61 additions & 0 deletions
61
components/articles/LikeArticleList/LikeArticleListContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| 'use client'; | ||
|
|
||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| import LikeArticleListView from '@/components/articles/LikeArticleList/LikeArticleListView'; | ||
| import axiosInstance from '@/utils/axios'; | ||
| import { ArticlePreviewType } from '@/types/Article'; | ||
|
|
||
| interface ArticleDataType { | ||
| page: number; | ||
| size: number; | ||
| articleList: ArticlePreviewType[]; | ||
| } | ||
|
|
||
| export default function LikeArticleListContainer() { | ||
| const [articleData, setArticleData] = useState<ArticleDataType | null>(null); | ||
| const [page, setPage] = useState(1); | ||
| const [hasMoreItems, setHasMoreItems] = useState(true); | ||
| const maxReqSize = 10; | ||
|
|
||
| async function loadMoreUsersArticles() { | ||
| if (!hasMoreItems) return; | ||
|
|
||
| try { | ||
| const res = await axiosInstance.get(`/users/articles/like?page=${page}&size=${maxReqSize}`); | ||
| const articleRes = res.data.data; | ||
|
|
||
| if (articleRes.articleList.length === 0) { | ||
| setHasMoreItems(false); | ||
| return; | ||
| } | ||
|
|
||
| if (articleData) { | ||
| setArticleData((prevData) => ({ | ||
| ...articleRes, | ||
| articleList: [...(prevData?.articleList || []), ...articleRes.articleList], | ||
| })); | ||
| } else { | ||
| setArticleData(articleRes); | ||
| } | ||
| } catch (error) { | ||
| throw new Error('Failed to fetch article data'); | ||
| } | ||
| } | ||
|
|
||
| // initial fetch | ||
| useEffect(() => { | ||
| loadMoreUsersArticles(); | ||
| }, []); | ||
|
|
||
| if (!articleData) return null; | ||
|
|
||
| return ( | ||
| <LikeArticleListView | ||
| articleList={articleData.articleList} | ||
| loadMoreItems={() => loadMoreUsersArticles()} | ||
| page={page} | ||
| setPage={setPage} | ||
| /> | ||
| ); | ||
| } |
67 changes: 67 additions & 0 deletions
67
components/articles/LikeArticleList/LikeArticleListView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import React, { useState, useEffect, useRef } from 'react'; | ||
|
|
||
| import MyArticleBox from '@/components/articles/ArticlePreview/MyArticleBox'; | ||
| import { ArticlePreviewType } from '@/types/Article'; | ||
|
|
||
| interface PropsType { | ||
| articleList: ArticlePreviewType[]; | ||
| loadMoreItems: () => Promise<void>; | ||
| page: number; | ||
| setPage: React.Dispatch<React.SetStateAction<number>>; | ||
| } | ||
|
|
||
| export default function LikeArticleListView({ | ||
| articleList, | ||
| loadMoreItems, | ||
| page, | ||
| setPage, | ||
| }: PropsType) { | ||
| const [loading, setLoading] = useState(false); | ||
| const observerRef = useRef(null); | ||
|
|
||
| useEffect(() => { | ||
| if (page === 1) return; | ||
|
|
||
| const loadItems = async () => { | ||
| setLoading(true); | ||
| await loadMoreItems(); | ||
| setLoading(false); | ||
| }; | ||
|
|
||
| loadItems(); | ||
| }, [page]); | ||
|
|
||
| useEffect(() => { | ||
| const observer = new IntersectionObserver( | ||
| (entries) => { | ||
| if (entries[0].isIntersecting) { | ||
| setPage((prevPage) => prevPage + 1); | ||
| } | ||
| }, | ||
| { threshold: 0.1 } | ||
| ); | ||
|
|
||
| if (observerRef.current) { | ||
| observer.observe(observerRef.current); | ||
| } | ||
|
|
||
| return () => { | ||
| if (observerRef.current) { | ||
| observer.unobserve(observerRef.current); | ||
| } | ||
| }; | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="w-[1000px] mt-[40px]"> | ||
| <p className="text-[20px] font-bold">좋아요한 글 보기</p> | ||
| <hr className="mt-[15px] w-full text-black mb-[30px]" /> | ||
| <div className="grid grid-cols-2 gap-[20px]"> | ||
| {articleList.map((article) => ( | ||
| <MyArticleBox key={article.id} {...article} nickname={article.authorNickname} /> | ||
| ))} | ||
| </div> | ||
| <div ref={observerRef}></div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| 'use client'; | ||
|
|
||
| import FeedListView from '@/components/feed/FeedListView'; | ||
| export default function FeedListContainer() { | ||
| return <FeedListView />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export default function FeedListView() { | ||
| return ( | ||
| <div className="w-full h-full mt-[40px] bg-main"> | ||
| <div className="w-full h-[280px] bg-white rounded-[20px] shadow-[0_0_10px_0_rgba(0,0,0,0.05)]"> | ||
| <div className="flex"> | ||
| <span>이미지</span> | ||
| <span>유리</span> | ||
| <span>날짜</span> | ||
| </div> | ||
| <h1>글 제목</h1> | ||
| <article>글 내용</article> | ||
| <hr className="w-full text-[#EEEEEE] mt-[12.5px]" /> | ||
| <div>XX님이 댓글을 남김</div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,46 @@ | ||
| 'use client'; | ||
|
|
||
| import { useQueries } from '@tanstack/react-query'; | ||
|
|
||
| import axiosInstance from '@/utils/axios'; | ||
| import ProfileBoxView from '@/components/user/ProfileBox/ProfileBoxView'; | ||
|
|
||
| export default function ProfileBoxContainer() { | ||
| // 데이터 패칭 | ||
| const fetchNickname = async () => { | ||
| const res = await axiosInstance.get('/users/nickname'); | ||
| return res.data.data.nickname; | ||
| }; | ||
|
|
||
| const fetchFollowerCount = async () => { | ||
| const res = await axiosInstance.get('/followers/count'); | ||
| console.log(res); | ||
| return res.data.data.count; | ||
| }; | ||
|
|
||
| const fetchProfileImageUrl = async () => { | ||
| const res = await axiosInstance.get('/users/profile-image-url'); | ||
| console.log(res); | ||
| return res.data.data.profileImageUrl; | ||
| }; | ||
|
|
||
| const results = useQueries({ | ||
| queries: [ | ||
| { queryKey: ['nickname'], queryFn: fetchNickname }, | ||
| { queryKey: ['followerCount'], queryFn: fetchFollowerCount }, | ||
| { queryKey: ['profileImage'], queryFn: fetchProfileImageUrl }, | ||
| ], | ||
| }); | ||
|
|
||
| const nickname = results[0].data; | ||
| const followerCount = results[1].data; | ||
| const profileImageUrl = results[2].data; | ||
|
|
||
| return <ProfileBoxView />; | ||
| return ( | ||
| <ProfileBoxView | ||
| nickname={nickname} | ||
| followerCount={followerCount} | ||
| profileImageUrl={profileImageUrl} | ||
| /> | ||
| ); | ||
| } |
Oops, something went wrong.