Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…ront into feat/notification
  • Loading branch information
jiohjung98 committed Oct 15, 2024
2 parents 400092d + 7be57e0 commit d128f36
Show file tree
Hide file tree
Showing 12 changed files with 274 additions and 80 deletions.
63 changes: 63 additions & 0 deletions src/app/mypage/notice/[id]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import Image from 'next/image';
const NoticeDetailPage = () => {
return (
<div className=" max-w-[640px] mx-auto">
<Image
src={'/images/detail/CaretLeft.svg'}
width={24}
height={24}
alt="Left Arrow"
className="mb-[34px] mt-[15px]"
/>
<div className=" flex flex-col ">
<div className=" text-base font-bold mb-[12px]">23기 배당금 지급 안내</div>

<div className=" text-gray-400">2024.06.06</div>

<div className=" w-full h-[1px] bg-gray-200 my-[20px]" />
<div className="text-gray-400 mb-[40px]">
공지자료 내용 안내 노출란입니다. 공지자료 내용 안내 노출란입니다. 공지자료 내용
안내 노출란입니다. 공지자료 내용 안내 노출란입니다. 공지자료 내용 안내
노출란입니다. 공지자료 내용 안내 노출란입니다. 공지자료 내용 안내 노출란입니다.
공지자료 내용 안내 노출란입니다.
</div>

<div className=" border-gray-200 rounded-lg border-[1px] flex justify-between px-[20px] py-[16px] mb-[12px]">
<div className=" flex">
<Image
src={'/images/detail/FileText.svg'}
width={20}
height={20}
alt="File Text"
/>
<div>1호 23기 배당 안내문 1.pdf</div>
</div>
<Image
src={'/images/detail/DownloadSimple.svg'}
width={20}
height={20}
alt="Download Simple"
/>
</div>
<div className=" border-gray-200 rounded-lg border-[1px] flex justify-between px-[20px] py-[16px]">
<div className=" flex">
<Image
src={'/images/detail/FileText.svg'}
width={20}
height={20}
alt="File Text"
/>
<div>2호 23기 배당 안내문 1.pdf</div>
</div>
<Image
src={'/images/detail/DownloadSimple.svg'}
width={20}
height={20}
alt="Download Simple"
/>
</div>
</div>
</div>
);
};
export default NoticeDetailPage;
76 changes: 76 additions & 0 deletions src/app/mypage/notice/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
'use client';
import Container from '@/components/common/Container';
import NoticeItemSkeleton from '@/components/skeleton/NoticeItemSkeleton';
import UseNoticeLists from '@/factory/useNoticeLists';
import { INoticeItem } from '@/types/BuildingProductType';
import { useCallback } from 'react';
import { Virtuoso } from 'react-virtuoso';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
const NoticePage = () => {
const router = useRouter();
const category = 'sou.8';

const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading } =
UseNoticeLists(category);

const loadMore = useCallback(() => {
if (hasNextPage && !isFetching && !isFetchingNextPage && !isLoading) {
setTimeout(() => {
fetchNextPage();
}, 200);
}
}, [fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading]);

// const allPosts = data?.pages?.flat() || [];
const allPosts = data?.pages.flatMap((page) => page.notice) || [];
// const allPosts = data?.pages[0].notice;

return (
<Container>
<Image
src={'/images/detail/CaretLeft.svg'}
width={24}
height={24}
alt="Left Arrow"
className="mb-[34px] mt-[15px] ml-[10px]"
onClick={() => router.back()}
/>
<div>
<div className="flex justify-start text-2xl ml-[10px] mt-[15px] font-bold">
공지사항
</div>

<div className="max-w-[1000px] mx-auto mt-[32px]">
{isLoading ? (
Array.from({ length: 5 }).map((_, i) => <NoticeItemSkeleton key={i} />)
) : (
<Virtuoso
style={{ height: '200px', margin: '0px' }}
useWindowScroll
totalCount={allPosts.length}
data={allPosts}
endReached={loadMore}
itemContent={(index, item: INoticeItem) => (
<NoticeItem key={item.id} {...item} />
)}
/>
)}
</div>
</div>
</Container>
);
};

export default NoticePage;

const NoticeItem = ({ content, id, noticeDay, title }: INoticeItem) => {
return (
<div
key={id}
className=" flex flex-col border-b-[1px] border-gray-200 py-[20px] px-[20px] rounded-lg">
<div className="text-base font-bold mb-[12px]">{title}</div>
<div className="text-gray-400">{noticeDay}</div>
</div>
);
};
28 changes: 20 additions & 8 deletions src/app/product/detail/music/[id]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,19 +63,24 @@ const MusicDetailpage = (props: any) => {
className="object-cover w-[181px] h-[181px] rounded-[8px] "
/>

<div className="desk:hidden desk2:flex flex-col ml-[28px] ">
<div className="desk:hidden desk2:flex flex-col ml-[28px] h-[180px] ">
<div className="flex">
<div className="bg-gray-200 text-gray-400 rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
{CATEGORY[data?.category as string]}
</div>
<div className="text-gray-400 ml-[3px]">{data?.platform}</div>
<div className="text-gray-400 ml-[3px]">{data?.platform}</div>
</div>

<div className="w-80 text-black text-2xl font-bold mb-[60px] ">
{data?.name}
<div className="w-80 flex items-center ">
<div className=" text-black text-2xl font-bold ">{data?.name}</div>
<span className="text-sm font-bold mt-1 ml-3 ">{data?.singer}</span>
</div>

<div className="desk2:flex desk:hidden">
<div className="ml-2 mt-[10px] font-bold">
과거 1년 저작권료(1주){' '}
<span className="text-red-500 ml-1">
{data?.yearDvide.toLocaleString()} ({data?.yearDvideRate}%)
</span>
</div>
<div className="desk2:flex desk:hidden flex-1 items-end">
<Link href={data?.link || '#'}>
<div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
<div>해당 플랫폼으로 이동</div>
Expand Down Expand Up @@ -110,7 +115,7 @@ const MusicDetailpage = (props: any) => {
<div className="desk2:hidden desk:flex flex-col">
<div className="flex flex-col desk2:ml-[28px] desk:ml-[5px] ">
<div className="flex">
<div className="bg-gray-200 text-gray-400 rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
<div className="bg-gray-200 text-gray-400 rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[10px] ">
{CATEGORY[data?.category || '']}
</div>
<div className="text-gray-400 ml-[3px]">{data?.platform}</div>
Expand All @@ -119,6 +124,13 @@ const MusicDetailpage = (props: any) => {
<div className="w-80 text-black text-2xl font-bold desk2:mb-[60px] desk:mb-[20px] ">
{data?.name}
</div>
<div className="text-sm font-bold mb-[5px] "> {data?.singer}</div>
<div className=" mb-[20px] font-bold">
과거 1년 저작권료(1주)
<span className="text-red-500 ml-1">
{data?.yearDvide.toLocaleString()} ({data?.yearDvideRate}%)
</span>
</div>
</div>
</div>

Expand Down
6 changes: 3 additions & 3 deletions src/components/common/Navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Navbar = () => {
onClick={() => {
router.push('/newissue');
}}
className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
className={` desk:whitespace-nowrap px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
${pathname === '/newissue' ? 'text-black border-b-[2px] border-black' : 'text-gray300'}
`}>
최신이슈
Expand All @@ -32,7 +32,7 @@ const Navbar = () => {
onClick={() => {
router.push('/product');
}}
className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
className={` desk:whitespace-nowrap px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
${pathname === '/product' ? 'text-black border-b-[2px] border-black' : 'text-gray300'}
`}>
조각투자 상품
Expand All @@ -41,7 +41,7 @@ const Navbar = () => {
onClick={() => {
router.push('/practicepage');
}}
className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
className={` desk:whitespace-nowrap px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
${pathname === '/practicepage' ? 'text-black border-b-[2px] border-black' : 'text-gray300'}
`}>
학습하기
Expand Down
121 changes: 62 additions & 59 deletions src/components/product/Bookmark.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import ProductBookmarkContentList from './contentlist/ProductBookmarkContentList
import Image from 'next/image';
import { useQuery } from '@tanstack/react-query';
import { axiosInstance } from '@/service/axiosInstance';
import Link from 'next/link';
interface IProductBuildingProps {
content:
| IProductDealDetailData['product']
Expand Down Expand Up @@ -53,71 +54,73 @@ const Bookmark = ({ content, totalPages, pageNumber }: IProductBuildingProps) =>
if (isLoading) return <div></div>;
if (error) return <div></div>;
return (
<div className='min-h-[calc(100dvh-134.5px)] flex flex-col sm:min-h-[calc(100vh-60px)] sm:mb-0'>
<div className="min-h-[calc(100dvh-134.5px)] flex flex-col sm:min-h-[calc(100vh-60px)] sm:mb-0">
<Container>
<div>
<Image
src="/images/product/LeftVector.svg"
alt=""
width={10}
height={10}
className="mt-[15px]"
/>
<Link href={'/mypage'}>
<Image
src="/images/product/LeftVector.svg"
alt=""
width={10}
height={10}
className="mt-[15px]"
/>
</Link>

<div className=" text-2xl font-bold mt-[20px]">
관심종목{' '}
<span className="ml-[10px] font-normal text-purple-500">{bookmarks}</span>
</div>
<div className=" desk:overflow-scroll scrollbar-hide desk2:overflow-visible mb-3 mt-5 sm:mt-8 flex justify-between sm:justify-start items-center gap-5 border-b border-gray100 text-mobileTitle sm:text-title2 px-5 sm:px-0">
<div
onClick={() => {
setCategory('all');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'all' || category == null ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
전체
</div>
<div
onClick={() => {
setCategory('building');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'building' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
부동산
</div>
<div
onClick={() => {
setCategory('music');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'music' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
음악저작권
<div className=" text-2xl font-bold mt-[20px]">
관심종목{' '}
<span className="ml-[10px] font-normal text-purple-500">{bookmarks}</span>
</div>
<div
onClick={() => {
setCategory('cow');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'cow' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
한우
<div className=" desk:overflow-scroll scrollbar-hide desk2:overflow-visible mb-3 mt-5 sm:mt-8 flex justify-between sm:justify-start items-center gap-5 border-b border-gray100 text-mobileTitle sm:text-title2 px-5 sm:px-0">
<div
onClick={() => {
setCategory('all');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'all' || category == null ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
전체
</div>
<div
onClick={() => {
setCategory('building');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'building' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
부동산
</div>
<div
onClick={() => {
setCategory('music');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'music' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
음악저작권
</div>
<div
onClick={() => {
setCategory('cow');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'cow' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
한우
</div>
<div
onClick={() => {
setCategory('art');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'art' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
미술품
</div>
<div
onClick={() => {
setCategory('content');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'content' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
콘텐츠
</div>
</div>
<div
onClick={() => {
setCategory('art');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'art' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
미술품
</div>
<div
onClick={() => {
setCategory('content');
}}
className={`pb-3 whitespace-nowrap sm:pb-5 cursor-pointer ${category === 'content' ? ' text-gray700 border-b-2 border-normal ' : 'text-gray300'}`}>
콘텐츠
</div>
</div>

<ProductBookmarkContentList
content={contentData as IProductDealDetailData['product']}
totalPages={totalPages}
pageNumber={pageNumber}
/>
<ProductBookmarkContentList
content={contentData as IProductDealDetailData['product']}
totalPages={totalPages}
pageNumber={pageNumber}
/>
</div>
</Container>
</div>
Expand Down
15 changes: 15 additions & 0 deletions src/components/product/Filter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,24 @@ const Filter = () => {
const sort = searchParams.get('category');

const handleClick = (key: string) => {
const scrollPosition = window.innerHeight * 0.7;

// 현재 미술품 콘텐츠가 없어서 특정하게 설정한 로직
params.set('subcategory', 'trade');
params.set('sort', 'lastDivide_rate desc');
if (key === 'art' || key === 'content') {
params.set('subcategory', 'end');
params.set('sort', 'end');
}
//////////////////

params.set('category', key);
params.set('page', '1');
router.replace(`?${params.toString()}`, { scroll: false });
window.scrollTo({
top: scrollPosition,
behavior: 'smooth'
});
};
interface FilterElementType {
[key: string]: { name: string; img: string };
Expand Down
1 change: 0 additions & 1 deletion src/components/product/Product.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ const Product = ({

return (
<div className="">
{/* <Navbar /> */}
<Filter />
<div className="w-full h-[168px] bg-gradient-to-b from-[#713ce2] to-[#5100ff]">
<Container>
Expand Down
Loading

0 comments on commit d128f36

Please sign in to comment.