Merge branch 'develop' of https://github.com/PERMIT-SEOUL/permit-fe

Author: pepperdad

apps/ticket-admin/package.json

@@ -16,6 +16,7 @@
     "axios": "^1.10.0",
     "classnames": "^2.5.1",
     "next": "15.3.6",
+    "query-string": "^9.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^6.0.0"

apps/ticket-admin/src/app/api/reissue/route.ts

@@ -0,0 +1,39 @@
+import { cookies } from "next/headers";
+import { NextResponse } from "next/server";
+
+import { API_URL } from "@/data/constants";
+
+export async function POST(req: Request) {
+  const cookiesStore = await cookies();
+
+  const apiRes = await fetch(
+    process.env.NEXT_PUBLIC_TICKET_API_BASE_URL + API_URL.USER.REISSUE_ACCESS_TOKEN,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: `accessToken=${cookiesStore.get("accessToken")?.value}; refreshToken=${cookiesStore.get("refreshToken")?.value}`,
+      },
+      credentials: "include",
+    },
+  );
+
+  const setCookies = apiRes.headers.getSetCookie();
+
+  const res = NextResponse.json(await apiRes.json(), {
+    status: apiRes.status,
+  });
+
+  // API 서버가 내려준 모든 Set-Cookie를 그대로 전달
+  for (const cookie of setCookies) {
+    // 기존 쿠키 그대로 전달
+    // SSR 환경에서 브라우저 쿠키 사용할 수 있도록 하기 위함
+    res.headers.append("Set-Cookie", cookie);
+
+    // Domain 추가한 쿠키 한 번 더 전달
+    // 브라우저 단에서 자동으로 쿠키가 포함한 요청이 갈 수 있도록 하기 위함
+    res.headers.append("Set-Cookie", `${cookie}; Domain=.permitseoul.com`);
+  }
+
+  return res;
+}

apps/ticket-admin/src/app/events/[eventId]/edit/coupon/_clientBoundary/CouponManagementClient/index.tsx

@@ -18,7 +18,16 @@ type Props = {
 };
 
 export const CouponManagementClient = ({ eventId }: Props) => {
-  const { data: couponsData, isLoading, refetch } = useCouponsQuery({ eventId });
+  const {
+    data: couponsData,
+    isLoading,
+    refetch,
+  } = useCouponsQuery({
+    eventId,
+    options: {
+      refetchOnWindowFocus: true,
+    },
+  });
   const [isEditMode, setIsEditMode] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
 

apps/ticket-admin/src/app/events/[eventId]/edit/rounds/add/_clientBoundary/AddRoundFormClient/index.tsx

@@ -36,6 +36,9 @@ export function AddRoundFormClient({ eventId }: Props) {
 
   const { data: eventDetailData } = useEventDetailQuery({
     eventId,
+    options: {
+      refetchOnWindowFocus: true,
+    },
   });
 
   // 티켓 라운드 이름 필드

apps/ticket-admin/src/app/events/[eventId]/edit/ticket-detail/_clientBoundary/EditTicketDetailFormClient/index.tsx

@@ -25,10 +25,16 @@ export function EditTicketDetailFormClient({ eventId, ticketRoundId }: Props) {
 
   const { data: eventDetailData } = useEventDetailSuspenseQuery({
     eventId,
+    options: {
+      refetchOnWindowFocus: true,
+    },
   });
 
   const { data: ticketsDetail } = useTicketsDetailSuspenseQuery({
     ticketRoundId,
+    options: {
+      refetchOnWindowFocus: true,
+    },
   });
 
   const { mutateAsync: updateTickets } = usePatchTicketsMutation({});

apps/ticket-admin/src/app/events/create/_clientBoundary/EventFormClient/index.tsx

@@ -243,8 +243,6 @@ export function EventFormClient() {
   const venueField = useTextField({
     initialValue: "",
     validate: (value: string) => {
-      if (!value.trim()) return "장소를 입력해주세요.";
-
       return undefined;
     },
     onChange: (value: string) => {
@@ -624,8 +622,9 @@ export function EventFormClient() {
       console.log(error);
 
       if (isAxiosErrorResponse(error)) {
-        alert("이벤트 생성 중 오류가 발생했습니다. 다시 시도해주세요.\n" + error.message);
-        console.error("Error creating event:", error);
+        alert(
+          "이벤트 생성 중 오류가 발생했습니다. 다시 시도해주세요.\n" + error.response?.data.message,
+        );
       }
     } finally {
       setIsSubmitting(false);

apps/ticket-admin/src/app/events/create/_components/EventFormLayout/index.tsx

@@ -304,7 +304,6 @@ export function EventFormLayout({
                   <Typography type="body16" weight="bold">
                     Venue
                   </Typography>
-                  <div className={cx("required")}>*</div>
                 </Flex>
                 <TextField
                   readOnly={isReadOnlyMode}

apps/ticket-admin/src/app/users/_clientBoundary/ChangeRoleModal/index.tsx

@@ -0,0 +1,70 @@
+import { useState } from "react";
+
+import { Button, Dialog, Flex } from "@permit/design-system";
+import { usePutUserRoleMutation } from "@/data/admin/putUserRole/mutation";
+import { ModalComponentProps } from "@/shared/hooks/useModal/types";
+import { isAxiosErrorResponse } from "@/shared/types/axioxError";
+
+type Props = { userId: number } & ModalComponentProps<{ result: boolean }>;
+
+export const ChangeRoleModal = ({ userId, isOpen, close }: Props) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const { mutateAsync } = usePutUserRoleMutation({ userId });
+
+  const changeUserRole = async (role: "ADMIN" | "STAFF" | "USER") => {
+    setIsSubmitting(true);
+
+    try {
+      await mutateAsync({ role });
+      alert(`${role}으로 권한 변경에 성공하였습니다.`);
+    } catch (error) {
+      if (isAxiosErrorResponse(error)) {
+        alert(error.response?.data.message || "Failed to change user role.");
+
+        return;
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (!isSubmitting) {
+      close();
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onClose={handleClose} title="Change User Role">
+      <Dialog.Content>
+        <Flex gap={12}>
+          <Button
+            variant="primary"
+            size="md"
+            onClick={() => changeUserRole("ADMIN")}
+            disabled={isSubmitting}
+          >
+            ADMIN
+          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            onClick={() => changeUserRole("STAFF")}
+            disabled={isSubmitting}
+          >
+            STAFF
+          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            onClick={() => changeUserRole("USER")}
+            disabled={isSubmitting}
+          >
+            USER
+          </Button>
+        </Flex>
+      </Dialog.Content>
+    </Dialog>
+  );
+};

apps/ticket-admin/src/app/users/_clientBoundary/UserManagementClient/index.module.scss

@@ -0,0 +1,16 @@
+.container {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.header {
+  margin-bottom: 16px;
+}
+
+.input {
+  width: 400px;
+}
+
+.serach_area {
+  margin-top: 40px;
+}

apps/ticket-admin/src/app/users/_clientBoundary/UserManagementClient/index.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import classNames from "classnames/bind";
+
+import { Button, Flex, TextField, Typography } from "@permit/design-system";
+import { useTextField } from "@permit/design-system/hooks";
+import { userOptions } from "@/data/admin/getUser/queries";
+import { UserResponse } from "@/data/admin/getUser/types";
+import { useModal } from "@/shared/hooks/useModal";
+import { isAxiosErrorResponse } from "@/shared/types/axioxError";
+
+import { ChangeRoleModal } from "../ChangeRoleModal";
+import styles from "./index.module.scss";
+
+const cx = classNames.bind(styles);
+
+export const UserManagementClient = () => {
+  const qc = useQueryClient();
+  const { show: changeUserRoleModal } = useModal(ChangeRoleModal);
+
+  const [userInfo, setUserInfo] = useState<UserResponse | null>(null);
+
+  const userEmail = useTextField({
+    initialValue: "",
+    validate: (value: string) => {
+      if (!value.trim()) return "유저 이메일을 입력해주세요.";
+
+      return undefined;
+    },
+  });
+
+  const searchUser = async () => {
+    const userEmailValid = userEmail.validateValue();
+
+    if (!userEmailValid) {
+      return;
+    }
+
+    try {
+      const userInfoData = await qc.fetchQuery(userOptions({ email: userEmail.value }));
+
+      setUserInfo(userInfoData);
+    } catch (error) {
+      if (isAxiosErrorResponse(error)) {
+        setUserInfo(null);
+
+        alert(error.response?.data.message || "유저를 찾을 수 없습니다.");
+      }
+    }
+  };
+
+  return (
+    <div className={cx("container")}>
+      <header className={cx("header")}>
+        <Typography type="title32">User Management</Typography>
+        <Typography type="body14" color="gray300">
+          * 권한을 바꾼 후 적용하려면 로그인을 다시 해주세요.
+        </Typography>
+      </header>
+      <main>
+        <Flex gap={20}>
+          <TextField
+            className={cx("input")}
+            placeholder="이메일을 입력해주세요"
+            value={userEmail.value}
+            onChange={userEmail.handleChange}
+            error={userEmail.error}
+          />
+          <Button variant="cta" onClick={searchUser}>
+            Search
+          </Button>
+        </Flex>
+
+        {userInfo && (
+          <div className={cx("serach_area")}>
+            <Flex justify="space-between">
+              <Flex direction="column">
+                <Typography type="title20">userName: {userInfo.userName}</Typography>
+                <Typography type="title20">current Role: {userInfo.currentUserRole}</Typography>
+              </Flex>
+              <Button
+                variant="primary"
+                onClick={() => changeUserRoleModal({ userId: userInfo.userId })}
+              >
+                Change Role
+              </Button>
+            </Flex>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};