[INITIAL] 초기 셋팅

eslint, prettier 코드 포맷팅 설정
styled-compoents 설정
proxy 설정을 위한 커스텀 서버 설정
글로벌 스타일 설정
기본 페이지 추가

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }], "inline-react-svg"]
+}

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_RIOT_GAMES_API_KEY=123123123

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/react-in-jsx-scope': 'off', // next.js에서는 React를 자동으로 주입해주기 때문에 import하지 않아도 됨.
+    '@typescript-eslint/explicit-module-boundary-types': 'off', // Retrun type이 유추되는 경우 Return type을 꼭 명시할 필요는 없음.
+  },
+};

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "arrowParens": "always",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "parser": "typescript"
+}

README.md

@@ -0,0 +1 @@
+# 10팀 프로젝트

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  distDir: './dist/.next',
+  future: {
+    webpack5: true,
+  },
+  i18n: {
+    locales: ['ko-KR'],
+    defaultLocale: 'ko-KR',
+  },
+};

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "team10-op-gg-clone",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "NODE_ENV=development ts-node --project tsconfig.server.json src/server.ts",
+    "prebuild": "rimraf ./dist",
+    "redev": "npm run prebuild && npm run dev",
+    "build:server": "tsc --project tsconfig.server.json",
+    "build:next": "next build",
+    "build": "npm run build:server && npm run build:next",
+    "start": "NODE_ENV=production node dist/server.js"
+  },
+  "dependencies": {
+    "@types/express": "^4.17.11",
+    "axios": "^0.21.1",
+    "express": "^4.17.1",
+    "http-proxy-middleware": "^1.1.0",
+    "next": "10.1.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "styled-components": "^5.2.3",
+    "styled-reset": "^4.3.4",
+    "swr": "^0.5.5"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.3",
+    "@types/styled-components": "^5.1.9",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
+    "@typescript-eslint/parser": "^4.20.0",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "babel-plugin-styled-components": "^1.12.0",
+    "eslint": "^7.23.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-react": "^7.23.1",
+    "rimraf": "^3.0.2",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.2.3"
+  }
+}

src/api/client.ts

@@ -0,0 +1,6 @@
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+
+const config: AxiosRequestConfig = {};
+const client: AxiosInstance = axios.create(config);
+
+export default client;

src/constants/env.ts

@@ -0,0 +1,2 @@
+export const IS_PROD = process.env.NODE_ENV === 'production';
+export const IS_SERVER = typeof window === 'undefined';

src/constants/index.ts

@@ -0,0 +1 @@
+export * from './env';

src/pages/_app.tsx

@@ -0,0 +1,17 @@
+import { AppProps } from 'next/app';
+import GlobalStyle from '@/styles/GlobalStyle';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <>
+      <GlobalStyle />
+      <header>레이아웃 헤더</header>
+      <main>
+        <Component {...pageProps} />
+      </main>
+      <footer>레이아웃 푸터</footer>
+    </>
+  );
+}
+
+export default MyApp;

src/pages/_document.tsx

@@ -0,0 +1,29 @@
+import Document, { DocumentContext } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

src/pages/champions/[champion].tsx

@@ -0,0 +1,15 @@
+import { useRouter } from 'next/router';
+
+function Champion() {
+  const router = useRouter();
+  // 챔피언 이름
+  const { champion } = router.query;
+  return (
+    <>
+      <h1># 챔피언 상세보기</h1>
+      <p>{champion}</p>
+    </>
+  );
+}
+
+export default Champion;

src/pages/champions/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Champions() {
+  return (
+    <>
+      <h1># 챔피언 분석</h1>
+    </>
+  );
+}
+
+export default Champions;

src/pages/index.tsx

@@ -0,0 +1,16 @@
+import client from '@/api/client';
+import { useEffect } from 'react';
+export default function Home() {
+  useEffect(() => {
+    const a = async () => {
+      const response = await client.get('/lol/clash/v1/tournaments');
+      console.log(response.data);
+    };
+    a();
+  }, []);
+  return (
+    <>
+      <h1># 검색 메인페이지</h1>
+    </>
+  );
+}

src/pages/ranking/champions.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function ChampionsRangking() {
+  return (
+    <>
+      <h1># 챔피온 랭킹</h1>
+    </>
+  );
+}
+
+export default ChampionsRangking;

src/pages/ranking/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Ranking() {
+  return (
+    <>
+      <h1>래더 랭킹으로 리다이렉트</h1>
+    </>
+  );
+}
+
+export default Ranking;

src/pages/ranking/ladder.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function LadderRanking() {
+  return (
+    <>
+      <h1># 래더 랭킹</h1>
+    </>
+  );
+}
+
+export default LadderRanking;

src/pages/ranking/level.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function LevelRanking() {
+  return (
+    <>
+      <h1># 레벨 랭킹</h1>
+    </>
+  );
+}
+
+export default LevelRanking;

src/pages/statistics/champions.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function ChampionState() {
+  return (
+    <>
+      <h1># 챔피언 통계</h1>
+    </>
+  );
+}
+
+export default ChampionState;

src/pages/statistics/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Statistics() {
+  return (
+    <>
+      <h1>챔피언 통계로 리다이렉트</h1>
+    </>
+  );
+}
+
+export default Statistics;

src/pages/statistics/tier.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function TierState() {
+  return (
+    <>
+      <h1># 티어 통계</h1>
+    </>
+  );
+}
+
+export default TierState;

src/pages/users/[user].tsx

@@ -0,0 +1,15 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+
+function User() {
+  const router = useRouter();
+  const { user } = router.query;
+  return (
+    <>
+      <h1># 유저 상세보기</h1>
+      <p>{user}</p>
+    </>
+  );
+}
+
+export default User;

src/pages/users/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Users() {
+  return (
+    <>
+      <h1>유저 검색(나중에)</h1>
+    </>
+  );
+}
+
+export default Users;

src/server.ts

@@ -0,0 +1,35 @@
+import next from 'next';
+import express from 'express';
+import { createProxyMiddleware, Options } from 'http-proxy-middleware';
+
+import { IS_PROD } from './constants';
+
+const PORT = IS_PROD ? 3000 : 3000;
+
+async function bootstrap() {
+  const app = express();
+  const nextApp = next({ dev: !IS_PROD });
+  await nextApp.prepare();
+
+  const handle = nextApp.getRequestHandler();
+
+  app.use(
+    '/lol',
+    createProxyMiddleware({
+      target: process.env.API_ENDPOINT,
+      changeOrigin: true,
+      onProxyReq(proxyRes) {
+        proxyRes.setHeader('X-Riot-Token', process.env.RIOT_GAMES_API_KEY as string);
+      },
+    }),
+  );
+  app.use(express.json());
+
+  app.all('*', (req, res) => handle(req, res));
+
+  app.listen(PORT, () => {
+    console.log(`>Ready on http://localhost:${PORT} -env ${process.env.NODE_ENV}`);
+  });
+}
+
+bootstrap();