Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…tend into feature/#144
  • Loading branch information
LikeFireAndSky committed Nov 30, 2023
2 parents 5e43dc5 + c198b42 commit 91f1794
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 47 deletions.
1 change: 1 addition & 0 deletions src/api/Auth/query.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const useLogin = () => {
const mutation = useMutation({
mutationFn: (data: SignInInputs) => fetchSignin(data),
onSuccess: (data) => {
console.log(data);
setSessionStorage(data.accessToken, data.refreshToken);
setUserData((prev) => ({
...prev,
Expand Down
22 changes: 14 additions & 8 deletions src/components/Detail/ProductGallery/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,21 @@ const ProductGallery: React.FC<ProductGalleryProps> = ({ images }) => {
return (
<Styled.GalleryContainer>
<Styled.StyledSlider {...settings}>
{images.map(({ id, imageUrl }) => (
<Styled.SlideContainer key={id}>
<Styled.ProductImage
src={imageUrl}
alt={`Product Image ${id}`}
onError={handleError}
/>
{images.length > 0 ? (
images.map(({ id, imageUrl }) => (
<Styled.SlideContainer key={id}>
<Styled.ProductImage
src={imageUrl}
alt={`Product Image ${id}`}
onError={handleError}
/>
</Styled.SlideContainer>
))
) : (
<Styled.SlideContainer>
<Styled.ProductImage src={Empty} alt="이미지 없음" />
</Styled.SlideContainer>
))}
)}
</Styled.StyledSlider>
</Styled.GalleryContainer>
);
Expand Down
19 changes: 17 additions & 2 deletions src/components/Detail/QuantitySelector/QuantitySelector.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ export const SelectorContainer = styled.div`

export const InfoContainer = styled.div`
display: flex;
flex-direction: row;
align-items: center;
flex-direction: column;
align-items: start;
gap: 8px;
`;

Expand Down Expand Up @@ -88,3 +88,18 @@ export const PlusButton = styled(Button)`
40% 2px,
2px 40%;
`;
export const PriceLabelContainer = styled.div`
display: flex;
flex-direction: row;
align-items: center;
gap: 40px;
`;
export const InfoText = styled.div`
font-size: 0.8rem;
align-items: center;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.04375rem;
color: #646464;
`;
13 changes: 7 additions & 6 deletions src/components/Detail/QuantitySelector/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import React, { useState } from "react";
import * as Styled from "./QuantitySelector.styles";
import { QuantitySelectorProps } from "./QuantitySelector.types";
import formatNumber from "../../../utils/formatNumber";

const QuantitySelector: React.FC<QuantitySelectorProps> = ({
initialQuantity,
onQuantityChange,
price,
capacity,
}) => {
const [quantity, setQuantity] = useState(initialQuantity);
Expand All @@ -28,10 +26,13 @@ const QuantitySelector: React.FC<QuantitySelectorProps> = ({
return (
<Styled.SelectorContainer>
<Styled.InfoContainer>
<Styled.LabelText>숙박 인원 선택</Styled.LabelText>
<Styled.PriceText>
1인당 가격 ₩{price !== undefined ? formatNumber(price) : "정보 없음"}
</Styled.PriceText>
<Styled.PriceLabelContainer>
<Styled.LabelText>숙박 인원 선택</Styled.LabelText>
<Styled.PriceText>최대 {capacity}</Styled.PriceText>
</Styled.PriceLabelContainer>
<Styled.InfoText>
* 숙박 인원은 금액에 반영되지 않습니다
</Styled.InfoText>
</Styled.InfoContainer>
<Styled.ControlContainer>
<Styled.MinusButton onClick={handleDecrease} disabled={quantity === 1}>
Expand Down
39 changes: 19 additions & 20 deletions src/hooks/useMainListFetch.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,29 @@ interface ListDataResponse {
data: AccommodationData[];
}

// 받아온 숙소 데이터를 무작위로 셔플
function shuffleList(array: AccommodationData[]): AccommodationData[] {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

// 내 위치 기반 주변 숙소 리스트 출력
export const useFetchAccomByRegion = (cityCode: number) => {
return useQuery({
queryKey: ["accommodations", "byRegion", cityCode],
queryFn: async () => {
const data = await baseInstance.get<ListDataResponse>(
`accommodations?region=${cityCode}`,
`accommodations?region01=${cityCode}`,
);

const shuffledData = shuffleList(data.data.data);
const selectedData = shuffledData.slice(0, 3);

console.log("내 지역코드", cityCode);
console.log("내 주변 숙소", data.data.data);
return data.data.data;
return selectedData;
},
});
};
Expand Down Expand Up @@ -44,10 +56,11 @@ export const useFetchAccomWithParking = () => {
queryKey: ["accommodations", "withParking"],
queryFn: async () => {
const data = await baseInstance.get<ListDataResponse>(
"accommodations?categoryParking=1",
"accommodations?category-parking=1",
);
console.log("주차 가능 숙소", data.data);
return data.data.data;
const shuffledData = shuffleList(data.data.data);
const selectedData = shuffledData.slice(0, 3);
return selectedData;
},
});
};
Expand All @@ -58,21 +71,7 @@ export const useFetchAllAccommodations = () => {
queryKey: ["accommodations", "all"],
queryFn: async () => {
const data = await baseInstance.get<ListDataResponse>("accommodations");
console.log("모든 숙소 리스트", data.data);
return data.data.data;
},
});
};

// // 숙소를 누르면 해당 숙소 소개 페이지로 이동
// export const useFetchSelectedAccom = (id: number) => {
// return useQuery({
// queryKey: ["accommodations"],
// queryFn: async () => {
// const data = await baseInstance.get<ListDataResponse>(
// `/accommodations/${id}`,
// );
// return data.data.data;
// },
// });
// };
11 changes: 11 additions & 0 deletions src/pages/Main/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,19 @@ import { AccommodationList } from "../../components/Main/AccommodationList";
import { useRef } from "react";
import useGeolocation from "../../hooks/useGeolocation";
import { regions } from "../../store/searchSelectorData";
import { useRecoilState } from "recoil";
import {
checkInDateState,
checkOutDateState,
} from "../../store/checkinCheckOutAtom";

const Main = () => {
//테스트
const [, setCheckInDate] = useRecoilState(checkInDateState);
const [, setCheckOutDate] = useRecoilState(checkOutDateState);
setCheckInDate(null);
setCheckOutDate(null);

const { cityCode } = useGeolocation();
const cityName = regions.find((region) => region.value === cityCode)?.name;

Expand Down
4 changes: 2 additions & 2 deletions src/pages/MyPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import { useNavigate } from "react-router-dom";
import { useEffect } from "react";

const MyPage = () => {
const token = sessionStorage.getItem("AccessToken");
const token = sessionStorage.getItem("refreshToken");
const navigate = useNavigate();

useEffect(() => {
if (!token) {
navigate("/signin");
}
}, []);
}, [token]);

return (
<Styled.Container>
Expand Down
18 changes: 9 additions & 9 deletions vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ export default defineConfig({
},
},
},
build: {
minify: "terser",
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
},
// build: {
// minify: "terser",
// terserOptions: {
// compress: {
// drop_console: true,
// drop_debugger: true,
// },
// },
// },
});

0 comments on commit 91f1794

Please sign in to comment.