Merge pull request #192 from UPbrella/develop

Deploy

src/components/atoms/DetailBtn/index.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryFn } from "@storybook/react";
+import DetailBtn, { TDetailBtn } from ".";
+import { BrowserRouter as Router } from "react-router-dom";
+
+export default {
+  title: "atoms/DetailBtn",
+  component: DetailBtn,
+  tags: ["autodocs"],
+} as Meta;
+
+// Story 함수의 타입 정의
+const Template: StoryFn<TDetailBtn> = (args) => (
+  <Router>
+    <DetailBtn {...args} />
+  </Router>
+);
+
+export const Default = Template.bind({});

src/components/atoms/DetailBtn/index.tsx

@@ -0,0 +1,24 @@
+import StorefrontOutlinedIcon from "@mui/icons-material/StorefrontOutlined";
+import { useNavigate } from "react-router-dom";
+
+export type TDetailBtn = {
+  id: number;
+};
+
+const DetailBtn = ({ id }: TDetailBtn) => {
+  const navigate = useNavigate();
+  const handleDetailClick = () => {
+    navigate(`/rentalOffice/${id}`);
+  };
+  return (
+    <button
+      className="text-center text-primary-500 rounded-99 w-full py-9 text-15 font-semibold border border-primary-500"
+      onClick={handleDetailClick}
+    >
+      <StorefrontOutlinedIcon className="mr-2" />
+      소개 더보기
+    </button>
+  );
+};
+
+export default DetailBtn;

src/components/atoms/NaverDirectionBtn/index.stories.tsx

@@ -1,9 +1,8 @@
-import React from "react";
 import NaverDirectionBtn, { TNaverDirectionBtn } from "@/components/atoms/NaverDirectionBtn/index";
 import { Meta, StoryFn } from "@storybook/react";
 
 export default {
-  title: "Example/NaverDirectionBtn",
+  title: "atoms/NaverDirectionBtn",
   component: NaverDirectionBtn,
   tags: ["autodocs"],
 } as Meta;

src/components/molecules/MobileCard/index.tsx

@@ -1,29 +1,31 @@
 import MobileCardInfo from "@/components/atoms/MobileCardInfo";
 import NaverDirectionBtn from "@/components/atoms/NaverDirectionBtn";
 import { TStoreListDetail } from "@/types/admin/StoreTypes";
+import DetailBtn from "@/components/atoms/DetailBtn";
 
 export type TMobileCard = {
   storeDetail: TStoreListDetail;
 };
 
-const MobileCard = (storeDetail: TMobileCard) => {
+const MobileCard = ({ storeDetail }: TMobileCard) => {
   return (
     <div className="mb-20 px-20 bg-white">
       <div className="flex justify-center items-center mb-16">
-        <div className="text-gray-700 text-16 font-semibold mr-8">
-          {storeDetail.storeDetail.name}
-        </div>
-        <div className="text-gray-600 text-12">{storeDetail.storeDetail.category}</div>
+        <div className="text-gray-700 text-16 font-semibold mr-8">{storeDetail.name}</div>
+        <div className="text-gray-600 text-12">{storeDetail.category}</div>
       </div>
       <div className="flex gap-x-2 mb-16">
-        <img className="rounded-8 w-120 h-120" src={storeDetail.storeDetail.imageUrls[0]}></img>
-        <MobileCardInfo storeDetail={storeDetail.storeDetail} />
+        <img className="rounded-8 w-120 h-120" src={storeDetail.imageUrls[0]}></img>
+        <MobileCardInfo storeDetail={storeDetail} />
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <DetailBtn id={storeDetail.id} />
+        <NaverDirectionBtn
+          elon={storeDetail.longitude}
+          elat={storeDetail.latitude}
+          address={storeDetail.address}
+        />
       </div>
-      <NaverDirectionBtn
-        elon={storeDetail.storeDetail.longitude}
-        elat={storeDetail.storeDetail.latitude}
-        address={storeDetail.storeDetail.address}
-      />
     </div>
   );
 };

src/components/pages/RentalLocation/RentalLocationPage.tsx

@@ -212,7 +212,7 @@ const RentalInfo = () => {
                 isBottomSheetOpen={isBottomOpen}
                 setIsBottomSheetOpen={setIsBottomOpen}
                 snapPoints={[280, 280, 0]}
-                _className="hidden md:block sm:block"
+                _className="hidden lg:block"
               >
                 <MobileCard storeDetail={storeDetail} />
               </BottomSheet>