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.

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

Jump to bottom

feat: edit visibility of map #137

Merged
merged 2 commits into from
Sep 22, 2024
Merged

feat: edit visibility of map #137

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a69adab
feat: map reveal edit
poiu694 Sep 21, 2024
837e516
chore: rename function
poiu694 Sep 22, 2024
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
97 changes: 87 additions & 10 deletions src/app/my-map/[mapId]/map-title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const MapTitle = ({
}: MapTitleProps) => {
const [mapNameInput, setMapNameInput] = useState(mapInfo.name || '')
const [isOpenEditModal, setIsOpenEditModal] = useState(false)
const [isOpenPrivateModal, setIsOpenMapToPublicModal] = useState(false)
const { revalidate } = useFetch()

const handleChangeMapName = async () => {
Expand All @@ -46,26 +47,88 @@ const MapTitle = ({
revalidate(['map', mapInfo.id])
notify.success(`${mapNameInput}으로 바꾸었습니다.`)
refetchMapInfo()
} catch (err) {
notify.error('서버에 문제가 생겼습니다.')
} finally {
setIsOpenEditModal(false)
}
}

const updateMapVisibility = async (isPublic: boolean) => {
try {
const { id, description, name } = mapInfo
await api.maps.id.patch({
id,
isPublic,
description,
name,
})
revalidate(['map', mapInfo.id])
notify.success(`${mapInfo.name} 지도를 ${isPublic ? '공개' : '비공개'}로 바꾸었습니다.`)
refetchMapInfo()
} catch (err) {
notify.error('서버에 문제가 생겼습니다.')
} finally {
setIsOpenMapToPublicModal(false)
}
}

const handleClickMapReveal = () => {
if (!mapInfo.isPublic) {
// 비공개 => 공개
setIsOpenMapToPublicModal(true)
return
}

// 공개 => 비공개
updateMapVisibility(false)
}

return (
<>
<div className={cn('', className)}>
{mapInfo.createBy.id === user.id ? (
<button
type="button"
className="flex items-center gap-1"
onClick={() => setIsOpenEditModal(true)}
>
<Typography size="body0-2" color="neutral-000">
{mapInfo.name}
</Typography>
<Icon type="pencil" size="xl" />
</button>
<div className="flex w-full items-center justify-between">
<button
type="button"
className="flex items-center gap-1"
onClick={() => setIsOpenEditModal(true)}
>
<Typography size="body0-2" color="neutral-000">
{mapInfo.name}
</Typography>
<Icon type="pencil" size="xl" />
</button>

<div className="w-fit rounded-[8px] bg-neutral-600 px-[3px] py-[4px]">
<button
type="button"
className="flex rounded-[8px]"
onClick={handleClickMapReveal}
>
<Typography
size="h6"
color={mapInfo.isPublic ? 'neutral-300' : 'neutral-000'}
className={cn(
'rounded-[8px] px-[6px] py-[3px]',
!mapInfo.isPublic && 'bg-neutral-500',
)}
>
비공개
</Typography>
<Typography
size="h6"
color={mapInfo.isPublic ? 'neutral-000' : 'neutral-300'}
className={cn(
'rounded-[8px] px-[6px] py-[3px]',
mapInfo.isPublic && 'bg-orange-400',
)}
>
공개
</Typography>
</button>
</div>
</div>
) : (
<Typography size="body0-2" color="neutral-000">
{mapInfo.name}
Expand Down Expand Up @@ -93,6 +156,20 @@ const MapTitle = ({
onConfirm={handleChangeMapName}
disabled={!mapNameInput || mapNameInput === mapInfo.name}
/>

<BottomModal
layout="confirm"
title={`${mapInfo.name}지도를 공개할까요?`}
isOpen={isOpenPrivateModal}
cancelMessage="취소"
confirmMessage="공개로 전환"
body={
'모두가 지도에 참여할 수 있고, 등록된 맛집을 확인하고 좋아요를 누를 수 있어요.'
}
onClose={() => setIsOpenMapToPublicModal(false)}
onCancel={() => setIsOpenMapToPublicModal(false)}
onConfirm={() => updateMapVisibility(true)}
/>
</>
)
}
Expand Down
Loading