오늘의 목표

• element 별 클릭 이벤트 구현으로 원하는 미디어를 배치할 수 있도록 구현

수행 내역

• title element의 내용 작성 및 수정 기능 구현
  • elements를 context로 상태를 관리하고, content 에 element 내부의 내용을 작성
  • elements 에서 현재 클릭한 아이템의 content를 불러와 수정 가능

import { useRef, useState } from 'react';
import { useLogBook } from '../../context/LogBookContext';

const BlogElementModal = ({ item, releaseModal }) => {
    const { elements, setElements } = useLogBook();
    const currentContent = item ? elements.find((element) => element.i === item.i)?.content : '';

    const [modalContent, setModalContent] = useState(currentContent);
    const inputRef = useRef();

    const handleModalClick = (e) => e.stopPropagation();

    const handleClickConfirm = () => {
        if (!modalContent.trim()) {
            alert('내용 입력해라 임마');
            return;
        }

        setElements((prev) =>
            prev.map((element) =>
                element.i === item.i ? { ...element, content: modalContent } : element
            )
        );
        releaseModal();
    };

    const handleClickCancel = () => releaseModal();

    const modalData = {
        title: {
            title: '제목 블럭의 내용을 입력해 주세요',
            placeholder: '제목을 입력하세요',
        },
        post: {
            title: '포스트 블럭의 내용을 입력해 주세요',
            placeholder: '포스트 내용을 입력하세요',
        },
        link: {
            title: '블럭에 추가하시려는 링크를 입력해 주세요',
            placeholder: '링크를 입력하세요 (예: <https://example.com>)',
        },
        image: {
            title: '이미지의 링크를 입력해 주세요',
            placeholder: '이미지 URL을 입력하세요',
        },
        map: {
            title: '지도를 첨부해 주세요',
            placeholder: '지도 정보를 입력하세요',
        },
    };

    const type = item?.i.split('-')[0];
    const { title, placeholder } = modalData[type] || {};

    return (
        <div id='BlogElementModal' onClick={handleModalClick}>
            <h1>{title}</h1>
            {['title', 'link', 'image'].includes(type) ? (
                <div>
                    <input
                        className={`input-${type}-element`}
                        type='text'
                        value={modalContent}
                        onChange={(e) => setModalContent(e.target.value)}
                        ref={inputRef}
                        placeholder={placeholder}
                    />
                </div>
            ) : (
                <p>{placeholder}</p>
            )}
            <ModalBtnArea
                handleClickConfirm={handleClickConfirm}
                handleClickCancel={handleClickCancel}
            />
        </div>
    );
};

const ModalBtnArea = ({ handleClickConfirm, handleClickCancel }) => (
    <div className='modal-btn-area'>
        <button className='btn-confirm' onClick={handleClickConfirm}>
            확인
        </button>
        <button className='btn-cancel' onClick={handleClickCancel}>
            취소
        </button>
    </div>
);

export default BlogElementModal;

문제 및 이슈

• 없음

참고자료

• https://www.npmjs.com/package/react-grid-layout/v/1.5.2#demos

지원요청

• 없음

내일 계획

• element 개별 기능 구현 완료