diff --git a/README.md b/README.md index e69de29b..123d36e3 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,24 @@ +# 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편 Week3 + +[🔗 link](https://edu.nextstep.camp/s/hazAC9xa) + +## ✏ 기능 목록 + +### STEP1 + +- [x] 메인페이지 API 연결 + - [x] Theme 카테고리 섹션 API 연결 : /api/v1/themes API 사용. + - [x] 실시간 급상승 선물랭킹 섹션 API 연결 : /api/v1/ranking/products API 사용. + - [x] 필터 조건을 선택하면 해당 조건에 맞게 API를 요청해서 보여지게 함. +- [x] Theme 페이지 API 연결 + - [x] Header API 연결 : url의 pathParams와 /api/v1/themes API 사용. + - [x] themeKey가 잘못된 경우 메인페이지로 연결. + - [x] 상품목록 섹션 API 연결 : /api/v1/themes/{themeKey}/products API 연결 + - [x] API 요청 시 한 번에 20개 상품 보여지도록 함. + +### STEP2 + +- [x] 메인페이지 ThemeCategorySection 에러처리 +- [x] 메인페이지 실시간 급상승 Section 에러처리 +- [ ] Theme페이지 헤더부분 에러처리 +- [ ] Tehme페이지 상품부분 에러처리 diff --git a/oas.yaml b/oas.yaml index e7cfd68e..c49656a2 100644 --- a/oas.yaml +++ b/oas.yaml @@ -506,6 +506,10 @@ components: type: string description: 선물 테마 카테고리 배경색 example: '#F5F5F5' + imageUrl: + type: string + description: 선물 테마 이미지 URL + example: 'https://img1.daumcdn.net/thumb/S104x104/?fname=https%3A%2F%2Ft1.daumcdn.net%2Fgift%2Fhome%2Ftheme%2F292020231106_MXMUB.png' required: - id - key diff --git a/package-lock.json b/package-lock.json index 89581c64..74216d7d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", + "axios": "^1.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.1" @@ -11988,8 +11989,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 +12061,16 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", + "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", @@ -13498,7 +13508,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" }, @@ -15481,7 +15490,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" } @@ -18405,10 +18413,9 @@ } }, "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", @@ -18614,7 +18621,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", @@ -24744,7 +24750,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 +24758,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" }, @@ -27576,8 +27580,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", diff --git a/package.json b/package.json index 0a6f0b8f..f1f65cfa 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "dependencies": { "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", + "axios": "^1.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.22.1" diff --git a/src/components/features/Home/GoodsRankingSection/index.tsx b/src/components/features/Home/GoodsRankingSection/index.tsx index 9464d67c..f2a365b1 100644 --- a/src/components/features/Home/GoodsRankingSection/index.tsx +++ b/src/components/features/Home/GoodsRankingSection/index.tsx @@ -1,10 +1,10 @@ import styled from '@emotion/styled'; -import { useState } from 'react'; +import axios from 'axios'; +import { useEffect, useState } from 'react'; import { Container } from '@/components/common/layouts/Container'; import { breakpoints } from '@/styles/variants'; -import type { RankingFilterOption } from '@/types'; -import { GoodsMockList } from '@/types/mock'; +import { type GoodsData, type RankingFilterOption } from '@/types'; import { GoodsRankingFilter } from './Filter'; import { GoodsRankingList } from './List'; @@ -14,15 +14,54 @@ export const GoodsRankingSection = () => { targetType: 'ALL', rankType: 'MANY_WISH', }); + const [goods, setGoods] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(); - // GoodsMockData를 21번 반복 생성 + const url = 'https://react-gift-mock-api-two.vercel.app/api/v1/ranking/products'; + useEffect(() => { + axios({ + method: 'get', + url: url, + params: filterOption, + }) + .then((res) => { + setGoods(res.data.products); + }) + .catch((err) => { + console.error('Error fetching themes:', err); + setError(err); // 에러 메시지 설정 + }) + .finally(() => { + setLoading(false); // 로딩 상태 해제 + }); + }, [filterOption]); + + if (loading) + return ( + +
데이터를 로딩중입니다.
+ + ); + if (error) + return ( + +
Error: {error}
+ + ); + if (goods.length === 0) + return ( + +
데이터가 존재하지 않습니다.
+ + ); return ( 실시간 급상승 선물랭킹 - + ); diff --git a/src/components/features/Home/ThemeCategorySection/index.tsx b/src/components/features/Home/ThemeCategorySection/index.tsx index d82e3afe..55177258 100644 --- a/src/components/features/Home/ThemeCategorySection/index.tsx +++ b/src/components/features/Home/ThemeCategorySection/index.tsx @@ -1,14 +1,57 @@ import styled from '@emotion/styled'; +import axios from 'axios'; +import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { Container } from '@/components/common/layouts/Container'; import { Grid } from '@/components/common/layouts/Grid'; import { getDynamicPath } from '@/routes/path'; import { breakpoints } from '@/styles/variants'; +import { type ThemeData } from '@/types'; import { ThemeCategoryItem } from './ThemeCategoryItem'; export const ThemeCategorySection = () => { + const [themes, setThemes] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(); + + const url = 'https://react-gift-mock-api-two.vercel.app/api/v1/themes'; + useEffect(() => { + axios + .get(url) + .then((res) => { + setThemes(res.data.themes); + setError(null); + }) + .catch((err) => { + console.error('Error fetching themes:', err); + setError(err); // 에러 메시지 설정 + }) + .finally(() => { + setLoading(false); // 로딩 상태 해제 + }); + }, []); + + if (loading) + return ( + +
데이터를 로딩중입니다.
+ + ); + if (error) + return ( + +
Error: {error}
+ + ); + if (themes.length === 0) + return ( + +
데이터가 존재하지 않습니다.
+ + ); + return ( @@ -18,78 +61,12 @@ export const ThemeCategorySection = () => { md: 6, }} > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {themes && + themes.map((theme) => ( + + + + ))} diff --git a/src/components/features/Theme/ThemeGoodsSection/index.tsx b/src/components/features/Theme/ThemeGoodsSection/index.tsx index 8edbf70e..a55cd603 100644 --- a/src/components/features/Theme/ThemeGoodsSection/index.tsx +++ b/src/components/features/Theme/ThemeGoodsSection/index.tsx @@ -1,16 +1,57 @@ import styled from '@emotion/styled'; +import axios from 'axios'; +import { useEffect, useState } from 'react'; 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 type { GoodsData } from '@/types'; type Props = { themeKey: string; }; -export const ThemeGoodsSection = ({}: Props) => { +export const ThemeGoodsSection = ({ themeKey }: Props) => { + const [products, setProducts] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(); + + const url = `https://react-gift-mock-api-two.vercel.app/api/v1/themes/${themeKey}/products`; + useEffect(() => { + axios + .get(url) + .then((res) => { + setProducts(res.data.products.slice(0, 20)); + }) + .catch((err) => { + console.error('Error fetching themes:', err); + setError(err); // 에러 메시지 설정 + }) + .finally(() => { + setLoading(false); // 로딩 상태 해제 + }); + }, [url]); + + if (loading) + return ( + +
데이터를 로딩중입니다.
+ + ); + if (error) + return ( + +
Error: {error}
+ + ); + if (products.length === 0) + return ( + +
데이터가 존재하지 않습니다.
+ + ); + return ( @@ -21,7 +62,7 @@ export const ThemeGoodsSection = ({}: Props) => { }} gap={16} > - {GoodsMockList.map(({ id, imageURL, name, price, brandInfo }) => ( + {products.map(({ id, imageURL, name, price, brandInfo }) => ( { - const currentTheme = getCurrentTheme(themeKey, ThemeMockList); + const [themes, setThemes] = useState([]); + const [currentTheme, setCurrentTheme] = useState(); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(); - if (!currentTheme) { - return null; - } + const url = 'https://react-gift-mock-api-two.vercel.app/api/v1/themes'; + useEffect(() => { + axios + .get(url) + .then((res) => { + setThemes(res.data.themes); + }) + .catch((err) => { + console.error('Error fetching themes:', err); + setError(err); // 에러 메시지 설정 + }); + }, []); - const { backgroundColor, label, title, description } = currentTheme; + useEffect(() => { + setCurrentTheme(getCurrentTheme(themeKey, themes)); + }, [themeKey, themes]); - return ( - + useEffect(() => { + setLoading(false); + }, [currentTheme]); + if (loading) + return ( + +
데이터를 로딩중입니다.
+ + ); + if (error) + return ( - - {title} - {description && {description}} +
Error: {error}
 - - ); + ); + if (!currentTheme) return ; + else { + const { backgroundColor, label, title, description } = currentTheme; + + return ( + + + + {title} + {description && {description}} + + + ); + } }; const Wrapper = styled.section<{ backgroundColor: string }>` diff --git a/src/pages/Theme/index.tsx b/src/pages/Theme/index.tsx index 4d02e6c1..d3bc091b 100644 --- a/src/pages/Theme/index.tsx +++ b/src/pages/Theme/index.tsx @@ -1,18 +1,10 @@ -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..fcf55803 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -5,6 +5,7 @@ export type ThemeData = { title: string; description?: string; backgroundColor: string; + imageURL: string; }; export type RankingFilterOption = { diff --git a/src/types/mock.ts b/src/types/mock.ts index cdd90cf7..d54d6016 100644 --- a/src/types/mock.ts +++ b/src/types/mock.ts @@ -7,6 +7,8 @@ export const ThemeMockData: ThemeData = { title: '예산은 가볍게, 감동은 무겁게❤️', description: '당신의 센스를 뽐내줄 부담 없는 선물', backgroundColor: '#4b4d50', + imageURL: + 'https://st.kakaocdn.net/product/gift/product/20231030175450_53e90ee9708f45ffa45b3f7b4bc01c7c.jpg', }; export const ThemeMockList = [ThemeMockData];