Skip to content

Commit 6d008a7

Browse files
healim01healim01
authored
[FE] dev-fe 에서 dev 로 최종 프로젝트를 업로드한다. (#869)
2 parents d11098a + 4f8ac6b commit 6d008a7

263 files changed

Lines changed: 5309 additions & 2847 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/workflows/playwright.yml‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
name: Playwright Tests
2+
on:
3+
pull_request:
4+
branches: [main, dev-fe]
5+
paths:
6+
- 'frontend/**'
7+
push:
8+
branches: [main, dev-fe]
9+
paths:
10+
- 'frontend/**'
11+
jobs:
12+
test:
13+
timeout-minutes: 10
14+
runs-on: ubuntu-latest
15+
environment: frontend-msw
16+
steps:
17+
- uses: actions/checkout@v4
18+
- uses: actions/setup-node@v4
19+
with:
20+
node-version: 20
21+
- name: Cache dependencies
22+
id: cache
23+
uses: actions/cache@v3
24+
with:
25+
path: '**/node_modules'
26+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
27+
restore-keys: |
28+
${{ runner.os }}-yarn-
29+
- name: Install dependencies
30+
if: steps.cache.outputs.cache-hit != 'true'
31+
run: |
32+
cd frontend
33+
yarn install --frozen-lockfile
34+
- name: Install Playwright Browsers
35+
run: |
36+
cd frontend
37+
yarn playwright install --with-deps
38+
- name: Create .env File
39+
run: |
40+
cd frontend
41+
echo "CLIENT_ID=${{ secrets.CLIENT_ID }}" >> .env
42+
echo "GA_ID=${{ secrets.GA_ID }}" >> .env
43+
echo "COOKIE=${{ secrets.COOKIE }}" >> .env
44+
echo "KAKAO_MAP_KEY=${{ secrets.KAKAO_MAP_KEY }}" >> .env
45+
echo "SENTRY_DSN_TOKEN=${{ secrets.SENTRY_DSN_TOKEN }}" >> .env
46+
echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> .env
47+
echo "SENTRY_ORG=${{ secrets.SENTRY_ORG }}" >> .env
48+
echo "SENTRY_PROJECT=${{ secrets.SENTRY_PROJECT }}" >> .env
49+
echo "ANALYZE_BUNDLE=${{ secrets.ANALYZE_BUNDLE }}" >> .env
50+
echo "CI=${{ secrets.CI }}" >> .env
51+
echo "API_ENV=${{ secrets.API_ENV }}" >> .env
52+
echo "API_URL=${{ secrets.API_URL }}" >> .env
53+
echo "REDIRECT_URI=${{ secrets.REDIRECT_URI }}" >> .env
54+
echo "AMPLITUDE_API_KEY=${{ secrets.AMPLITUDE_API_KEY }}" >> .env
55+
- name: Run Playwright tests
56+
run: |
57+
cd frontend
58+
yarn e2e:mock
59+
- uses: actions/upload-artifact@v4
60+
if: ${{ !cancelled() }}
61+
with:
62+
name: playwright-report
63+
path: frontend/playwright-report/
64+
retention-days: 30

‎frontend/.eslintrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"eqeqeq": "error",
2323
"dot-notation": "warn",
2424
"no-unused-vars": "off",
25-
"@typescript-eslint/no-unused-vars": ["error"],
25+
"@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "_" }],
2626
"unused-imports/no-unused-imports": "error",
2727
"unused-imports/no-unused-vars": [
2828
"warn",

‎frontend/.gitignore‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
logs
77
**/*.backup.*
88
**/*.back.*
9+
user.json
910

1011
node_modules
1112
dist
@@ -23,4 +24,11 @@ stories
2324
.env.sentry-build-plugin
2425

2526

26-
private*
27+
private*
28+
test-results/
29+
playwright-report/
30+
blob-report/
31+
playwright/.auth/*
32+
playwright/.cache/
33+
*/.auth
34+

‎frontend/.storybook/preview.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ const decorator = Story => (
1010
<Global
1111
styles={css`
1212
${normalize}
13-
font-size: 10px;
13+
html {
14+
font-size: 62.5%;
15+
}
1416
`}
1517
/>
1618
<ThemeProvider theme={theme}>

‎frontend/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ npm run build
88

99
or
1010

11-
```
11+
```a
1212
yarn build
1313
```
1414

‎frontend/jest.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,5 @@ module.exports = {
99
'\\.svg': '<rootDir>/src/mocks/svg.ts',
1010
},
1111
testEnvironment: 'jest-environment-jsdom',
12+
testPathIgnorePatterns: ['\\.spec\\.ts$'],
1213
};

‎frontend/package.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,17 @@
1515
"storybook": "storybook dev -p 6006",
1616
"build-storybook": "storybook build",
1717
"test": "concurrently --names ,[TYPE] --prefix {name} \"jest\" \"tsc --noEmit\"",
18+
"e2e:mock": "playwright test --config=playwright.mock.config.ts",
19+
"e2e:mock-ui": "playwright test --config=playwright.mock.config.ts --ui",
20+
"e2e:api": "playwright test --config=playwright.api.config.ts",
21+
"e2e:api-ui": "playwright test --config=playwright.api.config.ts --ui",
1822
"postinstall": "cd .. && husky frontend/.husky",
1923
"format": "prettier --cache --write .",
2024
"lint": "eslint --cache .",
2125
"lint:styled": "stylelint --cache --fix ./*"
2226
},
2327
"dependencies": {
28+
"@amplitude/analytics-browser": "^2.11.8",
2429
"@babel/cli": "^7.25.6",
2530
"@babel/core": "^7.25.2",
2631
"@babel/preset-env": "^7.25.4",
@@ -37,13 +42,15 @@
3742
"react": "^18.3.1",
3843
"react-dom": "^18.3.1",
3944
"react-draggable": "^4.4.6",
45+
"react-error-boundary": "^4.0.13",
4046
"react-ga4": "^2.1.0",
4147
"react-router-dom": "^6.24.1",
4248
"zustand": "^4.5.4"
4349
},
4450
"devDependencies": {
4551
"@chromatic-com/storybook": "^1.6.1",
4652
"@eslint/js": "^8.6.0",
53+
"@playwright/test": "^1.47.2",
4754
"@sentry/webpack-plugin": "^2.22.4",
4855
"@storybook/addon-docs": "^8.3.0",
4956
"@storybook/addon-essentials": "^8.2.4",
@@ -62,6 +69,7 @@
6269
"@testing-library/jest-dom": "^6.5.0",
6370
"@testing-library/react": "^16.0.0",
6471
"@types/jest": "^29.5.12",
72+
"@types/node": "^22.7.4",
6573
"@types/react": "^18.3.5",
6674
"@types/react-dom": "^18.3.0",
6775
"@webpack-cli/generators": "^3.0.7",

‎frontend/playwright.api.config.ts‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
/**
3+
* Read environment variables from file.
4+
* https://github.com/motdotla/dotenv
5+
*/
6+
import dotenv from 'dotenv';
7+
import path from 'path';
8+
9+
dotenv.config({ path: path.resolve(__dirname, '.env.development') });
10+
/**
11+
* See https://playwright.dev/docs/test-configuration.
12+
*/
13+
export default defineConfig({
14+
testDir: './playwright/tests/api',
15+
/* Run tests in files in parallel */
16+
fullyParallel: true,
17+
/* Fail the build on CI if you accidentally left test.only in the source code. */
18+
forbidOnly: !!process.env.CI,
19+
/* Retry on CI only */
20+
retries: process.env.CI ? 2 : 0,
21+
/* Opt out of parallel tests on CI. */
22+
workers: process.env.CI ? 1 : undefined,
23+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
24+
reporter: 'html',
25+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
26+
use: {
27+
/* Base URL to use in actions like `await page.goto('/')`. */
28+
baseURL: 'http://localhost:3000',
29+
30+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
31+
trace: 'on-first-retry',
32+
actionTimeout: 5000,
33+
},
34+
35+
/* Configure projects for major browsers */
36+
projects: [
37+
{ name: 'setup', testMatch: /.*\.setup\.ts/ },
38+
{
39+
name: 'chromium',
40+
use: { ...devices['Desktop Chrome'], storageState: 'playwright/.auth/user.json' },
41+
dependencies: ['setup'],
42+
},
43+
44+
{
45+
name: 'firefox',
46+
use: { ...devices['Desktop Firefox'], storageState: 'playwright/.auth/user.json' },
47+
dependencies: ['setup'],
48+
},
49+
50+
{
51+
name: 'webkit',
52+
use: { ...devices['Desktop Safari'], storageState: 'playwright/.auth/user.json' },
53+
dependencies: ['setup'],
54+
},
55+
56+
/* Test against mobile viewports. */
57+
// {
58+
// name: 'Mobile Chrome',
59+
// use: { ...devices['Pixel 5'] },
60+
// },
61+
// {
62+
// name: 'Mobile Safari',
63+
// use: { ...devices['iPhone 12'] },
64+
// },
65+
66+
/* Test against branded browsers. */
67+
// {
68+
// name: 'Microsoft Edge',
69+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
70+
// },
71+
// {
72+
// name: 'Google Chrome',
73+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
74+
// },
75+
],
76+
77+
/* Run your local dev server before starting the tests */
78+
webServer: {
79+
command: 'yarn dev -- --no-open',
80+
url: 'http://localhost:3000/',
81+
reuseExistingServer: !process.env.CI,
82+
},
83+
});

‎frontend/playwright.mock.config.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
/**
3+
* Read environment variables from file.
4+
* https://github.com/motdotla/dotenv
5+
*/
6+
import dotenv from 'dotenv';
7+
import path from 'path';
8+
9+
dotenv.config({ path: path.resolve(__dirname, '.env.msw') });
10+
/**
11+
* See https://playwright.dev/docs/test-configuration.
12+
*/
13+
export default defineConfig({
14+
testDir: './playwright/tests/mock',
15+
/* Run tests in files in parallel */
16+
fullyParallel: true,
17+
/* Fail the build on CI if you accidentally left test.only in the source code. */
18+
forbidOnly: !!process.env.CI,
19+
/* Retry on CI only */
20+
retries: process.env.CI ? 2 : 0,
21+
/* Opt out of parallel tests on CI. */
22+
workers: process.env.CI ? 1 : undefined,
23+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
24+
reporter: 'html',
25+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
26+
use: {
27+
baseURL: 'http://localhost:3000',
28+
29+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
30+
trace: 'on-first-retry',
31+
actionTimeout: 5000,
32+
},
33+
34+
/* Configure projects for major browsers */
35+
projects: [
36+
{
37+
name: 'chromium',
38+
use: { ...devices['Desktop Chrome'] },
39+
},
40+
41+
{
42+
name: 'firefox',
43+
use: { ...devices['Desktop Firefox'] },
44+
},
45+
46+
{
47+
name: 'webkit',
48+
use: { ...devices['Desktop Safari'] },
49+
},
50+
51+
/* Test against mobile viewports. */
52+
// {
53+
// name: 'Mobile Chrome',
54+
// use: { ...devices['Pixel 5'] },
55+
// },
56+
// {
57+
// name: 'Mobile Safari',
58+
// use: { ...devices['iPhone 12'] },
59+
// },
60+
61+
/* Test against branded browsers. */
62+
// {
63+
// name: 'Microsoft Edge',
64+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
65+
// },
66+
// {
67+
// name: 'Google Chrome',
68+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
69+
// },
70+
],
71+
72+
/* Run your local dev server before starting the tests */
73+
webServer: {
74+
command: 'yarn msw -- --no-open',
75+
url: 'http://localhost:3000/',
76+
reuseExistingServer: !process.env.CI,
77+
},
78+
});

‎frontend/playwright/tests/api/auth.setup.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { test as setup } from '@playwright/test';
2+
import path from 'path';
3+
4+
const authFile = path.join(__dirname, '../../../playwright/.auth/user.json');
5+
6+
setup('authenticate', async ({ page }) => {
7+
const username = process.env.EMAIL || '';
8+
const password = process.env.PASSWORD || '';
9+
10+
await page.goto('/sign-in');
11+
await page.locator('input[name="email"]').fill(username);
12+
await page.locator('input[name="password"]').fill(password);
13+
await page.getByRole('button', { name: '로그인 하기' }).click();
14+
await page.waitForURL('/home');
15+
await page.context().storageState({ path: authFile });
16+
});

0 commit comments

Comments
 (0)