init main ui

antora-playbook.yml

@@ -8,5 +8,5 @@ content:
     start_path: getting-started
 ui:
   bundle:
-    url: https://gitlab.com/antora/antora-ui-default/-/jobs/artifacts/HEAD/raw/build/ui-bundle.zip?job=bundle-stable
+    url: https://gitlab.bwg.co.kr/swd/swlab-ui/-/jobs/artifacts/master/raw/build/ui-bundle.zip?job=bundle-stable
     snapshot: true
\ No newline at end of file

swlab-main/.eslintrc.cjs

+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    // react
+    'react/prop-types': 0,
+
+    // react-hooks
+    'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
+    'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
+
+    'react/display-name': 'off',
+    'react/jsx-no-undef': ['error', {
+      allowGlobals: true,
+    }],
+
+    // jsx-control-statements
+    'jsx-control-statements/jsx-for-require-each': 'off',
+    'jsx-control-statements/jsx-use-if-tag': 'off',
+
+    // possible error
+    'no-await-in-loop': 'error',
+    'no-extra-parens': ['warn', 'functions'],
+    'no-loss-of-precision': 'warn',
+    'no-promise-executor-return': 'warn',
+    'no-template-curly-in-string': 'warn',
+    'no-unreachable-loop': 'warn',
+    'no-useless-backreference': 'warn',
+    'require-atomic-updates': 'error',
+
+    // best practices
+    'array-callback-return': 'error',
+    // 'complexity': 'warn',
+    'default-case-last': 'error',
+    'eqeqeq': ['error', 'smart'],
+    'grouped-accessor-pairs': 'warn',
+    'no-constructor-return': 'error',
+    'no-eval': 'error',
+    'no-extend-native': 'warn',
+    'no-extra-label': 'warn',
+    'no-iterator': 'error',
+    'no-lone-blocks': 'warn',
+    'no-multi-spaces': ['warn', { ignoreEOLComments: true }],
+    'no-new': 'warn',
+    'no-new-func': 'warn',
+    'no-new-wrappers': 'error',
+    'no-param-reassign': 'error',
+    'no-proto': 'error',
+    'no-return-assign': 'error',
+    'no-self-compare': 'warn',
+    'no-unmodified-loop-condition': 'error',
+    'no-useless-concat': 'error',
+    'no-useless-return': 'error',
+    'prefer-regex-literals': 'warn',
+    'radix': 'error',
+
+    // variables
+    'no-unused-vars': ['warn', {
+      args: 'after-used',
+      argsIgnorePattern: '^_',
+      ignoreRestSiblings: true,
+      caughtErrors: 'none',
+    }],
+
+    // stylistic issues
+    'array-bracket-spacing': ['warn'],
+    'array-element-newline': ['warn', 'consistent'],
+    'block-spacing': 'error',
+    'comma-dangle': ['error', 'always-multiline'],
+    'comma-spacing': 'warn',
+    'comma-style': ['error', 'last'],
+    'func-call-spacing': 'error',
+    'eol-last': 'error',
+    'indent': ['warn', 2, {
+      VariableDeclarator: 'first',
+      FunctionDeclaration: { parameters: 'first' },
+      ignoreComments: true,
+    }],
+    'jsx-quotes': ['warn', 'prefer-single'],
+    'keyword-spacing': 'error',
+    'max-depth': 'error',
+    'multiline-ternary': ['error', 'always-multiline'],
+    'no-lonely-if': 'error',
+    'no-multiple-empty-lines': ['warn', {
+      max: 1,
+      maxEOF: 0,
+      maxBOF: 0,
+    }],
+    'no-trailing-spaces': 'error',
+    'no-unneeded-ternary': 'error',
+    'object-curly-spacing': ['warn', 'always'],
+    'operator-linebreak': ['warn', 'before'],
+    'quotes': ['warn', 'single', {
+      avoidEscape: true,
+      allowTemplateLiterals: true,
+    }],
+    'semi': ['warn', 'never'],
+    'space-before-function-paren': 'warn',
+    'space-in-parens': 'error',
+    'space-infix-ops': ['error', { int32Hint: false }],
+
+    // ecma6
+    'arrow-body-style': 'warn',
+    'arrow-spacing': 'error',
+    'no-confusing-arrow': 'error',
+    'no-restricted-exports': ['error', {
+      restrictedNamedExports: ['defaults'],
+    }],
+    'no-useless-computed-key': 'warn',
+    'no-useless-constructor': 'warn',
+    'no-useless-rename': 'error',
+    'no-var': 'error',
+    // 'prefer-const': 'warn',
+    'prefer-numeric-literals': 'warn',
+    'prefer-rest-params': 'warn',
+    'prefer-spread': 'warn',
+    'prefer-template': 'warn',
+    'rest-spread-spacing': 'warn',
+    'yield-star-spacing': 'warn',
+  },
+}

swlab-main/.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

swlab-main/README.md

+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

swlab-main/index.html

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

swlab-main/package.json

+{
+  "name": "swlab-docs-main",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.105.4",
+    "@react-three/fiber": "^8.16.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8",
+    "three": "^0.163.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "sass": "^1.75.0",
+    "vite": "^5.2.0"
+  }
+}

swlab-main/src/App.jsx

+// @ts-nocheck
+import './styles/index.scss'
+import Banner from './components/Banner'
+import Header from './components/Header'
+
+function App () {
+  return (
+    <>
+      <Header />
+      <Banner />
+    </>
+  )
+}
+
+export default App

swlab-main/src/components/Banner.jsx

+// @ts-nocheck
+import { useState, useRef } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { Points, PointMaterial } from '@react-three/drei'
+import * as random from 'maath/random/dist/maath-random.esm'
+import styled from 'styled-components'
+
+const Galaxy = (props) => {
+  const ref = useRef()
+  const [sphere] = useState(() => random.inSphere(new Float32Array(5000), { radius: 1.5 }))
+
+  useFrame((state, delta) => {
+    ref.current.rotation.x -= delta / 10
+    ref.current.rotation.y -= delta / 15
+  })
+  return (
+        // <group rotation={[0, 0, Math.PI / 4]}>
+    <group rotation={[0, 0, Math.PI / 4]}>
+      <Points ref={ref} positions={sphere} stride={3} frustumCulled={false} {...props}>
+        {/* <PointMaterial transparent color="#ffa0e0" size={0.005} sizeAttenuation={true} depthWrite={false} /> */}
+        <PointMaterial transparent color='#2174e0' size={0.005} sizeAttenuation={true} depthWrite={false} />
+      </Points>
+    </group>
+  )
+}
+
+export default function Banner () {
+  return (
+    <Wrapper>
+      <Canvas camera={{ position: [0, 0, 1] }}>
+        <Galaxy />
+      </Canvas>
+      <Overlay>
+        <BannerTitle type='main' fontSize='5em'>Bankware Global</BannerTitle>
+        <BannerTitle type='sub' fontSize='3.5em'>Software Lab.</BannerTitle>
+      </Overlay>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+    position: relative;
+    width: 100%;
+    height: 600px;
+    background-color: #12071f;
+`
+const Overlay = styled.div`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%,-50%,0);
+    text-align: center;
+`
+const BannerTitle = styled.h1`
+    margin: 0;
+    padding: 0;
+    font-size: ${(props) => props.fontSize};
+    font-weight: 600;
+    letter-spacing: -0.05em;
+    background: ${(props) => (props.type === 'main' ? 'linear-gradient(30deg, #2174e0, #fff)' : '#fff')};
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+`

swlab-main/src/components/Header.jsx

+// @ts-nocheck
+import styled from 'styled-components'
+import logoImg from '../assets/images/logo.png'
+import Nav from './Nav'
+
+export default function Header () {
+  return (
+    <Wrapper>
+      <LogoWrap>
+        <Logo image={logoImg} />
+        <LogoTitpeWrap>
+          <LogoTitle type='main'>SW Lab</LogoTitle>
+          <LogoTitle type='sub'>Bankware Global</LogoTitle>
+        </LogoTitpeWrap>
+      </LogoWrap>
+      <Nav />
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+    display: flex;
+    align-items: center;
+    height: 8.125rem;
+    max-height: 8.125rem;
+    padding: 1.875rem 0;
+    margin: 0 5rem;
+    background-color: rgba(0, 0, 0, 0);
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 100;
+    color: #fff;
+`
+const Logo = styled.div`
+    margin-top: 10px;
+    margin-right: 4px;
+    width: 40px;
+    height: 45px;
+    background-image: url(${props => props.image});
+    background-size: contain;
+    background-repeat: no-repeat;
+`
+const LogoWrap = styled.div`
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    width: 300px;
+    height: 60px;
+`
+const LogoTitpeWrap = styled.div`
+    display: flex;
+    flex-direction: column;
+`
+const LogoTitle = styled.span`
+    font-size: ${(props) => (props.type === 'main' ? '30px' : '14px')};
+    font-weight: ${(props) => (props.type === 'main' ? 600 : 400)};
+    margin-top: ${(props) => (props.type !== 'main' && '-4px')}
+`

swlab-main/src/components/Nav.jsx

+// @ts-nocheck
+import styled from 'styled-components'
+
+export default function Nav () {
+  return (<Menu>
+    <MenuItem>Documentation</MenuItem>
+  </Menu>)
+}
+
+const Menu = styled.div`
+    display: flex;
+    align-items: center;
+`
+const MenuItem = styled.div`
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 20px;
+`

swlab-main/src/main.jsx

+// @ts-nocheck
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

swlab-main/src/styles/font.scss

+/*
+ * Noto Sans KR
+ */
+ $noto-sans-kr: 'Noto Sans KR';
+
+ @font-face {
+   font-family: $noto-sans-kr;
+   font-style: normal;
+   font-weight: 100;
+   src:url(../fonts/noto/NotoSansKR-Thin.otf) format('opentype');
+ }
+ @font-face {
+   font-family: $noto-sans-kr;
+   font-style: normal;
+   font-weight: 300;
+   src:url(../fonts/noto/NotoSansKR-Light.otf) format('opentype');
+ }
+ @font-face {
+    font-family: $noto-sans-kr;
+    font-style: normal;
+    font-weight: 400;
+    src:url(../fonts/noto/NotoSansKR-Regular.otf) format('opentype');
+  }
+ @font-face {
+    font-family: $noto-sans-kr;
+    font-style: normal;
+    font-weight: 500;
+    src:url(../fonts/noto/NotoSansKR-Medium.otf) format('opentype');
+  }
+ @font-face {
+    font-family: $noto-sans-kr;
+    font-style: normal;
+    font-weight: 700;
+    src:url(../fonts/noto/NotoSansKR-Bold.otf) format('opentype');
+  }
+ @font-face {
+    font-family: $noto-sans-kr;
+    font-style: normal;
+    font-weight: 900;
+    src:url(../fonts/noto/NotoSansKR-Black.otf) format('opentype');
+  }
+ 
\ No newline at end of file

swlab-main/src/styles/index.scss

+@import "font";
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  min-width: 1280px;
+}
+
+#root {
+  position: relative;
+}
+
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+body {
+  font-weight: 400;
+  font-size: 13px !important;
+}
+
+a {
+  color: #333;
+  text-decoration: none;
+}
+
+a[download] {
+  color: #36435c;
+  text-decoration: underline;
+}
+
+pre {
+  font-family: Noto Sans KR, sans-serif, Arial;
+}
+
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
\ No newline at end of file

swlab-main/vite.config.js

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})