+
+
+ );
+}
+
+export default Footer;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.css.ts b/src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.css.ts
new file mode 100644
index 00000000..c0b4b806
--- /dev/null
+++ b/src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.css.ts
@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+ width: '100%',
+
+ display: 'flex',
+ justifyContent: 'right',
+ alignItems: 'center',
+});
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.tsx
new file mode 100644
index 00000000..5b23ed65
--- /dev/null
+++ b/src/app/[userNickname]/[listId]/_components/ListDetailInner/Header.tsx
@@ -0,0 +1,31 @@
+import * as styles from './Header.css';
+import SelectComponent from '@/components/SelectComponent/SelectComponent';
+
+interface OptionsProps {
+ value: string;
+ label: string;
+}
+
+interface HeaderProps {
+ handleChangeListType: (target: OptionsProps) => void | undefined;
+}
+
+const dropdownOptions = [
+ {
+ value: 'simple',
+ label: '간단히',
+ },
+ {
+ value: 'detail',
+ label: '자세히',
+ },
+];
+function Header({ handleChangeListType }: HeaderProps) {
+ return (
+
+
+
+
+ handleSheetActive({ type: 'share' })}>
+
+ handleSheetActive({ type: 'etc' })}>
+
+
+
+ );
+}
+
+export default Header;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.css.ts b/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.css.ts
new file mode 100644
index 00000000..4217e9e7
--- /dev/null
+++ b/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.css.ts
@@ -0,0 +1,163 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'left',
+ alignItems: 'center',
+});
+
+export const listWrapper = style({
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ gap: '1.6rem',
+ alignItems: 'left',
+});
+
+export const simpleItemWrapper = style({
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'space-between',
+ gap: '4rem',
+ alignItems: 'center',
+});
+
+export const detailItemWrapper = style({
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '1.6rem',
+ alignItems: 'left',
+ marginBottom: '6rem',
+ ':last-child': {
+ marginBottom: 0,
+ },
+});
+
+export const commentText = style({
+ width: '100%',
+ backgroundColor: 'white',
+ padding: '2rem',
+ border: '1px solid #EFEFF0',
+ borderRadius: '10px',
+ fontSize: '1.4rem',
+});
+
+export const rankAndTitle = style({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ gap: '2rem',
+});
+
+export const rankTextWrapper = style({
+ width: '40px',
+ height: '40px',
+
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexShrink: 0,
+
+ fontSize: '2.4rem',
+ fontWeight: 'bold',
+ textAlign: 'center',
+});
+
+export const firstRankTextWrapper = style({
+ width: '40px',
+ height: '40px',
+
+ position: 'relative',
+
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexShrink: 0,
+
+ backgroundColor: '#0047FF',
+ borderRadius: '99px',
+
+ fontSize: '2.4rem',
+ fontWeight: 'bold',
+ color: 'white',
+ textAlign: 'center',
+});
+
+export const crownIcon = style({
+ position: 'absolute',
+ bottom: '40px',
+});
+
+export const top3RankTextWrapper = style({
+ width: '40px',
+ height: '40px',
+
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flexShrink: 0,
+
+ backgroundColor: '#EBF4FF',
+ borderRadius: '99px',
+
+ fontSize: '2.4rem',
+ fontWeight: 'bold',
+ color: '#0047FF',
+ textAlign: 'center',
+});
+
+export const rankText = style({
+ position: 'relative',
+ top: '2px',
+});
+
+export const titleText = style({
+ fontSize: '2rem',
+});
+
+export const simpleImageWrapper = style({
+ width: '7rem',
+ height: '7rem',
+
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+
+ textAlign: 'center',
+});
+
+export const detailImageWrapper = style({
+ width: '100%',
+ height: 'auto',
+
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+
+ textAlign: 'center',
+});
+
+export const simpleImage = style({
+ width: '7rem',
+ height: '7rem',
+
+ borderRadius: '10px',
+ boxShadow: '0px 8px 15px rgba(0, 0, 0, 0.15)',
+
+ objectFit: 'cover',
+});
+
+export const detailImage = style({
+ width: '100%',
+ maxHeight: '35rem',
+ height: 'auto',
+
+ border: '1px solid #EFEFF0',
+ borderRadius: '10px',
+
+ objectFit: 'cover',
+});
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx
new file mode 100644
index 00000000..469e865d
--- /dev/null
+++ b/src/app/[userNickname]/[listId]/_components/ListDetailInner/RankList.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import { ListItemProps } from './index';
+import LinkPreview from '@/components/LinkPreview/LinkPreview';
+import VideoEmbed from '@/components/VideoEmbed/VideoEmbed';
+import * as styles from './RankList.css';
+import CrownIcon from '/public/icons/crown.svg';
+
+interface RankListProps {
+ listData: ListItemProps[];
+ type?: string;
+}
+
+function SimpleList({ listData }: RankListProps) {
+ return listData.map((item, index) => {
+ return (
+
+
+ );
+ });
+}
+
+function EmbedComponent({ link }: { link: string }) {
+ let linkType = '';
+ // 일반url(link), 비디오(video), 지도(map) 로 구분하기. 지금은 비디오랑 링크만 구분.
+ // TODO: 지도 추가하기
+ const isVideoLink = link.includes('youtube.com') || link.includes('youtu.be') || link.includes('vimeo.com');
+ const isMapLink = false;
+
+ if (isVideoLink) {
+ linkType = 'video';
+ } else if (isMapLink) {
+ linkType = 'map';
+ } else {
+ linkType = 'link';
+ }
+
+ if (linkType === 'link') {
+ return LinkPreview(link);
+ }
+
+ if (linkType === 'video') {
+ return
+
+
+ {index === 0 &&
+ {item.rank}
+ {item.title}
+
+ {item.imageUrl && 
}
+
+
+
+ );
+ });
+}
+
+function RankList({ listData, type }: RankListProps) {
+ return (
+
+
+
+ {index === 0 &&
+ {item.rank}
+ {item.title}
+ {item.comment}
+
+ {item.imageUrl && (
+
+ )}
+
+ {item.link &&
+
+ );
+}
+
+export default RankList;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.css.ts b/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.css.ts
new file mode 100644
index 00000000..da701df4
--- /dev/null
+++ b/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.css.ts
@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+ width: '100%',
+
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ gap: '0.2rem',
+});
+
+export const listAndFooter = style({
+ width: '100%',
+ padding: '4rem 4rem 2rem 4rem',
+
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ gap: '4rem',
+
+ borderTop: '1px solid #D9D9D9',
+ borderBottom: '1px solid #D9D9D9',
+});
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx
new file mode 100644
index 00000000..44b3a6b6
--- /dev/null
+++ b/src/app/[userNickname]/[listId]/_components/ListDetailInner/index.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { useState } from 'react';
+import Header from '@/app/[userNickname]/[listId]/_components/ListDetailInner/Header';
+import RankList from '@/app/[userNickname]/[listId]/_components/ListDetailInner/RankList';
+import Footer from '@/app/[userNickname]/[listId]/_components/ListDetailInner/Footer';
+import * as styles from './index.css';
+
+export interface ListItemProps {
+ id?: number;
+ rank?: number;
+ title?: string;
+ comment?: string;
+ link?: string | null;
+ imageUrl?: string | null;
+}
+
+interface OptionsProps {
+ value: string;
+ label: string;
+}
+
+interface ListDetailInnerProps {
+ listId: string;
+ category: string;
+ labels: [];
+ title: string;
+ description: string;
+ createdDate: string;
+ lastUpdatedDate: string;
+ ownerId: number;
+ ownerNickname: string;
+ ownerProfileImageUrl: string;
+ collaborators: [];
+ items: [];
+ isCollected: boolean;
+ isPublic: boolean;
+ backgroundColor: string;
+ collectCount: number;
+ viewCount: number;
+}
+
+function ListDetailInner({ data }: { data: ListDetailInnerProps }) {
+ 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,
+ items: listData,
+ collaborators: data.collaborators,
+ ownerNickname: data.ownerNickname,
+ };
+
+ return (
+
+ {listData ? (
+ type == 'simple' ? (
+
+ 데이터가 없습니다.
+ )}
+
+
+ );
+}
+
+export default ListDetailInner;
diff --git a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.tsx b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.tsx
index 2e12cc4d..09b3b5b6 100644
--- a/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.tsx
+++ b/src/app/[userNickname]/[listId]/_components/ListDetailOuter/Header.tsx
@@ -14,7 +14,7 @@ function Header() {
};
const handleHistoryButtonClick = () => {
- router.push(`/${params.userNickname}/${params.listId}/history`);
+ router.push(`/${params?.userNickname}/${params?.listId}/history`);
};
return (
diff --git a/src/app/create/_components/CreateList.tsx b/src/app/create/_components/CreateList.tsx
index 2366d99c..ca8b3a19 100644
--- a/src/app/create/_components/CreateList.tsx
+++ b/src/app/create/_components/CreateList.tsx
@@ -44,7 +44,7 @@ function CreateList({ onNextClick }: CreateListProps) {
const collaboIDs = useWatch({ control, name: 'collaboratorIds' });
const searchParams = useSearchParams();
- const isTemplateCreation = searchParams.has('title') && searchParams.has('category');
+ const isTemplateCreation = searchParams?.has('title') && searchParams?.has('category');
const fetchUsers = async () => {
try {
@@ -65,8 +65,8 @@ function CreateList({ onNextClick }: CreateListProps) {
const handleQueryParams = () => {
if (isTemplateCreation) {
- setValue('title', searchParams.get('title'));
- setValue('category', searchParams.get('category'));
+ setValue('title', searchParams?.get('title'));
+ setValue('category', searchParams?.get('category'));
}
};
handleQueryParams();
@@ -100,7 +100,7 @@ function CreateList({ onNextClick }: CreateListProps) {
onClick={(item: CategoryType) => {
setValue('category', item.nameValue);
}}
- defaultValue={searchParams.get('category')}
+ defaultValue={searchParams?.get('category')}
/>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4908be29..ca44e808 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,19 +3,38 @@
import { ReactNode } from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import '@/styles/GlobalStyles.css';
+import Script from 'next/script';
+import { ToastContainer } from 'react-toastify';
const queryClient = new QueryClient();
-
+declare global {
+ interface Window {
+ Kakao: any;
+ }
+}
export default function TempLayout({ children }: { children: ReactNode }) {
+ function kakaoInit() {
+ window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
+ window.Kakao.isInitialized();
+ }
+
return (
+
+ {children}
+ 로딩중입니다.
;
+ }
+
+ if (isSuccess && data) {
+ const { url, title, description, image } = data;
+
+ return (
+
+
+ {data.image && 
}
+
+
+ );
+ }
+
+ return
+
+ {title || '제목이 없습니다.'}
+{description || '설명이 없습니다.'}
+{url}
+미리보기를 가져오는데 실패했습니다.
;
+};
+
+export default LinkPreview;
diff --git a/src/components/LinkPreview/style.css.ts b/src/components/LinkPreview/style.css.ts
new file mode 100644
index 00000000..93611cee
--- /dev/null
+++ b/src/components/LinkPreview/style.css.ts
@@ -0,0 +1,51 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+ width: '100%',
+
+ color: 'black',
+});
+
+export const wrapper = style({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'flex-start',
+
+ border: '1px solid lightgray',
+ borderRadius: '10px',
+
+ overflow: 'hidden',
+});
+
+export const image = style({
+ width: '100%',
+ minHeight: '5rem',
+
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'flex-start',
+ gap: '1rem',
+
+ backgroundColor: 'lightgray',
+});
+
+export const contentWrapper = style({
+ padding: '1rem',
+
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'flex-start',
+ gap: '0.5rem',
+});
+
+export const title = style({});
+
+export const description = style({
+ color: 'gray',
+});
+
+export const url = style({
+ color: 'lightgray',
+});
diff --git a/src/components/SelectComponent/SelectComponent.tsx b/src/components/SelectComponent/SelectComponent.tsx
new file mode 100644
index 00000000..bc3f86be
--- /dev/null
+++ b/src/components/SelectComponent/SelectComponent.tsx
@@ -0,0 +1,65 @@
+import Select from 'react-select';
+
+interface OptionsProps {
+ value: string;
+ label: string;
+}
+
+interface SelectProps {
+ name: string;
+ options: OptionsProps[];
+ isSearchable?: boolean;
+ onChange?: any;
+}
+
+const selectStyles = {
+ control: (provided: object, state: { isFocused: boolean }) => ({
+ ...provided,
+ maxWidth: '200px',
+ backgroundColor: 'white',
+ boxShadow: 'none',
+ border: 0,
+ borderRadius: '8px',
+ cursor: 'pointer',
+ '&:hover': {
+ borderColor: 'none',
+ backgroundColor: 'lightgray',
+ },
+ }),
+ singleValue: (provided: object) => ({
+ ...provided,
+ fontSize: '1.3rem',
+ }),
+ option: (provided: object, { isFocused, isSelected }: { isFocused: boolean; isSelected: boolean }) => ({
+ ...provided,
+ backgroundColor: isSelected || isFocused ? 'lightgray' : 'white',
+ color: 'black',
+ fontSize: '1.3rem',
+ }),
+ menu: (provided: object) => ({
+ ...provided,
+ maxWidth: '320px',
+ boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.08)',
+ borderRadius: '8px',
+ border: `1px solid gray`,
+ }),
+};
+
+function SelectComponent({ name, options, isSearchable = false, onChange }: SelectProps) {
+ return (
+