-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement bus rental details layout
- Loading branch information
Showing
16 changed files
with
654 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| export const REGIONS = [ | ||
| '서울', | ||
| '경기', | ||
| '인천', | ||
| '강원', | ||
| '세종', | ||
| '천안', | ||
| '청주', | ||
| '대전', | ||
| '대구', | ||
| '경북', | ||
| '부산', | ||
| '울산', | ||
| '마산', | ||
| '창원', | ||
| '경남', | ||
| '광주', | ||
| '전북', | ||
| '전주', | ||
| '전남', | ||
| ] as const; | ||
|
|
||
| export const CONCERT_SORT = ['최근 공연순', '인기순'] as const; | ||
| export const DATE_SORT = ['최신순', '오래된순', '마감순'] as const; | ||
|
|
||
| export type Region = (typeof REGIONS)[number]; | ||
| export type ConcertSort = (typeof CONCERT_SORT)[number]; | ||
| export type DateSort = (typeof DATE_SORT)[number]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import axios from 'axios'; | ||
|
|
||
| import type { AllRentalDetail, RentalAccountResponse, RentalDetailResponse } from 'types'; | ||
|
|
||
| // 추후 api 로직 분리 | ||
| const fetchRentalDetails = (id: string) => { | ||
| return axios.get<RentalDetailResponse>(`/api/v1/rents/${id}`); | ||
| }; | ||
|
|
||
| const fetchDepositAccount = (id: string) => { | ||
| return axios.get<RentalAccountResponse>(`/api/v1/rents/${id}/deposit-account`); | ||
| }; | ||
|
|
||
| export const useRentalDetails = (id: string) => { | ||
| // 로그인 여부 (추후 수정) | ||
| const isLoggedIn = true; | ||
|
|
||
| const fetchDetails = async (): Promise<AllRentalDetail> => { | ||
| const detailPromise = await fetchRentalDetails(id); | ||
| const accountPromise = isLoggedIn ? fetchDepositAccount(id) : Promise.resolve(null); | ||
|
|
||
| const [detailResponse, accountResponse] = await Promise.all([detailPromise, accountPromise]); | ||
| const rentalDetails = detailResponse.data.result; | ||
| const depositAccount = accountResponse?.data.result.depositAccount ?? null; | ||
|
|
||
| return { ...rentalDetails, depositAccount }; | ||
| }; | ||
|
|
||
| return useQuery<AllRentalDetail>({ | ||
| queryKey: ['rentalDetail', id], | ||
| queryFn: fetchDetails, | ||
| enabled: !!id, | ||
| }); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,47 @@ | ||
| import { http, HttpResponse } from 'msw'; | ||
|
|
||
| export const handlers = []; | ||
| export const handlers = [ | ||
| http.get('/api/v1/rents/1', () => { | ||
| return HttpResponse.json({ | ||
| timeStamp: '2024-12-03T00:13:56.217Z', | ||
| code: '200', | ||
| message: 'Success', | ||
| result: { | ||
| concertName: 'DAY6 3RD WORLD TOUR, FOREVER YOUNG [인천]', | ||
| imageUrl: 'https://img1.newsis.com/2024/03/18/NISI20240318_0001504432_web.jpg', | ||
| title: '데이식스(DAY6) FOREVER YOUNG 콘서트 청주 차대절 🎸', | ||
| artistName: 'DAY6', | ||
| region: '청주', | ||
| boardingArea: '스타벅스 청주터미널점', | ||
| dropOffArea: '인스파이어리조트 (아레나)', | ||
| upTime: '09:00', | ||
| downTime: '23:00', | ||
| rentBoardingDates: ['2024-09-20', '2024-09-21', '2024-09-22'], | ||
| busSize: 'LARGE', | ||
| busType: 'DELUXE', | ||
| maxPassenger: 28, | ||
| roundPrice: 45000, | ||
| upTimePrice: 45000, | ||
| downTimePrice: 45000, | ||
| recruitmentCount: 25, | ||
| participants: [25, 12, 18], | ||
| endDate: '2024-12-26', | ||
| chatUrl: 'https://open.kakao.com/o/abcDeF', | ||
| refundType: 'ADDITIONAL_DEPOSIT', | ||
| information: `❗입금 후 폼 작성 부탁드립니다.❗\n\n 왕복, 편도 가격 동일합니다. | ||
| 양도나 분할 탑승 신청자분들은 직접 짝 구해주시고 신청해주시길 바랍니다. (입금은 한분께서 일괄 입금 부탁드리며 오픈카톡을 통해 확인 내용 알려주시길 바랍니다.)\n | ||
| 📌 개인이 진행하는 차대절이기 때문에 인원 미달, 13번 이후 입금자를 제외한 환불은 절대 불가하오며 이 부분을 숙지하지 못한 사항에 대해서 생기는 불이익은 책임지지 않습니다.이점 유의하시고 신청 바랍니다.`, | ||
| }, | ||
| }); | ||
| }), | ||
| http.get('/api/v1/rents/1/deposit-account', () => { | ||
| return HttpResponse.json({ | ||
| timeStamp: '2024-12-03T02:38:22.994Z', | ||
| code: '200', | ||
| message: 'success', | ||
| result: { | ||
| depositAccount: '우리은행 1242264211943 김데식', | ||
| }, | ||
| }); | ||
| }), | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import styled from '@emotion/styled'; | ||
|
|
||
| import { BodyRegularText } from 'styles/Typography'; | ||
|
|
||
| interface BusTimeProps { | ||
| upTime: string; | ||
| downTime: string; | ||
| boardingArea: string; | ||
| dropOffArea: string; | ||
| } | ||
|
|
||
| const TimeContainer = styled.div``; | ||
|
|
||
| const TimeItem = styled.div` | ||
| display: flex; | ||
| &:not(:last-of-type) { | ||
| margin-bottom: 1.6rem; | ||
| } | ||
| `; | ||
|
|
||
| const Label = styled(BodyRegularText)` | ||
| margin-right: 1.6rem; | ||
| color: ${({ theme }) => theme.colors.dark[200]}; | ||
| `; | ||
|
|
||
| const Time = styled(BodyRegularText)` | ||
| margin-right: 0.8rem; | ||
| color: ${({ theme }) => theme.colors.dark[200]}; | ||
| `; | ||
|
|
||
| const BusTime = ({ upTime, downTime, boardingArea, dropOffArea }: BusTimeProps) => { | ||
| const timeData = [ | ||
| { label: '상행', time: upTime, area: boardingArea }, | ||
| { label: '하행', time: downTime, area: dropOffArea }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <TimeContainer> | ||
| {timeData.map(({ label, time, area }) => ( | ||
| <TimeItem> | ||
| <Label>{label}</Label> | ||
| <Time>{time}</Time> | ||
| <BodyRegularText>{area}</BodyRegularText> | ||
| </TimeItem> | ||
| ))} | ||
| </TimeContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default BusTime; |
Oops, something went wrong.