Style: 마이페이지 사장님 화면

src/pages/add/StoreCheck.tsx

@@ -1,42 +1,39 @@
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useEffect } from 'react';
-import Back from '../../shared/assets/whiteArrow.svg';
-import Bg from '../doit/assets/request_bg.svg';
-import Placeholder from '../../shared/assets/placeholder.svg';
+import { useNavigate } from 'react-router-dom';
+
+// import Back from '../../shared/assets/whiteArrow.svg';
+// import Bg from '../doit/assets/request_bg.svg';
+// import Placeholder from '../../shared/assets/placeholder.svg';
+import Header from '@/shared/components/common/Header';
+// import { useMasterStores } from '@/shared/queries/user/useMasterStores';
+
 const StoreCheck = () => {
   const navigate = useNavigate();
-  const location = useLocation();
-  const { storeName, address, restaurantId, thumbnailUrl } = location.state || {
-    storeName: '매장명 없음',
-    address: '주소 없음',
-    restaurantId: 'Id 없음',
-    thumbnailUrl: '사진 미제공',
-  };
+  // const { storeName, address, restaurantId, thumb?nailUrl } = location.state || {
+  //   storeName: '매장명 없음',
+  //   address: '주소 없음',
+  //   restaurantId: 'Id 없음',
+  //   thumbnailUrl: '사진 미제공',
+  // };
+
+  // const { data: stores } = useMasterStores();
+
+  // const handleBackClick = () => {
+  //   navigate(-1);
+  // };
+  // const handleRegisterClick = () => {
+  //   navigate('/add/option', {
+  //     state: {
+  //       storeName: storeName,
+  //       address: address,
+  //       restaurantId: restaurantId,
+  //     },
+  //   });
+  // };
 
-  useEffect(() => {
-    console.log(location);
-  }, [location]);
-  const handleBackClick = () => {
-    navigate(-1);
-  };
-  const handleRegisterClick = () => {
-    navigate('/add/option', {
-      state: {
-        storeName: storeName,
-        address: address,
-        restaurantId: restaurantId,
-      },
-    });
-  };
   return (
-    <div className="relative flex h-screen flex-col items-center">
-      <img
-        src={Bg}
-        alt="배경"
-        className="absolute left-0 top-0 z-[-1] h-full w-full object-cover"
-      />
-      {/*헤더*/}
-      <div className="mt-[7vh] flex h-[48px] w-full flex-row items-center">
+    <div className="px-4">
+      <Header title="내 가게 목록" type="back" backFn={() => navigate(-1)} />
+      {/*<div className="mt-[7vh] flex h-[48px] w-full flex-row items-center">
         <img
           src={Back}
           alt="왼쪽 화살표"
@@ -60,7 +57,6 @@ const StoreCheck = () => {
           alt="가게 썸네일"
           className="mt-[27px] h-[201px] w-[268px] rounded-bl-[3%] rounded-br-[25%] rounded-tl-[25%] rounded-tr-[3%]"
         />
-        {/*가게정보*/}
         <div className="mt-[20px] flex w-full flex-col gap-[10px]">
           <div className={`ml-[26px] text-[24px] font-[700]`}>{storeName}</div>
           <div className={`ml-[26px] text-[14px] font-[500] text-[#35353F]`}>{address}</div>
@@ -73,7 +69,7 @@ const StoreCheck = () => {
             맞습니다
           </button>
         </div>
-      </div>
+      </div> */}
     </div>
   );
 };

src/pages/myPage/MainMyPage.tsx

@@ -4,10 +4,13 @@ import Header from '@/shared/components/common/Header';
 import { GuestMyPage, LoggedInMyPage } from '@/shared/components/myPage/MyPageBranch';
 import useAuthStore from '@/shared/store/useAuthStore';
 import useFooterPropsStore from '@/shared/store/useFooterProps';
+import { useQueryClient } from '@tanstack/react-query';
 
 function MainMyPage() {
   const navigate = useNavigate();
 
+  const queryClient = useQueryClient();
+
   const { user } = useAuthStore();
   const { logout } = useAuthStore();
   const { setFooterProps } = useFooterPropsStore();
@@ -27,6 +30,7 @@ function MainMyPage() {
             onClick={() => {
               navigate('/home');
               logout();
+              queryClient.clear();
               setFooterProps(0);
             }}
           >

src/pages/myPage/MasterSignUp.tsx

@@ -5,7 +5,7 @@ import AuthMaster from '@/shared/components/myPage/AuthMaster';
 import CompleteSignUp from '@/shared/components/myPage/CompleteSignUp';
 
 function MasterSignUp() {
-  const [page, setPage] = useState(3);
+  const [page, setPage] = useState(1);
 
   const nextPage = () => setPage((prev) => prev + 1);
 

src/pages/myPage/MasterStoreList.tsx

@@ -0,0 +1,22 @@
+import { useNavigate } from 'react-router-dom';
+
+import Header from '@/shared/components/common/Header';
+import { useMasterStores } from '@/shared/queries/user/useMasterStores';
+import MyStoreItem from '@/shared/components/myPage/MyStoreItem';
+
+const MasterStoreList = () => {
+  const navigate = useNavigate();
+
+  const { data: stores } = useMasterStores();
+
+  const renderStores = () =>
+    stores?.map((store) => <MyStoreItem key={store.restaurantId} store={store} />);
+
+  return (
+    <div className="px-4">
+      <Header title="내 가게 목록" type="back" backFn={() => navigate(-1)} />
+      <div className="flex flex-col gap-6">{renderStores()}</div>
+    </div>
+  );
+};
+export default MasterStoreList;

src/pages/myPage/ModifyInfo.tsx

@@ -11,9 +11,11 @@ import apiClient from '@/shared/apis/apiClient';
 
 import crossMark from '@/shared/assets/images/plus.png';
 import { useSetNickname, useUpdateNickname } from '@/shared/queries/user/useMyPage';
+import { useQueryClient } from '@tanstack/react-query';
 
 function ModifyInfo() {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const from = useLocation().state?.from;
 
@@ -140,6 +142,7 @@ function ModifyInfo() {
       .delete('/users')
       .then(() => {
         logout();
+        queryClient.clear();
         setSecondModalOpen(true);
       })
       .catch((e) => {

src/pages/myPage/MyReview.tsx

@@ -13,9 +13,15 @@ function MyReview() {
     reviews?.map((review) => <MyReviewItem key={review.reviewId} review={review} />);
 
   return (
-    <div className="px-4">
-      <Header type="back" title="리뷰관리" backFn={() => navigate(-1)} />
-      <section className="flex flex-col gap-5 py-2">{renderReviews()}</section>
+    <div className="relative px-4">
+      <Header
+        type="back"
+        title="리뷰관리"
+        backFn={() => navigate(-1)}
+        className="fixed top-0 z-[5] bg-white"
+        style={{ width: 'calc(100% - 32px)', maxWidth: 'calc(var(--app-width) - 32px)' }}
+      />
+      <section className="mt-12 flex flex-col gap-5 py-2">{renderReviews()}</section>
     </div>
   );
 }

src/shared/apis/user/user.api.ts

@@ -1,5 +1,10 @@
 import apiClient from '../apiClient';
-import type { MyRequestListResponse, MyReviewResponse, Role } from './user.type';
+import type {
+  MasterStoreResponse,
+  MyRequestListResponse,
+  MyReviewResponse,
+  Role,
+} from './user.type';
 
 // role 부여
 export const modifyRole = async ({ role, nickname }: { role: Role; nickname: string }) => {
@@ -40,3 +45,16 @@ export const getMyRequestDetail = async (id: number) => {
   const res = await apiClient.get(`/users/helprequests/${id}`);
   return res.data.data;
 };
+
+// 사장님 매장 검색 (가입 시)
+export const getMasterRestaurant = async (): Promise<MasterStoreResponse[]> => {
+  const res = await apiClient.get('/ownerRestaurant/my');
+  return res.data.data.items;
+};
+
+// 사장님 사업자 등록증 입력
+export const submitCertificate = async (cert: File) => {
+  const formData = new FormData();
+  formData.append('images', cert);
+  await apiClient.put('/users/registration', formData);
+};

src/shared/apis/user/user.type.ts

@@ -28,3 +28,15 @@ export interface MyReviewResponse {
   reviewImageUrl: string;
   createdAt: string;
 }
+
+// 사장님 가게 응답
+export interface MasterStoreResponse {
+  restaurantId: number;
+  restaurantName: string;
+  rating: number;
+  totalReviewCount: number;
+  openingHours: string;
+  corkagePrice: string;
+  corkageOptions: string[];
+  mainImages: string[];
+}

src/shared/components/detail/DetailHeader.tsx

@@ -77,11 +77,25 @@ const DetailHeader = ({ restaurant }: { restaurant: RestaurantInfo }) => {
   }, []);
 
   // 공유 클릭 시 주소 복사
-  const clipLink = () => {
-    navigator.clipboard.writeText(window.location.href);
-    setIsShareModalOpen(false);
-    setIsCopiedModalOpen(true);
-    setTimeout(() => setIsCopiedModalOpen(false), 1000);
+  const clipLink = async () => {
+    const isMobile = /Android|iphone|ipad|ipod/i.test(navigator.userAgent);
+
+    if (navigator.share && isMobile) {
+      try {
+        await navigator.share({
+          title: restaurant.restaurantName,
+          text: `${restaurant.restaurantName} 정보를 확인해보세요!`,
+          url: window.location.href,
+        });
+      } catch (err) {
+        console.log('공유 중 에러 발생 : ' + err);
+      }
+    } else {
+      navigator.clipboard.writeText(window.location.href);
+      setIsShareModalOpen(false);
+      setIsCopiedModalOpen(true);
+      setTimeout(() => setIsCopiedModalOpen(false), 1000);
+    }
   };
 
   // 전화 클릭 시 전화 이동 or 번호 복사

src/shared/components/myPage/AuthMaster.tsx

@@ -1,12 +1,20 @@
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 
 import upload from '@/shared/components/myPage/images/upload-image.png';
-import apiClient from '@/shared/apis/apiClient';
+import { submitCertificate } from '@/shared/apis/user/user.api';
 
 function AuthMaster({ onNext }: { onNext: () => void }) {
   const fileSelector = useRef<HTMLInputElement>(null);
 
   const [selectedFile, setSelectedFile] = useState<File>();
+  const [previewUrl, setPreviewUrl] = useState('');
+  const [isPending, setIsPending] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      if (previewUrl !== '') URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
 
   const handleUpload = () => {
     fileSelector.current?.click();
@@ -16,20 +24,22 @@ function AuthMaster({ onNext }: { onNext: () => void }) {
     const file = e.target.files?.[0];
     if (file) {
       setSelectedFile(file);
+      setPreviewUrl(URL.createObjectURL(file));
     }
   };
 
-  const handVerification = () => {
-    if (!selectedFile) return;
+  const handleVerification = async () => {
+    if (!selectedFile || isPending) return;
 
-    const formData = new FormData();
-    formData.append('images', selectedFile);
-    apiClient
-      .put('/users/registration', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
-      .then(() => {
-        onNext();
-      })
-      .catch((e) => console.error(e));
+    setIsPending(true);
+    try {
+      await submitCertificate(selectedFile);
+      onNext();
+    } catch (e) {
+      console.error('사업자 등록증 등록 실패: ' + e);
+    } finally {
+      setIsPending(false);
+    }
   };
 
   return (
@@ -51,7 +61,11 @@ function AuthMaster({ onNext }: { onNext: () => void }) {
         className="mt-10 flex aspect-square w-full cursor-pointer items-center justify-center rounded-2xl bg-[var(--gray-1)]"
         onClick={handleUpload}
       >
-        <img src={upload} className="h-[155px] w-[194px]" />
+        {previewUrl ? (
+          <img src={previewUrl} className="size-[80%]" />
+        ) : (
+          <img src={upload} className="h-[35%] w-[40%]" />
+        )}
       </div>
       <input
         type="file"
@@ -66,7 +80,7 @@ function AuthMaster({ onNext }: { onNext: () => void }) {
       {selectedFile && (
         <button
           className="fixed bottom-4 left-[10%] right-[10%] mx-auto h-[48px] w-[80%] max-w-[480px] rounded-[10px] bg-[var(--primary)] font-bold text-white"
-          onClick={handVerification}
+          onClick={handleVerification}
         >
           다음
         </button>