#123 refactor(review): 리뷰 섹션 기능 개선 및 UI 리디자인

.gitignore

@@ -243,6 +243,8 @@ cmake-build-*/
 # IntelliJ
 out/
 
+.idea
+
 # mpeltonen/sbt-idea plugin
 .idea_modules/
 

src/api/performanceReview.ts

@@ -26,14 +26,19 @@ const fetchPostReview = async (id: string, content: string, star: number) => {
 	});
 };
 
-const fetchPatchReview = async (reviewId: string, content: string) => {
+const fetchPatchReview = async (
+	reviewId: string,
+	content: string,
+	star: number
+) => {
 	return authedJSON(`${apiUrl}/api/v1/reviews/${reviewId}`, {
 		method: "PATCH",
 		headers: {
 			"Content-Type": "application/json",
 			accept: "application/json",
 		},
-		body: JSON.stringify({ content }),
+		credentials: "include",
+		body: JSON.stringify({ content, star }),
 	});
 };
 

src/components/__mocks__/authData.ts

@@ -13,9 +13,9 @@ export const mockLoginResponse: LoginResponse = {
 	code: "SUCCESS",
 	data: {
 		accessToken:
-			"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjOTY4ZDUzYS1kZTg1LTQ1Y2ItOWE4ZS1kMTM1YTVhMzg3NzMiLCJpYXQiOjE3Njc5NTU1NzcsImV4cCI6MTc2Nzk1OTE3N30.5-pw6-ry3eOTg-TRdy0_wgpD5pgI4e752hL74guEm_MoIVAUXtkxFMSO4gLFbE-Nduz56hDGtIiAGNJVLVCY4A",
+			"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjOTY4ZDUzYS1kZTg1LTQ1Y2ItOWE4ZS1kMTM1YTVhMzg3NzMiLCJpYXQiOjE3NzA2Mjg2NTIsImV4cCI6MTc3MDYzMjI1Mn0.uxHhHYPC5mle4JicKvdgdlXa-P40i1ZyIMMoJH14BrgvmVLZXxh-IgC8yWaTh7rlgGDlslEG5Ds9sYprMy7x0A",
 		refreshToken:
-			"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjOTY4ZDUzYS1kZTg1LTQ1Y2ItOWE4ZS1kMTM1YTVhMzg3NzMiLCJpYXQiOjE3Njc5NTU1NzcsImV4cCI6MTc2OTE2NTE3N30.Uv8_cjMNvFSZdBqINapgwjY-PDcYKxxAQ5mogr2wi6z0lFBKfv8_QtKjx8B8XRL7ileLhLeR_vwHMpCeSGnDpA",
+			"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJjOTY4ZDUzYS1kZTg1LTQ1Y2ItOWE4ZS1kMTM1YTVhMzg3NzMiLCJpYXQiOjE3NzA2Mjg2NTIsImV4cCI6MTc3MTgzODI1Mn0.glmEl58keciaJtyAbUgj5HZYWkoXmergnKDwaNzQ2mWjWOce_XBzQAHa_ztRLViZJQMX5swYYnH2s3vrH4ZQ9A",
 		...mockUserData,
 	},
 };

src/components/__mocks__/performanceReviewData.ts

@@ -10,6 +10,7 @@ const performanceReview: reviewData = {
 				writerName: "뮤덕이",
 				writerProfileImageUrl: userImage,
 				content: "정말 감동적인 공연이었어요. 무대 연출도 최고!",
+				star: 4.0,
 				likeStatus: false,
 				likeCount: 20,
 				createdAt: "2025-07-01T14:32:00",
@@ -20,6 +21,7 @@ const performanceReview: reviewData = {
 				writerName: "뮤덕삼",
 				writerProfileImageUrl: userImage,
 				content: "재미없는 공연이었어요. 무대 연출도 별로.",
+				star: 4.0,
 				likeStatus: true,
 				likeCount: 2,
 				createdAt: "2025-07-15T11:10:00",

src/components/__tests__/performance/detail/ReviewForm.test.tsx

@@ -18,10 +18,12 @@ jest.mock("../../../performance/detail/review/ReviewRating.tsx", () => ({
 }));
 
 describe("ReviewForm 컴포넌트(후기 작성 컴포넌트)", () => {
-	it("textarea에 입력 & 별점까지 선택하면 , 버튼이 활성화된다.", () => {
+	it("textarea에 입력 & 별점까지 선택하면, 버튼이 활성화된다.", () => {
 		render(<ReviewForm onSubmit={jest.fn()} />);
-		const textarea = screen.getByPlaceholderText("후기를 작성해주세요.");
-		const submitBtn = screen.getByRole("button", { name: "작성" });
+		const textarea = screen.getByPlaceholderText(
+			/이 공연에 대한 솔직한 후기를 남겨주세요/i // ✅ placeholder 텍스트 변경
+		);
+		const submitBtn = screen.getByRole("button", { name: /리뷰 등록하기/i }); // ✅ 버튼 텍스트 변경
 
 		fireEvent.change(textarea, { target: { value: "멋진 공연이였어요." } });
 		expect(textarea).toHaveValue("멋진 공연이였어요.");
@@ -35,20 +37,24 @@ describe("ReviewForm 컴포넌트(후기 작성 컴포넌트)", () => {
 		const handleSubmit = jest.fn();
 		render(<ReviewForm onSubmit={handleSubmit} />);
 
-		const textarea = screen.getByPlaceholderText("후기를 작성해주세요.");
-		const submitBtn = screen.getByRole("button", { name: "작성" });
+		const textarea = screen.getByPlaceholderText(
+			/이 공연에 대한 솔직한 후기를 남겨주세요/i // ✅ placeholder 텍스트 변경
+		);
+		const submitBtn = screen.getByRole("button", { name: /리뷰 등록하기/i }); // ✅ 버튼 텍스트 변경
 
 		fireEvent.click(screen.getByTestId("set-star"));
-		fireEvent.change(textarea, { target: { value: " " } });
+		fireEvent.change(textarea, { target: { value: "   " } });
 		expect(submitBtn).toBeDisabled();
 	});
 
 	it("유효한 내용 + 별점 선택 시, onSubmit이 호출되고, textarea는 비워지며 버튼은 비활성화된다.", async () => {
-		const handleSubmit = jest.fn();
+		const handleSubmit = jest.fn().mockResolvedValue(undefined); // ✅ async 함수로 mock
 		render(<ReviewForm onSubmit={handleSubmit} />);
 
-		const textarea = screen.getByPlaceholderText("후기를 작성해주세요.");
-		const submitBtn = screen.getByRole("button", { name: "작성" });
+		const textarea = screen.getByPlaceholderText(
+			/이 공연에 대한 솔직한 후기를 남겨주세요/i // ✅ placeholder 텍스트 변경
+		);
+		const submitBtn = screen.getByRole("button", { name: /리뷰 등록하기/i }); // ✅ 버튼 텍스트 변경
 
 		fireEvent.click(screen.getByTestId("set-star"));
 		fireEvent.change(textarea, { target: { value: "멋진 공연이였어요." } });