Merge pull request #191 from Ureca-Mini-Project-Team4/feature/page-comment

Feature/page comment

Author: arty0928

react-app/public/assets/images/people/박지회.png

@@ -9,10 +9,17 @@ export interface PostCommentResponse {
   status: string;
 }
 
-export async function postComment(params: PostCommentRequest): Promise<PostCommentResponse> {
-  const response = await axiosInstance.post('/comment', params);
+export async function postComment(
+  params: PostCommentRequest,
+): Promise<PostCommentResponse | undefined> {
+  try {
+    console.log('params : ', params);
+    console.log('보내는 JSON : ', JSON.stringify(params));
 
-  return {
-    status: response.data,
-  };
+    const response = await axiosInstance.post('/comment', params);
+    return { status: response.data };
+  } catch (err) {
+    console.error('❌ postComment 에러:', err);
+    return undefined;
+  }
 }

react-app/src/apis/comment/postComment.ts

@@ -1,8 +1,8 @@
 import Profile from '../Profile/Profile';
 
 interface CommentProps {
-  nickname: string | null;
-  comment: string | null;
+  nickname: string;
+  comment: string;
 }
 
 const CommentCard = ({ nickname, comment }: CommentProps) => {

react-app/src/components/Comment/Comment.tsx

@@ -1,10 +1,29 @@
+import { useRef } from 'react';
+
 interface CommentInputFieldProps {
   nickname: string; // 사용자 이미지 파일명
   comment: string;
   onChangeComment: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onSubmit: () => Promise<void>;
 }
 
-const CommentInputField = ({ nickname, comment, onChangeComment }: CommentInputFieldProps) => {
+const CommentInputField = ({
+  nickname,
+  comment,
+  onChangeComment,
+  onSubmit,
+}: CommentInputFieldProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = async () => {
+    if (!comment.trim()) {
+      inputRef.current?.focus();
+      return;
+    }
+
+    await onSubmit(); // 상위에서 전달된 async 함수 호출
+  };
+
   return (
     <div className="flex items-start gap-2 w-full ">
       {/* 사용자 이미지 */}
@@ -17,18 +36,22 @@ const CommentInputField = ({ nickname, comment, onChangeComment }: CommentInputF
       <div className="flex flex-1 items-center gap-2">
         {/* 댓글 입력창 */}
         <input
+          ref={inputRef}
           className="flex-1 px-3 py-2 rounded-md border border-gray-300 bg-gray-100 
                  focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-base)] 
                  focus:border-[var(--color-primary-base)] 
                  text-sm sm:text-base font-pr
                  max-w-[calc(65%)] sm:max-w-full"
           value={comment}
-          onChange={onChangeComment}
+          onChange={(e) => {
+            onChangeComment(e);
+          }}
           placeholder="댓글을 입력하세요."
         />
 
         {/* 확인 버튼 */}
         <button
+          onClick={handleSubmit}
           className="w-[60px] h-10 text-[12px] font-pr border rounded-lg bg-[var(--color-primary-base)] text-white 
                      flex items-center justify-center text-sm sm:text-base whitespace-nowrap 
                      focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-base)]"

react-app/src/components/Comment/CommentInputField.tsx

@@ -1,15 +1,15 @@
 const BASE_URL = '/assets/images/';
 
 interface ProfileProps {
-  nickname: string | null;
+  nickname: string;
 }
 
 const Profile = ({ nickname }: ProfileProps) => {
   return (
     <div className="w-[40px] h-[40px] sm:w-[60px] sm:h-[60px] rounded-xl">
       <img
         className="border-[1px] rounded-4xl border-gray-100"
-        src={`${BASE_URL}${nickname ? 'animal/' + nickname + '.jpg' : 'default-profile.png'}`}
+        src={`${BASE_URL}${encodeURIComponent(nickname) ? 'animal/' + nickname + '.jpg' : 'default-profile.png'}`}
       />
     </div>
   );

react-app/src/components/Profile/Profile.tsx

@@ -11,8 +11,16 @@ import CommentCard from '@/components/Comment/Comment';
 import CharacterCard from '@/components/Character/Character';
 import useIsMobile from '@/hook/useIsMobile';
 import CommentInputField from '@/components/Comment/CommentInputField';
+import Loading from '@/components/Loading/Loading';
+import { postComment } from '@/apis/comment/postComment';
+import { useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store';
 
 const Comment = () => {
+  // 사용자 정보
+  const user = useSelector((state: RootState) => state.auth.user)!;
+
   const isMobile = useIsMobile();
 
   // 결과 조회
@@ -24,13 +32,20 @@ const Comment = () => {
 
   // 댓글 입력창 상태 추가
   const [commentText, setCommentText] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+
+  // 댓글 맨 아래로 내리기
+  const commentsEndRef = useRef<HTMLDivElement>(null);
+
+  // 댓글 렌더링, 모바일 여부는 그대로 유지 가능
+  const displayedComments = isMobile ? comments.slice(-6) : comments;
 
   // 최신 pollIds 불러오기
   useEffect(() => {
     const fetchAllResults = async () => {
       try {
         const res = await getLatestPollIds();
-        console.log('댓글', res);
+        console.log('최신 투표 id', res);
         setPollIds(res);
       } catch (error) {
         console.error('투표 결과 불러오기 실패 : ', error);
@@ -44,11 +59,13 @@ const Comment = () => {
     const fetchResultsByPollIds = async () => {
       try {
         if (pollIds.length === 0) return;
-
+        setIsLoading(true); // 로딩 시작
         const res = await Promise.all(pollIds.map((pollId) => getVoteResultByPollId({ pollId })));
         setResults(res);
       } catch (error) {
         console.log('투표 결과 불러오기 실패 : ', error);
+      } finally {
+        setIsLoading(false); // 로딩 끝
       }
     };
 
@@ -60,41 +77,95 @@ const Comment = () => {
     const getAllComments = async () => {
       try {
         const res = await getComments();
-        if (res.length === 0) {
-        }
         setComments(res);
       } catch (error) {
         console.log('댓글 불러오기 실패 : ', error);
       }
     };
     getAllComments();
-  }, comments);
+  }, []);
+
+  // 댓글 등록 후 스크롤 이동 호출
+  const scrollToBottom = () => {
+    commentsEndRef.current?.scrollIntoView({ behavior: 'auto' });
+  };
+
+  // 댓글 목록이 바뀔 때마다 스크롤을 아래로
+  useEffect(() => {
+    if (comments.length > 0) {
+      requestAnimationFrame(() => {
+        commentsEndRef.current?.scrollIntoView({ behavior: 'auto' });
+      });
+    }
+  }, [comments]);
+
+  // 리사이즈 이벤트 감지 후 스크롤 내리기
+  useEffect(() => {
+    const handleResize = () => {
+      // 댓글이 존재하면 맨 아래로 스크롤
+      if (comments.length > 0) {
+        commentsEndRef.current?.scrollIntoView({ behavior: 'auto' });
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [comments]);
+
+  // 댓글 등록
+  const handleSubmitComment = async () => {
+    if (!commentText.trim()) {
+      alert('내용을 입력해주세요');
+      return;
+    }
+    try {
+      console.log('댓글 내용 : ', commentText);
+      await postComment({
+        user_id: user.userId,
+        comment_text: commentText,
+      });
+
+      const updatedComments = await getComments();
+      setComments(updatedComments);
+      setCommentText('');
+      scrollToBottom();
+    } catch (error) {
+      console.log('댓글 등록 실패', error);
+    }
+  };
 
   return (
-    <>
-      <div className="py-10 sm:p-5 flex flex-col justify-center items-center">
-        {/* 제목 */}
-        <div className="flex justify-center items-center gap-3 sm:gap-7 sm:pt-0 pt-5">
-          {/* 왼쪽 이미지: 모바일에서만 보이게 */}
-          <img
-            src="/assets/images/popper-right.png"
-            className="w-[40px] sm:w-[100px]"
-            alt="popper-left"
-          />
-          <h1 className="text-2xl font-pm sm:text-3xl">투표 결과</h1>
-          {/* 오른쪽 이미지: 모든 화면에서 보이지만 크기는 반응형 */}
-          <img
-            src="/assets/images/popper-left.png"
-            className="w-[40px]  sm:hidden"
-            alt="popper-right"
-          />
-        </div>
+    <div className="pt-10 sm:p-5 flex flex-col justify-center items-center">
+      {/* 제목 */}
+      <div className="flex justify-center items-center gap-3 sm:gap-7 sm:pt-0 pt-5">
+        <img
+          src="/assets/images/popper-right.png"
+          className="w-[40px] sm:w-[100px]"
+          alt="popper-left"
+        />
+        <h1 className="text-2xl font-pm sm:text-3xl">투표 결과</h1>
+        <img
+          src="/assets/images/popper-left.png"
+          className="w-[40px] sm:hidden"
+          alt="popper-right"
+        />
+      </div>
 
-        <div className="p-5 flex flex-col sm:flex-row sm:p-3 gap-10 sm:gap-30">
-          {/* 카드 영역 */}
-          <div className="w-full sm:w-auto flex justify-center">
-            <div className="grid grid-cols-2 grid-rows-2 gap-6 sm:gap-x-10 sm:gap-y-0">
-              {results.map((poll, idx) => (
+      <div className="px-5 py-10 flex flex-col sm:flex-row sm:p-3 gap-10 sm:gap-30">
+        {/* 카드 영역 */}
+        <div className="w-full sm:w-auto flex justify-center relative">
+          {/* 로딩 스피너 */}
+          {isLoading && (
+            <div className="sm:w-[400px] absolute inset-0 flex justify-center items-center bg-white/80 z-10">
+              <Loading />
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 grid-rows-2 gap-6 sm:gap-x-10 sm:gap-y-0">
+            {!isLoading &&
+              results.map((poll, idx) => (
                 <div
                   key={poll.pollId}
                   className={`w-full ${!isMobile && idx % 2 === 1 ? 'mt-7' : ''}`}
@@ -107,43 +178,44 @@ const Comment = () => {
                   />
                 </div>
               ))}
-            </div>
           </div>
+        </div>
 
-          {/* 댓글 */}
-          <div className="flex-1 w-full h-[550px] border border-gray-300 rounded-2xl flex flex-col justify-between px-4 py-2">
-            {/* 스크롤 가능한 댓글 리스트 */}
-            <div className="flex-1 overflow-y-auto pr-2">
-              {comments.length === 0 ? (
-                // flex items-center justify-center h-full w-full
-                <div className="pl-10 w-full flex items-center justify-center h-full">
-                  <CharacterCard />
-                </div>
-              ) : (
-                <div className="flex flex-col items-center gap-2 w-full">
-                  {comments.map((comment, idx) => (
-                    <CommentCard
-                      key={idx}
-                      nickname={comment.random_nickname}
-                      comment={comment.comment_text}
-                    />
-                  ))}
-                </div>
-              )}
-            </div>
+        {/* 댓글 영역 */}
+        <div className=" flex-1 w-full h-[550px] border border-gray-300 rounded-2xl flex flex-col justify-between px-4 py-2">
+          {/* 스크롤 가능한 댓글 리스트 */}
+          <div className="flex-1 overflow-y-auto pr-2 max-h-[400px] sm:max-h-full">
+            {comments.length === 0 ? (
+              <div className="pl-10 w-full flex items-center justify-center h-full">
+                <CharacterCard />
+              </div>
+            ) : (
+              <div className="flex flex-col items-center gap-2 w-full">
+                {displayedComments.map((comment, idx) => (
+                  <CommentCard
+                    key={idx}
+                    nickname={comment.random_nickname}
+                    comment={comment.comment_text}
+                  />
+                ))}
 
-            {/* 고정된 입력창 */}
-            <div className="mt-4">
-              <CommentInputField
-                nickname="부드럽게 움직이는 황금도토리"
-                comment={commentText}
-                onChangeComment={(e) => setCommentText(e.target.value)}
-              />
-            </div>
+                <div ref={commentsEndRef} />
+              </div>
+            )}
+          </div>
+
+          {/* 고정된 입력창 */}
+          <div className="mt-4">
+            <CommentInputField
+              nickname={user.randomNickname}
+              comment={commentText}
+              onChangeComment={(e) => setCommentText(e.target.value)}
+              onSubmit={handleSubmitComment} // 이 부분 추가
+            />
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

react-app/src/pages/Comment.tsx

@@ -19,7 +19,7 @@ import toastReducer from './slices/toastSlice';
 const persistConfig = {
   key: 'root',
   storage,
-  whitelist: [],
+  whitelist: ['auth'],
 };
 
 // 모든 슬라이스 리듀서를 통합

react-app/src/store/index.ts

@@ -59,12 +59,19 @@ public ResponseEntity<Comment> getCommentById(@PathVariable("commentId") Integer
     })
     @PostMapping
     public ResponseEntity<String> insertComment(@RequestBody CommentRequest comment) {
+        System.out.println("------------------------------CONTROLLER-------------------------------------");
         System.out.println(comment);
-        if(comment.getUserId() == null){
-            return new ResponseEntity<String>("FAILED", HttpStatus.NOT_FOUND);
+        try {
+            if(comment.getUserId() == null){
+                return new ResponseEntity<String>("FAILED", HttpStatus.NOT_FOUND);
+            }
+            commentService.insertComment(comment);
+            return new ResponseEntity<String>("SUCCESS", HttpStatus.CREATED);
+
+        } catch (Exception e) {
+            e.printStackTrace();
+            return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("처리 중 오류 발생");
         }
-        commentService.insertComment(comment);
-        return new ResponseEntity<String>("SUCCESS", HttpStatus.CREATED);
     }
 
     @Operation(summary = "댓글 수정", description = "본인이 작성한 댓글 수정")