Feat: 탐색 페이지 퍼블리싱, 데이터 바인딩 (임시) (#25)

.env

@@ -1 +1,2 @@
-NEXT_PUBLIC_BASE_URL = "https://dev.api.listywave.com"
+NEXT_PUBLIC_KAKAO_API_KEY=8a62d21afa7f96e9f0d58b577e1e4747
+NEXT_PUBLIC_BASE_URL=localhost:3000

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": {

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;
 }
 

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 (
       <div key={item.id} className={styles.simpleItemWrapper}>
@@ -26,12 +26,14 @@ function SimpleList({ listData }: RankListProps) {
             }
           >
             {index === 0 && <CrownIcon className={styles.crownIcon} />}
-            <div className={styles.rankText}>{item.rank}</div>
+            <div className={styles.rankText}>{item.ranking}</div>
           </div>
           <div className={styles.titleText}>{item.title}</div>
         </div>
         <div className={styles.simpleImageWrapper}>
-          {item.imageUrl && <img className={styles.simpleImage} src={item.imageUrl} alt="img설명" />}
+          {item.imageUrl && (
+            <Image className={styles.simpleImage} src={item.imageUrl} alt="img설명" width={70} height={72} />
+          )}
         </div>
       </div>
     );

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,21 +43,21 @@ 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;
     setListType(value);
   };
 
   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 (

src/app/[userNickname]/[listId]/_components/ListDetailOuter/ListInformation.tsx

@@ -1,32 +1,41 @@
 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 (
     <>
       <div className={styles.wrapper}>
         <div className={styles.categoryWrapper}>
           <div className={styles.labelWrapper}>
             <Label colorType="skyblue">음악</Label>
           </div>
-          {LIST.labels.map((item, idx) => {
+          {list?.labels.map((item: LabelType, idx: number) => {
             return (
               <div className={styles.labelWrapper} key={idx.toString()}>
                 <Label colorType="blue">{`${item.name}`}</Label>
               </div>
             );
           })}
         </div>
-        <div className={styles.listTitle}>{LIST.title}</div>
-        <div className={styles.listDescription}>{LIST.description}</div>
+        <div className={styles.listTitle}>{list?.title}</div>
+        <div className={styles.listDescription}>{list?.description}</div>
       </div>
-      <div className={styles.listComponentTemporary}>리스트 컴포넌트</div>
+      <ListDetailInner data={list} />
       <div className={styles.bottomWrapper}>
         <div className={styles.bottomLeftWrapper}>
           <Image
@@ -37,10 +46,10 @@ function ListInformation() {
             className={styles.profileImage}
           ></Image>
           <div className={styles.informationWrapper}>
-            <div className={styles.listOwnerNickname}>{LIST.ownerNickname}</div>
+            <div className={styles.listOwnerNickname}>{list?.ownerNickname}</div>
             <div className={styles.infoDetailWrapper}>
-              <span>{timeDiff(LIST.createdDate)}</span>
-              <span>{LIST.isPublic ? '공개' : '비공개'}</span>
+              <span>{timeDiff(list?.createdDate)}</span>
+              <span>{list?.isPublic ? '공개' : '비공개'}</span>
             </div>
           </div>
         </div>

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<ListIdType>(`/lists/${listId}/comment`, data);
+
+  return response.data;
+};

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;

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;

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;

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

src/app/layout.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  position: 'relative',
+});

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 }) {
     <html lang="ko">
       <head>
         <title>ListyWave</title>
-
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
         <Script
           src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js"
           integrity="sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8"
@@ -35,7 +34,6 @@ export default function TempLayout({ children }: { children: ReactNode }) {
         <QueryClientProvider client={queryClient}>
           <div id="modal-root" />
           <div>{children}</div>
-          <ToastContainer />
         </QueryClientProvider>
       </body>
     </html>

src/app/page.tsx

@@ -1,3 +1,28 @@
-export default function Home() {
-  return <>홈페이지</>;
+import ListRecommendation from '@/components/exploreComponents/ListsRecommendation';
+import TrendingList from '@/components/exploreComponents/TrendingLists';
+import UsersRecommendation from '@/components/exploreComponents/UsersRecommendation';
+import Header from '@/components/exploreComponents/Header';
+import FloatingContainer from '@/components/floatingButton/FloatingContainer';
+import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton';
+import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton';
+import * as styles from './layout.css';
+
+function LandingPage() {
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <Header />
+        <div>검색 및 카테고리 컴포넌트</div>
+        <TrendingList />
+        <UsersRecommendation />
+        <ListRecommendation />
+        <FloatingContainer>
+          <PlusOptionFloatingButton />
+          <ArrowUpFloatingButton />
+        </FloatingContainer>
+      </div>
+    </>
+  );
 }
+
+export default LandingPage;

src/components/KakaotalkShare/kakaotalkShare.tsx

@@ -1,11 +1,13 @@
 'use client';
 
+import { CollaboratorType } from '@/lib/types/listType';
+
 interface kakaotalkShareProps {
   title: string;
   description: string;
   image?: string;
   listItem?: { title: string }[];
-  collaborators: [];
+  collaborators: CollaboratorType[];
   userNickname: string;
   listId: string;
 }

src/components/exploreComponents/Header.css.ts

@@ -0,0 +1,38 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  padding: '0 16px',
+
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const logoWrapper = style({
+  padding: '26px 0 12px',
+
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+export const userInfoOuterWrapper = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+export const userInfoWrapper = style({
+  marginBottom: '12px',
+
+  display: 'flex',
+  alignItems: 'center',
+  gap: '12px',
+});
+
+export const userProfile = style({
+  borderRadius: '16px',
+});
+
+export const userName = style({
+  color: '#202020',
+  fontSize: '1.5rem',
+  fontWeight: 600,
+});

src/components/exploreComponents/Header.tsx

@@ -0,0 +1,39 @@
+'use client';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import * as styles from './Header.css';
+import Logo from '/public/icons/logo.svg';
+import BellIcon from '/public/icons/bell.svg';
+
+function Header() {
+  const router = useRouter();
+
+  const handleBellIconClick = () => {
+    router.push('/notification');
+  };
+
+  return (
+    <nav className={styles.wrapper}>
+      <div className={styles.logoWrapper}>
+        <Logo alt="로고 이미지" />
+      </div>
+      <div className={styles.userInfoOuterWrapper}>
+        <div className={styles.userInfoWrapper}>
+          <Image
+            src="https://p.turbosquid.com/ts-thumb/dF/nW94b5/5gsXLi9h/17/jpg/1542722468/600x600/fit_q87/b36d8ed4b788d00f54eeb1be4094ddab0deb0474/17.jpg"
+            alt="사용자 프로필 이미지"
+            width={32}
+            height={32}
+            className={styles.userProfile}
+          />
+          <h5 className={styles.userName}>{`진저브레드`}</h5>
+        </div>
+        <button onClick={handleBellIconClick}>
+          <BellIcon alt="알림 페이지 이동 버튼" />
+        </button>
+      </div>
+    </nav>
+  );
+}
+
+export default Header;