feat: 퀘스트 안내지도 개선

Stair-Crusher-Club · Nov 20, 2024 · 5009bf8 · 5009bf8
1 parent c07a463
commit 5009bf8
Show file tree

Hide file tree

Showing 17 changed files with 335 additions and 241 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,11 @@ pnpm dev
 
 `.env` 파일 혹은 환경변수에 `NEXT_PUBLIC_DEPLOY_TYPE`을 `dev` | `live`로 설정하여 연결되는 엔드포인트를 변경할 수 있습니다.
 
+```sh
+# live 서버로 연결하기
+NEXT_PUBLIC_DEPLOY_TYPE=live pnpm dev
+```
+
 ### 로컬 실행
 
 `pnpm dev`를 통해 로컬에서 실행한 경우, 3066 포트를 사용합니다. [http://localhost:3066](http://localhost:3066)

diff --git a/app/(public)/public/quest/[id]/page.tsx b/app/(public)/public/quest/[id]/page.tsx
@@ -77,7 +77,19 @@ export default function QuestDetail() {
     <>
       {/* public page 이므로 메뉴를 제공하지 않는 커스텀 헤더 사용 */}
       <Header
-        title={quest ? `${quest?.name} (${buildingCount}개 건물 / ${placeCount}개 장소)` : ""}
+        title={
+          quest ? (
+            <>
+              {quest?.name}
+              <br />
+              <small>
+                {buildingCount}개 건물 / {placeCount}개 장소
+              </small>
+            </>
+          ) : (
+            ""
+          )
+        }
         hidden={isHeaderHidden}
         hideMenu
       >

diff --git a/app/components/Map/components/QuestMarker.tsx b/app/components/Map/components/QuestMarker.tsx
@@ -28,20 +28,27 @@ export default function QuestMarker({ building, buildingIndex, questId, markerSt
     if (!building) return
 
     const latlng = new kakao.maps.LatLng(building.location.lat, building.location.lng)
-    const buildingImage = building.places.every((p) => p.isConquered || p.isClosed || p.isNotAccessible)
-      ? `/marker_sprite_done.png`
-      : `/marker_sprite.png`
 
-    marker.current = new kakao.maps.Marker({
-      map,
+    const conqueredMarker = new kakao.maps.Marker({
       position: latlng,
-      image: new kakao.maps.MarkerImage(buildingImage, new kakao.maps.Size(24, 36), {
+      image: new kakao.maps.MarkerImage("/marker_conquered.png", new kakao.maps.Size(32, 32), {
+        offset: new kakao.maps.Point(8, 32),
+      }),
+    })
+    const notConqueredMarker = new kakao.maps.Marker({
+      position: latlng,
+      image: new kakao.maps.MarkerImage(`/marker_sprite.png`, new kakao.maps.Size(24, 36), {
         offset: new kakao.maps.Point(12, 36),
         spriteOrigin: new kakao.maps.Point(24 * (buildingIndex % 10), 36 * Math.floor(buildingIndex / 10)),
         spriteSize: new kakao.maps.Size(24 * 10, 36 * 4),
       }),
-      ...markerStyle,
     })
+    const buildingMarker = building.places.every((p) => p.isConquered || p.isClosed || p.isNotAccessible)
+      ? conqueredMarker
+      : notConqueredMarker
+
+    buildingMarker.setMap(map)
+    marker.current = buildingMarker
 
     kakao.maps.event.addListener(marker.current, "click", () => onMarkerClick(building))
 

diff --git a/app/components/layout/Header.style.ts b/app/components/layout/Header.style.ts
@@ -9,7 +9,7 @@ export const DesktopHeader = styled("header", {
     flexShrink: 0,
     display: "flex",
     width: "full",
-    height: "48px",
+    minHeight: "48px",
     alignItems: "center",
     justifyContent: "space-between",
     paddingInline: "16px",

diff --git a/app/components/layout/Header.tsx b/app/components/layout/Header.tsx
@@ -11,7 +11,7 @@ import { Flex } from "@/styles/jsx"
 import * as S from "./Header.style"
 
 interface Props {
-  title: string | undefined
+  title: React.ReactNode | undefined
   hidden?: boolean
   hideMenu?: boolean
 }

diff --git a/app/modals/BuildingDetailSheet/BuildingDetailSheet.desktop.tsx b/app/modals/BuildingDetailSheet/BuildingDetailSheet.desktop.tsx
@@ -3,8 +3,7 @@ import { BasicModalProps } from "@reactleaf/modal"
 import { QuestBuilding } from "@/lib/models/quest"
 
 import RightSheet from "../_template/RightSheet"
-import * as S from "./BuildingDetailSheet.style"
-import PlaceRow from "./PlaceRow"
+import PlaceCard from "./PlaceCard"
 
 interface Props extends BasicModalProps {
   building: QuestBuilding
@@ -13,31 +12,25 @@ interface Props extends BasicModalProps {
 
 export const defaultOverlayOptions = { closeDelay: 200, dim: false }
 export default function BuildingDetailSheet({ building, questId, visible, close }: Props) {
+  const conquered = building.places.filter((place) => place.isConquered || place.isClosed || place.isNotAccessible)
+  const notConquered = building.places.filter(
+    (place) => !place.isConquered && !place.isClosed && !place.isNotAccessible,
+  )
+  const title = (
+    <>
+      {building.name}
+      <br />
+      <small>
+        정복 완료 {conquered.length} / {building.places.length}
+      </small>
+    </>
+  )
+
   return (
-    <RightSheet visible={visible} close={close} title={building.name} style={{ width: "360px" }}>
-      <S.TableWrapper>
-        <S.PlaceTable>
-          <colgroup>
-            <col />
-            <col width="54px" />
-            <col width="54px" />
-            <col width="54px" />
-            <col width="54px" />
-          </colgroup>
-          <tbody>
-            <S.HeaderRow>
-              <S.HeaderCell style={{ textAlign: "left" }}>업체명</S.HeaderCell>
-              <S.HeaderCell>정복</S.HeaderCell>
-              <S.HeaderCell>폐업 추정</S.HeaderCell>
-              <S.HeaderCell>폐업</S.HeaderCell>
-              <S.HeaderCell>접근 불가</S.HeaderCell>
-            </S.HeaderRow>
-            {building.places.map((place) => (
-              <PlaceRow place={place} questId={questId} key={place.placeId} />
-            ))}
-          </tbody>
-        </S.PlaceTable>
-      </S.TableWrapper>
+    <RightSheet visible={visible} close={close} title={title} style={{ width: "360px" }}>
+      {[...notConquered, ...conquered].map((place) => (
+        <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
@@ -7,8 +7,7 @@ import { QuestBuilding } from "@/lib/models/quest"
 
 import BottomSheet from "@/modals/_template/BottomSheet"
 
-import * as S from "./BuildingDetailSheet.style"
-import PlaceRow from "./PlaceRow"
+import PlaceCard from "./PlaceCard"
 
 interface Props extends BasicModalProps {
   building: QuestBuilding
@@ -26,31 +25,23 @@ export default function BuildingDetailSheet({ building, questId, visible, close
     }
   }, [])
 
+  const conquered = building.places.filter((place) => place.isConquered)
+  const notConquered = building.places.filter((place) => !place.isConquered)
+  const title = (
+    <>
+      {building.name}
+      <br />
+      <small>
+        정복 완료 {conquered.length} / {building.places.length}
+      </small>
+    </>
+  )
+
   return (
-    <BottomSheet visible={visible} close={close} title={building.name} style={{ height: "calc(100vh - 300px)" }}>
-      <S.TableWrapper>
-        <S.PlaceTable>
-          <colgroup>
-            <col />
-            <col width="54px" />
-            <col width="54px" />
-            <col width="54px" />
-            <col width="54px" />
-          </colgroup>
-          <tbody>
-            <S.HeaderRow>
-              <S.HeaderCell style={{ textAlign: "left" }}>업체명</S.HeaderCell>
-              <S.HeaderCell>정복</S.HeaderCell>
-              <S.HeaderCell>폐업 추정</S.HeaderCell>
-              <S.HeaderCell>폐업</S.HeaderCell>
-              <S.HeaderCell>접근 불가</S.HeaderCell>
-            </S.HeaderRow>
-            {building.places.map((place) => (
-              <PlaceRow place={place} questId={questId} key={place.placeId} />
-            ))}
-          </tbody>
-        </S.PlaceTable>
-      </S.TableWrapper>
+    <BottomSheet visible={visible} close={close} title={title} style={{ height: "calc(100vh - 300px)" }}>
+      {[...notConquered, ...conquered].map((place) => (
+        <PlaceCard place={place} questId={questId} key={place.placeId} />
+      ))}
     </BottomSheet>
   )
 }
diff --git a/app/modals/BuildingDetailSheet/BuildingDetailSheet.style.ts b/app/modals/BuildingDetailSheet/BuildingDetailSheet.style.ts
diff --git a/app/modals/BuildingDetailSheet/PlaceCard.style.ts b/app/modals/BuildingDetailSheet/PlaceCard.style.ts
@@ -0,0 +1,128 @@
+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,
+  },
+})
+
+export const Header = styled("div", {
+  base: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    gap: 8,
+  },
+})
+
+export const PlaceName = styled("h3", {
+  base: {
+    fontSize: 18,
+    fontWeight: 700,
+  },
+})
+
+export const PlaceStatusBadge = styled("span", {
+  base: {
+    display: "inline-block",
+    marginLeft: 4,
+    padding: "2px 4px",
+    fontSize: 12,
+    color: "white",
+    borderRadius: 4,
+    verticalAlign: "bottom",
+  },
+  variants: {
+    status: {
+      good: {
+        backgroundColor: "var(--leaf-primary-60)",
+      },
+      bad: {
+        backgroundColor: "#cf3c3b",
+      },
+      warn: {
+        backgroundColor: "#da952e",
+      },
+      unknown: {
+        backgroundColor: "#6dd1ad",
+      },
+    },
+  },
+})
+
+export const Buttons = styled("div", {
+  base: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 4,
+    flexShrink: 0,
+  },
+})
+
+export const Button = styled("button", {
+  base: {
+    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-60)",
+    color: "white",
+  },
+})
+
+export const RevertButton = styled(ActionButton, {
+  base: {
+    width: "100%",
+    background: "white",
+    border: "1px solid var(--leaf-grey-70)",
+    color: "var(--leaf-grey-10)",
+  },
+})