Skip to content
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.

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

Style/add gif #83

Merged
merged 6 commits into from
Nov 27, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
[style] add gif
karnelll committed Nov 27, 2024
commit 42ac52c85a33907357e0b850f8911871da60831c
Binary file added fe/public/gif/1.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added fe/public/gif/2.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added fe/public/gif/3.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions fe/public/svg/0.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@
import React, { useState, useEffect, useRef } from "react";
import { nanoid } from "nanoid";
import Image from "next/image";
import { useRouter, useParams } from "next/navigation";

interface LinkFieldEditProps {
label: string;
@@ -46,6 +47,8 @@ export default function LinkFieldEdit({
);

const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
const router = useRouter();
const { id } = useParams();

useEffect(() => {
const validLinks = inputFields
@@ -183,6 +186,16 @@ export default function LinkFieldEdit({
);
};

const navigateToTooltipPage = () => {
if (id) {
router.push(`/event-maps/${id}/load-mappin/forms/tooltip`);
}
};

const handleNaverMove = () => {
window.location.href = "https://m.map.naver.com/";
};

const getClassNames = (item: InputField): string => {
if (item.error && !item.isTyping)
return "border-2 border-[#f73a2c] bg-[#F8F8F8]";
@@ -195,6 +208,41 @@ export default function LinkFieldEdit({
<div className="mb-[48px] relative">
<label className="text-[#2c2c2c] font-300 text-lg mb-[8px] flex items-center">
{label}
{label === "북마크 공유 링크" && (
<div
className="relative group"
onClick={(e) => {
e.stopPropagation();
navigateToTooltipPage();
}}
role="button"
tabIndex={0}
onKeyDown={(e) => e.key === "Enter" && navigateToTooltipPage()}
>
<Image
src="/svg/information.svg"
alt="information"
width={18}
height={18}
className="p-[3px] w-[24px] h-[24px] ml-[6px] cursor-pointer"
/>
</div>
)}
<span
className="mr-0 ml-auto text-[#8e8e8e] text-sm font-medium font-['Pretendard'] leading-tight cursor-pointer"
onClick={handleNaverMove}
role="button"
tabIndex={0}
onKeyDown={(e) => e.key === "Enter" && handleNaverMove()}
>
네이버지도 열기
</span>
<Image
src="/svg/rightArrow.svg"
alt="rightArrow"
width={12}
height={24}
/>
</label>
<div className="flex flex-col items-center border-[#F0F0F0] border p-[16px] rounded-xl w-[328px]">
{inputFields.map((item, index) => (
14 changes: 7 additions & 7 deletions fe/src/app/event-maps/[id]/load-mappin/forms/tooltip/page.tsx
Original file line number Diff line number Diff line change
@@ -12,35 +12,35 @@ const slides = [
title: "혹시 지금 이렇게 보이시나요?",
description:
"공유 버튼이 안 보이시죠?\n장소 리스트가 비공개로 되어 있어서 그래요",
image: "/images/placeholder1.png",
image: "/svg/0.svg",
},
{
id: 2,
step: "STEP 1",
title: "공개 설정 리스트 새로 만들기",
description: "[공개 범위 ‘공개’ 로 선택 > 새 리스트를 생성]",
image: "/images/placeholder2.png",
image: "/gif/1.gif",
},
{
id: 3,
step: "STEP 2",
title: "북마크 옮기기",
description: "[비공개 리스트 > 편집 > 장소 목록 편집]",
image: "/images/placeholder3.png",
image: "/gif/2.gif",
},
{
id: 4,
step: "STEP 3",
title: "북마크 옮기기",
description: "[전체 선택 > 이동 > 이동할 리스트 선택 > 완료]",
image: "/images/placeholder4.png",
image: "/gif/2.gif",
},
{
id: 5,
step: "STEP 4",
title: "링크 복사하기",
description: "공유해서 링크 복사하면 끝!",
image: "/images/placeholder5.png",
image: "/gif/3.gif",
},
];

@@ -115,13 +115,13 @@ export default function ToolTipPage() {
/>
))}
</div>
<div className="w-full px-4">
<div className="w-fix px-4">
<Button
label="네이버 지도 바로 열기"
onClick={() => {
window.location.href = "https://m.map.naver.com/";
}}
className="w-full h-[60px] text-lg font-medium font-['Pretendard'] rounded-lg flex justify-center items-center"
className="w-fix h-[60px] text-lg font-medium font-['Pretendard'] rounded-lg flex justify-center items-center"
/>
</div>
</div>