Feat/#161: 알림 받을 수 있도록 기능 추가 & 마이페이지 디자인 개선

public/manifest.json

@@ -0,0 +1,61 @@
+{
+  "name": "부림이",
+  "short_name": "부림이",
+  "start_url": "/",
+  "display": "fullscreen",
+  "background_color": "#ffffff",
+  "lang": "en",
+  "scope": "/",
+  "orientation": "portrait",
+  "theme_color": "#ffffff",
+  "icons": [
+    {
+      "src": "icons/icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    { "src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

sw.js → public/sw.js

@@ -12,3 +12,11 @@ self.addEventListener('activate', (e) => {
 self.addEventListener('fetch', (e) => {
   console.log('[Service Worker] fetched resource ' + e.request.url);
 });
+
+self.addEventListener('push', (e) => {
+  const data = e.data.json();
+  self.registration.showNotification(data.title, {
+    body: data.body,
+    icon: data.icon,
+  });
+});

src/components/Button/Toggle/index.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import { MouseEventHandler } from 'react';
+
+interface Props {
+  isOn: boolean;
+  changeState: MouseEventHandler<HTMLElement>;
+  animation: boolean;
+}
+
+interface Circle {
+  isOn: boolean;
+  animation: boolean;
+}
+
+const ToggleButton = (props: Props) => {
+  const { isOn, changeState, animation } = props;
+
+  return (
+    <Button onClick={changeState} isOn={isOn} animation={animation}>
+      <Circle isOn={isOn} animation={animation} />
+    </Button>
+  );
+};
+
+export default ToggleButton;
+
+const Button = styled.button<Circle>`
+  position: relative;
+  border: none;
+  width: 3.2rem;
+  height: 1.8rem;
+
+  transition: ${(prop) => (prop.animation ? 'all 0.3s ease-in-out' : 'none')};
+
+  background-color: ${(prop) => (prop.isOn ? THEME.PRIMARY : THEME.BACKGROUND)};
+  border-radius: 1rem;
+`;
+
+const Circle = styled.div<Circle>`
+  position: absolute;
+  border-radius: 50%;
+  width: 1.2rem;
+  height: 1.2rem;
+  transition: ${(prop) => (prop.animation ? 'all 0.3s ease-in-out' : 'none')};
+
+  background-color: #f5f5f5;
+  top: 0.3rem;
+  left: ${(prop) => (prop.isOn ? '1.7rem' : '0.4rem')};
+`;

src/components/List/DepartmentList/index.tsx

@@ -3,6 +3,7 @@ import Button from '@components/Button';
 import Icon from '@components/Icon';
 import AlertModal from '@components/Modal/AlertModal';
 import ConfirmModal from '@components/Modal/ConfirmModal';
+import { SERVER_URL } from '@config/index';
 import { MODAL_MESSAGE } from '@constants/modal-messages';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -18,7 +19,7 @@ const DepartmentList = () => {
   const [selected, setSelected] = useState<string>('');
   const [buttonDisable, setButtonDisable] = useState<boolean>(true);
   const { routerTo, goBack } = useRouter();
-  const { setMajor } = useMajor();
+  const { major, setMajor } = useMajor();
   const { college } = useParams();
   const { openModal, closeModal } = useModals();
 
@@ -40,6 +41,13 @@ const DepartmentList = () => {
 
   const handlerMajorSetModal = () => {
     closeModal(ConfirmModal);
+    const storedSubscribe = localStorage.getItem('subscribe');
+    if (major && storedSubscribe) {
+      http.delete(`${SERVER_URL}/api/subscription/major`, {
+        data: { subscription: JSON.parse(storedSubscribe), major },
+      });
+      localStorage.removeItem('subscribe');
+    }
     const afterSpace = selected.substring(selected.indexOf(' ') + 1);
     localStorage.setItem('major', afterSpace);
     setMajor(afterSpace);

src/hooks/urlBase64ToUint8Array.ts

@@ -0,0 +1,14 @@
+const urlBase64ToUint8Array = (base64String: string) => {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+  return outputArray;
+};
+
+export default urlBase64ToUint8Array;

src/mocks/browser.ts

@@ -3,11 +3,13 @@ import { setupWorker } from 'msw';
 import { announceHandlers } from './handlers/announceHandlers';
 import { graduationHandler } from './handlers/graudationHandler';
 import { majorHandlers } from './handlers/majorHandlers';
+import { subscribeHandler } from './handlers/subscribeHandler';
 import { testHandlers } from './handlers/testHandlers';
 
 export const worker = setupWorker(
   ...majorHandlers,
   ...testHandlers,
   ...announceHandlers,
   ...graduationHandler,
+  ...subscribeHandler,
 ); // 브라우저 환경 서버

src/mocks/handlers/subscribeHandler.ts

@@ -0,0 +1,11 @@
+import { SERVER_URL } from '@config/index';
+import { RequestHandler, rest } from 'msw';
+
+export const subscribeHandler: RequestHandler[] = [
+  rest.post(SERVER_URL + '/api/subscription', (req, res, ctx) => {
+    return res(ctx.status(200));
+  }),
+  rest.delete(SERVER_URL + '/api/subscription', (req, res, ctx) => {
+    return res(ctx.status(200));
+  }),
+];

src/mocks/server.ts

@@ -2,10 +2,12 @@ import { setupServer } from 'msw/node';
 
 import { announceHandlers } from './handlers/announceHandlers';
 import { majorHandlers } from './handlers/majorHandlers';
+import { subscribeHandler } from './handlers/subscribeHandler';
 import { testHandlers } from './handlers/testHandlers';
 
 export const server = setupServer(
   ...majorHandlers,
   ...testHandlers,
   ...announceHandlers,
+  ...subscribeHandler,
 );

src/pages/My/index.test.tsx

@@ -62,7 +62,7 @@ describe('마이 페이지 동작 테스트', () => {
       { wrapper: MemoryRouter },
     );
 
-    const majorEditButton = screen.getByTestId('edit');
+    const majorEditButton = screen.getByText('학과 선택하러가기');
     await userEvent.click(majorEditButton);
     expect(mockRouterTo).toHaveBeenCalledWith('/major-decision');
   });