fix: bugs and typo

Stair-Crusher-Club · Nov 26, 2024 · 11910d4 · 11910d4
1 parent 39873c3
commit 11910d4
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 deletions.
diff --git a/app/modals/BuildingDetailSheet/BuildingDetailSheet.desktop.tsx b/app/modals/BuildingDetailSheet/BuildingDetailSheet.desktop.tsx
@@ -1,5 +1,6 @@
 import { BasicModalProps } from "@reactleaf/modal"
 import { useQueryClient } from "@tanstack/react-query"
+import Image from "next/image"
 import { useMemo } from "react"
 
 import { useQuestBuilding } from "@/lib/apis/api"
@@ -41,9 +42,6 @@ export default function BuildingDetailSheet({ building: initialData, questId, vi
   const title = (
     <S.CustomTitle>
       <h5>{building.name}</h5>
-      <small>
-        정복 완료 {conquered.length} / {building.places.length}
-      </small>
       <S.ReloadButton onClick={reloadQuest}>
         <Reload size={24} />
       </S.ReloadButton>
@@ -52,8 +50,34 @@ export default function BuildingDetailSheet({ building: initialData, questId, vi
 
   return (
     <RightSheet visible={visible} close={close} title={title} style={{ width: "360px" }}>
+      <S.GuideMessage style={{ marginTop: 24 }}>
+        <S.Status>
+          {conquered.length === building.places.length ? (
+            <>
+              <b>정복 완료 </b>
+              <Image
+                src="/marker_conquered.png"
+                alt="flag"
+                width={16}
+                height={16}
+                style={{ display: "inline-block" }}
+              />
+            </>
+          ) : (
+            <>
+              퀘스트 상태 <b>{conquered.length}</b>/{building.places.length}
+              <br />
+              <small>*앱에서 장소 등록 시, '정복대상'이 '정복완료'로 자동 반영됩니다.</small>
+            </>
+          )}
+        </S.Status>
+      </S.GuideMessage>
+      <S.Header>
+        <S.ChcekcboxLabel>폐업</S.ChcekcboxLabel>
+        <S.ChcekcboxLabel>접근불가</S.ChcekcboxLabel>
+      </S.Header>
       {sortedPlaces.map((place) => (
-        <PlaceCard place={place} questId={questId} key={place.placeId} view="card" />
+        <PlaceCard place={place} questId={questId} key={place.placeId} />
       ))}
     </RightSheet>
   )

diff --git a/app/modals/BuildingDetailSheet/BuildingDetailSheet.mobile.tsx b/app/modals/BuildingDetailSheet/BuildingDetailSheet.mobile.tsx
@@ -25,7 +25,6 @@ export const defaultOverlayOptions = { closeDelay: 200, dim: false }
 export default function BuildingDetailSheet({ building: initialData, questId, visible, close }: Props) {
   const { data: building } = useQuestBuilding({ questId, buildingId: initialData.buildingId })
   const [appState, setAppState] = useAtom(AppState)
-  const [view, setView] = useState<"list" | "card">("card")
   const queryClient = useQueryClient()
 
   useEffect(() => {
@@ -49,10 +48,6 @@ export default function BuildingDetailSheet({ building: initialData, questId, vi
     return [...notConquered, ...conquered].map((p) => building.places.find((b) => b.placeId === p.placeId) || p)
   }, [initialData, building])
 
-  function toggleView() {
-    setView((prev) => (prev === "card" ? "list" : "card"))
-  }
-
   if (!building) return null
 
   const conquered = building.places.filter(isConquered)
@@ -84,7 +79,7 @@ export default function BuildingDetailSheet({ building: initialData, questId, vi
             <>
               퀘스트 상태 <b>{conquered.length}</b>/{building.places.length}
               <br />
-              <small>*정복여부는 계단정복지도 앱에 장소 등록 시 자동으로 반영됩니다.</small>
+              <small>*앱에서 장소 등록 시, '정복대상'이 '정복완료'로 자동 반영됩니다.</small>
             </>
           )}
         </S.Status>
@@ -94,7 +89,7 @@ export default function BuildingDetailSheet({ building: initialData, questId, vi
         <S.ChcekcboxLabel>접근불가</S.ChcekcboxLabel>
       </S.Header>
       {sortedPlaces.map((place) => (
-        <PlaceCard place={place} questId={questId} key={place.placeId} view={view} />
+        <PlaceCard key={place.placeId} place={place} questId={questId} />
       ))}
     </BottomSheet>
   )

diff --git a/app/modals/BuildingDetailSheet/BuildingDetailSheet.style.ts b/app/modals/BuildingDetailSheet/BuildingDetailSheet.style.ts
@@ -29,7 +29,7 @@ export const ReloadButton = styled("button", {
     backgroundColor: "transparent",
     border: "none",
     cursor: "pointer",
-    "&:hover": {
+    "&:active": {
       backgroundColor: "rgba(0, 0, 0, 0.1)",
     },
   },

diff --git a/app/modals/BuildingDetailSheet/PlaceCard.tsx b/app/modals/BuildingDetailSheet/PlaceCard.tsx
@@ -14,10 +14,9 @@ import * as S from "./PlaceCard.style"
 interface Props {
   place: QuestPlace
   questId: string
-  view: "card" | "list"
   onUpdate?: (place: QuestPlace) => void
 }
-export default function PlaceCard({ place, questId, view, onUpdate }: Props) {
+export default function PlaceCard({ place, questId, onUpdate }: Props) {
   const [isClosed, setClosed] = useState(place.isClosed)
   const [isNotAccessible, setNotAccessible] = useState(place.isNotAccessible)
 
@@ -48,7 +47,7 @@ export default function PlaceCard({ place, questId, view, onUpdate }: Props) {
   }
 
   const updateClosed = async (isClosed: boolean) => {
-    console.log("updateClosed", isClosed)
+    console.log({ name: place.name, placeId: place.placeId, isClosed, isNotAccessible })
     await updateStatus.mutateAsync({
       questId,
       buildingId: place.buildingId,
@@ -66,6 +65,7 @@ export default function PlaceCard({ place, questId, view, onUpdate }: Props) {
       placeId: place.placeId,
       isNotAccessible,
     })
+    console.log({ name: place.name, placeId: place.placeId, isClosed, isNotAccessible })
     onUpdate?.({ ...place, isNotAccessible })
     setNotAccessible(isNotAccessible)
   }
@@ -100,15 +100,15 @@ export default function PlaceCard({ place, questId, view, onUpdate }: Props) {
       <S.ActionsColumn>
         <S.CheckboxWrapper>
           <Checkbox
-            id="closed"
+            id={`closed-${place.placeId}`}
             checked={isClosed}
             disabled={place.isConquered || isNotAccessible}
             onChange={updateClosed}
           />
         </S.CheckboxWrapper>
         <S.CheckboxWrapper>
           <Checkbox
-            id="notAccessible"
+            id={`notAccessible-${place.placeId}`}
             checked={isNotAccessible}
             disabled={place.isConquered || isClosed}
             onChange={updateNotAccessible}