[Deploy/#83] Version 2

README.md

@@ -1 +1,12 @@
-# FE
+# FE
+#### 모노레포(도메인 기반) 구조 
+
+Compasser 프로젝트 프론트엔드 아키텍쳐입니다.
+- Design System 구축 및 패키지화
+
+  <img width="101" height="68" alt="image" src="https://github.com/user-attachments/assets/8a68362c-0562-4a90-b21d-17f1a41ec896" />
+
+- 카페별 랜덤박스 결제, QR 기반 적립
+
+<img width="3840" height="2160" alt="image" src="https://github.com/user-attachments/assets/5ec8d619-29bb-44d0-8763-fd209ea6fbbd" />
+

apps/customer/next.config.ts

@@ -6,3 +6,4 @@ const nextConfig: NextConfig = {
 };
 
 export default nextConfig;
+

apps/customer/package.json

@@ -8,6 +8,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@compasser/api": "workspace:^",
     "@compasser/design-system": "workspace:*",
     "@tanstack/react-query": "^5.90.21",
     "next": "16.1.6",

apps/customer/src/app/(tabs)/layout.tsx

@@ -18,14 +18,13 @@ export default function TabsLayout({ children }: TabsLayoutProps) {
   const router = useRouter();
   const pathname = usePathname();
 
-  const activeKey =
-    pathname === "/main"
-      ? "home"
-      : pathname === "/order"
-        ? "order"
-        : pathname === "/mypage"
-          ? "my"
-          : "home";
+  const activeKey = pathname.startsWith("/mypage")
+    ? "my"
+    : pathname.startsWith("/order")
+      ? "order"
+      : pathname.startsWith("/main")
+        ? "home"
+        : "home";
 
   const handleTabChange = (key: string) => {
     if (key === "home") {
@@ -44,8 +43,10 @@ export default function TabsLayout({ children }: TabsLayoutProps) {
   };
 
   return (
-    <div className="relative mx-auto min-h-screen w-full max-w-[42.5rem] bg-white">
-      <div className="pb-[8.4rem]">{children}</div>
+    <div className="flex h-dvh w-full flex-col overflow-hidden bg-white">
+      <div className="ds-scrollbar-hidden flex-1 overflow-y-auto">
+        {children}
+      </div>
 
       <BottomTabBar
         items={tabItems}

apps/customer/src/app/(tabs)/main/_apis/searchAddressByKakao.ts

@@ -0,0 +1,72 @@
+"use client";
+
+import type { AddressSearchItem } from "../_types/address-search";
+
+export function searchAddressByKakao(
+  keyword: string,
+  size = 10
+): Promise<AddressSearchItem[]> {
+  return new Promise((resolve, reject) => {
+    const trimmedKeyword = keyword.trim();
+
+    if (!trimmedKeyword) {
+      resolve([]);
+      return;
+    }
+
+    if (
+      typeof window === "undefined" ||
+      !window.kakao ||
+      !window.kakao.maps ||
+      !window.kakao.maps.services
+    ) {
+      reject(new Error("Kakao services library is not loaded."));
+      return;
+    }
+
+    const geocoder = new window.kakao.maps.services.Geocoder();
+
+    geocoder.addressSearch(
+      trimmedKeyword,
+      (result: KakaoAddressSearchResult[], status: string) => {
+        const { kakao } = window;
+
+        if (status === kakao.maps.services.Status.ZERO_RESULT) {
+          resolve([]);
+          return;
+        }
+
+        if (status !== kakao.maps.services.Status.OK) {
+          reject(new Error("주소 검색 중 오류가 발생했습니다."));
+          return;
+        }
+
+        const mapped = result.slice(0, size).map(
+          (item: KakaoAddressSearchResult, index: number) => {
+            const lotNumberAddress =
+              item.address?.address_name || item.address_name || "";
+
+            const roadAddress =
+              item.road_address?.address_name || item.address_name || "";
+
+            return {
+              id: `${item.x}-${item.y}-${index}`,
+              label: roadAddress || lotNumberAddress,
+              lotNumberAddress,
+              roadAddress,
+              longitude: Number(item.x),
+              latitude: Number(item.y),
+            };
+          }
+        );
+
+        resolve(mapped);
+      },
+      {
+        page: 1,
+        size,
+        analyze_type: window.kakao.maps.services.AnalyzeType.SIMILAR,
+      }
+    );
+  });
+}

apps/customer/src/app/(tabs)/main/_components/AddressSearchBottomSheet.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { BottomSheet, Input, Icon } from "@compasser/design-system";
+import type { AddressSearchItem } from "../_types/address-search";
+import { searchAddressByKakao } from "../_apis/searchAddressByKakao";
+
+interface AddressSearchBottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  onSelectAddress: (item: AddressSearchItem) => void;
+}
+
+export default function AddressSearchBottomSheet({
+  open,
+  onClose,
+  onSelectAddress,
+}: AddressSearchBottomSheetProps) {
+  const [keyword, setKeyword] = useState("");
+  const [results, setResults] = useState<AddressSearchItem[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+
+  const debounceRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setKeyword("");
+      setResults([]);
+      setIsSearching(false);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const trimmedKeyword = keyword.trim();
+
+    if (!trimmedKeyword) {
+      setResults([]);
+      setIsSearching(false);
+      return;
+    }
+
+    if (debounceRef.current) {
+      window.clearTimeout(debounceRef.current);
+    }
+
+    debounceRef.current = window.setTimeout(async () => {
+      try {
+        setIsSearching(true);
+        const searched = await searchAddressByKakao(trimmedKeyword, 10);
+        setResults(searched);
+      } catch (error) {
+        console.error(error);
+        setResults([]);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 250);
+
+    return () => {
+      if (debounceRef.current) {
+        window.clearTimeout(debounceRef.current);
+      }
+    };
+  }, [keyword, open]);
+
+  const handleQuickSelect = () => {
+    onSelectAddress({
+      id: "catholic-univ",
+      label: "가톨릭대 주변 탐색",
+      lotNumberAddress: "경기도 부천시 원미구 역곡동 일대",
+      roadAddress: "가톨릭대학교 성심교정 주변",
+      longitude: 126.8016,
+      latitude: 37.4875,
+    });
+  };
+
+  const handleSelectItem = (item: AddressSearchItem) => {
+    onSelectAddress(item);
+  };
+
+  return (
+    <BottomSheet
+      open={open}
+      onClose={onClose}
+      variant="default"
+      overlay
+      closeOnOverlayClick
+      showHandle
+      className="w-full"
+      contentClassName="px-[1.6rem] pt-[0.8rem] pb-[2rem]"
+    >
+      <Input
+        inputStyle="address"
+        value={keyword}
+        onChange={(event) => setKeyword(event.target.value)}
+        placeholder="위치 입력"
+      />
+
+      <button
+        type="button"
+        onClick={handleQuickSelect}
+        className="ml-[0.6rem] mt-[1rem] inline-flex items-center rounded-[999px] border border-secondary-variant px-[0.8rem] py-[0.2rem]"
+      >
+        <Icon
+          name="Pin"
+          width={20}
+          height={20}
+          className="mr-[0.4rem]"
+        />
+        <span className="body2-r text-default">가톨릭대 주변 탐색</span>
+      </button>
+
+      {results.length > 0 && (
+        <div className="mt-[1.2rem] max-h-[32rem] overflow-y-auto">
+          {results.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              onClick={() => handleSelectItem(item)}
+              className="block w-full border-b border-gray-100 px-[0.6rem] pt-[0.6rem] pb-[0.8rem] text-left"
+            >
+              <p className="body2-r text-default">{item.lotNumberAddress}</p>
+              <p className="caption1-r text-gray-500">{item.roadAddress}</p>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {keyword.trim() && isSearching && (
+        <p className="mt-[1.2rem] px-[0.6rem] text-center caption1-r text-gray-500">
+          검색 중...
+        </p>
+      )}
+
+      {keyword.trim() && !isSearching && results.length === 0 && (
+        <p className="mt-[1.2rem] px-[0.6rem] text-center caption1-r text-gray-500">
+          검색 결과가 없습니다.
+        </p>
+      )}
+    </BottomSheet>
+  );
+}