init

NolDaGapSeoYang · Mar 30, 2023 · 9cad6e2 · 9cad6e2
commit 9cad6e2
Show file tree

Hide file tree

Showing 34 changed files with 5,058 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,42 @@
+{ 
+  "env": { 
+    "browser": true, 
+    "es2021": true, 
+    "jest": true,
+    "node": true
+  }, 
+  "extends": [ 
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ], 
+  "parser": "@typescript-eslint/parser", 
+  "parserOptions": { 
+    "ecmaFeatures": { 
+      "jsx": true 
+    }, 
+    "ecmaVersion": 12, 
+    "sourceType": "module" 
+  }, 
+  "plugins": [ 
+    "react", 
+    "react-hooks", 
+    "@typescript-eslint", 
+    "prettier", 
+    "import" 
+  ], 
+  "rules": { 
+    "react/react-in-jsx-scope": "off",
+    "arrow-body-style": "error", 
+    "prefer-arrow-callback": "off", 
+    "no-var": "error", 
+    "no-dupe-keys": "error", 
+    "react/prop-types": "off",
+    "prettier/prettier": "error" 
+  },
+  "settings": {
+    "react": {
+      "version": "latest"
+    }
+  } 
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,28 @@
+# 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?
+
+
+.env.*
+.env.development
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "endOfLine": "auto"
+}
diff --git a/DockerFile b/DockerFile
@@ -0,0 +1,15 @@
+FROM nginx
+
+RUN mkdir /app
+
+WORKDIR /app
+
+RUN mkdir ./build
+
+ADD ./dist ./build
+
+RUN rm /etc/nginx/conf.d/default.conf
+
+COPY ./nginx.conf /etc/nginx/conf.d
+
+EXPOSE 80
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!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 + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/nginx.conf b/nginx.conf
@@ -0,0 +1,8 @@
+server {
+  listen 80;
+  location / {
+    root /app/build;
+    index index.html;
+    try_files $uri $uri/ /index.html;
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "uhdre-gamdi",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "codegen": "graphql-codegen --config src/codegen.ts"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.7.10",
+    "framer-motion": "^10.10.0",
+    "graphql": "^16.6.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.9.0",
+    "styled-components": "^5.3.9",
+    "zustand": "^4.3.6"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "^3.2.2",
+    "@graphql-codegen/client-preset": "^2.1.1",
+    "@graphql-codegen/typescript-operations": "^3.0.2",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/styled-components": "^5.1.26",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint": "^8.37.0",
+    "prettier": "^2.8.7",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0",
+    "vite-plugin-svgr": "^2.4.0"
+  }
+}
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,7 @@
+import Router from './routes/Router'
+
+function App() {
+  return <Router />
+}
+
+export default App
diff --git a/src/GlobalStyle.tsx b/src/GlobalStyle.tsx
@@ -0,0 +1,95 @@
+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+  html {
+    font-size: 62.5%; // 1rem = 10px 로 변경
+    width: 100%;
+    height: calc(var(--var,1vh) * 100);
+  }
+  body {
+    background-color: #f9f9f9;
+    font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+      'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+      'Helvetica Neue', sans-serif;
+  }
+  // 색상 변수
+  --colors-gray-400: #e0e0e0;
+  // reset css
+  * {
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+  }
+  *,
+  :after,
+  :before {
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+  :root {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    cursor: default;
+    line-height: 1.5;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    tab-size: 4;
+  }
+  html,
+  body,
+  #root {
+    height: 100%;
+  }
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+  button {
+    background: none;
+    border: 0;
+    cursor: pointer;
+  }
+  a {
+    text-decoration: none;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  // 인풋 기본 스타일 제거
+  input {
+    border: none;
+    /* background-color: transparent; */
+    /* -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none; */
+  }
+  // 인풋 태그 테두리 하이라이트 제거
+  input:focus {
+    outline: none;
+  }
+  /* IE */
+  select::-ms-expand {
+    display: none;
+  }
+  /* select css 없애기 */
+  select {
+    -o-appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: 0;
+  }
+  li {
+    list-style-type: none;
+  }
+`
+
+export default GlobalStyle
diff --git a/src/api/fragment-masking.ts b/src/api/fragment-masking.ts
@@ -0,0 +1,48 @@
+import { ResultOf, TypedDocumentNode as DocumentNode,  } from '@graphql-typed-document-node/core';
+
+
+export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
+  infer TType,
+  any
+>
+  ? TType extends { ' $fragmentName'?: infer TKey }
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined;
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>> | ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any;
+}
+
+
+export function makeFragmentData<
+  F extends DocumentNode,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
diff --git a/src/api/gql.ts b/src/api/gql.ts
@@ -0,0 +1,42 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel or swc plugin for production.
+ */
+const documents = {
+    "\n    query test {\n      places {\n        address\n      }\n    }\n  ": types.TestDocument,
+};
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = graphql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+ */
+export function graphql(source: string): unknown;
+
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n    query test {\n      places {\n        address\n      }\n    }\n  "): (typeof documents)["\n    query test {\n      places {\n        address\n      }\n    }\n  "];
+
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;