Skip to content

Commit

Permalink
[Chore] build error 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
mac authored and mac committed Jun 5, 2024
1 parent 19ee3a6 commit 8ae0bd5
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 204 deletions.
111 changes: 1 addition & 110 deletions src/app/(search)/map/components/ClubInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,3 @@
import 'swiper/swiper-bundle.css';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Swiper as SwiperClass } from 'swiper';
import { useState } from 'react';
import { useRecoilValue } from 'recoil';
import { currentBuildingState } from '../../atom/search';
import { useFormattedDate } from '../hooks/getCreateAt';

export default function ClubInfo() {
const [swiper, setSwiper] = useState<SwiperClass | null>(null);
const [currentIndex, setCurrentIndex] = useState(0);
const currentBuilding = useRecoilValue(currentBuildingState);
const club = currentBuilding?.clubs;

const handleNext = () => {
if (swiper !== null) {
swiper.slideNext();
}
};

const handlePrev = () => {
if (swiper !== null) {
swiper.slidePrev();
}
};
return (
<div className="flex flex-col items-center relative mb-4">
<div className="flex justify-between items-center w-full mb-4 px-3">
<p className="tmb:text-[1rem] md:text-lg font-bold leading-7 ">소모임</p>
</div>
<div className="flex w-full overflow-hidden relative">
<Swiper
slidesPerView={1}
spaceBetween={-90}
loop={true}
initialSlide={currentIndex}
onSwiper={setSwiper}
onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
>
{club?.map((club, index) => (
<SwiperSlide key={index}>
{/* 나중에 소모임 이미지 들어감 */}
<div className="bg-gray-300 mb:w-[14rem] md:w-[18.75rem] mb:h-[7rem] md:h-[9.375rem] rounded-t-lg"></div>
<div className="p-[0.7rem] mb:w-[14rem] md:w-[18.75rem] mb:h-[9.0625rem] md:h-[9.625rem] relative bg-white rounded-b-lg shadow-lg">
<div className="flex flex-col w-[16.75rem] gap-1 ">
<span className="font-bold leading-[1.375rem]">
{club.title}
</span>
<div className="flex flex-col gap-1 mb:w-[12rem] md:w-[16.75rem]">
{/* TODO : 오버되는 글씨 ... 추가하기 */}
<span className="mb:text-[0.875rem] md:text-[1rem] leading-[1.25rem]">
안녕하세요 음악을 사랑하는 사람들이 모인 모임입니다.
</span>
<div className="flex gap-2">
<div className="flex items-center gap-2">
<Image
src="/svg/map/location.svg"
width={24}
height={24}
alt="위치 이미지"
/>
<p className="text-xs font-medium leading-5">
{currentBuilding?.building.location}
</p>
</div>
<div className="flex items-center gap-2">
<Image
src="/svg/map/freind.svg"
width={24}
height={24}
alt="친구 이미지"
/>
<p className="text-xs font-medium leading-5">5/10</p>
</div>
</div>
</div>

</div>
<button
className="mb:text-[0.75rem] mt-1 md:text-[0.9rem] p-2 font-bold rounded-lg bg-[#F9D91B] inline-block leading-none whitespace-nowrap"
>
{club.category}
</button>
</div>
</SwiperSlide>

))}

</Swiper>
</div>
<div className="absolute flex justify-between items-center top-1/2 transform -translate-y-1/2 w-[110%] px-2 z-50">
<button onClick={handlePrev} className="focus:outline-none">
<Image
src="/svg/map/review_arrow_left.svg"
alt="arrow_left"
width={40}
height={40}
/>
</button>
<button onClick={handleNext} className="focus:outline-none">
<Image
src="/svg/map/review_arrow_right.svg"
alt="arrow_right"
width={40}
height={40}
/>
</button>
</div>
</div>
);
return <div>zmffjq</div>;
}
8 changes: 5 additions & 3 deletions src/app/(search)/map/components/Marker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,11 @@ export default function Marker() {
fetchBuildingsData();
}, [setOfficeBuildings]);

const overlays = document.querySelectorAll('.overlay');
overlays.forEach((overlays) => {
overlays.parentNode?.removeChild(overlays);
useEffect(() => {
const overlays = document.querySelectorAll('.overlay');
overlays.forEach((overlays) => {
overlays.parentNode?.removeChild(overlays);
});
});
const buildingOverlayContent = officeBuildings?.map((office) => ({
buildingId: office.id,
Expand Down
92 changes: 1 addition & 91 deletions src/app/(search)/map/components/ReviewInfo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,3 @@
import 'swiper/swiper-bundle.css';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Swiper as SwiperClass } from 'swiper';
import { useState } from 'react';
import { useRecoilValue } from 'recoil';
import { currentBuildingState } from '../../atom/search';
import { useFormattedDate } from '../hooks/getCreateAt';

export default function ReviewInfo() {
const [swiper, setSwiper] = useState<SwiperClass | null>(null);
const [currentIndex, setCurrentIndex] = useState(0);
const currentBuilding = useRecoilValue(currentBuildingState);
const reviews = currentBuilding?.reviews.reviews;
const reviewDate = currentBuilding?.reviews.created_at;

const formattedDate = useFormattedDate({ createdAt: reviewDate });

const handleNext = () => {
if (swiper !== null) {
swiper.slideNext();
}
};

const handlePrev = () => {
if (swiper !== null) {
swiper.slidePrev();
}
};
return (
<div className="flex flex-col items-center relative mb-4 ">
<div className="flex justify-between items-center w-full mb-4 px-3">
<p className="mb:text-[1rem] md:text-lg font-bold leading-7 ">리뷰</p>
</div>
<div className="flex w-full overflow-hidden">
<Swiper
slidesPerView={1}
spaceBetween={-90}
loop={true}
initialSlide={currentIndex}
onSwiper={setSwiper}
onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
>
{' '}
{reviews?.map((review, index) => (
<SwiperSlide key={index}>
<div className="p-4 mb:w-[14rem] md:w-[18.75rem] mb:h-[6.8125rem] md:h-[7.625rem] relative bg-white rounded-lg shadow-lg">
<div className="flex gap-2 justify-start mb:w-[12rem] md:w-[13.75rem] items-center mb-2">
<div className="leading-[1.375rem]">{review.reviewer}</div>
<div className="flex">
{Array.from({ length: review.rating }).map((_, sdx) => (
<Image
key={sdx}
src="/svg/map/star.svg"
width={18}
height={18}
alt="리뷰 별점 이미지"
/>
))}
</div>
<p className="text-gray-300 text-[0.625rem]">{formattedDate}</p>
</div>
<div className="md:text-lg mb:text-sm h-[2.8125rem]">
{review.content.length > 30
? review.content.slice(0, 30) + '...'
: review.content}
</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
<div className="absolute flex justify-between top-20 w-[110%] z-50">
<button onClick={handlePrev} className="">
<Image
src="/svg/map/review_arrow_left.svg"
alt="arrow_left"
width={40}
height={40}
/>
</button>
<button onClick={handleNext} className="">
<Image
src="/svg/map/review_arrow_right.svg"
alt="arrow_right"
width={40}
height={40}
/>
</button>
</div>
</div>
);
return <div>리뷰인포</div>;
}

0 comments on commit 8ae0bd5

Please sign in to comment.