+
+
+ )
return (
+ 리뷰 작성 완료
+
+
setActiveNav(1)}>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 8ee7e36..7ef2a12 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -25,9 +25,11 @@ export default function Header({ clickedPlaceId }) {
const isCalendarPath = /^\/calendar(\/.*)?$/.test(location.pathname);
const isMypagePath = /^\/mypage(\/.*)?$/.test(location.pathname);
const isLoginPath = /^\/login(\/.*)?$/.test(location.pathname);
+ const isReviewPath = /^\/review(\/.*)?$/.test(location.pathname);
const isIntroPath = /^\/(\/.*)?$/.test(location.pathname);
+
if (location.pathname === '/main'){ //메인 페이지
@@ -119,6 +121,22 @@ export default function Header({ clickedPlaceId }) {
return (
<>
)
+ }else if(isReviewPath){
+ return (
+ <>
+
+ { placeName &&
+
+
+ )
}
else{
return(
diff --git a/src/components/PlaceReview.jsx b/src/components/PlaceReview.jsx
new file mode 100644
index 0000000..606571b
--- /dev/null
+++ b/src/components/PlaceReview.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function PlaceReview() {
+ return (
+
{placeName}
}PlaceReview
+ )
+}
diff --git a/src/pages/Calendar.jsx b/src/pages/Calendar.jsx
index 2c30eb7..9c299b8 100644
--- a/src/pages/Calendar.jsx
+++ b/src/pages/Calendar.jsx
@@ -1,165 +1,243 @@
-import React, { useState } from 'react'
-import FullCalendar from '@fullcalendar/react'
+import React, { useRef, useState } from 'react';
+import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
-import interactionPlugin from '@fullcalendar/interaction'
-import '../styles/calendar.css'
-
-
-const events = [
- {
- title : "Work 1 ",
- start : "2024-05-30",
- type: "work"
- },
- {
- title : "Work 2 ",
- start : "2024-05-31",
- type: "work"
- },
- {
- title : "Travel 1 ",
- start : "2024-05-28",
- type: "travel",
- },
- {
- title : "Work 3 ",
- start : "2024-05-28",
- type: "work",
- },
-
- {
- title : "일 일정 테스트 ",
- start : "2024-06-28",
- type: "work",
- },
- {
- title : "여행 일정 테스트 ",
- start : "2024-06-25",
- type: "travel",
- },
- {
- title : "테스트입니다(work) ",
- start : "2024-06-05",
- type: "work",
- },
- {
- title : "일을 하자 ",
- start : "2024-06-13",
- type: "work",
- },
- {
- title : "놀러가자 ",
- start : "2024-06-13",
- type: "travel",
- },
-
-];
-
+import interactionPlugin from '@fullcalendar/interaction';
+import '../styles/calendar.css';
export default function Calendar() {
+ //캘린더 일정 담는 events
+ const [events, setEvents] = useState([
+ {
+ title: "경주여행", start: "2024-08-17", type: "work",
+ },
+ {
+ title: "업무마감일", start: "2024-08-01", type: "work",
+ }, {
+ title: "여행가쟈 ", start: "2024-08-30", type: "travel",
+ },
+ ])
const [selectedWorkDateEvents, setSelectedWorkDateEvents] = useState([]);
const [selectedTravelDateEvents, setSelectedTravelDateEvents] = useState([]);
+ const [selectedDate, setSelectedDate] = useState(null); // 날짜 상태 추가
+ const [isAddingWork, setIsAddingWork] = useState(false); //Work일정 추가 확인
+ const [isAddingTravel, setIsAddingTravel] = useState(false); //Travel일정 추가 확인
+ const [newWorkEventTitle, setNewWorkEventTitle] = useState('');
+ const [newTravelEventTitle, setNewTravelEventTitle] = useState('');
+
+ // 일정 추가 시, 업로드
+ const workInputRef = useRef(null);
+ const travelInputRef = useRef(null);
+ // 날짜 클릭 이벤트
const dateClick = (info) => {
- //날짜 클릭 시, 아래 페이지에 일정 나오는 함수
const date = info.dateStr;
- const dailyWorkPlan = events.filter(event => (event.start === date || event.end === date) && event.type === "work");
- const dailyTravelPlan = events.filter(event => (event.start === date || event.end === date) && event.type === "travel");
- setSelectedWorkDateEvents(dailyWorkPlan);
- setSelectedTravelDateEvents(dailyTravelPlan);
+ console.log('test하고 지우기 | 날짜 클릭, 오늘 날짜 : ', date);
+
+
- }
+ // Remove the selected class from all date cells
+ const calendarEl = document.querySelector('.fc');
+ calendarEl.querySelectorAll('.fc-daygrid-day').forEach(dayCell => {
+ dayCell.classList.remove('selected-date');
+ });
+ // Add the selected class to the clicked date cell
+ info.dayEl.classList.add('selected-date');
+
+ setSelectedDate(date); // 날짜를 상태로 저장
+ const dailyWorkPlan = events.filter(
+ (event) => (event.start === date || event.end === date) && event.type === 'work'
+ );
+ const dailyTravelPlan = events.filter(
+ (event) => (event.start === date || event.end === date) && event.type === 'travel'
+ );
+ setSelectedWorkDateEvents(dailyWorkPlan);
+ setSelectedTravelDateEvents(dailyTravelPlan);
+ };
const renderDayCellContent = (info) => {
- let number = document.createElement("a");
- number.classList.add("fc-daygrid-day-number");
- number.innerHTML = info.dayNumberText.replace("일", "");
- if (info.view.type === "dayGridMonth") {
+ let number = document.createElement('a');
+ number.classList.add('fc-daygrid-day-number');
+ number.innerHTML = info.dayNumberText.replace('일', '');
+ if (info.view.type === 'dayGridMonth') {
return { html: number.outerHTML };
}
return {
- domNodes: []
+ domNodes: [],
};
};
-
+
+ //이벤트 캡쳐링
+ const handleEventClick = (info) => {
+ const date = info.event.startStr;
+
+ // 클릭된 이벤트의 날짜에 해당하는 이벤트들만 필터링하여 처리
+ const dailyWorkPlan = events.filter(
+ (event) => event.start === date && event.type === 'work'
+ );
+ const dailyTravelPlan = events.filter(
+ (event) => event.start === date && event.type === 'travel'
+ );
+
+ setSelectedDate(date);
+ setSelectedWorkDateEvents(dailyWorkPlan);
+ setSelectedTravelDateEvents(dailyTravelPlan);
+ };
+
const eventContent = (info) => {
- // 이벤트 유형(work,travel)에 따른 이벤트 색상 변화
let title = info.event.title;
- if(info.event.title.length > 4){
- title = info.event.title.substring(0, 4) + "..";
+ if (info.event.title.length > 4) {
+ title = info.event.title.substring(0, 4) + '..';
}
- if (info.event._def.extendedProps.type === "travel") {
- return {
- html: `${title}
`
+ if (info.event._def.extendedProps.type === 'travel') {
+ return {
+ html: `${title}
`,
};
- } else if (info.event._def.extendedProps.type === "work") {
- return {
- html: `${title}
`
+ } else if (info.event._def.extendedProps.type === 'work') {
+ return {
+ html: `${title}
`,
};
}
};
-
-
+
+ // 일정 추가 버튼 클릭 시, 실행 함수
+ const handleWorkPlusClick = () => {
+ setIsAddingWork(true);
+ setTimeout(() => {
+ if (workInputRef.current) {
+ workInputRef.current.focus();
+ }
+ }, 0);
+ };
+
+ const handleTravelPlusClick = () => {
+ setIsAddingTravel(true);
+ setTimeout(() => {
+ if (travelInputRef.current) {
+ travelInputRef.current.focus();
+ }
+ }, 0);
+ };
+
+
+ //일정 입력
+ const handleWorkInputChange = (e) => {
+ setNewWorkEventTitle(e.target.value);
+ };
+
+ const handleTravelInputChange = (e) => {
+ setNewTravelEventTitle(e.target.value);
+ };
+
+
+ //일정 저장
+ const handleWorkSave = () => {
+ if (newWorkEventTitle.trim() !== '' && selectedDate) {
+ const newEvent = { title: newWorkEventTitle, start: selectedDate, type: 'work' };
+ setEvents([...events,newEvent ])
+ setSelectedWorkDateEvents([...selectedWorkDateEvents, newEvent]);
+ }
+ setIsAddingWork(false);
+ setNewWorkEventTitle('');
+ };
+
+ const handleTravelSave = () => {
+ if (newTravelEventTitle.trim() !== '' && selectedDate) {
+ const newEvent = { title: newTravelEventTitle, start: selectedDate, type: 'travel' };
+ setEvents([...events,newEvent ])
+ setSelectedTravelDateEvents([...selectedTravelDateEvents, newEvent]);
+ }
+ setIsAddingTravel(false);
+ setNewTravelEventTitle('');
+
+ };
+
+
+ //일정 추가 취소
+ const handleWorkCancel = () => {
+ setIsAddingWork(false);
+ setNewWorkEventTitle('');
+ };
+
+ const handleTravelCancel = () => {
+ setIsAddingTravel(false);
+ setNewTravelEventTitle('');
+ };
return (
-
-
+
+
+
+
-
- {selectedDate ? selectedDate: '선택된 날짜가 없습니다.' }
Working Planning
- {selectedWorkDateEvents.length > 0 ? (
+ {selectedWorkDateEvents.length > 0 &&
selectedWorkDateEvents.map((event, index) => (
-
+
- )
+ );
}
diff --git a/src/pages/Main.jsx b/src/pages/Main.jsx
index 3ba3368..cd72d10 100644
--- a/src/pages/Main.jsx
+++ b/src/pages/Main.jsx
@@ -22,7 +22,7 @@ export default function Main ({ updateClickedPlace }) {
// 1. 북카페
try {
- const bookCafesResponse = await axios.get(`http://43.200.247.44/v1/work/?page=0&cafeType=1`, {
+ const bookCafesResponse = await axios.get(`http://43.200.247.44/v1/works/?page=0&cafeType=BOOK`, {
});
setBookCafes(bookCafesResponse.data.data);
} catch (error) {
@@ -31,7 +31,7 @@ export default function Main ({ updateClickedPlace }) {
// 2. 개인 카페
try {
- const personalCafesResponse = await axios.get(`http://43.200.247.44/v1/work/?page=0&cafeType=2`, {
+ const personalCafesResponse = await axios.get(`http://43.200.247.44/v1/works/?page=0&cafeType=PERSONAL`, {
});
setCafes(personalCafesResponse.data.data);
} catch (error) {
@@ -40,7 +40,7 @@ export default function Main ({ updateClickedPlace }) {
//3. 프랜차이즈
try {
- const franchiseResponse = await axios.get(`http://43.200.247.44/v1/work/?page=0&cafeType=3`, {
+ const franchiseResponse = await axios.get(`http://43.200.247.44/v1/works/?page=0&cafeType=FRANCHISE`, {
});
setFranchise(franchiseResponse.data.data);
} catch (error) {
@@ -49,7 +49,7 @@ export default function Main ({ updateClickedPlace }) {
// 4. 도서관
try {
- const librariesResponse = await axios.get(`http://43.200.247.44/v1/work/?page=0&cafeType=4`, {
+ const librariesResponse = await axios.get(`http://43.200.247.44/v1/works/?page=0&cafeType=LIBRARY`, {
});
setLibraries(librariesResponse.data.data);
} catch (error) {
diff --git a/src/pages/Mypage.jsx b/src/pages/Mypage.jsx
index 8191b6b..3e527a4 100644
--- a/src/pages/Mypage.jsx
+++ b/src/pages/Mypage.jsx
@@ -4,9 +4,13 @@ import styled from 'styled-components'
const Logout = styled.div`
+ position : absolute;
+ bottom: 60px;
+ maring-bottom : 50px;
padding : 10px;
border : 1px solid #000;
- width : 50%;
+ max-width : 100%;
+ min-width : 90%;
border-radius : 10px;
justify-contents : center;
text-align : center;
@@ -45,7 +49,13 @@ export default function Mypage() {
return (
Travel Planning
- {selectedTravelDateEvents.length > 0 ? (
+ {selectedTravelDateEvents.length > 0 &&
selectedTravelDateEvents.map((event, index) => (
-
-
-
-
-
-
-
-
{event.title}
+
+
- ))
+ ))}
+ {isAddingTravel ? (
+ {event.title}
+
+
+
+
) : (
-
+
)}
-
- 안녕하세요 ! {}님 ,
+ 안녕하세요 !
+
+
로그아웃
diff --git a/src/pages/PlaceDetail.jsx b/src/pages/PlaceDetail.jsx
index 1747633..acec6e0 100644
--- a/src/pages/PlaceDetail.jsx
+++ b/src/pages/PlaceDetail.jsx
@@ -10,7 +10,7 @@ import altImg from '../assets/img/PlacesAlt.svg';
import largeAltImg from '../assets/img/LargeAlt.png'
import axios from 'axios';
import { PlaceContext } from '../contexts/clickedPlaceContexts';
-
+// '../assets/img/travelAlt.svg'
const LargeImg = styled.div`
flex: 1;
@@ -83,7 +83,7 @@ export default function PlaceDetail({ updateClickedPlace }) {
let API_URL = ""
if(location.pathname.startsWith('/main')) {
- API_URL = 'http://43.200.247.44/v1/work/'
+ API_URL = 'http://43.200.247.44/v1/works/'
}else if(location.pathname.startsWith('/travel')) {
API_URL = 'http://43.200.247.44/v1/travel/'
}
@@ -142,25 +142,28 @@ export default function PlaceDetail({ updateClickedPlace }) {
name: "카페봄봄 혁신도시점",
address: "제주특별자치도 서귀포시 강정동 208-5" ,
phone: "064-738-180",
- imgSrc: "",
+ imageUrl: '',
},
]
const suggestedTravel = [
{
- name: "개쩌는 노는곳",
- address: "제주 제주시 조천읍 신북로 453 도토관",
- imgSrc: [ "https://mblogthumb-phinf.pstatic.net/MjAyMzAzMTdfMjM3/MDAxNjc5MDQyMjI5ODYy.6TU04oH0AC3eD_8gFoqcWQdNKxbse03Mm7jgHwsB7ucg.581kNlJScHA2fDFN2FLnwjGf1vF41zYgueARpQgad_Ug.JPEG.hyeyoung217/20230313%EF%BC%BF155851.jpg?type=w800"],
+ id : 0,
+ name: "협재해변",
+ address: "제주특별자치도 제주시 한림읍 한림로 329-10",
+ imageUrl: "https://lh3.googleusercontent.com/p/AF1QipNFmem5tBp7EDwMWE2eUNzWkwbvMUnsuenKD7Na=s294-w294-h220-k-no"
},
{
- name: "개처지리는 놀기 좋은 곳 곳 거ㅗㅅ",
- address: "제주 제주시 구좌읍 고양이로 453" ,
- imgSrc: [ "https://mblogthumb-phinf.pstatic.net/MjAyMzAzMTdfMjM3/MDAxNjc5MDQyMjI5ODYy.6TU04oH0AC3eD_8gFoqcWQdNKxbse03Mm7jgHwsB7ucg.581kNlJScHA2fDFN2FLnwjGf1vF41zYgueARpQgad_Ug.JPEG.hyeyoung217/20230313%EF%BC%BF155851.jpg?type=w800"],
+ id : 0,
+ name: "스누피 가든",
+ address: "제주특별자치도 제주시 특별자치도 구좌읍 금백조로 930" ,
+ imageUrl: "https://lh3.googleusercontent.com/p/AF1QipNQSLyhKLdtHBYvomfMK9tWy2pjVWEOZkzDKc_c=s294-w294-h220-k-no",
},
{
- name: "개처지리는 MT장소",
- address: "제주 제주시 구좌읍 고양이로 453" ,
- imgSrc: [ "https://mblogthumb-phinf.pstatic.net/MjAyMzAzMTdfMjM3/MDAxNjc5MDQyMjI5ODYy.6TU04oH0AC3eD_8gFoqcWQdNKxbse03Mm7jgHwsB7ucg.581kNlJScHA2fDFN2FLnwjGf1vF41zYgueARpQgad_Ug.JPEG.hyeyoung217/20230313%EF%BC%BF155851.jpg?type=w800"],
+ id : 0,
+ name: "제주허브동산",
+ address: "제주특별자치도 서귀포시 표선면 돈오름로 170" ,
+ imageUrl: "",
},
]
@@ -178,7 +181,7 @@ export default function PlaceDetail({ updateClickedPlace }) {
const url = detailPlace.url ? detailPlace.url : ""
// 사진 추출
- const images = detailPlace?.imgSrc ?? [];
+ const images = detailPlace?.imageUrl ?? [];
const defaultImg = altImg;
const displayImg = images.slice(0, 3);
const imgText = images.length >= 3
@@ -281,7 +284,7 @@ export default function PlaceDetail({ updateClickedPlace }) {
TRAVEL
{suggestedTravel.map((place, index) => (
-
+
diff --git a/src/pages/Review.jsx b/src/pages/Review.jsx
new file mode 100644
index 0000000..8292ab3
--- /dev/null
+++ b/src/pages/Review.jsx
@@ -0,0 +1,253 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import '../components/FontAwesome'
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import orange from '../assets/img/orange.png'
+import gray from '../assets/img/gray.png'
+import AttachPhoto from '../assets/img/AttachPhoto.png'
+import ReviewText from '../assets/img/ReviewText.png'
+
+const SelectPlace = styled.div`
+ align-self: flex-end;
+ margin-bottom: 20px;
+ margin-right:30px;
+
+ select {
+ border: none;
+ border-bottom: 2px solid black;
+ padding: 2px;
+ font-size: 16px;
+ outline: none;
+ }
+
+`
+
+const SelectDate = styled.div`
+display: flex;
+justify-content: center;
+margin-bottom: 20px;
+width:100%;
+
+input {
+ border: none;
+ background-color: #eeeeee;
+ width: 70%;
+ height: 48px;
+ border-radius: 10px;
+ display: flex;
+ align-self: center;
+ text-align: center;
+ font-size: 16px;
+ padding: 0 10px;
+}
+
+`
+
+const SelectStar = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ h4 {
+ margin-bottom: 20px;
+ }
+
+ .stars {
+ display: flex;
+ margin-bottom: 20px;
+ }
+
+ .score{
+ margin : 7px;
+ }
+
+ img {
+ width: 36px;
+ height: 36px;
+ cursor: pointer;
+ }
+
+
+ .buttons button {
+ margin : 2px 10px;
+ border : 1px solid #d9d9d9;
+ border-radius : 3px;
+ padding : 3px 5px;
+ background-color : #fff;
+ }
+
+ .buttons button.selected {
+ border : 1px solid #FF9559;
+ background-color : #fff;
+ color : #FF9559;
+ }
+
+
+
+
+`
+
+
+const WriteSection = styled.div`
+
+.writeUp{
+ display:flex;
+ justify-content:space-between;
+ margin-top : 20px;
+
+}
+h2{
+ font-size: 18px;
+}
+
+.isfifty-p.selected{
+ color : #FF9559;
+}
+.conditions{
+
+}
+
+
+.reviewInput {
+ width: 100%;
+ display:flex;
+ flex-direction : column;
+ justify-content: center;
+ align-items: center; /* Center vertically */
+ margin-top: 10px; /* Add margin for spacing */
+
+ textarea {
+ margin-top : 10px;
+ min-width: 100%;
+ height: 150px;
+
+ }
+
+ p {
+ text-align : right;
+ translate(0,-50%);
+ color : #FF9559;
+ font-size : 10px;
+ margin-left : 80%;
+
+ }
+}
+
+`
+
+
+
+export default function Review() {
+ const [clicked, setClicked] = useState([false, false, false,false,false ])
+ const [isGoodSelected, setIsGoodSelected] = useState(false);
+ const [isBadSelected, setIsBadSelected] = useState(false);
+ const [reviewText, setReviewText] = useState('');
+
+
+
+ const handleStarClick = (index) =>{
+ const newClicked = clicked.map((_,i)=>i<=index);
+ setClicked(newClicked);
+ }
+
+ const rating = clicked.filter(Boolean).length;
+
+
+ const imageUploadClick = () =>{
+ console.log('test하고 지우기 : 이미지업로드 버튼 클릭함')
+ }
+
+ const goodBtnClicked = () =>{
+ setIsGoodSelected(true)
+ setIsBadSelected(false)
+ console.log('test 하고 지우기 | goodBtn클릭함 ')
+
+ }
+
+ const badBtnClicked = () =>{
+ setIsGoodSelected(false)
+ setIsBadSelected(true);
+
+ }
+
+ const handleReviewText = (event) =>{
+ setReviewText(event.target.value);
+ }
+
+
+
+
+
+ return (
+
+ 더 많은 서비스를 이용하시려면
+
+ 로그인을 해주세요 +
+ 로그인을 해주세요 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/Travel.jsx b/src/pages/Travel.jsx
index c3d1463..21d96f5 100644
--- a/src/pages/Travel.jsx
+++ b/src/pages/Travel.jsx
@@ -14,8 +14,22 @@ const attractionPlace = [
id : 2,
name: "신양섭지해수욕장",
address: "제주 서귀포시 성산읍 섭지코지로 88",
- imgSrc: "https://api.cdn.visitjeju.net/photomng/imgpath/201908/08/9d19a7d3-97a8-4999-b849-123e46fc88bc.jpg"
+ imgSrc: ""
},
+ {
+ id : 3,
+ name: "스누피가든",
+ address: "제주특별자치도 제주시 특별자치도 구좌읍 금백조로 930",
+ imgSrc: "https://lh3.googleusercontent.com/p/AF1QipNQSLyhKLdtHBYvomfMK9tWy2pjVWEOZkzDKc_c=s294-w294-h220-k-no",
+
+ },
+ {
+ id : 4,
+ name: "협재해변",
+ address: "제주특별자치도 제주시 한림읍 한림로 329-10",
+ imageUrl: "https://lh3.googleusercontent.com/p/AF1QipNFmem5tBp7EDwMWE2eUNzWkwbvMUnsuenKD7Na=s294-w294-h220-k-no"
+ },
+
]
diff --git a/src/styles/calendar.css b/src/styles/calendar.css
index 0284bb9..9003230 100644
--- a/src/styles/calendar.css
+++ b/src/styles/calendar.css
@@ -115,4 +115,44 @@
font-size: 16px;
font-family: Inter;
-}
\ No newline at end of file
+}
+
+
+.input-wrapper{
+ margin-top: 3px;
+ width : 100%;
+ height: 30px;
+ display:flex;
+ justify-content: space-between;
+
+}
+/* 새로운 이밴트 입력 시, */
+.new-event-input{
+
+ width : 60%;
+
+}
+
+.save-btn{
+ border: 1px solid #cdcdcd;
+ background-color: #fff;
+ border-radius: 5px;
+ width:15%;
+}
+
+.cancel-btn{
+ border: 1px solid #cdcdcd;
+ background-color: #fff;
+ border-radius: 5px;
+ width:15%;
+}
+
+.selected-date-text{
+ padding : 10px 0;
+ font-weight:700;
+
+}
+
+.fc-daygrid-day.selected-date {
+ background-color: #ffede3; /* Highlight color of your choice */
+ }
\ No newline at end of file
diff --git a/src/styles/layout.css b/src/styles/layout.css
index 25d57b2..adc7e51 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -14,6 +14,24 @@
box-shadow: 0 5px 5px 0 gray;
}
+.review-upload-footer{
+ border-top: 1px solid #000;
+ display: flex;
+ justify-content: center;
+
+}
+
+.review-upload-button{
+ display: inline-block;
+ text-align: center;
+ cursor: pointer;
+ margin-top:15px;
+ border : 1px solid #000;
+ border-radius: 20px;
+ font-size: 16px;
+ padding : 10px 20px;
+}
+
.nav-link{
color:#1f1f1f;
text-decoration: none;
워래블 장소를 리뷰해보세요 !
+
+ {clicked.map((isClicked,index)=>
+ 
handleStarClick(index)}
+ />)}
+
+
+
+
+ {rating}
+ / 5
+
+
+
+
+
+
+
+
+
+ 후기 작성
+
+
+
+ /1000p
+
+
+ = 50 ? 'selected' : ''}`}style={{fontSize:"10px"}}>✓ 50자 이상
+✓ 사진
+
+ 
+
+
+
+ 
+
+
+
+
+ {reviewText.length} / 최소 20자
+ +