Merge pull request #188 from pkiop/feat/AppColor

앱 색 수정
pkiop · Jan 25, 2021 · 6f5639d · 6f5639d
2 parents ab79428 + 24e507b
commit 6f5639d
Show file tree

Hide file tree

Showing 15 changed files with 53 additions and 33 deletions.
diff --git a/frontend/src/components/UI/atoms/DatePicker/index.tsx b/frontend/src/components/UI/atoms/DatePicker/index.tsx
@@ -11,7 +11,7 @@ interface Props {
 function DatePicker({ userVar, setUserVar, className }: Props) {
   return (
     <ReactDatePicker
-      dateFormat={'yyyy/MM/dd'}
+      dateFormat={'yyyy년 M월 d일'}
       className={className}
       selected={new Date(userVar.selectedDate)}
       onChange={(date:Date) => setUserVar({ ...userVar, selectedDate: date.toISOString().split('T')[0] })}

diff --git a/frontend/src/components/UI/atoms/PieChart/index.tsx b/frontend/src/components/UI/atoms/PieChart/index.tsx
@@ -49,12 +49,11 @@ function PieChart({
     const categoryData = recodeList?.reduce(reducer, {});
     const colorData = recodeList?.reduce(colorReducer(categoryList), {});
     const dataArray = Object.entries(categoryData || {}).map((el: any) => el);
-
     bb.generate({
       data: {
-        columns: dataArray.length === 0 ? [['empty', 1]] : dataArray,
+        columns: dataArray.length === 0 ? [['데이터 없음', 1]] : dataArray,
         type: pie(),
-        colors: colorData,
+        colors: JSON.stringify(colorData) === '{}' ? { '데이터 없음': '#dddddd' } : colorData,
       },
       bindto: '#pieChart',
     });

diff --git a/frontend/src/components/UI/molecules/BottomBtns/style.ts b/frontend/src/components/UI/molecules/BottomBtns/style.ts
@@ -5,7 +5,7 @@ export const BottomBtns = styled.div`
   padding: 0.5rem;
   display: flex;
   justify-content: space-between;
-  background-color: ${({ theme }) => theme.color.beige};
+  background-color: ${({ theme }) => theme.color.mainColor};
   border-radius: ${({ theme }) => theme.size.mainInputRadius};
 `;
 
@@ -17,25 +17,25 @@ const Btn = css`
 
 export const LgBtn = styled(Button)`
   ${Btn};
-  background-color: ${({ theme }) => theme.color.submitGreen};
+  background-color: ${({ theme }) => theme.color.submit};
   transition: 0.3s;
 
   margin-right: 1em;
   width: 70%;
   :hover {
-    background-color: ${({ theme }) => theme.color.submitGreenHover};
+    background-color: ${({ theme }) => theme.color.submitHover};
     transition: 0.3s;
     cursor: pointer;
   }
 `;
 export const SmBtn = styled(Button)`
   ${Btn};
-  background-color: ${({ theme }) => theme.color.deleteRed};
+  background-color: ${({ theme }) => theme.color.delete};
   transition: 0.3s;
   width: 25%;
 
   :hover {
-    background-color: ${({ theme }) => theme.color.deleteRedHover};
+    background-color: ${({ theme }) => theme.color.deleteHover};
     transition: 0.3s;
     cursor: pointer;
   }

diff --git a/frontend/src/components/UI/molecules/Recode/index.tsx b/frontend/src/components/UI/molecules/Recode/index.tsx
@@ -40,9 +40,10 @@ function Recode({
   className,
 }: Props) {
   const nowTime = getNowTime(startTime, endTime);
+  const isProgressing = endTime.hour === nowHourMin().hour && endTime.min === nowHourMin().min;
 
   return (
-    <S.Recode onClick={onClick} className={className} >
+    <S.Recode onClick={onClick} className={`${className} ${isProgressing ? 'progress' : ''}`} >
       <S.UpperWrap>
         <S.Title text={title} />
       </S.UpperWrap>

diff --git a/frontend/src/components/UI/molecules/Recode/style.ts b/frontend/src/components/UI/molecules/Recode/style.ts
@@ -3,12 +3,11 @@ import Text from 'components/UI/atoms/Text';
 import TimeRangeTextComponent from 'components/UI/molecules/TimeRangeText';
 
 export const Recode = styled.div`
-  background-color: ${({ theme }) => theme.color.beige};
+  background-color: ${({ theme }) => theme.color.mainColor};
   padding: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 4rem;
   box-sizing: border-box; 
   height: 6rem;
   border-radius: ${({ theme }) => theme.size.mainInputRadius};
@@ -19,6 +18,9 @@ export const Recode = styled.div`
     transition: 0.3s box-shadow;
     cursor: pointer;
   }
+  &.progress {
+    background-color: ${({ theme }) => theme.color.darkMainColor};
+  }
 `;
 
 const textCss = css`

diff --git a/frontend/src/components/UI/molecules/TitleInput/style.ts b/frontend/src/components/UI/molecules/TitleInput/style.ts
@@ -3,7 +3,7 @@ import TextComponent from 'components/UI/atoms/Text';
 import InputComponent from 'components/UI/atoms/Input';
 
 export const TitleInput = styled.div`
-  background-color: ${({ theme }) => theme.color.beige};
+  background-color: ${({ theme }) => theme.color.mainColor};
   border-radius: ${({ theme }) => theme.size.mainInputRadius};
 `;
 

diff --git a/frontend/src/components/UI/organisms/Board/style.ts b/frontend/src/components/UI/organisms/Board/style.ts
@@ -4,7 +4,7 @@ export const Board = styled.div`
   padding: 1.2rem;
   width: 45%;
   height: 10rem;
-  background-color: ${({ theme }) => theme.color.beige};
+  background-color: ${({ theme }) => theme.color.mainColor};
   border-radius: ${({ theme }) => theme.size.mainInputRadius};
   display: flex;
   flex-direction: column;

diff --git a/frontend/src/components/UI/organisms/CategorySelectBar/style.ts b/frontend/src/components/UI/organisms/CategorySelectBar/style.ts
@@ -4,7 +4,7 @@ import ToggleSwitchComponent from 'components/UI/atoms/ToggleSwitch';
 
 export const CategorySelectBar = styled.div`
   padding: 0.5rem;
-  background-color: ${({ theme }) => theme.color.beige};
+  background-color: ${({ theme }) => theme.color.mainColor};
   display: flex;
   justify-content: space-between;
   border-radius: ${({ theme }) => theme.size.mainInputRadius};

diff --git a/frontend/src/components/UI/organisms/HeaderBar/style.ts b/frontend/src/components/UI/organisms/HeaderBar/style.ts
@@ -5,7 +5,7 @@ import DatePickerComponent from 'components/UI/atoms/DatePicker';
 import UserModalComponent from 'components/UI/organisms/Modal';
 
 export const HeaderBar = styled.div`
-  background-color: ${({ theme }) => theme.color.black};
+  background-color: ${({ theme }) => theme.color.headerBar};
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -25,14 +25,17 @@ export const DigitalClockWrap = styled.div`
 `;
 
 export const DatePicker = styled(DatePickerComponent)`
-  background-color: black ;
+  background-color: ${({ theme }) => theme.color.headerBar} ;
   color: white ;
   text-align: center;
   color: transparent;
   text-shadow: 0 0 0 white;
   :focus {
     outline: none;
   }
+  :hover {
+    cursor: pointer;
+  }
 `;
 
 const UserRight = '0.4rem';
@@ -48,6 +51,9 @@ export const UserProfile = styled.div`
   margin-right: ${UserRight};
   display: flex;
   align-items: center;
+  :hover {
+    cursor: pointer;
+  }
 `;
 
 export const UserImg = styled(Img)`

diff --git a/frontend/src/components/UI/organisms/Modal/style.ts b/frontend/src/components/UI/organisms/Modal/style.ts
@@ -19,6 +19,9 @@ export const Dropdown = styled(DropdownComponent)`
   &.active{
     flex-direction: column;
     z-index: 101;
+    :hover {
+      cursor: pointer;
+    }
   }
 `;
 

diff --git a/frontend/src/components/UI/organisms/NavBar/style.ts b/frontend/src/components/UI/organisms/NavBar/style.ts
@@ -9,7 +9,7 @@ export const NavBar = styled.div`
 `;
 
 export const AddBtn = styled.div`
-  background-color: ${({ theme }) => theme.color.beige};
+  background-color: ${({ theme }) => theme.color.mainColor};
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 1.3rem;

diff --git a/frontend/src/components/UI/organisms/TimeInput/style.ts b/frontend/src/components/UI/organisms/TimeInput/style.ts
@@ -3,7 +3,7 @@ import TextComponent from 'components/UI/atoms/Text';
 import InputComponent from 'components/UI/atoms/Input';
 
 export const TimeInput = styled.div`
-  background-color: ${({ theme }) => theme.color.beige};
+  background-color: ${({ theme }) => theme.color.mainColor};
   display: flex;
   justify-content: center;
   border-radius: ${({ theme }) => theme.size.mainInputRadius};

diff --git a/frontend/src/pages/Login/style.ts b/frontend/src/pages/Login/style.ts
@@ -3,12 +3,14 @@ import ImgComponent from 'components/UI/atoms/Img';
 import OAuthLoginComponent from 'components/UI/molecules/OAuthLogin';
 
 export const LoginPage = styled.div`
-  background-color: ${({ theme }) => theme.color.beige};
+  background-color: ${({ theme }) => theme.color.mainColor};
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
+
 `;
 
 export const Img = styled(ImgComponent)`
@@ -21,4 +23,7 @@ export const Img = styled(ImgComponent)`
 
 export const GoogleLogin = styled(OAuthLoginComponent)`
   border: 2px solid ${({ theme }) => theme.color.black};
+  :hover {
+    cursor: pointer;
+  }
 `;
diff --git a/frontend/src/pages/Main/index.tsx b/frontend/src/pages/Main/index.tsx
@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useState, useReducer,
+  useCallback, useState, useReducer, useRef,
 } from 'react';
 import MainTemplate from 'components/templates/MainTemplate';
 import RecodeList from 'components/UI/organisms/RecodeList';
@@ -19,6 +19,7 @@ function Main() {
   const toggleRecodeInput = useCallback(() => toggleBRecodeInput(), []);
   const plusOnClick = useCallback(() => { toggleBRecodeInput(); setClickedRecodeId(''); }, []);
   const userReactiveVar = useReactiveVar(userVar);
+  const bUserUpdating = useRef<boolean>(false);
 
   const {
     loading, error, data, refetch,
@@ -43,8 +44,9 @@ function Main() {
       if (userData.getUser.items.length !== 0) {
         tempLabelList = userData.getUser.items[0]?.categoryList;
         tempGoalTime = userData.getUser.items[0]?.goalTime;
-      } else {
-        const defaultLabelList = [{ color: 'red', labelName: '개발' }, { color: 'blue', labelName: '잠' }, { color: 'green', labelName: '책' }, { color: 'yellow', labelName: '운동' }, { color: 'skyblue', labelName: '산책' }, { color: 'black', labelName: '기타' }];
+      } else if (bUserUpdating.current === false) {
+        bUserUpdating.current = true;
+        const defaultLabelList = [{ color: '#c70039', labelName: '개발' }, { color: '#111d5e', labelName: '잠' }, { color: '#007965', labelName: '책' }, { color: '#f37121', labelName: '운동' }, { color: '#51c2d5', labelName: '산책' }, { color: '#663f3f', labelName: '기타' }];
         addUserData({
           variables: {
             input: {
@@ -53,6 +55,7 @@ function Main() {
             },
           },
         }).then(() => {
+          bUserUpdating.current = false;
           userRefetch();
         });
       }

diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
@@ -1,15 +1,16 @@
 const color = {
   black: '#000000',
-  mainColor: '#2E4B73',
+  headerBar: '#222831',
+  mainColor: '#dddddd',
+  darkMainColor: '#aaaaaa',
+  subMainColor: '#222831',
   white: '#FFFFFF',
-  beige: '#ECE6CC',
-  beigeCompare: '#E0980C',
-  navbar: '#3F93FD',
-  timeInput: '#F87878',
-  submitGreen: '#28A745',
-  submitGreenHover: '#218838',
-  deleteRed: '#DC3545',
-  deleteRedHover: '#C82333',
+  navbar: '#222831',
+  timeInput: '#bbbbbb',
+  submit: '#bbbbbb',
+  submitHover: '#218838',
+  delete: '#DC3545',
+  deleteHover: '#C82333',
 };
 
 const size = {
@@ -18,7 +19,7 @@ const size = {
     height: '1.4rem',
   },
   mainInputRadius: '0.5rem',
-  headerBarHeight: '2.5rem',
+  headerBarHeight: '3rem',
   navbarHeight: '3rem',
 };