Jaewoook · Jaewoook · Jun 23, 2024 · Aug 14, 2022 · Jun 17, 2024 · Jun 17, 2024
diff --git a/.circleci/config.yml b/.circleci/config.yml
diff --git a/.editorconfig b/.editorconfig
@@ -2,17 +2,11 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[*.json]
-indent_size = 2
-
 [*.md]
 trim_trailing_whitespace = false
 insert_final_newline = false
-
-[*.yml]
-indent_size = 2
diff --git a/.env b/.env
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,32 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    "eslint:recommended",
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    "prettier",
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly",
+  },
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    "comma-dangle": ["warn", "always-multiline"],
+    quotes: ["error", "double", { allowTemplateLiterals: true }],
+    semi: ["error", "always"],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "off",
+  },
+};
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,27 @@
+name: "CI"
+
+on:
+  - push
+  - pull_request
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: .tool-versions
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: .tool-versions
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn lint
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ node_modules/
 build/
 dist/
 dist.zip
+*.zip
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "semi": true,
+  "printWidth": 120
+}
diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1 @@
+nodejs 18.19.0
diff --git a/README.md b/README.md
@@ -16,25 +16,30 @@
 
 ## 데모
 
+주소검색 확장 프로그램의 사용 데모입니다.
+
 ![Demo GIF](/images/demo.gif)
 
 ## 지원 브라우저
 
-| 브라우저 | 상태 | |
-|---------------|:------------------:|------------------------|
+자신의 브라우저에 확장 프로그램 스토어에서 바로 다운로드하세요!
+
+| 브라우저 | 상태 | 다운로드 |
+|--------|:---:|-------|
 | Google Chrome | :heavy_check_mark: | [크롬 웹 스토어에서 다운로드](https://chrome.google.com/webstore/detail/%EC%A3%BC%EC%86%8C%EA%B2%80%EC%83%89/kiamcbcponnlbnanbbfnfdjhioebpiah) |
 | NAVER Whale | :heavy_check_mark: | [웨일 스토어에서 다운로드](https://store.whale.naver.com/detail/pidjpaocfolbbaminggjijheckcdfcdj) |
 | Mozilla Firefox | :warning: | ~~[Firefox Add-ons에서 다운로드](https://addons.mozilla.org/ko/firefox/addon/kor-address-extension/)~~ |
 
-#### (비공식) 그 외 브라우저
+### 기타 브라우저
 
-아래 **"수동으로 설치하기"** 의 공통 섹션과 브라우저별 확장 프로그램 설치 방법 참조
+스토어에서 아래 **수동으로 설치하기**의 공통 섹션과 브라우저별 확장 프로그램 설치 방법 참조
 
-> NOTE: 브라우저는 WebExtension API를 지원해야 합니다. 주소검색 프로젝트는 WebExtension spec을 준수하지만 안정적인 동작을 보장하지는 않습니다.
+> [!IMPORTANT]
+> 브라우저는 WebExtension API를 지원해야 합니다. 주소검색 프로젝트는 WebExtension spec을 준수하지만 안정적인 동작을 보장하지는 않습니다.
 
-## 수동으로 설치하기
+## 직접 빌드하기
 
-### 준비하기
+프로젝트 소스 코드를 로컬 환경에 다운로드 받고, 직접 빌드하여 사용할 수 있습니다.
 
 먼저, 이 저장소를 다운로드 하고 의존성 설치를 합니다.
 
@@ -63,8 +68,8 @@ yarn build && yarn package
 
 ## 제작자
 
-- Jaewook Ahn <ajw4586@gmail.com>
+[Jaewook Ahn](https://github.com/Jaewoook)
 
 ## 저작권
 
-MIT ([LICENSE](https://github.com/Jaewoook/kor-address-extension/blob/master/LICENSE) 파일 참고)
+이 프로젝트는 [MIT 라이선스](./LICENSE)를 따릅니다.
diff --git a/background/.eslintrc.js b/background/.eslintrc.js
diff --git a/background/index.ts b/background/index.ts
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500&display=swap');
+  </style>
+  <script type="application/javascript" src="./gtag.js"></script>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "주소검색",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "대한민국 주소검색 확장 프로그램",
   "author": "Jaewook Ahn",
   "icons": {

diff --git a/package.json b/package.json
@@ -1,60 +1,52 @@
 {
   "name": "kor-address-extension",
-  "version": "1.0.7",
+  "version": "1.2.0",
   "main": "dist/index.js",
+  "type": "module",
   "repository": "git@github.com:Jaewoook/kor-address-extension.git",
   "author": "Jaewook Ahn <ajw4586@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "build:dev": "cross-env REACT_APP_ENV=development react-scripts build",
-    "build": "cross-env REACT_APP_ENV=production react-scripts build",
-    "dev": "cross-env REACT_APP_ENV=development react-scripts start",
-    "lint": "eslint src --ext .js,.ts,.jsx,.tsx",
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx",
     "package": "node scripts/CreatePackage.js",
     "postpackage": "node scripts/CreateDistribution.js"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.184",
+    "@types/chrome": "^0.0.268",
     "@types/clipboard": "^2.0.1",
-    "@types/firefox-webext-browser": "^94.0.1",
-    "@types/fs-extra": "^9.0.1",
+    "@types/firefox-webext-browser": "^120.0.4",
+    "@types/fs-extra": "^11.0.4",
     "@types/node": "^18.6.5",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@types/styled-components": "^5.1.2",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "archiver": "^5.0.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "archiver": "^5.3.1",
     "chalk": "^4.1.0",
-    "cross-env": "^7.0.2",
-    "eslint": "^8.21.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint": "^8",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
     "fs-extra": "^10.1.0",
-    "typescript": "^4.7.4"
+    "prettier": "3.3.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.1"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.1.0",
     "@sentry/react": "^6.13.3",
-    "antd": "^4.22.4",
-    "axios": "^0.27.2",
-    "copy-to-clipboard": "^3.3.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1",
-    "styled-components": "^5.1.1"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "antd": "^5.18.2",
+    "axios": "^1.7.2",
+    "copy-to-clipboard": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.1.11"
   }
 }
diff --git a/public/index.html b/public/index.html