Skip to content

Commit

Permalink
Merge pull request #135 from official-Trippy/feature/#127
Browse files Browse the repository at this point in the history 
Feature/#127
  • Loading branch information
@kimkimjunjun
kimkimjunjun authored Sep 23, 2024
2 parents 09f1b97 + 3236742 commit d4e7d33
Show file tree
Hide file tree
Showing 5 changed files with 197 additions and 84 deletions.
119 changes: 90 additions & 29 deletions src/app/board/[boardId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { colorTicket } from "@/types/board";
import deleteBoard from "@/services/board/delete/deleteBoard";
import Swal from "sweetalert2";
import menubars from "@/dummy/menubars.svg"
import deleteReply from "@/services/board/delete/deleteReply";

export default function BoardPage({ params }: { params: { boardId: number } }) {
const accessToken = Cookies.get("accessToken");
Expand All @@ -49,6 +50,8 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
const [isReplyOpen, setIsReplyOpen] = useState(true);
const [isOpenMenu, setIsOpenMenu] = useState(false);
const [parentIds, setParentIds] = useState(0);
const [soloReply, setSoloReply] = useState(false);
const [replyStates, setReplyStates] = useState<boolean[]>([]);

const { data: postData, refetch: postRefetch } = useQuery({
queryKey: ["postData"],
Expand Down Expand Up @@ -200,11 +203,13 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
mentionMemberNickName: replyNicknames,
mentionCommentId: mentionCommentIds
};

try {
console.log(commentData);
await postComments(commentData);
setReplyComment("");
setReplyOpen(Array(postCommentData?.result.length).fill(false));
setReplyStates(Array(postCommentData?.result.length).fill(false));
commentRefetch();
postRefetch();
} catch (e) { }
Expand Down Expand Up @@ -259,6 +264,24 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
}
});
}
console.log(userInfo)
const deleteReplyHandler = async (replyIdx: number) => {
await deleteReply(replyIdx)
Swal.fire({
icon: 'success',
title: '정상적으로 삭제되었습니다.',
confirmButtonText: '확인',
confirmButtonColor: '#FB3463',
customClass: {
popup: 'swal-custom-popup',
icon: 'swal-custom-icon'
}
}).then((result) => {
if (result.isConfirmed) {
commentRefetch();
}
});
}

const editBoardEdit = () => {
router.push(`/edits/${params.boardId}`)
Expand All @@ -271,7 +294,19 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
const images = postData?.result.post.images || [];
const bodyWithImages = replaceImagesInBody(postData?.result.post.body, images);

console.log(postData);

const handleReplyToggle = (index: number, id: number, nickName: string, memberId: string) => {
// 해당 인덱스의 답글 입력란 상태를 토글
setReplyStates((prev) => {
const newStates = [...prev];
newStates[index] = !newStates[index]; // 현재 상태를 반전
return newStates;
});
setParentIds(id)
setReplyNickname(nickName);
setReplyMemId(memberId);
};
console.log(replyId);
return (
<div>
<Header />
Expand Down Expand Up @@ -492,7 +527,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
{isReplyOpen && (
<div>
{userInfo && (
<div className="w-full h-[9.3rem] shadowall pl-[1.7rem] pt-[1.4rem] flex">
<div className="w-full h-[9.3rem] shadowall pl-[1.7rem] pt-[1.4rem] flex rounded-[0.8rem]">
<div className="w-full">
<div className="flex items-center">
<Image
Expand Down Expand Up @@ -524,23 +559,20 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
)}

<div
className={`w-full h-full shadowall px-[4.7rem] py-[1.4rem] my-[3.5rem] flex flex-col`}
className={`w-full h-full shadowall px-[4.7rem] py-[1.4rem] my-[3.5rem] flex flex-col rounded-[0.8rem]`}
>
{postCommentData?.result &&
Object.entries(postCommentData.result).map(
([key, coData]: [string, any], index: number) => {
const createDateTime = new Date(coData.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 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')}`;

console.log(coData);
return (
<div className="mb-[2.5rem]" key={key}>
<div
className={`py-[2rem] mr-[2rem]`}
>
<div className={`py-[2rem] mr-[2rem]`}>
<div className="flex items-center">
<Image
className="flex items-center"
className="w-[2.8rem] h-[2.8rem] flex items-center rounded-full"
src={coData.member.profileUrl}
alt=""
width={28}
Expand All @@ -556,27 +588,53 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
<div className="flex ml-[4.5rem] text-[1.2rem] text-[#9D9D9D] items-center">
<span>{formattedDateTime}</span>
<hr className="mx-[1rem] h-[1rem] w-[0.1rem] bg-[#9D9D9D]" />
{replyOpen[index] ? (
<span
className="cursor-pointer"
onClick={() => toggleReply(index)}
>
답글취소
</span>
) : (
<span
className="cursor-pointer"
onClick={() => {
toggleReply(index);
setReplyId(coData.id);
setReplyNickname(coData.member.nickName);
setReplyMemId(coData.member.memberId)
}}
>
답글달기
</span>
<span
className="cursor-pointer"
onClick={() => handleReplyToggle(index, coData.id, coData.member.nickName, coData.member.memberId)}
>
{replyStates[index] ? '답글취소' : '답글달기'}
</span>
{userInfo?.memberId === coData.member.memberId && (
<span className="ml-[1rem] cursor-pointer" onClick={() => deleteReplyHandler(coData.id)}>삭제</span>
)}

</div>
{replyStates[index] && (
<div className="w-[95%] h-[9.3rem] shadowall mt-[2rem] ml-[4rem] pl-[1.7rem] pt-[1.4rem] flex border border-[#CFCFCF] rounded-[0.8rem] relative">
<div className="w-full">
<div className="flex items-center">
<Image
className="w-[2.8rem] h-[2.8rem] flex items-center rounded-full"
src={memberDatas?.result.profileImageUrl}
alt=""
width={28}
height={28}
/>
<span className="ml-[1.4rem] text-[1.8rem] font-semibold flex items-center">
{memberDatas?.result.nickName}
</span>
</div>
<div className="relative">
<span className="absolute text-[#FFBACA] text-[1.4rem] ml-[4.5rem]">
@{coData.member.nickName}
</span>
<input
className="w-[70%] outline-none ml-[10rem] text-[1.4rem] font-normal pl-[4.5rem]"
type="text"
placeholder="에게 답글쓰기"
value={replyComment}
onChange={(e) => setReplyComment(e.target.value)}
/>
</div>
</div>
<button
className="hover:bg-[#292929] hover:text-white bg-[#F5F5F5] text-[#292929] rounded-[0.8rem] text-[1.6rem] font-semibold w-[8.6rem] h-[3.5rem] flex ml-auto mr-[1.4rem] items-center justify-center"
onClick={() => commentReplyHandler(replymemId, replyNickname, replyId)}
>
입력
</button>
</div>
)}
</div>
{coData?.children.map((childData: any, childIndex: number) => {
const createDateTime = new Date(childData.createDateTime);
Expand All @@ -586,7 +644,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
<div className={`bg-[#F5F5F5] w-[95%] py-[2rem] px-[1.6rem] mx-[4rem] rounded-[0.8rem]`} key={childIndex}>
<div className="flex items-center">
<Image
className="flex items-center"
className="w-[2.8rem] h-[2.8rem] flex items-center rounded-full"
src={childData.member.profileUrl}
alt=""
width={28}
Expand Down Expand Up @@ -631,6 +689,9 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
답글달기
</span>
)}
{userInfo?.memberId === childData.member.memberId && (
<span className="ml-[1rem] cursor-pointer" onClick={() => deleteReplyHandler(childData.id)}>삭제</span>
)}
{/* 답글이 열렸을 때 추가적인 요소를 보여줄 수 있습니다 */}
{replyOpen[index] && (
<div className="reply-input">
Expand Down
70 changes: 24 additions & 46 deletions src/app/post/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,6 @@
"use client"
import Header from '@/components/shared/header/Header'
import React, { ChangeEvent, useEffect, useState } from 'react'
import air from '@/dummy/air.svg'
import train from '@/dummy/train.svg'
import bus from '@/dummy/bus.svg'
import bicycle from '@/dummy/bicycle.svg'
import car from '@/dummy/car.svg'
import air1 from '@/dummy/air1.svg'
import train1 from '@/dummy/train1.svg'
import bus1 from '@/dummy/bus1.svg'
import bicycle1 from '@/dummy/bicycle1.svg'
import car1 from '@/dummy/car1.svg'
import Image from 'next/image'
import searchicon from '@/dummy/search.svg'
import uploadImages from "@/dummy/uploadfile.svg"
Expand All @@ -25,6 +15,7 @@ import Swal from 'sweetalert2'
import { colorTicket } from '@/types/board'
import MyTinyMCEEditor from '@/components/testEditor/textEditor2'
import { getCountry, getCountry1 } from '@/services/board/get/getCountry'
import { PostAirSVG, PostBusSVG, PostBycicleSVG, PostCarSVG, PostTrainSVG } from '@/components/transportsvg/post'

interface CountryResult {
countryIsoAlp2: string;
Expand All @@ -44,18 +35,6 @@ function PostWrite() {
const [bgColor, setBgColor] = useState('#55FBAF');
const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
const [isTransport, setIsTransport] = useState(false);
const [isImageIdx, setIsImageIdx] = useState([
{ imgsrc: air },
{ imgsrc: train },
{ imgsrc: bus },
{ imgsrc: bicycle },
{ imgsrc: car },
{ imgsrc: air1 },
{ imgsrc: train1 },
{ imgsrc: bus1 },
{ imgsrc: bicycle1 },
{ imgsrc: car1 },
]);
const [passengerCount, setPassengerCount] = useState(0);
const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(null);
Expand All @@ -74,6 +53,7 @@ function PostWrite() {
const [tags, setTags] = useState<string[]>([]);
const [inputValue, setInputValue] = useState<string>('');
const [ticketColor, setTicketColor] = useState('Aquamarine')
const [isImageIdx, setIsImageIdx] = useState<any[]>([]);
const [postRequests, setPostRequests] = useState({
body: '',
images: [] as string[], // 이미지 URL을 저장할 배열
Expand All @@ -82,6 +62,16 @@ function PostWrite() {
const [result1, setResult1] = useState<ApiResponse | null>(null);
const [transportStr, setTransportStr] = useState('')

useEffect(() => {
setIsImageIdx([
{ imgsrc: <PostAirSVG fillColor={colorTicket[ticketColor]} /> },
{ imgsrc: <PostTrainSVG fillColor={colorTicket[ticketColor]} /> },
{ imgsrc: <PostBusSVG fillColor={colorTicket[ticketColor]} /> },
{ imgsrc: <PostBycicleSVG fillColor={colorTicket[ticketColor]} /> },
{ imgsrc: <PostCarSVG fillColor={colorTicket[ticketColor]} /> },
]);
}, [ticketColor]);

const formatDate = (date: Date | null) => {
if (!date) return '';
return date.toLocaleDateString('ko-KR', {
Expand Down Expand Up @@ -127,10 +117,10 @@ function PostWrite() {
console.log()


const selectTransport = (imgSrc: any) => {
const selectTransport = (imgSrc: JSX.Element) => {
setIsImageIdx((prevState) => {
// 클릭한 항목의 인덱스를 찾기
const selectedIndex = prevState.findIndex((item) => item.imgsrc === imgSrc);
const selectedIndex = prevState.findIndex((item) => item.imgsrc.type === imgSrc.type && item.imgsrc.props.fillColor === imgSrc.props.fillColor);

// 새로운 배열 생성
const updatedState: any = [...prevState];
Expand All @@ -140,24 +130,19 @@ function PostWrite() {
const selectedItem = updatedState.splice(selectedIndex, 1)[0];
updatedState.unshift(selectedItem);

// 나머지 항목의 인덱스 업데이트
for (let i = 0; i < updatedState.length; i++) {
updatedState[i].index = i;
}

// 첫 번째 항목의 src에 따라 setTransportStr 설정
if (updatedState.length > 0) {
const transportValue = updatedState[0].imgsrc.src; // updatedState의 첫 번째 값 사용
const transportValue = updatedState[0].imgsrc.type.name; // SVG 컴포넌트의 이름 사용

if (transportValue.includes('bicycle')) {
if (transportValue === 'PostBicycleSVG') {
setTransportStr('Bicycle');
} else if (transportValue.includes('air')) {
} else if (transportValue === 'PostAirSVG') {
setTransportStr('Airplane');
} else if (transportValue.includes('train')) {
} else if (transportValue === 'PostTrainSVG') {
setTransportStr('Train');
} else if (transportValue.includes('bus')) {
} else if (transportValue === 'PostBusSVG') {
setTransportStr('Bus');
} else if (transportValue.includes('car')) {
} else if (transportValue === 'PostCarSVG') {
setTransportStr('Car');
}
} else {
Expand Down Expand Up @@ -338,24 +323,17 @@ function PostWrite() {
isTransport ? (
<div className='w-[6rem] h-[28rem] absolute z-10 bg-white shadowall rounded-[3rem] flex items-center justify-center mt-[2rem] flex-col space-y-9'>
{isImageIdx.slice(0, 5).map((item: any, index) => (
<Image
key={index}
className=""
src={item.imgsrc}
alt={`item ${index}`}
onClick={() => {
selectTransport(item.imgsrc);
}
}
/>
<div key={index} onClick={() => selectTransport(item.imgsrc)}>
{item.imgsrc}
</div>
))}
</div>
) : (
<div
className='w-[6rem] h-[6rem] absolute shadowall rounded-full flex items-center justify-center mt-[2rem]'
onClick={() => setIsTransport(true)}
>
<Image className='' src={isImageIdx[0].imgsrc} alt='비행기' />
{isImageIdx[0]?.imgsrc}
</div>
)
}
Expand Down
Loading

0 comments on commit d4e7d33

Please sign in to comment.