✨ frontend add

frontend/portal/.babelrc

@@ -0,0 +1,22 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "root": ["./"],
+        "alias": {
+          "@components": "./src/components",
+          "@pages": "./src/pages",
+          "@constants": "./src/constants",
+          "@service": "./src/service",
+          "@stores": "./src/stores",
+          "@hooks": "./src/hooks",
+          "@libs": "./src/libs",
+          "@utils": "./src/utils",
+          "@styles": "./src/styles"
+        }
+      }
+    ]
+  ]
+}

frontend/portal/.dockerignore

@@ -0,0 +1,7 @@
+.git
+.gitignore
+
+node_modules
+npm-debug.log
+
+dist

frontend/portal/.env.local.sample

@@ -0,0 +1 @@
+NEXT_PUBLIC_TEST="DEV"

frontend/portal/.eslintrc.js

@@ -0,0 +1,67 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es2020: true,
+    jest: true, //jest 사용시에만 추가
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['@typescript-eslint', 'react', 'prettier'],
+  extends: [
+    'airbnb',
+    'airbnb/hooks',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'prettier',
+    'prettier/@typescript-eslint',
+    'prettier/react',
+  ],
+  rules: {
+    'react/jsx-filename-extension': [
+      1,
+      { extensions: ['.js, .jsx, .ts', '.tsx'] },
+    ],
+    'import/extensions': 'off',
+    'react/prop-types': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
+    'react/jsx-props-no-spreading': ['error', { custom: 'ignore' }],
+    'prettier/prettier': 'error',
+    'arrow-body-style': 'off', //eslint-plugin-prettier와 충돌하는 eslint 코어 룰 비활성화
+    'react/no-unescaped-entities': 'off',
+    'import/no-cycle': [0, { ignoreExternal: true }],
+    'prefer-const': 'off',
+    // needed because of https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use & https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': [
+      'error',
+      { functions: false, classes: false, variables: true },
+    ],
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: ['@material-ui/*/*/*', '!@material-ui/core/test-utils/*'],
+      },
+    ],
+  },
+  settings: {
+    'import/resolver': {
+      'babel-module': {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        paths: ['src'],
+      },
+    },
+  },
+}

frontend/portal/.prettierrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  singleQuote: true,
+  // 문자열은 따옴표로 formatting
+  semi: false,
+  //코드 마지막에 세미콜른이 없도록 formatting
+  useTabs: false,
+  //탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
+  tabWidth: 2,
+  // 들여쓰기 너비는 2칸
+  trailingComma: 'all',
+  // 배열 키:값 뒤에 항상 콤마를 붙히도록 	  	//formatting
+  printWidth: 80,
+  // 코드 한줄이 maximum 80칸
+  arrowParens: 'avoid',
+  // 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
+}

frontend/portal/Dockerfile

@@ -0,0 +1,13 @@
+# portal
+FROM node:14.8.0-alpine
+
+ENV APP_HOME=/usr/app/
+RUN mkdir -p ${APP_HOME}
+# 작업 시작 위치
+WORKDIR $APP_HOME
+COPY package*.json .
+RUN npm install
+COPY . .
+RUN npm run build
+
+CMD ["npm", "run", "start"]

frontend/portal/README.md

@@ -0,0 +1,72 @@
+# Frontend Boilerplate
+
+Next.js + Typescript 활용한 React 기반 프론트엔드 기본 설정 Boilerplate.
+해당 프로젝트에 설정된 부분은 [여기를](https://www.notion.so/Frontend-Boilerplate-b4f07b67713243f1bb0050cd35970bc9) 확인!!
+
+### Tech stack
+
+- [Next.js](https://nextjs.org/docs/getting-started)
+- [Typescript](https://www.typescriptlang.org/docs/)
+- [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) + [airbnb Style Guide](https://github.com/airbnb/javascript)
+- [Jest](https://jestjs.io/docs/next/getting-started) + [testing-library](https://testing-library.com/docs/)
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm install
+
+# 기본 소규모 모드
+npm run dev
+# or
+yarn dev
+
+# 소규모 모드
+npm run dev:sm
+
+# 대규모 모드
+npm run dev:lg
+```
+
+```bash
+├─public                 # static resource root
+│  ├─locales             # 다국어 message.json
+│  └─styles				 # css + images
+│
+├─server                 # custom server
+│  └─index.ts
+│
+├─src                   # source root
+│   ├─@types                # type declaration
+│   ├─components            # components
+│   ├─constants             # 상수
+│   ├─hooks                 # custom hooks
+│   ├─libs                  # deps library custom
+│   ├─pages                 # next.js page routing
+│   │   ├─api               # next.js api routing
+│   │   └─auth              # 로그인 관련
+│   ├─service               # API 호출
+│   ├─stores                # recoil 상태관리
+│   ├─styles                # material ui theme 관리
+│   └─utils                 # utils
+│
+├─test                      # test 관련
+│
+│ .babelrc              # babel config
+│ .dockerignore         # docker ignore
+│ .env.local            # environment variables
+│ .eslintrc.js          # eslint config
+│ .gitignore            # git ignore
+│ .prettierrc.js        # prettier config
+│ Dockerfile            # Docker 배포 시
+│ jest.config.js        # jest config
+│ jest.setup.ts         # jest에서 testing-library 사용하기 위한 설정(그외 jest에 필요한 외부 라이브러리 설정)
+│ manifest.yml          # cf 배포 시
+│ next-env.d.ts         # next.js type declare
+│ next.config.js        # next.js 설정
+│ package.json.
+│ README.md
+│ tsconfig.json          # typescirpt config
+└ tsconfig.server.json   # custom server 사용 시 typescript config
+```

frontend/portal/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/test/mocks.ts',
+    '\\.(css|less|scss|html)$': '<rootDir>/test/mocks.ts',
+    //절대 경로 세팅한 경우 jest에도 세팅이 필요함
+    '^@pages(.*)$': '<rootDir>/pages$1',
+  },
+}

frontend/portal/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

frontend/portal/manifest.yml

@@ -0,0 +1,12 @@
+---
+applications:
+  - name: egov-simple-portal # CF push 시 생성되는 이름
+    memory: 2048M # 메모리
+    instances: 1 # 인스턴스 수
+    host: egov-simple-portal # host 명으로 유일해야 함
+    command: npm run start # 애플리케이션 실행 명령어
+    path: ./ # 배포될 애플리케이션의 위치
+    buildpack: nodejs_buildpack # cf buildpacks 명령어로 nodejs buildpack 이름 확인
+    env:
+      NODE_ENV: production
+      TZ: 'Asia/Seoul'

frontend/portal/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

frontend/portal/next-i18next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'ko',
+    locales: ['en', 'ko'],
+  },
+}

frontend/portal/next.config.js

@@ -0,0 +1,26 @@
+const { i18n } = require('./next-i18next.config')
+const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
+
+const port = process.env.PORT || 3000
+const serverApiUrl = process.env.SERVER_API_URL || 'http://localhost:8000'
+const siteId = process.env.SITE_ID || '3'
+const mode = siteId === '2' ? 'lg' : siteId === '3' ? 'sm' : 'sm'
+
+module.exports = {
+  i18n,
+  env: {
+    PORT: port,
+    PROXY_HOST: process.env.PROXY_HOST || `http://localhost:${port}`,
+    MODE: mode,
+    SERVER_API_URL: serverApiUrl,
+    SITE_ID: siteId,
+  },
+  async rewrites() {
+    return [
+      {
+        source: '/server/:path*',
+        destination: `${serverApiUrl}/:path*`,
+      },
+    ]
+  },
+}

frontend/portal/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "msa-template-portal",
+  "version": "0.1.0",
+  "private": true,
+  "engines": {
+    "node": "14.8.0",
+    "npm": "6.14.7"
+  },
+  "scripts": {
+    "dev": "ts-node --project tsconfig.server.json server/index.ts",
+    "dev:sm": "SITE_ID=3 npm run dev",
+    "dev:lg": "SITE_ID=2 npm run dev",
+    "build:server": "tsc --project tsconfig.server.json",
+    "build:next": "next build",
+    "prebuild": "rimraf ./build",
+    "build": "NODE_ENV=production npm run build:next && npm run build:server",
+    "build:prodlg": "env-cmd -f ./.env.production-lg npm run build:next && npm run build:server",
+    "start:prodlg": "env-cmd -f ./.env.production-lg node build/index.js",
+    "build:prodsm": "env-cmd -f ./.env.production-sm npm run build:next && npm run build:server",
+    "start:prodsm": "env-cmd -f ./.env.production-sm node build/index.js",
+    "start": "NODE_ENV=production node build/index.js",
+    "test": "jest --coverage"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": "^29.1.0",
+    "@ckeditor/ckeditor5-react": "^3.0.2",
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/data-grid": "^4.0.0-alpha.37",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "4.0.0-alpha.60",
+    "axios": "^0.21.1",
+    "cookies": "^0.8.0",
+    "cors": "^2.8.5",
+    "date-fns": "^2.23.0",
+    "date-fns-tz": "^1.1.6",
+    "eventsource": "^1.1.0",
+    "express": "^4.17.1",
+    "http-proxy": "^1.18.1",
+    "immer": "^9.0.5",
+    "multer": "^1.4.3",
+    "next": "11.1.0",
+    "next-connect": "^0.10.2",
+    "next-i18next": "^8.6.0",
+    "notistack": "^1.0.10",
+    "react": "^17.0.2",
+    "react-cookie": "^4.1.1",
+    "react-datepicker": "^4.2.1",
+    "react-dom": "^17.0.2",
+    "react-google-login": "^5.2.2",
+    "react-hook-form": "^7.13.0",
+    "react-i18next": "^11.12.0",
+    "react-kakao-login": "^2.1.0",
+    "recoil": "^0.4.1",
+    "styled-jsx": "^4.0.0",
+    "swiper": "^6.8.2",
+    "swr": "^0.5.6",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^8.2.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/cookies": "^0.7.7",
+    "@types/express": "^4.17.13",
+    "@types/http-proxy": "^1.17.7",
+    "@types/multer": "^1.4.7",
+    "@types/node": "^16.7.2",
+    "@types/react": "^17.0.19",
+    "@types/react-cookies": "^0.1.0",
+    "@types/react-datepicker": "^4.1.7",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
+    "babel-jest": "^27.0.6",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "env-cmd": "^10.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-next": "^11.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^27.0.6",
+    "prettier": "^2.3.2",
+    "ts-node": "^10.2.1",
+    "typescript": "^4.4.2"
+  }
+}

frontend/portal/public/styles/lg/main.css

@@ -0,0 +1,58 @@
+@charset "UTF-8";
+
+header {border-bottom:1px solid #e7e7e7;}
+header nav ul li a {color:#000;}
+/* popup */
+.absolute {
+        position: absolute;
+        top: 580px;
+        right: 10px;
+        cursor:pointer;
+}
+.popup_close {
+        position: absolute;
+        right:10px;
+        top:10px;
+        cursor:pointer;
+}
+.popup_detail{
+        position: absolute;
+        right:165px;
+        bottom:44px;
+        font-size:15px;
+        cursor:pointer;
+        padding: 5px 10px;
+        font-weight:bold;
+        color: #ffffff;
+        text-shadow: 0px 0px 5px #4484e2,
+          0px 0px 20px #4484e2,
+          0px 0px 30px #4484e2;
+
+}
+.popup_detail:hover{
+        color: #ffffff;
+        text-shadow: 0px 0px 5px #fff,
+          0px 0px 20px #4484E2,
+          0px 0px 30px #4484E2,
+          0px 0px 40px #4484E2,
+          0px 0px 60px #4484E2,
+          0px 0px 90px #4484E2,
+          0px 0px 120px #4484E2,
+          0px 0px 200px #4484E2;
+}
+
+
+#page_popup {
+
+        background-color: green;
+        background-repeat: no-repeat;
+        position:absolute;
+        left:30px;
+        top:130px;
+        cursor:move;
+        width:463px;
+        height:538px;
+        border-style: ridge;
+        z-index:200;
+}
+#page_popup .absolute span {font-size: 14px}