Skip to content

Commit

Permalink
Merge pull request Yanabada#33 from Yanabada/feature/Yanabada#27
Browse files Browse the repository at this point in the history 
Design: 전체 상품 리스트 화면 구현
  • Loading branch information
@wkdtnqls0506
wkdtnqls0506 authored Jan 12, 2024
2 parents 6562804 + 3e717a3 commit 5c87c2c
Show file tree
Hide file tree
Showing 21 changed files with 847 additions and 5 deletions.
23 changes: 23 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,15 @@
"*.{js,ts}": "eslint --fix"
},
"dependencies": {
"@ariakit/react": "^0.3.13",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@tanstack/react-query": "^5.14.6",
"@tanstack/react-query-devtools": "^5.14.7",
"axios": "^1.6.2",
"popmotion": "^11.0.5",
"date-fns": "^3.0.6",
"framer-motion": "^10.16.16",
"popmotion": "^11.0.5",
"react": "^18.2.0",
"react-datepicker": "^4.25.0",
"react-dom": "^18.2.0",
Expand Down
5 changes: 5 additions & 0 deletions src/assets/icons/Star.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/navBar/bottomNavBar/NavButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const NavButton = ({ path }: NavButtonProps) => {

const tapList = new Map([
["/", { label: "홈", component: <NavHome /> }],
["/search", { label: "상품리스트", component: <NavAll /> }],
["/products", { label: "상품리스트", component: <NavAll /> }],
["/sell", { label: "등록", component: <NavProduct /> }],
["/chat", { label: "채팅", component: <NavChat />, showBadge: true }],
["/myPage", { label: "마이", component: <NavMy />, showBadge: true }]
Expand Down
2 changes: 1 addition & 1 deletion src/components/navBar/bottomNavBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const BottomNavBar = () => {
<div>
<S.BottomNavWrapper>
<NavButton path="/" />
<NavButton path="/search" />
<NavButton path="/products" />
<NavButton path="/sell" />
<NavButton path="/chat" />
<NavButton path="/myPage" />
Expand Down
3 changes: 2 additions & 1 deletion src/components/navBar/upperNavBar/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ export const UpperNavWrapper = styled.div`
text-align: center;
background-color: transparent;
background-color: #fff;
z-index: 999;
&.hasBorder {
border-bottom: 1px solid ${(props) => props.theme.colors.gray[100]};
Expand Down
31 changes: 31 additions & 0 deletions src/pages/products/components/CategoryTab/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as S from "./style";
import { useLocation, Link } from "react-router-dom";

const categoryList = [
{ id: "ALL", name: "전체", search: "" },
{ id: "HOTEL_RESORT", name: "호텔/리조트", search: "?category=HOTEL_RESORT" },
{ id: "MOTEL", name: "모텔", search: "?category=MOTEL" },
{ id: "PENSION", name: "펜션", search: "?category=PENSION" },
{ id: "GUESTHOUSE", name: "게스트하우스", search: "?category=GUESTHOUSE" },
{ id: "POOL_VILLA", name: "풀빌라", search: "?category=POOL_VILLA" }
];

const CategoryTab = () => {
const { search } = useLocation();

return (
<S.CategoryContainer>
{categoryList.map((category) => {
return (
<Link to={category.search} key={category.id}>
<S.CategoryList className={search === category.search ? "selected_category" : ""}>
{category.name}
</S.CategoryList>
</Link>
);
})}
</S.CategoryContainer>
);
};

export default CategoryTab;
22 changes: 22 additions & 0 deletions src/pages/products/components/CategoryTab/style.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import styled from "@emotion/styled";

export const CategoryContainer = styled.ul`
display: flex;
justify-content: space-around;
width: 100%;
gap: 1rem;
padding: 0rem 1rem 0.75rem 1rem;
border-bottom: 1px solid ${({ theme }) => theme.colors.gray[300]};
.selected_category {
color: ${({ theme }) => theme.colors.gray[900]};
${({ theme }) => theme.text.button1};
}
`;

export const CategoryList = styled.li`
color: ${({ theme }) => theme.colors.gray[600]};
${({ theme }) => theme.text.button2};
white-space: nowrap;
cursor: pointer;
`;
204 changes: 204 additions & 0 deletions src/pages/products/components/Items/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
import * as S from "./style";
import MapIcon from "assets/map.svg?react";
import StarIcon from "assets/icons/Star.svg?react";

const Items = () => {
return (
<S.Container>
<S.ItemContainer>
<S.ImageContainer>
<S.Image src="https://bit.ly/2Z4KKcF" />
<S.DiscountRate>70%</S.DiscountRate>
<S.LocationContainer>
<MapIcon />
<S.Location>강원도 강릉시</S.Location>
</S.LocationContainer>
</S.ImageContainer>
<S.InformationContainer>
<S.ProductName>속초 굿모닝 호텔 앤 리조트</S.ProductName>
<S.RoomName>Forest Tower Deluxe King</S.RoomName>
<S.Period>12/25 ~ 12/26 (1박)</S.Period>
<S.StarUserContainer>
<S.StarContainer>
<StarIcon />
<S.StarRating>4.4</S.StarRating>
</S.StarContainer>
<S.UserContainer>
<S.UserIcon />
<S.UserNumber>기준 2명 / 최대 4명</S.UserNumber>
</S.UserContainer>
</S.StarUserContainer>
<S.RightInnerContainer>
<S.TimerNegoContainer>
<S.TimerContainer>
<S.TimerIcon />
<S.TimerText>3일 15시간 23분</S.TimerText>
</S.TimerContainer>
<S.NegoContainer>
<S.NegoText>가격제안가능</S.NegoText>
</S.NegoContainer>
</S.TimerNegoContainer>
<S.PriceContainer>
<S.PriceText>원가</S.PriceText>
<S.Price>2,000,000원</S.Price>
</S.PriceContainer>
<S.PriceContainer>
<S.PriceText>구매가</S.PriceText>
<S.Price>2,000,000원</S.Price>
</S.PriceContainer>
<S.PriceContainer>
<S.PriceText>판매가</S.PriceText>
<S.Price className="sellingPrice">1,264,000원</S.Price>
</S.PriceContainer>
</S.RightInnerContainer>
</S.InformationContainer>
</S.ItemContainer>
<S.ItemContainer>
<S.ImageContainer>
<S.Image src="https://bit.ly/2Z4KKcF" />
<S.DiscountRate>70%</S.DiscountRate>
<S.LocationContainer>
<MapIcon />
<S.Location>강원도 강릉시</S.Location>
</S.LocationContainer>
</S.ImageContainer>
<S.InformationContainer>
<S.ProductName>속초 굿모닝 호텔 앤 리조트</S.ProductName>
<S.RoomName>Forest Tower Deluxe King</S.RoomName>
<S.Period>12/25 ~ 12/26 (1박)</S.Period>
<S.StarUserContainer>
<S.StarContainer>
<StarIcon />
<S.StarRating>4.4</S.StarRating>
</S.StarContainer>
<S.UserContainer>
<S.UserIcon />
<S.UserNumber>기준 2명 / 최대 4명</S.UserNumber>
</S.UserContainer>
</S.StarUserContainer>
<S.RightInnerContainer>
<S.TimerNegoContainer>
<S.TimerContainer>
<S.TimerIcon />
<S.TimerText>3일 15시간 23분</S.TimerText>
</S.TimerContainer>
<S.NegoContainer>
<S.NegoText>가격제안가능</S.NegoText>
</S.NegoContainer>
</S.TimerNegoContainer>
<S.PriceContainer>
<S.PriceText>원가</S.PriceText>
<S.Price>2,000,000원</S.Price>
</S.PriceContainer>
<S.PriceContainer>
<S.PriceText>구매가</S.PriceText>
<S.Price>2,000,000원</S.Price>
</S.PriceContainer>
<S.PriceContainer>
<S.PriceText>판매가</S.PriceText>
<S.Price className="sellingPrice">1,264,000원</S.Price>
</S.PriceContainer>
</S.RightInnerContainer>
</S.InformationContainer>
</S.ItemContainer>
<S.ItemContainer>
<S.ImageContainer>
<S.Image src="https://bit.ly/2Z4KKcF" />
<S.DiscountRate>70%</S.DiscountRate>
<S.LocationContainer>
<MapIcon />
<S.Location>강원도 강릉시</S.Location>
</S.LocationContainer>
</S.ImageContainer>
<S.InformationContainer>
<S.ProductName>속초 굿모닝 호텔 앤 리조트</S.ProductName>
<S.RoomName>Forest Tower Deluxe King</S.RoomName>
<S.Period>12/25 ~ 12/26 (1박)</S.Period>
<S.StarUserContainer>
<S.StarContainer>
<StarIcon />
<S.StarRating>4.4</S.StarRating>
</S.StarContainer>
<S.UserContainer>
<S.UserIcon />
<S.UserNumber>기준 2명 / 최대 4명</S.UserNumber>
</S.UserContainer>
</S.StarUserContainer>
<S.RightInnerContainer>
<S.TimerNegoContainer>
<S.TimerContainer>
<S.TimerIcon />
<S.TimerText>3일 15시간 23분</S.TimerText>
</S.TimerContainer>
<S.NegoContainer>
<S.NegoText>가격제안가능</S.NegoText>
</S.NegoContainer>
</S.TimerNegoContainer>
<S.PriceContainer>
<S.PriceText>원가</S.PriceText>
<S.Price>2,000,000원</S.Price>
</S.PriceContainer>
<S.PriceContainer>
<S.PriceText>구매가</S.PriceText>
<S.Price>2,000,000원</S.Price>
</S.PriceContainer>
<S.PriceContainer>
<S.PriceText>판매가</S.PriceText>
<S.Price className="sellingPrice">1,264,000원</S.Price>
</S.PriceContainer>
</S.RightInnerContainer>
</S.InformationContainer>
</S.ItemContainer>
<S.ItemContainer>
<S.ImageContainer>
<S.Image src="https://bit.ly/2Z4KKcF" />
<S.DiscountRate>70%</S.DiscountRate>
<S.LocationContainer>
<MapIcon />
<S.Location>강원도 강릉시</S.Location>
</S.LocationContainer>
</S.ImageContainer>
<S.InformationContainer>
<S.ProductName>속초 굿모닝 호텔 앤 리조트</S.ProductName>
<S.RoomName>Forest Tower Deluxe King</S.RoomName>
<S.Period>12/25 ~ 12/26 (1박)</S.Period>
<S.StarUserContainer>
<S.StarContainer>
<StarIcon />
<S.StarRating>4.4</S.StarRating>
</S.StarContainer>
<S.UserContainer>
<S.UserIcon />
<S.UserNumber>기준 2명 / 최대 4명</S.UserNumber>
</S.UserContainer>
</S.StarUserContainer>
<S.RightInnerContainer>
<S.TimerNegoContainer>
<S.TimerContainer>
<S.TimerIcon />
<S.TimerText>3일 15시간 23분</S.TimerText>
</S.TimerContainer>
<S.NegoContainer>
<S.NegoText>가격제안가능</S.NegoText>
</S.NegoContainer>
</S.TimerNegoContainer>
<S.PriceContainer>
<S.PriceText>원가</S.PriceText>
<S.Price>2,000,000원</S.Price>
</S.PriceContainer>
<S.PriceContainer>
<S.PriceText>구매가</S.PriceText>
<S.Price>2,000,000원</S.Price>
</S.PriceContainer>
<S.PriceContainer>
<S.PriceText>판매가</S.PriceText>
<S.Price className="sellingPrice">1,264,000원</S.Price>
</S.PriceContainer>
</S.RightInnerContainer>
</S.InformationContainer>
</S.ItemContainer>
</S.Container>
);
};

export default Items;
Loading

0 comments on commit 5c87c2c

Please sign in to comment.