Gwasuwon-shot · seojisoosoo · Jun 29, 2023 · Jun 30, 2023 · Jul 1, 2023 · Jul 1, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -7,7 +7,7 @@ module.exports = {
     "plugin:import/warnings",
     "plugin:prettier/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier/@typescript-eslint",
+    // "prettier/@typescript-eslint",
   ],
   rules: {
     "linebreak-style": 0,
@@ -22,6 +22,6 @@ module.exports = {
     "eol-last": ["error", "always"], // line의 가장 마지막 줄에는 개행 넣기
     "react/react-in-jsx-scope": "off",
     "no-multi-spaces": "error", // 스페이스 여러개 금지
-    "simple-import-sort/imports": "error",
+    // "simple-import-sort/imports": "error",
   },
 };
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+.env
 node_modules
 dist
 dist-ssr

diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/index.html b/index.html
@@ -2,15 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/fruit.png" />
+    <link rel="icon" type="image/svg+xml" href="/tutice.png" />
+    <link rel="apple-touch-icon" href="/tutice.png" />
+    <link rel="shortcut icon" href="/tutice.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
     <link
       rel="stylesheet"
       as="style"
       crossorigin="anonymous"
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css" />
     <link href="https://webfontworld.github.io/kt/YDestreet.css" rel="stylesheet" />
-    <title>web-pre-task</title>
+    <link rel="stylesheet" href="src/index.css" />
+
+    <title>튜티스</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,20 @@
+{
+  "short_name": "Tutice",
+  "name": "튜티스",
+  "icons": [
+    {
+      "src": "tutice.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "tutice.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#FF5D5D",
+  "background_color": "#FF5D5D"
+}
diff --git a/package.json b/package.json
@@ -11,35 +11,48 @@
     "format": "prettier --write --cache ."
   },
   "dependencies": {
+    "antd": "^5.6.4",
+    "axios": "^1.4.0",
+    "date-fns": "^2.30.0",
+    "dayjs": "^1.11.9",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-simple-import-sort": "^10.0.0",
+    "firebase": "^10.0.0",
+    "http-proxy-middleware": "^2.0.6",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
+    "react-calendar": "^4.3.0",
+    "react-datepicker": "^4.14.1",
+    "react-day-picker": "^8.8.0",
     "react-dom": "^18.2.0",
+    "react-ios-time-picker": "^0.2.2",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.14.0",
     "recoil": "^0.7.7",
     "styled-components": "^6.0.0",
     "vite-plugin-svgr": "^3.2.0",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite-tsconfig-paths": "^4.2.0",
+    "workbox-core": "^7.0.0",
+    "workbox-precaching": "^7.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",
+    "@types/react-datepicker": "^4.11.2",
     "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.59.0",
-    "@typescript-eslint/parser": "^5.59.0",
+    "@typescript-eslint/eslint-plugin": "5",
+    "@typescript-eslint/parser": "5",
     "@vitejs/plugin-react": "^4.0.1",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
-    "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
     "prettier": "^2.8.8",
-    "typescript": "^5.0.2",
+    "typescript": "^5.1.6",
     "vite": "^4.3.9"
   },
   "lint-staged": {

diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/public/clock.mp3 b/public/clock.mp3
diff --git a/public/ditto.mp3 b/public/ditto.mp3
diff --git a/public/firebase-messaging-sw.js b/public/firebase-messaging-sw.js
@@ -0,0 +1,54 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable no-undef */
+self.addEventListener("install", function (e) {
+  console.log("fcm sw install..");
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", function (e) {
+  console.log("fcm sw activate..");
+});
+
+self.addEventListener("push", function (e) {
+  // console.log("push: ", e.data.json());
+  if (!e.data.json()) return;
+
+  const resultData = e.data.json().notification;
+  const notificationTitle = resultData.title;
+
+  const notificationOptions = {
+    body: resultData.body,
+    icon: "/tutice.png",
+    vibrate: [500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170, 40, 500],
+    sound: "/clock.mp3",
+    // tag: resultData.tag,
+    // ...resultData,
+  };
+  // console.log(resultData.title, { body: resultData.body, icon: "./tutice.png" });
+
+  // self.registration.showNotification(notificationTitle, notificationOptions);
+  e.waitUntil(
+    console.log("아니 들어는오냐?"),
+    self.registration.showNotification(notificationTitle, notificationOptions),
+    console.log("되냐고"),
+  );
+});
+
+// self.addEventListener("push", (event) => {
+//   console.log(event.data?.json());
+
+//   const message = event.data?.json();
+//   event.waitUntil(
+//     self.registration.showNotification(message.title, {
+//       body: message.body,
+//       icon: "/tutice.png",
+//     }),
+//   );
+// });
+
+self.addEventListener("notificationclick", function (event) {
+  console.log("notification click");
+  const url = "/";
+  event.notification.close();
+  event.waitUntil(clients.openWindow(url));
+});
diff --git a/public/tutice.png b/public/tutice.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import { RecoilRoot } from "recoil";
 import { ThemeProvider } from "styled-components";
 import Router from "./Router";
+import "./firebase-messaging-sw.js";
 import { GlobalStyle } from "./style/globalStyle";
 import { theme } from "./style/theme";
 

diff --git a/src/api/.keep b/src/api/.keep
diff --git a/src/api/postToken.ts b/src/api/postToken.ts
@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export async function postToken(token: string) {
+  console.log(token);
+  const data = await axios.post("/api", { deviceToken: token });
+
+  console.log(data);
+  return data;
+}
diff --git a/src/assets/assets.d.ts b/src/assets/assets.d.ts
@@ -2,6 +2,7 @@ declare module "*.jpg";
 declare module "*.png";
 declare module "*.jpeg";
 declare module "*.gif";
+declare module "*.mp3";
 
 declare module "*.svg" {
   import React = require("react");

diff --git a/src/components/.keep b/src/components/.keep
diff --git a/src/components/jisoo/.keep b/src/components/jisoo/.keep
diff --git a/src/components/jisoo/JisooAlarm.tsx b/src/components/jisoo/JisooAlarm.tsx
@@ -0,0 +1,101 @@
+import { initializeApp } from "firebase/app";
+import { getMessaging, getToken } from "firebase/messaging";
+import { useEffect, useState } from "react";
+import { useMutation } from "react-query";
+import styled from "styled-components";
+import { postToken } from "../../api/postToken";
+
+interface DeviceTokenType {
+  deviceToken: string;
+}
+
+export default function JisooAlarm() {
+  const [deviceToken, setDeviceToken] = useState("");
+
+  const firebaseConfig = {
+    apiKey: import.meta.env.VITE_APP_API_KEY,
+    authDomain: import.meta.env.VITE_APP_AUTH_DOMAIN,
+    projectId: import.meta.env.VITE_APP_PROJECT_ID,
+    storageBucket: import.meta.env.VITE_APP_STORAGE_BUCKET,
+    messagingSenderId: import.meta.env.VITE_APP_MESSAGING_SENDER_ID,
+    appId: import.meta.env.VITE_APP_APP_ID,
+    measurementId: import.meta.env.VITE_APP_MEASUREMENT_ID,
+  };
+
+  const app = initializeApp(firebaseConfig);
+  const messaging = getMessaging(app);
+  // const firebaseConfig = {
+  //   apiKey: import.meta.env.VITE_APP_API_KEY,
+  //   authDomain: import.meta.env.VITE_APP_AUTH_DOMAIN,
+  //   projectId: import.meta.env.VITE_APP_PROJECT_ID,
+  //   storageBucket: import.meta.env.VITE_APP_STORAGE_BUCKET,
+  //   messagingSenderId: import.meta.env.VITE_APP_MESSAGING_SENDER_ID,
+  //   appId: import.meta.env.VITE_APP_APP_ID,
+  //   measurementId: import.meta.env.VITE_APP_MEASUREMENT_ID,
+  // };
+
+  // // Initialize Firebase
+  // const app = initializeApp(firebaseConfig);
+  // const messaging = getMessaging(app);
+
+  async function handleAllowAlarm() {
+    const permission = await Notification.requestPermission();
+    if (permission === "denied") {
+      console.log("알림 권한 허용 안됨");
+    }
+  }
+
+  const { mutate } = useMutation(postToken, {
+    onSuccess: (res) => {
+      console.log(res);
+    },
+    onError: (err) => {
+      console.log(err);
+    },
+  });
+
+  async function getDeviceToken() {
+    const token = await getToken(messaging, {
+      vapidKey: import.meta.env.VITE_APP_VAPID_KEY,
+    });
+    setDeviceToken(token);
+  }
+
+  function handleAttend() {
+    getDeviceToken();
+  }
+
+  useEffect(() => {
+    mutate(deviceToken);
+  }, [deviceToken]);
+
+  function handleCopyClipBoard(token: string) {
+    console.log(token);
+    try {
+      navigator.clipboard.writeText(token).then(() => {
+        alert("클립보드에 토큰이 복사되었어요.");
+      });
+    } catch (err) {
+      alert("링크 복사에 실패했습니다");
+    }
+  }
+
+  return (
+    <>
+      <Button type="button" onClick={handleAllowAlarm}>
+        알림허용
+      </Button>
+      <Button type="button" onClick={handleAttend}>
+        출석
+      </Button>
+      <Button onClick={() => handleCopyClipBoard(deviceToken)}>토큰 복사하기</Button>
+      {deviceToken}
+    </>
+  );
+}
+
+const Button = styled.button`
+  border: 1px solid black;
+
+  padding: 2rem;
+`;