[Feat/#56] 사장님 스토어 계정 및 스토어 정보 수정 페이지 생성

apps/owner/src/app/(tabs)/mypage/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Header, Icon } from "@compasser/design-system";
+
+interface SettingMenuItemProps {
+  label: string;
+  onClick: () => void;
+}
+
+function SettingMenuItem({ label, onClick }: SettingMenuItemProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex w-full items-center justify-between border-b border-gray-200 px-[1.6rem] py-[1.6rem] text-left"
+    >
+      <span className="body1-r text-default">{label}</span>
+      <Icon
+        name="NextButton"
+        width={20}
+        height={20}
+        ariaHidden={false}
+      />
+    </button>
+  );
+}
+
+export default function MyPageSettingsPage() {
+  const router = useRouter();
+
+  return (
+    <div className="flex min-h-dvh flex-col bg-white">
+      <Header variant="center-title-shadow" title="설정" />
+
+      <div className="flex flex-col">
+        <SettingMenuItem
+          label="스토어 정보 수정"
+          onClick={() => router.push("/mypage/store-info")}
+        />
+
+        <SettingMenuItem
+          label="내 스토어 계정"
+          onClick={() => router.push("/mypage/store-account")}
+        />
+      </div>
+    </div>
+  );
+}

apps/owner/src/app/(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { Button, Modal } from "@compasser/design-system";
+import type { ConfirmActionModalProps } from "../_types/confirmAction";
+
+export const ConfirmActionModal = ({
+  open,
+  title,
+  cancelText,
+  confirmText,
+  cancelVariant = "gray",
+  confirmVariant = "primary",
+  onClose,
+  onConfirm,
+  reverseButtons = false,
+}: ConfirmActionModalProps) => {
+  const cancelButton = (
+    <Button
+      size="sm"
+      variant={cancelVariant}
+      fullWidth={false}
+      className="px-[2.2rem]"
+      onClick={onClose}
+    >
+      {cancelText}
+    </Button>
+  );
+
+  const confirmButton = (
+    <Button
+      size="sm"
+      variant={confirmVariant}
+      fullWidth={false}
+      className="px-[2.2rem]"
+      onClick={onConfirm}
+    >
+      {confirmText}
+    </Button>
+  );
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      variant="confirm"
+      title={title}
+      bodyClassName="mt-0"
+      footerClassName="mt-[2rem]"
+      footer={
+        <div className="flex items-center justify-center gap-[1.2rem]">
+          {reverseButtons ? (
+            <>
+              {confirmButton}
+              {cancelButton}
+            </>
+          ) : (
+            <>
+              {cancelButton}
+              {confirmButton}
+            </>
+          )}
+        </div>
+      }
+    />
+  );
+};

apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerAccountCard.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { Card } from "@compasser/design-system";
+import { ConfirmActionModal } from "./ConfirmActionModal";
+
+export const OwnerAccountCard = () => {
+  const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
+  const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
+
+  const handleOpenLogoutModal = () => {
+    setIsLogoutModalOpen(true);
+  };
+
+  const handleCloseLogoutModal = () => {
+    setIsLogoutModalOpen(false);
+  };
+
+  const handleOpenWithdrawModal = () => {
+    setIsWithdrawModalOpen(true);
+  };
+
+  const handleCloseWithdrawModal = () => {
+    setIsWithdrawModalOpen(false);
+  };
+
+  const handleLogout = () => {
+    console.log("로그아웃");
+    setIsLogoutModalOpen(false);
+  };
+
+  const handleWithdraw = () => {
+    console.log("회원탈퇴");
+    setIsWithdrawModalOpen(false);
+  };
+
+  return (
+    <>
+      <Card variant="gray-200-elevated">
+        <div>
+          <p className="body1-m text-primary">내 스토어 계정</p>
+
+          <div className="mt-[0.8rem] border-t border-gray-200 px-[1rem] py-[1rem]">
+            <div className="flex flex-col items-start gap-[1.2rem]">
+              <button
+                type="button"
+                onClick={handleOpenLogoutModal}
+                className="body2-r text-default"
+              >
+                로그아웃
+              </button>
+
+              <button
+                type="button"
+                onClick={handleOpenWithdrawModal}
+                className="body2-r text-default"
+              >
+                회원탈퇴
+              </button>
+            </div>
+          </div>
+        </div>
+      </Card>
+
+      <ConfirmActionModal
+        open={isLogoutModalOpen}
+        title="로그아웃하시겠습니까?"
+        cancelText="그만두기"
+        confirmText="로그아웃"
+        cancelVariant="gray"
+        confirmVariant="primary"
+        onClose={handleCloseLogoutModal}
+        onConfirm={handleLogout}
+      />
+
+      <ConfirmActionModal
+        open={isWithdrawModalOpen}
+        title="탈퇴하시겠습니까?"
+        cancelText="그만두기"
+        confirmText="탈퇴하기"
+        cancelVariant="gray"
+        confirmVariant="secondary"
+        onClose={handleCloseWithdrawModal}
+        onConfirm={handleWithdraw}
+        reverseButtons={true}
+      />
+    </>
+  );
+};

apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { Card } from "@compasser/design-system";
+
+export const OwnerBusinessNumberCard = () => {
+  return (
+    <Card variant="gray-200-elevated">
+      <div>
+        <p className="body1-m text-primary">내 사업자 등록번호</p>
+
+        <div className="mt-[0.8rem] border-t border-gray-200 py-[1rem]">
+          <div className="flex items-center justify-between">
+            <span className="body2-r text-default">사업자 등록번호</span>
+            <span className="body2-r text-gray-600">123-45-67890</span>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};

apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Icon } from "@compasser/design-system";
+
+export const OwnerProfileSection = () => {
+  return (
+    <section className="bg-background px-[1.6rem] py-[3.2rem]">
+      <div className="flex items-start">
+        <div className="shrink-0">
+          <Icon
+            name="ProfileCharacter"
+            width={80}
+            height={80}
+            ariaHidden={true}
+          />
+        </div>
+
+        <div className="ml-[0.8rem] min-w-0 body1-m text-default">
+          <p>홍길동</p>
+          <p>루키사장</p>
+          <p>owner@example.com</p>
+        </div>
+      </div>
+    </section>
+  );
+};

apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerStoreAccountInfoCard.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Card, Icon } from "@compasser/design-system";
+
+export const OwnerStoreAccountInfoCard = () => {
+  const router = useRouter();
+
+  const handleMoveStoreInfoPage = () => {
+    router.push("/mypage/store-info");
+  };
+
+  return (
+    <Card variant="gray-200-elevated">
+      <div>
+        <div className="flex items-center justify-between">
+          <p className="body1-m text-primary">내 계좌 정보</p>
+
+          <button
+            type="button"
+            onClick={handleMoveStoreInfoPage}
+            className="flex items-center gap-[0.2rem] text-gray-600"
+          >
+            <span className="body2-m text-gray-600">수정하기</span>
+            <Icon
+              name="NextButton"
+              width={16}
+              height={16}
+              ariaHidden={true}
+            />
+          </button>
+        </div>
+
+        <div className="mt-[0.8rem] border-t border-gray-200 py-[1rem]">
+          <div className="flex flex-col gap-[1.2rem]">
+            <div className="flex items-center justify-between">
+              <span className="body2-r text-default">은행명</span>
+              <span className="body2-r text-gray-600">국민은행</span>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <span className="body2-r text-default">계좌번호</span>
+              <span className="body2-r text-gray-600">
+                123-456-789012
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+};

apps/owner/src/app/(tabs)/mypage/store-account/_types/confirmAction.ts

@@ -0,0 +1,11 @@
+export interface ConfirmActionModalProps {
+  open: boolean;
+  title: string;
+  cancelText: string;
+  confirmText: string;
+  cancelVariant?: "gray" | "primary" | "secondary";
+  confirmVariant?: "gray" | "primary" | "secondary";
+  onClose: () => void;
+  onConfirm: () => void;
+  reverseButtons?: boolean;
+}

apps/owner/src/app/(tabs)/mypage/store-account/page.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Header } from "@compasser/design-system";
+import { OwnerAccountCard } from "./_components/OwnerAccountCard";
+import { OwnerBusinessNumberCard } from "./_components/OwnerBusinessNumberCard";
+import { OwnerProfileSection } from "./_components/OwnerProfileSection";
+import { OwnerStoreAccountInfoCard } from "./_components/OwnerStoreAccountInfoCard";
+
+export default function StoreAccountPage() {
+  const router = useRouter();
+
+  return (
+    <main className="flex min-h-dvh flex-col bg-white">
+      <Header
+        variant="back-title"
+        title="내 스토어 계정"
+        onBackClick={() => router.back()}
+      />
+
+      <OwnerProfileSection />
+
+      <section className="flex-1 bg-white px-[1.75rem] pt-[3.2rem] pb-[3.2rem]">
+        <div className="flex flex-col gap-[2rem]">
+          <OwnerAccountCard />
+          <OwnerStoreAccountInfoCard />
+          <OwnerBusinessNumberCard />
+        </div>
+      </section>
+    </main>
+  );
+}