refactor: 토글 안되는거 해결 (#445)

* refactor: webpush 토글 분리 * refactor: firebase config 수정 * refactor: deleteToken 추가 * test: 15%확률로 구독 해제,등록 실패 * refactor: subscript 낙관적 업데이트 적용 * refactor: pushmanager 조건 추가 및 currentToken 전역 객체 사용 * refactor: pushStatus Class 로 반환 * test: click에 force 추가 * test: type force:true로 설정 * test: 등록에 force 추가 * test: 에러 throw확률 5%로 변경 * refactor: permission이 허용되지 않았을 때 토큰 받지 못하도록 설정 * refactor: 의존성 없는 변수 분리 * chore: 불필요한 콘솔 제거 * feat: foreground인 경우에도 알림 받도록 설정
woowacourse-teams · Oct 20, 2023 · 08ac55e · 08ac55e
1 parent 5abeafc
commit 08ac55e
Show file tree

Hide file tree

Showing 19 changed files with 303 additions and 193 deletions.
diff --git a/frontend/cypress/e2e/main.cy.ts b/frontend/cypress/e2e/main.cy.ts
@@ -17,7 +17,7 @@ describe('검색창', () => {
 
   it('검색창을 이용해 비슷한 이름의 식물을 확인한다.', () => {
     cy.get('input')
-      .type('아')
+      .type('아', { force: true })
       .wait(500)
 
       .get('ul > li')
@@ -34,7 +34,7 @@ describe('검색창', () => {
       .should('be.visible')
 
       .get('input')
-      .type('카')
+      .type('카', { force: true })
       .wait(500)
 
       .get('ul > li')
@@ -48,7 +48,7 @@ describe('검색창', () => {
       .should('be.visible')
 
       .get('input')
-      .type('시')
+      .type('시', { force: true })
       .wait(500)
 
       .get('ul > li')
@@ -59,15 +59,15 @@ describe('검색창', () => {
       .should('be.visible')
 
       .get('input')
-      .type('아')
+      .type('아', { force: true })
       .wait(500)
 
       .get('ul > li')
       .contains('아카시아')
       .should('be.visible')
 
       .get('input')
-      .type('짱')
+      .type('짱', { force: true })
       .wait(500)
 
       .get('p')
@@ -77,12 +77,12 @@ describe('검색창', () => {
 
   it('식물 이름을 클릭해 식물 사전 페이지로 이동한다.', () => {
     cy.get('input')
-      .type('참')
+      .type('참', { force: true })
       .wait(500)
       .get('ul > li')
       .contains('참새')
       .should('be.visible')
-      .click()
+      .click({ force: true })
 
       .location()
       .should((location) => {
@@ -93,15 +93,15 @@ describe('검색창', () => {
 
   it('정확히 일치하는 이름이 있을 경우 식물 사전 페이지로 이동한다.', () => {
     cy.get('input')
-      .type('아카시')
+      .type('아카시', { force: true })
       .wait(500)
 
       .get('ul > li')
       .contains('아카시')
       .should('be.visible')
 
       .get('button[aria-label="이동하기"]')
-      .click()
+      .click({ force: true })
 
       .location()
       .should((location) => {
@@ -112,7 +112,7 @@ describe('검색창', () => {
 
   it('정확히 일치하는 이름이 없을 경우 식물 사전 검색 페이지로 이동한다.', () => {
     cy.get('input')
-      .type('참')
+      .type('참', { force: true })
       .wait(500)
 
       .get('ul > li')
@@ -121,7 +121,7 @@ describe('검색창', () => {
       .get('input')
       .focus()
 
-      .type('{enter}')
+      .type('{enter}', { force: true })
 
       .location('pathname')
       .should('equal', '/dict')

diff --git a/frontend/cypress/e2e/navbar.cy.ts b/frontend/cypress/e2e/navbar.cy.ts
@@ -10,7 +10,7 @@ describe('내비게이션 바를 이용한 페이지 이동', () => {
   it('리마인더 페이지로 이동할 수 있다.', () => {
     cy.get('a')
       .contains('리마인더')
-      .click()
+      .click({ force: true })
       .location('pathname')
       .should('equal', '/reminder')
       .get('#root')
@@ -20,7 +20,7 @@ describe('내비게이션 바를 이용한 페이지 이동', () => {
   it('내 반려 식물 목록 페이지로 이동할 수 있다.', () => {
     cy.get('a')
       .contains('내 식물')
-      .click()
+      .click({ force: true })
       .location('pathname')
       .should('equal', '/pet')
       .get('#root')
@@ -30,10 +30,10 @@ describe('내비게이션 바를 이용한 페이지 이동', () => {
   it('메인 화면으로 이동할 수 있다.', () => {
     cy.get('a')
       .contains('리마인더')
-      .click()
+      .click({ force: true })
       .get('a')
       .contains('메인')
-      .click()
+      .click({ force: true })
       .location('pathname')
       .should('equal', '/')
       .get('#root')

diff --git a/frontend/cypress/e2e/petPlantEdit.cy.ts b/frontend/cypress/e2e/petPlantEdit.cy.ts
@@ -9,14 +9,14 @@ describe('반려 식물 등록하기', () => {
   it('별명을 고칠 수 있다.', () => {
     cy.get('input')
       .first()
-      .type('{selectAll}{backspace}')
+      .type('{selectAll}{backspace}', { force: true })
 
       .get('button[type="submit"]')
       .should('be.disabled')
 
       .get('input')
       .first()
-      .type('클린')
+      .type('클린', { force: true })
 
       .get('input')
       .first()
@@ -25,13 +25,13 @@ describe('반려 식물 등록하기', () => {
 
   it('물 주기 주기를 고칠 수 있다.', () => {
     cy.get('input[inputmode="numeric"]')
-      .type('{selectAll}{backspace}')
+      .type('{selectAll}{backspace}', { force: true })
 
       .get('button[type="submit"]')
       .should('be.disabled')
 
       .get('input[inputmode="numeric"]')
-      .type('50')
+      .type('50', { force: true })
 
       .get('input[inputmode="numeric"]')
       .should('have.value', '50');
@@ -72,11 +72,11 @@ describe('반려 식물 등록하기', () => {
 
   it('수정 후에는 토스트를 띄우고 해당 반려 식물 상세 페이지로 이동한다.', () => {
     cy.get('input[inputmode="numeric"]')
-      .type('{selectAll}{backspace}77')
+      .type('{selectAll}{backspace}77', { force: true })
 
       .get('button[type="submit"]')
       .should('not.be.disabled')
-      .click()
+      .click({ force: true })
 
       .get('#toast-root')
       .contains('반려 식물 정보를 바꿨습니다')

diff --git a/frontend/cypress/e2e/petRegister.cy.ts b/frontend/cypress/e2e/petRegister.cy.ts
@@ -15,11 +15,11 @@ describe('반려 식물 등록하기', () => {
 
   it('반려 식물을 등록한다.', () => {
     cy.get('input')
-      .type('참')
+      .type('참', { force: true })
       .wait(500)
       .get('ul > li')
       .contains('참새')
-      .click()
+      .click({ force: true })
 
       .get('input[type=file]')
       .should('not.be.visible')
@@ -55,60 +55,60 @@ describe('반려 식물 등록하기', () => {
       .contains('투명 피우미')
       .should('be.visible')
       .get('input[aria-label="별명 입력"]')
-      .type('{selectAll}{backspace}피우미')
+      .type('{selectAll}{backspace}피우미', { force: true })
       .get('button[aria-label="입력 완료"]')
-      .click()
+      .click({ force: true })
 
       .get('button[aria-label="입양일 선택"]')
-      .click()
+      .click({ force: true })
 
       .get(`span[aria-label="${todayKorString}"]`)
-      .click()
+      .click({ force: true })
 
       .get('button[aria-label="마지막으로 물 준 날짜 선택"]')
-      .click()
+      .click({ force: true })
 
       .get(`span[aria-label="${todayKorString}"]`)
-      .click()
+      .click({ force: true })
 
       .get('input[type="text"]')
       .first()
-      .type('7')
+      .type('7', { force: true })
       .get('button[aria-label="입력 완료"]')
       .first()
-      .click()
+      .click({ force: true })
 
       .get('button[type="button"]')
       .first()
-      .click()
+      .click({ force: true })
       .get('li[role="menuitem"]')
       .first()
-      .click()
+      .click({ force: true })
 
       .get('button[type="button"]')
       .first()
-      .click()
+      .click({ force: true })
       .get('li[role="menuitem"]')
       .last()
-      .click()
+      .click({ force: true })
 
       .get('button[type="button"]')
       .first()
-      .click()
+      .click({ force: true })
       .get('li[role="menuitem"]')
       .first()
-      .click()
+      .click({ force: true })
 
       .get('button[type="button"]')
       .first()
-      .click()
+      .click({ force: true })
       .get('li[role="menuitem"]')
       .last()
-      .click()
+      .click({ force: true })
 
       .get('button')
       .contains('등록하기')
-      .click()
+      .click({ force: true })
 
       .get('#toast-root')
       .contains('반려 식물 등록에 성공했어요')

diff --git a/frontend/cypress/e2e/reminder.cy.ts b/frontend/cypress/e2e/reminder.cy.ts
@@ -10,12 +10,16 @@ describe('리마인더 테스트', () => {
   it('리마인더 페이지로 이동할 수 있다.', () => {
     cy.visit('/');
     cy.wait(1000);
-    cy.get('a').contains('리마인더').click().location('pathname').should('equal', '/reminder');
+    cy.get('a')
+      .contains('리마인더')
+      .click({ force: true })
+      .location('pathname')
+      .should('equal', '/reminder');
   });
 
   it('내 반려 식물 상세보기로 이동할 수 있다.', () => {
     cy.get('a[aria-label="참새 나무 상세로 이동"]')
-      .click()
+      .click({ force: true })
       .location('pathname')
       .should('equal', '/pet/1');
   });
@@ -24,11 +28,11 @@ describe('리마인더 테스트', () => {
     const today = convertDateKorYear(new Date());
     cy.get('div[aria-label="참새 나무의 정보"]')
       .find('button[aria-label="물 준 날짜 선택"]')
-      .click()
+      .click({ force: true })
       .get('div[aria-label="달력"')
       .should('be.visible')
       .get(`span[aria-label="${today}"]`)
-      .click()
+      .click({ force: true })
 
       .get('#toast-root')
       .contains('물주기 완료');
@@ -39,16 +43,16 @@ describe('리마인더 테스트', () => {
     const nextMonth = curMonth === 11 ? 1 : curMonth + 2;
     cy.get('div[aria-label="참새 나무의 정보"]')
       .find('button[aria-label="알림을 줄 날짜 선택"]')
-      .click()
+      .click({ force: true })
       .get('div[aria-label="달력"')
       .should('be.visible')
       .get(`button[aria-label="다음 달 보기"]`)
-      .click()
+      .click({ force: true })
 
       .get('section[aria-live="assertive"]')
       .find('span')
       .contains(1)
-      .click()
+      .click({ force: true })
 
       .get('#toast-root')
       .contains('01일로 물주기 날짜 변경')

diff --git a/frontend/public/firebase-messaging-sw.js b/frontend/public/firebase-messaging-sw.js
@@ -8,15 +8,20 @@ importScripts('https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js')
 // Initialize the Firebase app in the service worker by passing in
 // your app's Firebase config object.
 // https://firebase.google.com/docs/web/setup#config-object
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyAOEUhyDZ1FQ2Ly77t-TNEqzb-686teUKU',
+  authDomain: 'pium-7ddfe.firebaseapp.com',
+  projectId: 'pium-7ddfe',
+  storageBucket: 'pium-7ddfe.appspot.com',
+  messagingSenderId: '66938335591',
+  appId: '1:66938335591:web:88ebf4f7f9dba08031ffc2',
+  measurementId: 'G-8SL2D547VW',
+};
+
 firebase.initializeApp({
-  apiKey: 'AIzaSyCNVyJ1qLPvMiuZDK97O-rmB3mz48UqC1g',
-  authDomain: 'pium-7445f.firebaseapp.com',
-  databaseURL: 'https://pium-7445f.firebaseio.com',
-  projectId: 'pium-7445f',
-  storageBucket: 'pium-7445f.appspot.com',
-  messagingSenderId: '14284052337',
-  appId: '1:14284052337:web:4ccb34224d907e73fa48d0',
-  measurementId: 'G-Z5F62MDJ8N',
+  ...firebaseConfig,
+  authDomain: 'pium-7ddfe.firebaseapp.com',
 });
 
 // Retrieve an instance of Firebase Messaging so that it can handle background
@@ -88,12 +93,10 @@ self.addEventListener('fetch', (event) => {
  */
 
 // TODO: 사용자가 forward ground인 경우에 알림을 받을 수 있도록 설정하기.
-
 messaging.onBackgroundMessage((payload) => {
   const {
     notification: { title, body },
   } = payload;
-
   // Customize notification here
   const notificationTitle = title;
 

diff --git a/frontend/src/components/mypage/PushAlert/PushAlert.style.ts b/frontend/src/components/mypage/PushAlert/PushAlert.style.ts
@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const PushAlertWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: space-around;
+
+  width: 80%;
+  margin: 0 auto;
+`;
+
+export const WarnParagraph = styled.p`
+  font: 400 1.2rem/1.6rem NanumSquareRound;
+  color: ${({ theme }) => theme.color.accent};
+  text-align: right;
+`;
+
+export const PushAlertContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  p {
+    font: 600 1.6rem/2rem NanumSquareRound;
+  }
+`;