feat: apply designed styles

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

Hide file tree

Showing 6 changed files with 166 additions and 152 deletions.
diff --git 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
@@ -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
@@ -2,127 +2,98 @@ 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",
     overflow: "hidden",
     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)",
-  },
-})