diff --git a/.github/workflows/deploy-frontend.yml b/.github/workflows/deploy-frontend.yml new file mode 100644 index 00000000..79cd98e2 --- /dev/null +++ b/.github/workflows/deploy-frontend.yml @@ -0,0 +1,65 @@ +name: Deploy Frontend in Monorepo + +on: + push: + branches: + - dev-fe + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + + services: + docker: + image: docker:20.10.7 + options: --privileged + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Cache Yarn dependencies + uses: actions/cache@v3 + with: + path: | + **/node_modules + ~/.yarn-cache + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: 'yarn' + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build frontend + run: | + yarn workspace frontend build + + - name: Log in to Docker Hub + uses: docker/login-action@v3 + with: + username: ${{ secrets.DOCKER_USERNAME }} + password: ${{ secrets.DOCKER_PASSWORD }} + + - name: Build and push backend Docker image + run: | + docker build -t ${{ secrets.DOCKER_USERNAME }}/backend:latest -f packages/backend/Dockerfile . + docker push ${{ secrets.DOCKER_USERNAME }}/backend:latest + + - name: Deploy to server + uses: appleboy/ssh-action@v1.1.0 + with: + host: ${{ secrets.SERVER_HOST }} + username: ${{ secrets.SERVER_USER }} + key: ${{ secrets.SERVER_SSH_KEY}} + port: ${{ secrets.SERVER_PORT }} + script: | + docker pull ${{ secrets.DOCKER_USERNAME }}/frontend:latest + docker-compose down + docker-compose up -d diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml index 80167f3b..9df02eff 100644 --- a/.github/workflows/storybook.yml +++ b/.github/workflows/storybook.yml @@ -42,18 +42,12 @@ jobs: PUBLIC_URL=$(echo $GITHUB_REPOSITORY | sed -r 's/^.+\/(.+)$/\/\1\//') echo PUBLIC_URL=$PUBLIC_URL > .env - - name: Build app - run: | - yarn client build - cp ./packages/frontend/build/index.html ./packages/frontend/build/404.html - - name: Build storybook run: | yarn client build-storybook - mv ./packages/frontend/storybook-static ./packages/frontend/build/storybook - name: Deploy to gh-pages branch uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./build + publish_dir: ./packages/frontend/storybook-static diff --git a/packages/frontend/src/components/layouts/Layout.tsx b/packages/frontend/src/components/layouts/Layout.tsx index e37b3f2a..ad7fb7e8 100644 --- a/packages/frontend/src/components/layouts/Layout.tsx +++ b/packages/frontend/src/components/layouts/Layout.tsx @@ -3,9 +3,9 @@ import { Sidebar } from './Sidebar'; export const Layout = () => { return ( -
+
-
+
diff --git a/packages/frontend/src/pages/stock-detail/TradingChart.tsx b/packages/frontend/src/pages/stock-detail/TradingChart.tsx index fd3053b2..198dedb0 100644 --- a/packages/frontend/src/pages/stock-detail/TradingChart.tsx +++ b/packages/frontend/src/pages/stock-detail/TradingChart.tsx @@ -1,13 +1,13 @@ import { useRef } from 'react'; import { useChart } from './hooks/useChart'; import { useChartResize } from './hooks/useChartResize'; -import { ChartTheme, darkTheme } from '@/styles/theme'; +import { ChartTheme, lightTheme } from '@/styles/theme'; interface TradingChartProps { theme?: ChartTheme; } -export const TradingChart = ({ theme = darkTheme }: TradingChartProps) => { +export const TradingChart = ({ theme = lightTheme }: TradingChartProps) => { const containerRef = useRef(null); const chart = useChart({ containerRef, theme }); diff --git a/packages/frontend/src/styles/theme/darkTheme.ts b/packages/frontend/src/styles/theme/darkTheme.ts index 2ea53c4e..e6e492cf 100644 --- a/packages/frontend/src/styles/theme/darkTheme.ts +++ b/packages/frontend/src/styles/theme/darkTheme.ts @@ -1,19 +1,19 @@ import resolveConfig from 'tailwindcss/resolveConfig'; import { ChartTheme } from '.'; -import tailwindConfig from '@/../tailwind.config.js'; +import tailwindConfig from '@/../tailwind.config'; const colorConfig = resolveConfig(tailwindConfig).theme.colors; - +console.log(colorConfig.red); export const darkTheme: ChartTheme = { background: '#1a1a1a', textColor: '#ffffffe6', gridLines: '#334158', borderColor: '#485c7b', candlestick: { - upColor: colorConfig.red, - downColor: colorConfig.blue, - borderUpColor: colorConfig.red, - borderDownColor: colorConfig.blue, + upColor: colorConfig.red.toString(), + downColor: colorConfig.blue.toString(), + borderUpColor: colorConfig.red.toString(), + borderDownColor: colorConfig.blue.toString(), wickUpColor: '#838ca1', wickDownColor: '#838ca1', }, diff --git a/packages/frontend/src/styles/theme/lightTheme.ts b/packages/frontend/src/styles/theme/lightTheme.ts index 94b9e2c1..c1f2698d 100644 --- a/packages/frontend/src/styles/theme/lightTheme.ts +++ b/packages/frontend/src/styles/theme/lightTheme.ts @@ -1,6 +1,6 @@ import resolveConfig from 'tailwindcss/resolveConfig'; import { ChartTheme } from '.'; -import tailwindConfig from '@/../tailwind.config.js'; +import tailwindConfig from '@/../tailwind.config'; const colorConfig = resolveConfig(tailwindConfig).theme.colors; @@ -10,10 +10,10 @@ export const lightTheme: ChartTheme = { gridLines: '#e0e3eb', borderColor: '#d6dcde', candlestick: { - upColor: colorConfig.red, - downColor: colorConfig.blue, - borderUpColor: colorConfig.red, - borderDownColor: colorConfig.blue, + upColor: colorConfig.red.toString(), + downColor: colorConfig.blue.toString(), + borderUpColor: colorConfig.red.toString(), + borderDownColor: colorConfig.blue.toString(), wickUpColor: '#737375', wickDownColor: '#737375', }, diff --git a/packages/frontend/src/utils/getHistogramColorData.ts b/packages/frontend/src/utils/getHistogramColorData.ts index 0a347645..86524a45 100644 --- a/packages/frontend/src/utils/getHistogramColorData.ts +++ b/packages/frontend/src/utils/getHistogramColorData.ts @@ -1,5 +1,5 @@ import resolveConfig from 'tailwindcss/resolveConfig'; -import tailwindConfig from '@/../tailwind.config.js'; +import tailwindConfig from '@/../tailwind.config'; // TODO: api 나오면 객체/위치 수정 interface VolumeData { diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.ts similarity index 81% rename from packages/frontend/tailwind.config.js rename to packages/frontend/tailwind.config.ts index 69c2addd..10590b9f 100644 --- a/packages/frontend/tailwind.config.js +++ b/packages/frontend/tailwind.config.ts @@ -1,5 +1,6 @@ -/** @type {import('tailwindcss').Config} */ -export default { +import type { Config } from 'tailwindcss' + +const config: Config = { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, @@ -18,4 +19,6 @@ export default { }, }, plugins: [], -}; +} + +export default config \ No newline at end of file diff --git a/packages/frontend/tsconfig.app.json b/packages/frontend/tsconfig.app.json index 374f7514..24c6800d 100644 --- a/packages/frontend/tsconfig.app.json +++ b/packages/frontend/tsconfig.app.json @@ -25,5 +25,5 @@ "composite": true }, - "include": ["src", "src/**/*.json"] + "include": ["src", "src/**/*.json", "tailwind.config.ts"] }