Skip to content

Commit

Permalink
Merge pull request #168 from official-Trippy/feature/#130
Browse files Browse the repository at this point in the history 
fix : 충돌해결
  • Loading branch information
@YunHwanCho
YunHwanCho authored Sep 28, 2024
2 parents a6de1c6 + fd997dc commit 3921f48
Showing 1 changed file with 52 additions and 90 deletions.
142 changes: 52 additions & 90 deletions src/components/ootd/OotdDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,6 @@ import DefaultImage from "../../../public/defaultImage.svg";
import { getWeatherStatusInfo } from "@/constants/weatherTransition";
import RecommendedSpots from "./RecommendedSpot";
import RecommendedSpot from "./RecommendedSpot";



import { RecommendedSpotsResponse } from "@/types/recommend";
import SkeletonRecommendOotdPost from "../pages/ootd/SkeletonRecommendOotdPost";
import SkeletonOotdDetailRecommend from "../pages/ootd/SkeletonOotdDetailRecommend";
Expand All @@ -60,17 +57,18 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {

console.log("Current post id:", id);


const { data: recommendedSpots, isLoading: isSpotsLoading, error: spotsError } = useQuery<RecommendedSpotsResponse>(
['recommendedSpots', id],
const {
data: recommendedSpots,
isLoading: isSpotsLoading,
error: spotsError,
} = useQuery<RecommendedSpotsResponse>(
["recommendedSpots", id],
() => fetchRecommendedSpots(id),
{
enabled: !!id,
refetchOnWindowFocus: false,
}
);



const [isBookmarked, setIsBookmarked] = useState<boolean>(false);

Expand Down Expand Up @@ -115,6 +113,10 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {

const router = useRouter();

const handleTagClick = (tag: string) => {
router.push(`/search/${encodeURIComponent(tag)}`); // Redirect to the search page with the clicked tag
};

const handleProfileClick = () => {
if (accessToken) {
if (ootdItem.member.memberId == userInfo?.memberId) {
Expand Down Expand Up @@ -176,25 +178,22 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
}
};


const handleLocationClick = (location: string) => {
if (!location) return;

if (isKoreanLocation(location)) {
// 카카오맵으로 이동 (한국 주소)
const encodedLocation = encodeURIComponent(location);
const kakaoMapUrl = `https://map.kakao.com/link/search/${encodedLocation}`;
window.open(kakaoMapUrl, '_blank');
window.open(kakaoMapUrl, "_blank");
} else {
// 구글맵으로 이동 (해외 주소)
const encodedLocation = encodeURIComponent(location);
const googleMapUrl = `https://www.google.com/maps/search/?api=1&query=${encodedLocation}`;
window.open(googleMapUrl, '_blank');
window.open(googleMapUrl, "_blank");
}
};



if (isLoading) {
return null;
}
Expand Down Expand Up @@ -242,8 +241,8 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
};

const settings = {
dots: ootdItem.post.images.length > 1,
infinite: ootdItem.post.images.length > 1,
dots: ootdItem.post.images.length > 1,
infinite: ootdItem.post.images.length > 1,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
Expand All @@ -252,48 +251,22 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
prevArrow: <SamplePrevArrow />,
};

const handleTagClick = (tag: string) => {
router.push(`/search/${encodeURIComponent(tag)}`); // Redirect to the search page with the clicked tag
};

return (
<>
<div className="w-[90%] sm-700:w-[66%] sm-700:max-w-7xl mx-auto">
<div className="w-full mx-auto">

<div className="py-12 flex items-center justify-between">
{/* 왼쪽 사용자 정보 및 location/weather 부분 */}
<div className="flex items-center flex-shrink min-w-0 mr-auto">
<div className="relative w-[55px] h-[55px] flex-shrink-0">
<Image
src={ootdItem.member.profileUrl || DefaultImage}
alt="사용자 프로필"
layout="fill"
objectFit="cover"
className="rounded-full cursor-pointer"
onClick={handleProfileClick}
/>
</div>
<div className="ml-4 min-w-0">
<span
className="block font-bold text-[16px] ml-[2px] cursor-pointer truncate"
onClick={handleProfileClick}
>
{ootdItem.member.nickName}
</span>
<div className="flex items-center gap-2">
<div className="flex-shrink-0">
<Image width={16} height={16} src={LocationIcon} alt="location" />
</div>
<div className="whitespace-nowrap overflow-hidden text-ellipsis">
<span
className="block text-[#9D9D9D] truncate cursor-pointer"
onClick={() => handleLocationClick(ootdItem.post.location || '정보 없음')}
>
{ootdItem.post.location || '정보 없음'}
</span>
</div>

<div className="py-12 flex items-center justify-between">
{/* 왼쪽 사용자 정보 및 location/weather 부분 */}
<div className="flex items-center flex-shrink min-w-0 mr-auto">
<div className="relative w-[55px] h-[55px] flex-shrink-0">
<Image
src={ootdItem.member.profileUrl || DefaultImage}
alt="사용자 프로필"
layout="fill"
objectFit="cover"
className="rounded-full cursor-pointer"
onClick={handleProfileClick}
/>
</div>
<div className="ml-4 min-w-0">
<span
Expand All @@ -312,7 +285,14 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
/>
</div>
<div className="whitespace-nowrap overflow-hidden text-ellipsis">
<span className="block text-[#9D9D9D] truncate">
<span
className="block text-[#9D9D9D] truncate cursor-pointer"
onClick={() =>
handleLocationClick(
ootdItem.post.location || "정보 없음"
)
}
>
{ootdItem.post.location || "정보 없음"}
</span>
</div>
Expand All @@ -338,28 +318,14 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
</div>
</div>


{/* 오른쪽 팔로우 버튼 및 아이콘들 */}
<div className="flex items-center space-x-2 sm-700:space-x-4">
<FollowButton postMemberId={data.result.member.memberId} userMemberId={userMemberId} />
{/* 북마크 및 메뉴 아이콘 */}
<div className="min-w-[35px] flex items-center">
<Image
src={isBookmarked ? BookmarkedIcon : BookmarkIcon}
alt="bookmark"
width={24}
height={24}
className="cursor-pointer"
onClick={handleBookmarkClick}
{/* 오른쪽 팔로우 버튼 및 아이콘들 */}
<div className="flex items-center space-x-2 sm-700:space-x-4">
<FollowButton
postMemberId={data.result.member.memberId}
userMemberId={userMemberId}
/>
<div className="text-[#9d9d9d] min-w-[10px] text-center">
{data.result.post.bookmarkCount}
</div>
</div>

{userMemberId === data.result.member.memberId && (
<div className="relative flex-shrink-0 w-[24px]">

{/* 북마크 및 메뉴 아이콘 */}
<div className="min-w-[35px] flex items-center">
<Image
src={isBookmarked ? BookmarkedIcon : BookmarkIcon}
alt="bookmark"
Expand All @@ -374,7 +340,7 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
</div>

{userMemberId === data.result.member.memberId && (
<div className="relative flex-shrink-0">
<div className="relative flex-shrink-0 w-[24px]">
<Image
src={CabapIcon}
alt="cabap"
Expand Down Expand Up @@ -424,19 +390,18 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
))}
</Slider>
</div>

<div
className="py-[50px] text-[#292929] text-xl"
dangerouslySetInnerHTML={{
__html: ootdItem.post.body.replace(/\n/g, "<br />"),
}}
></div>
<div className="flex pt-4">
<div className="flex flex-wrap gap-2">
<div className="flex flex-wrap pt-4 gap-4">
<div className="flex flex-wrap gap-2 flex-grow">
{ootdItem.post.tags.map((tag: string, index: number) => (
<span
key={index}
className=" cursor-pointer px-4 py-1 bg-neutral-100 rounded-3xl text-xl justify-center items-center gap-2.5 inline-flex text-[#9d9d9d]"
className="cursor-pointer px-4 py-1 bg-neutral-100 rounded-3xl text-xl justify-center items-center gap-2.5 inline-flex text-[#9d9d9d]"
onClick={() => {
handleTagClick(tag);
}}
Expand All @@ -445,11 +410,10 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
</span>
))}
</div>
<div className="ml-auto text-neutral-400 text-base font-normal font-['Pretendard'] my-auto">
<div className="flex justify-end w-full sm:w-auto text-neutral-400 text-base font-normal font-['Pretendard'] my-auto flex-shrink-0 pr-[4px] sm-700:pr-0">
{formatDate(ootdItem.post.createDateTime)}
</div>
</div>

</div>
</div>
<div className="w-full mb-[120px]">
Expand All @@ -462,13 +426,11 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
refetchPostDetail={refetch}
/>
</div>
{
isSpotsLoading ? (
<SkeletonOotdDetailRecommend />
) : (
<RecommendedSpot recommendedSpots={recommendedSpots?.result || []} />
)
}
{isSpotsLoading ? (
<SkeletonOotdDetailRecommend />
) : (
<RecommendedSpot recommendedSpots={recommendedSpots?.result || []} />
)}
</div>
</>
);
Expand Down

0 comments on commit 3921f48

Please sign in to comment.