Add. color palette refactoring

ddok-ddak · Jan 10, 2024 · 24b4e73 · 24b4e73
1 parent d1e83a2
commit 24b4e73
Show file tree

Hide file tree

Showing 23 changed files with 208 additions and 125 deletions.
diff --git a/src/components/common/CustomCalendar.tsx b/src/components/common/CustomCalendar.tsx
@@ -29,6 +29,9 @@ export const CustomCalendar = (pickerProps: any) => {
 
   const { setNewDateRange } = useStatisticView();
 
+  const currentYear = new Date().getFullYear();
+  const yearList = Array.from({ length: 12 }, (_, i) => currentYear - 11 + i);
+
   /**
    * render custom calendar day elements (day, week type only)
    * @param date
@@ -56,18 +59,18 @@ export const CustomCalendar = (pickerProps: any) => {
     const backgroundColor =
       (periodType === 'BY_WEEK' && dayIsBetween) ||
       (periodType === 'BY_DAY' && isCurrentDate)
-        ? '#FFDCE1'
+        ? 'pink.200'
         : '';
     let color = '';
     switch (currentDay) {
       case 0:
-        color = isCurrentMonth ? '#FF4444' : '#FF9E9E';
+        color = isCurrentMonth ? 'calendar.currSun' : 'calendar.outSun';
         break;
       case 6:
-        color = isCurrentMonth ? '#3B66FF' : '#3B66FF';
+        color = isCurrentMonth ? 'calendar.currSat' : 'calendar.outSat';
         break;
       default:
-        color = isCurrentMonth ? '#4B4B4B' : '#B3B3B3';
+        color = isCurrentMonth ? 'calendar.currDay' : 'calendar.outCay';
         break;
     }
     return (
@@ -114,7 +117,7 @@ export const CustomCalendar = (pickerProps: any) => {
             height: '3px',
             width: '100%',
             borderRadius: '5px',
-            background: isCurrentDate ? '#FFA2AE' : 'transparent',
+            background: isCurrentDate ? 'pink.500' : 'transparent',
           }}
         />
       </Paper>
@@ -268,7 +271,7 @@ export const CustomCalendar = (pickerProps: any) => {
   const renderCustomMonthYearCalendar = () => {
     const list =
       switchView === 'BY_YEAR' || periodType === 'BY_YEAR'
-        ? [2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023]
+        ? yearList
         : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
     return (
       <Container
@@ -312,7 +315,7 @@ export const CustomCalendar = (pickerProps: any) => {
                 }}
                 sx={{
                   fontWeight: isCurrentDate ? '700' : '400',
-                  color: '#222222',
+                  color: 'grey.600',
                   backgroundColor: isCurrentDate ? 'primary.light' : '',
                   borderRadius: '5px',
                   width: '98%',
@@ -329,7 +332,7 @@ export const CustomCalendar = (pickerProps: any) => {
                   height: '3px',
                   width: '100%',
                   borderRadius: '5px',
-                  background: isCurrentDate ? '#FFA2AE' : 'transparent',
+                  background: isCurrentDate ? 'pink.500' : 'transparent',
                 }}
               />
             </Paper>

diff --git a/src/components/common/IconWrapper.tsx b/src/components/common/IconWrapper.tsx
@@ -0,0 +1,7 @@
+import { Box } from '@mui/material';
+import { theme } from '@/styles';
+
+const IconWrapper = (props: {svgIcon: any, theme: any}) => {
+  return <Box children={props.svgIcon} />;
+};
+export default IconWrapper;
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
@@ -115,7 +115,7 @@ const Modal = () => {
                           />
                         }
                         sx={{
-                          color: '#222222',
+                          color: 'grey.700',
                           m: 0,
                           p: 0,
                           height: '14px',
@@ -127,10 +127,10 @@ const Modal = () => {
                             height: '15px',
                           },
                           '& .MuiSvgIcon-root:first-of-type ': {
-                            color: '#222222',
+                            color: 'grey.700',
                           },
                           '& .MuiSvgIcon-root:last-of-type ': {
-                            color: '#FF7184',
+                            color: 'pink.700',
                           },
                           ' .MuiFormControlLabel-label': {
                             fontSize: '13px',
@@ -180,7 +180,7 @@ const Modal = () => {
                 sx={{
                   gridArea: 'btn-a',
                   flex: '1 1 49%',
-                  color: '#4F75FF',
+                  color: 'button.blue',
                   fontSize: '13px',
                 }}
                 onClick={modalInfo.btn1ClickHandler}
@@ -196,7 +196,7 @@ const Modal = () => {
                 sx={{
                   gridArea: 'btn-b',
                   flex: '1 1 49%',
-                  color: '#4F75FF',
+                  color: 'button.blue',
                   fontSize: '13px',
                   fontWeight: '600',
                 }}

diff --git a/src/components/common/PrevButton.tsx b/src/components/common/PrevButton.tsx
@@ -22,7 +22,7 @@ const PrevButton = ({
           p: 0,
           m: 0,
           lineHeight: '13px',
-          color: '#949494',
+          color: 'grey.500',
           fontSize: '13px',
           marginRight: '95%',
         }}

diff --git a/src/components/date/DateInput.tsx b/src/components/date/DateInput.tsx
@@ -33,7 +33,7 @@ const DateInput = ({ params, width }: any) => {
         ' .MuiInputBase-input': {
           p: '16px 0',
           overflow: 'auto',
-          color: '#4B4B4B',
+          color: 'grey.600',
           fontWeight: '600',
           fontSize: '14px',
         },

diff --git a/src/components/date/DaysChip.tsx b/src/components/date/DaysChip.tsx
@@ -20,7 +20,6 @@ const DaysChip = (props: DaysChipProps) => {
         display: 'flex',
         flex: '0 0 11vw',
         flexDirection: 'column',
-
       }}
     >
       <Box
@@ -35,7 +34,7 @@ const DaysChip = (props: DaysChipProps) => {
       >
         <Box
           sx={{
-            backgroundColor: `${props.isselected && '#FFDCE1'}`,
+            backgroundColor: `${props.isselected && 'pink.200'}`,
             borderRadius: '50%',
             flexDirection: 'column',
             width: '6vw',
@@ -56,7 +55,7 @@ const DaysChip = (props: DaysChipProps) => {
       </Box>
       <Box
         sx={{
-          backgroundColor: props.underline ? '#FF7184' : '',
+          backgroundColor: `${props.underline && 'pink.700'}`,
           width: '100%',
           height: '5px',
           borderRadius: '5px',

diff --git a/src/components/layout/CommonHeader.tsx b/src/components/layout/CommonHeader.tsx
@@ -45,7 +45,7 @@ const CommonHeader = (props: CommonHeaderProps) => {
               }
             }
           >
-            <Typography sx={{ fontSize: '13px', color: '#949494' }}>
+            <Typography sx={{ fontSize: '13px', color: 'grey.500' }}>
               {props.prevButtonText ?? '뒤로'}
             </Typography>
           </IconButton>
@@ -68,7 +68,7 @@ const CommonHeader = (props: CommonHeaderProps) => {
             verticalAlign: 'center',
             fontSize: '16px',
             fontWeight: '700',
-            color: '#949494',
+            color: 'grey.500',
           }}
         >
           {props.title}
@@ -82,7 +82,7 @@ const CommonHeader = (props: CommonHeaderProps) => {
             aria-label="menu"
             onClick={props.onClickNextButton}
           >
-            <Typography sx={{ fontSize: '13px', color: '#949494' }}>
+            <Typography sx={{ fontSize: '13px', color: 'grey.500' }}>
               {props.nextButtonText ?? '완료'}
             </Typography>
           </IconButton>

diff --git a/src/pages/auth/common/FormWrapper.tsx b/src/pages/auth/common/FormWrapper.tsx
@@ -19,7 +19,7 @@ const FormWrapper = ({children}: {children: ReactNode}) => {
       <Box sx={{ display: 'flex', flexDirection: 'column', flex: '1 1 47vh', }}>
         <Typography
           sx={{
-            color: '#222222',
+            color: 'grey.700',
             fontWeight: '700',
             fontSize: '18px',
             padding: '30px 0 41px 0',

diff --git a/src/pages/auth/common/VerifyCode.tsx b/src/pages/auth/common/VerifyCode.tsx
@@ -70,13 +70,13 @@ const VerifyCode = (props: any) => {
             margin: '16px 0 8px 10px',
             justifyContent: 'center',
             radius: '5px',
-            backgroundColor: '#E8E8E8',
+            backgroundColor: 'grey.200',
           }}
         >
           <Typography
             sx={{
               fontSize: '11px',
-              color: '#949494',
+              color: 'grey.500',
             }}
           >
             인증코드 재요청
@@ -159,7 +159,7 @@ const VerifyCode = (props: any) => {
         <Typography
           sx={{
             fontSize: '11px',
-            color: '#949494',
+            color: 'grey.500',
           }}
         >
           ! 인증 코드가 오지 않으면 스팸함을 확인해주세요. <br />

diff --git a/src/pages/auth/login/Login.tsx b/src/pages/auth/login/Login.tsx
@@ -9,7 +9,7 @@ import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import FormWrapper from '../common/FormWrapper';
-import InputForm from '../common/InputForm';
+import InputForm, { InputItemType } from '../common/InputForm';
 // import { ReactElement, useEffect, useCallback, useState } from 'react';
 // import { Typography } from '@mui/material';
 // import React from 'react';

diff --git a/src/pages/auth/resetPW/ResetPW.tsx b/src/pages/auth/resetPW/ResetPW.tsx
@@ -60,7 +60,7 @@ const SetPW = (props: any) => {
           }}
           edge="end"
           sx={{
-            color: '#FF8999',
+            color: 'pink.600',
             fontSize: '13px',
             fontWeight: '400',
           }}

diff --git a/src/pages/auth/resetPW/ResetPWMode.tsx b/src/pages/auth/resetPW/ResetPWMode.tsx
@@ -14,7 +14,7 @@ const ResetPWMode = (props: any) => {
     handleClick: () => void,
   ) => {
     const buttonColor =
-      isCurrentPWMode === pWChgMode ? 'primary.main' : '#949494';
+      isCurrentPWMode === pWChgMode ? 'primary.main' : 'grey.500';
     return (
       <Button
         onClick={handleClick}

diff --git a/src/pages/auth/signup/SetEmail.tsx b/src/pages/auth/signup/SetEmail.tsx
@@ -71,7 +71,7 @@ const SetEmail = (props: any) => {
             onClick={duplicateCheckerHandler}
             disabled={disableDuplicateChkBtn}
             sx={{
-              color: '#FF8999',
+              color: 'pink.600',
               fontSize: '13px',
               fontWeight: '400',
             }}

diff --git a/src/pages/auth/signup/SignUp.tsx b/src/pages/auth/signup/SignUp.tsx
@@ -45,7 +45,7 @@ const SignUp = () => {
             sx={{
               display: 'flex',
               justifyContent: 'flex-end',
-              color: '#B7B7B7',
+              color: 'grey.400',
               fontSize: '13px',
             }}
           >
@@ -78,7 +78,7 @@ const SignUp = () => {
             sx={{
               width: '100%',
               textAlign: 'center',
-              color: '#222222',
+              color: 'grey.700',
               fontWeight: '700',
               fontSize: '18px',
             }}

diff --git a/src/pages/category/CategoryPage.tsx b/src/pages/category/CategoryPage.tsx
@@ -15,7 +15,10 @@ import Circle from '../../components/common/Circle';
 import FolderTop from '../../components/common/FolderTop';
 import Spacer from '../../components/common/Spacer';
 import CommonHeader from '../../components/layout/CommonHeader';
-import { selectedMainCategoryState, selectedSubCategoryState } from '../../store/category';
+import {
+  selectedMainCategoryState,
+  selectedSubCategoryState,
+} from '../../store/category';
 import Wrapper from '../auth/common/Wrapper';
 
 import { currentUserInfo } from '@/store/info';
@@ -105,7 +108,7 @@ const CategoryPage = () => {
    */
   // const getUserInfo = async () => {
   //   const response = await getInfo();
-  //   if (response.status === 'SUCCESS') {11 5 
+  //   if (response.status === 'SUCCESS') {11 5
   //     setUserInfo(response.result);
   //   } else {
   //     alert('Error');
@@ -115,7 +118,11 @@ const CategoryPage = () => {
   const getUserInfo = () => {
     const data: UserData = { email: '', nickname: '', templateType: 'STUDENT' };
     setUserInfo(data);
-    setCurrentUserMode(UserModeList.filter((userMode: ModeProps) => {return userMode.type === data.templateType })[0]);
+    setCurrentUserMode(
+      UserModeList.filter((userMode: ModeProps) => {
+        return userMode.type === data.templateType;
+      })[0],
+    );
   };
 
   /**
@@ -130,29 +137,32 @@ const CategoryPage = () => {
     }
   };
 
-  const getCategoryIcon = (sub: SubCategoryProps) => (
-    <Circle
-      label={sub.name}
-      labelSize={'10px'}
-      color={sub.color}
-      size={40}
-      onClick={() => {
-        const category = categories.filter(
-          (category) => category.categoryId === sub.mainCategoryId,
-        )[0];
-        sub.highlightColor = category.color;
-        setSelectedMainCategory(category);
-        setSelectedSubCategory(sub);
-        navigation('/category/edit', {
-          state: {
-            mode: 'edit',
-          },
-        });
-      }}
-      iconSize={40}
-      iconName={sub.iconFile.filename?.split('.')[0] || ''}
-    />
-  );
+  const getCategoryIcon = (sub: SubCategoryProps) => {
+    console.log(sub);
+    return (
+      <Circle
+        label={sub.name}
+        labelSize={'10px'}
+        color={sub.color}
+        size={40}
+        onClick={() => {
+          const category = categories.filter(
+            (category) => category.categoryId === sub.mainCategoryId,
+          )[0];
+          sub.highlightColor = category.color;
+          setSelectedMainCategory(category);
+          setSelectedSubCategory(sub);
+          navigation('/category/edit', {
+            state: {
+              mode: 'edit',
+            },
+          });
+        }}
+        iconSize={40}
+        iconName={sub.iconFile.filename?.split('.')[0] || ''}
+      />
+    );
+  };
 
   useEffect(() => {
     getUserInfo();
@@ -207,8 +217,8 @@ const CategoryPage = () => {
               <RadioGroup key={idx}>
                 <Circle
                   label={`${mode.name} 모드`}
-                  labelSize={'13px'}
-                  color={'#FFC5CC'}
+                  labelSize='13px'
+                  color='pink.300'
                   size={63}
                   iconSize={41}
                   iconName={mode.id}
@@ -235,10 +245,10 @@ const CategoryPage = () => {
                       height: '15px',
                     },
                     '& .MuiSvgIcon-root:first-of-type ': {
-                      color: '#222222',
+                      color: 'grey.700',
                     },
                     '& .MuiSvgIcon-root:last-of-type ': {
-                      color: '#FF7184',
+                      color: 'pink.700',
                     },
                   }}
                 />
@@ -254,7 +264,7 @@ const CategoryPage = () => {
         sx={{
           width: '100vw',
           height: '3px',
-          backgroundColor: '#FFF4F6',
+          backgroundColor: 'chart.customBackground',
           border: 'none',
         }}
       />