release/v2.0.0

.github/ISSUE_TEMPLATE/refactor-issue-template.md

@@ -0,0 +1,18 @@
+---
+name: Refactor issue template
+about: 리팩토링 이슈 템플릿
+title: 'refactor: '
+labels: "♻refactor"
+assignees: ''
+
+---
+
+## 💡 리팩토링 내용
+간단하게 작업 내용을 설명해주세요.
+단, 기존 내용을 수정하거나 무언가 추가해야한다면 상세한 이유를 설명해주세요.
+
+## ✅ 체크리스트
+- [ ] 작업할 내용 1
+- [ ] 작업할 내용 2
+
+## ⏰ 예상 소요 시간

.github/workflows/deploy.yml

@@ -0,0 +1,59 @@
+name: Deploy React App to AWS S3 and CloudFront
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Cache npm packages
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build the project
+        env:
+          NODE_ENV: production
+          API_URL: ${{ secrets.API_URL }}
+        run: npm run build
+
+      - name: Set up AWS credentials
+        if: github.event_name == 'push'
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: Deploy to S3
+        if: github.event_name == 'push'
+        run: |
+          aws s3 sync ./apps/web/dist/ s3://${{ secrets.S3_BUCKET_NAME }} --delete
+
+      - name: Invalidate CloudFront cache
+        if: github.event_name == 'push'
+        run: |
+          aws cloudfront create-invalidation \
+            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
+            --paths "/*"

.github/workflows/storybook.yml

@@ -0,0 +1,36 @@
+name: Storybook Deployment and Visual Testing
+run-name: ${{ github.actor }}의 스토리북 배포 및 테스트
+
+on:
+  pull_request:
+    branches:
+      - dev
+jobs:
+  storybook:
+    runs-on: ubuntu-22.04
+    defaults:
+      run:
+        working-directory: packages/jds
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Cache node_modules
+        id: cache
+        uses: actions/cache@v4
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}-storybook
+
+      - name: Install dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
+          workingDir: packages/jds

.gitignore

@@ -0,0 +1,73 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependencies
+node_modules
+
+# Production builds
+dist
+dist-ssr
+build
+out
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Storybook
+*storybook.log
+storybook-static/
+.cache/
+
+# Environment variables
+.env
+.env*.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Sentry Config File
+.env.sentry-build-plugin
+.sentryclirc
+
+# Turborepo
+.turbo/
+turbo-*.log
+
+# TypeScript
+*.tsbuildinfo
+tsconfig.tsbuildinfo
+
+# Workspace specific builds
+apps/*/dist
+apps/*/build
+apps/*/.turbo
+apps/*/.next
+packages/*/dist
+packages/*/build
+packages/*/.turbo
+packages/*/tsconfig.tsbuildinfo
+
+# Build tools
+.parcel-cache/
+.vite/
+
+# Chromatic
+build-storybook.log
+chromatic.log
+chromatic-build/
+

README.md

@@ -1 +1 @@
-# JECT-Official-WebSite-Client
+# JECT-Official-WebSite-Client

apps/web/.storybook/main.ts

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { dirname } from "path";
+
+import { fileURLToPath } from "url";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-docs"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+};
+export default config;

apps/web/.storybook/preview.ts

@@ -0,0 +1,23 @@
+import type { Preview } from "@storybook/react-vite";
+import "@/styles/tokens/index";
+import "@/styles/global.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo",
+    },
+  },
+};
+
+export default preview;

apps/web/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from "@storybook/react-vite";
+import * as projectAnnotations from "./preview";
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

apps/web/eslint.config.js

@@ -0,0 +1,12 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import appConfig from "@ject/eslint-config/app";
+
+export default [
+  {
+    ignores: ["**/.storybook/**"],
+  },
+  ...appConfig,
+  ...storybook.configs["flat/recommended"],
+];

apps/web/index.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="index, follow" />
+    <meta
+      name="keywords"
+      content="IT 사이드 프로젝트 동아리,협업,프론트엔드 개발자,백엔드 개발자,프로덕트 매니저(PM),프로덕트 디자이너"
+    />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+
+    <script src="https://cdn.amplitude.com/libs/analytics-browser-2.11.1-min.js.gz"></script>
+    <script src="https://cdn.amplitude.com/libs/plugin-session-replay-browser-1.8.0-min.js.gz"></script>
+
+    <!-- Google Tag Manager -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != "dataLayer" ? "&l=" + l : "";
+        j.async = true;
+        j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, "script", "dataLayer", "GTM-TMPMTHJ3");
+    </script>
+    <!-- End Google Tag Manager -->
+
+    <title>젝트</title>
+    <meta
+      name="description"
+      content="젝트(JECT)는 다양한 포지션 멤버들과 협업할 수 있는 IT 사이드 프로젝트 동아리예요. 홈페이지에서 더 자세한 내용을 확인해보세요!"
+    />
+
+    <!--Open Graph-->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="젝트" />
+    <meta
+      property="og:description"
+      content="젝트(JECT)는 다양한 포지션 멤버들과 협업할 수 있는 IT 사이드 프로젝트 동아리예요. 홈페이지에서 더 자세한 내용을 확인해보세요!"
+    />
+    <meta property="og:url" content="https://ject.kr/" />
+  </head>
+  <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript>
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-TMPMTHJ3"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe>
+    </noscript>
+    <!-- End Google Tag Manager (noscript) -->
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>