Test/4

.github/workflows/storybook.yml

@@ -1,42 +1,66 @@
 name: Storybook Deployment
 run-name: ${{ github.actor }}의 스토리북 배포
+
 on:
   pull_request:
     branches:
       - develop
+
 jobs:
-  storybook:
-    runs-on: ubuntu-20.04
+  deploy:
+    runs-on: ubuntu-latest
     permissions: write-all
-    outputs:
-      status: ${{ job.status }}
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+      cancel-in-progress: true
+    strategy:
+      matrix:
+        node-version: [18.x]
+
     steps:
-      - name: checkout repository
+      - name: Use repository source
         uses: actions/checkout@v3
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
         with:
-          fetch-depth: 0
+          node-version: ${{ matrix.node-version }}
 
-      - name: cache dependencies
+      - name: Cache dependencies
         id: cache
         uses: actions/cache@v3
         with:
           path: '**/node_modules'
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}-storybook
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
 
-      - name: depedency install
+      - name: Install Dependencies
         if: steps.cache.outputs.cache-hit != 'true'
         run: npm ci
 
-      - name: publish to chromatic
-        id: chromatic
-        uses: chromaui/action@v1
+      - name: Set PUBLIC_URL
+        run: |
+          PUBLIC_URL=$(echo $GITHUB_REPOSITORY | sed -r 's/^.+\/(.+)$/\/\1\//')
+          echo PUBLIC_URL=$PUBLIC_URL > .env
+
+      - name: Build App
+        run: npm run build
+
+      - name: Build Storybook
+        run: |
+          npm run build-storybook
+          mv ./storybook-static ./dist/storybook
+
+      - name: Deploy To 'gh-pages' Branch
+        uses: peaceiris/actions-gh-pages@v3
         with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          token: ${{ secrets.GITHUB_TOKEN }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
 
       - name: comment PR
         uses: thollander/actions-comment-pull-request@v1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          message: '🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}'
+          message: '🚀storybook: https://car-ffeine.github.io/react-without-cra/storybook'

.gitignore

@@ -1,5 +1,5 @@
 node_modules
 dist
 .env
-storybook-static
 build-storybook.log
+storybook-static

README.md

@@ -3,3 +3,5 @@
 <a href="https://dev.to/alekseiberezkin/setting-up-react-typescript-app-without-create-react-app-oph" target="_blank"> 
   참고 링크
 </a>
+
+test

package.json

@@ -21,7 +21,7 @@
   "bugs": {
     "url": "https://github.com/car-ffeine/react-without-cra/issues"
   },
-  "homepage": "https://github.com/car-ffeine/react-without-cra#readme",
+  "homepage": "https://car-ffeine.github.io/react-without-cra/",
   "devDependencies": {
     "@babel/preset-env": "^7.22.6",
     "@babel/preset-react": "^7.22.5",
@@ -37,7 +37,9 @@
     "@types/google.maps": "^3.53.4",
     "@types/react-dom": "^18.2.6",
     "chromatic": "^6.19.9",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
+    "dotenv": "^16.3.1",
     "dotenv-webpack": "^8.0.1",
     "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^2.7.6",

yarn.lock

@@ -3746,6 +3746,18 @@
   "resolved" "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
   "version" "0.5.0"
 
+"copy-webpack-plugin@^11.0.0":
+  "integrity" "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ=="
+  "resolved" "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz"
+  "version" "11.0.0"
+  dependencies:
+    "fast-glob" "^3.2.11"
+    "glob-parent" "^6.0.1"
+    "globby" "^13.1.1"
+    "normalize-path" "^3.0.0"
+    "schema-utils" "^4.0.0"
+    "serialize-javascript" "^6.0.0"
+
 "core-js-compat@^3.25.1", "core-js-compat@^3.30.1", "core-js-compat@^3.31.0":
   "integrity" "sha512-hM7YCu1cU6Opx7MXNu0NuumM0ezNeAeRKadixyiQELWY3vT3De9S4J5ZBMraWV2vZnrE1Cirl0GtFtDtMUXzPw=="
   "resolved" "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.0.tgz"
@@ -4087,7 +4099,7 @@
   dependencies:
     "dotenv-defaults" "^2.0.2"
 
-"dotenv@^16.0.0":
+"dotenv@^16.0.0", "dotenv@^16.3.1":
   "integrity" "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ=="
   "resolved" "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz"
   "version" "16.3.1"
@@ -4409,7 +4421,7 @@
   "resolved" "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   "version" "3.1.3"
 
-"fast-glob@^3.2.9":
+"fast-glob@^3.2.11", "fast-glob@^3.2.9":
   "integrity" "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA=="
   "resolved" "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz"
   "version" "3.3.0"
@@ -4749,6 +4761,13 @@
   dependencies:
     "is-glob" "^4.0.1"
 
+"glob-parent@^6.0.1":
+  "integrity" "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="
+  "resolved" "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  "version" "6.0.2"
+  dependencies:
+    "is-glob" "^4.0.3"
+
 "glob-promise@^6.0.2":
   "integrity" "sha512-m+kxywR5j/2Z2V9zvHKfwwL5Gp7gIFEBX+deTB9w2lJB+wSuw9kcS43VfvTAMk8TXL5JCl/cCjsR+tgNVspGyA=="
   "resolved" "https://registry.npmjs.org/glob-promise/-/glob-promise-6.0.3.tgz"
@@ -4801,6 +4820,17 @@
     "merge2" "^1.4.1"
     "slash" "^3.0.0"
 
+"globby@^13.1.1":
+  "integrity" "sha512-DPCBxctI7dN4EeIqjW2KGqgdcUMbrhJ9AzON+PlxCtvppWhubTLD4+a0GFxiym14ZvacUydTPjLPc2DlKz7EIg=="
+  "resolved" "https://registry.npmjs.org/globby/-/globby-13.2.1.tgz"
+  "version" "13.2.1"
+  dependencies:
+    "dir-glob" "^3.0.1"
+    "fast-glob" "^3.2.11"
+    "ignore" "^5.2.0"
+    "merge2" "^1.4.1"
+    "slash" "^4.0.0"
+
 "gopd@^1.0.1":
   "integrity" "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA=="
   "resolved" "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
@@ -5229,7 +5259,7 @@
   dependencies:
     "has-tostringtag" "^1.0.0"
 
-"is-glob@^4.0.1", "is-glob@~4.0.1":
+"is-glob@^4.0.1", "is-glob@^4.0.3", "is-glob@~4.0.1":
   "integrity" "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="
   "resolved" "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
   "version" "4.0.3"
@@ -7055,7 +7085,7 @@
     "range-parser" "~1.2.1"
     "statuses" "2.0.1"
 
-"serialize-javascript@^6.0.1":
+"serialize-javascript@^6.0.0", "serialize-javascript@^6.0.1":
   "integrity" "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w=="
   "resolved" "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz"
   "version" "6.0.1"
@@ -7175,6 +7205,11 @@
   "resolved" "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
   "version" "3.0.0"
 
+"slash@^4.0.0":
+  "integrity" "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew=="
+  "resolved" "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz"
+  "version" "4.0.0"
+
 "sockjs@^0.3.24":
   "integrity" "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ=="
   "resolved" "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz"