Skip to content

Fix: QA 처리 #546

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.

Sign up for GitHub

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

Merged
mayrang merged 2 commits into from
May 28, 2025
Merged

Fix: QA 처리 #546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
87c376d
Fix: 전체적으로 클리커블한 cursor pointer 추가, 총 여행거리 올림으로 변경
mayrang May 28, 2025
2602df8
Fix: travellogmap 최적화 및 방문 국가 뒤로가기 로직 수정
mayrang May 28, 2025
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
1 change: 1 addition & 0 deletions src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ const Alarm = styled.div`
width: 48px;
height: 48px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
`;
Expand Down
80 changes: 66 additions & 14 deletions src/components/HorizonBoxLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,12 @@ const HorizonBoxLayout = ({
const tagRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null);

const cutTags = tags.length >= 2 ? (isBookmark ? tags.slice(0, 1) : tags.slice(0, 2)) : tags;
const cutTags =
tags.length >= 2
? isBookmark
? tags.slice(0, 1)
: tags.slice(0, 2)
: tags;

const [tagsCount, setTagsCount] = useState(cutTags);
console.log(tagsCount, "tagsCount");
Expand All @@ -78,20 +83,35 @@ const HorizonBoxLayout = ({
setTagsCount((prev) => (prev.length > 1 ? prev.slice(0, -1) : []));
}
}
}, [tagRef.current, showTag, tagsCount.length, containerRef?.current?.getBoundingClientRect().width]);
}, [
tagRef.current,
showTag,
tagsCount.length,
containerRef?.current?.getBoundingClientRect().width,
]);
return (
<HorizonBoxContainer ref={containerRef}>
{/* <Thumbnail src={imgSrc}></Thumbnail> */}

<PostInfo>
<TopContainer>
<BadgeContainer isMargin={bookmarkPosition === "middle" || bookmarkNeed === false}>
<BadgeContainer
isMargin={bookmarkPosition === "middle" || bookmarkNeed === false}
>
{!userProfileType ? (
<Badge
height={"22px"}
text={
<div style={{ display: "flex", alignItems: "center", gap: 4 }}>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<div
style={{ display: "flex", alignItems: "center", gap: 4 }}
>
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.75 5.49259C11.75 9.31077 6.75 12.5835 6.75 12.5835C6.75 12.5835 1.75 9.31077 1.75 5.49259C1.75 4.19062 2.27678 2.94197 3.21447 2.02134C4.15215 1.1007 5.42392 0.583496 6.75 0.583496C8.07608 0.583496 9.34785 1.1007 10.2855 2.02134C11.2232 2.94197 11.75 4.19062 11.75 5.49259Z"
stroke="#3E8D00"
Expand All @@ -115,7 +135,11 @@ const HorizonBoxLayout = ({
) : null}
</BadgeContainer>
{bookmarkPosition === "top" && bookmarkNeed && (
<BookmarkButton travelNumber={travelNumber} bookmarked={bookmarked} bookmarkPosition={bookmarkPosition} />
<BookmarkButton
travelNumber={travelNumber}
bookmarked={bookmarked}
bookmarkPosition={bookmarkPosition}
/>
)}
</TopContainer>
<div style={{ paddingLeft: 4 }}>
Expand Down Expand Up @@ -145,8 +169,16 @@ const HorizonBoxLayout = ({
<Badge
height={"22px"}
text={
<div style={{ display: "flex", alignItems: "center", gap: 4 }}>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<div
style={{ display: "flex", alignItems: "center", gap: 4 }}
>
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.75 5.49259C11.75 9.31077 6.75 12.5835 6.75 12.5835C6.75 12.5835 1.75 9.31077 1.75 5.49259C1.75 4.19062 2.27678 2.94197 3.21447 2.02134C4.15215 1.1007 5.42392 0.583496 6.75 0.583496C8.07608 0.583496 9.34785 1.1007 10.2855 2.02134C11.2232 2.94197 11.75 4.19062 11.75 5.49259Z"
stroke="#3E8D00"
Expand Down Expand Up @@ -200,7 +232,11 @@ const HorizonBoxLayout = ({
)}
</PostInfo>
{bookmarkPosition === "middle" && bookmarkNeed && (
<BookmarkButton travelNumber={travelNumber} bookmarked={bookmarked} bookmarkPosition={bookmarkPosition} />
<BookmarkButton
travelNumber={travelNumber}
bookmarked={bookmarked}
bookmarkPosition={bookmarkPosition}
/>
)}
</HorizonBoxContainer>
);
Expand All @@ -210,11 +246,19 @@ interface BookmarkButtonProps {
travelNumber: number;
bookmarkPosition?: "top" | "middle";
}
const BookmarkButton = ({ bookmarked, travelNumber, bookmarkPosition }: BookmarkButtonProps) => {
const BookmarkButton = ({
bookmarked,
travelNumber,
bookmarkPosition,
}: BookmarkButtonProps) => {
const { accessToken, userId } = authStore();
const [showLoginModal, setShowLoginModal] = useState(false);
const router = useRouter();
const { postBookmarkMutation, deleteBookmarkMutation } = useUpdateBookmark(accessToken!, userId!, travelNumber);
const { postBookmarkMutation, deleteBookmarkMutation } = useUpdateBookmark(
accessToken!,
userId!,
travelNumber
);
const pathname = usePathname();

const bookmarkClickHandler = (e: React.MouseEvent<HTMLButtonElement>) => {
Expand Down Expand Up @@ -244,11 +288,18 @@ const BookmarkButton = ({ bookmarked, travelNumber, bookmarkPosition }: Bookmark
modalButtonText="로그인"
setModalOpen={setShowLoginModal}
/>
<Button isMargin={bookmarkPosition === "middle"} onClick={bookmarkClickHandler}>
<Button
isMargin={bookmarkPosition === "middle"}
onClick={bookmarkClickHandler}
>
{bookmarked ? (
<FullHeartIcon width={24} height={21.4} />
) : (
<EmptyHeartIcon width={24} height={21.4} stroke={`${palette.비강조3}`} />
<EmptyHeartIcon
width={24}
height={21.4}
stroke={`${palette.비강조3}`}
/>
)}
</Button>
</>
Expand All @@ -266,7 +317,7 @@ const Button = styled.button<{ isMargin: boolean }>`
width: 32px;
height: 32px;
display: flex;

cursor: pointer;
margin-top: ${(props) => (props.isMargin ? "11px" : 0)};
margin-bottom: ${(props) => (props.isMargin ? "4px" : "3px")};
align-items: center;
Expand All @@ -277,6 +328,7 @@ const HorizonBoxContainer = styled.div`
width: 100%;
/* height: 120px; */
display: flex;
cursor: pointer;
align-items: center;
`;
const TitleBox = styled.div`
Expand Down
Loading