fix: safearea 제거 (#73)

Central-MakeUs · Jan 27, 2025 · 9be9154 · 9be9154
1 parent c1186e4
commit 9be9154
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 49 deletions.
diff --git a/src/entities/record/components/SearchStep/WriteSearchBar.tsx b/src/entities/record/components/SearchStep/WriteSearchBar.tsx
@@ -1,23 +1,22 @@
 import { SearchBar } from "@repo/design-system/SearchBar";
 import { MagnifyIcon } from "@repo/icon/MagnifyIcon";
-import { useDebouncedInputValue } from "@xionwcfm/react";
-import { useEffect } from "react";
+import { useDebounce } from "@xionwcfm/react";
+import { useState } from "react";
 import { useWriteSearchStore } from "./WriteSearchStep.store";
 
 export const WriteSearchBar = () => {
   const storeValue = useWriteSearchStore((state) => state.query);
   const setQuery = useWriteSearchStore((state) => state.actions.setQuery);
-  const debouncing = useDebouncedInputValue(storeValue, { delay: 2000 });
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useEffect(() => {
-    setQuery(debouncing.debouncedValue);
-  }, [debouncing.debouncedValue]);
+  const [value, setvalue] = useState(storeValue);
+  const debouncedQuery = useDebounce(setQuery, 2000);
 
   return (
     <SearchBar
-      value={debouncing.value}
-      onChange={(e) => debouncing.onChange(e.target.value)}
+      value={value}
+      onChange={(e) => {
+        setvalue(e.target.value);
+        debouncedQuery(e.target.value);
+      }}
       left={<MagnifyIcon />}
       placeholder="책 제목을 검색해주세요"
     />

diff --git a/src/features/bookRecordDetail/InteractiveBookRecordTopNavigationBar.tsx b/src/features/bookRecordDetail/InteractiveBookRecordTopNavigationBar.tsx
@@ -56,7 +56,7 @@ export const InteractiveBookRecordTopNavigationBar = (props: Props) => {
             <DropdownMenu.Portal>
               <DropdownMenu.Content className=" z-[2]">
                 <DropdownMenu.Item onClick={onMemoDelete}>전체 삭제하기</DropdownMenu.Item>
-                <DropdownMenu.Item onClick={onSearchReview}>리뷰 검색하기</DropdownMenu.Item>
+                <DropdownMenu.Item onClick={onSearchReview}>블로그 리뷰 보기</DropdownMenu.Item>
               </DropdownMenu.Content>
             </DropdownMenu.Portal>
           </TopNavigation.Root>

diff --git a/src/features/bookRecordDetail/components/BookRecordDetailMemoItem.tsx b/src/features/bookRecordDetail/components/BookRecordDetailMemoItem.tsx
@@ -24,12 +24,12 @@ export const BookRecordDetailMemoItem = (
   }, []);
 
   return (
-    <Stack className="">
-      <Flex className={cn(" text-gray-600 mb-2 ", textVariants({ variant: "body/13_r" }))}>
-        {header}
-      </Flex>
-      <Pressable onPressComplete={onPressComplete} delay={600}>
-        <Stack className=" touch-none select-none w-full pl-4  transition-all data-[pressed=true]:duration-[400ms] data-[pressed=true]:scale-[0.98] data-[pressed=true]:opacity-70 data-[pressed=false]:duration-[400ms]">
+    <Pressable onPressComplete={onPressComplete} delay={400}>
+      <Stack className=" px-[16px] py-[16px] data-[pressed=true]:bg-gray-200 rounded-[14px] touch-none select-none transition-all data-[pressed=true]:duration-[400ms] data-[pressed=true]:scale-[0.98] data-[pressed=true]:opacity-70 data-[pressed=false]:duration-[400ms]">
+        <Flex className={cn(" text-gray-600 mb-2 ", textVariants({ variant: "body/13_r" }))}>
+          {header}
+        </Flex>
+        <Stack className=" group  w-full pl-4 ">
           <Stack
             ref={memoRef}
             className=" p-[10px] min-h-[43px] relative bg-yellow-green w-full rounded-[12px]"
@@ -44,7 +44,7 @@ export const BookRecordDetailMemoItem = (
             />
           </Stack>
         </Stack>
-      </Pressable>
-    </Stack>
+      </Stack>
+    </Pressable>
   );
 };
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,7 @@
 import "./index.css";
 import "../packages/design-system/iosTimePicker.css";
 import { Analytics, MercuryPostHogProvider } from "@repo/analytics";
-import { SafeArea, SafeAreaEffector } from "@repo/bridge-web/SafeArea.tsx";
+import { SafeAreaEffector } from "@repo/bridge-web/SafeArea.tsx";
 import { MobileLayout } from "@repo/design-system/MobileLayout.tsx";
 import { Providers } from "@repo/providers";
 import { MAX_WIDTH } from "@repo/token/index.ts";
@@ -28,30 +28,14 @@ createRoot(document.getElementById("root")!).render(
           <BrowserRouter>
             <OverlayProvider>
               <Routes>
-                <Route
-                  element={
-                    <SafeArea className=" w-full h-full" edges={["top", "left", "right", "bottom"]}>
-                      <BottomNavigationLayout />
-                    </SafeArea>
-                  }
-                >
+                <Route element={<BottomNavigationLayout />}>
                   <Route path="home" element={<HomePage />} />
                   <Route path="timer" element={<TimerPage />} />
                   <Route path="book-record" element={<BookRecordPage />} />
                   <Route path="profile" element={<ProfilePage />} />
                 </Route>
 
-                <Route
-                  path="book-record/write"
-                  element={
-                    <SafeArea
-                      className=" w-full h-screen"
-                      edges={["top", "left", "right", "bottom"]}
-                    >
-                      <BookRecordWritePage />
-                    </SafeArea>
-                  }
-                />
+                <Route path="book-record/write" element={<BookRecordWritePage />} />
                 <Route path="book-record/:recordId" element={<BookRecordDetailPage />} />
 
                 <Route
@@ -61,14 +45,7 @@ createRoot(document.getElementById("root")!).render(
 
                 <Route path="add-memo/:recordId" element={<BookRecordMemoAddPage />} />
 
-                <Route
-                  path=""
-                  element={
-                    <SafeArea className=" w-full " edges={["top", "left", "right", "bottom"]}>
-                      <OnBoardingPage />
-                    </SafeArea>
-                  }
-                />
+                <Route path="" element={<OnBoardingPage />} />
               </Routes>
             </OverlayProvider>
           </BrowserRouter>

diff --git a/src/pages/BookRecordDetailPage.tsx b/src/pages/BookRecordDetailPage.tsx
@@ -51,17 +51,19 @@ export default wrap
             userId={user.userId}
           />
 
-          <Stack className=" pt-[16px] px-[16px] z-[3] bg-white h-full min-h-screen">
-            <JustifyBetween>
+          <Stack className=" pt-[16px]  z-[3] bg-white h-full min-h-screen">
+            <JustifyBetween className=" px-[16px]">
               <Text variant={"body/16_m"} className=" text-gray-600">
                 {gaugeMessage}
               </Text>
               <Text variant={"body/16_m"} className=" text-pastel-violet">
                 {cheeringMessage}
               </Text>
             </JustifyBetween>
+
             <Spacing className=" h-[16px]" />
-            <List className=" w-full   gap-y-4 ">
+
+            <List className=" w-full ">
               {memos.map((memo) => (
                 <BookRecordDetailMemoItem
                   key={memo.memoId}