모달 UI 관련 질문

2026-01-09T01:18:58.891Z

0

감사합니다!!

0

DialogContent와 textarea 여기저기 다 overflow-scroll을 추가해봤으나 해결되지 않는데 어디에 추가하신건지 자세히 알려주실 수 있을까요..?ㅠㅠ 제공해주신 코드와 diff checker까지 사용해봤으나 제가 다르게 입력한 부분을 못찾겠습니다..!!

(+ 같은 코드로 다른 모니터 환경에서는 강의처럼 정상 작동합니다. 노트북(권장사항인 120%배율)환경에서 이런거같은데, 잘못 작성된 코드가 아니라면 이런경우를 어떻게 대처하나요? 반응형으로 보완해줘야할까요? )

import { ImageIcon } from "lucide-react";
import { Button } from "../ui/button";
import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
import { usePostEditorModal } from "@/store/post-editor-modal";
import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { useCreatePost } from "@/hooks/mutations/post/use-create-post";

export default function PostEditorModal() {
  const { isOpen, close } = usePostEditorModal();
  const { mutate: createPost, isPending: isCreatePostPending } = useCreatePost({
    onSuccess: () => {
      close();
    },
    onError: (error) => {
      toast.error("포스트 생성에 실패했습니다. 다시 시도해주세요.", {
        position: "top-center",
      });
    },
  });

  const [content, setContent] = useState("");
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const handleCloseModal = () => {
    close();
  };

  const handleCreatePostClick = () => {
    if (content.trim() === "") return;
    createPost(content);
  };

  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = "auto";
      textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
    }
  }, [content]);

  useEffect(() => {
    if (!isOpen) return;
    textareaRef.current?.focus();
    setContent("");
  }, [isOpen]);

  return (
    <Dialog open={isOpen} onOpenChange={handleCloseModal}>
      <DialogContent className="max-h-[90vh]">
        <DialogTitle>포스트 작성</DialogTitle>
        <textarea
          disabled={isCreatePostPending}
          ref={textareaRef}
          value={content}
          onChange={(e) => setContent(e.target.value)}
          className="max-h-125 min-h-25 focus:outline-none"
          placeholder="무슨 일이 있었나요?"
        />
        <Button
          disabled={isCreatePostPending}
          variant="outline"
          className="cursor-pointer"
        >
          <ImageIcon />
          이미지 추가
        </Button>
        <Button
          disabled={isCreatePostPending}
          onClick={handleCreatePostClick}
          className="cursor-pointer"
        >
          저장
        </Button>
      </DialogContent>
    </Dialog>
  );
}