Skip to content

Commit

Permalink
Merge pull request #97 from official-Trippy/feature/#87
Browse files Browse the repository at this point in the history 
feat: ootd 전체글, 팔로잉 구분
  • Loading branch information
@jiohjung98
jiohjung98 authored Aug 5, 2024
2 parents 0d05c41 + f26b2c0 commit c9be506
Showing 1 changed file with 93 additions and 64 deletions.
157 changes: 93 additions & 64 deletions src/components/pages/ootd/RecentOotdPost.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import React, { useState } from 'react';
import React, { useState, useEffect, useTransition } from 'react';
import Cookies from 'js-cookie';
import { useQuery } from 'react-query';
import Image from 'next/image';
Expand All @@ -16,9 +16,17 @@ const PAGE_SIZE = 8;
const RecentOotdPost: React.FC = () => {
const accessToken = Cookies.get('accessToken');
const [page, setPage] = useState(0);
const [orderType, setOrderType] = useState('LATEST');
const [orderType, setOrderType] = useState('LATEST');
const [tab, setTab] = useState<'ALL' | 'FOLLOWING'>(accessToken ? 'FOLLOWING' : 'ALL');
const [isPending, startTransition] = useTransition();
const router = useRouter();

useEffect(() => {
startTransition(() => {
setTab(accessToken ? 'FOLLOWING' : 'ALL');
});
}, [accessToken]);

const { data: memberData, isLoading: memberLoading } = useQuery({
queryKey: ['member', accessToken],
queryFn: () => MemberInfo(accessToken),
Expand All @@ -33,9 +41,11 @@ const RecentOotdPost: React.FC = () => {
);

const { data, isLoading, isError } = useQuery<OotdGetResponse>(
['ootdPosts', page, orderType],
['ootdPosts', page, orderType, tab],
() => fetchAllOotdPosts(page, PAGE_SIZE, orderType),
{ enabled: totalCount !== undefined }
{
enabled: tab === 'ALL' && totalCount !== undefined // Fetch only if tab is 'ALL'
}
);

const totalPages = totalCount ? Math.ceil(totalCount / PAGE_SIZE) : 0;
Expand All @@ -50,18 +60,25 @@ const RecentOotdPost: React.FC = () => {

const handleOrderTypeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setOrderType(event.target.value);
setPage(0);
setPage(0);
};

const handleTabChange = (newTab: 'ALL' | 'FOLLOWING') => {
startTransition(() => {
setTab(newTab);
setPage(0);
});
};

if (isCountLoading || isLoading) {
return null;
if (isCountLoading || (tab === 'ALL' && isLoading && isPending)) {
return <div></div>;
}

if (isCountError || isError || !data) {
if ((tab === 'ALL' && (isCountError || isError)) || (tab === 'FOLLOWING' && isCountError)) {
return <div>Error fetching data</div>;
}

const ootdList = data.result;
const ootdList = tab === 'ALL' ? data?.result || [] : [];

return (
<div className='w-[80%] mx-auto py-[5rem]'>
Expand All @@ -75,8 +92,18 @@ const RecentOotdPost: React.FC = () => {
)}
</div>
<div className='flex text-[1.6rem] pt-[5rem] px-[1rem]'>
<span className='pr-[1rem]'>전체글</span>
<span className='px-[1rem]'>팔로잉</span>
<span
className={`pr-[1rem] cursor-pointer ${tab === 'ALL' ? 'font-bold text-[#fa3463]' : ''}`}
onClick={() => handleTabChange('ALL')}
>
전체글
</span>
<span
className={`px-[1rem] cursor-pointer ${tab === 'FOLLOWING' ? 'font-bold text-[#fa3463]' : ''}`}
onClick={() => handleTabChange('FOLLOWING')}
>
팔로잉
</span>
<select
className='flex w-[8rem] h-[3rem] ml-auto font-medium selectshadow'
value={orderType}
Expand All @@ -87,65 +114,67 @@ const RecentOotdPost: React.FC = () => {
<option value="VIEW">조회순</option>
</select>
</div>
<div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{ootdList.map((item) => (
<div key={item.post.id} className="flex flex-col overflow-hidden cursor-pointer" onClick={() => handleOotdItemClick(item.post.id)}>
{item.post.images.length > 0 && (
<div className="relative w-full h-0 pt-[100%] overflow-hidden">
<Image
className="absolute top-0 left-0 w-full h-full object-cover rounded-xl"
src={item.post.images[0].accessUri}
alt="OOTD"
width={200}
height={200}
/>
</div>
)}
<div className="py-8">
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="relative w-[24px] h-[24px]">
{tab === 'ALL' && (
<div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-8">
{ootdList.map((item) => (
<div key={item.post.id} className="flex flex-col overflow-hidden cursor-pointer" onClick={() => handleOotdItemClick(item.post.id)}>
{item.post.images.length > 0 && (
<div className="relative w-full h-0 pt-[100%] overflow-hidden">
<Image
src={item.member.profileUrl}
alt="Profile"
layout="fill"
objectFit="cover"
className="rounded-full" />
className="absolute top-0 left-0 w-full h-full object-cover rounded-xl"
src={item.post.images[0].accessUri}
alt="OOTD"
width={200}
height={200}
/>
</div>
<span className="text-[#6B6B6B] ml-[5px]">{item.member.nickName}</span>
)}
<div className="py-8">
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="relative w-[24px] h-[24px]">
<Image
src={item.member.profileUrl}
alt="Profile"
layout="fill"
objectFit="cover"
className="rounded-full" />
</div>
<span className="text-[#6B6B6B] ml-[5px]">{item.member.nickName}</span>
</div>
<div className="flex items-center mt-2">
<Image
src={EmptyHeartIcon}
alt="좋아요"
width={20}
height={18}
/>
<span className="mx-2 text-[#cfcfcf]"> {item.post.likeCount}</span>
<Image
src={CommentIcon1}
alt="댓글"
width={18}
height={18}
/>
<span className="mx-2 text-[#cfcfcf]"> {item.post.commentCount}</span>
</div>
</div>
<div className="flex items-center mt-2">
<Image
src={EmptyHeartIcon}
alt="좋아요"
width={20}
height={18}
/>
<span className="mx-2 text-[#cfcfcf]"> {item.post.likeCount}</span>
<Image
src={CommentIcon1}
alt="좋아요"
width={18}
height={18}
/>
<span className="mx-2 text-[#cfcfcf]"> {item.post.commentCount}</span>
</div>
</div>
<div className="mt-4">
<h2 className="text-[1.2rem] font-medium text-[#6B6B6B]">{item.post.body}</h2>
<div className="flex flex-wrap mt-4 gap-2">
{item.post.tags.map((tag, index) => (
<span key={index} className="px-4 py-1 bg-neutral-100 rounded-3xl text-xl justify-center items-center gap-2.5 inline-flex text-[#9d9d9d]">
{tag}
</span>
))}
<div className="mt-4">
<h2 className="text-[1.2rem] font-medium text-[#6B6B6B]">{item.post.body}</h2>
<div className="flex flex-wrap mt-4 gap-2">
{item.post.tags.map((tag, index) => (
<span key={index} className="px-4 py-1 bg-neutral-100 rounded-3xl text-xl justify-center items-center gap-2.5 inline-flex text-[#9d9d9d]">
{tag}
</span>
))}
</div>
</div>
</div>
</div>
</div>
))}
</div>
{totalPages > 1 && (
))}
</div>
)}
{tab === 'ALL' && totalPages > 1 && (
<div className='flex justify-center mt-4'>
{[...Array(totalPages)].map((_, index) => (
<button
Expand Down

0 comments on commit c9be506

Please sign in to comment.