From a64e565677774d61bbf16a2193f058024a37c35f Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Wed, 30 Oct 2024 23:23:38 +0900 Subject: [PATCH] =?UTF-8?q?hotfix/ver2.0=20=ED=8C=8C=EC=9D=BC=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/list/[listId]/history/__page.css.ts | 75 ------- src/app/list/[listId]/history/__page.tsx | 70 ------- .../history/_component/__HistoryGraph.css.ts | 17 -- .../history/_component/__HistoryGraph.tsx | 154 --------------- .../_component/__HistoryVersions.css.ts | 98 --------- .../history/_component/__HistoryVersions.tsx | 187 ------------------ 6 files changed, 601 deletions(-) delete mode 100644 src/app/list/[listId]/history/__page.css.ts delete mode 100644 src/app/list/[listId]/history/__page.tsx delete mode 100644 src/app/list/[listId]/history/_component/__HistoryGraph.css.ts delete mode 100644 src/app/list/[listId]/history/_component/__HistoryGraph.tsx delete mode 100644 src/app/list/[listId]/history/_component/__HistoryVersions.css.ts delete mode 100644 src/app/list/[listId]/history/_component/__HistoryVersions.tsx diff --git a/src/app/list/[listId]/history/__page.css.ts b/src/app/list/[listId]/history/__page.css.ts deleted file mode 100644 index 7652c8f1..00000000 --- a/src/app/list/[listId]/history/__page.css.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { style, styleVariants, keyframes } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import * as fonts from '@/styles/__font.css'; - -export const navContainer = style({ - width: '100%', - - padding: '18px 65.5px 0', - margin: '0 auto', - - display: 'flex', - alignItems: 'center', - columnGap: '70px', - - position: 'fixed', - top: '70px', - - backgroundColor: vars.color.white, - - zIndex: '1', -}); - -export const navButton = style([ - fonts.labelLarge, - { - width: 'fit-content', - padding: ' 15px 0', - flexGrow: '1', - - color: vars.color.black, - }, -]); - -export const navBarBase = style({ - width: '50px', - height: '5px', - - backgroundColor: vars.color.black, - borderRadius: '50px', -}); - -export const navBar = styleVariants({ - left: [ - navBarBase, - { - position: 'absolute', - left: '23.5%', - bottom: '0%', - }, - ], - right: [ - navBarBase, - { - position: 'absolute', - left: '66.5%', - bottom: '0%', - }, - ], -}); - -export const listTitle = style([ - fonts.headlineMedium, - { - margin: '140px 40px 20px', - }, -]); - -export const contentContainer = style({ - padding: '50px 27px', - - overflowX: 'auto', - '::-webkit-scrollbar': { - display: 'none', - }, -}); diff --git a/src/app/list/[listId]/history/__page.tsx b/src/app/list/[listId]/history/__page.tsx deleted file mode 100644 index e5373e69..00000000 --- a/src/app/list/[listId]/history/__page.tsx +++ /dev/null @@ -1,70 +0,0 @@ -'use client'; -import { useState } from 'react'; -import { useParams, useRouter } from 'next/navigation'; -import { useQuery } from '@tanstack/react-query'; - -import Header from '@/components/Header/__Header'; -import { Graph } from './_component/__HistoryGraph'; -import { Version } from './_component/__HistoryVersions'; - -import getListDetail from '@/app/_api/list/getListDetail'; -import getHistories from '@/app/_api/history/getHistories'; -import { ListDetailType } from '@/lib/types/listType'; -import { HistoryType } from '@/lib/types/historyType'; -import { QUERY_KEYS } from '@/lib/constants/queryKeys'; - -import * as styles from './__page.css'; -import { useLanguage } from '@/store/useLanguage'; -import { listLocale } from '@/app/list/[listId]/locale'; - -function HistoryPage() { - const { language } = useLanguage(); - const [type, setType] = useState<'graph' | 'version'>('graph'); - - const router = useRouter(); - const param = useParams<{ listId: string }>(); - const listId = param?.listId; - - const { data: listData } = useQuery({ - queryKey: [QUERY_KEYS.getListDetail, listId], - queryFn: () => getListDetail(Number(listId)), - }); - - const { data: historyData } = useQuery({ - queryKey: [QUERY_KEYS.getHistories, listId], - queryFn: () => getHistories(listId), - }); - - return ( - <> -
{ - router.back(); - }} - /> -
-
- - -
-
- -
{listData?.title}
-
- {type === 'graph' ? ( - - ) : ( - - )} -
-
- - ); -} -export default HistoryPage; diff --git a/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts b/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts deleted file mode 100644 index 6b42e0cb..00000000 --- a/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts +++ /dev/null @@ -1,17 +0,0 @@ -// import { style } from '@vanilla-extract/css'; -// import { vars } from '@/styles/__theme.css'; -// import * as fonts from '@/styles/__font.css'; - -// export const container = style({ -// width: '100%', -// minWidth: 'calc(200vw - 54px)', -// height: '345px', -// padding: '20px', - -// display: 'flex', -// alignItems: 'center', - -// borderRadius: '20px', -// backgroundColor: vars.color.white, -// boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)', -// }); diff --git a/src/app/list/[listId]/history/_component/__HistoryGraph.tsx b/src/app/list/[listId]/history/_component/__HistoryGraph.tsx deleted file mode 100644 index bb92d983..00000000 --- a/src/app/list/[listId]/history/_component/__HistoryGraph.tsx +++ /dev/null @@ -1,154 +0,0 @@ -// import dynamic from 'next/dynamic'; -// const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); - -// import * as styles from './__HistoryGraph.css'; -// import { HistoryType } from '@/lib/types/historyType'; -// import timeDiff from '@/lib/utils/time-diff'; -// import { useLanguage } from '@/store/useLanguage'; -// import { listLocale } from '@/app/list/[listId]/locale'; - -// interface ItemType { -// title: string; -// history: (number | null)[]; -// } - -// interface HistoryGraphProps { -// histories: HistoryType[]; -// } - -// function HistoryGraph({ histories }: HistoryGraphProps) { -// const itemRankHistories: ItemType[] = []; -// histories.map((history) => { -// history.items.map((item) => { -// if (!itemRankHistories.some((i) => i.title === item.title)) { -// itemRankHistories.push({ title: item.title, history: [] }); -// } -// }); -// }); - -// itemRankHistories.map((i) => { -// histories.map((h) => { -// i.history.push(h.items.find((x) => x.title === i.title)?.rank || null); -// }); -// }); - -// return ( -//
{}
-// ); -// } - -// interface ChartProps { -// itemRankHistories: ItemType[]; -// histories: HistoryType[]; -// } - -// interface Option { -// chart: { -// id: string; -// width: string; -// height: string; -// zoom: { -// enabled: boolean; -// }; -// }; -// xaxis: { -// categories: string[]; -// tickPlacement: string; -// type: 'category'; -// }; -// yaxis: { -// categories: number[]; -// reversed: boolean; -// stepSize: number; -// labels: { formatter: (val: number) => string }; -// }; -// grid: { -// padding: { -// left: number; -// bottom: number; -// }; -// }; -// legend: { -// show: boolean; -// horizontalAlign: 'left'; -// }; -// noData: { -// text: string; -// align: 'center'; -// verticalAlign: 'bottom'; -// offsetX: number; -// offsetY: number; -// style: { -// fontSize: string; -// }; -// }; -// stroke: { -// curve: 'smooth'; -// }; -// } - -// export function Chart({ histories, itemRankHistories }: ChartProps) { -// const { language } = useLanguage(); - -// const option: Option = { -// chart: { -// id: 'history graph', -// width: '100%', -// height: '100%', -// zoom: { -// enabled: true, -// }, -// }, -// xaxis: { -// categories: histories.map((history) => timeDiff(String(history.createdDate))), -// tickPlacement: 'on', -// type: 'category', -// }, -// yaxis: { -// categories: Array.from({ length: 10 }, (_, index) => Math.round(10 - index)), -// reversed: true, -// stepSize: 1, -// labels: { -// formatter: (val: number) => { -// return `${val.toFixed(0)}위`; -// }, -// }, -// }, -// grid: { -// padding: { -// left: 30, -// bottom: 30, -// }, -// }, -// stroke: { curve: 'smooth' }, -// legend: { -// show: true, -// horizontalAlign: 'left', -// }, -// noData: { -// text: listLocale[language].noHistory, -// align: 'center', -// verticalAlign: 'bottom', -// offsetX: 0, -// offsetY: 0, -// style: { -// fontSize: '20px', -// }, -// }, -// }; - -// const chartData = itemRankHistories.map((item) => { -// return { -// name: item.title, -// data: item.history, -// }; -// }); - -// return ( -// <> -// -// -// ); -// } - -// export { HistoryGraph as Graph }; diff --git a/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts b/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts deleted file mode 100644 index 201d9237..00000000 --- a/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts +++ /dev/null @@ -1,98 +0,0 @@ -// import { style } from '@vanilla-extract/css'; -// import { vars } from '@/styles/__theme.css'; -// import * as fonts from '@/styles/__font.css'; - -// export const container = style({ -// minHeight: '345px', -// padding: '24px 18px', - -// position: 'relative', - -// borderRadius: '20px', -// backgroundColor: vars.color.white, -// boxShadow: '0px 4px 15px 0px rgba(0, 0, 0, 0.10)', -// }); - -// export const dateDropdown = style([ -// fonts.labelSmall, -// { -// position: 'absolute', -// top: '-40px', -// right: '5px', - -// display: 'flex', -// alignItems: 'center', - -// color: vars.color.gray9, - -// // float: 'right', -// cursor: 'pointer', -// }, -// ]); - -// export const kebabButton = style({ -// width: '24px', -// height: '24px', - -// position: 'absolute', -// right: '20px', - -// display: 'flex', -// justifyContent: 'center', -// alignItems: 'center', - -// cursor: 'pointer', -// }); - -// export const kebabIcon = style({ -// stroke: vars.color.gray7, -// fill: vars.color.gray7, -// }); - -// export const date = style([ -// fonts.labelLarge, -// { -// paddingLeft: '110px', - -// display: 'flex', -// alignItems: 'center', -// columnGap: '5px', - -// color: vars.color.gray7, -// }, -// ]); - -// export const itemsContainer = style({ -// marginTop: '50px', -// }); - -// export const itemContainer = style({ -// height: '74px', -// padding: '0 20px', - -// display: 'flex', -// }); - -// export const itemTitle = style([fonts.bodyLarge, {}]); - -// export const itemRank = style([ -// fonts.titleMedium, -// { -// marginRight: '20px', - -// textAlign: 'center', -// minWidth: '21px', -// }, -// ]); - -// export const crown = style({ -// marginRight: '5px', - -// position: 'relative', -// right: '9px', -// bottom: '5px', -// }); - -// export const noDataImage = style({ -// marginTop: '40px', -// }); diff --git a/src/app/list/[listId]/history/_component/__HistoryVersions.tsx b/src/app/list/[listId]/history/_component/__HistoryVersions.tsx deleted file mode 100644 index 65f3f774..00000000 --- a/src/app/list/[listId]/history/_component/__HistoryVersions.tsx +++ /dev/null @@ -1,187 +0,0 @@ -// import { useState } from 'react'; -// import { useMutation, useQueryClient } from '@tanstack/react-query'; - -// import Modal from '@/components/Modal/Modal'; -// import BottomSheet from '@/components/BottomSheet/BottomSheet'; -// import Kebab from '/public/icons/vertical_kebab_button.svg'; -// import Crown from '/public/icons/crown.svg'; -// import Private from '/public/icons/lock_alt.svg'; -// import ArrowDown from '/public/icons/chevron_down_sm.svg'; - -// import { useUser } from '@/store/useUser'; -// import useBooleanOutput from '@/hooks/useBooleanOutput'; -// import toggleHistoryPublic from '@/app/_api/history/toggleHistoryPulblic'; -// import timeDiff from '@/lib/utils/time-diff'; -// import { HistoryType } from '@/lib/types/historyType'; -// import { QUERY_KEYS } from '@/lib/constants/queryKeys'; - -// import * as styles from './__HistoryVersions.css'; -// import deleteHistory from '@/app/_api/history/deleteHistory'; -// import NoDataComponent from '@/components/NoData/NoDataComponent'; -// import { useLanguage } from '@/store/useLanguage'; -// import { modalLocale, listLocale } from '@/app/list/[listId]/locale'; - -// interface VersionHistoryProps { -// histories: HistoryType[]; -// listId: string | undefined; -// listOwnerId: number | undefined; -// } - -// function HistoryVersions({ histories, listId, listOwnerId }: VersionHistoryProps) { -// const { language } = useLanguage(); -// const [selectedHistory, setSelectedHistory] = useState(histories[histories.length - 1] || {}); -// const { user } = useUser(); -// const queryClient = useQueryClient(); - -// const { isOn: isControlOpen, handleSetOff: closeControl, handleSetOn: openControl } = useBooleanOutput(); -// const { -// isOn: isHistorySelectionOpen, -// handleSetOff: closeHistorySelection, -// handleSetOn: openHistorySelection, -// } = useBooleanOutput(); -// const { isOn: isModalOn, handleSetOff: closeModal, handleSetOn: openModal } = useBooleanOutput(); - -// const { mutate: togglePublicMutation } = useMutation({ -// mutationFn: toggleHistoryPublic, -// onSuccess: () => { -// queryClient.invalidateQueries({ -// queryKey: [QUERY_KEYS.getHistories, listId], -// }); -// setSelectedHistory(selectedHistory); -// }, -// }); - -// const { mutate: deleteMutation } = useMutation({ -// mutationFn: deleteHistory, -// onSuccess: () => { -// queryClient.invalidateQueries({ -// queryKey: [QUERY_KEYS.getHistories, listId], -// }); -// setSelectedHistory(histories[histories.length - 1]); -// // TODO: 삭제 토스트 띄우기 -// }, -// }); - -// const historyControlBottomsheetOption = [ -// { -// key: 'setHistoryPrivate', -// title: listLocale[language].hideHistory, -// onClick: () => { -// handleTogglePublic(); -// }, -// }, -// { -// key: 'deleteHistory', -// title: listLocale[language].deleteHistory, -// onClick: () => { -// openModal(); -// }, -// }, -// ]; - -// const historySelectOption = histories -// .map((history) => { -// return { -// key: String(history.id), -// title: timeDiff(String(history.createdDate)), -// onClick: () => { -// setSelectedHistory(history); -// }, -// }; -// }) -// .reverse(); - -// const handleTogglePublic = () => { -// togglePublicMutation({ historyId: selectedHistory.id }); -// }; - -// const handleDeleteHistory = () => { -// deleteMutation({ historyId: selectedHistory.id }); -// closeModal(); -// }; - -// return ( -// <> -//
-// {histories.length !== 0 && ( -// <> -// -// {user.id === listOwnerId ? ( -// -// ) : null} -// -// )} - -// {histories.length === 0 ? ( -//
-// -//
-// ) : ( -// <> -// {user.id === listOwnerId || selectedHistory.isPublic ? ( -// <> -//
-// {selectedHistory.isPublic ? null : } -// {timeDiff(String(selectedHistory?.createdDate))} -//
-//
-// {selectedHistory?.items -// .sort((a, b) => a.rank - b.rank) -// .map((item) => )} -//
-// -// ) : ( -//
{listLocale[language].privateHistory}
-// )} -// -// )} -//
- -// {isControlOpen && ( -// -// )} - -// {isHistorySelectionOpen && ( -// -// )} - -// {isModalOn && ( -// -// {modalLocale[language].deleteHistory1} -// -// {modalLocale[language].confirm} -// -// -// )} -// -// ); -// } - -// interface ItemProp { -// rank: number; -// title: string; -// } -// function Item({ rank, title }: ItemProp) { -// const { language } = useLanguage(); -// return ( -//
-// {rank === 1 ? ( -// -// ) : ( -//
{rank}
-// )} -//
{title}
-//
-// ); -// } - -// export { HistoryVersions as Version };