-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
Showing
18 changed files
with
250 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import { atom } from 'jotai'; | ||
import { LectureInfo } from '../type/lecture'; | ||
|
||
export const isCustomizingAtom = atom<boolean>(false); | ||
|
||
export const customLectureAtom = atom<LectureInfo[]>([]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,17 @@ | ||
export type LectureInfo = { | ||
export interface LectureInfo { | ||
[index: string]: string | number; | ||
id: number; | ||
year: string; | ||
semester: string; | ||
lectureCode: string; | ||
lectureName: string; | ||
credit: number; | ||
}; | ||
} | ||
|
||
export interface SearchedLectureInfo { | ||
[index: string]: string | number; | ||
id: number; | ||
lectureCode: string; | ||
name: string; | ||
credit: number; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
'use client'; | ||
import React from 'react'; | ||
import LectureSearchBar from './lecture-search-bar'; | ||
import LectureSearchResultContainer from './lecture-search-result-container'; | ||
import { isCustomizingAtom } from '@/app/store/custom-taken-lecture'; | ||
import { useAtomValue } from 'jotai'; | ||
|
||
export default function LectureSearch() { | ||
const isCustomizing = useAtomValue(isCustomizingAtom); | ||
if (!isCustomizing) return null; | ||
return ( | ||
<div className="flex flex-col gap-4" data-testid="lecture-search-component"> | ||
<LectureSearchBar /> | ||
<LectureSearchResultContainer /> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<div className="flex justify-between"> | ||
<div className="w-[15%]"> | ||
<Select defaultValue="lectureName" placeholder="과목명"> | ||
<Select.Item value="lectureName" placeholder="과목명" /> | ||
<Select.Item value="lectureCode" placeholder="과목코드" /> | ||
</Select> | ||
</div> | ||
<div className="w-[40%] flex justify-between"> | ||
<TextInput placeholder="검색어를 입력해주세요" icon={MagnifyingGlassIcon} /> | ||
</div> | ||
</div> | ||
); | ||
} |
47 changes: 47 additions & 0 deletions
47
app/ui/lecture/lecture-search/lecture-search-result-container.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import List from '../../view/molecule/list'; | ||
import Image from 'next/image'; | ||
import searchResultIcon from '@/public/assets/searchResultIcon.svg'; | ||
import Grid from '../../view/molecule/grid'; | ||
import { SearchedLectureInfo } from '@/app/type/lecture'; | ||
import AddTakenLectureButton from '../taken-lecture/add-taken-lecture-button'; | ||
|
||
const emptyDataRender = () => { | ||
return ( | ||
<div className="flex flex-col items-center justify-center gap-2"> | ||
<Image src={searchResultIcon} alt="search-result-icon" width={40} height={40} /> | ||
<div className="text-md font-medium text-gray-400">검색 결과가 표시됩니다</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default function LectureSearchResultContainer() { | ||
const renderAddActionButton = (item: SearchedLectureInfo) => { | ||
return <AddTakenLectureButton lectureItem={item} />; | ||
}; | ||
const render = (item: SearchedLectureInfo, index: number) => { | ||
const searchLectureItem = item; | ||
return ( | ||
<List.Row key={index}> | ||
<Grid cols={4}> | ||
{Object.keys(searchLectureItem).map((key, index) => { | ||
if (key === 'id') return null; | ||
return <Grid.Column key={index}>{searchLectureItem[key]}</Grid.Column>; | ||
})} | ||
{renderAddActionButton ? <Grid.Column>{renderAddActionButton(searchLectureItem)}</Grid.Column> : null} | ||
</Grid> | ||
</List.Row> | ||
); | ||
}; | ||
|
||
return ( | ||
<List | ||
data={[ | ||
{ id: 3, lectureCode: 'HCB03490', name: '경영정보사례연구', credit: 3 }, | ||
{ id: 4, lectureCode: 'HCB03490', name: '게임을통한경영의이해', credit: 3 }, | ||
]} | ||
render={render} | ||
isScrollList={true} | ||
emptyDataRender={emptyDataRender} | ||
/> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { SearchedLectureInfo } from '@/app/type/lecture'; | ||
import Button from '../../view/atom/button/button'; | ||
import { useAtom } from 'jotai'; | ||
import { customLectureAtom } from '@/app/store/custom-taken-lecture'; | ||
|
||
interface AddTakenLectureButtonProps { | ||
lectureItem: SearchedLectureInfo; | ||
} | ||
export default function AddTakenLectureButton({ lectureItem }: AddTakenLectureButtonProps) { | ||
const [customLecture, setCustomLecture] = useAtom(customLectureAtom); | ||
const addLecture = () => { | ||
setCustomLecture([ | ||
...customLecture, | ||
{ | ||
id: lectureItem.id, | ||
year: 'CUSTOM', | ||
semester: 'CUSTOM', | ||
lectureCode: lectureItem.lectureCode, | ||
lectureName: lectureItem.name, | ||
credit: lectureItem.credit, | ||
}, | ||
]); | ||
}; | ||
return <Button variant="list" label="추가" onClick={addLecture} />; | ||
} |
14 changes: 14 additions & 0 deletions
14
app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { useAtom } from 'jotai'; | ||
import Button from '../../view/atom/button/button'; | ||
import { customLectureAtom } from '@/app/store/custom-taken-lecture'; | ||
|
||
interface DeleteTakenLectureButtonProps { | ||
lectureId: number; | ||
} | ||
export default function DeleteTakenLectureButton({ lectureId }: DeleteTakenLectureButtonProps) { | ||
const [customLecture, setCustomLecture] = useAtom(customLectureAtom); | ||
const deleteLecture = () => { | ||
setCustomLecture(customLecture.filter((lecture) => lecture.id !== lectureId)); | ||
}; | ||
return <Button label="삭제" variant="list" data-testid="taken-lecture-delete-button" onClick={deleteLecture} />; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,14 @@ | ||
import { fetchTakenLectures } from '@/app/business/lecture/taken-lecture.query'; | ||
import TakenLectureList from './taken-lecture-list'; | ||
import TakenLectureLabel from './taken-lecture-label'; | ||
|
||
export default async function TakenLecture() { | ||
const data = await fetchTakenLectures(); | ||
return <TakenLectureList data={data.takenLectures} />; | ||
return ( | ||
<div className="flex flex-col gap-2"> | ||
{/* w-[800px]은 w-full로 변경 예정 */} | ||
<TakenLectureLabel data={data.takenLectures} /> | ||
<TakenLectureList data={data.takenLectures} /> | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,23 @@ | ||
import { cn } from '@/app/utils/shadcn/utils'; | ||
import { ReactNode } from 'react'; | ||
|
||
export interface ListRow { | ||
id: number; | ||
[key: string]: string | number; | ||
} | ||
interface ListRootProps { | ||
data: ListRow[]; | ||
render: (item: ListRow, index: number) => ReactNode; | ||
interface ListRootProps<T extends ListRow> { | ||
data: T[]; | ||
render: (item: T, index: number) => ReactNode; | ||
isScrollList?: boolean; | ||
emptyDataRender?: () => ReactNode; | ||
} | ||
|
||
export function ListRoot({ data, render }: ListRootProps) { | ||
export function ListRoot<T extends ListRow>({ data, render, isScrollList = false, emptyDataRender }: ListRootProps<T>) { | ||
const hasNotData = emptyDataRender && data.length === 0; | ||
return ( | ||
<div className="rounded-2xl border-[1px] border-black-2 w-full"> | ||
<div className={cn('rounded-xl border-[1px] border-gray-300 w-full ', isScrollList && 'h-72 overflow-auto')}> | ||
{data.map((item, index) => render(item, index))} | ||
{hasNotData ? emptyDataRender() : null} | ||
</div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.