Skip to content

Commit

Permalink
Merge pull request #294 from ssu-student-union/fix/#292_detail_image
Browse files Browse the repository at this point in the history 
Fix/#292 detail image
  • Loading branch information
@jongse7
jongse7 authored Oct 27, 2024
2 parents 853d82e + cf80752 commit 748b150
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 140 deletions.
4 changes: 2 additions & 2 deletions src/pages/audit/auditDetail/container/auditDetailContentSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ export function AuditDetailContentSection({ content, images = [] }: AuditDetailC
return (
<div className="pt-[32px]">
<Viewer initialValue={content} />
<div className="h-[32px]" />
<div className="h-[32px] xs:flex xs:flex-col xs:items-center sm:flex sm:flex-col sm:items-center " />
{images?.map((image, index) => (
<div key={image + index}>
<img
src={image}
alt={`ERROR 404`}
className={`${index === images.length - 1 ? 'pb-[32px]' : 'pb-[24px]'} h-[375px] w-auto xs:h-[150px] sm:h-[300px]`}
className={`${index === images.length - 1 ? 'pb-[32px]' : 'pb-[24px]'} h-auto w-[640px] xs:w-full sm:w-full`}
/>
</div>
))}
Expand Down
4 changes: 2 additions & 2 deletions src/pages/notice/noticeDetail/container/noticeDetailContentSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ export function NoticeDetailContentSection({ content, images = [] }: NoticeDetai
return (
<div className="pt-[32px]">
<Viewer initialValue={content} />
<div className="h-[32px]" />
<div className="h-[32px] xs:flex xs:flex-col xs:items-center sm:flex sm:flex-col sm:items-center " />
{images?.map((image, index) => (
<div key={image + index}>
<img
src={image}
alt={`ERROR 404`}
className={`${index === images.length - 1 ? 'pb-[32px]' : 'pb-[24px]'} h-[375px] w-auto xs:h-[150px] sm:h-[300px]`}
className={`${index === images.length - 1 ? 'pb-[32px]' : 'pb-[24px]'} h-auto w-[640px] xs:w-full sm:w-full`}
/>
</div>
))}
Expand Down
46 changes: 46 additions & 0 deletions src/pages/partnership/hook/usePartnership.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { useGetBoardPostSearch } from '@/hooks/useGetBoardPostSearch';
import { useResponseBoard } from '@/hooks/useResponseBoard';
import { useCurrentPage } from '@/hooks/useCurrentPage';
import { useRecoilValue } from 'recoil';
import { SearchState } from '@/recoil/atoms/atom';
import { useEffect } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { GetPartnershipBoardPostsResponse } from '@/types/getPartnershipBoardPosts';
import { PartnershipSubcategories } from '../const';

export function usePartnership(boardCode: string, category: string) {
const { itemsPerPage } = useResponseBoard();
const { currentPage, handlePageChange } = useCurrentPage();

const searchQuery = useRecoilValue(SearchState);

const subcategories = Object.values(PartnershipSubcategories).filter(Boolean) as string[];
const selectedCategory = category === '전체' ? null : category;

const queryClient = useQueryClient();
const { data, isLoading, isError, refetch } = useGetBoardPostSearch<GetPartnershipBoardPostsResponse>({
boardCode,
take: itemsPerPage,
page: currentPage - 1,
category: selectedCategory ?? undefined,
q: searchQuery,
});

useEffect(() => {
if (!queryClient.getQueryData(['get-board-boardCode-posts-search'])) {
refetch();
}
}, [queryClient, refetch]);

const totalPages: number = data?.data?.pageInfo?.totalPages ?? 0;

return {
data,
totalPages,
currentPage,
handlePageChange,
subcategories,
isLoading,
isError,
};
}
147 changes: 16 additions & 131 deletions src/pages/partnership/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,27 @@
import { HeadLayout } from '@/template/HeadLayout';
import { BodyLayout } from '@/template/BodyLayout';
import { PostCardBasic } from '@/components/PostCard/PostCardBasicMissing';
import { Spacing } from '@/components/Spacing';
import { useResize } from '@/hooks/useResize';
import { Size } from '@/components/PostCard/const/state';
import { BoardSelector } from '@/components/Board/BoardSelector';
import { PartnershipSubcategories } from './const';
import { useBoardSelect } from '@/hooks/useBoardSelect';
import { useEffect, useMemo, useState } from 'react';
import { PartnershipSubcategoriesType } from './type';
import { GetPartnershipBoardPostsResponse, PartnershipPostListResDto } from '@/types/getPartnershipBoardPosts';
import { useNavigate } from 'react-router-dom';
import { chunkArray } from './utils';
import { formatYYYYMMDD } from '@/utils/formatYYYYMMDD';
import { useRecoilValue } from 'recoil';
import { SearchState } from '@/recoil/atoms/atom';
import { useGetBoardPostSearch } from '@/hooks/useGetBoardPostSearch';
import { useQueryClient } from '@tanstack/react-query';
import { useMemo } from 'react';
import { usePartnership } from './hook/usePartnership';
import { BoardContent } from '@/template/board/BoardContent';

export function PartnershipPage() {
const { width } = useResize();
const navigate = useNavigate();
const searchQuery = useRecoilValue(SearchState);

const { selectedSubcategories, onSubcategorySelect } = useBoardSelect<PartnershipSubcategoriesType>(
PartnershipSubcategories[0]
);
const [currentPage, setCurrentPage] = useState(1);
const [currentTake, setCurrentTake] = useState(9);

const queryClient = useQueryClient();
const { data, isLoading, refetch } = useGetBoardPostSearch<GetPartnershipBoardPostsResponse>({
page: currentPage - 1,
take: currentTake,
category: selectedSubcategories === '전체' ? undefined : selectedSubcategories,
boardCode: '제휴게시판',
q: searchQuery,
});

useEffect(() => {
if (!queryClient.getQueryData(['get-board-boardCode-posts-search'])) {
refetch();
}
}, [queryClient, refetch]);
const { data, isLoading, totalPages, currentPage, handlePageChange } = usePartnership(
'제휴게시판',
selectedSubcategories
);

const posts = data?.data.postListResDto || []; // 게시물 리스트
const partnershipCount = useMemo(() => {
if (isLoading) {
return 0;
Expand All @@ -54,77 +31,6 @@ export function PartnershipPage() {
return data?.data.pageInfo.totalElements;
}, [data?.data.pageInfo.totalElements, isLoading]);

useEffect(() => {
if (width < 1440) {
setCurrentTake(5);
refetch();
} else if (width >= 1440 && width < 1920) {
setCurrentTake(6);
refetch();
} else if (width >= 1920) {
setCurrentTake(9);
refetch();
}
refetch();
}, [width, refetch]);

const renderPostCardBasic = (items: PartnershipPostListResDto[], size: Size) => (
<section className="flex h-fit w-full flex-col justify-between">
{items.map((item, index) => (
<div key={item.postId}>
<PostCardBasic
title={`[${item.category}] ${item.title}`}
subtitle={item.content}
date={formatYYYYMMDD(item.date)}
imgUrl={item.thumbNail}
size={size}
onClick={() => {
if (data?.data.deniedAuthorities.includes('READ')) {
const check = window.confirm('제휴 안내는 로그인된 사용자만 볼 수 있습니다. 로그인 하시겠습니까?');
if (check) {
navigate('/register');
} else {
return;
}
} else {
navigate(`/partnership/${item.postId}`, { state: { postId: item.postId } });
}
}}
/>
{index < items.length - 1 && <Spacing size={20} direction="vertical" />}
</div>
))}
</section>
);

const renderChunkedPostCards = (chunkSize: number) =>
chunkArray<PartnershipPostListResDto>(posts, chunkSize)?.map((items, chunkIndex) => (
<div key={`chunk-${chunkIndex}`} className="flex h-fit w-full justify-between">
{items.map((item) => (
<PostCardBasic
key={item.postId}
title={`[${item.category}] ${item.title}`}
subtitle={item.content}
date={formatYYYYMMDD(item.date)}
profileName={'US:SUM'}
imgUrl={item.thumbNail}
onClick={() => {
if (data?.data.deniedAuthorities.includes('READ')) {
const check = window.confirm('제휴 안내는 로그인된 사용자만 볼 수 있습니다. 로그인 하시겠습니까?');
if (check) {
navigate('/register');
} else {
return;
}
} else {
navigate(`/partnership/${item.postId}`, { state: { postId: item.postId } });
}
}}
/>
))}
</div>
));

return (
<>
<HeadLayout
Expand All @@ -138,10 +44,10 @@ export function PartnershipPage() {
}
/>
<BodyLayout
totalPages={data?.data.pageInfo.totalPages ?? 1}
totalPages={totalPages ?? 1}
currentPage={currentPage}
onPageChange={(number) => {
setCurrentPage(number);
handlePageChange(number);
}}
onWriteClick={() => {
window.scrollTo(0, 0);
Expand All @@ -155,34 +61,13 @@ export function PartnershipPage() {
onSubcategorySelect={onSubcategorySelect}
/>
<Spacing size={40} direction="vertical"></Spacing>

{posts.length === 0 ? (
<div className="flex h-[32rem] w-full items-center justify-center text-gray-600">
등록된 게시물이 없습니다
</div>
) : (
<>
{/* xs */}
{width < 720 && renderPostCardBasic(posts, Size.small)}

{/* sm, md, lg */}
{width >= 720 && width < 1440 && renderPostCardBasic(posts, Size.medium)}

{/* xl */}
{width >= 1440 && width < 1920 && (
<section className="flex h-fit w-full flex-col justify-between gap-[40px]">
{renderChunkedPostCards(2)}
</section>
)}

{/* xxl */}
{width >= 1920 && (
<section className="flex h-fit w-full flex-col justify-between gap-[40px]">
{renderChunkedPostCards(3)}
</section>
)}
</>
)}
<BoardContent
boardName="제휴게시판"
data={data?.data.postListResDto}
isDenied={data?.data.deniedAuthorities.includes('READ')}
isLoading={isLoading}
isPartnership={true}
/>
</BodyLayout>
</>
);
Expand Down
6 changes: 3 additions & 3 deletions src/pages/partnership/partnershipDetail/container/PartnershipDetailContentSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ export function PartnershipDetailContentSection({ content, images = [] }: Partne
return (
<div className="pt-[32px]">
<Viewer initialValue={content} />
<div className="h-[32px]" />
<div className="h-[32px] xs:flex xs:flex-col xs:items-center sm:flex sm:flex-col sm:items-center " />
{images?.map((image, index) => (
<div key={index}>
<div key={image + index}>
<img
src={image}
alt={`ERROR 404`}
className={`${index === images.length - 1 ? 'pb-[32px]' : 'pb-[24px]'} h-[375px] w-auto xs:h-[150px] sm:h-[300px]`}
className={`${index === images.length - 1 ? 'pb-[32px]' : 'pb-[24px]'} h-auto w-[640px] xs:w-full sm:w-full`}
/>
</div>
))}
Expand Down
28 changes: 26 additions & 2 deletions src/template/board/BoardContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,17 @@ interface BoardContentProps {
data?: any[];
className?: string;
isLoading: boolean;
isDenied?: boolean;
isPartnership?: boolean;
}

export function BoardContent({ boardName, data, isLoading }: BoardContentProps) {
export function BoardContent({
boardName,
data,
isLoading,
isPartnership = false,
isDenied = false,
}: BoardContentProps) {
const navigate = useNavigate();
const { size } = useResponseBoard();
const screenWidth: number = window.innerWidth;
Expand Down Expand Up @@ -104,6 +112,7 @@ export function BoardContent({ boardName, data, isLoading }: BoardContentProps)
if (status === 'Emergency' && thumbnail === undefined) {
thumbnail = `image/default/thumbnail/thumbnail_299px.png`;
}

return (
<div
key={post.postId}
Expand All @@ -118,7 +127,22 @@ export function BoardContent({ boardName, data, isLoading }: BoardContentProps)
badgeType={status}
profileName={post.author}
className="cursor-pointer"
onClick={() => navigate(`/${nameToUrl.get(boardName)}/${post.postId}`, { state: { postId: post.postId } })}
onClick={
isPartnership
? () => {
if (isDenied) {
const check = window.confirm('제휴 안내는 로그인된 사용자만 볼 수 있습니다. 로그인 하시겠습니까?');
if (check) {
navigate('/register');
} else {
return;
}
} else {
navigate(`/partnership/${post.postId}`, { state: { postId: post.postId } });
}
}
: () => navigate(`/${nameToUrl.get(boardName)}/${post.postId}`, { state: { postId: post.postId } })
}
/>
</div>
);
Expand Down

0 comments on commit 748b150

Please sign in to comment.