🚀 Release/1.2.1 (#180)

🚀 Release/1.2.1

.vscode/settings.json

@@ -31,6 +31,11 @@
     "source.fixAll.eslint": true
   },
   "cSpell.words": [
-    "favorited"
+    "favorited",
+    "Gregister",
+    "Nlogin",
+    "Nregister",
+    "Glogin",
+    "pageview"
   ],
 }

README.md

@@ -66,58 +66,23 @@ urlink(유어링크)는 인터넷에서 리서치할 때, 나중에 다시 보
 `development` 환경에서는 `chrome api` 기능을 사용 할 수 없어 `build`를 하고 크롬 익스텐션 개발 모드로 확인 가능합니다. 
 
 ### development 
+
 ```
 npm i
 npm run start
 ```
 
 ### production [build]
+
 ```
 npm i
 npm run build
 ```
+
 ### chrome development
+
 ```
  1. 크롬 실행
  2. 확장 프로그램
  3. 압축해지된 확장 프로그램을 로드합니다[클릭]
- 4. build 된 폴더 선택
- ```
-
-# 🗂 Component Architecture
-
-- [eslint + prettier code convention](https://github.com/urLink-DEV/urLink-frontend/pull/120)
-  - `코드 스타일` 통일
-
-- [Git flow](https://www.notion.so/Git-flow-dbc4389bac1e4d0b8e570a8157f8b40c)
-  - 깃 전략을 통해 브런치 히스토리 `버전관리`가 가능
-
-- [폴더 구조](https://github.com/urLink-DEV/urLink-frontend/pull/116)
-  - 컴포넌트 분리 스타일을 통일하여 `CategoryList`, `linkList`, `AppBar`영역을 명확하게 나눔 <br/>
-    ✨ 협업에서 일어나는 `code conflict` 현상을 줄여줌
-
-  - `Container + Component` 구조에서 `hooks(redux) + Component` 구조로 변경 <br/>
-     ✨ Container에서 코드 길이가 방대해짐을 hooks를 사용하여 모듈 관리로 코드 길이를 줄 일 수 있었음
-
-- [modules(redux) code convention](https://www.notion.so/modules-code-convention-fe4a0bad389445258d1752909c863209)
-  - `state`를 내리는 구조로 설계되어  `props drilling` 현상이 일어나 하나의 컴포넌트에서 의존성 결합이 많이 되었음 <br/>
-    ✨ `redux` 관리로 전역 상태 관리를 통해 컴포넌트간의 의존성 관계를 줄여줌  
-  -  `ContextAPI` ➡ `redux` + `redux-thunk` + `redux-saga` <br/>
-    ✨ `Provider`를 여러개로 만들어 내리는 구조보다 `하나의 Redux Provider`로 `useSelector`, `useDispatch` 하는것이 더 코드가 깔끔하고 `hooks` 와 state  메모제이션이 되어 선택
-  - API 통신을 모듈화하여 `컴포넌트`와 `서버 통신(redux-saga)`의 관심사 분리 <br/>
-    ✨ 컴포넌트는 `dispatch`로 api 통신을 하고 `api 통신 내용`은 `redux-saga`로 관리
-
-- [로그인 유지](https://github.com/urLink-DEV/urLink-frontend/pull/116)
-  - 캐시로 저장된 토큰유무에따라 로그인 유지 결정하여 페이지 깜빡이는 현상 없앰
-
-- [chromeApis 모듈화](https://github.com/urLink-DEV/urLink-frontend/pull/116)
-  - `development`에서는 `chrome api`가 지원 되지 않으므로 `Promise` 혹은 `분기` 로 `development`와 `production` 모드에 따라 값을 다르게 리턴 <br/>
-    ✨ 컴포넌트의 관심사 분리가 가능해짐 
-
-- [webpack(craco)](https://github.com/urLink-DEV/urLink-frontend/issues/119)
-  - `package.json`에서 `babel`과` webpack` 오버라이드를 `craco`를 사용하여 한곳에서 관리하도록 설정
-  - single point 에서 [multiEntry point](https://github.com/urLink-DEV/urLink-frontend/pull/120)로 변경하여 `popup` + `background` + `main` 3개의 프로젝트를 한 번에 빌드 할 수 있게 설정 <br/>
-    ✨  개발 유지보수 효율 높임 
-  - BundleAnalyzerPlugin 추가 <br/>
-    ✨ 번들링 크기 최적화 할때 그래픽으로 확인
-
+ 4. build 된 폴더 선택

package.json

@@ -1,6 +1,6 @@
 {
   "name": "urlink-chrome-extension",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "dependencies": {
     "@craco/craco": "^6.1.1",

public/manifest.json

@@ -1,9 +1,9 @@
 {
   "name": "urLink",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "manifest_version": 2,
   "description": "북마크보다 손쉽게 웹사이트를 보관하고 정리하세요.",
-  "permissions": ["tabs", "<all_urls>", "identity", "history", "notifications"],
+  "permissions": ["<all_urls>", "identity", "history", "notifications"],
   "icons": {
     "16": "images/logo/logo16.png",
     "24": "images/logo/logo24.png",

src/main/App.js

@@ -2,11 +2,12 @@ import React, { useEffect } from 'react'
 
 import moment from 'moment'
 import { Router } from 'react-chrome-extension-router'
-import ReactGA from 'react-ga'
+import { useLocation } from 'react-router-dom'
 
 import Snackbar from '@main/components/Toast'
 import Home from '@main/pages/Home'
 import { useToast } from '@modules/ui'
+import { GAPageview, initGA } from '@utils/ga'
 import { getAccessToken } from '@utils/http/auth'
 
 import GetStartPage from './pages/Start'
@@ -16,12 +17,16 @@ import 'moment/locale/ko'
 moment.locale('ko')
 
 function App() {
+  const { pathname } = useLocation()
+
   useEffect(() => {
-    ReactGA.initialize('UA-207149982-2')
-    ReactGA.set({ page: window.location.pathname })
-    ReactGA.pageview(window.location.pathname + window.location.search)
+    initGA()
   }, [])
 
+  useEffect(() => {
+    GAPageview(pathname)
+  }, [pathname])
+
   return (
     <>
       <Router>{getAccessToken() ? <Home /> : <GetStartPage />}</Router>

src/main/components/ScrollUpButton/index.jsx

@@ -4,13 +4,15 @@ import { ArrowUpward as ArrowUpwardIcon } from '@material-ui/icons'
 import clsx from 'clsx'
 
 import ExtendedFab from '@main/components/ExtendedFab'
+import { GAEvent } from '@utils/ga'
 
 import useStyles from './style'
 
 function ScrollUpButton({ targetRef, className, open }) {
   const classes = useStyles()
 
   const handleScrollUp = () => {
+    GAEvent('스크롤 업 버튼', '스크롤 업 버튼 클릭')
     scrollTo(targetRef.current, 0, 500)
   }
 

src/main/pages/Home/AppBar/AlarmList/index.jsx

@@ -24,6 +24,7 @@ import { alarmNoticeSelector, alarmNoticeReadNoticeThunk, alarmNoticeNoReturnNot
 import { categorySelector } from '@modules/category'
 import { linksRead } from '@modules/link'
 import { useToast } from '@modules/ui'
+import { GAEvent } from '@utils/ga'
 
 import useStyles, { SmallAvatar } from './style'
 
@@ -43,6 +44,7 @@ function AlarmList() {
         await dispatch(alarmNoticeReadNoticeThunk({ alarm_id: alarm.id }))
         dispatch(linksRead.request({ categoryId: selectedCategory?.id }, { key: selectedCategory?.id }))
         createTab(alarm.url_path)
+        GAEvent('앱바', '알람 링크 클릭')
       } catch (error) {
         openToast({ type: 'error', message: '예상치 못한 에러가 발생했습니다.' })
       }
@@ -57,6 +59,7 @@ function AlarmList() {
         await dispatch(alarmNoticeNoReturnNoticeThunk({ alarm_id }))
         dispatch(linksRead.request({ categoryId: selectedCategory?.id }, { key: selectedCategory?.id }))
         openToast({ type: 'success', message: '알람을 삭제했습니다.' })
+        GAEvent('앱바', '알람 링크 삭제 완료')
       } catch (error) {
         openToast({ type: 'error', message: '알람을 삭제하지 못했습니다.' })
       }

src/main/pages/Home/AppBar/DragableHistoryList/History/index.jsx

@@ -9,6 +9,7 @@ import newTabImg from '@assets/images/new-tab.svg'
 import { useToast } from '@modules/ui'
 import { createTab } from '@utils/chromeApis/tab'
 import copyLink from '@utils/copyLink'
+import { GAEvent } from '@utils/ga'
 
 import useStyles from './style'
 
@@ -21,6 +22,7 @@ function History({ isSelected = false, data = {}, ...props }) {
   const handleNewTab = useCallback(
     (e) => {
       e.stopPropagation()
+      GAEvent('방문기록', '링크 새 탭 열기')
       createTab(data.url)
     },
     [data.url]
@@ -29,6 +31,7 @@ function History({ isSelected = false, data = {}, ...props }) {
   const handleLinkCopy = useCallback(
     (e) => {
       e.stopPropagation()
+      GAEvent('방문기록', '링크 복사 하기')
       copyLink(data.url)
       openToast({ type: 'success', message: '링크가 복사 되었습니다.' })
     },

src/main/pages/Home/AppBar/DragableHistoryList/index.jsx

@@ -14,6 +14,7 @@ import SearchBar from '@main/components/SearchBar'
 import { useHistoryLinks } from '@modules/historyLink'
 import { DROP_ZONE, DRAG, useDrag, useDropZone } from '@modules/ui'
 import { createTabList } from '@utils/chromeApis/tab'
+import { GAEvent } from '@utils/ga'
 
 import History from './History'
 import HistoryDateTitle from './HistoryDateTitle'
@@ -65,6 +66,7 @@ function DragableHistoryList() {
       }
       setDragData(dragListData)
       e.dataTransfer.setDragImage(dragBoxRef.current, 110, 35)
+      GAEvent('방문기록', '링크 드래그 시작')
     },
     [selectedList, setDragData]
   )
@@ -73,6 +75,7 @@ function DragableHistoryList() {
     () => (e) => {
       e.stopPropagation()
       setSelectedList([])
+      GAEvent('방문기록', '링크 드래그 완료')
     },
     []
   )
@@ -82,6 +85,7 @@ function DragableHistoryList() {
       const isSelected = selectedList.find((item) => item.id === id)
       if (isSelected) setSelectedList(selectedList.filter((data) => data.id !== id))
       else setSelectedList((listData) => listData.concat({ id, path }))
+      GAEvent('방문기록', '링크 선택 하기')
     },
     [selectedList]
   )
@@ -106,13 +110,15 @@ function DragableHistoryList() {
     return debounce(() => {
       setSelectedList([])
       handleResetInput()
+      GAEvent('방문기록', '새로고침')
     }, 400)
   }, [handleResetInput])
 
   const handleSelectName = useCallback(
     (e) => {
       handleResetInput()
       setSelectedName(e.target.value)
+      GAEvent('방문기록', '검색 주제 바꾸기')
     },
     [handleResetInput]
   )
@@ -125,10 +131,12 @@ function DragableHistoryList() {
   // date
   const handleChangeDate = useCallback((date) => {
     setDateKeyword(date)
+    GAEvent('방문기록', '검색바에서 날짜 바꾸기')
   }, [])
 
   const handleOpenNewTab = useCallback(() => {
     createTabList(selectedList.reduce((list, link) => list.concat(link.path), []))
+    GAEvent('방문기록', '복수의 링크 새 탭 열기')
   }, [selectedList])
 
   useEffect(() => {

src/main/pages/Home/AppBar/Profile/index.jsx

@@ -7,6 +7,7 @@ import defaultProfileImg from '@assets/images/logo/profileImg.png'
 import { TermsModal, AlertModal } from '@main/components/modals'
 import { useDialog, useToast, MODAL_NAME } from '@modules/ui'
 import { useUserData, userRemoveThunk, userLogoutThunk } from '@modules/user'
+import { GAEvent } from '@utils/ga'
 
 import useStyles from './style'
 
@@ -18,11 +19,12 @@ function Profile() {
   const dispatch = useDispatch()
   const { data } = useUserData()
   const { open: termsOpen, toggle: termsToggle, close: termsClose } = useDialog(TERMS_MODAL)
-  const { open: removUserOpen, toggle: removUserToggle, close: removUserClose } = useDialog(REMOVE_USER_ALERT_MODAL)
+  const { open: removeUserOpen, toggle: removeUserToggle, close: removeUserClose } = useDialog(REMOVE_USER_ALERT_MODAL)
   const { openToast } = useToast()
 
   const handleLogout = useCallback(async () => {
     try {
+      GAEvent('앱바', '유저 로그아웃 하기')
       await dispatch(userLogoutThunk())
       window.location.href = '/index.html'
     } catch (error) {
@@ -32,6 +34,7 @@ function Profile() {
 
   const handleRemoveUser = useCallback(async () => {
     try {
+      GAEvent('앱바', '유저 탈퇴 하기')
       await dispatch(userRemoveThunk())
       window.location.href = '/index.html'
     } catch (error) {
@@ -61,7 +64,7 @@ function Profile() {
                 <Button className={classes.profileBtn} size="small" onClick={termsToggle}>
                   약관보기
                 </Button>
-                <Button className={classes.profileBtn} size="small" onClick={removUserToggle}>
+                <Button className={classes.profileBtn} size="small" onClick={removeUserToggle}>
                   회원탈퇴
                 </Button>
               </Grid>
@@ -75,12 +78,12 @@ function Profile() {
         </CardActions>
       </Card>
       {termsOpen && <TermsModal open={termsOpen} onClose={termsClose} onYesText="닫기" onYesClick={termsClose} />}
-      {removUserOpen && (
+      {removeUserOpen && (
         <AlertModal
-          openBool={removUserOpen}
+          openBool={removeUserOpen}
           btnYesText="탈퇴"
           contentText="카테고리와 저장한 링크가 모두 삭제되며 복구할 수 없습니다. 정말 탈퇴하시겠어요?"
-          handleClose={removUserClose}
+          handleClose={removeUserClose}
           handleYesClick={handleRemoveUser}
         />
       )}

src/main/pages/Home/AppBar/index.jsx

@@ -8,6 +8,7 @@ import historyImg from '@assets/images/history.png'
 import personImg from '@assets/images/person.png'
 import { alarmNoticeSelector } from '@modules/alarmNotice'
 import { useHistoryLinks } from '@modules/historyLink'
+import { GAEvent } from '@utils/ga'
 
 import AlarmList from './AlarmList'
 import DragableHistoryList from './DragableHistoryList'
@@ -37,6 +38,7 @@ function AppBar() {
             onClick={() => {
               reload()
               setOpenHistory((open) => !open)
+              GAEvent('앱바', '방문기록 드로어 버튼 클릭')
             }}
           >
             <Avatar variant="square" className={classes.imgButton} src={historyImg} alt="history button" />
@@ -46,7 +48,10 @@ function AppBar() {
             button
             ref={alarmRef}
             aria-describedby="alarm-popover"
-            onClick={() => setOpenAlarm((open) => !open)}
+            onClick={() => {
+              setOpenAlarm((open) => !open)
+              GAEvent('앱바', '알람 팝업 버튼 클릭')
+            }}
           >
             <Badge
               anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
@@ -71,7 +76,10 @@ function AppBar() {
             button
             ref={profileRef}
             aria-describedby="profile-popover"
-            onClick={() => setOpenProfile((open) => !open)}
+            onClick={() => {
+              setOpenProfile((open) => !open)
+              GAEvent('앱바', '프로필 팝업 버튼 클릭')
+            }}
           >
             <Avatar variant="square" src={personImg} alt="profile-popover-button" className={classes.imgButton} />
           </StyledListItem>