Merge pull request #195 from prgrms-fe-devcourse/develop

9차 배포

Author: gitul0515

package-lock.json

@@ -6,10 +6,13 @@
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@reduxjs/toolkit": "^1.8.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
+    "browser-image-compression": "^2.0.0",
+    "heic2any": "^0.0.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",

package.json

@@ -1,18 +1,14 @@
-import { ThemeProvider } from '@emotion/react';
 import ContextProviders from 'contexts';
-import theme from 'styles/theme';
 import DefaultTemplate from 'template/DefaultTemplate';
 import Router from 'routes/Router';
 
 const App = () => {
   return (
-    <ThemeProvider theme={theme}>
-      <ContextProviders>
-        <DefaultTemplate>
-          <Router />
-        </DefaultTemplate>
-      </ContextProviders>
-    </ThemeProvider>
+    <ContextProviders>
+      <DefaultTemplate>
+        <Router />
+      </DefaultTemplate>
+    </ContextProviders>
   );
 };
 

src/App.jsx

@@ -2,7 +2,7 @@ import { Button, Text, UploadImage } from 'components';
 import styled from '@emotion/styled';
 import useClickAway from '../../hooks/useClickAway';
 
-const ChangeProfileModal = ({ onFileChange, onProfileSubmit, onClose }) => {
+const ChangeProfileModal = ({ onFileChange, onProfileSubmit, onClose, currentProfile }) => {
   const ref = useClickAway(() => {
     onClose && onClose();
   });
@@ -13,6 +13,7 @@ const ChangeProfileModal = ({ onFileChange, onProfileSubmit, onClose }) => {
           프로필을 변경하시겠습니까?
         </Text>
         <UploadImage
+          defaultImage={currentProfile}
           onChange={onFileChange}
           style={{ width: '90%', marginLeft: 'auto', marginRight: 'auto', marginTop: '30px' }}
         />{' '}

src/components/Card/index.jsx

@@ -2,7 +2,11 @@ import styled from '@emotion/styled';
 import { useNavigate } from 'react-router-dom';
 import { Icon, Text, FixedContainer } from 'components';
 import theme from 'styles/theme';
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
+import Badge from 'components/basic/Badge';
+import useLocalToken from 'hooks/useLocalToken';
+import { useState } from 'react';
+import { getNotifications } from 'utils/apis/userApi';
 
 const { headerHeight, pagePadding } = theme.value;
 const { borderLight } = theme.color;
@@ -39,10 +43,16 @@ const InnerRight = styled.div`
 
 export const Header = ({ prev, title, info, complete, onComplete }) => {
   const navigate = useNavigate();
-
   const onClickPrev = () => {
     navigate(-1);
   };
+  const [isSeen, setIsSeen] = useState(true);
+  const [token] = useLocalToken();
+  const initNotifications = async () => {
+    const fetchedNotifications = await getNotifications(token);
+    setIsSeen(fetchedNotifications.data[0].seen);
+  };
+  initNotifications();
 
   return (
     <HeaderContainer top height={headerHeight}>
@@ -53,7 +63,9 @@ export const Header = ({ prev, title, info, complete, onComplete }) => {
       <InnerRight>
         {info && (
           <>
-            <Icon.Link to="/user/notification" name="NOTIFICATION" size={30} />
+            <Badge dot={isSeen}>
+              <Icon.Link to="/user/notification" name="NOTIFICATION" size={30} />
+            </Badge>
             <Icon.Link to="/user/myinfo" name="MY_INFO" size={30} />
           </>
         )}