From 36e16dd76f23a11647cba71ccf3c19d809588665 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Sun, 16 Jun 2024 19:07:43 +0900
Subject: [PATCH] feat: implement closed lecture

---
 app/ui/lecture/lecture-search/lecture-search-bar.tsx         | 3 ++-
 app/ui/lecture/lecture-search/lecture-search-result.tsx      | 2 +-
 app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx | 2 +-
 app/ui/view/molecule/list/list-row.tsx                       | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/ui/lecture/lecture-search/lecture-search-bar.tsx b/app/ui/lecture/lecture-search/lecture-search-bar.tsx
index 96d6b7af..8404a791 100644
--- a/app/ui/lecture/lecture-search/lecture-search-bar.tsx
+++ b/app/ui/lecture/lecture-search/lecture-search-bar.tsx
@@ -38,7 +38,7 @@ 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="검색어를 입력해주세요"
@@ -46,6 +46,7 @@ export default function LectureSearchBar() {
           onValueChange={handleDebounceKeywordSearch}
           data-testid="lecture-search-input"
         />
+        <div className="text-zinc-400 text-xs text-end">※ 회색으로 표기된 과목은 폐강과목입니다</div>
       </div>
     </div>
   );
diff --git a/app/ui/lecture/lecture-search/lecture-search-result.tsx b/app/ui/lecture/lecture-search/lecture-search-result.tsx
index 99e16488..dcb3dcd6 100644
--- a/app/ui/lecture/lecture-search/lecture-search-result.tsx
+++ b/app/ui/lecture/lecture-search/lecture-search-result.tsx
@@ -14,7 +14,7 @@ export default function LectureSearchResult() {
   const render = (item: SearchedLectureInfoResponse, 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 ? 'gray' : 'black'}>
         <Grid cols={4}>
           {Object.keys(searchLectureItem).map((key, index) => {
             if (key === 'id' || key === 'taken' || key === 'revoked') return null;
diff --git a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
index e451be5f..1c07d46c 100644
--- a/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
+++ b/app/ui/lecture/taken-lecture/delete-taken-lecture-button.tsx
@@ -43,7 +43,7 @@ export default function DeleteTakenLectureButton({ lectureId, onDelete }: Delete
           >
             <Button
               label="확인"
-              className="font-bold"
+              className="text-primary font-bold bg-white"
               data-cy="confirm-button"
               data-testid="confirm-button"
               onClick={() => {
diff --git a/app/ui/view/molecule/list/list-row.tsx b/app/ui/view/molecule/list/list-row.tsx
index f220a7a0..18d88169 100644
--- a/app/ui/view/molecule/list/list-row.tsx
+++ b/app/ui/view/molecule/list/list-row.tsx
@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 
 interface ListRowProps extends React.HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
-  textColor?: 'red' | 'black';
+  textColor?: 'gray' | 'black';
 }
 
 export function ListRow({ children, textColor = 'black', ...props }: ListRowProps) {
@@ -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 === 'gray' ? 'text-zinc-400' : 'text-zinc-700',
       )}
     >
       {children}