Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: 결제 api, 마감상품 모아보기 #24

Merged
merged 6 commits into from
Nov 29, 2024
Merged

Feat: 결제 api, 마감상품 모아보기 #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f48d299
fix: 명세에 맞춰서 스키마 수정 (#1)
cho1ys Nov 28, 2024
c049b87
fix: 명세에 맞춰서 기존api 수정 (#1)
cho1ys Nov 28, 2024
6facc2f
feat: 결제 api 작성 및 연동 (#14)
cho1ys Nov 28, 2024
6b95193
refactor: mock데이터 파일 분리 (#1)
cho1ys Nov 28, 2024
298a7d6
refactor: useQuery 훅파일로 분리(#1)
cho1ys Nov 28, 2024
2002a22
feat: 판매 마감된 상품 모아보기 (#8)
cho1ys Nov 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/pages/HomePage/CategoryProduct.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,19 +58,19 @@ const CategoryProduct: React.FC<CategoryProductsProps> = ({
{displayedProducts.map((product) => (
<Card key={product.id}>
<StyledLink to={`/products/${product.id}`}>
<ProductImg src={product.image} alt={product.name} />
<ProductImg src={product.url} alt={product.name} />
<ProductWrapper>
<ProductName>{product.name}</ProductName>
<ProductStar>
{' '}
<StarRating rating={product.stars} />
<StarRating rating={product.rating} />
</ProductStar>
<PriceWrapper>
<OriginalPrice>
${product.originalPrice.toFixed(2)}
</OriginalPrice>
<DiscountedPrice>
${product.discountedPrice.toFixed(2)}
${product.discountPrice.toFixed(2)}
</DiscountedPrice>
</PriceWrapper>
</ProductWrapper>
Expand Down
306 changes: 5 additions & 301 deletions src/components/pages/HomePage/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,311 +4,14 @@ import RecommendProduct from './RecommendProduct';
import PopularProduct from './PopularProduct';
import CategoryProduct from './CategoryProduct';
import ScrollToTopButton from '../../common/ScrollToTopButton';
// import { getProducts } from './api/productApi';
// import { useQuery } from '@tanstack/react-query';
// import { fetchUser, User } from './api/userApi';
// import { Product } from '../Payment/api/paymentApi';
import { categories, popularProduct, products } from '../../../mocks/products';
// import { QueryHandler, useProductsQuery } from '../../../hooks/useGetProduct';

const HomePage: React.FC = () => {
// const {
// data: product,
// isLoading,
// isError,
// } = useQuery<Product[], Error>({
// queryKey: ['product'],
// queryFn: () => getProducts(),
// });

// // 로딩 상태 처리
// if (isLoading) return <div>Loading...</div>;

// // 에러 상태 처리
// if (isError) return <div>Error</div>;

const categories = [
'식료품',
'생활용품',
'패션/의류',
'전자제품',
'가구/인테리어',
'유아/아동용품',
'스포츠',
];
const popularProduct = {
id: '1',
name: '다이슨 드라이기',
stars: 5,
category: '전자제품',
originalPrice: 95.5,
discountedPrice: 79.98,
description:
'최고의 성능을 가진 드라이기 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구 어쩌구 저쩌구',
image: 'https://via.placeholder.com/200',
comments: [
{
comment: 'asd',
},
{
comment: 'asd',
},
],
likes: false,
};
const products = [
{
id: '1',
name: '다이슨 드라이기',
stars: 5,
originalPrice: 95.5,
discountedPrice: 79.98,
image: 'https://via.placeholder.com/200',
category: '전자제품',
comments: [],
likes: false,
},
{
id: '2',
name: '에어팟 프로',
stars: 4,
originalPrice: 250.0,
category: '전자제품',
discountedPrice: 199.99,
image: 'https://via.placeholder.com/200',

comments: [{ comment: '좋아요!' }],
likes: false,
},
{
id: '3',
name: '샤오미 전기포트',
stars: 4.5,
originalPrice: 50.0,
discountedPrice: 39.99,
image: 'https://via.placeholder.com/200',
category: '전자제품',
comments: [{ comment: '좋은 제품이에요!' }, { comment: '가성비 최고!' }],
likes: false,
},
{
id: '4',
name: 'LG 모니터',
stars: 4,
originalPrice: 300.0,
discountedPrice: 259.99,
image: 'https://via.placeholder.com/200',
category: '전자제품',
comments: [
{ comment: '화질 좋아요!' },
{ comment: '디자인이 예뻐요!' },
{ comment: '조금 무겁지만 괜찮아요.' },
],
likes: false,
},
{
id: '5',
name: '삼성 TV',
stars: 5,
originalPrice: 1200.0,
discountedPrice: 999.99,
image: 'https://via.placeholder.com/200',
category: '전자제품',
comments: [],
likes: false,
},
{
id: '6',
name: '닌텐도 스위치',
stars: 4.5,
originalPrice: 350.0,
discountedPrice: 299.99,
image: 'https://via.placeholder.com/200',
category: '전자제품',
comments: [{ comment: '아이들이 너무 좋아해요!' }],
likes: true,
},
{
id: '7',
name: '스타벅스 아메리카노',
stars: 4.5,
originalPrice: 5.0,
discountedPrice: 4.5,
image: 'https://via.placeholder.com/200',
category: '식료품',
comments: [],
likes: false,
},
{
id: '8',
name: '캘리포니아 치즈',
stars: 4,
originalPrice: 15.0,
discountedPrice: 12.99,
image: 'https://via.placeholder.com/200',
category: '식료품',
comments: [{ comment: '맛있어요!' }],
likes: false,
},
{
id: '9',
name: '라면 3개입',
stars: 5,
originalPrice: 3.0,
discountedPrice: 2.5,
image: 'https://via.placeholder.com/200',
category: '식료품',
comments: [
{ comment: '항상 먹는 맛!' },
{ comment: '간편해서 좋아요.' },
{ comment: '가격 대비 최고!' },
],
likes: true,
},
{
id: '10',
name: '소형 청소기',
stars: 4.5,
originalPrice: 120.0,
discountedPrice: 99.99,
image: 'https://via.placeholder.com/200',
category: '생활용품',
comments: [],
likes: true,
},
{
id: '11',
name: '다용도 걸이',
stars: 4,
originalPrice: 20.0,
discountedPrice: 15.99,
image: 'https://via.placeholder.com/200',
category: '생활용품',
comments: [{ comment: '실용적이에요.' }],
likes: false,
},
{
id: '12',
name: '스탠드 조명',
stars: 4.5,
originalPrice: 50.0,
discountedPrice: 45.99,
image: 'https://via.placeholder.com/200',
category: '생활용품',
comments: [
{ comment: '조명이 예뻐요.' },
{ comment: '편안한 분위기를 만들어줘요.' },
],
likes: false,
},
{
id: '13',
name: '여성용 티셔츠',
stars: 4.5,
originalPrice: 20.0,
discountedPrice: 16.99,
image: 'https://via.placeholder.com/200',
category: '패션/의류',
comments: [
{ comment: '편안해요.' },
{ comment: '디자인이 마음에 들어요.' },
{ comment: '색상이 예뻐요.' },
],
likes: false,
},
{
id: '14',
name: '남성용 청바지',
stars: 4,
originalPrice: 40.0,
discountedPrice: 35.99,
image: 'https://via.placeholder.com/200',
category: '패션/의류',
comments: [],
likes: false,
},
{
id: '15',
name: '여성용 핸드백',
stars: 5,
originalPrice: 120.0,
discountedPrice: 99.99,
image: 'https://via.placeholder.com/200',
category: '패션/의류',
comments: [
{ comment: '디자인 최고!' },
{ comment: '가죽이 고급스러워요.' },
],
likes: true,
},
{
id: '16',
name: '삼나무 책상',
stars: 4.5,
originalPrice: 250.0,
discountedPrice: 199.99,
image: 'https://via.placeholder.com/200',
category: '가구/인테리어',
comments: [
{ comment: '튼튼해요.' },
{ comment: '디자인이 멋져요.' },
{ comment: '조립이 쉬워요.' },
],
likes: true,
},
{
id: '17',
name: '라탄 의자',
stars: 4,
originalPrice: 150.0,
discountedPrice: 129.99,
image: 'https://via.placeholder.com/200',
category: '가구/인테리어',
comments: [],
likes: false,
},
{
id: '18',
name: '스틸 책장',
stars: 4.5,
originalPrice: 120.0,
discountedPrice: 99.99,
image: 'https://via.placeholder.com/200',
category: '가구/인테리어',
comments: [
{ comment: '스타일리시해요.' },
{ comment: '높이가 딱 좋아요.' },
],
likes: true,
},
{
id: '19',
name: '유아용 기저귀',
stars: 5,
originalPrice: 30.0,
discountedPrice: 25.99,
image: 'https://via.placeholder.com/200',
category: '유아/아동용품',
comments: [
{ comment: '아기가 잘 사용해요.' },
{ comment: '흡수력이 좋아요.' },
{ comment: '가격이 저렴해요.' },
],
likes: true,
},
{
id: '20',
name: '유아용 장난감 세트',
stars: 4.5,
originalPrice: 45.0,
discountedPrice: 39.99,
image: 'https://via.placeholder.com/200',
category: '유아/아동용품',
comments: [],
likes: true,
},
];

// const { data: products, isLoading, isError } = useProductsQuery();
return (
<>
{/* <QueryHandler isLoading={isLoading} isError={isError}> */}
<ContainerBox>
<Container>
<PopularProduct product={popularProduct} />
Expand All @@ -325,6 +28,7 @@ const HomePage: React.FC = () => {
</Container>
<ScrollToTopButton />
</ContainerBox>
{/* </QueryHandler> */}
</>
);
};
Expand Down
16 changes: 3 additions & 13 deletions src/components/pages/HomePage/PopularProduct.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,29 +14,19 @@ const PopularProduct: React.FC<PopularProductProps> = ({ product }) => {
<StyledLink to={`/products/${product.id}`}>
<BannerContainer>
<ImageWrapper>
<ProductImage src={product.image} alt={product.name} />
<ProductImage src={product.url} alt={product.name} />
</ImageWrapper>
<ProductInfoSection>
<Star>
<StarRating rating={product.stars} />
<StarRating rating={product.rating} />
</Star>
<ProductHeader>
<TitleArea>
<ProductName>{product.name}</ProductName>

<ProductCategory>{product.category}</ProductCategory>
</TitleArea>
<ProductDescription>
{' '}
상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
추가 예정 상품설명- 추후 추가 예정 상품설명- 추후 추가 예정
상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
추가 예정 상품설명- 추후 추가 예정 상품설명- 추후 추가 예정
상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
추가 예정 상품설명- 추후 추가 예정 상품설명- 추후 추가 예정
상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
추가 예정 상품설명- 추후 추가 예정
</ProductDescription>
<ProductDescription> 상품설명- 추후 추가 예정</ProductDescription>
{/* {product.description} */}
</ProductHeader>
</ProductInfoSection>
Expand Down
Loading