From 9ae2c3c2ce9d7d80d990c3bf4d3611fe6f2a3045 Mon Sep 17 00:00:00 2001 From: HeesuKim0203 Date: Tue, 19 Dec 2023 16:32:32 +0900 Subject: [PATCH 1/5] Convert javascript -> typescript --- package-lock.json | 214 +++++++++++++++++- package.json | 7 +- src/Components/{App.js => App.tsx} | 0 src/Components/{Error.js => Error.tsx} | 0 .../{FixedMenu.js => FixedMenu.tsx} | 0 .../{GlobalSytles.js => GlobalSytles.tsx} | 0 src/Components/{Header.js => Header.tsx} | 0 src/Components/{Loader.js => Loader.tsx} | 0 src/Components/{Poster.js => Poster.tsx} | 0 src/Components/{Router.js => Router.tsx} | 2 +- src/Components/{Section.js => Section.tsx} | 0 ...DetailContainer.js => DetailContainer.tsx} | 0 ...DetailPresenter.js => DetailPresenter.tsx} | 0 src/Routes/Detail/{index.js => index.tsx} | 0 .../{HomeContainer.js => HomeContainer.tsx} | 0 .../{HomePresenter.js => HomePresenter.tsx} | 0 src/Routes/Home/{index.js => index.tsx} | 0 ...SearchContainer.js => SearchContainer.tsx} | 0 ...SearchPresenter.js => SearchPresenter.tsx} | 0 src/Routes/Search/{index.js => index.tsx} | 0 .../Tv/{TVContainer.js => TVContainer.tsx} | 0 .../Tv/{TVPresenter.js => TVPresenter.tsx} | 0 src/Routes/Tv/{index.js => index.tsx} | 0 src/{api.js => api.ts} | 0 src/{index.js => index.tsx} | 0 src/{theme.js => theme.ts} | 6 +- tsconfig.json | 109 +++++++++ 27 files changed, 327 insertions(+), 11 deletions(-) rename src/Components/{App.js => App.tsx} (100%) rename src/Components/{Error.js => Error.tsx} (100%) rename src/Components/{FixedMenu.js => FixedMenu.tsx} (100%) rename src/Components/{GlobalSytles.js => GlobalSytles.tsx} (100%) rename src/Components/{Header.js => Header.tsx} (100%) rename src/Components/{Loader.js => Loader.tsx} (100%) rename src/Components/{Poster.js => Poster.tsx} (100%) rename src/Components/{Router.js => Router.tsx} (93%) rename src/Components/{Section.js => Section.tsx} (100%) rename src/Routes/Detail/{DetailContainer.js => DetailContainer.tsx} (100%) rename src/Routes/Detail/{DetailPresenter.js => DetailPresenter.tsx} (100%) rename src/Routes/Detail/{index.js => index.tsx} (100%) rename src/Routes/Home/{HomeContainer.js => HomeContainer.tsx} (100%) rename src/Routes/Home/{HomePresenter.js => HomePresenter.tsx} (100%) rename src/Routes/Home/{index.js => index.tsx} (100%) rename src/Routes/Search/{SearchContainer.js => SearchContainer.tsx} (100%) rename src/Routes/Search/{SearchPresenter.js => SearchPresenter.tsx} (100%) rename src/Routes/Search/{index.js => index.tsx} (100%) rename src/Routes/Tv/{TVContainer.js => TVContainer.tsx} (100%) rename src/Routes/Tv/{TVPresenter.js => TVPresenter.tsx} (100%) rename src/Routes/Tv/{index.js => index.tsx} (100%) rename src/{api.js => api.ts} (100%) rename src/{index.js => index.tsx} (100%) rename src/{theme.js => theme.ts} (71%) create mode 100644 tsconfig.json diff --git a/package-lock.json b/package-lock.json index 75ec2dc..bb060d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "movie-app", + "name": "search-movie", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "movie-app", + "name": "search-movie", "version": "0.1.0", "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.34", @@ -14,6 +14,10 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "@types/jest": "^29.5.11", + "@types/node": "^20.10.5", + "@types/react": "^18.2.45", + "@types/react-dom": "^18.2.18", "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -23,7 +27,8 @@ "react-scripts": "^5.0.1", "styled-components": "^5.1.1", "styled-reset": "^4.2.0", - "swiper": "^6.5.0" + "swiper": "^6.5.0", + "typescript": "^5.3.3" }, "devDependencies": { "gh-pages": "^6.1.0" @@ -2857,6 +2862,25 @@ "@types/yargs-parser": "*" } }, + "node_modules/@jest/expect-utils": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz", + "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==", + "dependencies": { + "jest-get-type": "^29.6.3" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@jest/expect-utils/node_modules/jest-get-type": { + "version": "29.6.3", + "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz", + "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==", + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, "node_modules/@jest/fake-timers": { "version": "27.5.1", "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.5.1.tgz", @@ -4156,6 +4180,181 @@ "@types/istanbul-lib-report": "*" } }, + "node_modules/@types/jest": { + "version": "29.5.11", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.11.tgz", + "integrity": "sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==", + "dependencies": { + "expect": "^29.0.0", + "pretty-format": "^29.0.0" + } + }, + "node_modules/@types/jest/node_modules/@jest/schemas": { + "version": "29.6.3", + "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz", + "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==", + "dependencies": { + "@sinclair/typebox": "^0.27.8" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/@jest/types": { + "version": "29.6.3", + "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz", + "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==", + "dependencies": { + "@jest/schemas": "^29.6.3", + "@types/istanbul-lib-coverage": "^2.0.0", + "@types/istanbul-reports": "^3.0.0", + "@types/node": "*", + "@types/yargs": "^17.0.8", + "chalk": "^4.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/@sinclair/typebox": { + "version": "0.27.8", + "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", + "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==" + }, + "node_modules/@types/jest/node_modules/@types/istanbul-reports": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz", + "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==", + "dependencies": { + "@types/istanbul-lib-report": "*" + } + }, + "node_modules/@types/jest/node_modules/@types/yargs": { + "version": "17.0.32", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz", + "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==", + "dependencies": { + "@types/yargs-parser": "*" + } + }, + "node_modules/@types/jest/node_modules/ansi-styles": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", + "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@types/jest/node_modules/diff-sequences": { + "version": "29.6.3", + "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz", + "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==", + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/expect": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz", + "integrity": "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==", + "dependencies": { + "@jest/expect-utils": "^29.7.0", + "jest-get-type": "^29.6.3", + "jest-matcher-utils": "^29.7.0", + "jest-message-util": "^29.7.0", + "jest-util": "^29.7.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/jest-diff": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz", + "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==", + "dependencies": { + "chalk": "^4.0.0", + "diff-sequences": "^29.6.3", + "jest-get-type": "^29.6.3", + "pretty-format": "^29.7.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/jest-get-type": { + "version": "29.6.3", + "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz", + "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==", + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/jest-matcher-utils": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz", + "integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==", + "dependencies": { + "chalk": "^4.0.0", + "jest-diff": "^29.7.0", + "jest-get-type": "^29.6.3", + "pretty-format": "^29.7.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/jest-message-util": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz", + "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==", + "dependencies": { + "@babel/code-frame": "^7.12.13", + "@jest/types": "^29.6.3", + "@types/stack-utils": "^2.0.0", + "chalk": "^4.0.0", + "graceful-fs": "^4.2.9", + "micromatch": "^4.0.4", + "pretty-format": "^29.7.0", + "slash": "^3.0.0", + "stack-utils": "^2.0.3" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/jest-util": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz", + "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==", + "dependencies": { + "@jest/types": "^29.6.3", + "@types/node": "*", + "chalk": "^4.0.0", + "ci-info": "^3.2.0", + "graceful-fs": "^4.2.9", + "picomatch": "^2.2.3" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/@types/jest/node_modules/pretty-format": { + "version": "29.7.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz", + "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==", + "dependencies": { + "@jest/schemas": "^29.6.3", + "ansi-styles": "^5.0.0", + "react-is": "^18.0.0" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -16762,16 +16961,15 @@ } }, "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "peer": true, + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", + "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" }, "engines": { - "node": ">=4.2.0" + "node": ">=14.17" } }, "node_modules/unbox-primitive": { diff --git a/package.json b/package.json index 45c89b0..bc72c5a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,10 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", + "@types/jest": "^29.5.11", + "@types/node": "^20.10.5", + "@types/react": "^18.2.45", + "@types/react-dom": "^18.2.18", "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -19,7 +23,8 @@ "react-scripts": "^5.0.1", "styled-components": "^5.1.1", "styled-reset": "^4.2.0", - "swiper": "^6.5.0" + "swiper": "^6.5.0", + "typescript": "^5.3.3" }, "scripts": { "predeploy": "npm run build", diff --git a/src/Components/App.js b/src/Components/App.tsx similarity index 100% rename from src/Components/App.js rename to src/Components/App.tsx diff --git a/src/Components/Error.js b/src/Components/Error.tsx similarity index 100% rename from src/Components/Error.js rename to src/Components/Error.tsx diff --git a/src/Components/FixedMenu.js b/src/Components/FixedMenu.tsx similarity index 100% rename from src/Components/FixedMenu.js rename to src/Components/FixedMenu.tsx diff --git a/src/Components/GlobalSytles.js b/src/Components/GlobalSytles.tsx similarity index 100% rename from src/Components/GlobalSytles.js rename to src/Components/GlobalSytles.tsx diff --git a/src/Components/Header.js b/src/Components/Header.tsx similarity index 100% rename from src/Components/Header.js rename to src/Components/Header.tsx diff --git a/src/Components/Loader.js b/src/Components/Loader.tsx similarity index 100% rename from src/Components/Loader.js rename to src/Components/Loader.tsx diff --git a/src/Components/Poster.js b/src/Components/Poster.tsx similarity index 100% rename from src/Components/Poster.js rename to src/Components/Poster.tsx diff --git a/src/Components/Router.js b/src/Components/Router.tsx similarity index 93% rename from src/Components/Router.js rename to src/Components/Router.tsx index bec6bc7..5e4aa0b 100644 --- a/src/Components/Router.js +++ b/src/Components/Router.tsx @@ -5,7 +5,7 @@ import Home from '../Routes/Home' ; import Search from '../Routes/Search' ; import Tv from '../Routes/Tv' ; import Detail from '../Routes/Detail' -import FixedMenu from '../Components/FixedMenu' ; +import FixedMenu from './FixedMenu' ; import Header from './Header' ; diff --git a/src/Components/Section.js b/src/Components/Section.tsx similarity index 100% rename from src/Components/Section.js rename to src/Components/Section.tsx diff --git a/src/Routes/Detail/DetailContainer.js b/src/Routes/Detail/DetailContainer.tsx similarity index 100% rename from src/Routes/Detail/DetailContainer.js rename to src/Routes/Detail/DetailContainer.tsx diff --git a/src/Routes/Detail/DetailPresenter.js b/src/Routes/Detail/DetailPresenter.tsx similarity index 100% rename from src/Routes/Detail/DetailPresenter.js rename to src/Routes/Detail/DetailPresenter.tsx diff --git a/src/Routes/Detail/index.js b/src/Routes/Detail/index.tsx similarity index 100% rename from src/Routes/Detail/index.js rename to src/Routes/Detail/index.tsx diff --git a/src/Routes/Home/HomeContainer.js b/src/Routes/Home/HomeContainer.tsx similarity index 100% rename from src/Routes/Home/HomeContainer.js rename to src/Routes/Home/HomeContainer.tsx diff --git a/src/Routes/Home/HomePresenter.js b/src/Routes/Home/HomePresenter.tsx similarity index 100% rename from src/Routes/Home/HomePresenter.js rename to src/Routes/Home/HomePresenter.tsx diff --git a/src/Routes/Home/index.js b/src/Routes/Home/index.tsx similarity index 100% rename from src/Routes/Home/index.js rename to src/Routes/Home/index.tsx diff --git a/src/Routes/Search/SearchContainer.js b/src/Routes/Search/SearchContainer.tsx similarity index 100% rename from src/Routes/Search/SearchContainer.js rename to src/Routes/Search/SearchContainer.tsx diff --git a/src/Routes/Search/SearchPresenter.js b/src/Routes/Search/SearchPresenter.tsx similarity index 100% rename from src/Routes/Search/SearchPresenter.js rename to src/Routes/Search/SearchPresenter.tsx diff --git a/src/Routes/Search/index.js b/src/Routes/Search/index.tsx similarity index 100% rename from src/Routes/Search/index.js rename to src/Routes/Search/index.tsx diff --git a/src/Routes/Tv/TVContainer.js b/src/Routes/Tv/TVContainer.tsx similarity index 100% rename from src/Routes/Tv/TVContainer.js rename to src/Routes/Tv/TVContainer.tsx diff --git a/src/Routes/Tv/TVPresenter.js b/src/Routes/Tv/TVPresenter.tsx similarity index 100% rename from src/Routes/Tv/TVPresenter.js rename to src/Routes/Tv/TVPresenter.tsx diff --git a/src/Routes/Tv/index.js b/src/Routes/Tv/index.tsx similarity index 100% rename from src/Routes/Tv/index.js rename to src/Routes/Tv/index.tsx diff --git a/src/api.js b/src/api.ts similarity index 100% rename from src/api.js rename to src/api.ts diff --git a/src/index.js b/src/index.tsx similarity index 100% rename from src/index.js rename to src/index.tsx diff --git a/src/theme.js b/src/theme.ts similarity index 71% rename from src/theme.js rename to src/theme.ts index fbf3feb..a40ed8c 100644 --- a/src/theme.js +++ b/src/theme.ts @@ -6,7 +6,11 @@ export const size = { mobileS : 468 } -const theme = {} ; +type Theme = { + [key in keyof T] : string +} + +const theme = {} as Theme ; for( const key in size ) { theme[key] = `(max-width : ${size[key]}px)` ; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..e075f97 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,109 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ + // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ + // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ + // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + // "outDir": "./", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + } +} From 6b770d37e22998ffcc08619440e553b9dfbf2ce8 Mon Sep 17 00:00:00 2001 From: HeesuKim0203 Date: Tue, 19 Dec 2023 17:29:29 +0900 Subject: [PATCH 2/5] project version update --- package-lock.json | 33 +++++++++--- package.json | 17 +++--- src/theme.ts | 16 +++--- tsconfig.json | 131 +++++++++------------------------------------- 4 files changed, 66 insertions(+), 131 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb060d6..5f745a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,10 +14,6 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", - "@types/jest": "^29.5.11", - "@types/node": "^20.10.5", - "@types/react": "^18.2.45", - "@types/react-dom": "^18.2.18", "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -27,11 +23,15 @@ "react-scripts": "^5.0.1", "styled-components": "^5.1.1", "styled-reset": "^4.2.0", - "swiper": "^6.5.0", - "typescript": "^5.3.3" + "swiper": "^6.5.0" }, "devDependencies": { - "gh-pages": "^6.1.0" + "@types/jest": "^29.5.11", + "@types/node": "^20.10.5", + "@types/react": "^18.2.45", + "@types/react-dom": "^18.2.18", + "gh-pages": "^6.1.0", + "typescript": "^5.2.2" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -2866,6 +2866,7 @@ "version": "29.7.0", "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz", "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==", + "dev": true, "dependencies": { "jest-get-type": "^29.6.3" }, @@ -2877,6 +2878,7 @@ "version": "29.6.3", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz", "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==", + "dev": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -4184,6 +4186,7 @@ "version": "29.5.11", "resolved": "https://registry.npmjs.org/@types/jest/-/jest-29.5.11.tgz", "integrity": "sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==", + "dev": true, "dependencies": { "expect": "^29.0.0", "pretty-format": "^29.0.0" @@ -4193,6 +4196,7 @@ "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz", "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==", + "dev": true, "dependencies": { "@sinclair/typebox": "^0.27.8" }, @@ -4204,6 +4208,7 @@ "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz", "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==", + "dev": true, "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -4219,12 +4224,14 @@ "node_modules/@types/jest/node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", - "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==" + "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==", + "dev": true }, "node_modules/@types/jest/node_modules/@types/istanbul-reports": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz", "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==", + "dev": true, "dependencies": { "@types/istanbul-lib-report": "*" } @@ -4233,6 +4240,7 @@ "version": "17.0.32", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz", "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==", + "dev": true, "dependencies": { "@types/yargs-parser": "*" } @@ -4241,6 +4249,7 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", + "dev": true, "engines": { "node": ">=10" }, @@ -4252,6 +4261,7 @@ "version": "29.6.3", "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz", "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==", + "dev": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -4260,6 +4270,7 @@ "version": "29.7.0", "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz", "integrity": "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==", + "dev": true, "dependencies": { "@jest/expect-utils": "^29.7.0", "jest-get-type": "^29.6.3", @@ -4275,6 +4286,7 @@ "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz", "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==", + "dev": true, "dependencies": { "chalk": "^4.0.0", "diff-sequences": "^29.6.3", @@ -4289,6 +4301,7 @@ "version": "29.6.3", "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz", "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==", + "dev": true, "engines": { "node": "^14.15.0 || ^16.10.0 || >=18.0.0" } @@ -4297,6 +4310,7 @@ "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz", "integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==", + "dev": true, "dependencies": { "chalk": "^4.0.0", "jest-diff": "^29.7.0", @@ -4311,6 +4325,7 @@ "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz", "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==", + "dev": true, "dependencies": { "@babel/code-frame": "^7.12.13", "@jest/types": "^29.6.3", @@ -4330,6 +4345,7 @@ "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz", "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==", + "dev": true, "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -4346,6 +4362,7 @@ "version": "29.7.0", "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz", "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==", + "dev": true, "dependencies": { "@jest/schemas": "^29.6.3", "ansi-styles": "^5.0.0", diff --git a/package.json b/package.json index bc72c5a..e624449 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,6 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", - "@types/jest": "^29.5.11", - "@types/node": "^20.10.5", - "@types/react": "^18.2.45", - "@types/react-dom": "^18.2.18", "axios": "^1.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -23,8 +19,7 @@ "react-scripts": "^5.0.1", "styled-components": "^5.1.1", "styled-reset": "^4.2.0", - "swiper": "^6.5.0", - "typescript": "^5.3.3" + "swiper": "^6.5.0" }, "scripts": { "predeploy": "npm run build", @@ -50,6 +45,14 @@ ] }, "devDependencies": { - "gh-pages": "^6.1.0" + "gh-pages": "^6.1.0", + "@types/jest": "^29.5.11", + "@types/node": "^20.10.5", + "@types/react": "^18.2.45", + "@types/react-dom": "^18.2.18", + "typescript": "^5.2.2" + }, + "overrides": { + "typescript": "^5.2.2" } } diff --git a/src/theme.ts b/src/theme.ts index a40ed8c..6c93f17 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -6,14 +6,12 @@ export const size = { mobileS : 468 } -type Theme = { - [key in keyof T] : string -} - -const theme = {} as Theme ; - -for( const key in size ) { - theme[key] = `(max-width : ${size[key]}px)` ; -} +const theme = { + laptop : `(max-width : ${size.laptop}px)`, + tabletL : `(max-width : ${size.tabletL}px)`, + tabletS : `(max-width : ${size.tabletS}px)`, + mobileL : `(max-width : ${size.mobileL}px)`, + mobileS : `(max-width : ${size.mobileS}px)`, +} ; export default theme ; \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index e075f97..74caf0d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,109 +1,26 @@ { "compilerOptions": { - /* Visit https://aka.ms/tsconfig to read more about this file */ - - /* Projects */ - // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ - // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ - // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ - // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ - // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ - // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ - - /* Language and Environment */ - "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ - // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ - // "jsx": "preserve", /* Specify what JSX code is generated. */ - // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ - // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ - // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ - // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ - // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ - // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ - // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ - // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ - // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ - - /* Modules */ - "module": "commonjs", /* Specify what module code is generated. */ - // "rootDir": "./", /* Specify the root folder within your source files. */ - // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ - // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ - // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ - // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ - // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ - // "types": [], /* Specify type package names to be included without being referenced in a source file. */ - // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ - // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ - // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ - // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ - // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ - // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ - // "resolveJsonModule": true, /* Enable importing .json files. */ - // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ - // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ - - /* JavaScript Support */ - // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ - // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ - // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ - - /* Emit */ - // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ - // "declarationMap": true, /* Create sourcemaps for d.ts files. */ - // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ - // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ - // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ - // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ - // "outDir": "./", /* Specify an output folder for all emitted files. */ - // "removeComments": true, /* Disable emitting comments. */ - // "noEmit": true, /* Disable emitting files from a compilation. */ - // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ - // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types. */ - // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ - // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ - // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ - // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ - // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ - // "newLine": "crlf", /* Set the newline character for emitting files. */ - // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ - // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ - // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ - // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ - // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ - // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ - - /* Interop Constraints */ - // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ - // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ - // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ - "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ - // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ - "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ - - /* Type Checking */ - "strict": true, /* Enable all strict type-checking options. */ - // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ - // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ - // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ - // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ - // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ - // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ - // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ - // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ - // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ - // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ - // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ - // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ - // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ - // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ - // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ - // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ - // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ - // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ - - /* Completeness */ - // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ - "skipLibCheck": true /* Skip type checking all .d.ts files. */ - } -} + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} \ No newline at end of file From 854bb841694c30442d5176a911b767ef62ba5b79 Mon Sep 17 00:00:00 2001 From: HeesuKim0203 Date: Wed, 20 Dec 2023 16:28:10 +0900 Subject: [PATCH 3/5] type setting -> any --- package-lock.json | 60 ++++++++++++++++++++ package.json | 5 +- src/Components/Error.tsx | 7 ++- src/Components/FixedMenu.tsx | 6 +- src/Components/Header.tsx | 16 +++--- src/Components/Poster.tsx | 53 +++++++++++------- src/Components/Router.tsx | 30 +++++----- src/Components/Section.tsx | 7 ++- src/Routes/Detail/DetailContainer.tsx | 49 +++++++++++++--- src/Routes/Detail/DetailPresenter.tsx | 81 ++++++++++++++++----------- src/Routes/Home/HomeContainer.tsx | 25 ++++----- src/Routes/Home/HomePresenter.tsx | 19 +++++-- src/Routes/Search/SearchContainer.tsx | 18 +++--- src/Routes/Search/SearchPresenter.tsx | 17 +++++- src/Routes/Tv/TVContainer.tsx | 10 ++-- src/Routes/Tv/TVPresenter.tsx | 19 +++++-- src/api.ts | 12 ++-- src/index.tsx | 4 +- 18 files changed, 305 insertions(+), 133 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5f745a6..f92e3f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,9 @@ "@types/node": "^20.10.5", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", + "@types/react-helmet": "^6.1.11", + "@types/react-router-dom": "^5.3.3", + "@types/styled-components": "^5.1.34", "gh-pages": "^6.1.0", "typescript": "^5.2.2" } @@ -4142,6 +4145,22 @@ "@types/node": "*" } }, + "node_modules/@types/history": { + "version": "4.7.11", + "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz", + "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==", + "dev": true + }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dev": true, + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -4451,6 +4470,36 @@ "@types/react": "*" } }, + "node_modules/@types/react-helmet": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz", + "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-router": { + "version": "5.1.20", + "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz", + "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==", + "dev": true, + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz", + "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==", + "dev": true, + "dependencies": { + "@types/history": "^4.7.11", + "@types/react": "*", + "@types/react-router": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -4514,6 +4563,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz", "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==" }, + "node_modules/@types/styled-components": { + "version": "5.1.34", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz", + "integrity": "sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/testing-library__dom": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-7.5.0.tgz", diff --git a/package.json b/package.json index e624449..9355e81 100644 --- a/package.json +++ b/package.json @@ -45,11 +45,14 @@ ] }, "devDependencies": { - "gh-pages": "^6.1.0", "@types/jest": "^29.5.11", "@types/node": "^20.10.5", "@types/react": "^18.2.45", "@types/react-dom": "^18.2.18", + "@types/react-helmet": "^6.1.11", + "@types/react-router-dom": "^5.3.3", + "@types/styled-components": "^5.1.34", + "gh-pages": "^6.1.0", "typescript": "^5.2.2" }, "overrides": { diff --git a/src/Components/Error.tsx b/src/Components/Error.tsx index a8a40d5..a33b60a 100644 --- a/src/Components/Error.tsx +++ b/src/Components/Error.tsx @@ -13,7 +13,12 @@ const Text = styled.span` font-weight : 500 ; `; -const Error = ({ text, color }) => ( +type ErrorProps = { + text : string + color : string +} + +const Error = ({ text, color } : ErrorProps) => ( {text} diff --git a/src/Components/FixedMenu.tsx b/src/Components/FixedMenu.tsx index 837593e..927af5b 100644 --- a/src/Components/FixedMenu.tsx +++ b/src/Components/FixedMenu.tsx @@ -15,7 +15,7 @@ const Container = styled.div` const FixedMenu = () => { - function onClickScrollTop(e) { + function onClickScrollTop(event : React.MouseEvent) { window.scroll({ behavior : 'smooth', top : 0 @@ -23,8 +23,8 @@ const FixedMenu = () => { } return ( - - + + ); }; diff --git a/src/Components/Header.tsx b/src/Components/Header.tsx index 227bd8c..ab3560a 100644 --- a/src/Components/Header.tsx +++ b/src/Components/Header.tsx @@ -25,11 +25,11 @@ const List = styled.ul` display : flex ; ` ; -const Item = styled.li` +const Item = styled.li<{current : boolean}>` width : 80px ; height : 50px ; border-bottom : 4px solid - ${ props => props.current ? "#00695c" : "transparent" } ; + ${props => props.current ? "#00695c" : "transparent"} ; transition : border-bottom 0.4s ease-in-out ; @media ${props => props.theme.mobileS} { @@ -50,14 +50,14 @@ export default () => { return (
- - Movie + + Movie - - TV + + TV - - Search + + Search
diff --git a/src/Components/Poster.tsx b/src/Components/Poster.tsx index 55a28c5..e72e643 100644 --- a/src/Components/Poster.tsx +++ b/src/Components/Poster.tsx @@ -8,7 +8,7 @@ import { faStar } from '@fortawesome/free-solid-svg-icons' ; const Container = styled.div``; -const Image = styled.div` +const Image = styled.div<{ bgUrl : string }>` background-image : url(${props => props.bgUrl}) ; height : 180px ; background-size : cover ; @@ -57,25 +57,40 @@ const Year = styled.span` } `; -const Poster = ({ id, imageUrl, title, rating, year, isMovie = false, idList }) => - { + + const linkTo = { pathname : isMovie ? `/movie/${id}` : `/show/${id}`, - state : { idList } - }} > - - - - - -   {rating} / 10 - - - {title.length > 18 ? `${title.substring(0, 18)}...` : title} - {year} - - - ; + state : idList + } ; + + return ( + + + + + + +   {rating} / 10 + + + {title.length > 18 ? `${title.substring(0, 18)}...` : title} + {year} + + + ) ; +} ; Poster.propTypes = { imageUrl : PropTypes.string.isRequired, diff --git a/src/Components/Router.tsx b/src/Components/Router.tsx index 5e4aa0b..8c72d57 100644 --- a/src/Components/Router.tsx +++ b/src/Components/Router.tsx @@ -1,5 +1,5 @@ import React from 'react' ; -import { BrowserRouter, Route, Routes } from 'react-router-dom' ; +import { BrowserRouter, Route, Routes, Router, useLocation } from 'react-router-dom' ; import Home from '../Routes/Home' ; import Search from '../Routes/Search' ; @@ -9,16 +9,18 @@ import FixedMenu from './FixedMenu' ; import Header from './Header' ; -export default () => ( - -
- - } /> - } /> - } /> - } /> - } /> - - - -) ; \ No newline at end of file +export default () => { + return ( + +
+ + } /> + } /> + } /> + } /> + } /> + + + + ) ; +} ; \ No newline at end of file diff --git a/src/Components/Section.tsx b/src/Components/Section.tsx index 6ba2104..27660c2 100644 --- a/src/Components/Section.tsx +++ b/src/Components/Section.tsx @@ -29,7 +29,12 @@ const Grid = styled.div` } ` ; -const Section = ({ title, children }) => ( +type SectionProps = { + title : string + children : React.ReactNode[] +} + +const Section = ({ title, children } : SectionProps) => ( { title } { children } diff --git a/src/Routes/Detail/DetailContainer.tsx b/src/Routes/Detail/DetailContainer.tsx index f0cd4b5..c58933b 100644 --- a/src/Routes/Detail/DetailContainer.tsx +++ b/src/Routes/Detail/DetailContainer.tsx @@ -1,9 +1,42 @@ import React, { Component, memo } from 'react' ; import DetailPresenter from './DetailPresenter' ; import { MoviesApi, TVApi } from '../../api'; +import { useLocation } from 'react-router'; -export default memo(class DetailContaniner extends Component { - constructor(props) { +type DetailContaninerProps = { + location : { + pathname : string + state : { + idList : number[] + } + } +} + +type State = { + loading : boolean + error : string | null + isMovie : boolean + slideLoadData : any +} + +export default memo(() => { + + const locationData = useLocation() ; + const location = { + pathname : locationData.pathname, + state : locationData.state + } ; + + return +}) + + +class DetailContaniner extends Component { + + idList : number[] ; + state : State ; + + constructor(props : DetailContaninerProps) { super(props) ; const { location : { @@ -22,7 +55,7 @@ export default memo(class DetailContaniner extends Component { } ; } - getDataNotAsyncMovie = id => { + getDataNotAsyncMovie = (id : number) => { MoviesApi.movieDetail(id).then((e) => { const { data } = e ; @@ -44,7 +77,7 @@ export default memo(class DetailContaniner extends Component { return ; } - getDataNotAsyncTV = (id) => { + getDataNotAsyncTV = (id : number) => { TVApi.showDetail(id).then((e) => { const { data } = e ; @@ -74,7 +107,7 @@ export default memo(class DetailContaniner extends Component { params : { id } }, history : { push } - } = this.props ; + } = this.props as any ; const parseId = parseInt(id) ; @@ -103,11 +136,11 @@ export default memo(class DetailContaniner extends Component { slideLoadData : [ ...slideLoadData, dataObj ], }) ; - const indexId = idList.findIndex(idData => idData === Number(parseId)) + const indexId = idList.findIndex((idData : number) => idData === Number(parseId)) idList.splice(indexId, 1) ; for(let i = 0 ; i < idList.length ; i++) { - this.getDataNotAsyncMovie(idList[i], id) ; + this.getDataNotAsyncMovie(idList[i]) ; } @@ -173,4 +206,4 @@ export default memo(class DetailContaniner extends Component { /> ) ; } ; -}) \ No newline at end of file +} \ No newline at end of file diff --git a/src/Routes/Detail/DetailPresenter.tsx b/src/Routes/Detail/DetailPresenter.tsx index 7d99990..6456621 100644 --- a/src/Routes/Detail/DetailPresenter.tsx +++ b/src/Routes/Detail/DetailPresenter.tsx @@ -54,7 +54,7 @@ const VideoContainer = styled.div` } `; -const Backdrop = styled.div` +const Backdrop = styled.div<{ bgImage : string }>` position : absolute ; top : 0 ; left : 0 ; @@ -68,7 +68,7 @@ const Backdrop = styled.div` opacity : 0.5 ; `; -const Data = styled.div` +const Data = styled.div<{ backgroundColor : string, display : string }>` width : 50% ; margin-left : 10px ; position : absolute ; @@ -92,7 +92,7 @@ const Data = styled.div` } `; -const Cover = styled.div` +const Cover = styled.div<{ bgImage : string }>` width : 40% ; height : 100% ; background-image : url(${props => props.bgImage}) ; @@ -165,7 +165,7 @@ const OverView = styled.p` } `; -const Video = styled.iframe` +const Video = styled.iframe<{ src : string, frameborder : string, allowfullscreen : boolean }>` width : 100% ; height : 100% ; `; @@ -223,7 +223,7 @@ const LogoImageWrapper = styled.div` float : left ; `; -const LogoImage = styled.div` +const LogoImage = styled.div<{ bgImage : string }>` margin-top : 20px ; width : 70px ; @@ -245,11 +245,17 @@ const LogoImage = styled.div` } `; +type DetailPresenterProps = { + slideLoadData : any + loading : any + error : any +} + const DetailPresenter = ({ slideLoadData, loading, error - }) => { + } : DetailPresenterProps) => { const { mobileS } = size ; const [ mode468px, setMode468px ] = useState(false) ; @@ -257,31 +263,31 @@ const DetailPresenter = ({ const [ touchMove, setTouchMove ] = useState(false) ; const [ touchMoveData, setTouchMoveData ] = useState(false) ; - function touchMoveInit(e) { + function touchMoveInit(e : React.TouchEvent) { e.stopPropagation() ; setTouchMove(true) ; } - function touchMoveInitData(e) { + function touchMoveInitData(e : React.TouchEvent) { e.stopPropagation() ; setTouchMoveData(true) ; } - function clickCover(e) { + function clickCover(e : React.TouchEvent) { e.stopPropagation() ; touchMove ? setTouchMove(false) : setCss(true) ; } - function clickData(e) { + function clickData(e : React.TouchEvent) { e.stopPropagation() ; touchMoveData ? setTouchMoveData(false) : setCss(false) ; } - const viewContentNumCheck = innerWidth => { + const viewContentNumCheck = ( innerWidth : number ) => { if( innerWidth <= mobileS ) { setMode468px(true) ; setCss(false) ; @@ -291,8 +297,9 @@ const DetailPresenter = ({ } } - const onResize = (e) => { - const { currentTarget : { innerWidth } } = e ; + const onResize = (e : UIEvent) => { + const { currentTarget } = e ; + const { innerWidth } = currentTarget as any ; viewContentNumCheck(innerWidth) ; } @@ -321,7 +328,7 @@ const DetailPresenter = ({ spaceBetween = { 30 } onSlideChangeTransitionStart = { () => { if(mode468px) setCss(false) } } > - { slideLoadData && slideLoadData.map(( data, index ) => { + { slideLoadData && slideLoadData.map(( data : any, index : number ) => { const { result, resultRent } = data ; let canSee = null ; @@ -335,7 +342,7 @@ const DetailPresenter = ({ } return ( - + mode468px ? clickCover(e) : null } > mode468px ? clickData(e) : null } > {result.original_title ? result.original_title : result.original_name} @@ -365,16 +372,17 @@ const DetailPresenter = ({ {result.runtime ? result.runtime - : result.episode_run_time}분 + : result.episode_run_time}min . - {result.genres && - result.genres.map((genre, index) => - index === result.genres.length - 1 ? - genre.name - : `${genre.name} / ` - )} + { + result.genres!.map((genre : any, index : number) => + index === result.genres.length - 1 ? + genre.name + : `${genre.name} / ` + ) + } {result.overview} @@ -391,19 +399,28 @@ const DetailPresenter = ({ { mode468px ? null : } - { mode468px ? - : null } + { mode468px ? ( + + ) : ( + + + )} { error && } diff --git a/src/Routes/Home/HomeContainer.tsx b/src/Routes/Home/HomeContainer.tsx index d26ef99..fd9d0f8 100644 --- a/src/Routes/Home/HomeContainer.tsx +++ b/src/Routes/Home/HomeContainer.tsx @@ -4,15 +4,14 @@ import { MoviesApi } from '../../api' ; export default class extends Component { state = { - nowPlaying : null, - upcoming : null, - popular : null, - error : null, + nowPlaying : [], + upcoming : [], + popular : [], + error : "", loading : true, - nowPlayingIdList : null, - upcomingIdLlist : null, - popularIdList : null, - + nowPlayingIdList : [], + upcomingIdLlist : [], + popularIdList : [], } ; async componentDidMount() { @@ -48,8 +47,8 @@ export default class extends Component { } } ; - setIdArr = arr => { - return arr.map(data => data.id) ; + setIdArr = (arr : any) => { + return arr.map((data : any) => data.id) ; } render() { @@ -66,14 +65,14 @@ export default class extends Component { return ( ) ; } ; diff --git a/src/Routes/Home/HomePresenter.tsx b/src/Routes/Home/HomePresenter.tsx index 59572cf..b5ca650 100644 --- a/src/Routes/Home/HomePresenter.tsx +++ b/src/Routes/Home/HomePresenter.tsx @@ -12,6 +12,17 @@ const Container = styled.div` padding : 20px ; `; +type HomePresenterProps = { + nowPlaying : any + upcoming : any + popular : any + error : any + loading : any + nowPlayingIdList : any + upcomingIdLlist : any + popularIdList : any +} + const HomePresenter = ({ nowPlaying, upcoming, @@ -20,7 +31,7 @@ const HomePresenter = ({ loading, nowPlayingIdList, upcomingIdLlist, - popularIdList }) => + popularIdList } : HomePresenterProps) => (<> Movie | Search Media @@ -29,7 +40,7 @@ const HomePresenter = ({ { nowPlaying && nowPlaying.length > 0 && (
- { nowPlaying.map(movie => ( + { nowPlaying.map((movie : any) => ( 0 && (
- { popular.map(movie => ( + { popular.map((movie : any) => ( 0 && (
- { upcoming.map(movie => ( + { upcoming.map((movie : any) => ( { + updateTerm = (e : any) => { const { value } = e.currentTarget ; this.setState({ searchTerm : value }) ; } - handleSubmit = (e) => { + handleSubmit = (e : any) => { e.preventDefault() ; const { searchTerm } = this.state ; if(searchTerm !== '') { @@ -52,8 +52,8 @@ export default class SearchContainer extends Component { } } - setIdArr = arr => { - return arr.map(data => data.id) ; + setIdArr = (arr : any) => { + return arr.map((data : any) => data.id) ; } render() { diff --git a/src/Routes/Search/SearchPresenter.tsx b/src/Routes/Search/SearchPresenter.tsx index 3633adb..3847bc3 100644 --- a/src/Routes/Search/SearchPresenter.tsx +++ b/src/Routes/Search/SearchPresenter.tsx @@ -23,6 +23,17 @@ const Input = styled.input` width : 100% ; `; +type SearchPresenterProps = { + movieResultsIdList : any + showResultsIdList : any + movieResults : any + showResults : any + loading : any + error : any + handleSubmit : any + updateTerm : any +} + const SearchPresenter = ({ movieResultsIdList, showResultsIdList, @@ -31,7 +42,7 @@ const SearchPresenter = ({ loading, error, handleSubmit, - updateTerm }) => ( + updateTerm } : SearchPresenterProps) => ( Search | Search Media @@ -42,7 +53,7 @@ const SearchPresenter = ({ { loading ? : <> {movieResults && movieResults.length >0 &&
- {movieResults.map(movie => ( + {movieResults.map((movie : any) => ( } {showResults && showResults.length >0 &&
- {showResults.map(show => ( + {showResults.map((show : any) => ( { - return arr.map(data => data.id) ; + setIdArr = (arr : any) => { + return arr.map((data : any) => data.id) ; } render() { diff --git a/src/Routes/Tv/TVPresenter.tsx b/src/Routes/Tv/TVPresenter.tsx index bb21eb3..9ade700 100644 --- a/src/Routes/Tv/TVPresenter.tsx +++ b/src/Routes/Tv/TVPresenter.tsx @@ -12,6 +12,17 @@ const Container = styled.div` padding : 20px ; `; +type TVPresenterProps = { + topRatedIdList : any[] + popularIdList : any[] + airingTodayIdList : any[] + topRated : any + popular : any + airingToday : any + loading : any + error : any +} + const TVPresenter = ({ topRatedIdList, popularIdList, @@ -20,7 +31,7 @@ const TVPresenter = ({ popular, airingToday, loading, - error }) => ( + error } : TVPresenterProps) => ( <> TV | Search Media @@ -29,7 +40,7 @@ const TVPresenter = ({ { topRated && topRated.length > 0 && (
- {topRated.map(show => ( + {topRated.map((show : any) => ( 0 && (
- {popular.map(show => ( + {popular.map((show : any) => ( 0 && (
- {airingToday.map(show => ( + {airingToday.map((show : any) => ( api.get(`movie/now_playing?api_key=${KEY}&language=ja-JP`), upcoming : () => api.get(`movie/upcoming?api_key=${KEY}&language=ja-JP`), popular : () => api.get(`movie/popular?api_key=${KEY}&language=ja-JP`), - movieDetail : id => api.get(`movie/${id}?api_key=${KEY}&language=en-US&append_to_response=videos`), - getRent : id => api.get(`movie/${id}/watch/providers?api_key=${KEY}&language=ja-JP`), - search : trem => api.get(`search/movie?api_key=${KEY}&language=ja-JP&query=${encodeURIComponent(trem)}`) + movieDetail : (id : number) => api.get(`movie/${id}?api_key=${KEY}&language=en-US&append_to_response=videos`), + getRent : (id : number) => api.get(`movie/${id}/watch/providers?api_key=${KEY}&language=ja-JP`), + search : (trem : any) => api.get(`search/movie?api_key=${KEY}&language=ja-JP&query=${encodeURIComponent(trem)}`) } ; export const TVApi = { topRated : () => api.get(`tv/top_rated?api_key=${KEY}&language=ja-JP`), popular : () => api.get(`tv/popular?api_key=${KEY}&language=ja-JP`), airingToday : () => api.get(`tv/airing_today?api_key=${KEY}&language=ja-JP`), - showDetail : id => api.get(`tv/${id}?api_key=${KEY}&language=en-US&append_to_response=videos`), - getRent : id => api.get(`tv/${id}/watch/providers?api_key=${KEY}&language=ja-JP`), - search : trem => api.get(`search/tv?api_key=${KEY}&language=ja-JP&query=${encodeURIComponent(trem)}`) + showDetail : (id : number) => api.get(`tv/${id}?api_key=${KEY}&language=en-US&append_to_response=videos`), + getRent : (id : number) => api.get(`tv/${id}/watch/providers?api_key=${KEY}&language=ja-JP`), + search : (trem : any) => api.get(`search/tv?api_key=${KEY}&language=ja-JP&query=${encodeURIComponent(trem)}`) } ; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index b90c0b3..2994475 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -5,11 +5,11 @@ import { ThemeProvider } from 'styled-components' ; import theme from './theme' ; -const container = document.getElementById('root'); +const container = document.getElementById('root') as HTMLElement; const root = createRoot(container); root.render( - + ); From 098f29d9485c00f8aba7fff5a01bcebae90d0f30 Mon Sep 17 00:00:00 2001 From: HeesuKim0203 Date: Wed, 20 Dec 2023 17:26:16 +0900 Subject: [PATCH 4/5] Link to props update --- src/Components/Poster.tsx | 6 +- src/Routes/Detail/DetailContainer.tsx | 3 + src/Routes/Home/HomePresenter.tsx | 92 +++++++++++++-------------- 3 files changed, 53 insertions(+), 48 deletions(-) diff --git a/src/Components/Poster.tsx b/src/Components/Poster.tsx index e72e643..e057b43 100644 --- a/src/Components/Poster.tsx +++ b/src/Components/Poster.tsx @@ -64,16 +64,18 @@ type PosterProps = { rating : number year : string isMovie? : boolean - idList : number[] + idList : any } const Poster = ({ id, imageUrl, title, rating, year, isMovie = false, idList } : PosterProps) => { const linkTo = { pathname : isMovie ? `/movie/${id}` : `/show/${id}`, - state : idList + state : { idList } } ; + console.log(linkTo) + return ( diff --git a/src/Routes/Detail/DetailContainer.tsx b/src/Routes/Detail/DetailContainer.tsx index c58933b..35ba8fa 100644 --- a/src/Routes/Detail/DetailContainer.tsx +++ b/src/Routes/Detail/DetailContainer.tsx @@ -22,6 +22,9 @@ type State = { export default memo(() => { const locationData = useLocation() ; + + console.log(locationData) ; + const location = { pathname : locationData.pathname, state : locationData.state diff --git a/src/Routes/Home/HomePresenter.tsx b/src/Routes/Home/HomePresenter.tsx index b5ca650..92418a6 100644 --- a/src/Routes/Home/HomePresenter.tsx +++ b/src/Routes/Home/HomePresenter.tsx @@ -5,7 +5,7 @@ import Helmet from 'react-helmet' ; import Section from '../../Components/Section' ; import Loader from '../../Components/Loader' ; -import Error from '../../Components/Error'; +import Error from '../../Components/Error' ; import Poster from '../../Components/Poster' ; const Container = styled.div` @@ -38,53 +38,53 @@ const HomePresenter = ({ { loading ? : ( - { nowPlaying && nowPlaying.length > 0 && ( -
- { nowPlaying.map((movie : any) => ( - - ))} -
+ { nowPlaying!.length > 0 && ( +
+ { nowPlaying.map((movie : any) => ( + + ))} +
)} - { popular && popular.length > 0 && ( -
- { popular.map((movie : any) => ( - - ))} -
+ { popular!.length > 0 && ( +
+ { popular.map((movie : any) => ( + + ))} +
)} - { upcoming && upcoming.length > 0 && ( -
- { upcoming.map((movie : any) => ( - - ))} -
+ { upcoming!.length > 0 && ( +
+ { upcoming.map((movie : any) => ( + + ))} +
)} { error && } )} From d83701fbe89980565fc5c76f151bfe7063f5a805 Mon Sep 17 00:00:00 2001 From: HeesuKim0203 Date: Wed, 20 Dec 2023 22:16:45 +0900 Subject: [PATCH 5/5] detail page design update --- src/Components/Loader.tsx | 6 +- src/Components/Poster.tsx | 16 +-- src/Routes/Detail/DetailContainer.tsx | 65 ++++----- src/Routes/Detail/DetailPresenter.tsx | 195 +++++++++++++++----------- src/Routes/Home/HomePresenter.tsx | 16 +-- src/Routes/Search/SearchContainer.tsx | 4 +- src/Routes/Search/SearchPresenter.tsx | 14 +- src/Routes/Tv/TVContainer.tsx | 8 +- src/Routes/Tv/TVPresenter.tsx | 16 +-- 9 files changed, 175 insertions(+), 165 deletions(-) diff --git a/src/Components/Loader.tsx b/src/Components/Loader.tsx index 8d2469d..b6b46b0 100644 --- a/src/Components/Loader.tsx +++ b/src/Components/Loader.tsx @@ -5,11 +5,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ; import { faSpinner } from '@fortawesome/free-solid-svg-icons' ; const Container = styled.div` - height : 100vh ; - width : 100vw ; + height : 95vh ; + width : 95vw ; display : flex ; justify-content : center ; - margin-top : 40px ; + padding-top : 50px ; `; export default () => ( diff --git a/src/Components/Poster.tsx b/src/Components/Poster.tsx index e057b43..8e9420f 100644 --- a/src/Components/Poster.tsx +++ b/src/Components/Poster.tsx @@ -64,27 +64,21 @@ type PosterProps = { rating : number year : string isMovie? : boolean - idList : any + idList : number[] } const Poster = ({ id, imageUrl, title, rating, year, isMovie = false, idList } : PosterProps) => { - - const linkTo = { - pathname : isMovie ? `/movie/${id}` : `/show/${id}`, - state : { idList } - } ; - - console.log(linkTo) - return ( - + -   {rating} / 10 +   { `${rating.toFixed(1)} / 10` } {title.length > 18 ? `${title.substring(0, 18)}...` : title} diff --git a/src/Routes/Detail/DetailContainer.tsx b/src/Routes/Detail/DetailContainer.tsx index 35ba8fa..0da3a57 100644 --- a/src/Routes/Detail/DetailContainer.tsx +++ b/src/Routes/Detail/DetailContainer.tsx @@ -1,36 +1,29 @@ import React, { Component, memo } from 'react' ; import DetailPresenter from './DetailPresenter' ; -import { MoviesApi, TVApi } from '../../api'; -import { useLocation } from 'react-router'; +import { MoviesApi, TVApi } from '../../api' ; +import { NavigateFunction, useLocation, useNavigate } from 'react-router' ; type DetailContaninerProps = { location : { pathname : string - state : { - idList : number[] - } + state : number[] } + navigate : NavigateFunction } type State = { loading : boolean - error : string | null + error : string isMovie : boolean slideLoadData : any } export default memo(() => { - const locationData = useLocation() ; - - console.log(locationData) ; - - const location = { - pathname : locationData.pathname, - state : locationData.state - } ; + const location = useLocation() ; + const navigate = useNavigate() ; - return + return }) @@ -44,7 +37,7 @@ class DetailContaniner extends Component { const { location : { pathname, - state : { idList } + state : idList }, } = props ; @@ -52,7 +45,7 @@ class DetailContaniner extends Component { this.state = { loading : true, - error : null, + error : '', isMovie : pathname.includes('/movie/'), slideLoadData : [], } ; @@ -106,24 +99,24 @@ class DetailContaniner extends Component { const { isMovie, slideLoadData } = this.state ; const { idList } = this ; const { - match : { - params : { id } + location : { + pathname }, - history : { push } - } = this.props as any ; + navigate + } = this.props ; + const parseId = parseInt(pathname.split("/")[2]) ; - const parseId = parseInt(id) ; - if(isNaN(parseId)) - return push("/") ; + if(isNaN(parseId)) return navigate("/") ; try { + if(isMovie) { const { data } = await MoviesApi.movieDetail(parseId) ; - + const { data : { results @@ -134,10 +127,6 @@ class DetailContaniner extends Component { result : data, resultRent : results } - - this.setState({ - slideLoadData : [ ...slideLoadData, dataObj ], - }) ; const indexId = idList.findIndex((idData : number) => idData === Number(parseId)) idList.splice(indexId, 1) ; @@ -145,7 +134,10 @@ class DetailContaniner extends Component { for(let i = 0 ; i < idList.length ; i++) { this.getDataNotAsyncMovie(idList[i]) ; } - + + this.setState({ + slideLoadData : [ ...slideLoadData, dataObj ], + }) ; }else { @@ -163,20 +155,20 @@ class DetailContaniner extends Component { result : data, resultRent : results } - - this.setState({ - slideLoadData : [ ...slideLoadData, dataObj ], - }) ; const indexId = idList.findIndex(idData => idData === Number(parseId)) idList.splice(indexId, 1) ; for(let i = 0 ; i < idList.length ; i++) { - this.getDataNotAsyncTV(idList[i]) ; + this.getDataNotAsyncTV(idList[i]) ; } + + this.setState({ + slideLoadData : [ ...slideLoadData, dataObj ], + }) ; } - }catch { + }catch(err) { this.setState({ error : "Can't find anything.", }) ; @@ -199,7 +191,6 @@ class DetailContaniner extends Component { render() { const { loading, error } = this.state ; - const { idList } = this ; return ( props.theme.mobileS} { position : static ; @@ -68,26 +64,37 @@ const Backdrop = styled.div<{ bgImage : string }>` opacity : 0.5 ; `; -const Data = styled.div<{ backgroundColor : string, display : string }>` - width : 50% ; - margin-left : 10px ; - position : absolute ; - left : 600px ; - top : 0 ; - z-index : 2 ; +const DataContainer = styled.div<{ display : string, backgroundColor : string }>` + display : ${props => props.display} ; + flex : 1 ; + padding : 0 50px 0 50px ; + background-color : ${props => props.backgroundColor} ; - display : ${props => props.display} ; + flex-direction : column ; @media ${props => props.theme.mobileS} { - position : static ; + flex : 0 ; + padding : 10px ; - width : 100% ; - height : 100% ; + position : absolute ; float : left ; - padding : 10px ; + width : 340px ; + height : 500px ; + } +`; + +const Data = styled.div` + width : 100% ; + flex : 1 ; + margin-left : 10px ; + z-index : 2 ; + + display : block ; + + @media ${props => props.theme.mobileS} { margin-left : 0 ; } `; @@ -110,9 +117,10 @@ const Content = styled.div` display : flex ; width : 80% ; height : 100% ; - position : relative ; z-index : 1 ; + justify-content : center ; + margin : 0 auto ; @media ${props => props.theme.mobileS} { @@ -124,14 +132,22 @@ const Content = styled.div` `; const Title = styled.h3` - font-size : 32px ; + width : 100% ; + height : 52px ; + font-size : 48px ; margin-bottom : 20px ; position : relative ; z-index : 1 ; + overflow : hidden ; + text-overflow : ellipsis ; + white-space : nowrap ; + @media ${props => props.theme.mobileS} { font-size : 18px ; margin-bottom : 10px ; + + height : 32px ; } `; @@ -153,15 +169,27 @@ const Divider = styled.span` margin : 0 10px ; `; -const OverView = styled.p` - position : relative ; - font-size : 12px ; - line-height : 1.5 ; +const OverView = styled.p` + display : -webkit-box ; + display : -ms-flexbox ; + display : box ; + font-size : 16px ; + line-height : 150% ; margin-bottom : 10px ; - z-index : 1 ; + width : 100% ; + height : 35% ; + + overflow : hidden ; + vertical-align : top ; + text-overflow : ellipsis ; + word-break : break-all ; + -webkit-box-orient : vertical ; + -webkit-line-clamp : 6 ; @media ${props => props.theme.mobileS} { font-size : 12px ; + height : auto ; + -webkit-line-clamp : unset ; } `; @@ -247,8 +275,8 @@ const LogoImage = styled.div<{ bgImage : string }>` type DetailPresenterProps = { slideLoadData : any - loading : any - error : any + loading : boolean + error : string } const DetailPresenter = ({ @@ -288,6 +316,7 @@ const DetailPresenter = ({ } const viewContentNumCheck = ( innerWidth : number ) => { + if( innerWidth <= mobileS ) { setMode468px(true) ; setCss(false) ; @@ -354,56 +383,60 @@ const DetailPresenter = ({ : require("../../assets/noPoster.jpg")} onTouchMove={ touchMoveInit } onTouchEnd={ (e) => mode468px ? clickCover(e) : null } - > - + mode468px ? clickData(e) : null } > - {result.original_title ? result.original_title : result.original_name} - - - {result.release_date ? - result.release_date.substring(0, 7) - : result.first_air_date.substring(0, 7)} - - . - - {result.runtime ? - result.runtime - : result.episode_run_time}min - - . - - { - result.genres!.map((genre : any, index : number) => - index === result.genres.length - 1 ? - genre.name - : `${genre.name} / ` - ) - } - - - {result.overview} - - {canSee && canSee.map((data, index) => - - {data.provider_name} - - - - )} - - - - { mode468px ? null : - } + mode468px ? clickData(e) : null } + > + {result.original_title ? result.original_title : result.original_name} + + + {result.release_date ? + result.release_date.substring(0, 7) + : result.first_air_date.substring(0, 7)} + + . + + {result.runtime ? + result.runtime + : result.episode_run_time}min + + . + + { + result.genres!.map((genre : any, index : number) => + index === result.genres.length - 1 ? + genre.name + : `${genre.name} / ` + ) + } + + + {result.overview} + + {canSee && canSee.map((data, index) => + + {data.provider_name} + + + + )} + + + { mode468px ? null : + } + { mode468px ? ( @@ -412,15 +445,7 @@ const DetailPresenter = ({ frameborder = "0" allowfullscreen /> - ) : ( - - - )} + ) : null} { error && } diff --git a/src/Routes/Home/HomePresenter.tsx b/src/Routes/Home/HomePresenter.tsx index 92418a6..db61dcd 100644 --- a/src/Routes/Home/HomePresenter.tsx +++ b/src/Routes/Home/HomePresenter.tsx @@ -13,14 +13,14 @@ const Container = styled.div` `; type HomePresenterProps = { - nowPlaying : any - upcoming : any - popular : any - error : any - loading : any - nowPlayingIdList : any - upcomingIdLlist : any - popularIdList : any + nowPlaying : any[] + upcoming : any[] + popular : any[] + error : string + loading : boolean + nowPlayingIdList : number[] + upcomingIdLlist : number[] + popularIdList : number[] } const HomePresenter = ({ diff --git a/src/Routes/Search/SearchContainer.tsx b/src/Routes/Search/SearchContainer.tsx index c1a86b2..7bda3c0 100644 --- a/src/Routes/Search/SearchContainer.tsx +++ b/src/Routes/Search/SearchContainer.tsx @@ -12,11 +12,11 @@ export default class SearchContainer extends Component { loading : false, error : '' } ; - updateTerm = (e : any) => { + updateTerm = (e : React.ChangeEvent) => { const { value } = e.currentTarget ; this.setState({ searchTerm : value }) ; } - handleSubmit = (e : any) => { + handleSubmit = (e : React.FormEvent) => { e.preventDefault() ; const { searchTerm } = this.state ; if(searchTerm !== '') { diff --git a/src/Routes/Search/SearchPresenter.tsx b/src/Routes/Search/SearchPresenter.tsx index 3847bc3..cd41f73 100644 --- a/src/Routes/Search/SearchPresenter.tsx +++ b/src/Routes/Search/SearchPresenter.tsx @@ -24,14 +24,14 @@ const Input = styled.input` `; type SearchPresenterProps = { - movieResultsIdList : any - showResultsIdList : any + movieResultsIdList : number[] + showResultsIdList : number[] movieResults : any showResults : any - loading : any - error : any - handleSubmit : any - updateTerm : any + loading : boolean + error : string + handleSubmit : React.FormEventHandler + updateTerm : React.ChangeEventHandler } const SearchPresenter = ({ @@ -48,7 +48,7 @@ const SearchPresenter = ({ Search | Search Media
- +
{ loading ? : <> {movieResults && movieResults.length >0 && diff --git a/src/Routes/Tv/TVContainer.tsx b/src/Routes/Tv/TVContainer.tsx index 8cb4653..354cf91 100644 --- a/src/Routes/Tv/TVContainer.tsx +++ b/src/Routes/Tv/TVContainer.tsx @@ -4,11 +4,11 @@ import { TVApi } from '../../api' ; export default class TVcontainer extends Component { state = { - topRated : null, - popular : null, - airingToday : null, + topRated : [], + popular : [], + airingToday : [], loading : true, - error : null, + error : '', topRatedIdList : [], popularIdList : [], airingTodayIdList : [] diff --git a/src/Routes/Tv/TVPresenter.tsx b/src/Routes/Tv/TVPresenter.tsx index 9ade700..2744aa4 100644 --- a/src/Routes/Tv/TVPresenter.tsx +++ b/src/Routes/Tv/TVPresenter.tsx @@ -13,14 +13,14 @@ const Container = styled.div` `; type TVPresenterProps = { - topRatedIdList : any[] - popularIdList : any[] - airingTodayIdList : any[] - topRated : any - popular : any - airingToday : any - loading : any - error : any + topRatedIdList : number[] + popularIdList : number[] + airingTodayIdList : number[] + topRated : any[] + popular : any[] + airingToday : any[] + loading : boolean + error : string } const TVPresenter = ({