migrate code and configuration to vercel template

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+public

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+    root: true,
+    env: {
+      browser: true,
+      amd: true,
+      node: true,
+      es6: true,
+    },
+    extends: ["eslint:recommended", "plugin:prettier/recommended"],
+    rules: {
+      "prettier/prettier": "error",
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": 0,
+      "no-unused-vars": 0,
+      "react/no-unescaped-entities": 0,
+    },
+    overrides: [
+      {
+        files: ["*.tsx"],
+        rules: {
+          "no-undef": "off",
+        },
+      },
+    ],
+  };
+

.gitignore

@@ -27,3 +27,35 @@ yarn-error.log*
 .env
 .env.build
 .vercel
+
+
+### yarn ###
+# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+
+.yarn/*
+!.yarn/releases
+!.yarn/patches
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+
+# if you are NOT using Zero-installs, then:
+# comment the following lines
+!.yarn/cache
+
+# etc
+remote-repo/
+coverage/
+.module-cache
+fixtures/dom/public/react-dom.js
+fixtures/dom/public/react.js
+test/the-files-to-test.generated.js
+*.log*
+chrome-user-data
+*.sublime-project
+*.sublime-workspace
+.idea
+*.iml
+.vscode
+*.swp
+*.swo

.prettierrc.json

@@ -0,0 +1 @@
+{}

README.md

@@ -1,31 +1,66 @@
-# Create React App
+# Today's Artwork
 
-This directory is a brief example of a [Create React App](https://github.com/facebook/create-react-app) site that can be deployed to Vercel with zero configuration.
+> 오늘의 미술작품을 큐레이팅해주는 페이지입니다.
 
-## Deploy Your Own
+- [설치 및 실행](#설치-및-실행)
+- [설계](#설계)
+- [사용 기술](#사용-기술)
+- [트러블 슈팅](#트러블슈팅)
 
-Deploy your own Create React App project with Vercel.
+---
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/vercel/tree/main/examples/create-react-app&template=create-react-app)
+## 설치 및 실행
 
-_Live Example: https://create-react-template.vercel.app/_
+`npm start`
+프로젝트 루트 폴더에서 실행합니다.
 
-## Available Scripts
+## 설계
 
-In the project directory, you can run:
+> 메인 화면에는 오늘의 작품이 보이고, 최근목록페이지로 이동하면 최근 4일간의 작품이 보입니다. 최근 작품 중 하나를 클릭하면 메인화면과 동일한 구성의 화면이 보입니다.
 
-### `npm start`
+![메인](./public/page1.png)
 
-Runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+<!-- ![최근미술작품](./public/page2.png) -->
 
-The page will reload when you make changes. You may also see any lint errors in the console.
+### 사용하는 API : [메트로폴리탄 미술관 API](https://metmuseum.github.io/)
 
-### `npm test`
+> 미술작품의 id 기준으로 데이터를 불러오며, 올해의 날짜는 하나의 id와 매핑됩니다.
 
-Launches the test runner in the interactive watch mode. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## 사용 기술
 
-### `npm run build`
+- React
+- Tailwindcss
+- CRA
+- Typescript
+- react-query
 
-Builds the app for production to the `build` folder.
+## 트러블슈팅
 
-It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
+### 해싱
+
+#### **초기 해싱 아이디어**
+
+- 미술작품은 최대값이 871891인 object id를 가진다.
+- 1년 동안에는 unique hash 값을 가지도록 하자.
+- 오늘의 날짜를 토대로 6자리 hash 값을 뽑아내자.
+
+#### **초기 아이디어의 문제점**
+
+- object id가 6자리가 아닌 미술작품은 절대 나오지 않는다.
+- object id는 연속함수가 아니다. 즉, 뽑아낸 hash값이 object id중에 없을 수도 있다.
+- 설명, 정보가 부실한 작품이 나올 수도 있다.
+  - 퍼블릭 도메인이 아니라면 이미지를 제공하지 못할수도 있다. 즉, 유명한 작품이어도 이미지가 나오지 않는 사진이 있다!(isPublicDomain,hasImages 속성으로 필터링 가능)
+  - The API (RESTful web service in JSON format) gives access to all of The Met’s Open Access data and to corresponding high resolution images (JPEG format) that are in the public domain.(https://www.metmuseum.org/art/collection/search/437133)
+
+#### **api의 추가 문제점**
+
+- query string과 다른 항목 하나 조합만 허용하고, 조건 2개이상의 검색을 허용하지 않는다.
+
+#### **대안**
+
+- 랜덤함수를 통해 404 뜨면 재탐색해서 불러오는 방식으로 처리한다. -> 그렇게 되면 오늘의 작품이라기보단 사이트에 접속할 때마다 결과가 달라진다.
+- 날짜별로 적절한 object id를 필터링해두고 curation하는 방식으로 변경한다. -> 노가다이긴 하지만 괜찮은 미술작품을 필터링할 수 있다.
+
+#### **장기 대안**
+
+- DB에 valid artwork의 집합을 만들어두고 그 안에서 랜덤성을 가지게 하기

package.json

@@ -1,19 +1,33 @@
 {
+  "name": "artworks",
+  "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@headlessui/react": "^1.6.1",
+    "@heroicons/react": "^1.0.6",
+    "react-icons": "^4.3.1",
+    "react-query": "^3.38.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^16.11.29",
+    "@types/react": "^18.0.7",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",
-    "web-vitals": "^2.1.3"
+    "typescript": "^4.6.3",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint -c .eslintrc.js --ext .js,.jsx,.ts,.tsx .",
+    "lint:fix": "npm run lint -- --fix"
   },
   "eslintConfig": {
     "extends": [
@@ -32,5 +46,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^9",
+    "eslint": "^5.12.0",
+    "postcss": "^7",
+    "prettier": "2.6.2",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   }
 }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  };
+

public/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

public/index.html

@@ -2,42 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <meta name="description" content="오늘의 작품과 함께 하세요!" />
+    <link href="./globals.css" rel="stylesheet" />
+    <title>Today's Artwork</title>
   </head>
-  <body>
+
+  <body class="bg-stone-900">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

src/App.css

@@ -1,38 +1,3 @@
 .App {
   text-align: center;
 }
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import "./App.css";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactQueryDevtools } from "react-query/devtools";
+import NavigationBar from "./component/NavigationBar";
+import Artwork from "./component/Artwork";
+
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <div className="App">
+      <QueryClientProvider client={queryClient}>
+        <NavigationBar />
+        <Artwork />
+        {/* <ReactQueryDevtools initialIsOpen={false} /> */}
+      </QueryClientProvider>
+    </div>
+  );
+}
+
+export default App;