Lecture test/#117

app/business/lecture/search-lecture.query.ts

@@ -1,16 +1,13 @@
-import { SearchedLectureInfo } from '@/app/type/lecture';
+import { SearchLectures } from '@/app/type/lecture';
 import { API_PATH } from '../api-path';
 import axios from 'axios';
 import { getToken } from '../auth';
 
-export interface SearchLectures {
-  lectures: SearchedLectureInfo[];
-}
 export const fetchSearchLectures = async (type: string, keyword: string) => {
-  const response = await axios<SearchLectures>(`${API_PATH.lectures}?type=${type}&&keyword=${keyword}`, {
+  const response = await axios<SearchLectures[]>(`${API_PATH.lectures}?type=${type}&&keyword=${keyword}`, {
     headers: {
       Authorization: `Bearer ${getToken()}`,
     },
   });
-  return response.data.lectures;
+  return response.data;
 };

app/mocks/data.mock.ts

@@ -279,41 +279,45 @@ export const credits = JSON.parse(`[
     }
 ]`);
 
-export const searchLectures = JSON.parse(`{
-	"lectures": [
-        {
-            "id": 1,
-            "lectureCode": "KMA02106",
-            "name": "영어1",
-            "credit": 2,
-            "isTaken" : false
-        },
-        {
-          "id": 2,
-          "lectureCode": "KMA02106",
-          "name": "영어2",
-          "credit": 2,
-          "isTaken" : true
-      },
-      {
-        "id": 3,
-        "lectureCode": "KMA02136",
-        "name": "영어무역이론",
-        "credit": 3,
-        "isTaken" : false
-    },
-    {
-      "id": 1,
-      "lectureCode": "KMA02106",
-      "name": "영어회화3",
-      "credit": 1,
-      "isTaken" : false
-  }, 
+export const searchLectures = [
   {
-    "id": 1,
-    "lectureCode": "KMA02106",
-    "name": "영어회화4",
-    "credit": 2,
-    "isTaken" : true
-}]
-}`);
+    id: 1,
+    lectureCode: 'KMA02106',
+    name: '영어1',
+    credit: 2,
+    revoked: false,
+    taken: false,
+  },
+  {
+    id: 2,
+    lectureCode: 'KMA02107',
+    name: '영어2',
+    credit: 2,
+    revoked: false,
+    taken: true,
+  },
+  {
+    id: 3,
+    lectureCode: 'KMA02109',
+    name: '영어회화1',
+    credit: 2,
+    revoked: false,
+    taken: false,
+  },
+  {
+    id: 4,
+    lectureCode: 'KMA02144',
+    name: '영어회화2',
+    credit: 2,
+    revoked: true,
+    taken: false,
+  },
+  {
+    id: 5,
+    lectureCode: 'KMA02145',
+    name: '영어회화3',
+    credit: 2,
+    revoked: true,
+    taken: false,
+  },
+];

app/type/lecture.ts

@@ -7,7 +7,6 @@ export interface TakenLectrueInfo {
   lectureName: string;
   credit: number;
 }
-
 export interface LectureInfo {
   [index: string]: string | number | boolean;
   id: number;
@@ -16,7 +15,7 @@ export interface LectureInfo {
   credit: number;
 }
 
-export type SearchedLectureInfo = LectureInfo & { isTaken: boolean };
+export type SearchLectures = LectureInfo & { taken: boolean; revoked: boolean };
 
 export type LectureSearchParams = {
   type?: string;

app/ui/lecture/lecture-search/index.tsx

@@ -26,9 +26,10 @@ export default function LectureSearch() {
   const searchable = searchWord.keyword && searchWord.keyword.length > 1;
 
   return (
-    <div className="bg-white  w-full h-[500px] sm:h-[400px] z-[10] flex justify-center" data-testid="lecture-search">
+    <div className="bg-white  w-full h-[520px] sm:h-[420px] z-[10] flex justify-center" data-testid="lecture-search">
       <div className="w-[800px] mx-auto my-7  flex flex-col gap-10 sm:gap-6">
         <LectureSearchBar />
+
         {searchable ? (
           <Suspense
             fallback={

app/ui/lecture/lecture-search/lecture-search-bar.tsx

@@ -38,14 +38,15 @@ export default function LectureSearchBar() {
           <Select.Item value="lectureCode" placeholder="과목코드" />
         </Select>
       </div>
-      <div className="w-[60%] sm:w-[40%] flex justify-between">
+      <div className="w-[60%] sm:w-[40%] flex justify-between flex-col gap-1">
         <TextInput
           data-cy="search-lecture-input"
           placeholder="검색어를 입력해주세요"
           icon={MagnifyingGlassIcon}
           onValueChange={handleDebounceKeywordSearch}
           data-testid="lecture-search-input"
         />
+        <div className="text-zinc-400 text-xs text-end">※ 회색으로 표기된 과목은 폐강과목입니다</div>
       </div>
     </div>
   );

app/ui/lecture/lecture-search/lecture-search-result.tsx

@@ -1,4 +1,3 @@
-import { SearchedLectureInfo } from '@/app/type/lecture';
 import { useAtomValue } from 'jotai';
 import { searchWordAtom } from '@/app/store/search-word';
 import { useSuspenseQuery } from '@tanstack/react-query';
@@ -7,32 +6,33 @@ import List from '@/app/ui/view/molecule/list';
 import Grid from '@/app/ui/view/molecule/grid';
 import { QUERY_KEY } from '@/app/utils/query/react-query-key';
 import AddTakenLectureButton from '../taken-lecture/add-taken-lecture-button';
+import { SearchLectures } from '@/app/type/lecture';
 
 export default function LectureSearchResult() {
   const searchWord = useAtomValue(searchWordAtom);
 
-  const { data } = useSuspenseQuery<SearchedLectureInfo[]>({
+  const { data } = useSuspenseQuery<SearchLectures[]>({
     queryKey: [QUERY_KEY.SEARCH_LECTURE],
     queryFn: () => {
       return fetchSearchLectures(searchWord.type, searchWord.keyword as string);
     },
   });
 
-  const renderAddActionButton = (item: SearchedLectureInfo, isTaken: boolean) => {
-    return <AddTakenLectureButton lectureItem={item} isTaken={isTaken} />;
+  const renderAddActionButton = (item: SearchLectures, taken: boolean) => {
+    return <AddTakenLectureButton lectureItem={item} taken={taken} />;
   };
 
-  const render = (item: SearchedLectureInfo, index: number) => {
+  const render = (item: SearchLectures, index: number) => {
     const searchLectureItem = item;
     return (
-      <List.Row data-cy={`lecture-${searchLectureItem.name}`} key={index}>
+      <List.Row data-cy={`lecture-${searchLectureItem.name}`} key={index} textColor={item.revoked ? 'red' : 'black'}>
         <Grid cols={4}>
           {Object.keys(searchLectureItem).map((key, index) => {
-            if (key === 'id' || key === 'isTaken') return null;
+            if (key === 'id' || key === 'taken' || key === 'revoked') return null;
             return <Grid.Column key={index}>{searchLectureItem[key]}</Grid.Column>;
           })}
           {renderAddActionButton ? (
-            <Grid.Column>{renderAddActionButton(searchLectureItem, item.isTaken)}</Grid.Column>
+            <Grid.Column>{renderAddActionButton(searchLectureItem, item.taken)}</Grid.Column>
           ) : null}
         </Grid>
       </List.Row>

app/ui/lecture/taken-lecture/add-taken-lecture-button.tsx

@@ -7,11 +7,11 @@ import { useState } from 'react';
 
 interface AddTakenLectureButtonProps {
   lectureItem: LectureInfo;
-  isTaken: boolean;
+  taken: boolean;
 }
-export default function AddTakenLectureButton({ lectureItem, isTaken }: AddTakenLectureButtonProps) {
+export default function AddTakenLectureButton({ lectureItem, taken }: AddTakenLectureButtonProps) {
   const { toast } = useToast();
-  const [disabled, setDisabled] = useState(isTaken);
+  const [disabled, setDisabled] = useState(taken);
 
   const handleSuccessOfAdditionTakenLecture = () => {
     setDisabled(true);

app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx

@@ -37,7 +37,7 @@ export default function DeleteTakenLectureButton({ lectureId, onDelete }: Delete
           >
             <Button
               label="확인"
-              className="text-primary font-bold"
+              className="text-primary font-bold bg-white"
               data-testid="confirm-button"
               onClick={() => {
                 setOpen(false);

app/ui/view/molecule/drawer/drawer.tsx

@@ -16,7 +16,7 @@ const Drawer = ({ children, drawerKey, onClose, className }: DrawerProps) => {
   const { isOpen, toggle } = useDialog(drawerKey, onClose);
 
   return (
-    <DrawerPrimitive.Root open={isOpen} onRelease={toggle}>
+    <DrawerPrimitive.Root open={isOpen}>
       <DrawerPrimitive.Portal>
         <DrawerPrimitive.Overlay
           onClick={toggle}

app/ui/view/molecule/list/list-row.tsx

@@ -12,7 +12,7 @@ export function ListRow({ children, textColor = 'black', ...props }: ListRowProp
       {...props}
       className={twMerge(
         'border-solid border-gray-300 border-b-[1px] last:border-b-0 py-4 font-medium text-sm xl:text-base 2xl:text-lg hover:bg-gray-100 group hover:first:rounded-t-xl hover:last:rounded-b-xl',
-        textColor === 'red' ? 'text-red-500' : 'text-zinc-700',
+        textColor === 'red' ? 'text-zinc-400' : 'text-zinc-700',
       )}
     >
       {children}