Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 22 commits into from
Feb 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
89d9cbb
Feat: 리스트 상세 조회 api 연결
Nahyun-Kang Feb 5, 2024
d996c7a
Feat: comment create 일부 구현
Nahyun-Kang Feb 5, 2024
284ac91
Feat: header 퍼블리싱 및 로직 구현
Nahyun-Kang Feb 5, 2024
9466beb
Feat: list recommendation 컴포넌트 레이아웃 마크업, 플로팅 버튼 추가
Nahyun-Kang Feb 6, 2024
8cc04a3
Feat: 트렌딩 리스트 레이아웃 구현
Nahyun-Kang Feb 6, 2024
2bbe126
Feat: 트렌딩 리스트 캐러셀 구현
Nahyun-Kang Feb 6, 2024
b69c677
Merge branch 'feature/explore' of https://github.com/Nahyun-Kang/List…
Nahyun-Kang Feb 7, 2024
3ba8068
Feat: 심플 리스트 배경색 추가
Nahyun-Kang Feb 7, 2024
1162d1e
Design: 블러 박스 css 조정
Nahyun-Kang Feb 7, 2024
6cf55e9
Feat: 팔로우 클릭시 스크롤 이동 이벤트 발생 기능 구현
Nahyun-Kang Feb 7, 2024
f02521f
Feat: 팔로우 버튼 기능 일부 구현
Nahyun-Kang Feb 7, 2024
832a394
Fix: 폴더 구조 변경
Nahyun-Kang Feb 9, 2024
ac755cc
Chore: 충돌 해결
Nahyun-Kang Feb 9, 2024
2d26af7
Fix: exploreComponents 폴더 _components 아래로 옮김
Nahyun-Kang Feb 9, 2024
906231c
Fix: exploreComponents 최상단 components 폴더 하위로 옮김
Nahyun-Kang Feb 11, 2024
63f2e54
Fix: explore mockdata explore components 폴더 아래로 옮김
Nahyun-Kang Feb 11, 2024
ac571c3
Feat: 추천 리스트 top10 데이터 바인딩
Nahyun-Kang Feb 11, 2024
126ec7c
Fix: 아이템 랭킹 나오게 수정
Nahyun-Kang Feb 11, 2024
ec7e56a
Feat: 사용자 추천 리스트 데이터 바인딩
Nahyun-Kang Feb 11, 2024
ad78ca9
Feat: 트렌딩 리스트 데이터 바인딩
Nahyun-Kang Feb 11, 2024
58b56a5
Fix: 탐색페이지 헤더 layout->header로 옮김
Nahyun-Kang Feb 11, 2024
c853dc0
Feat: 트렌딩 리스트 타입 지정
Nahyun-Kang Feb 11, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
NEXT_PUBLIC_BASE_URL = "https://dev.api.listywave.com"
NEXT_PUBLIC_KAKAO_API_KEY=8a62d21afa7f96e9f0d58b577e1e4747
NEXT_PUBLIC_BASE_URL=localhost:3000
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
9 changes: 9 additions & 0 deletions public/icons/bell.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions public/icons/close_x_gray.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions public/icons/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -28,8 +29,8 @@ interface FooterProps {
listId: string;
title: string;
description: string;
items: [];
collaborators: [];
items: ListItemsType[];
collaborators: CollaboratorType[];
ownerNickname: string;
}

Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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}>
Expand All @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -31,8 +33,8 @@ interface ListDetailInnerProps {
ownerId: number;
ownerNickname: string;
ownerProfileImageUrl: string;
collaborators: [];
items: [];
collaborators: CollaboratorType[];
items: ListItemsType[];
isCollected: boolean;
isPublic: boolean;
backgroundColor: string;
Expand All @@ -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 (
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>
Expand Down
8 changes: 8 additions & 0 deletions src/app/_api/comment/createComment.ts
Original file line number Diff line number Diff line change
@@ -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;
};
Empty file.
Empty file.
Empty file.
Empty file.
9 changes: 9 additions & 0 deletions src/app/_api/explore/getRecommendedLists.ts
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 9 additions & 0 deletions src/app/_api/explore/getRecommendedUsers.ts
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 9 additions & 0 deletions src/app/_api/explore/getTrendingLists.ts
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 8 additions & 0 deletions src/app/_api/list/getLists.ts
Original file line number Diff line number Diff line change
@@ -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;
}
5 changes: 5 additions & 0 deletions src/app/layout.css.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { style } from '@vanilla-extract/css';

export const wrapper = style({
position: 'relative',
});
4 changes: 1 addition & 3 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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"
Expand All @@ -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>
Expand Down
29 changes: 27 additions & 2 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 3 additions & 1 deletion src/components/KakaotalkShare/kakaotalkShare.tsx
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down
38 changes: 38 additions & 0 deletions src/components/exploreComponents/Header.css.ts
Original file line number Diff line number Diff line change
@@ -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,
});
39 changes: 39 additions & 0 deletions src/components/exploreComponents/Header.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading