프론트엔드 프로젝트 설정 (#11)

* chore: (#6) 프론트엔드 프로젝트 초기 개발 환경 구축
webpack, react, typescript, eslint
절대 경로 설정

* chore: (#6) styled-components 설치 및 global style 세팅

* chore: storybook 설치 및 세팅
styled-component 관련 세팅

* chore: 테스트 환경 구축
모의 테스트(단위 테스트, hook 테스트) 실행

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+ "git.ignoreLimitWarning": true
+}

frontend/.babelrc.json

@@ -0,0 +1,16 @@
+{
+ "sourceType": "unambiguous",
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "targets": {
+ "chrome": 100
+ }
+ }
+ ],
+ "@babel/preset-typescript",
+ "@babel/preset-react"
+ ],
+ "plugins": []
+}

frontend/.eslintrc

@@ -0,0 +1,99 @@
+{
+ "extends": ["react-app", "eslint:recommended"],
+ "rules": {
+ "no-var": "error", // var 금지
+ "no-multiple-empty-lines": "error", // 여러 줄 공백 금지
+ "no-console": ["error", { "allow": ["warn", "error", "info"] }],
+ "eqeqeq": "error", // 일치 연산자 사용 필수
+ "dot-notation": "error", // 가능하다면 dot notation 사용
+ "no-unused-vars": "error", // 사용하지 않는 변수 금지
+ "import/order": [
+ "error",
+ {
+ "groups": [
+ "type",
+ "builtin",
+ "external",
+ "internal",
+ "parent",
+ "sibling",
+ "index",
+ "unknown"
+ ],
+ "newlines-between": "always",
+ "pathGroups": [
+ {
+ "pattern": "react*",
+ "group": "external",
+ "position": "before"
+ },
+ {
+ "pattern": "@type/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@hooks/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@atoms/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@selectors/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@routes/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@api/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@pages/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@components/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@contants/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@utils/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@styles/**",
+ "group": "internal",
+ "position": "after"
+ },
+ {
+ "pattern": "@assets/**",
+ "group": "internal",
+ "position": "after"
+ }
+ ],
+ "alphabetize": {
+ "caseInsensitive": true,
+ "order": "asc"
+ },
+ "pathGroupsExcludedImportTypes": []
+ }
+ ]
+ }
+}

frontend/.gitignore

@@ -0,0 +1 @@
+/node_modules

frontend/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+ printWidth: 100, // 한줄당 문자 100개로 제한
+ singleQuote: true, // "" => ''
+ arrowParens: 'avoid', // arrow function parameter가 하나일 경우 괄호 생략
+};

frontend/.storybook/main.ts

@@ -0,0 +1,37 @@
+import path from 'path';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+
+const config: StorybookConfig = {
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ addons: [
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@storybook/addon-interactions',
+ ],
+ framework: {
+ name: '@storybook/react-webpack5',
+ options: {},
+ },
+ docs: {
+ autodocs: 'tag',
+ },
+ webpackFinal: async config => {
+ if (!config.resolve) {
+ config.resolve = {};
+ }
+
+ if (!config.resolve.plugins) {
+ config.resolve.plugins = [];
+ }
+
+ config.resolve.plugins.push(
+ new TsconfigPathsPlugin({
+ configFile: path.resolve(__dirname, '../tsconfig.json'),
+ })
+ );
+ return config;
+ },
+};
+export default config;

frontend/.storybook/preview.tsx

@@ -0,0 +1,26 @@
+import type { Preview } from '@storybook/react';
+
+import { GlobalStyle } from '../src/styles/globalStyle';
+import React from 'react';
+
+const preview: Preview = {
+ parameters: {
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
+ },
+ },
+ decorators: [
+ Story => (
+ <>
+ <GlobalStyle />
+ <Story />
+ </>
+ ),
+ ],
+};
+
+export default preview;

frontend/__test__/hook.test.tsx

@@ -0,0 +1,17 @@
+import { renderHook, act } from '@testing-library/react';
+
+import { useCount } from '../src/hooks/useCount';
+
+/**
+ * @jest-environment jsdom
+ */
+
+test('useCount hook을 테스트한다.', () => {
+ const { result } = renderHook(() => useCount());
+
+ act(() => {
+ result.current.increase();
+ });
+
+ expect(result.current.count).toBe(1);
+});

frontend/__test__/unit.test.js

@@ -0,0 +1,5 @@
+describe('테스트 설정한다.', () => {
+ test('1 + 1 = 2', () => {
+ expect(1 + 1).toBe(2);
+ });
+});

frontend/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+ testEnvironment: 'jsdom',
+};