diff --git a/.eslintrc.js b/.eslintrc.js index bebdb7ce..5cd67bf5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -31,9 +31,12 @@ module.exports = { ], rules: { 'react/react-in-jsx-scope': 'off', + 'react-hooks/exhaustive-deps': 'off', 'simple-import-sort/imports': 'error', 'simple-import-sort/exports': 'error', + "@typescript-eslint/no-explicit-any": "off", '@typescript-eslint/consistent-type-imports': 'warn', + '@typescript-eslint/no-shadow': 'off', '@typescript-eslint/no-unused-vars': [ 'error', { diff --git a/README.md b/README.md index e69de29b..0ee0447e 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,35 @@ +

카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편

+ +

1️⃣ Step 1 체크리스트

+ +- `oas.yaml` 파일과 `mock API URL` 을 사용해서 API 구현하기 + +- Main Page → + + - [x] Theme 카테고리 섹션: `/api/v1/themes` API를 사용하여 Section 구현 + + - [x] 실시간 급상승 선물랭킹 섹션: `api/v1/ranking/products` API를 사용하여 Section 구현 + +- Theme Page → + + - [x] Header : url의 pathParams와 `/api/v1/themes` API를 사용하여 Section을 구현 + + - [x] 상품 목록 섹션 : `/api/v1/themes/{themeKey}/products` API를 사용하여 상품 목록을 구현. API 요청 시 한번에 20개의 상품 목록이 내려오도록 한다. + +
+ +

2️⃣ Step 2 체크리스트

+ +- [x] 각 API에서 Loading 상태에 대한 UI 대응 + +- [x] 데이터가 없는 경우에 대한 UI 대응 + +- [x] HTTP Status에 따라 Error를 다르게 처리 + +
+ +

3️⃣ Step 3 체크리스트

+ +- [x] 스크롤을 내리면 추가로 데이터를 요청하여 보여지게 함 + +- [x] 1단계에서 구현한 API를 `react-query` 를 사용해서 구현 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 89581c64..8572be17 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,12 @@ "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", + "@tanstack/react-query": "^5.51.1", + "axios": "^1.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-intersection-observer": "^9.13.0", + "react-query": "^3.39.3", "react-router-dom": "^6.22.1" }, "devDependencies": { @@ -9881,6 +9885,32 @@ "integrity": "sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==", "dev": true }, + "node_modules/@tanstack/query-core": { + "version": "5.51.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.1.tgz", + "integrity": "sha512-fJBMQMpo8/KSsWW5ratJR5+IFr7YNJ3K2kfP9l5XObYHsgfVy1w3FJUWU4FT2fj7+JMaEg33zOcNDBo0LMwHnw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.51.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.1.tgz", + "integrity": "sha512-s47HKFnQ4HOJAHoIiXcpna/roMMPZJPy6fJ6p4ZNVn8+/onlLBEDd1+xc8OnDuwgvecqkZD7Z2mnSRbcWefrKw==", + "license": "MIT", + "dependencies": { + "@tanstack/query-core": "5.51.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@testing-library/dom": { "version": "9.3.4", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", @@ -11988,8 +12018,7 @@ "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", - "dev": true + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, "node_modules/at-least-node": { "version": "1.0.0", @@ -12061,6 +12090,17 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -12666,8 +12706,7 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/base64-js": { "version": "1.5.1", @@ -12727,7 +12766,6 @@ "version": "1.6.52", "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz", "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==", - "dev": true, "engines": { "node": ">=0.6" } @@ -12870,6 +12908,22 @@ "node": ">=8" } }, + "node_modules/broadcast-channel": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz", + "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.7.2", + "detect-node": "^2.1.0", + "js-sha3": "0.8.0", + "microseconds": "0.2.0", + "nano-time": "1.0.0", + "oblivious-set": "1.0.0", + "rimraf": "3.0.2", + "unload": "2.2.0" + } + }, "node_modules/browser-assert": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz", @@ -13498,7 +13552,6 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", - "dev": true, "dependencies": { "delayed-stream": "~1.0.0" }, @@ -13599,8 +13652,7 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, "node_modules/concat-stream": { "version": "1.6.2", @@ -15481,7 +15533,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", - "dev": true, "engines": { "node": ">=0.4.0" } @@ -15535,8 +15586,7 @@ "node_modules/detect-node": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", - "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", - "dev": true + "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" }, "node_modules/detect-node-es": { "version": "1.1.0", @@ -18405,16 +18455,16 @@ } }, "node_modules/follow-redirects": { - "version": "1.15.5", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", - "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", - "dev": true, + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", "funding": [ { "type": "individual", "url": "https://github.com/sponsors/RubenVerborgh" } ], + "license": "MIT", "engines": { "node": ">=4.0" }, @@ -18614,7 +18664,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", - "dev": true, "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", @@ -18714,8 +18763,7 @@ "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", - "dev": true + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, "node_modules/fsevents": { "version": "2.3.3", @@ -19740,7 +19788,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", - "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -19749,8 +19796,7 @@ "node_modules/inherits": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", - "dev": true + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "node_modules/ini": { "version": "1.3.8", @@ -23850,6 +23896,12 @@ "jiti": "bin/jiti.js" } }, + "node_modules/js-sha3": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz", + "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==", + "license": "MIT" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -24626,6 +24678,16 @@ "react": ">= 0.14.0" } }, + "node_modules/match-sorter": { + "version": "6.3.4", + "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.4.tgz", + "integrity": "sha512-jfZW7cWS5y/1xswZo8VBOdudUiSd9nifYRWphc9M5D/ee4w4AoXLgBEdRbgVaxbMuagBPeUC5y2Hi8DO6o9aDg==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.23.8", + "remove-accents": "0.5.0" + } + }, "node_modules/mdast-util-definitions": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz", @@ -24728,6 +24790,12 @@ "node": ">=8.6" } }, + "node_modules/microseconds": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz", + "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==", + "license": "MIT" + }, "node_modules/mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -24744,7 +24812,6 @@ "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", - "dev": true, "engines": { "node": ">= 0.6" } @@ -24753,7 +24820,6 @@ "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", - "dev": true, "dependencies": { "mime-db": "1.52.0" }, @@ -24970,6 +25036,15 @@ "thenify-all": "^1.0.0" } }, + "node_modules/nano-time": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz", + "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==", + "license": "ISC", + "dependencies": { + "big-integer": "^1.6.16" + } + }, "node_modules/nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", @@ -25514,6 +25589,12 @@ "integrity": "sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==", "dev": true }, + "node_modules/oblivious-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz", + "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==", + "license": "MIT" + }, "node_modules/obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", @@ -25551,7 +25632,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", - "dev": true, "dependencies": { "wrappy": "1" } @@ -25835,7 +25915,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -27576,8 +27655,7 @@ "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", - "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", - "dev": true + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" }, "node_modules/psl": { "version": "1.9.0", @@ -28266,11 +28344,52 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==", "dev": true }, + "node_modules/react-intersection-observer": { + "version": "9.13.0", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.0.tgz", + "integrity": "sha512-y0UvBfjDiXqC8h0EWccyaj4dVBWMxgEx0t5RGNzQsvkfvZwugnKwxpu70StY4ivzYuMajavwUDjH4LJyIki9Lw==", + "license": "MIT", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-query": { + "version": "3.39.3", + "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", + "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.5.5", + "broadcast-channel": "^3.4.1", + "match-sorter": "^6.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -28941,6 +29060,12 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/remove-accents": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", + "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==", + "license": "MIT" + }, "node_modules/renderkid": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz", @@ -29135,7 +29260,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", - "dev": true, "dependencies": { "glob": "^7.1.3" }, @@ -29150,7 +29274,6 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -29160,7 +29283,6 @@ "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", - "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -29180,7 +29302,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", - "dev": true, "dependencies": { "brace-expansion": "^1.1.7" }, @@ -31842,6 +31963,16 @@ "node": ">= 10.0.0" } }, + "node_modules/unload": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz", + "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==", + "license": "Apache-2.0", + "dependencies": { + "@babel/runtime": "^7.6.2", + "detect-node": "^2.0.4" + } + }, "node_modules/unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", @@ -33313,8 +33444,7 @@ "node_modules/wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", - "dev": true + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==" }, "node_modules/write-file-atomic": { "version": "4.0.2", diff --git a/package.json b/package.json index 0a6f0b8f..202eb083 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "start": "craco start", "build": "craco build", "test": "craco test", + "lint": "eslint --fix src/", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build" }, @@ -24,8 +25,12 @@ "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", + "@tanstack/react-query": "^5.51.1", + "axios": "^1.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-intersection-observer": "^9.13.0", + "react-query": "^3.39.3", "react-router-dom": "^6.22.1" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index 26d8766c..e16a1545 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,17 @@ +import { QueryClient, QueryClientProvider } from 'react-query'; + import { AuthProvider } from './provider/Auth'; import { Routes } from './routes'; +const queryClient = new QueryClient(); + const App = () => { return ( - - - + + + + + ); }; diff --git a/src/components/features/Home/GoodsRankingSection/List.tsx b/src/components/features/Home/GoodsRankingSection/List.tsx index 27bd332c..6c08b505 100644 --- a/src/components/features/Home/GoodsRankingSection/List.tsx +++ b/src/components/features/Home/GoodsRankingSection/List.tsx @@ -8,13 +8,13 @@ import { breakpoints } from '@/styles/variants'; import type { GoodsData } from '@/types'; type Props = { - goodsList: GoodsData[]; + goodsList: GoodsData[] | undefined; }; export const GoodsRankingList = ({ goodsList }: Props) => { const [hasMore, setHasMore] = useState(false); - const currentGoodsList = hasMore ? goodsList : goodsList.slice(0, 6); + const currentGoodsList = hasMore ? goodsList : goodsList?.slice(0, 6); return ( @@ -26,7 +26,7 @@ export const GoodsRankingList = ({ goodsList }: Props) => { }} gap={16} > - {currentGoodsList.map(({ id, imageURL, name, price, brandInfo }, index) => ( + {currentGoodsList?.map(({ id, imageURL, name, price, brandInfo }, index) => ( { + const params = { + targetType: filterOption.targetType, + rankType: filterOption.rankType + } + const response = await axios.get(`${BASE_URL}api/v1/ranking/products`, { params }) + return response.data.products +} + export const GoodsRankingSection = () => { const [filterOption, setFilterOption] = useState({ targetType: 'ALL', rankType: 'MANY_WISH', }); - // GoodsMockData를 21번 반복 생성 + const { data, isLoading, isError } = useQuery(['rankingList', filterOption], () => + fetchRankingList(filterOption) + ) + + const renderingFunc = () => { + if (isError) { + return ( + + 데이터를 불러오는 중 오류가 발생하였습니다. + + ); + } + + if (isLoading) { + return ( + + + Loading... + + ); + } + + if (data?.length === 0) { + return ( + + No data available + + ) + } + return + } return ( 실시간 급상승 선물랭킹 - + {renderingFunc()} ); @@ -50,3 +91,60 @@ const Title = styled.h2` line-height: 50px; } `; + +const LoadingWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 500px; + width: 100%; +`; + +const Spinner = styled.div` + width: 40px; + height: 40px; + border: 4px solid rgba(0, 0, 0, 0.1); + border-top: 4px solid #000; + border-radius: 50%; + animation: spin 1s linear infinite; + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } +`; + +const LoadingText = styled.div` + margin-top: 10px; + font-size: 1.2rem; + color: #555; +`; + +const NoDataWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 500px; + width: 100%; +`; + +const NoDataText = styled.div` + font-size: 1.5rem; + color: #999; + text-align: center; +`; + +const ErrorWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 500px; + width: 100%; +`; + +const ErrorText = styled.div` + font-size: 1.5rem; + color: #e74c3c; + text-align: center; +`; diff --git a/src/components/features/Home/ThemeCategorySection/index.tsx b/src/components/features/Home/ThemeCategorySection/index.tsx index d82e3afe..ae72fe2e 100644 --- a/src/components/features/Home/ThemeCategorySection/index.tsx +++ b/src/components/features/Home/ThemeCategorySection/index.tsx @@ -1,14 +1,55 @@ import styled from '@emotion/styled'; +import axios from 'axios'; +import { useQuery } from 'react-query'; import { Link } from 'react-router-dom'; import { Container } from '@/components/common/layouts/Container'; import { Grid } from '@/components/common/layouts/Grid'; +import { BASE_URL } from '@/constants'; import { getDynamicPath } from '@/routes/path'; import { breakpoints } from '@/styles/variants'; +import type { ThemeData } from '@/types'; import { ThemeCategoryItem } from './ThemeCategoryItem'; +export const fetchThemeCategory = async () => { + const response = await axios.get(`${BASE_URL}api/v1/themes`) + return response.data.themes +} + +/* + useQuery hooks 는 다음과 같은 객체 반환 + { + data?: TData, // 쿼리 데이터 + error?: Error, // 에러 객체 (에러가 없으면 undefined) + isError: boolean, // 에러 여부를 나타내는 불리언 값 + isLoading: boolean, // 데이터 로딩 중 여부를 나타내는 불리언 값 + isSuccess: boolean, // 데이터 요청 성공 여부를 나타내는 불리언 값 + refetch: (options?) => void, // 쿼리 재요청 함수 + remove: () => void, // 쿼리 제거 함수 + } +*/ + export const ThemeCategorySection = () => { + const { data, isError, isLoading } = useQuery(['ThemeData'], fetchThemeCategory) + + if (isError) { + return ( + + 데이터를 불러오는 중 오류가 발생하였습니다. + + ); + } + + if (isLoading) { + return ( + + + Loading... + + ); + } + return ( @@ -18,78 +59,12 @@ export const ThemeCategorySection = () => { md: 6, }} > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {data?.map((theme) => ( + // 각 Theme Detail Page로 이동할 링크 + + + + ))} @@ -103,3 +78,49 @@ const Wrapper = styled.section` padding: 45px 52px 23px; } `; + +const LoadingWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 500px; +`; + +const ErrorWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 500px; +`; + +const ErrorText = styled.div` + font-size: 1.5rem; + color: #ff6347; +`; + +const Spinner = styled.div` + width: 40px; + height: 40px; + border: 4px solid rgba(0, 0, 0, 0.1); + border-top: 4px solid #000; + border-radius: 50%; + animation: spin 1s linear infinite; + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +`; + +const LoadingText = styled.div` + margin-top: 10px; + font-size: 1.2rem; + color: #555; +`; + + diff --git a/src/components/features/Layout/Footer.tsx b/src/components/features/Layout/Footer.tsx index c5a28861..8a071c6d 100644 --- a/src/components/features/Layout/Footer.tsx +++ b/src/components/features/Layout/Footer.tsx @@ -7,7 +7,7 @@ export const Footer = () => { return ( -

카카오톡 선물하기

+ ); @@ -23,3 +23,7 @@ export const Wrapper = styled.footer` padding: 40px 16px 120px; } `; + +const FooterLogo = styled.img` + height: 20px; +`; diff --git a/src/components/features/Theme/ThemeGoodsSection/index.tsx b/src/components/features/Theme/ThemeGoodsSection/index.tsx index 8edbf70e..aad3592c 100644 --- a/src/components/features/Theme/ThemeGoodsSection/index.tsx +++ b/src/components/features/Theme/ThemeGoodsSection/index.tsx @@ -1,16 +1,80 @@ -import styled from '@emotion/styled'; +import styled from '@emotion/styled' +import axios from 'axios'; +import { useEffect } from 'react' +import { useInView } from 'react-intersection-observer' +import { useInfiniteQuery } from 'react-query'; -import { DefaultGoodsItems } from '@/components/common/GoodsItem/Default'; -import { Container } from '@/components/common/layouts/Container'; -import { Grid } from '@/components/common/layouts/Grid'; -import { breakpoints } from '@/styles/variants'; -import { GoodsMockList } from '@/types/mock'; +import { DefaultGoodsItems } from '@/components/common/GoodsItem/Default' +import { Container } from '@/components/common/layouts/Container' +import { Grid } from '@/components/common/layouts/Grid' +import { BASE_URL } from '@/constants'; +import { breakpoints } from '@/styles/variants' +import type { GoodsData } from '@/types' -type Props = { - themeKey: string; +type FetchProps = { + pageParam?: number + themeKey: string }; -export const ThemeGoodsSection = ({}: Props) => { +const fetchGoodsList = async ({ pageParam, themeKey }: FetchProps) => { + const maxResults = 20 + const params: { maxResults: number; pageToken?: number } = { maxResults } + if (pageParam) { + params.pageToken = pageParam + } + const response = await axios.get(`${BASE_URL}api/v1/themes/${themeKey}/products`, { params }) + return response.data +} + +export const ThemeGoodsSection = ({ themeKey }: { themeKey: string }) => { + const { ref, inView } = useInView() + + const { data, isError, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = + useInfiniteQuery( + ['goodsList', themeKey], + ({ pageParam = 0 }) => + fetchGoodsList({ pageParam: pageParam === 0 ? undefined : pageParam, themeKey }), + { + getNextPageParam: (lastPage, pages) => { + if (lastPage.products.length < 20) { + return undefined; + } + return pages.length; + }, + }, + ); + + useEffect(() => { + if (inView && hasNextPage) { + fetchNextPage(); + } + }, [inView, hasNextPage, fetchNextPage]); + + if (isError) { + return ( + + 데이터를 불러오는 중 오류가 발생하였습니다. + + ); + } + + if (isLoading && !isFetchingNextPage) { + return ( + + + Loading... + + ) + + } + if (!data || data.pages[0].products.length === 0) { + return ( + + No data available + + ) + } + return ( @@ -21,16 +85,19 @@ export const ThemeGoodsSection = ({}: Props) => { }} gap={16} > - {GoodsMockList.map(({ id, imageURL, name, price, brandInfo }) => ( - - ))} + {data?.pages.map((page) => + page.products.map((goods: GoodsData) => ( + + )), + )} +
{isFetchingNextPage ? '상품 추가로 불러오는 중...' : ''}
 ); @@ -44,3 +111,55 @@ const Wrapper = styled.section` padding: 40px 16px 360px; } `; + +const LoadingWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 500px; +`; + +const Spinner = styled.div` + width: 40px; + height: 40px; + border: 4px solid rgba(0, 0, 0, 0.1); + border-top: 4px solid #000; + border-radius: 50%; + animation: spin 1s linear infinite; + + @keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } +`; + +const LoadingText = styled.div` + margin-top: 10px; + font-size: 1.2rem; + color: #555; +`; + +const NoDataWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 500px; +`; + +const NoDataText = styled.div` + font-size: 1.5rem; + color: #999; +`; + +const ErrorWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 500px; +`; + +const ErrorText = styled.div` + font-size: 1.5rem; + color: #ff6347; +`; \ No newline at end of file diff --git a/src/components/features/Theme/ThemeHeroSection/index.tsx b/src/components/features/Theme/ThemeHeroSection/index.tsx index 36cfc038..6266d63d 100644 --- a/src/components/features/Theme/ThemeHeroSection/index.tsx +++ b/src/components/features/Theme/ThemeHeroSection/index.tsx @@ -1,29 +1,64 @@ -import styled from '@emotion/styled'; +import styled from '@emotion/styled' +import axios from 'axios' +import { useEffect, useState } from 'react' +import { useQuery } from 'react-query' -import { Container } from '@/components/common/layouts/Container'; -import { breakpoints } from '@/styles/variants'; -import type { ThemeData } from '@/types'; -import { ThemeMockList } from '@/types/mock'; +import { Container } from '@/components/common/layouts/Container' +import { BASE_URL } from '@/constants' +import { breakpoints } from '@/styles/variants' +import type { ThemeData } from '@/types' type Props = { - themeKey: string; + themeKey: string +} + +const fetchThemeHero = async (): Promise => { + const response = await axios.get(`${BASE_URL}api/v1/themes`) + return response.data.themes +} + +const getCurrentTheme = (themeKey: string, themeList: ThemeData[]) => { + return themeList.find((theme) => theme.key === themeKey); }; export const ThemeHeroSection = ({ themeKey }: Props) => { - const currentTheme = getCurrentTheme(themeKey, ThemeMockList); + const [currentTheme, setCurrentTheme] = useState() + const { data, isLoading, isError } = useQuery(['ThemeData', themeKey], fetchThemeHero) - if (!currentTheme) { - return null; + useEffect(() => { + if (data) { + const theme = getCurrentTheme(themeKey, data) + setCurrentTheme(theme) + } + }, [data, themeKey]) + + if (isError) { + return ( + + 데이터를 불러오는 중 오류가 발생하였습니다. + + ); } - const { backgroundColor, label, title, description } = currentTheme; + if (isLoading) { + return ( + + + Loading... + + ); + } + + if (!currentTheme) { + return null + } return ( - + - - {title} - {description && {description}} + + {currentTheme.title} + {currentTheme.description && {currentTheme.description}} ); @@ -83,6 +118,46 @@ const Description = styled.p` } `; -export const getCurrentTheme = (themeKey: string, themeList: ThemeData[]) => { - return themeList.find((theme) => theme.key === themeKey); -}; +const LoadingWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 500px; +`; + +const ErrorWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 500px; +`; + +const ErrorText = styled.div` + font-size: 1.5rem; + color: #ff6347; +`; + +const Spinner = styled.div` + width: 40px; + height: 40px; + border: 4px solid rgba(0, 0, 0, 0.1); + border-top: 4px solid #000; + border-radius: 50%; + animation: spin 1s linear infinite; + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } +`; + +const LoadingText = styled.div` + margin-top: 10px; + font-size: 1.2rem; + color: #555; +`; diff --git a/src/constants/index.ts b/src/constants/index.ts new file mode 100644 index 00000000..3cd27c8e --- /dev/null +++ b/src/constants/index.ts @@ -0,0 +1 @@ +export const BASE_URL = 'https://react-gift-mock-api-hyunaeri.vercel.app/' \ No newline at end of file diff --git a/src/pages/Theme/index.tsx b/src/pages/Theme/index.tsx index 4d02e6c1..5413e26d 100644 --- a/src/pages/Theme/index.tsx +++ b/src/pages/Theme/index.tsx @@ -1,17 +1,11 @@ -import { Navigate, useParams } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; import { ThemeGoodsSection } from '@/components/features/Theme/ThemeGoodsSection'; -import { getCurrentTheme, ThemeHeroSection } from '@/components/features/Theme/ThemeHeroSection'; -import { RouterPath } from '@/routes/path'; -import { ThemeMockList } from '@/types/mock'; +import { ThemeHeroSection } from '@/components/features/Theme/ThemeHeroSection'; + export const ThemePage = () => { const { themeKey = '' } = useParams<{ themeKey: string }>(); - const currentTheme = getCurrentTheme(themeKey, ThemeMockList); - - if (!currentTheme) { - return ; - } return ( <> diff --git a/src/types/index.ts b/src/types/index.ts index 9d76b97b..ce86d11d 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -3,6 +3,7 @@ export type ThemeData = { key: string; label: string; title: string; + imageURL: string; description?: string; backgroundColor: string; }; diff --git a/src/types/mock.ts b/src/types/mock.ts index cdd90cf7..f2434977 100644 --- a/src/types/mock.ts +++ b/src/types/mock.ts @@ -5,6 +5,8 @@ export const ThemeMockData: ThemeData = { key: 'life_small_gift', label: '가벼운 선물', title: '예산은 가볍게, 감동은 무겁게❤️', + imageURL: + 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292120240213_MPJIS.png', description: '당신의 센스를 뽐내줄 부담 없는 선물', backgroundColor: '#4b4d50', };