Skip to content

Commit

Permalink
Merge pull request #227 from official-Trippy/feature/#127
Browse files Browse the repository at this point in the history 
Feature/#127
  • Loading branch information
@kimkimjunjun
kimkimjunjun authored Oct 13, 2024
2 parents 32fea68 + 64ca297 commit bf5f12a
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 31 deletions.
5 changes: 1 addition & 4 deletions src/app/edits/[editNum]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,7 @@ function PostEdit({ params }: { params: { editNum: number } }) {
setTimeout(() => {
if (postData) {
setTicketColor(colorTicket[postData.result.ticket.ticketColor]);
setPostRequests({
body: postData.result.post.body || '',
images: postData.result.post.images as string[], // 이미지 URL을 저장할 배열
});

setTransportStr(postData?.result.ticket.transport);

// transportStr에 따라 이미지 설정
Expand Down
4 changes: 2 additions & 2 deletions src/components/pages/home/RecommendBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -403,9 +403,9 @@ const RecommendBoard = () => {
</div>
</div>
) : (
<div className={`relative w-full rounded-xl ${colorTicket[item.ticket.ticketColor] ? `bg-[${colorTicket[item.ticket.ticketColor]}]` : ''}`} style={{ objectFit: 'cover', aspectRatio: '304 / 349', display: 'flex', justifyContent: 'center', alignItems: 'center', overflow: 'hidden' }}>
<div className={`relative w-full p-[1.5rem] rounded-xl ${colorTicket[item.ticket.ticketColor] ? `bg-[${colorTicket[item.ticket.ticketColor]}]` : ''}`} style={{ objectFit: 'cover', aspectRatio: '304 / 349', display: 'flex', justifyContent: 'center', alignItems: 'center', overflow: 'hidden' }}>
<Image
className="rounded-xl w-full h-full p-[1.5rem]"
className="rounded-xl w-full h-full "
src={item.ticket.image?.accessUri}
alt="TICKET"
width={270}
Expand Down
9 changes: 5 additions & 4 deletions src/components/pages/home/recentPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,24 +204,25 @@ function RecentPost({ allPosts, setAllPosts, boardData, boardRefetch, PAGE_SIZE,
{window.innerWidth > 500 ? (
<div className="flex w-full">
<div className='w-[25rem]'>
<Image className="w-[25rem] h-[17rem] rounded-[0.8rem] object-cover object-center" src={posts.ticket.image.accessUri} alt="" width={170} height={170} />
<Image className="w-[25rem] h-[17rem] rounded-[0.8rem] object-cover object-center" src={posts.ticket.image.accessUri} alt="" width={250} height={170} />
</div>
<div className='flex flex-col w-full ml-[2.5rem]'>
<h1 className="text-[2rem] font-medium text-ellipsis overflow-hidden theboki font-['Pretendard']">{posts.post.title}</h1>
<span className="text-[1.6rem] mt-[0.4rem] h-[5rem] font-normal text-[#6B6B6B] text-ellipsis overflow-hidden theboki1 font-['Pretendard']">{bodyText}</span>
<div className="flex items-center overflow-hidden whitespace-nowrap">
{posts?.post.tags.map((tagData: string, index: number) => (
{posts?.post.tags.slice(0, 3).map((tagData: string, index: number) => (
<span
key={index}
className={`w-fit px-[0.8rem] py-[0.4rem] mt-[1.2rem] mr-[0.5rem] bg-[#F5F5F5] text-[1.3rem] text-[#9d9d9d] rounded-[1.6rem] text-ellipsis overflow-hidden ${index > 0 ? 'hidden xl:block' : ''}`}
className={`w-fit px-[0.8rem] py-[0.4rem] mt-[1.2rem] mr-[0.5rem] bg-[#F5F5F5] text-[1.3rem] text-[#9d9d9d] rounded-[1.6rem] text-ellipsis overflow-hidden`}
>
{tagData}
</span>
))}
{posts?.post.tags.length > 2 && (
{posts?.post.tags.length > 3 && (
<span className="text-ellipsis overflow-hidden whitespace-nowrap">...</span>
)}
</div>

<div className="flex mt-[2rem]">
<div className="flex h-full text-[1.4rem] font-normal space-x-4 items-end mt-auto xl:appearance-none">
<Image
Expand Down
41 changes: 20 additions & 21 deletions src/components/testEditor/textEditorEdits.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useRef, useState } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import { uploadImage } from '@/services/blog';

Expand All @@ -10,43 +10,34 @@ interface editorProps {
const inputAPI = process.env.NEXT_PUBLIC_INPUT_TEXT_API_KEY;

const TextEditorEdits = ({ postRequest, setPostRequest }: editorProps) => {
const [contented, setContented] = useState('');
const [editorInstance, setEditorInstance] = useState<any>(null);

const handleEditorChange = (newContent: string) => {
// 이미지 태그를 인덱스로 대체
const imgTags = newContent.match(/<img[^>]*>/g) || [];
let index = 1;

const cleanContent = newContent.replace(/<img[^>]*>/g, () => {
const imgIndex = "imageData" + index++;
return imgIndex; // 인덱스를 문자열로 반환
});

setContented(cleanContent);
// 에디터 내용이 변경될 때마다 상태를 업데이트
setPostRequest((prev: any) => ({
...prev,
body: cleanContent, // 텍스트 내용 업데이트
body: newContent, // 텍스트 내용 업데이트
}));
};

const handleImageUpload = async (blobInfo: any) => {
const file = blobInfo.blob(); // blobInfo에서 파일 추출

try {
const uploadedImage = await uploadImage(file);
const imageUrl = uploadedImage.result; // 업로드한 이미지의 URL
const uploadedImage = await uploadImage(file); // 이미지 업로드 함수 호출
const imageUrl = uploadedImage.result; // 업로드된 이미지 URL 가져오기

// 성공적인 업로드 후 URL을 배열에 추가
// 이미지 URL을 postRequest.images에 추가
setPostRequest((prev: any) => ({
...prev,
images: [...prev.images, { accessUri: imageUrl }], // 이미지 URL 추가
images: [...prev.images, imageUrl], // 이미지 URL 추가
}));

// 성공적인 업로드 후 URL을 반환
return imageUrl;
} catch (error) {
console.error('Error uploading image:', error);
// failure('이미지 업로드에 실패했습니다.'); // 실패 시 에러 메시지
return ''; // 실패 시 빈 문자열 반환
}
};

Expand All @@ -58,6 +49,16 @@ const TextEditorEdits = ({ postRequest, setPostRequest }: editorProps) => {
});
};

const handleSaveEditorContent = () => {
if (editorInstance) {
const content = editorInstance.getContent(); // 에디터 내용 가져오기
setPostRequest((prev: any) => ({
...prev,
body: content, // 내용 업데이트
}));
}
};

console.log(postRequest); // postRequest 확인

return (
Expand Down Expand Up @@ -90,12 +91,10 @@ const TextEditorEdits = ({ postRequest, setPostRequest }: editorProps) => {
'image media codesample emoticons fullscreen preview | ' +
'removeformat | undo redo',
images_upload_handler: handleImageUpload, // 이미지 업로드 핸들러 지정

}}
value={renderBodyWithImages(postRequest.body, postRequest.images)} // 에디터의 내용을 상태로 관리
onEditorChange={handleEditorChange}
// dangerouslySetInnerHTML 사용하여 HTML을 직접 삽입
// 주의: XSS 공격 방지를 위해 신뢰할 수 있는 데이터만 사용해야 합니다.
// outputFormat="html" // HTML 형식으로 출력
/>
</div>
);
Expand Down

0 comments on commit bf5f12a

Please sign in to comment.