From 39873c3a86504f651511e7f76b2dded66b6bf702 Mon Sep 17 00:00:00 2001
From: YG <yg@medility.ai>
Date: Tue, 26 Nov 2024 16:36:43 +0900
Subject: [PATCH] feat: apply designed styles

---
 .../BuildingDetailSheet.mobile.tsx            |  33 ++++-
 .../BuildingDetailSheet.style.ts              |  45 ++++++
 .../BuildingDetailSheet/PlaceCard.style.ts    | 133 +++++++-----------
 app/modals/BuildingDetailSheet/PlaceCard.tsx  | 104 ++++++--------
 .../_template/RightSheet/RightSheet.style.ts  |   1 +
 .../_template/RightSheet/RightSheet.tsx       |   2 +-
 6 files changed, 166 insertions(+), 152 deletions(-)

diff --git a/app/modals/BuildingDetailSheet/BuildingDetailSheet.mobile.tsx b/app/modals/BuildingDetailSheet/BuildingDetailSheet.mobile.tsx
index e444d79..d2912a7 100644
--- a/app/modals/BuildingDetailSheet/BuildingDetailSheet.mobile.tsx
+++ b/app/modals/BuildingDetailSheet/BuildingDetailSheet.mobile.tsx
@@ -1,6 +1,7 @@
 import { BasicModalProps } from "@reactleaf/modal"
 import { useQueryClient } from "@tanstack/react-query"
 import { useAtom } from "jotai"
+import Image from "next/image"
 import { useEffect, useMemo, useState } from "react"
 
 import { useQuestBuilding } from "@/lib/apis/api"
@@ -58,12 +59,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.ViewToggle onClick={toggleView}>
-        {view === "card" ? <ListView size={24} color="#666" /> : <CardView size={24} color="#666" />}
-      </S.ViewToggle>
       <S.ReloadButton onClick={reloadQuest}>
         <Reload size={24} />
       </S.ReloadButton>
@@ -72,6 +67,32 @@ export default function BuildingDetailSheet({ building: initialData, questId, vi
 
   return (
     <BottomSheet visible={visible} close={close} title={title} style={{ height: "calc(100vh - 300px)" }}>
+      <S.GuideMessage>
+        <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={view} />
       ))}
diff --git a/app/modals/BuildingDetailSheet/BuildingDetailSheet.style.ts b/app/modals/BuildingDetailSheet/BuildingDetailSheet.style.ts
index f505a48..e0d5c31 100644
--- a/app/modals/BuildingDetailSheet/BuildingDetailSheet.style.ts
+++ b/app/modals/BuildingDetailSheet/BuildingDetailSheet.style.ts
@@ -35,6 +35,51 @@ export const ReloadButton = styled("button", {
   },
 })
 
+export const GuideMessage = styled("div", {
+  base: {
+    padding: "12px 20px",
+    margin: "0 16px",
+    backgroundColor: "var(--leaf-primary-98)",
+  },
+})
+
+export const Status = styled("p", {
+  base: {
+    fontSize: 15,
+    fontWeight: 500,
+    textAlign: "center",
+    "& b": {
+      color: "var(--leaf-primary-70)",
+    },
+    "& small": {
+      fontSize: 12,
+      color: "var(--leaf-grey-70)",
+      letterSpacing: "-0.03em",
+    },
+  },
+})
+
+export const Header = styled("div", {
+  base: {
+    display: "flex",
+    paddingTop: 16,
+    paddingBottom: 4,
+    margin: "0 16px",
+    justifyContent: "flex-end",
+  },
+})
+
+export const ChcekcboxLabel = styled("span", {
+  base: {
+    display: "inline-block",
+    width: 50,
+    textAlign: "center",
+    fontSize: 14,
+    fontWeight: 500,
+    whiteSpace: "pre",
+  },
+})
+
 export const ViewToggle = styled("button", {
   base: {
     position: "absolute",
diff --git a/app/modals/BuildingDetailSheet/PlaceCard.style.ts b/app/modals/BuildingDetailSheet/PlaceCard.style.ts
index 638ce85..5146418 100644
--- a/app/modals/BuildingDetailSheet/PlaceCard.style.ts
+++ b/app/modals/BuildingDetailSheet/PlaceCard.style.ts
@@ -2,68 +2,94 @@ import { styled } from "@/styles/jsx"
 
 export const PlaceCard = styled("div", {
   base: {
-    margin: "8px 16px",
-    padding: "16px 20px",
-    boxShadow: "0px 0px 4px 1px rgba(0,0,0,0.2)",
-    borderRadius: 4,
+    display: "flex",
+    gap: 16,
+    margin: "0 16px 24px",
+    alignItems: "flex-end",
   },
 })
 
-export const Header = styled("div", {
+export const NameColumn = styled("div", {
   base: {
     display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    gap: 8,
+    flexDirection: "column",
+    width: "calc(100% - 148px)",
+    flex: 1,
+  },
+})
+
+export const Badges = styled("div", {
+  base: {
+    display: "flex",
+    gap: 4,
+    marginBottom: 4,
+  },
+})
+
+export const ActionsColumn = styled("div", {
+  base: {
+    display: "flex",
+    flex: "0 0 100px",
+    gap: 4,
+    lineHeight: 1,
   },
 })
 
 export const PlaceName = styled("h3", {
   base: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
     fontSize: 16,
-    fontWeight: 600,
+    fontWeight: 500,
+    "& span": {
+      whiteSpace: "pre",
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+    },
+  },
+})
+
+export const CheckboxWrapper = styled("div", {
+  base: {
+    width: 48,
+    textAlign: "center",
   },
 })
 
 export const PlaceStatusBadge = styled("span", {
   base: {
     display: "inline-block",
-    marginLeft: 4,
-    padding: "2px 4px",
+    padding: "6px 7px",
+    borderRadius: 4,
     fontSize: 12,
+    lineHeight: 1,
     color: "white",
-    borderRadius: 4,
     verticalAlign: "bottom",
   },
   variants: {
     status: {
+      normal: {
+        backgroundColor: "var(--leaf-primary-95)",
+        color: "var(--leaf-primary-60)",
+      },
       good: {
         backgroundColor: "var(--leaf-primary-60)",
       },
-      bad: {
-        backgroundColor: "#cf3c3b",
-      },
       warn: {
-        backgroundColor: "#da952e",
+        backgroundColor: "#FF9202",
       },
       unknown: {
-        backgroundColor: "#6dd1ad",
+        backgroundColor: "var(--leaf-grey-95)",
+        color: "var(--leaf-grey-70)",
       },
     },
   },
 })
 
-export const Buttons = styled("div", {
-  base: {
-    display: "flex",
-    justifyContent: "flex-end",
-    gap: 4,
-    flexShrink: 0,
-  },
-})
-
 export const Button = styled("button", {
   base: {
+    flexShrink: 0,
     border: "1px solid #ccc",
     borderRadius: 4,
     background: "white",
@@ -71,58 +97,3 @@ export const Button = styled("button", {
     cursor: "pointer",
   },
 })
-
-export const Body = styled("div", {
-  base: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    gap: 8,
-    paddingTop: 16,
-  },
-})
-
-export const ActionButton = styled("button", {
-  base: {
-    width: "50%",
-    height: 36,
-    borderRadius: 4,
-    fontSize: 14,
-    cursor: "pointer",
-    fontWeight: 500,
-  },
-})
-
-export const ClosedConfirm = styled(ActionButton, {
-  base: {
-    border: "1px solid #861500",
-    color: "#861500",
-    background: "white",
-    fontSize: 12,
-  },
-})
-
-export const NotAccessible = styled(ActionButton, {
-  base: {
-    border: "1px solid #861500",
-    color: "#861500",
-    background: "white",
-    fontSize: 12,
-  },
-})
-
-export const ConquerButton = styled(ActionButton, {
-  base: {
-    background: "var(--leaf-primary-90)",
-    color: "white",
-  },
-})
-
-export const RevertButton = styled(ActionButton, {
-  base: {
-    width: "100%",
-    background: "white",
-    border: "1px solid var(--leaf-grey-70)",
-    color: "var(--leaf-grey-10)",
-  },
-})
diff --git a/app/modals/BuildingDetailSheet/PlaceCard.tsx b/app/modals/BuildingDetailSheet/PlaceCard.tsx
index d5fd4d9..0728d00 100644
--- a/app/modals/BuildingDetailSheet/PlaceCard.tsx
+++ b/app/modals/BuildingDetailSheet/PlaceCard.tsx
@@ -6,6 +6,8 @@ import { toast } from "react-toastify"
 import { updateQuestStatus } from "@/lib/apis/api"
 import { QuestPlace } from "@/lib/models/quest"
 
+import Checkbox from "@/components/Checkbox"
+
 import naverMapIcon from "../../../public/naver_map.jpg"
 import * as S from "./PlaceCard.style"
 
@@ -18,8 +20,6 @@ interface Props {
 export default function PlaceCard({ place, questId, view, onUpdate }: Props) {
   const [isClosed, setClosed] = useState(place.isClosed)
   const [isNotAccessible, setNotAccessible] = useState(place.isNotAccessible)
-  const visited = place.isConquered || isClosed || isNotAccessible
-  const isReversible = !place.isConquered && (isClosed || isNotAccessible)
 
   const queryClient = useQueryClient()
   const updateStatus = useMutation({
@@ -48,6 +48,7 @@ export default function PlaceCard({ place, questId, view, onUpdate }: Props) {
   }
 
   const updateClosed = async (isClosed: boolean) => {
+    console.log("updateClosed", isClosed)
     await updateStatus.mutateAsync({
       questId,
       buildingId: place.buildingId,
@@ -69,76 +70,51 @@ export default function PlaceCard({ place, questId, view, onUpdate }: Props) {
     setNotAccessible(isNotAccessible)
   }
 
-  const revertUpdate = () => {
-    if (isNotAccessible) {
-      updateNotAccessible(false)
-    }
-    if (isClosed) {
-      updateClosed(false)
-    }
-  }
-
-  if (view === "list") {
-    return (
-      <S.PlaceCard style={{ margin: 0, padding: "4px 20px", boxShadow: "none" }}>
-        <S.Header>
-          <S.PlaceName>
-            {place.name}
-            {place.isConquered && <S.PlaceStatusBadge status="good">정복</S.PlaceStatusBadge>}
-            {!place.isConquered && !isClosed && place.isClosedExpected && (
-              <S.PlaceStatusBadge status="warn">폐업추정</S.PlaceStatusBadge>
-            )}
-            {isClosed && <S.PlaceStatusBadge status="bad">폐업확인</S.PlaceStatusBadge>}
-            {isNotAccessible && <S.PlaceStatusBadge status="bad">접근불가</S.PlaceStatusBadge>}
-          </S.PlaceName>
-          <S.Buttons>
-            <S.Button onClick={openNaverMap}>
-              <Image src={naverMapIcon} alt="네이버 지도" style={{ width: 32, height: 32 }} />
-            </S.Button>
-            <S.Button onClick={copyPlaceName}>
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="11" y="5" width="16" height="16" rx="4" stroke="#777" stroke-width="2" />
-                <rect x="5" y="11" width="16" height="16" rx="4" fill="white" stroke="#777" stroke-width="2" />
-              </svg>
-            </S.Button>
-          </S.Buttons>
-        </S.Header>
-      </S.PlaceCard>
-    )
-  }
-
   return (
     <S.PlaceCard>
-      <S.Header>
-        <S.PlaceName>
-          {place.name}
-          {place.isConquered && <S.PlaceStatusBadge status="good">정복</S.PlaceStatusBadge>}
+      <S.NameColumn>
+        <S.Badges>
+          {!place.isConquered && !isClosed && !isNotAccessible && (
+            <S.PlaceStatusBadge status="normal">정복대상</S.PlaceStatusBadge>
+          )}
+          {place.isConquered && <S.PlaceStatusBadge status="good">정복완료</S.PlaceStatusBadge>}
+          {isClosed && <S.PlaceStatusBadge status="warn">폐업확인</S.PlaceStatusBadge>}
+          {isNotAccessible && <S.PlaceStatusBadge status="warn">접근불가</S.PlaceStatusBadge>}
           {!place.isConquered && !isClosed && place.isClosedExpected && (
-            <S.PlaceStatusBadge status="warn">폐업추정</S.PlaceStatusBadge>
+            <S.PlaceStatusBadge status="unknown">폐업추정</S.PlaceStatusBadge>
           )}
-          {isClosed && <S.PlaceStatusBadge status="bad">폐업확인</S.PlaceStatusBadge>}
-          {isNotAccessible && <S.PlaceStatusBadge status="bad">접근불가</S.PlaceStatusBadge>}
-        </S.PlaceName>
-        <S.Buttons>
-          <S.Button onClick={openNaverMap}>
-            <Image src={naverMapIcon} alt="네이버 지도" style={{ width: 32, height: 32 }} />
-          </S.Button>
-          <S.Button onClick={copyPlaceName}>
-            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+        </S.Badges>
+        <S.PlaceName>
+          <span>{place.name}</span>
+          <S.Button onClick={copyPlaceName} style={{ border: "none" }}>
+            <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
               <rect x="11" y="5" width="16" height="16" rx="4" stroke="#777" stroke-width="2" />
               <rect x="5" y="11" width="16" height="16" rx="4" fill="white" stroke="#777" stroke-width="2" />
             </svg>
           </S.Button>
-        </S.Buttons>
-      </S.Header>
-      {(isReversible || !visited) && (
-        <S.Body>
-          {isReversible && <S.RevertButton onClick={revertUpdate}>다시 입력할게요</S.RevertButton>}
-          {!visited && <S.ConquerButton onClick={openInApp}>정복하기</S.ConquerButton>}
-          {!visited && <S.ClosedConfirm onClick={() => updateClosed(true)}>폐업했어요</S.ClosedConfirm>}
-          {!visited && <S.NotAccessible onClick={() => updateNotAccessible(true)}>접근불가</S.NotAccessible>}
-        </S.Body>
-      )}
+          <S.Button onClick={openNaverMap}>
+            <Image src={naverMapIcon} alt="네이버 지도" style={{ width: 24, height: 24 }} />
+          </S.Button>
+        </S.PlaceName>
+      </S.NameColumn>
+      <S.ActionsColumn>
+        <S.CheckboxWrapper>
+          <Checkbox
+            id="closed"
+            checked={isClosed}
+            disabled={place.isConquered || isNotAccessible}
+            onChange={updateClosed}
+          />
+        </S.CheckboxWrapper>
+        <S.CheckboxWrapper>
+          <Checkbox
+            id="notAccessible"
+            checked={isNotAccessible}
+            disabled={place.isConquered || isClosed}
+            onChange={updateNotAccessible}
+          />
+        </S.CheckboxWrapper>
+      </S.ActionsColumn>
     </S.PlaceCard>
   )
 }
diff --git a/app/modals/_template/RightSheet/RightSheet.style.ts b/app/modals/_template/RightSheet/RightSheet.style.ts
index cc9b0a7..9c8b608 100644
--- a/app/modals/_template/RightSheet/RightSheet.style.ts
+++ b/app/modals/_template/RightSheet/RightSheet.style.ts
@@ -58,6 +58,7 @@ export const SheetTitle = styled("h5", {
 export const CloseButton = styled("button", {
   base: {
     position: "absolute",
+    zIndex: 1,
     top: 16,
     left: 16,
     display: "flex",
diff --git a/app/modals/_template/RightSheet/RightSheet.tsx b/app/modals/_template/RightSheet/RightSheet.tsx
index 733aed1..c47da2e 100644
--- a/app/modals/_template/RightSheet/RightSheet.tsx
+++ b/app/modals/_template/RightSheet/RightSheet.tsx
@@ -18,7 +18,7 @@ export default function RightSheet({ title, actionButton, style, children, visib
           <S.CloseButton onClick={close}>
             <Close size={28} color="black" />
           </S.CloseButton>
-          <S.SheetTitle>{title}</S.SheetTitle>
+          {typeof title == "string" ? <S.SheetTitle>{title}</S.SheetTitle> : title}
           <S.ActionButtonWrapper>{actionButton}</S.ActionButtonWrapper>
         </S.RightSheetHeader>
       )}