[webclient] 존재하지 않던 시간표 테마 - 시간표 수정/생성 대응

wafflestudio · Mar 3, 2025 · 2174712 · 2174712
1 parent a5877fd
commit 2174712
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 22 deletions.
diff --git a/apps/snutt-webclient/src/pages/main/index.tsx b/apps/snutt-webclient/src/pages/main/index.tsx
@@ -165,6 +165,7 @@ const MainWithCurrentYearSemesterTimetablesAndCurrentTimetable = ({
           open={dialogLectureId !== null}
           onClose={() => setDialogLectureId(null)}
           lecture={dialogLecture}
+          timetableTheme={timetableData.currentTimetable.theme}
         />
       )}
 
@@ -173,6 +174,7 @@ const MainWithCurrentYearSemesterTimetablesAndCurrentTimetable = ({
           open={isCreateLectureDialog}
           onClose={() => setCreateLectureDialog(false)}
           timetableId={timetableData.currentTimetable._id}
+          timetableTheme={timetableData.currentTimetable.theme}
         />
       )}
     </Layout>

diff --git a/apps/snutt-webclient/src/pages/main/main-lecture-create-dialog/index.tsx b/apps/snutt-webclient/src/pages/main/main-lecture-create-dialog/index.tsx
@@ -14,9 +14,14 @@ import { useGuardContext } from '@/hooks/useGuardContext';
 
 import { type LectureEditForm, MainLectureEditForm } from '../main-lecture-edit-form';
 
-type Props = { open: boolean; onClose: () => void; timetableId: FullTimetable['_id'] };
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  timetableId: FullTimetable['_id'];
+  timetableTheme: FullTimetable['theme'];
+};
 
-export const MainLectureCreateDialog = ({ open, onClose, timetableId }: Props) => {
+export const MainLectureCreateDialog = ({ open, onClose, timetableId, timetableTheme }: Props) => {
   const [draft, setDraft] = useState<Partial<LectureEditForm>>({});
   const { open: openErrorDialog, isOpen: isOpenErrorDialog, onClose: onCloseErrorDialog, message } = useErrorDialog();
   const { lectureService } = useGuardContext(ServiceContext);
@@ -57,7 +62,7 @@ export const MainLectureCreateDialog = ({ open, onClose, timetableId }: Props) =
       <Dialog.Title>강의 생성</Dialog.Title>
 
       <EditDialogContent data-testid="main-lecture-create-dialog-content">
-        <MainLectureEditForm draft={draft} setDraft={setDraft} />
+        <MainLectureEditForm draft={draft} setDraft={setDraft} timetableTheme={timetableTheme} />
       </EditDialogContent>
 
       <Actions>

diff --git a/apps/snutt-webclient/src/pages/main/main-lecture-edit-dialog/index.tsx b/apps/snutt-webclient/src/pages/main/main-lecture-edit-dialog/index.tsx
@@ -20,9 +20,10 @@ type Props = {
   onClose: () => void;
   lecture: Lecture;
   timetableId: string;
+  timetableTheme: number;
 };
 
-export const MainLectureEditDialog = ({ open, onClose, timetableId, lecture }: Props) => {
+export const MainLectureEditDialog = ({ open, onClose, timetableId, timetableTheme, lecture }: Props) => {
   const [draft, setDraft] = useState<Partial<LectureEditForm>>({});
   const { open: openErrorDialog, isOpen: isOpenErrorDialog, onClose: onCloseErrorDialog, message } = useErrorDialog();
   const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -71,12 +72,14 @@ export const MainLectureEditDialog = ({ open, onClose, timetableId, lecture }: P
           <MainLectureEditForm
             defaultState={{
               ...lecture,
+              // timetableTheme
               // TODO: find a better way
               // 받아올 때 lecture 를 받아놔야 하나..
               class_time_json: lecture.class_time_json.map((ctj) => lectureService.appendInternalId(ctj)),
             }}
             draft={draft}
             setDraft={setDraft}
+            timetableTheme={timetableTheme}
           />
         </EditDialogContent>
       )}

diff --git a/apps/snutt-webclient/src/pages/main/main-lecture-edit-form/index.tsx b/apps/snutt-webclient/src/pages/main/main-lecture-edit-form/index.tsx
@@ -25,10 +25,11 @@ type Props = {
   draft: Partial<LectureEditForm>;
   setDraft: (draft: Partial<LectureEditForm>) => void;
   defaultState?: Partial<Omit<LectureEditForm, 'color'> & { color: Color | Record<string, never> }>;
+  timetableTheme: number;
 };
 
-export const MainLectureEditForm = ({ draft, defaultState = {}, setDraft }: Props) => {
-  const { data: colorList } = useColorList();
+export const MainLectureEditForm = ({ draft, defaultState = {}, setDraft, timetableTheme }: Props) => {
+  const { data: colorList } = useColorList(timetableTheme);
   const { lectureService } = useGuardContext(ServiceContext);
 
   const currentColor =
@@ -59,6 +60,7 @@ export const MainLectureEditForm = ({ draft, defaultState = {}, setDraft }: Prop
         <RowLabel>색</RowLabel>
         {colorList && (
           <MainLectureEditFormColor
+            timeTableTheme={timetableTheme}
             colorList={colorList}
             currentColor={currentColor}
             onChangeColor={(i, c) => setDraft({ ...draft, colorIndex: i, color: c })}
@@ -94,12 +96,12 @@ export const MainLectureEditForm = ({ draft, defaultState = {}, setDraft }: Prop
   );
 };
 
-const useColorList = () => {
+const useColorList = (timetableTheme: number) => {
   const { colorService } = useGuardContext(ServiceContext);
   const { token } = useGuardContext(TokenAuthContext);
   return useQuery({
-    queryKey: ['ColorService', 'getColorList', { token }] as const,
-    queryFn: ({ queryKey: [, , req] }) => colorService.getColorList(req),
+    queryKey: ['ColorService', 'getColorList', { token, timetableTheme }] as const,
+    queryFn: ({ queryKey: [, , req] }) => colorService.getColorList(req.timetableTheme),
     staleTime: Infinity,
   });
 };

diff --git a/...tt-webclient/src/pages/main/main-lecture-edit-form/main-lecture-edit-form-color/index.tsx b/...tt-webclient/src/pages/main/main-lecture-edit-form/main-lecture-edit-form-color/index.tsx
@@ -4,16 +4,19 @@ import styled from 'styled-components';
 import type { Color } from '@/entities/color';
 
 type Props = {
+  timeTableTheme: number;
   colorList: Color[];
   currentColor?: Color;
   onChangeColor: (index: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9, color: Color) => void;
 };
 
 const defaultCustomColor = '#888888';
 
-export const MainLectureEditFormColor = ({ colorList, currentColor, onChangeColor }: Props) => {
+export const MainLectureEditFormColor = ({ timeTableTheme, colorList, currentColor, onChangeColor }: Props) => {
   const [customValue, setCustomValue] = useState<string>();
 
+  const themeName = TIMETABLE_THEME_NAMES[timeTableTheme];
+
   const isCustomColor = !!currentColor && colorList.every((c) => c.bg !== currentColor.bg);
 
   return (
@@ -36,7 +39,7 @@ export const MainLectureEditFormColor = ({ colorList, currentColor, onChangeColo
               onChangeColor((i + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9, c);
             }}
           >
-            {COLOR_LABEL_MAP[c.bg] ?? c.bg}
+            {themeName ? `${themeName} ${i + 1}` : c.bg}
           </ColorChip>
         );
       })}
@@ -106,14 +109,15 @@ const Palette = styled.input.attrs({ type: 'color' })`
   display: none;
 `;
 
-const COLOR_LABEL_MAP: { [color: string]: string | undefined } = {
-  '#e54459': '석류',
-  '#f58d3d': '감귤',
-  '#fac52d': '들국',
-  '#a6d930': '완두',
-  '#2bc366': '비취',
-  '#1bd0c9': '지중해',
-  '#1d99e9': '하늘',
-  '#4f48c4': '라벤더',
-  '#af56b3': '자수정',
-};
+const TIMETABLE_THEME_NAMES = ['SNUTT', '가을', '모던', '벛꽃', '얼음', '잔디'];
+// : { [color: string]: string | undefined } = {
+//   '#e54459': '석류',
+//   '#f58d3d': '감귤',
+//   '#fac52d': '들국',
+//   '#a6d930': '완두',
+//   '#2bc366': '비취',
+//   '#1bd0c9': '지중해',
+//   '#1d99e9': '하늘',
+//   '#4f48c4': '라벤더',
+//   '#af56b3': '자수정',
+// };