Merge pull request #61 from JECT-Study/feat/60-fe-uiux-polishing-and-integration

feat: 전시 제안 동의서 프론트 연동 개선

Author: YeongJae0114

next.config.ts

@@ -8,9 +8,7 @@ const backendOrigin = process.env.BACKEND_ORIGIN ?? "http://localhost:8080";
 
 const nextConfig: NextConfig = {
   async rewrites() {
-    return [
-      { source: "/api/:path*", destination: `${backendOrigin}/api/:path*` },
-    ];
+    return [{ source: "/api/:path*", destination: `${backendOrigin}/api/:path*` }];
   },
 };
 

package.json

@@ -2,6 +2,7 @@
   "name": "refit",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",

src/app/art/[id]/page.tsx

@@ -1,13 +1,15 @@
 "use client";
 
+import { useState } from "react";
+
 import { useQuery } from "@tanstack/react-query";
 import { useParams, useRouter } from "next/navigation";
 
 import ExpandableText from "@/components/archive-detail/ExpandableText";
-import SizeText from "@/components/archive-detail/SizeText";
-import RegionText from "@/components/archive-detail/RegionText";
 import ImageSwiper from "@/components/archive-detail/ImageSwiper";
 import NicknameCard from "@/components/archive-detail/NicknameCard";
+import RegionText from "@/components/archive-detail/RegionText";
+import SizeText from "@/components/archive-detail/SizeText";
 import { useCreateChatRoom } from "@/hooks/useCreateChatRoom";
 import { getArtworkDetail } from "@/services/artworks";
 import { normalizeImageUrl } from "@/utils/normalizeImageUrl";
@@ -21,11 +23,16 @@ function hasText(value?: string | null) {
   return Boolean(value?.trim());
 }
 
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : "전시 문의를 시작하지 못했습니다.";
+}
+
 export default function ArtDetailPage() {
   const router = useRouter();
   const params = useParams<{ id: string }>();
   const artworkId = params.id;
   const createChatRoom = useCreateChatRoom();
+  const [inquiryErrorMessage, setInquiryErrorMessage] = useState<string | null>(null);
 
   const query = useQuery({
     queryKey: ["artwork-detail", artworkId],
@@ -49,11 +56,12 @@ export default function ArtDetailPage() {
   const handleInquiryClick = () => {
     if (!Number.isFinite(numericArtworkId)) return;
 
+    setInquiryErrorMessage(null);
     createChatRoom.mutate(
       { targetType: "ARTWORK", targetId: numericArtworkId },
       {
         onSuccess: room => router.push(`/chat/${room.id}`),
-        onError: error => alert(error.message || "전시 문의를 시작하지 못했습니다."),
+        onError: error => setInquiryErrorMessage(getErrorMessage(error)),
       }
     );
   };
@@ -136,6 +144,14 @@ export default function ArtDetailPage() {
           </div>
 
           <div className="border-border-primary bg-bg-primary fixed right-0 bottom-0 left-0 z-50 border-t px-5 pt-3 pb-9">
+            {inquiryErrorMessage && (
+              <p
+                role="alert"
+                className="text-caption text-error-default mx-auto mb-2 max-w-[430px]"
+              >
+                {inquiryErrorMessage}
+              </p>
+            )}
             <button
               onClick={handleInquiryClick}
               disabled={createChatRoom.isPending}

src/app/art/new/page.tsx

@@ -2,6 +2,10 @@
 
 import { useState } from "react";
 
+import { useMutation } from "@tanstack/react-query";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
 import ArtTooltip from "@/components/archive-form/ArtToolTip";
 import DatePicker from "@/components/archive-form/DayPicker";
 import Dropdown from "@/components/archive-form/Dropdown";
@@ -14,16 +18,18 @@ import Textarea from "@/components/archive-form/Textarea";
 import ToggleButton from "@/components/archive-form/ToggleButton";
 import Header from "@/components/common/Header";
 import { ART_TYPES } from "@/constants/art";
-import { useImageStore } from "@/stores/useImageStore";
 import { useUploadImage } from "@/hooks/useImageUploader";
-import { useRouter } from "next/navigation";
-import { useMutation } from "@tanstack/react-query";
 import { createArtwork } from "@/services/artworks";
+import { useImageStore } from "@/stores/useImageStore";
 
 function FieldWrapper({ children }: { children: React.ReactNode }) {
   return <div className="flex flex-col gap-2">{children}</div>;
 }
 
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : "작품 등록에 실패했습니다.";
+}
+
 export default function ArtCreatePage() {
   const router = useRouter();
 
@@ -47,6 +53,8 @@ export default function ArtCreatePage() {
   const [notes, setNotes] = useState("");
 
   const [isPublic, setIsPublic] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitErrorMessage, setSubmitErrorMessage] = useState<string | null>(null);
 
   const isFormValid =
     images.length > 0 &&
@@ -62,6 +70,11 @@ export default function ArtCreatePage() {
   });
 
   const handleSubmit = async () => {
+    if (isSubmitting) return;
+
+    setIsSubmitting(true);
+    setSubmitErrorMessage(null);
+
     try {
       const uploadedImages = await Promise.all(images.map(image => uploadImage(image.file)));
 
@@ -91,7 +104,9 @@ export default function ArtCreatePage() {
       clearImages();
       router.push("/");
     } catch (error) {
-      console.error(error);
+      setSubmitErrorMessage(getErrorMessage(error));
+    } finally {
+      setIsSubmitting(false);
     }
   };
   return (
@@ -112,9 +127,11 @@ export default function ArtCreatePage() {
           <div className="flex justify-between">
             <Label required>작품 유형</Label>
             <div className="relative">
-              <img
+              <Image
                 src="/info-icon.svg"
                 alt="작품 유형"
+                width={20}
+                height={20}
                 className="mr-2 cursor-pointer"
                 onClick={() => setIsTooltipOpen(!isTooltipOpen)}
               />
@@ -202,16 +219,21 @@ export default function ArtCreatePage() {
 
       {/* Bottom Button () */}
       <div className="border-border-primary fixed right-0 bottom-4 left-0 h-24.5 border-t bg-white px-5 py-4">
+        {submitErrorMessage && (
+          <p role="alert" className="text-caption text-error-default mb-2">
+            {submitErrorMessage}
+          </p>
+        )}
         <button
-          disabled={!isFormValid}
+          disabled={!isFormValid || isSubmitting}
           onClick={handleSubmit}
           className={`text-body-1 h-12.5 w-full rounded-lg font-medium transition-colors ${
-            isFormValid
+            isFormValid && !isSubmitting
               ? "bg-object-primary text-text-invert cursor-pointer"
               : "bg-object-disabled text-text-disabled cursor-not-allowed"
           }`}
         >
-          추가하기
+          {isSubmitting ? "등록 중..." : "추가하기"}
         </button>
       </div>
     </main>

src/app/auth/callback/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
+
 import { useRouter } from "next/navigation";
 
-import { exchangeToken } from "@/services/authApi";
 import { ApiError } from "@/services/apiClient";
+import { exchangeToken } from "@/services/authApi";
 import { useAuthStore } from "@/stores/useAuthStore";
 
 interface Guide {
@@ -14,33 +15,29 @@ interface Guide {
 
 export default function AuthCallbackPage() {
   const router = useRouter();
-  const setAuth = useAuthStore((s) => s.setAuth);
+  const setAuth = useAuthStore(s => s.setAuth);
   const [guide, setGuide] = useState<Guide | null>(null);
   const handled = useRef(false);
 
   useEffect(() => {
     if (handled.current) return; // resultKey는 1회용 — 이중 실행 방지
     handled.current = true;
 
-    const resultKey = new URLSearchParams(window.location.search).get(
-      "resultKey",
-    );
+    const resultKey = new URLSearchParams(window.location.search).get("resultKey");
     if (!resultKey) {
       router.replace("/auth/error?error.code=MISSING_RESULT_KEY");
       return;
     }
 
     exchangeToken(resultKey)
-      .then((res) => {
+      .then(res => {
         switch (res.loginStatus) {
           case "LOGIN_SUCCESS":
-            if (res.accessToken)
-              setAuth({ accessToken: res.accessToken, userId: res.userId });
+            if (res.accessToken) setAuth({ accessToken: res.accessToken, userId: res.userId });
             router.replace("/");
             break;
           case "SIGNUP_REQUIRED":
-            if (res.accessToken)
-              setAuth({ accessToken: res.accessToken, userId: res.userId });
+            if (res.accessToken) setAuth({ accessToken: res.accessToken, userId: res.userId });
             router.replace("/auth/signup/profile");
             break;
           case "LOGIN_METHOD_GUIDE":
@@ -55,7 +52,7 @@ export default function AuthCallbackPage() {
             router.replace("/auth/error?error.code=UNKNOWN_LOGIN_STATUS");
         }
       })
-      .catch((err) => {
+      .catch(err => {
         const code = err instanceof ApiError ? err.code : "UNKNOWN_ERROR";
         router.replace(`/auth/error?error.code=${encodeURIComponent(code)}`);
       });
@@ -73,7 +70,7 @@ export default function AuthCallbackPage() {
         <button
           type="button"
           onClick={() => router.replace("/auth")}
-          className="rounded-sm bg-object-primary px-4 py-2 text-label font-medium text-text-invert"
+          className="bg-object-primary text-label text-text-invert rounded-sm px-4 py-2 font-medium"
         >
           로그인으로 돌아가기
         </button>

src/app/auth/error/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
+
 import { useRouter } from "next/navigation";
 
 const ERROR_MESSAGES: Record<string, string> = {
@@ -10,24 +11,26 @@ const ERROR_MESSAGES: Record<string, string> = {
   MISSING_RESULT_KEY: "비정상적인 접근이에요.",
 };
 
+function getInitialErrorMessage() {
+  if (typeof window === "undefined") return "로그인에 실패했어요.";
+
+  // error.message(쿼리 값)는 신뢰할 수 없어 표시하지 않는다.
+  // 매핑된 code만 안내하고, 빈/미매핑 code는 일반 메시지로 폴백(|| 로 빈 문자열도 처리).
+  const code = new URLSearchParams(window.location.search).get("error.code");
+  return (code && ERROR_MESSAGES[code]) || "로그인에 실패했어요.";
+}
+
 export default function AuthErrorPage() {
   const router = useRouter();
-  const [message, setMessage] = useState("로그인에 실패했어요.");
-
-  useEffect(() => {
-    // error.message(쿼리 값)는 신뢰할 수 없어 표시하지 않는다.
-    // 매핑된 code만 안내하고, 빈/미매핑 code는 일반 메시지로 폴백(|| 로 빈 문자열도 처리).
-    const code = new URLSearchParams(window.location.search).get("error.code");
-    setMessage((code && ERROR_MESSAGES[code]) || "로그인에 실패했어요.");
-  }, []);
+  const [message] = useState(getInitialErrorMessage);
 
   return (
     <div className="flex min-h-dvh flex-col items-center justify-center gap-4 px-5 text-center">
       <div className="text-body-1 text-text-primary">{message}</div>
       <button
         type="button"
         onClick={() => router.replace("/auth")}
-        className="rounded-sm bg-object-primary px-4 py-2 text-label font-medium text-text-invert"
+        className="bg-object-primary text-label text-text-invert rounded-sm px-4 py-2 font-medium"
       >
         로그인으로 돌아가기
       </button>

src/app/chat/[roomId]/loading.tsx

@@ -1,6 +1,6 @@
 export default function ChatRoomLoading() {
   return (
-    <div className="flex h-screen flex-col items-center justify-center bg-bg-primary">
+    <div className="bg-bg-primary flex h-screen flex-col items-center justify-center">
       <div className="text-body-1 text-text-secondary">채팅방을 불러오는 중...</div>
     </div>
   );

src/app/chat/[roomId]/page.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import { use, useEffect, useMemo } from "react";
+
 import ChatHeader from "@/components/chat/ChatHeader";
 import ChatInput from "@/components/chat/ChatInput";
 import ChatRoomInfo from "@/components/chat/ChatRoomInfo";
 import MessageList from "@/components/chat/MessageList";
 import { useChatRoom } from "@/hooks/useChatRoom";
 import { useChatRooms } from "@/hooks/useChatRooms";
-import { useMessages } from "@/hooks/useMessages";
 import { useChatSocket } from "@/hooks/useChatSocket";
+import { useMessages } from "@/hooks/useMessages";
 import { useSession } from "@/services/session";
 
 interface ChatRoomPageProps {
@@ -26,17 +27,16 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
   const { data: roomDetail } = useChatRoom(id);
   const { data: roomsData } = useChatRooms();
   const roomListItem = useMemo(
-    () => roomsData?.pages.flatMap((page) => page.items).find((r) => r.id === id),
-    [roomsData, id],
+    () => roomsData?.pages.flatMap(page => page.items).find(r => r.id === id),
+    [roomsData, id]
   );
 
   const roomContext = roomDetail?.context ?? roomListItem?.context ?? null;
 
   // 상대 닉네임: 상세엔 counterparty가 없어 artist/host 중 내가 아닌 쪽으로 계산, 목록은 counterparty 직접 사용.
   const counterpartyNickname = useMemo(() => {
     if (roomDetail) {
-      const counterpart =
-        roomDetail.artist.id === myUserId ? roomDetail.host : roomDetail.artist;
+      const counterpart = roomDetail.artist.id === myUserId ? roomDetail.host : roomDetail.artist;
       return counterpart.nickname;
     }
     return roomListItem?.counterparty.nickname ?? null;
@@ -53,8 +53,8 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
   const { sendMessage, markAsRead, lastError, isConnected } = useChatSocket(id);
 
   const messages = useMemo(
-    () => messagesData?.pages.flatMap((page) => page.items) ?? [],
-    [messagesData],
+    () => messagesData?.pages.flatMap(page => page.items) ?? [],
+    [messagesData]
   );
 
   // 읽음 처리는 연결 완료 후에만 발행(stompjs v7은 미연결 시 publish()가 동기 throw).
@@ -65,25 +65,23 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
   }, [id, isConnected]);
 
   return (
-    <div className="flex h-screen flex-col bg-bg-primary">
+    <div className="bg-bg-primary flex h-screen flex-col">
       <ChatHeader title={counterpartyNickname} />
 
-      {roomContext && <ChatRoomInfo context={roomContext} />}
+      {roomContext && <ChatRoomInfo roomId={id} context={roomContext} />}
 
       {lastError && (
         <div
           role="alert"
-          className="bg-error-light px-4 py-2 text-label font-medium text-error-default"
+          className="bg-error-light text-label text-error-default px-4 py-2 font-medium"
         >
           {lastError.error.message}
         </div>
       )}
 
       {isLoading ? (
         <div className="flex flex-1 items-center justify-center">
-          <div className="text-body-1 text-text-secondary">
-            메시지를 불러오는 중...
-          </div>
+          <div className="text-body-1 text-text-secondary">메시지를 불러오는 중...</div>
         </div>
       ) : (
         <MessageList