From 62cc78924c52d2dfb0c9d9c6f992abf49be8ba2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=EB=82=98=ED=98=84?= <142777396+Nahyun-Kang@users.noreply.github.com> Date: Sun, 11 Feb 2024 22:41:34 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=ED=83=90=EC=83=89=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1,=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EB=B0=94=EC=9D=B8=EB=94=A9=20(=EC=9E=84?= =?UTF-8?q?=EC=8B=9C)=20(#25)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 3 +- package.json | 1 + public/icons/bell.svg | 9 + public/icons/close_x_gray.svg | 3 + public/icons/logo.svg | 9 + .../_components/ListDetailInner/Footer.tsx | 5 +- .../_components/ListDetailInner/RankList.tsx | 10 +- .../_components/ListDetailInner/index.tsx | 20 +- .../ListDetailOuter/ListInformation.tsx | 23 +- src/app/_api/comment/createComment.ts | 8 + src/app/_api/comment/createReply.ts | 0 src/app/_api/comment/deleteComment.ts | 0 src/app/_api/comment/deleteReply.ts | 0 src/app/_api/comment/getComments.ts | 0 src/app/_api/explore/getRecommendedLists.ts | 9 + src/app/_api/explore/getRecommendedUsers.ts | 9 + src/app/_api/explore/getTrendingLists.ts | 9 + src/app/_api/list/getLists.ts | 8 + src/app/layout.css.ts | 5 + src/app/layout.tsx | 4 +- src/app/page.tsx | 29 +- .../KakaotalkShare/kakaotalkShare.tsx | 4 +- .../exploreComponents/Header.css.ts | 38 +++ src/components/exploreComponents/Header.tsx | 39 +++ .../ListsRecommendation.css.ts | 123 ++++++++ .../exploreComponents/ListsRecommendation.tsx | 84 ++++++ .../exploreComponents/TrendingLists.css.ts | 88 ++++++ .../exploreComponents/TrendingLists.tsx | 89 ++++++ .../UsersRecommendation.css.ts | 102 +++++++ .../exploreComponents/UsersRecommendation.tsx | 112 +++++++ .../exploreComponents/_mockdata/mockdata.ts | 285 ++++++++++++++++++ .../_mockdata/mockdataType.ts | 38 +++ src/lib/constants/queryKeys.ts | 3 + src/lib/types/exploreType.ts | 45 +++ src/lib/types/listType.ts | 38 +++ yarn.lock | 5 + 36 files changed, 1228 insertions(+), 29 deletions(-) create mode 100644 public/icons/bell.svg create mode 100644 public/icons/close_x_gray.svg create mode 100644 public/icons/logo.svg create mode 100644 src/app/_api/comment/createComment.ts create mode 100644 src/app/_api/comment/createReply.ts create mode 100644 src/app/_api/comment/deleteComment.ts create mode 100644 src/app/_api/comment/deleteReply.ts create mode 100644 src/app/_api/comment/getComments.ts create mode 100644 src/app/_api/explore/getRecommendedLists.ts create mode 100644 src/app/_api/explore/getRecommendedUsers.ts create mode 100644 src/app/_api/explore/getTrendingLists.ts create mode 100644 src/app/_api/list/getLists.ts create mode 100644 src/app/layout.css.ts create mode 100644 src/components/exploreComponents/Header.css.ts create mode 100644 src/components/exploreComponents/Header.tsx create mode 100644 src/components/exploreComponents/ListsRecommendation.css.ts create mode 100644 src/components/exploreComponents/ListsRecommendation.tsx create mode 100644 src/components/exploreComponents/TrendingLists.css.ts create mode 100644 src/components/exploreComponents/TrendingLists.tsx create mode 100644 src/components/exploreComponents/UsersRecommendation.css.ts create mode 100644 src/components/exploreComponents/UsersRecommendation.tsx create mode 100644 src/components/exploreComponents/_mockdata/mockdata.ts create mode 100644 src/components/exploreComponents/_mockdata/mockdataType.ts create mode 100644 src/lib/types/exploreType.ts diff --git a/.env b/.env index cecee240..c67d293b 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ -NEXT_PUBLIC_BASE_URL = "https://dev.api.listywave.com" \ No newline at end of file +NEXT_PUBLIC_KAKAO_API_KEY=8a62d21afa7f96e9f0d58b577e1e4747 +NEXT_PUBLIC_BASE_URL=localhost:3000 \ No newline at end of file diff --git a/package.json b/package.json index ac866ece..f62ef39d 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "react-scripts": "^5.0.1", "react-select": "^5.8.0", "react-toastify": "^10.0.4", + "swiper": "^11.0.6", "zustand": "^4.4.7" }, "devDependencies": { diff --git a/public/icons/bell.svg b/public/icons/bell.svg new file mode 100644 index 00000000..c5ff86ff --- /dev/null +++ b/public/icons/bell.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icons/close_x_gray.svg b/public/icons/close_x_gray.svg new file mode 100644 index 00000000..0fe86514 --- /dev/null +++ b/public/icons/close_x_gray.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/logo.svg b/public/icons/logo.svg new file mode 100644 index 00000000..5c780950 --- /dev/null +++ b/public/icons/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/Footer.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailInner/Footer.tsx index 9efa9ce8..17666ac0 100644 --- a/src/app/[userNickname]/[listId]/_components/ListDetailInner/Footer.tsx +++ b/src/app/[userNickname]/[listId]/_components/ListDetailInner/Footer.tsx @@ -12,6 +12,7 @@ import * as styles from './Footer.css'; import CollectIcon from '/public/icons/collect.svg'; import ShareIcon from '/public/icons/share.svg'; import EtcIcon from '/public/icons/etc.svg'; +import { CollaboratorType, ListItemsType } from '@/lib/types/listType'; interface BottomSheetOptionsProps { key: string; @@ -28,8 +29,8 @@ interface FooterProps { listId: string; title: string; description: string; - items: []; - collaborators: []; + items: ListItemsType[]; + collaborators: CollaboratorType[]; ownerNickname: string; } diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx index 469e865d..77e03a5b 100644 --- a/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx +++ b/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx @@ -1,5 +1,5 @@ 'use client'; - +import Image from 'next/image'; import { ListItemProps } from './index'; import LinkPreview from '@/components/LinkPreview/LinkPreview'; import VideoEmbed from '@/components/VideoEmbed/VideoEmbed'; @@ -11,7 +11,7 @@ interface RankListProps { type?: string; } -function SimpleList({ listData }: RankListProps) { +export function SimpleList({ listData }: RankListProps) { return listData.map((item, index) => { return (
@@ -26,12 +26,14 @@ function SimpleList({ listData }: RankListProps) { } > {index === 0 && } -
{item.rank}
+
{item.ranking}
{item.title}
- {item.imageUrl && img설명} + {item.imageUrl && ( + img설명 + )}
); diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx index 44b3a6b6..0b4f6b95 100644 --- a/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx +++ b/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx @@ -5,10 +5,12 @@ import Header from '@/app/[userNickname]/[listId]/_components/ListDetailInner/He import RankList from '@/app/[userNickname]/[listId]/_components/ListDetailInner/RankList'; import Footer from '@/app/[userNickname]/[listId]/_components/ListDetailInner/Footer'; import * as styles from './index.css'; +import { CollaboratorType, ListItemsType } from '@/lib/types/listType'; export interface ListItemProps { id?: number; rank?: number; + ranking?: number; title?: string; comment?: string; link?: string | null; @@ -31,8 +33,8 @@ interface ListDetailInnerProps { ownerId: number; ownerNickname: string; ownerProfileImageUrl: string; - collaborators: []; - items: []; + collaborators: CollaboratorType[]; + items: ListItemsType[]; isCollected: boolean; isPublic: boolean; backgroundColor: string; @@ -41,7 +43,7 @@ interface ListDetailInnerProps { } function ListDetailInner({ data }: { data: ListDetailInnerProps }) { - const listData = data.items; + const listData = data?.items; const [listType, setListType] = useState('simple'); const handleChangeListType = (target: OptionsProps) => { const value: string = target.value; @@ -49,13 +51,13 @@ function ListDetailInner({ data }: { data: ListDetailInnerProps }) { }; const footerData = { - category: data.category, - listId: data.listId, - title: data.title, - description: data.description, + category: data?.category, + listId: data?.listId, + title: data?.title, + description: data?.description, items: listData, - collaborators: data.collaborators, - ownerNickname: data.ownerNickname, + collaborators: data?.collaborators, + ownerNickname: data?.ownerNickname, }; return ( diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.tsx index 4df16726..a048864e 100644 --- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.tsx +++ b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.tsx @@ -1,13 +1,22 @@ import Image from 'next/image'; +import { useQuery } from '@tanstack/react-query'; +import { useParams } from 'next/navigation'; import Label from '@/components/Label/Label'; import Collaborators from '@/app/[userNickname]/[listId]/_components/ListDetailOuter/Collaborators'; +import { getListDetail } from '@/app/_api/list/getLists'; import timeDiff from '@/lib/utils/timeDiff'; import * as styles from './ListInformation.css'; import { MOCKDATA_LIST } from '../../mockData/mockdata'; +import ListDetailInner from '../ListDetailInner'; +import { LabelType } from '@/lib/types/listType'; const LIST = MOCKDATA_LIST[0]; function ListInformation() { + const params = useParams<{ listId: string }>(); + const { data } = useQuery({ queryKey: ['getListDetail'], queryFn: () => getListDetail(params?.listId) }); + const list = data; + return ( <>
@@ -15,7 +24,7 @@ function ListInformation() {
- {LIST.labels.map((item, idx) => { + {list?.labels.map((item: LabelType, idx: number) => { return (
@@ -23,10 +32,10 @@ function ListInformation() { ); })}
-
{LIST.title}
-
{LIST.description}
+
{list?.title}
+
{list?.description}
-
리스트 컴포넌트
+
-
{LIST.ownerNickname}
+
{list?.ownerNickname}
- {timeDiff(LIST.createdDate)} - {LIST.isPublic ? '공개' : '비공개'} + {timeDiff(list?.createdDate)} + {list?.isPublic ? '공개' : '비공개'}
diff --git a/src/app/_api/comment/createComment.ts b/src/app/_api/comment/createComment.ts new file mode 100644 index 00000000..5e900d00 --- /dev/null +++ b/src/app/_api/comment/createComment.ts @@ -0,0 +1,8 @@ +import axiosInstance from '@/lib/axios/axiosInstance'; +import { ListCreateType, ListIdType } from '@/lib/types/listType'; + +export const createList = async (listId: string, data: string) => { + const response = await axiosInstance.post(`/lists/${listId}/comment`, data); + + return response.data; +}; diff --git a/src/app/_api/comment/createReply.ts b/src/app/_api/comment/createReply.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/_api/comment/deleteComment.ts b/src/app/_api/comment/deleteComment.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/_api/comment/deleteReply.ts b/src/app/_api/comment/deleteReply.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/_api/comment/getComments.ts b/src/app/_api/comment/getComments.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/_api/explore/getRecommendedLists.ts b/src/app/_api/explore/getRecommendedLists.ts new file mode 100644 index 00000000..fe7b207a --- /dev/null +++ b/src/app/_api/explore/getRecommendedLists.ts @@ -0,0 +1,9 @@ +// 리스트 조회 api +import axiosInstance from '@/lib/axios/axiosInstance'; +//리스트 추천 상위 10개 +export async function getRecommendedLists() { + const response = await axiosInstance.get(`/lists`); + return response.data; +} + +export default getRecommendedLists; diff --git a/src/app/_api/explore/getRecommendedUsers.ts b/src/app/_api/explore/getRecommendedUsers.ts new file mode 100644 index 00000000..b313b475 --- /dev/null +++ b/src/app/_api/explore/getRecommendedUsers.ts @@ -0,0 +1,9 @@ +// 리스트 조회 api +import axiosInstance from '@/lib/axios/axiosInstance'; +//리스트 추천 상위 10개 +export async function getRecommendedUsers() { + const response = await axiosInstance.get(`/users/recommend`); + return response.data; +} + +export default getRecommendedUsers; diff --git a/src/app/_api/explore/getTrendingLists.ts b/src/app/_api/explore/getTrendingLists.ts new file mode 100644 index 00000000..72c864f1 --- /dev/null +++ b/src/app/_api/explore/getTrendingLists.ts @@ -0,0 +1,9 @@ +// 리스트 조회 api +import axiosInstance from '@/lib/axios/axiosInstance'; +//리스트 추천 상위 10개 +export async function getTrendingLists() { + const response = await axiosInstance.get(`/lists/explore`); + return response.data; +} + +export default getTrendingLists; diff --git a/src/app/_api/list/getLists.ts b/src/app/_api/list/getLists.ts new file mode 100644 index 00000000..6f4011fe --- /dev/null +++ b/src/app/_api/list/getLists.ts @@ -0,0 +1,8 @@ +// 리스트 조회 api +import axiosInstance from '@/lib/axios/axiosInstance'; + +//리스트 상세 페이지 리스트 조회 api +export async function getListDetail(listId: string | undefined) { + const response = await axiosInstance.get(`/lists/${listId}`); + return response.data; +} diff --git a/src/app/layout.css.ts b/src/app/layout.css.ts new file mode 100644 index 00000000..5a3917dc --- /dev/null +++ b/src/app/layout.css.ts @@ -0,0 +1,5 @@ +import { style } from '@vanilla-extract/css'; + +export const wrapper = style({ + position: 'relative', +}); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 173904db..0c0aa564 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -3,7 +3,6 @@ import { ReactNode } from 'react'; import { ToastContainer } from 'react-toastify'; import Script from 'next/script'; - import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import '@/styles/GlobalStyles.css'; @@ -23,7 +22,7 @@ export default function TempLayout({ children }: { children: ReactNode }) { ListyWave - +