Skip to content

Commit 7e7455a

Browse files
authored
Merge pull request #64 from danpatime/50-feat-문의-작성-페이지-마크업
[FEAT] 문의 작성 페이지 마크업
2 parents 7c98b7a + 6c2833e commit 7e7455a

15 files changed

+322
-54
lines changed

src/App.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import './App.css';
1+
mport './App.css';
22
import Layout from './components/layout/Layout';
33
import Router from './Router';
44
import React from 'react';
55
import { UserInfoProvider } from './contexts/UserInfoContext';
66
import { ReviewProvider } from './contexts/ReviewInfoContext';
77

8+
89
function App() {
910
return (
1011
<UserInfoProvider>

src/Router.js

+12-6
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1+
import { Routes, Route } from "react-router-dom";
2+
import HomePage from "./pages/HomePage";
3+
import AlbaSearchPage from "./pages/AlbaSearchPage";
4+
import AlbaReviewPage from "./pages/AlbaReviewPage";
5+
import MyPage from "./pages/MyPage/MyPage";
6+
import ResumePage from "./pages/ResumePage";
7+
import ChattingPage from "./pages/ChattingPage";
18
import React from 'react';
2-
import { Routes, Route } from 'react-router-dom';
3-
import HomePage from './pages/HomePage';
4-
import AlbaSearchPage from './pages/AlbaSearchPage';
5-
import MyPage from './pages/MyPage/MyPage';
6-
import ResumePage from './pages/ResumePage';
79
import MyStatusPage from './pages/MyPage/MyStatusPage';
8-
import ChattingPage from './pages/ChattingPage';
910
import MyResume from './pages/MyResume/MyResume';
1011
import SignUpPage from './pages/SignUpPage';
12+
import MyReviewPage from "./pages/MyPage/MyReviewPage";
13+
import SupportPage from './pages/Support/SupportPage';
1114
import ContactDetailPage from './pages/MyPage/ContactDetailPage';
1215
import Settings from './pages/MyPage/Settings';
1316
import SupportPage from './pages/Support/SupportPage';
@@ -24,8 +27,11 @@ const AppRouter = () => {
2427
<Route path="/alba/resume/:id" element={<ResumePage />} />
2528
<Route path="/mypage" element={<MyPage />} />
2629
<Route path="/signup" element={<SignUpPage />} />
30+
<Route path="/support" element={<SupportPage />} />
2731
<Route path="/chat" element={<ChattingPage />} />
2832
<Route path="/mypage/resume" element={<MyResume />} />
33+
<Route path="/mypage/status" element={<MyStatusPage />} />
34+
<Route path="/manage-reviews" element={<MyReviewPage />} />
2935
<Route path="/mypage/resume-form" element={<ResumeForm />} />
3036
<Route path="/mypage/mystore" element={<MyStorePage />} />
3137
<Route path="/mypage/contracts" element={<MyStatusPage />} />

src/components/common/DropDown.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,4 @@ const DropdownItem = styled.div`
9696
}
9797
`;
9898

99-
export default Dropdown;
99+
export default Dropdown;

src/components/common/ReviewForm.jsx

+22-8
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
/* eslint-disable */
21
import React, { useState, useEffect } from "react";
32
import styled from "styled-components";
43
import StarRating from "./StarRating";
54
import { useReviewInfo } from "../../contexts/useReviewInfo";
65

76
const ReviewForm = ({ onClose, initialData }) => {
8-
const [review, setReview] = useState(initialData || {});
7+
const isEditing=initialData;
8+
const [reviewId,setReviewId]=useState(Date.now());
99
const [starPoint, setStarPoint] = useState(0);
1010
const [content, setContent] = useState("");
1111
const [reviewCount,setReviewCount]=useState(1);
1212
const [reviewDate,setReviewDate]=useState(new Date());
1313
const [selectedStore, setSelectedStore] = useState("");
1414
const [selectedAlba, setSelectedAlba] = useState("");
1515
const [selectedTag, setSelectedTag] = useState([]);
16-
const [reviewTag, setReviewTag] = useState([
16+
const [reviewTag] = useState([
1717
"일을 잘해요",
1818
"시간 엄수를 잘해요",
1919
"일이 서툴러요",
@@ -35,7 +35,7 @@ const ReviewForm = ({ onClose, initialData }) => {
3535

3636
useEffect(() => {
3737
if (initialData) {
38-
setReview(initialData);
38+
setReviewId(initialData.id||Date.now());
3939
setStarPoint(initialData.starPoint || 0);
4040
setContent(initialData.content || "");
4141
setReviewCount(initialData.reviewCount||1);
@@ -48,7 +48,7 @@ const ReviewForm = ({ onClose, initialData }) => {
4848

4949
const handleSubmit = () => {
5050
const newReview = {
51-
id: Date.now(),
51+
id: reviewId,
5252
storeID: selectedStore,
5353
albaID: selectedAlba,
5454
starPoint: starPoint,
@@ -58,8 +58,20 @@ const ReviewForm = ({ onClose, initialData }) => {
5858
tags: selectedTag,
5959
};
6060

61+
if (!selectedStore || !selectedAlba || !starPoint || !content) {
62+
let missingFields = [];
63+
64+
if (!selectedStore) missingFields.push("가게");
65+
if (!selectedAlba) missingFields.push("알바생");
66+
if (!starPoint) missingFields.push("평점");
67+
if (!content) missingFields.push("한줄평");
68+
69+
alert(`${missingFields.join(", ")}을(를) 입력해 주세요.`);
70+
return; // 입력 받지 않은 항목에 대해 alert 메시지
71+
}
72+
6173
if (initialData) {
62-
editReview(newReview); // 수정 시 editReview 사용(아직 수정 기능 미구현)
74+
editReview(newReview);
6375
} else {
6476
addReview(newReview);
6577
}
@@ -91,7 +103,9 @@ const ReviewForm = ({ onClose, initialData }) => {
91103
<FieldContainer>
92104
<Field>
93105
<Label>가게</Label>
94-
<Select value={selectedStore} onChange={handleStoreChange}>
106+
<Select value={selectedStore}
107+
onChange={handleStoreChange}
108+
disabled={isEditing}>
95109
<option value="" disabled>
96110
선택하세요
97111
</option>
@@ -108,7 +122,7 @@ const ReviewForm = ({ onClose, initialData }) => {
108122
<Select
109123
value={selectedAlba}
110124
onChange={(e) => setSelectedAlba(e.target.value)}
111-
disabled={!selectedStore}
125+
disabled={!selectedStore||isEditing}
112126
>
113127
<option value="" disabled>
114128
선택하세요

src/components/mypage/ContactStatus.jsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,12 @@ const ContactStatus = ({ statusFilter, sortOrder }) => {
5151
const navigate = useNavigate();
5252

5353
const handleRowClick = (id) => {
54-
navigate(`/contracts/${id}`);
54+
navigate(`/status/details/${id}`);
5555
};
5656

57-
const filteredData =
58-
statusFilter === '상태'
59-
? dummyData
60-
: dummyData.filter((data) => data.status === statusFilter);
57+
const filteredData = dummyData.filter((data) =>
58+
statusFilter === '상태' ? true : data.status === statusFilter,
59+
);
6160

6261
//실제 동작 없음
6362
const sortedData = [...filteredData].sort((a, b) => {

src/contexts/ReviewInfoContext.jsx

+42-18
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
/*eslint-disable*/
21
import React, { createContext, useState } from "react";
32

43
const ReviewInfoContext = createContext();
@@ -169,6 +168,7 @@ export const ReviewProvider = ({ children }) => {
169168
];
170169

171170

171+
172172
const [reviews, setReviews] = useState(dummyReviews); // 리뷰 데이터 상태
173173
const [sortOption, setSortOption] = useState("latest"); // 정렬 옵션
174174
const [searchQuery, setSearchQuery] = useState(""); // 검색어
@@ -180,17 +180,51 @@ export const ReviewProvider = ({ children }) => {
180180

181181
// 리뷰 추가
182182
const addReview = (newReview) => {
183-
setReviews((prevReviews) => [newReview, ...prevReviews]);
184-
updateReviewCount(newReview.albaID);
185-
};
186-
183+
setReviews((prevReviews) => {
184+
// 알바 ID가 이미 존재하는지 확인
185+
const albaExists = prevReviews.some((review) => review.albaID === newReview.albaID);
186+
187+
if (albaExists) {
188+
// 기존 알바ID가 있으면 그 알바ID의 reviewCount만 +1 증가
189+
const updatedReviews = prevReviews.map((review) => {
190+
if (review.albaID === newReview.albaID) {
191+
// 해당 albaID의 reviewCount만 증가
192+
return {
193+
...review,
194+
reviewCount: review.reviewCount + 1,
195+
};
196+
}
197+
return review;
198+
});
199+
200+
// 새 리뷰 추가
201+
updatedReviews.push({
202+
...newReview,
203+
reviewCount: updatedReviews.find((review) => review.albaID === newReview.albaID).reviewCount, // 해당 albaID의 reviewCount 계승
204+
});
205+
206+
return updatedReviews;
207+
} else {
208+
// 알바ID가 처음 작성되는 경우
209+
return [
210+
...prevReviews,
211+
{
212+
...newReview,
213+
reviewCount: 1, // 처음 작성되는 리뷰는 reviewCount 1로 설정
214+
},
215+
];
216+
}
217+
});
218+
};
219+
187220
// 리뷰 수정
188221
const editReview = (updatedReview) => {
189-
setReviews((prevReviews) =>
190-
prevReviews.map((review) =>
222+
setReviews(prevReviews =>
223+
prevReviews.map(review =>
191224
review.id === updatedReview.id ? updatedReview : review
192225
)
193226
);
227+
return reviews;
194228
};
195229

196230
// 리뷰 삭제
@@ -199,20 +233,10 @@ export const ReviewProvider = ({ children }) => {
199233
};
200234

201235
// 리뷰 신고(서버 전송 로직 필요)
202-
const reportReview=(reviewId,reportReason)=>{
236+
const reportReview = (reviewId, reportReason) => {
203237
alert(`${reviewId}${reportReason}의 사유로 신고 접수`);
204238
};
205239

206-
// 리뷰 수 업데이트
207-
const updateReviewCount = (albaID) => {
208-
setReviewCounts((prevCounts) => {
209-
return {
210-
...prevCounts,
211-
[albaID]: (prevCounts[albaID] || 0) + 1,
212-
};
213-
});
214-
};
215-
216240
// 필터링 및 정렬된 리뷰 반환
217241
const getFilteredReviews = () => {
218242
return reviews

src/contexts/UserInfoContext.js

+5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
// Provider와 Context 정의 (사용자 정보 관련)
2+
<<<<<<< HEAD
3+
/*eslint-disable*/
4+
import React, { createContext, useState, useEffect } from 'react';
5+
=======
26
import React, { createContext, useState, useEffect } from 'react';
37
import { useNavigate } from 'react-router-dom';
48
import request from '../api/request.ts';
9+
>>>>>>> develop
510

611
const UserInfoContext = createContext();
712

src/pages/AlbaReviewPage.jsx

+15-5
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ const AlbaReviewPage = () => {
99
const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 번호
1010

1111
// Context에서 상태와 함수 가져오기
12-
const { reviews, addReview, editReview, getFilteredReviews, sortOption, setSortOption, searchQuery, setSearchQuery } = useReviewInfo();
13-
12+
const { reviews, getFilteredReviews, sortOption, setSortOption, searchQuery, setSearchQuery } = useReviewInfo();
13+
1414
const filteredReviews = getFilteredReviews(); // 필터링된 리뷰 데이터
1515
const reviewsPerPage = 15; // 한 페이지에 보여줄 리뷰 수
1616
const totalPages = Math.ceil(filteredReviews.length / reviewsPerPage);
@@ -107,8 +107,6 @@ const AlbaReviewPage = () => {
107107
<ReviewForm
108108
onClose={closeModal}
109109
initialData={editingReview} // 부모 페이지에서 받은 데이터
110-
addReview={addReview} // 새 리뷰 작성 시 사용하는 함수
111-
editReview={editReview} // 수정할 때 사용하는 함수
112110
/>
113111
</Modal>
114112
)}
@@ -235,7 +233,11 @@ const PageNumber = styled.button`
235233
border: 1px solid #ddd;
236234
border-radius: 5px;
237235
cursor: pointer;
238-
`;
236+
237+
&:hover {
238+
background-color: #F7B32B;
239+
}
240+
`;
239241

240242
const Modal = styled.div`
241243
position: fixed;
@@ -259,4 +261,12 @@ const AddReviewButton = styled.button`
259261
color: white;
260262
border-radius: 5px;
261263
margin-left:auto;
264+
<<<<<<< HEAD
265+
cursor:pointer;
266+
267+
&:hover {
268+
background-color: #F7B32B;
269+
}
270+
=======
271+
>>>>>>> develop
262272
`;

src/pages/MyPage/MyPage.jsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React from 'react';
2-
import MyReviewPage from './MyReviewPage';
3-
42
import MypageLayout from '../../components/layout/MypageLayout';
53

64
function MyPage() {
75
return (
86
<MypageLayout>
9-
<MyReviewPage />
7+
MyPage
108
</MypageLayout>
119
);
1210
}

src/pages/MyPage/MyReviewPage.jsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useReviewInfo } from '../../contexts/useReviewInfo';
44
import styled from "styled-components";
55
import logo from "../../assets/images/logo.png";
66
import ReviewForm from '../../components/common/ReviewForm';
7+
import MypageLayout from '../../components/layout/MypageLayout';
78

89
const MyReviewPage = () => {
910
const { reviews,editReview,deleteReview,reportReview,getReviewsByName } = useReviewInfo();
@@ -66,7 +67,7 @@ const MyReviewPage = () => {
6667
};
6768

6869
return (
69-
<div>
70+
<MypageLayout>
7071
<h1>리뷰 관리</h1>
7172
<Container>
7273
<SelectContainer>
@@ -172,7 +173,7 @@ const MyReviewPage = () => {
172173
</ReportContent>
173174
</Modal>
174175
)}
175-
</div>
176+
</MypageLayout>
176177
);
177178
};
178179

@@ -329,6 +330,10 @@ const ButtonContainer = styled.div`
329330
`;
330331

331332
const CancelButton = styled.button`
333+
<<<<<<< HEAD
334+
color:white;
335+
=======
336+
>>>>>>> develop
332337
background-color: #5c3a32;
333338
padding: 5px 15px;
334339
border: none;

src/pages/MyPage/MyStorePage.jsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useEffect, useState } from 'react';
2-
32
import styled from 'styled-components';
43
import MypageLayout from '../../components/layout/MypageLayout';
54

0 commit comments

Comments
 (0)