From 17601867e6ddb509dbcf4dcc204a01c7384855d6 Mon Sep 17 00:00:00 2001 From: Eugene-A-01 Date: Wed, 30 Oct 2024 23:20:40 +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 --- .../history/_component/__HistoryGraph.css.ts | 28 +- .../history/_component/__HistoryGraph.tsx | 282 ++++++------- .../_component/__HistoryVersions.css.ts | 148 +++---- .../history/_component/__HistoryVersions.tsx | 374 +++++++++--------- 4 files changed, 416 insertions(+), 416 deletions(-) diff --git a/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts b/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts index 27d97c4a..6b42e0cb 100644 --- a/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts +++ b/src/app/list/[listId]/history/_component/__HistoryGraph.css.ts @@ -1,17 +1,17 @@ -import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import * as fonts from '@/styles/__font.css'; +// 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', +// export const container = style({ +// width: '100%', +// minWidth: 'calc(200vw - 54px)', +// height: '345px', +// padding: '20px', - display: 'flex', - alignItems: 'center', +// display: 'flex', +// alignItems: 'center', - borderRadius: '20px', - backgroundColor: vars.color.white, - boxShadow: '0px 4px 20px 0px rgba(0, 0, 0, 0.10)', -}); +// 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 index 8139f867..bb92d983 100644 --- a/src/app/list/[listId]/history/_component/__HistoryGraph.tsx +++ b/src/app/list/[listId]/history/_component/__HistoryGraph.tsx @@ -1,154 +1,154 @@ -import dynamic from 'next/dynamic'; -const ApexChart = dynamic(() => import('react-apexcharts'), { ssr: false }); +// 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'; +// 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 ItemType { +// title: string; +// history: (number | null)[]; +// } -interface HistoryGraphProps { - histories: HistoryType[]; -} +// 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: [] }); - } - }); - }); +// 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); - }); - }); +// itemRankHistories.map((i) => { +// histories.map((h) => { +// i.history.push(h.items.find((x) => x.title === i.title)?.rank || null); +// }); +// }); - return ( -
{}
- ); -} +// return ( +//
{}
+// ); +// } -interface ChartProps { - itemRankHistories: ItemType[]; - histories: HistoryType[]; -} +// 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'; - }; -} +// 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(); +// 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 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, - }; - }); +// const chartData = itemRankHistories.map((item) => { +// return { +// name: item.title, +// data: item.history, +// }; +// }); - return ( - <> - - - ); -} +// return ( +// <> +// +// +// ); +// } -export { HistoryGraph as Graph }; +// 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 index bbdb7650..201d9237 100644 --- a/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts +++ b/src/app/list/[listId]/history/_component/__HistoryVersions.css.ts @@ -1,98 +1,98 @@ -import { style } from '@vanilla-extract/css'; -import { vars } from '@/styles/__theme.css'; -import * as fonts from '@/styles/__font.css'; +// 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', +// export const container = style({ +// minHeight: '345px', +// padding: '24px 18px', - position: 'relative', +// position: 'relative', - borderRadius: '20px', - backgroundColor: vars.color.white, - boxShadow: '0px 4px 15px 0px rgba(0, 0, 0, 0.10)', -}); +// 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', +// export const dateDropdown = style([ +// fonts.labelSmall, +// { +// position: 'absolute', +// top: '-40px', +// right: '5px', - display: 'flex', - alignItems: 'center', +// display: 'flex', +// alignItems: 'center', - color: vars.color.gray9, +// color: vars.color.gray9, - // float: 'right', - cursor: 'pointer', - }, -]); +// // float: 'right', +// cursor: 'pointer', +// }, +// ]); -export const kebabButton = style({ - width: '24px', - height: '24px', +// export const kebabButton = style({ +// width: '24px', +// height: '24px', - position: 'absolute', - right: '20px', +// position: 'absolute', +// right: '20px', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', +// display: 'flex', +// justifyContent: 'center', +// alignItems: 'center', - cursor: 'pointer', -}); +// cursor: 'pointer', +// }); -export const kebabIcon = style({ - stroke: vars.color.gray7, - fill: vars.color.gray7, -}); +// export const kebabIcon = style({ +// stroke: vars.color.gray7, +// fill: vars.color.gray7, +// }); -export const date = style([ - fonts.labelLarge, - { - paddingLeft: '110px', +// export const date = style([ +// fonts.labelLarge, +// { +// paddingLeft: '110px', - display: 'flex', - alignItems: 'center', - columnGap: '5px', +// display: 'flex', +// alignItems: 'center', +// columnGap: '5px', - color: vars.color.gray7, - }, -]); +// color: vars.color.gray7, +// }, +// ]); -export const itemsContainer = style({ - marginTop: '50px', -}); +// export const itemsContainer = style({ +// marginTop: '50px', +// }); -export const itemContainer = style({ - height: '74px', - padding: '0 20px', +// export const itemContainer = style({ +// height: '74px', +// padding: '0 20px', - display: 'flex', -}); +// display: 'flex', +// }); -export const itemTitle = style([fonts.bodyLarge, {}]); +// export const itemTitle = style([fonts.bodyLarge, {}]); -export const itemRank = style([ - fonts.titleMedium, - { - marginRight: '20px', +// export const itemRank = style([ +// fonts.titleMedium, +// { +// marginRight: '20px', - textAlign: 'center', - minWidth: '21px', - }, -]); +// textAlign: 'center', +// minWidth: '21px', +// }, +// ]); -export const crown = style({ - marginRight: '5px', +// export const crown = style({ +// marginRight: '5px', - position: 'relative', - right: '9px', - bottom: '5px', -}); +// position: 'relative', +// right: '9px', +// bottom: '5px', +// }); -export const noDataImage = style({ - marginTop: '40px', -}); +// 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 index 94d8d3b1..65f3f774 100644 --- a/src/app/list/[listId]/history/_component/__HistoryVersions.tsx +++ b/src/app/list/[listId]/history/_component/__HistoryVersions.tsx @@ -1,187 +1,187 @@ -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].deleteHistory} - - {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 }; +// 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 };