diff --git a/apps/owner/src/app/(tabs)/mypage/page.tsx b/apps/owner/src/app/(tabs)/mypage/page.tsx new file mode 100644 index 0000000..f1326f4 --- /dev/null +++ b/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 ( + + ); +} + +export default function MyPageSettingsPage() { + const router = useRouter(); + + return ( +
+
+ +
+ router.push("/mypage/store-info")} + /> + + router.push("/mypage/store-account")} + /> +
+
+ ); +} \ No newline at end of file diff --git a/apps/owner/src/app/(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx b/apps/owner/src/app/(tabs)/mypage/store-account/_components/ConfirmActionModal.tsx new file mode 100644 index 0000000..f594306 --- /dev/null +++ b/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 = ( + + ); + + const confirmButton = ( + + ); + + return ( + + {reverseButtons ? ( + <> + {confirmButton} + {cancelButton} + + ) : ( + <> + {cancelButton} + {confirmButton} + + )} + + } + /> + ); +}; \ No newline at end of file diff --git a/apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerAccountCard.tsx b/apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerAccountCard.tsx new file mode 100644 index 0000000..ebff064 --- /dev/null +++ b/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 ( + <> + +
+

내 스토어 계정

+ +
+
+ + + +
+
+
+ + + + + + + ); +}; \ No newline at end of file diff --git a/apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx b/apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerBusinessNumberCard.tsx new file mode 100644 index 0000000..2481fdc --- /dev/null +++ b/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 ( + +
+

내 사업자 등록번호

+ +
+
+ 사업자 등록번호 + 123-45-67890 +
+
+
+ + ); +}; \ No newline at end of file diff --git a/apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx b/apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerProfileSection.tsx new file mode 100644 index 0000000..9f941bb --- /dev/null +++ b/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 ( +
+
+
+ +
+ +
+

홍길동

+

루키사장

+

owner@example.com

+
+
+
+ ); +}; \ No newline at end of file diff --git a/apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerStoreAccountInfoCard.tsx b/apps/owner/src/app/(tabs)/mypage/store-account/_components/OwnerStoreAccountInfoCard.tsx new file mode 100644 index 0000000..cc4a19c --- /dev/null +++ b/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 ( + +
+
+

내 계좌 정보

+ + +
+ +
+
+
+ 은행명 + 국민은행 +
+ +
+ 계좌번호 + + 123-456-789012 + +
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/apps/owner/src/app/(tabs)/mypage/store-account/_types/confirmAction.ts b/apps/owner/src/app/(tabs)/mypage/store-account/_types/confirmAction.ts new file mode 100644 index 0000000..4a9beb4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/apps/owner/src/app/(tabs)/mypage/store-account/page.tsx b/apps/owner/src/app/(tabs)/mypage/store-account/page.tsx new file mode 100644 index 0000000..f9c2488 --- /dev/null +++ b/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 ( +
+
router.back()} + /> + + + +
+
+ + + +
+
+
+ ); +} \ No newline at end of file diff --git a/apps/owner/src/app/(tabs)/mypage/store-info/page.tsx b/apps/owner/src/app/(tabs)/mypage/store-info/page.tsx new file mode 100644 index 0000000..cd2ffdc --- /dev/null +++ b/apps/owner/src/app/(tabs)/mypage/store-info/page.tsx @@ -0,0 +1,212 @@ +"use client"; + +import { useMemo, useState } from "react"; +import { useRouter } from "next/navigation"; +import StoreNameField from "@/app/signup/register/_components/fields/StoreNameField"; +import EmailField from "@/app/signup/register/_components/fields/EmailField"; +import StoreAddressField from "@/app/signup/register/_components/fields/StoreAddressField"; +import AccountField from "@/app/signup/register/_components/fields/AccountField"; +import BusinessHoursSection from "@/app/signup/register/_components/sections/BusinessHoursSection"; +import RandomBoxSection from "@/app/signup/register/_components/sections/RandomBoxSection"; +import PhotoUploadSection from "@/app/signup/register/_components/sections/PhotoUploadSection"; +import TagSection from "@/app/signup/register/_components/sections/TagSection"; +import BusinessHoursModal from "@/app/signup/register/_components/modals/BusinessHoursModal"; +import RandomBoxModal from "@/app/signup/register/_components/modals/RandomBoxModal"; +import { Button, Header } from "@compasser/design-system"; + +import { + businessHoursData, + dayLabelMap, + orderedDays, + initialRandomBoxes, + tagOptions, +} from "@/app/signup/register/_constants/register"; + +import type { + AccountType, + RandomBoxItem, + RandomBoxFormValue, +} from "@/app/signup/register/_types/register"; + +export default function StoreInfoEditPage() { + const router = useRouter(); + + const [selectedAccountType, setSelectedAccountType] = + useState(null); + const [selectedTags, setSelectedTags] = useState([]); + const [randomBoxes, setRandomBoxes] = + useState(initialRandomBoxes); + const [selectedRandomBoxIds, setSelectedRandomBoxIds] = useState([]); + const [isBusinessHoursModalOpen, setIsBusinessHoursModalOpen] = + useState(false); + const [isRandomBoxModalOpen, setIsRandomBoxModalOpen] = useState(false); + + const [photoFile, setPhotoFile] = useState(null); + const [photoPreviewUrl, setPhotoPreviewUrl] = useState(""); + + const businessHoursRows = useMemo(() => { + return orderedDays.map((day) => { + const value = businessHoursData[day]; + const formatted = value === "closed" ? "휴무" : value.replace("-", " ~ "); + + return { + dayLabel: dayLabelMap[day], + time: formatted, + }; + }); + }, []); + + const toggleTag = (tag: string) => { + setSelectedTags((prev) => + prev.includes(tag) + ? prev.filter((item) => item !== tag) + : [...prev, tag] + ); + }; + + const toggleRandomBoxSelection = (id: number) => { + setSelectedRandomBoxIds((prev) => + prev.includes(id) + ? prev.filter((item) => item !== id) + : [...prev, id] + ); + }; + + const handleDeleteRandomBoxes = () => { + setRandomBoxes((prev) => + prev.filter((item) => !selectedRandomBoxIds.includes(item.id)) + ); + setSelectedRandomBoxIds([]); + }; + + const handleOpenRandomBoxModal = () => { + setIsRandomBoxModalOpen(true); + }; + + const handleCloseRandomBoxModal = () => { + setIsRandomBoxModalOpen(false); + }; + + const handleSubmitRandomBox = (data: RandomBoxFormValue) => { + const nextId = + randomBoxes.length > 0 + ? Math.max(...randomBoxes.map((item) => item.id)) + 1 + : 1; + + setRandomBoxes((prev) => [ + ...prev, + { + id: nextId, + name: data.name, + quantity: data.quantity, + price: 0, + limit: data.limit, + pickupStartTime: data.pickupStartTime, + pickupEndTime: data.pickupEndTime, + description: data.description, + }, + ]); + }; + + const handleOpenBusinessHoursModal = () => { + setIsBusinessHoursModalOpen(true); + }; + + const handleCloseBusinessHoursModal = () => { + setIsBusinessHoursModalOpen(false); + }; + + const handleSubmitBusinessHours = (data: any) => { + console.log("영업시간 수정", data); + }; + + const handleSearchAddress = () => { + console.log("주소 검색"); + }; + + const handleChangePhoto = (file: File) => { + setPhotoFile(file); + + const objectUrl = URL.createObjectURL(file); + setPhotoPreviewUrl(objectUrl); + }; + + const handleCompleteEdit = () => { + console.log("수정 파일", photoFile); + router.push("/mypage"); + }; + + return ( + <> +
+
router.back()} + /> + +
+
+
+ + + + + + + + + + + + +
+
+ +
+ +
+
+
+ + + + + + ); +} \ No newline at end of file