diff --git a/apps/customer/src/app/login/_components/KakaoLoginButton.tsx b/apps/customer/src/app/login/_components/KakaoLoginButton.tsx
new file mode 100644
index 0000000..ca61d44
--- /dev/null
+++ b/apps/customer/src/app/login/_components/KakaoLoginButton.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Icon } from "@compasser/design-system";
+import { LOGIN_TEXT } from "../_constants/login.constants";
+
+interface KakaoLoginButtonProps {
+ onClick: () => void;
+}
+
+export default function KakaoLoginButton({
+ onClick,
+}: KakaoLoginButtonProps) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/apps/customer/src/app/login/_components/LoginForm.tsx b/apps/customer/src/app/login/_components/LoginForm.tsx
new file mode 100644
index 0000000..b76f96c
--- /dev/null
+++ b/apps/customer/src/app/login/_components/LoginForm.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { Input, Button } from "@compasser/design-system";
+import type { LoginReqDTO } from "@compasser/api";
+import { LOGIN_TEXT } from "../_constants/login.constants";
+
+interface LoginFormProps {
+ values: LoginReqDTO;
+ isPending: boolean;
+ onChangeEmail: (value: string) => void;
+ onChangePassword: (value: string) => void;
+ onSubmit: () => void;
+}
+
+export default function LoginForm({
+ values,
+ isPending,
+ onChangeEmail,
+ onChangePassword,
+ onSubmit,
+}: LoginFormProps) {
+ return (
+ <>
+
+
+ {LOGIN_TEXT.emailLabel}
+
+
onChangeEmail(e.target.value)}
+ />
+
+
+ {LOGIN_TEXT.passwordLabel}
+
+
onChangePassword(e.target.value)}
+ />
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/customer/src/app/login/_components/SignupLinkButton.tsx b/apps/customer/src/app/login/_components/SignupLinkButton.tsx
new file mode 100644
index 0000000..7ceef5f
--- /dev/null
+++ b/apps/customer/src/app/login/_components/SignupLinkButton.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { LOGIN_TEXT } from "../_constants/login.constants";
+
+interface SignupLinkButtonProps {
+ onClick: () => void;
+}
+
+export default function SignupLinkButton({
+ onClick,
+}: SignupLinkButtonProps) {
+ return (
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/customer/src/app/login/_constants/login.constants.ts b/apps/customer/src/app/login/_constants/login.constants.ts
new file mode 100644
index 0000000..80aa76d
--- /dev/null
+++ b/apps/customer/src/app/login/_constants/login.constants.ts
@@ -0,0 +1,11 @@
+export const LOGIN_TEXT = {
+ emailLabel: "이메일",
+ emailPlaceholder: "이메일을 입력해주세요",
+ passwordLabel: "비밀번호",
+ passwordPlaceholder: "비밀번호를 입력해주세요",
+ loginButton: "일반 로그인",
+ loginPendingButton: "로그인 중...",
+ kakaoLoginButton: "카카오 로그인",
+ signupButton: "회원가입",
+ emptyFieldMessage: "이메일과 비밀번호를 입력해주세요.",
+} as const;
\ No newline at end of file
diff --git a/apps/customer/src/app/login/page.tsx b/apps/customer/src/app/login/page.tsx
index 81b1b95..934d9d7 100644
--- a/apps/customer/src/app/login/page.tsx
+++ b/apps/customer/src/app/login/page.tsx
@@ -1,17 +1,70 @@
"use client";
+import { useState } from "react";
import { useRouter } from "next/navigation";
-import { Input, Button, Icon } from "@compasser/design-system";
+import type { LoginReqDTO } from "@compasser/api";
+import LoginForm from "./_components/LoginForm";
+import KakaoLoginButton from "./_components/KakaoLoginButton";
+import SignupLinkButton from "./_components/SignupLinkButton";
+import { LOGIN_TEXT } from "./_constants/login.constants";
+import { useLoginMutation } from "@/shared/queries/mutation/auth/useLoginMutation";
export default function LoginPage() {
const router = useRouter();
+ const loginMutation = useLoginMutation();
+
+ const [formValues, setFormValues] = useState({
+ email: "",
+ password: "",
+ });
const handleMoveRoleSelect = () => {
router.push("/role-select");
};
+ const handleChangeEmail = (value: string) => {
+ setFormValues((prev) => ({
+ ...prev,
+ email: value,
+ }));
+ };
+
+ const handleChangePassword = (value: string) => {
+ setFormValues((prev) => ({
+ ...prev,
+ password: value,
+ }));
+ };
+
const handleLogin = () => {
- console.log("일반 로그인");
+ const email = formValues.email.trim();
+ const password = formValues.password.trim();
+
+ if (!email || !password) {
+ console.log(LOGIN_TEXT.emptyFieldMessage);
+ return;
+ }
+
+ loginMutation.mutate(
+ {
+ email,
+ password,
+ },
+ {
+ onSuccess: (response) => {
+ const accessToken = response.data.accessToken;
+
+ if (typeof window !== "undefined") {
+ localStorage.setItem("accessToken", accessToken);
+ }
+
+ router.push("/main");
+ },
+ onError: (error) => {
+ console.log("일반 로그인 실패", error);
+ },
+ },
+ );
};
const handleKakaoLogin = () => {
@@ -22,57 +75,19 @@ export default function LoginPage() {
-
-
-
-
-
-
-
+
-
-
-
+
{submitError}
+ ) : null}
@@ -106,8 +134,9 @@ export default function SignupPage() {
kind="default"
variant="primary"
onClick={handleSignup}
+ disabled={isFormInvalid || isPending}
>
- 회원가입
+ {isPending ? "회원가입 중..." : "회원가입"}
diff --git a/apps/customer/src/shared/api/api.ts b/apps/customer/src/shared/api/api.ts
new file mode 100644
index 0000000..f23758c
--- /dev/null
+++ b/apps/customer/src/shared/api/api.ts
@@ -0,0 +1,39 @@
+"use client";
+
+import {
+ createCompasserApi,
+ createAuthModule,
+ type TokenPair,
+ type TokenStore,
+} from "@compasser/api";
+
+const tokenStore: TokenStore = {
+ getAccessToken: () =>
+ typeof window === "undefined" ? null : localStorage.getItem("accessToken"),
+
+ getRefreshToken: () =>
+ typeof window === "undefined" ? null : localStorage.getItem("refreshToken"),
+
+ setTokens: ({ accessToken, refreshToken }: TokenPair) => {
+ if (typeof window === "undefined") return;
+
+ localStorage.setItem("accessToken", accessToken);
+
+ if (refreshToken) {
+ localStorage.setItem("refreshToken", refreshToken);
+ }
+ },
+
+ clearTokens: () => {
+ if (typeof window === "undefined") return;
+ localStorage.removeItem("accessToken");
+ localStorage.removeItem("refreshToken");
+ },
+};
+
+export const compasserApi = createCompasserApi({
+ baseURL: process.env.NEXT_PUBLIC_API_BASE_URL ?? "",
+ tokenStore,
+});
+
+export const authModule = createAuthModule(compasserApi);
\ No newline at end of file
diff --git a/apps/customer/src/shared/queries/mutation/auth/useLoginMutation.ts b/apps/customer/src/shared/queries/mutation/auth/useLoginMutation.ts
new file mode 100644
index 0000000..a75cee9
--- /dev/null
+++ b/apps/customer/src/shared/queries/mutation/auth/useLoginMutation.ts
@@ -0,0 +1,10 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { authModule } from "@/shared/api/api";
+
+export const useLoginMutation = () => {
+ const queryClient = useQueryClient();
+
+ return useMutation(authModule.mutations.login(queryClient));
+};
\ No newline at end of file
diff --git a/apps/customer/src/shared/queries/mutation/auth/useSignupMutation.ts b/apps/customer/src/shared/queries/mutation/auth/useSignupMutation.ts
new file mode 100644
index 0000000..82ae4c9
--- /dev/null
+++ b/apps/customer/src/shared/queries/mutation/auth/useSignupMutation.ts
@@ -0,0 +1,10 @@
+"use client";
+
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { authModule } from "@/shared/api/api";
+
+export const useSignupMutation = () => {
+ const queryClient = useQueryClient();
+
+ return useMutation(authModule.mutations.signUp(queryClient));
+};
\ 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
index cd2ffdc..d987eba 100644
--- a/apps/owner/src/app/(tabs)/mypage/store-info/page.tsx
+++ b/apps/owner/src/app/(tabs)/mypage/store-info/page.tsx
@@ -1,7 +1,13 @@
"use client";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
+import { Button, Header } from "@compasser/design-system";
+import type {
+ StoreUpdateReqDTO,
+ StoreLocationUpdateReqDTO,
+} from "@compasser/api";
+
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";
@@ -12,130 +18,230 @@ import PhotoUploadSection from "@/app/signup/register/_components/sections/Photo
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 { useMyStoreQuery } from "@/shared/queries/query/useMyStoreQuery";
+import { usePatchMyStoreMutation } from "@/shared/queries/mutation/auth/usePatchMyStoreMutation";
+import { usePatchMyStoreLocationMutation } from "@/shared/queries/mutation/auth/usePatchMyStoreLocationMutation";
+import { useRandomBoxListQuery } from "@/shared/queries/query/useRandomBoxListQuery";
+import { useCreateRandomBoxMutation } from "@/shared/queries/mutation/auth/useCreateRandomBoxMutation";
+import { useUpdateRandomBoxMutation } from "@/shared/queries/mutation/auth/useUpdateRandomBoxMutation";
+import { useDeleteRandomBoxMutation } from "@/shared/queries/mutation/auth/useDeleteRandomBoxMutation";
+import { useStoreImageQuery } from "@/shared/queries/query/useStoreImageQuery";
+import { useUploadStoreImageMutation } from "@/shared/queries/mutation/auth/useUploadStoreImageMutation";
+import { useRemoveStoreImageMutation } from "@/shared/queries/mutation/auth/useRemoveStoreImageMutation";
import {
- businessHoursData,
- dayLabelMap,
- orderedDays,
- initialRandomBoxes,
- tagOptions,
-} from "@/app/signup/register/_constants/register";
+ parseBusinessHours,
+ EMPTY_BUSINESS_HOURS,
+} from "@/app/signup/register/_utils/business-hours";
-import type {
- AccountType,
- RandomBoxItem,
- RandomBoxFormValue,
-} from "@/app/signup/register/_types/register";
+type FixedTag = "카페" | "베이커리" | "식당";
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 { data: myStore, isLoading: isMyStoreLoading } = useMyStoreQuery();
+ const storeId = myStore?.storeId;
+
+ const { data: randomBoxes = [] } = useRandomBoxListQuery(storeId);
+ const { data: storeImage } = useStoreImageQuery();
+
+ const patchMyStoreMutation = usePatchMyStoreMutation();
+ const patchMyStoreLocationMutation = usePatchMyStoreLocationMutation();
+ const createRandomBoxMutation = useCreateRandomBoxMutation();
+ const updateRandomBoxMutation = useUpdateRandomBoxMutation();
+ const deleteRandomBoxMutation = useDeleteRandomBoxMutation();
+ const uploadStoreImageMutation = useUploadStoreImageMutation();
+ const removeStoreImageMutation = useRemoveStoreImageMutation();
+
+ const [storeName, setStoreName] = useState("");
+ const [storeEmail, setStoreEmail] = useState("");
+ const [inputAddress, setInputAddress] = useState("");
+ const [bankName, setBankName] = useState("");
+ const [depositor, setDepositor] = useState("");
+ const [bankAccount, setBankAccount] = useState("");
+ const [businessHours, setBusinessHours] = useState(EMPTY_BUSINESS_HOURS);
+
+ const tagOptions: FixedTag[] = ["카페", "베이커리", "식당"];
+ const [selectedTag, setSelectedTag] = useState("");
+
+ const [selectedRandomBoxIds, setSelectedRandomBoxIds] = useState(
+ [],
+ );
const [isBusinessHoursModalOpen, setIsBusinessHoursModalOpen] =
useState(false);
const [isRandomBoxModalOpen, setIsRandomBoxModalOpen] = useState(false);
const [photoFile, setPhotoFile] = useState(null);
- const [photoPreviewUrl, setPhotoPreviewUrl] = useState("");
+ const [photoPreviewUrl, setPhotoPreviewUrl] = useState("");
+ const [imageRemoved, setImageRemoved] = useState(false);
+
+ const mapStoreTagToLabel = (tag: string | undefined): FixedTag | "" => {
+ switch (tag) {
+ case "CAFE":
+ return "카페";
+ case "BAKERY":
+ return "베이커리";
+ case "RESTAURANT":
+ return "식당";
+ default:
+ return "";
+ }
+ };
+
+ useEffect(() => {
+ if (!myStore) return;
+
+ setStoreName(myStore.storeName ?? "");
+ setStoreEmail("");
+ setInputAddress(myStore.inputAddress ?? "");
+ setBusinessHours(parseBusinessHours(myStore.businessHours));
+ setSelectedTag(mapStoreTagToLabel(myStore.tag));
+ }, [myStore]);
+
+ useEffect(() => {
+ if (!storeImage || imageRemoved) return;
+ setPhotoPreviewUrl(storeImage.imageUrl);
+ }, [storeImage, imageRemoved]);
const businessHoursRows = useMemo(() => {
+ const dayLabelMap = {
+ mon: "월",
+ tue: "화",
+ wed: "수",
+ thu: "목",
+ fri: "금",
+ sat: "토",
+ sun: "일",
+ } as const;
+
+ const orderedDays = [
+ "mon",
+ "tue",
+ "wed",
+ "thu",
+ "fri",
+ "sat",
+ "sun",
+ ] as const;
+
return orderedDays.map((day) => {
- const value = businessHoursData[day];
- const formatted = value === "closed" ? "휴무" : value.replace("-", " ~ ");
+ const value = businessHours[day];
+ const formatted = value === "closed" ? "휴무" : value || "-";
return {
dayLabel: dayLabelMap[day],
time: formatted,
};
});
- }, []);
-
- const toggleTag = (tag: string) => {
- setSelectedTags((prev) =>
- prev.includes(tag)
- ? prev.filter((item) => item !== tag)
- : [...prev, tag]
- );
- };
+ }, [businessHours]);
const toggleRandomBoxSelection = (id: number) => {
setSelectedRandomBoxIds((prev) =>
- prev.includes(id)
- ? prev.filter((item) => item !== id)
- : [...prev, id]
+ prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id],
);
};
- const handleDeleteRandomBoxes = () => {
- setRandomBoxes((prev) =>
- prev.filter((item) => !selectedRandomBoxIds.includes(item.id))
+ const handleDeleteRandomBoxes = async () => {
+ if (!storeId || selectedRandomBoxIds.length === 0) return;
+
+ await Promise.all(
+ selectedRandomBoxIds.map((boxId) =>
+ deleteRandomBoxMutation.mutateAsync({ storeId, boxId }),
+ ),
);
+
setSelectedRandomBoxIds([]);
};
- const handleOpenRandomBoxModal = () => {
- setIsRandomBoxModalOpen(true);
- };
+ const handleSubmitRandomBox = async (form: {
+ boxName: string;
+ stock: number;
+ price: number;
+ buyLimit: number;
+ content: string;
+ boxId?: number;
+ }) => {
+ if (!storeId) return;
- const handleCloseRandomBoxModal = () => {
- setIsRandomBoxModalOpen(false);
- };
+ if (form.boxId) {
+ await updateRandomBoxMutation.mutateAsync({
+ storeId,
+ boxId: form.boxId,
+ body: {
+ boxName: form.boxName,
+ stock: form.stock,
+ price: form.price,
+ buyLimit: form.buyLimit,
+ content: form.content,
+ },
+ });
+ return;
+ }
- 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,
+ await createRandomBoxMutation.mutateAsync({
+ storeId,
+ body: {
+ boxName: form.boxName,
+ stock: form.stock,
+ price: form.price,
+ buyLimit: form.buyLimit,
+ content: form.content,
},
- ]);
- };
-
- const handleOpenBusinessHoursModal = () => {
- setIsBusinessHoursModalOpen(true);
+ });
};
- const handleCloseBusinessHoursModal = () => {
+ const handleSubmitBusinessHours = (value: typeof businessHours) => {
+ setBusinessHours(value);
setIsBusinessHoursModalOpen(false);
};
- const handleSubmitBusinessHours = (data: any) => {
- console.log("영업시간 수정", data);
+ const handleChangePhoto = (file: File) => {
+ setPhotoFile(file);
+ setImageRemoved(false);
+ setPhotoPreviewUrl(URL.createObjectURL(file));
};
- const handleSearchAddress = () => {
- console.log("주소 검색");
+ const handleRemovePhoto = async () => {
+ setPhotoFile(null);
+ setPhotoPreviewUrl("");
+ setImageRemoved(true);
+
+ if (storeImage) {
+ await removeStoreImageMutation.mutateAsync(undefined);
+ }
};
- const handleChangePhoto = (file: File) => {
- setPhotoFile(file);
+ const handleCompleteEdit = async () => {
+ if (!myStore) return;
- const objectUrl = URL.createObjectURL(file);
- setPhotoPreviewUrl(objectUrl);
- };
+ const storePayload: StoreUpdateReqDTO = {
+ storeName,
+ storeEmail,
+ bankName,
+ depositor,
+ bankAccount,
+ businessHours,
+ };
+
+ const locationPayload: StoreLocationUpdateReqDTO = {
+ inputAddress,
+ };
+
+ await patchMyStoreMutation.mutateAsync(storePayload);
+ await patchMyStoreLocationMutation.mutateAsync(locationPayload);
+
+ if (photoFile) {
+ await uploadStoreImageMutation.mutateAsync(photoFile);
+ }
- const handleCompleteEdit = () => {
- console.log("수정 파일", photoFile);
router.push("/mypage");
};
+ if (isMyStoreLoading) {
+ return 불러오는 중...
;
+ }
+
return (
<>
@@ -148,17 +254,28 @@ export default function StoreInfoEditPage() {
-
-
-
+
+
+
{}}
+ />
+
+ setIsBusinessHoursModalOpen(true)
+ }
/>
setIsRandomBoxModalOpen(true)}
/>
사업자 등록번호를 입력해주세요!
+
handleChange(e.target.value)}
+ error={!!error}
+ errorMessage={error}
/>
-
계좌번호
+
계좌 정보
onSelectAccountType("bank")}
+ onClick={() => setStep("bank")}
>
은행
onSelectAccountType("holder")}
+ onClick={() => setStep("holder")}
>
예금주명
+
+ setStep("account")}
+ >
+ 계좌번호
+
-
+
handleChangeInput(e.target.value)}
+ />
+
+ {step === "bank" && bankKeyword.trim() !== "" && (
+
+ {filteredBanks.map((bank) => (
+ handleSelectBank(bank)}
+ >
+ {bank}
+
+ ))}
+
+ )}
-
+ onChange(e.target.value)}
+ />
-
+
총 수량
-
- updateField("quantity", value)}
- min={0}
- />
-
+
+ updateField("stock", Number(event.target.value || 0))
+ }
+ className="w-[17rem]"
+ containerClassName="border-gray-300"
+ inputClassName="text-gray-600"
+ />
-
-
구매 제한 개수
+
+
가격
-
- updateField("limit", value)}
- min={0}
- />
-
+
+ updateField("price", Number(event.target.value || 0))
+ }
+ className="w-[17rem]"
+ containerClassName="border-gray-300"
+ inputClassName="text-gray-600"
+ />
-
-
픽업 시간
-
-
- updateField("pickupStartTime", value)}
- onChangeEndTime={(value) => updateField("pickupEndTime", value)}
- />
-
+
+
구매 제한 개수
+
+
+ updateField("buyLimit", Number(event.target.value || 0))
+ }
+ className="w-[17rem]"
+ containerClassName="border-gray-300"
+ inputClassName="text-gray-600"
+ />