From e73e216a1af375c431116f535f905268da10ebd7 Mon Sep 17 00:00:00 2001 From: gahyuun Date: Wed, 6 Mar 2024 23:48:49 +0900 Subject: [PATCH 01/20] feat: add radix ui icon package --- package-lock.json | 9 +++++++++ package.json | 1 + 2 files changed, 10 insertions(+) diff --git a/package-lock.json b/package-lock.json index 794da6c1..f2b07336 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@heroicons/react": "^2.1.1", "@mswjs/http-middleware": "^0.9.2", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-icons": "^1.3.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "express": "^4.18.2", @@ -4196,6 +4197,14 @@ } } }, + "node_modules/@radix-ui/react-icons": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", + "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, "node_modules/@radix-ui/react-id": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", diff --git a/package.json b/package.json index 07376e24..4c9e2e5e 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@heroicons/react": "^2.1.1", "@mswjs/http-middleware": "^0.9.2", "@radix-ui/react-dialog": "^1.0.5", + "@radix-ui/react-icons": "^1.3.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "express": "^4.18.2", From 62c96e63ab3beab46ef05efff089a969ccba2e8b Mon Sep 17 00:00:00 2001 From: gahyuun Date: Thu, 7 Mar 2024 12:07:25 +0900 Subject: [PATCH 02/20] fix: solve index signature error --- app/ui/view/molecule/list/list-root.tsx | 15 ++++++++++----- app/ui/view/molecule/table/index.tsx | 8 ++++---- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/app/ui/view/molecule/list/list-root.tsx b/app/ui/view/molecule/list/list-root.tsx index 46bda829..a12aacfb 100644 --- a/app/ui/view/molecule/list/list-root.tsx +++ b/app/ui/view/molecule/list/list-root.tsx @@ -1,18 +1,23 @@ import { ReactNode } from 'react'; +import { twMerge } from 'tailwind-merge'; export interface ListRow { id: number; [key: string]: string | number; } -interface ListRootProps { - data: ListRow[]; - render: (item: ListRow, index: number) => ReactNode; +interface ListRootProps { + data: T[]; + render: (item: T, index: number) => ReactNode; + isScrollList?: boolean; + emptyDataRender?: () => ReactNode; } -export function ListRoot({ data, render }: ListRootProps) { +export function ListRoot({ data, render, isScrollList = false, emptyDataRender }: ListRootProps) { + const hasNotData = emptyDataRender && data.length === 0; return ( -
+
{data.map((item, index) => render(item, index))} + {hasNotData ? emptyDataRender() : null}
); } diff --git a/app/ui/view/molecule/table/index.tsx b/app/ui/view/molecule/table/index.tsx index 5bcf6e1d..68ceef12 100644 --- a/app/ui/view/molecule/table/index.tsx +++ b/app/ui/view/molecule/table/index.tsx @@ -4,9 +4,9 @@ import List from '../list'; import Grid from '../grid'; import { ListRow } from '../list/list-root'; -interface TableProps { +interface TableProps { headerInfo: string[]; - data: ListRow[]; + data: T[]; renderActionButton?: (id: number) => JSX.Element; } @@ -17,10 +17,10 @@ function isCol(cols: number): cols is ColType { return false; } -export function Table({ data, headerInfo, renderActionButton }: TableProps) { +export function Table({ data, headerInfo, renderActionButton }: TableProps) { const cols = renderActionButton ? headerInfo.length + 1 : headerInfo.length; - const render = (item: ListRow, index: number) => { + const render = (item: T, index: number) => { return ( From 06e0d9e9ac99dca9262f8315d896e641c4a91a39 Mon Sep 17 00:00:00 2001 From: gahyuun Date: Thu, 7 Mar 2024 13:30:40 +0900 Subject: [PATCH 03/20] style: change list row text color --- app/ui/view/molecule/list/list-row.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/ui/view/molecule/list/list-row.tsx b/app/ui/view/molecule/list/list-row.tsx index 3d14dadc..bdbcae09 100644 --- a/app/ui/view/molecule/list/list-row.tsx +++ b/app/ui/view/molecule/list/list-row.tsx @@ -9,8 +9,8 @@ export function ListRow({ children, textColor = 'black' }: ListRowProps) { return (
{children} From 6222592896724be12c8557631076ef2acad2456f Mon Sep 17 00:00:00 2001 From: gahyuun Date: Thu, 7 Mar 2024 13:33:08 +0900 Subject: [PATCH 04/20] chore: add search result icon --- public/assets/searchResultIcon.svg | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 public/assets/searchResultIcon.svg diff --git a/public/assets/searchResultIcon.svg b/public/assets/searchResultIcon.svg new file mode 100644 index 00000000..6f6c37ed --- /dev/null +++ b/public/assets/searchResultIcon.svg @@ -0,0 +1,5 @@ + + + + + From 559e1665e4c360eb6b7ec05d42c4934eb42e0380 Mon Sep 17 00:00:00 2001 From: gahyuun Date: Fri, 8 Mar 2024 10:03:08 +0900 Subject: [PATCH 05/20] style: delete min width styling --- app/ui/view/molecule/select/select-root.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/ui/view/molecule/select/select-root.tsx b/app/ui/view/molecule/select/select-root.tsx index 2afc97d7..7a194f8e 100644 --- a/app/ui/view/molecule/select/select-root.tsx +++ b/app/ui/view/molecule/select/select-root.tsx @@ -34,7 +34,7 @@ export const SelectRoot = React.forwardRef(functi }, [selectedValue, children]); return ( -
+
(functi > Date: Fri, 8 Mar 2024 10:07:10 +0900 Subject: [PATCH 06/20] feat: implement add lecture --- .../taken-lecture/taken-lecture-list.tsx | 61 ++++++++++++------- 1 file changed, 40 insertions(+), 21 deletions(-) diff --git a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx index 325444c4..03832e8e 100644 --- a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx +++ b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx @@ -5,6 +5,8 @@ import { Table } from '../../view/molecule/table'; import { useEffect, useState } from 'react'; import Button from '../../view/atom/button/button'; import { LectureInfo } from '@/app/type/lecture'; +import LectureSearch from '../lecture-search'; +import { SearchLectureInfo } from '../lecture-search/lecture-search-result-container'; const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점']; @@ -20,6 +22,20 @@ export default function TakenLectureList({ data }: TakenLectureListProps) { setCustomLecture(customLecture.filter((lecture) => lecture.id !== id)); }; + const addLecture = (item: SearchLectureInfo) => { + setCustomLecture([ + ...customLecture, + { + id: item.id, + year: 'CUSTOM', + semester: 'CUSTOM', + lectureCode: item.lectureCode, + lectureName: item.name, + credit: item.credit, + }, + ]); + }; + const changeCustomizingState = () => { setIsCustomizing(!isCustomizing); }; @@ -31,27 +47,30 @@ export default function TakenLectureList({ data }: TakenLectureListProps) { }, [isCustomizing]); return ( -
- {/* w-[800px]은 w-full로 변경 예정 */} - - {isCustomizing ? ( - ( -
- )} +
+ {isCustomizing ? : null} +
+ {/* w-[800px]은 w-full로 변경 예정 */} + + {isCustomizing ? ( +
( +
+ )} + ); } From deb4de21337cdd1d84b1f18d22b4f91c2cf03eaa Mon Sep 17 00:00:00 2001 From: gahyuun Date: Fri, 8 Mar 2024 10:13:47 +0900 Subject: [PATCH 07/20] feat: implement lecture search bar --- .../lecture-search/lecture-search-bar.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 app/ui/lecture/lecture-search/lecture-search-bar.tsx diff --git a/app/ui/lecture/lecture-search/lecture-search-bar.tsx b/app/ui/lecture/lecture-search/lecture-search-bar.tsx new file mode 100644 index 00000000..a09e9a14 --- /dev/null +++ b/app/ui/lecture/lecture-search/lecture-search-bar.tsx @@ -0,0 +1,20 @@ +import Select from '../../view/molecule/select'; +import TextInput from '../../view/atom/text-input/text-input'; +import { MagnifyingGlassIcon } from '@radix-ui/react-icons'; + +export default function LectureSearchBar() { + // 검색 기능을 해당 컴포넌트에서 구현 예정 + return ( +
+
+ +
+
+ +
+
+ ); +} From 5f39f00cf3180d2f8b279dffdd022494654ffba9 Mon Sep 17 00:00:00 2001 From: gahyuun Date: Fri, 8 Mar 2024 10:14:53 +0900 Subject: [PATCH 08/20] feat: implement lecture search result container --- .../lecture-search-result-container.tsx | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 app/ui/lecture/lecture-search/lecture-search-result-container.tsx diff --git a/app/ui/lecture/lecture-search/lecture-search-result-container.tsx b/app/ui/lecture/lecture-search/lecture-search-result-container.tsx new file mode 100644 index 00000000..1e1845c1 --- /dev/null +++ b/app/ui/lecture/lecture-search/lecture-search-result-container.tsx @@ -0,0 +1,66 @@ +import List from '../../view/molecule/list'; +import Image from 'next/image'; +import searchResultIcon from '@/public/assets/searchResultIcon.svg'; +import Button from '../../view/atom/button/button'; +import Grid from '../../view/molecule/grid'; + +export interface SearchLectureInfo { + [index: string]: string | number; + id: number; + lectureCode: string; + name: string; + credit: number; +} + +interface LectureSearchResultContainerProps { + handleAddButtonClick: (item: SearchLectureInfo) => void; +} + +const emptyDataRender = () => { + return ( +
+ +
검색 결과가 표시됩니다
+
+ ); +}; + +export default function LectureSearchResultContainer({ handleAddButtonClick }: LectureSearchResultContainerProps) { + const renderAddActionButton = (item: SearchLectureInfo) => { + return ( +
( -
- )} - - + <> + {isCustomizing ? ( +
} + /> + ) : ( +
+ )} + ); } From 9ac053e302dc74ae42985407bb62ec099346251c Mon Sep 17 00:00:00 2001 From: gahyuun Date: Tue, 12 Mar 2024 15:50:02 +0900 Subject: [PATCH 16/20] refactor: improve taken lecture label --- .../taken-lecture/taken-lecture-label.tsx | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/app/ui/lecture/taken-lecture/taken-lecture-label.tsx b/app/ui/lecture/taken-lecture/taken-lecture-label.tsx index 3f074ed8..614e5e64 100644 --- a/app/ui/lecture/taken-lecture/taken-lecture-label.tsx +++ b/app/ui/lecture/taken-lecture/taken-lecture-label.tsx @@ -1,13 +1,27 @@ +'use client'; import Link from 'next/link'; import Button from '../../view/atom/button/button'; import LabelContainer from '../../view/atom/label-container/label-container'; +import { useAtom, useSetAtom } from 'jotai'; +import { customLectureAtom, isCustomizingAtom } from '@/app/store/custom-taken-lecture'; +import { LectureInfo } from '@/app/type/lecture'; interface TakenLectureLabelProps { - isCustomizing: boolean; - changeCustomizingState: VoidFunction; + data: LectureInfo[]; } +export default function TakenLectureLabel({ data }: TakenLectureLabelProps) { + const [isCustomizing, setIsCustomizing] = useAtom(isCustomizingAtom); + const setCustomLecture = useSetAtom(customLectureAtom); + + const startCustomizing = () => { + setIsCustomizing(true); + }; + + const cancelCustomizing = () => { + setIsCustomizing(false); + setCustomLecture(data); + }; -export default function TakenLectureLabel({ isCustomizing, changeCustomizingState }: TakenLectureLabelProps) { return (