+
+
+ {coData.content}
+
+
+
{formattedDateTime}
- {/*추천 알고리즘 구현해야됨*/}
- {/*
-
-
- {boardData?.result.slice(0, visibleCards).map((posts: any, index: number) => {
- const createDateTime = new Date(posts.post.createDateTime);
- const formattedDateTime = `${createDateTime.getFullYear()}.${String(createDateTime.getMonth() + 1).padStart(2, '0')}.${String(createDateTime.getDate()).padStart(2, '0')} ${String(createDateTime.getHours()).padStart(2, '0')}:${String(createDateTime.getMinutes()).padStart(2, '0')}`;
-
- const getTextFromHtml = (html: any) => {
- const parser = new DOMParser();
- const doc = parser.parseFromString(html, 'text/html');
- return doc.body.innerText; // 텍스트만 반환
- };
-
- const bodyText = getTextFromHtml(posts.post.body);
-
- const getTransportImage = (transport: string, ticketColor: any) => {
- switch (transport) {
- case 'Airplane':
- return
;
- case 'Car':
- return
;
- case 'Bus':
- return
;
- case 'Bicycle':
- return
;
- case 'Train':
- return
;
- default:
- return null; // 기본값 또는 대체 이미지
- }
- };
- console.log()
- return (
-
-
-
- {posts.ticket.departureCode ? (
-
-
{posts.ticket.departureCode}
-
- {getTransportImage(posts.ticket.transport, posts.ticket.ticketColor)}
-
-
{posts.ticket.destinationCode}
-
- ) : (
-
-
- )}
-
-
{posts.post.title}
- {bodyText}
-
-
-
-
- {posts.member.nickName}
-
-
- {posts.post.isLiked ? (
-
- ) : (
-
- )}
- {posts.post.likeCount}
-
- {posts.post.commentCount}
-
-
-
-
- );
- })}
-
-
);
diff --git a/src/app/post/page.tsx b/src/app/post/page.tsx
index 13539384..0e1f0843 100644
--- a/src/app/post/page.tsx
+++ b/src/app/post/page.tsx
@@ -198,8 +198,8 @@ function PostWrite() {
memberNum: Number(passengerCount),
startDate: formatDates(startDate),
endDate: formatDates(endDate),
- ticketColor: ticketColor,
- transport: transportStr
+ ticketColor: ticketColor || 'Aquamarine',
+ transport: transportStr || "Airplane"
}
try {
console.log(postRequest, ticketRequest)
@@ -250,6 +250,10 @@ function PostWrite() {
}
};
+ const handleTagRemove = (index: number) => {
+ setTags((prevTags) => prevTags.filter((_, i) => i !== index)); // 해당 인덱스의 태그를 삭제
+ };
+
const { getLocationData } = getCountry({ setResult });
const { getLocationData1 } = getCountry1({ setResult1 });
@@ -304,7 +308,7 @@ function PostWrite() {
setInputValue1(e.target.value)} // 입력 값 변경 시 핸들러
onKeyDown={(e) => {
@@ -344,7 +348,7 @@ function PostWrite() {
setInputValue2(e.target.value)} // 입력 값 변경 시 핸들러
onKeyDown={(e) => {
@@ -465,10 +469,16 @@ function PostWrite() {
value={inputValue}
onChange={handleInputChange}
onKeyDown={handleKeyDown} />
-
+
{tags.map((tag, index) => (
-
+
{tag}
+
))}
diff --git a/src/components/auth/LoginForm.tsx b/src/components/auth/LoginForm.tsx
index 6bd89fc5..228533e7 100644
--- a/src/components/auth/LoginForm.tsx
+++ b/src/components/auth/LoginForm.tsx
@@ -54,6 +54,7 @@ const LoginForm = () => {
Swal.fire({
icon: 'error',
+ iconColor: '#FB3463',
title: '기존에 회원가입을 \n완료하지 않았습니다.',
text: '블로그 설정 페이지로 이동합니다.',
confirmButtonText: '확인',
diff --git a/src/components/blogSignUp/BlogRegisterFirst.tsx b/src/components/blogSignUp/BlogRegisterFirst.tsx
index f66485b5..5e0b536f 100644
--- a/src/components/blogSignUp/BlogRegisterFirst.tsx
+++ b/src/components/blogSignUp/BlogRegisterFirst.tsx
@@ -14,6 +14,7 @@ import {
import useUserInfo from "@/hooks/useUserInfo";
import { swear_words_arr } from "@/constants/wearWordsArr";
import { getByteLength } from "@/constants/getByteLength";
+import Cookies from "js-cookie";
const BlogRegisterFirst = () => {
const [profileImage, setProfileImage] = useState<{
@@ -33,6 +34,32 @@ const BlogRegisterFirst = () => {
const { setUserInfo } = useUserInfo();
const router = useRouter();
+ useEffect(() => {
+ // 페이지 진입 시 로그인 상태 및 role 값을 확인
+ checkLoginStatus();
+ }, []);
+
+ const checkLoginStatus = () => {
+ const accessToken = Cookies.get("accessToken");
+ const refreshToken = Cookies.get("refreshToken");
+ const role = Cookies.get("role");
+
+ // 로그인이 된 상태에서 role이 GUEST일 경우, 회원가입 페이지에 머물도록 함
+ if (accessToken && refreshToken && role === "GUEST") {
+ // GUEST 사용자이므로 회원가입 페이지에 머물게 합니다.
+ return;
+ }
+
+ // 로그인이 되었지만 role이 MEMBER 또는 ADMIN인 경우 리다이렉트
+ if (role === "MEMBER" || role === "ADMIN") {
+ router.push("/");
+ return;
+ }
+
+ // 로그인하지 않은 사용자는 이 페이지에 접근할 수 있도록 허용
+ };
+
+
const checkSwearWords = (value: string) => {
const lowerValue = value.toLowerCase();
return swear_words_arr.some((swearWord: string) =>
@@ -197,6 +224,7 @@ const BlogRegisterFirst = () => {
className="object-cover w-full h-full"
width={100}
height={100}
+ unoptimized={true}
/>
) : (
{
!blogNameError.includes("사용 가능") ||
!imageUploaded
? "cursor-not-allowed bg-[#cfcfcf] hover:bg-[#cfcfcf]"
- : ""
+ : "bg-btn-color"
}`}
onClick={handleSubmit}
style={{ fontSize: "1.2rem" }}
diff --git a/src/components/blogSignUp/BlogRegisterSecond.tsx b/src/components/blogSignUp/BlogRegisterSecond.tsx
index fcf13661..17429e13 100644
--- a/src/components/blogSignUp/BlogRegisterSecond.tsx
+++ b/src/components/blogSignUp/BlogRegisterSecond.tsx
@@ -1,15 +1,44 @@
"use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import Image from "next/image";
import BlogStep2 from "../../../public/BlogStep2.svg";
import Link from "next/link";
import { submitInterests } from "@/services/blog"
import { blogInterests } from "@/constants/blogPreference";
+import { useRouter } from "next/navigation";
+import Cookies from "js-cookie";
const BlogRegisterSecond = () => {
const [selectedInterests, setSelectedInterests] = useState([]);
+ const router = useRouter();
+
+ useEffect(() => {
+ // 페이지 진입 시 로그인 상태 및 role 값을 확인
+ checkLoginStatus();
+ }, []);
+
+ const checkLoginStatus = () => {
+ const accessToken = Cookies.get("accessToken");
+ const refreshToken = Cookies.get("refreshToken");
+ const role = Cookies.get("role");
+
+ // 로그인이 된 상태에서 role이 GUEST일 경우, 회원가입 페이지에 머물도록 함
+ if (accessToken && refreshToken && role === "GUEST") {
+ // GUEST 사용자이므로 회원가입 페이지에 머물게 합니다.
+ return;
+ }
+
+ // 로그인이 되었지만 role이 MEMBER 또는 ADMIN인 경우 리다이렉트
+ if (role === "MEMBER" || role === "ADMIN") {
+ router.push("/");
+ return;
+ }
+
+ // 로그인하지 않은 사용자는 이 페이지에 접근할 수 있도록 허용
+ };
+
const toggleInterest = (interest: string) => {
if (selectedInterests.includes(interest)) {
setSelectedInterests(
diff --git a/src/components/blogSignUp/BlogRegisterThird.tsx b/src/components/blogSignUp/BlogRegisterThird.tsx
index ced4170d..a03793a5 100644
--- a/src/components/blogSignUp/BlogRegisterThird.tsx
+++ b/src/components/blogSignUp/BlogRegisterThird.tsx
@@ -1,44 +1,80 @@
-'use client'
+'use client';
-import React from "react";
+import React, { useEffect } from "react";
import Image from "next/image";
import useUserInfo from "@/hooks/useUserInfo";
import BlogStep3 from "../../../public/BlogStep3.svg";
-import CheckIcon from "../../../public/CheckIcon.svg";
import TrippyImage from "../../../public/TrippyImage.svg";
-import AirplaneIcon from "../../../public/TrippyAirplane.svg";
import Link from "next/link";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
const BlogRegisterThird = () => {
const { userInfo } = useUserInfo();
+ const router = useRouter();
+
+ useEffect(() => {
+ // 페이지 진입 시 로그인 상태 및 role 값을 확인
+ checkLoginStatus();
+ }, []);
+
+ const checkLoginStatus = () => {
+ const accessToken = Cookies.get("accessToken");
+ const refreshToken = Cookies.get("refreshToken");
+ const role = Cookies.get("role");
+
+ // 로그인이 된 상태에서 role이 GUEST일 경우, 회원가입 페이지에 머물도록 함
+ if (accessToken && refreshToken && role === "GUEST") {
+ // GUEST 사용자이므로 회원가입 페이지에 머물게 합니다.
+ return;
+ }
+
+ // 로그인이 되었지만 role이 MEMBER 또는 ADMIN인 경우 리다이렉트
+ if (role === "MEMBER" || role === "ADMIN") {
+ router.push("/");
+ return;
+ }
+
+ // 로그인하지 않은 사용자는 이 페이지에 접근할 수 있도록 허용
+ };
+
+ // 홈으로 버튼 클릭 시 쿠키 업데이트 로직
+ const handleHomeClick = () => {
+ const role = Cookies.get("role");
+
+ // role이 GUEST이면 MEMBER로 업데이트
+ if (role === "GUEST") {
+ Cookies.set("role", "MEMBER");
+ }
+ };
return (
-
-
-
-
+
-
-
회원가입 완료
-
-
{userInfo.nickName}님의 회원가입이 완료되었습니다.
-
다양한 여행 이야기를 둘러보세요!
-
+
+
회원가입 완료
+
+
{userInfo.nickName}님의 회원가입이 완료되었습니다.
+
다양한 여행 이야기를 둘러보세요!
+
-
-
-
+
+
+
);
};
-export default BlogRegisterThird;
+export default BlogRegisterThird;
\ No newline at end of file
diff --git a/src/components/ootd/ImageUploader.tsx b/src/components/ootd/ImageUploader.tsx
index 271fc34a..3304a2de 100644
--- a/src/components/ootd/ImageUploader.tsx
+++ b/src/components/ootd/ImageUploader.tsx
@@ -1,5 +1,6 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { ChangeEvent, useCallback, useState } from 'react';
import Slider from 'react-slick';
+import Cropper from 'react-easy-crop';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import OotdDefault from '../../../public/ootdDefaultImg.svg';
@@ -11,6 +12,8 @@ import Image from 'next/image';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
import LeftArrowIcon from '../../../public/left-arrow.svg';
import RightArrowIcon from '../../../public/right-arrow.svg';
+import { getCroppedImg } from '@/utils/getCroppedImg';
+import { Area } from 'react-easy-crop';
interface ImageUploaderProps {
onImagesChange: (images: UploadedImage[]) => void;
@@ -20,29 +23,60 @@ interface ImageUploaderProps {
const ImageUploader: React.FC
= ({ onImagesChange, initialImages = [] }) => {
const [images, setImages] = useState(initialImages);
const [isUploading, setIsUploading] = useState(false);
+ const [imageSrc, setImageSrc] = useState(null); // 크롭할 이미지 소스
+ const [crop, setCrop] = useState({ x: 0, y: 0 });
+ const [zoom, setZoom] = useState(1);
+ const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+ const [isCropping, setIsCropping] = useState(false);
+
+ // 모달을 열고 닫는 상태
+ const [isModalOpen, setIsModalOpen] = useState(false);
const handleImageUpload = async (event: ChangeEvent) => {
const file = event.target.files?.[0];
if (!file) return;
- setIsUploading(true);
+ setIsCropping(true);
+ const reader = new FileReader();
+ reader.onload = () => {
+ setImageSrc(reader.result as string);
+ setIsModalOpen(true); // 모달을 엽니다
+ };
+ reader.readAsDataURL(file);
+ };
+
+ const onCropComplete = useCallback((croppedArea: Area, croppedAreaPixels: Area) => {
+ setCroppedAreaPixels(croppedAreaPixels);
+ }, []);
+ const handleCropImage = async () => {
+ if (!imageSrc || !croppedAreaPixels) return;
+
+ setIsUploading(true);
try {
- const uploadedImage = await uploadImage(file);
- const newImages = [...images, uploadedImage.result];
- setImages(newImages);
- onImagesChange(newImages);
+ const croppedBlob = await getCroppedImg(imageSrc, croppedAreaPixels);
+
+ if (croppedBlob) {
+ const fileName = 'croppedImage.jpg'; // 파일 이름을 지정해 줍니다.
+ const croppedFile = new File([croppedBlob], fileName, { type: 'image/jpeg' });
+ const uploadedImage = await uploadImage(croppedFile); // File 형식으로 업로드
+ const newImages = [...images, uploadedImage.result];
+ setImages(newImages);
+ onImagesChange(newImages);
+ setIsModalOpen(false); // 모달을 닫습니다
+ }
} catch (error) {
console.error('Error uploading image:', error);
} finally {
setIsUploading(false);
+ setIsCropping(false);
+ setImageSrc(null);
}
};
const handleDeleteImage = (index: number) => {
const newImages = images.filter((_, i) => i !== index);
setImages(newImages);
- // Notify parent component about image deletion
onImagesChange(newImages);
};
@@ -54,7 +88,6 @@ const ImageUploader: React.FC = ({ onImagesChange, initialIm
newImages.splice(result.destination.index, 0, reorderedImage);
setImages(newImages);
- // Notify parent component about image reordering
onImagesChange(newImages);
};
@@ -71,9 +104,9 @@ const ImageUploader: React.FC = ({ onImagesChange, initialIm
display: 'block',
position: 'absolute', // 부모 요소 기준으로 절대 배치
right: '5px',
- top: '33%', // 세로 중앙에 배치
+ top: '50%', // 세로 중앙에 배치
transform: 'translateY(-50%)', // 세로 중앙 정렬
- zIndex: 1000,
+ zIndex: 10, // 모달과 겹치지 않도록 z-index 조정
}}
onClick={onClick}
>
@@ -94,9 +127,9 @@ const ImageUploader: React.FC = ({ onImagesChange, initialIm
display: 'block',
position: 'absolute', // 부모 요소 기준으로 절대 배치
left: '3px',
- top: '33%', // 세로 중앙에 배치
+ top: '50%', // 세로 중앙에 배치
transform: 'translateY(-50%)', // 세로 중앙 정렬
- zIndex: 1000,
+ zIndex: 10, // 모달과 겹치지 않도록 z-index 조정
}}
onClick={onClick}
>
@@ -105,8 +138,7 @@ const ImageUploader: React.FC = ({ onImagesChange, initialIm
)
);
};
-
-
+
const settings = {
dots: true,
infinite: displayImages.length > 1,
@@ -127,21 +159,54 @@ const ImageUploader: React.FC = ({ onImagesChange, initialIm
style={{ display: 'none' }}
id="image-upload-input"
/>
- displayImages.length === 0 && document.getElementById('image-upload-input')?.click()}
- className="relative cursor-pointer overflow-hidden bg-cover bg-center mx-auto"
- style={{
- backgroundImage: displayImages.length > 0 ? 'none' : `url(${OotdDefault.src})`,
- maxWidth: '460px',
- aspectRatio: '1 / 1', // 1:1 비율 유지
- }}
- >
+ {/* 크롭 모달 */}
+ {isModalOpen && (
+
+
+
이미지 영역 선택
+
+ {imageSrc && (
+
+ )}
+
+
+
+ 완료
+
+
setIsModalOpen(false)}>
+ 취소
+
+
+
+
+ )}
+ {/* 기존 이미지 영역은 모달이 열려도 그대로 유지 */}
+
displayImages.length === 0 && document.getElementById('image-upload-input')?.click()}
+ className={`relative cursor-pointer overflow-hidden bg-cover bg-center mx-auto ${
+ isModalOpen ? 'opacity-50' : '' // 모달이 열릴 때 투명도 조정으로만 시각적인 효과 적용
+ }`}
+ style={{
+ backgroundImage: displayImages.length > 0 ? 'none' : `url(${OotdDefault.src})`,
+ maxWidth: '460px',
+ aspectRatio: '1 / 1', // 1:1 비율 유지
+ }}
+ >
{!isUploading && displayImages.length === 0 && (
)}
@@ -150,7 +215,7 @@ const ImageUploader: React.FC
= ({ onImagesChange, initialIm
@@ -187,84 +252,83 @@ const ImageUploader: React.FC = ({ onImagesChange, initialIm
maxWidth: '460px', // 부모 컨테이너 최대 너비
}}
>
- {images.map((image, index) => (
-
- {(provided) => (
-
-
(
+
+ {(provided) => (
+
+
+
handleDeleteImage(index)}
+ className="absolute top-0 right-0 rounded-full cursor-pointer"
+ >
+
+
+
+ ))}
+ {images.length > 0 && images.length < 5 && (
+
document.getElementById('image-upload-input')?.click()}
+ className="flex justify-center items-center cursor-pointer ml-[2%]"
style={{
- width: '100%',
- height: '100%',
- position: 'absolute',
- top: 0,
- left: 0,
- objectFit: 'cover',
+ width: '18%', // 새로운 이미지 추가 버튼도 같은 크기
+ paddingBottom: '18%', // 가로세로 비율 1:1
+ position: 'relative',
}}
- />
-
handleDeleteImage(index)}
- className="absolute top-0 right-0 rounded-full cursor-pointer"
>
-
- )}
-
- ))}
- {images.length > 0 && images.length < 5 && (
-
document.getElementById('image-upload-input')?.click()}
- className="flex justify-center items-center cursor-pointer ml-[2%]"
- style={{
- width: '18%', // 새로운 이미지 추가 버튼도 같은 크기
- paddingBottom: '18%', // 가로세로 비율 1:1
- position: 'relative',
- }}
- >
-
-
- )}
- {provided.placeholder}
-
+ )}
+
+
+
-
-
추천 장소
- {isSpotsLoading &&
추천 장소를 불러오는 중입니다...
}
-
- {recommendedSpots?.result && recommendedSpots.result.length > 0 ? (
-
- {recommendedSpots.result.map((spot: any, index: number) => (
- -
-
{spot.title}
- {spot.content}
- {/* {spot.imgUrl && spot.imgUrl.length > 0 && (
-
- )} */}
-
- ))}
-
- ) : (
- !isSpotsLoading &&
추천 장소가 없습니다.
- )}
-
);
};
diff --git a/src/components/ootd/PostOotd.tsx b/src/components/ootd/PostOotd.tsx
index 3aa07541..271ee991 100644
--- a/src/components/ootd/PostOotd.tsx
+++ b/src/components/ootd/PostOotd.tsx
@@ -154,8 +154,11 @@ const PostOotd: React.FC = () => {
if (typeof window !== 'undefined') {
Swal.fire({
icon: 'error',
+ iconColor: '#FB3463',
+ confirmButtonText: '확인',
+ confirmButtonColor: '#FB3463',
title: '입력 오류',
- text: '위치와 날짜를 모두 입력해주세요.',
+ text: '지역과 날짜를 모두 입력해주세요.',
});
}
return;
@@ -267,11 +270,11 @@ const PostOotd: React.FC = () => {
return (
-
+ */}