Merge pull request #167 from GDSC-PKNU-21-22/dev

부리미 0.24v 배포
GDSC-PKNU-Official · Aug 22, 2023 · a38735b · a38735b
2 parents 3e645e0 + 2349908
commit a38735b
Show file tree

Hide file tree

Showing 32 changed files with 1,441 additions and 491 deletions.
diff --git a/public/assets/map1.png b/public/assets/map1.png
diff --git a/public/assets/map2.png b/public/assets/map2.png
diff --git a/public/manifest.json b/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" }
+  ]
+}
diff --git a/sw.js → public/sw.js b/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,
+  });
+});
diff --git a/src/@types/map.ts b/src/@types/map.ts
@@ -0,0 +1,12 @@
+export type BuildingType = 'A' | 'B' | 'C' | 'D' | 'E';
+
+export interface PKNUBuilding {
+  readonly buildingNumber: string;
+  readonly buildingName: string;
+  readonly latlng: [number, number];
+}
+
+export interface Location {
+  LAT: number;
+  LNG: number;
+}
diff --git a/src/@types/styles/icon.ts b/src/@types/styles/icon.ts
@@ -13,4 +13,8 @@ export type IconKind =
   | 'checkedRadio'
   | 'uncheckedRadio'
   | 'cancel'
-  | 'speaker';
+  | 'speaker'
+  | 'reset'
+  | 'locationOn'
+  | 'locationOff'
+  | 'search';
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,33 +1,30 @@
 import FooterTab from '@components/FooterTab';
 import Header from '@components/Header';
-import styled from '@emotion/styled';
 import Announcement from '@pages/Announcement';
+import BodyLayout from '@pages/BodyLayout';
 import Home from '@pages/Home';
 import MajorDecision from '@pages/MajorDecision';
 import Map from '@pages/Map';
 import My from '@pages/My';
-import { Routes, Route } from 'react-router-dom';
+import { Routes, Route, useLocation } from 'react-router-dom';
 
 const App = () => {
+  const location = useLocation();
   return (
     <>
-      <Header />
-      <Body>
-        <Routes>
+      {location.pathname !== '/map' && <Header />}
+      <Routes>
+        <Route element={<BodyLayout />}>
           <Route path="/" element={<Home />} />
           <Route path="/announcement/*" element={<Announcement />} />
-          <Route path="/my" element={<My />} />
-          <Route path="/map" element={<Map />} />
           <Route path="/major-decision/*" element={<MajorDecision />} />
-        </Routes>
-      </Body>
+          <Route path="/my" element={<My />} />
+        </Route>
+        <Route path="/map" element={<Map />} />
+      </Routes>
       <FooterTab />
     </>
   );
 };
 
 export default App;
-
-const Body = styled.div`
-  padding: 8.5vh 0 8.5vh 0;
-`;
diff --git a/src/components/Button/Toggle/index.tsx b/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')};
+`;
diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -16,6 +16,10 @@ import {
   MdRadioButtonChecked,
   MdOutlineCancel,
   MdCampaign,
+  MdOutlineRestartAlt,
+  MdOutlineLocationOn,
+  MdOutlineSearch,
+  MdOutlineLocationOff,
 } from 'react-icons/md';
 
 const ICON: { [key in IconKind]: IconType } = {
@@ -34,6 +38,10 @@ const ICON: { [key in IconKind]: IconType } = {
   uncheckedRadio: MdRadioButtonUnchecked,
   cancel: MdOutlineCancel,
   speaker: MdCampaign,
+  reset: MdOutlineRestartAlt,
+  locationOn: MdOutlineLocationOn,
+  locationOff: MdOutlineLocationOff,
+  search: MdOutlineSearch,
 };
 
 interface IconProps {

diff --git a/src/components/List/DepartmentList/index.tsx b/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);