Dev-FE-1 · HSjjs98 · Sep 18, 2024 · Sep 10, 2024 · Sep 10, 2024 · Sep 10, 2024
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
+    <link rel="preload" href="/src/assets/images/logo.svg" as="image" />
     <link rel="icon" type="image/svg+xml" href="/src/assets/images/favicon/favicon.svg" />
     <link rel="icon" href="/src/assets/images/favicon/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/api/fetchYouTubeVideoData.ts b/src/api/fetchYouTubeVideoData.ts
@@ -1,20 +1,25 @@
 export const fetchYouTubeVideoData = async (videoId: string) => {
   const apiKey = import.meta.env.VITE_YOUTUBE_API_KEY;
-  const response = await fetch(
-    `https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id=${videoId}&key=${apiKey}`,
-  );
+  try {
+    const response = await fetch(
+      `https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&id=${videoId}&key=${apiKey}`,
+    );
 
-  if (!response.ok) {
-    throw new Error('비디오 정보를 가져오는데 실패했습니다.');
-  }
+    if (!response.ok) {
+      throw new Error('비디오 정보를 가져오는데 실패했습니다. status:' + response.status);
+    }
 
-  const data = await response.json();
-  const videoDetails = data.items[0];
+    const data = await response.json();
+    const videoDetails = data.items[0];
 
-  return {
-    title: videoDetails.snippet.title,
-    creator: videoDetails.snippet.channelTitle,
-    uploadDate: videoDetails.snippet.publishedAt,
-    views: videoDetails.statistics.viewCount,
-  };
+    return {
+      title: videoDetails.snippet.title,
+      creator: videoDetails.snippet.channelTitle,
+      uploadDate: videoDetails.snippet.publishedAt,
+      views: videoDetails.statistics.viewCount,
+    };
+  } catch (error) {
+    console.error(error);
+    throw new Error('비디오 정보를 가져오는데 실패했습니다.');
+  }
 };
diff --git a/src/components/comment/CommentActions.tsx b/src/components/comment/CommentActions.tsx
diff --git a/src/components/comment/CommentInput.tsx b/src/components/comment/CommentInput.tsx
@@ -3,10 +3,12 @@ import { useEffect, useRef } from 'react';
 import { css, SerializedStyles } from '@emotion/react';
 import { HiOutlinePaperAirplane } from 'react-icons/hi2';
 
+import InputCount from '@/components/common/inputs/InputCount';
 import theme from '@/styles/theme';
 
 const INPUT_MIN_HEIGHT = 40;
 const INPUT_MAX_HEIGHT = INPUT_MIN_HEIGHT * 2;
+const MAX_LENGTH = 300;
 
 interface CommentInputProps {
   comment: string;
@@ -17,7 +19,7 @@ interface CommentInputProps {
   handleCompositionEnd: () => void;
 }
 
-export const CommentInput: React.FC<CommentInputProps> = ({
+const CommentInput: React.FC<CommentInputProps> = ({
   comment,
   onChange,
   onSubmit,
@@ -42,18 +44,34 @@ export const CommentInput: React.FC<CommentInputProps> = ({
     }
   };
 
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const inputValue = e.target.value.slice(0, MAX_LENGTH);
+    onChange(inputValue);
+  };
+
   return (
     <div css={[newCommentStyle, customStyle]}>
-      <textarea
-        ref={textareaRef}
-        value={comment}
-        onChange={(e) => onChange(e.target.value)}
-        onKeyDown={handleKeyDown}
-        placeholder="댓글을 작성해주세요"
-        onCompositionStart={handleCompositionStart}
-        onCompositionEnd={handleCompositionEnd}
-        data-testid="comment-input"
-      />
+      <div className="textarea-container">
+        <textarea
+          ref={textareaRef}
+          value={comment}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder="댓글을 작성해주세요"
+          onCompositionStart={handleCompositionStart}
+          onCompositionEnd={handleCompositionEnd}
+          data-testid="comment-input"
+          maxLength={MAX_LENGTH}
+        />
+        {comment.length > 0 && (
+          <InputCount
+            currentLength={comment.length}
+            maxLength={MAX_LENGTH}
+            customStyle={countStyle}
+          />
+        )}
+      </div>
+
       <button onClick={onSubmit}>
         <HiOutlinePaperAirplane />
       </button>
@@ -69,7 +87,15 @@ const newCommentStyle = css`
   border-radius: 12px;
   background-color: ${theme.colors.bgGray};
 
+  .textarea-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    width: 100%;
+  }
+
   textarea {
+    flex-grow: 1;
     width: 100%;
     min-height: ${INPUT_MIN_HEIGHT}px;
     max-height: ${INPUT_MAX_HEIGHT}px;
@@ -83,6 +109,7 @@ const newCommentStyle = css`
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
     padding: 8px 10px 12px;
     border: none;
     border-radius: 4px;
@@ -97,3 +124,10 @@ const newCommentStyle = css`
     }
   }
 `;
+
+const countStyle = css`
+  padding: 2px 0 8px;
+  text-align: right;
+`;
+
+export default CommentInput;
diff --git a/src/components/comment/CommentItem.tsx b/src/components/comment/CommentItem.tsx
@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { css } from '@emotion/react';
 import {
   HiOutlineEllipsisVertical,
@@ -9,11 +7,12 @@ import {
 } from 'react-icons/hi2';
 import { Link } from 'react-router-dom';
 
-import { CommentInput } from '@/components/comment/CommentInput';
+import CommentInput from '@/components/comment/CommentInput';
 import Avatar from '@/components/common/Avatar';
 import FitButton from '@/components/common/buttons/FitButton';
 import OptionModal from '@/components/common/modals/OptionModal';
 import { PATH } from '@/constants/path';
+import { useModalWithOverlay } from '@/hooks/useModalWithOverlay';
 import theme from '@/styles/theme';
 import { CommentModel } from '@/types/comment';
 import { formatCreatedAt } from '@/utils/date';
@@ -45,10 +44,11 @@ const CommentItem: React.FC<CommentItemProps> = ({
   handleCompositionStart,
   handleCompositionEnd,
 }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const handleOpenModal = () => setIsModalOpen(true);
-  const handleCloseModal = () => setIsModalOpen(false);
+  const {
+    isOpen: isModalOpen,
+    open: openModal,
+    close: closeModal,
+  } = useModalWithOverlay('commentOptionModal', comment.id);
 
   const modalOptions = [
     {
@@ -57,15 +57,15 @@ const CommentItem: React.FC<CommentItemProps> = ({
       onClick: () => {
         setEditingCommentId(comment.id);
         setEditingContent(comment.content);
-        handleCloseModal();
+        closeModal();
       },
     },
     {
       label: '댓글 삭제하기',
       Icon: HiOutlineTrash,
       onClick: () => {
         handleDeleteComment(comment.id);
-        handleCloseModal();
+        closeModal();
       },
     },
   ];
@@ -77,20 +77,20 @@ const CommentItem: React.FC<CommentItemProps> = ({
         <div css={headerStyle}>
           <div css={userInfoStyle}>
             <Link to={PATH.PROFILE.replace(':userId', comment.userId)}>
-              <span css={nameStyle}>{userData?.displayName || 'Unknown User'}</span>
+              <span css={nameStyle}>{userData?.displayName || ''}</span>
             </Link>
             <span css={timeStyle}>{formatCreatedAt(comment.createdAt)}</span>
           </div>
           {comment.userId === currentUserId && (
             <>
               <button
                 css={menuTriggerStyle}
-                onClick={handleOpenModal}
+                onClick={openModal}
                 data-testid="comment-vertical-button"
               >
                 <HiOutlineEllipsisVertical size={20} />
               </button>
-              <OptionModal isOpen={isModalOpen} onClose={handleCloseModal} options={modalOptions} />
+              <OptionModal isOpen={isModalOpen} onClose={closeModal} options={modalOptions} />
             </>
           )}
         </div>

diff --git a/src/components/comment/CommentSection.tsx b/src/components/comment/CommentSection.tsx
@@ -1,16 +1,17 @@
+import { useMemo } from 'react';
+
 import { css } from '@emotion/react';
 import { HiOutlineChatBubbleOvalLeft } from 'react-icons/hi2';
 
 import defaultProfile from '@/assets/images/default-avatar.svg';
+import CommentInput from '@/components/comment/CommentInput';
+import CommentItem from '@/components/comment/CommentItem';
 import Avatar from '@/components/common/Avatar';
 import EmptyMessage from '@/components/EmptyMessage';
 import { useComments } from '@/hooks/useComments';
 import { useMultipleUsersData } from '@/hooks/useMultipleUsersData';
 import { useUserData } from '@/hooks/useUserData';
 
-import { CommentInput } from './CommentInput';
-import CommentItem from './CommentItem';
-
 interface CommentSectionProps {
   postId: string;
 }
@@ -32,7 +33,10 @@ const CommentSection: React.FC<CommentSectionProps> = ({ postId }) => {
     handleCompositionEnd,
   } = useComments(postId || '');
 
-  const userIds = Array.from(new Set(comments.map((comment) => comment.userId)));
+  const userIds = useMemo(() => {
+    return Array.from(new Set(comments.map((comment) => comment.userId)));
+  }, [comments]);
+
   const { userData: currentUserData } = useUserData(currentUser?.uid || null);
   const { usersData } = useMultipleUsersData(userIds);
 

diff --git a/src/components/common/inputs/BaseInput.tsx b/src/components/common/inputs/BaseInput.tsx
@@ -1,7 +1,8 @@
 import { ChangeEvent, ReactNode } from 'react';
 
-import { SerializedStyles } from '@emotion/react';
+import { css, SerializedStyles } from '@emotion/react';
 
+import InputCount from '@/components/common/inputs/InputCount';
 import { commonInputContainerStyle, errorMessageStyle } from '@/styles/input';
 
 export interface CommonInputProps {
@@ -11,28 +12,49 @@ export interface CommonInputProps {
   label?: string;
   placeholder?: string;
   errorMessage?: string | null;
+  maxLength?: number;
   customStyle?: SerializedStyles;
 }
 
 interface BaseInputProps extends Partial<CommonInputProps> {
   children: ReactNode;
+  currentLength?: number;
 }
 
-const BaseInput: React.FC<BaseInputProps> = ({ label, errorMessage = null, id, children }) => {
+const BaseInput: React.FC<BaseInputProps> = ({
+  label,
+  errorMessage = null,
+  id,
+  currentLength,
+  maxLength,
+  children,
+}) => {
   return (
     <label css={commonInputContainerStyle} htmlFor={id}>
       {label && <span className="input-label">{label}</span>}
       <div className="input-wrapper">
         {children}
-
-        {errorMessage && (
-          <p className="error" css={errorMessageStyle}>
-            {errorMessage}
-          </p>
+        {maxLength && typeof currentLength === 'number' && (
+          <InputCount
+            currentLength={currentLength}
+            maxLength={maxLength}
+            customStyle={countStyle}
+          />
         )}
       </div>
+      {errorMessage && (
+        <p className="error" css={errorMessageStyle}>
+          {errorMessage}
+        </p>
+      )}
     </label>
   );
 };
 
+const countStyle = css`
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+`;
+
 export default BaseInput;