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.

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

Chaeyeon 박채연 #3

Open
wants to merge 34 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
ffeb0cb
Feat: 차량 모든 종류 데이터 패치
Nov 2, 2022
fcf663b
Refactor: 전체 차량 불러오는 API 확인
Nov 2, 2022
4a8e4e1
Feat: Router 지정
Nov 2, 2022
e5501b6
Feat: page들 생성
Nov 2, 2022
45fd487
Fix: 다이나믹라우팅 추가
Nov 2, 2022
f0b3a04
Fix: 다이나믹라우터 수정
Nov 2, 2022
2ae6ba5
Design: CSS 초기화
Nov 2, 2022
c9838e8
Design: 공통 부분 Layout으로 감싸서 CSS 작업
Nov 2, 2022
12bfaec
Design: Layout에 padding 값 추가
Nov 2, 2022
3a679d8
Feat: Header 컴포넌트 생성
Nov 2, 2022
ae339c6
Design: 글로벌 스타일 수정
Nov 2, 2022
10e4677
Feat: 차량 종류인 버튼 구현
Nov 2, 2022
88d8dc4
Design: 버튼 감싸는 컴포넌트(TypeBtnList) 스타일링
Nov 2, 2022
16968a5
Chore: CarList 상태관리
Nov 2, 2022
a1e41f5
Feat: 버튼타입에 따라 차 종류 변경
Nov 2, 2022
5a087cc
Feat: API 호출
Nov 2, 2022
6240ad4
Remove: CarList에서 Home으로 변경으로 인한 삭제
Nov 2, 2022
ab67c4c
Rename: CarList에서 Home으로 변경
Nov 2, 2022
688a081
Design: CarList 생성으로 인한 Container 디자인 추가
Nov 2, 2022
f902ee1
Rename: CarList 추가
Nov 2, 2022
aeee1dd
Refactor: 컨텍스트 SUV 추가 & carList 삭제
Nov 2, 2022
01c4882
Design: 버튼 height 맞추기
Nov 2, 2022
556c7f3
Fix: API 연동 구현
Nov 2, 2022
46625ad
Design: CarList, CarListItem 스타일링
Nov 2, 2022
3df5b74
Chore: Context Provider 옮기기
Nov 2, 2022
d77a92b
Feat: Detail 정보 불러오기
Nov 2, 2022
101f1e3
Feat: date 계산
Nov 3, 2022
015663c
Design: 디테일 페이지 스타일링
Nov 3, 2022
2ff6ab5
Feat: 신규 아이템 시간 계산 구현
Nov 3, 2022
a630ef7
Desgin: 신규 아이템 스타일링
Nov 3, 2022
c84b17a
Chore: react-helmet 라이브러리 추가
Nov 3, 2022
dc34aea
Feat: 미리보기 SEO 적용
Nov 3, 2022
3fdf0ec
Refactor: carList undefined 처리
Nov 3, 2022
5e0ba4a
Chore: 이전으로
Nov 3, 2022
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
50 changes: 50 additions & 0 deletions package-lock.json

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

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"axios": "^1.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"styled-components": "^5.3.6",
Expand Down
Binary file added public/asset/images/ICON_Back.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/App.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import Router from "@/routes/index";

function App() {
return <h1>Hello React!</h1>;
return <Router />;
}

export default App;
20 changes: 20 additions & 0 deletions src/api/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import axios from "axios";
const instance = axios.create({
baseURL: process.env.REACT_APP_BASE_URL,
timeout: 4000,
});

instance.interceptors.request.use(
function (config) {
config.headers["Content-Type"] = "application/json; charset=utf-8";
return config;
},
function (error) {
return Promise.reject(error);
},
);

export const getCar = async (query) => {
const response = await instance.get("", { params: { segment: query } });
return response.data.payload;
};
13 changes: 13 additions & 0 deletions src/components/CarList/CarList.styled.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import styled from "styled-components";

export const Container = styled.section`
width: 100%;
`;

export const SBox = styled.section`
height: calc(100vh - 153px);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
`;
22 changes: 22 additions & 0 deletions src/components/CarList/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, { useContext } from "react";
import { CarListContext } from "@/context/CarContext";
import { Container, SBox } from "./CarList.styled";
import CarListItem from "../CarListItem/index";

function CarList() {
const { carList, isLoading } = useContext(CarListContext);

return (
<Container>
{isLoading ? (
<SBox>불러오는 중</SBox>
) : carList.length === 0 ? (
<SBox>차량이 없습니다.</SBox>
) : (
carList.map((car) => <CarListItem key={car.id} car={car} />)
)}
</Container>
);
}

export default CarList;
40 changes: 40 additions & 0 deletions src/components/CarListItem/CarListItem.styled.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import styled from "styled-components";

export const Container = styled.div`
padding: 20px;
width: 100%;
height: 120px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #000;
position: relative;
`;

export const New = styled.div`
position: absolute;
font-size: 12px;
color: #fff;
font-weight: 600;
border-radius: 15px;
padding: 4px 15px;
background-color: #0094ff;
top: 7px;
right: 7px;
`;

export const Title = styled.div`
font-size: 14px;
font-weight: 600;
line-height: 17px;
margin-bottom: 8px;
`;

export const Info = styled.div`
font-size: 12px;
line-height: 15px;
`;

export const Image = styled.img`
width: 152px;
height: 80px;
`;
27 changes: 27 additions & 0 deletions src/components/CarListItem/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React from "react";
import { Link } from "../../../node_modules/react-router-dom/dist/index";
import { convertNewItem } from "../../utils/index";
import { Container, Title, Info, Image, New } from "./CarListItem.styled";
function CarListItem({ car }) {
return (
<Link to={`/detail/${car.id}`}>
<Container>
<div>
{convertNewItem(car.createdAt) && <New>신규</New>}
<Title>
{car.attribute.brand}
<br />
{car.attribute.name}
</Title>
<Info>
{car.attribute.segment} / {car.attribute.fuelType}
<br />월 {car.amount} 원 부터
</Info>
</div>
<Image src={car.attribute.imageUrl} alt={car.attribute.name}></Image>
</Container>
</Link>
);
}

export default CarListItem;
27 changes: 27 additions & 0 deletions src/components/Header/Header.styled.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import styled from "styled-components";

export const Container = styled.header`
height: 60px;
border-bottom: 1px solid #000;
width: 100%;
padding: 0 25px;
display: flex;
justify-content: space-between;
align-items: center;
`;

export const BackBtn = styled.div`
width: 24px;
height: 24px;
background-image: url(/asset/images/ICON_Back.png);
`;

export const SBox = styled.div`
width: 24px;
height: 24px;
visibility: hidden;
`;

export const Title = styled.h2`
font-size: 17px;
`;
20 changes: 20 additions & 0 deletions src/components/Header/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from "react";
import { useNavigate } from "../../../node_modules/react-router-dom/dist/index";
import { Container, BackBtn, Title, SBox } from "./Header.styled";

function Header({ title, isBackBtn }) {
const navigate = useNavigate();
const goToBack = () => {
navigate(-1);
};

return (
<Container>
{isBackBtn ? <BackBtn onClick={goToBack} /> : <SBox />}
<Title>{title}</Title>
<SBox />
</Container>
);
}

export default Header;
7 changes: 7 additions & 0 deletions src/components/Layout/Layout.styled.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import styled from "styled-components";

export const SLayout = styled.section`
min-width: 360px;
max-width: 450px;
padding: 17px;
`;
16 changes: 16 additions & 0 deletions src/components/Layout/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";
import { Outlet } from "../../../node_modules/react-router-dom/dist/index";
import { CarListContextProvider } from "../../context/CarContext";
import { SLayout } from "./Layout.styled";

function Layout() {
return (
<CarListContextProvider>
<SLayout>
<Outlet />
</SLayout>
</CarListContextProvider>
);
}

export default Layout;
19 changes: 19 additions & 0 deletions src/components/TypeBtn/TypeBtn.styled.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import styled from "styled-components";

export const DefaultBtn = styled.button`
font-size: 14px;
padding: 5px 18px;
border-radius: 18px;
background-color: #d9d9d9;
font-weight: 600;
height: 28px;
`;

export const ActiveBtn = styled.button`
font-size: 14px;
padding: 5px 18px;
border-radius: 18px;
background-color: #000;
color: #fff;
height: 28px;
`;
12 changes: 12 additions & 0 deletions src/components/TypeBtn/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";
import { DefaultBtn, ActiveBtn } from "./TypeBtn.styled";

function TypeBtn({ text, isActive, handleCar }) {
return (
<div onClick={() => handleCar(text)}>
{!isActive ? <DefaultBtn>{text}</DefaultBtn> : <ActiveBtn>{text}</ActiveBtn>}
</div>
);
}

export default TypeBtn;
32 changes: 32 additions & 0 deletions src/components/TypeBtnList/TypeBtn.styled.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import styled from "styled-components";

export const Container = styled.section`
width: 100%;
padding: 12px 6px;
overflow-x: auto;
display: flex;
flex-wrap: nowrap;
border-bottom: 1px solid #000;
align-items: flex-end;

&::-webkit-scrollbar {
height: 2px;
}

&::-webkit-scrollbar-thumb {
background-color: #000;
}

&::-webkit-scrollbar-track {
background-color: #d9d9d9;
}

> div {
flex-shrink: 0;
margin-right: 6px;
}

> div :last-child {
margin-right: 0;
}
`;
27 changes: 27 additions & 0 deletions src/components/TypeBtnList/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React, { useContext } from "react";
import TypeBtn from "@/components/TypeBtn/index";
import { Container } from "./TypeBtn.styled";
import { CarListContext } from "../../context/CarContext";

function TypeBtnList() {
const { handleCarType, isFetch } = useContext(CarListContext);
const handleCar = (_text) => {
handleCarType(_text);
};
return (
<Container>
{isFetch.map((carType) => {
return (
<TypeBtn
key={carType.text}
text={carType.text}
isActive={carType.isActive}
handleCar={handleCar}
/>
);
})}
</Container>
);
}

export default TypeBtnList;
Loading