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 - +