diff --git a/index.html b/index.html index 0d56746..e983fec 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + diff --git a/package-lock.json b/package-lock.json index 525a00d..4926afc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7918,6 +7918,12 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", "license": "MIT" }, + "node_modules/path-to-regexp": { + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", + "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==", + "license": "MIT" + }, "node_modules/path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -9580,9 +9586,9 @@ } }, "node_modules/vite": { - "version": "5.4.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz", - "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==", + "version": "5.4.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz", + "integrity": "sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==", "dev": true, "license": "MIT", "dependencies": { diff --git a/src/api/fetchYouTubeVideoData.ts b/src/api/fetchYouTubeVideoData.ts index e60d135..72c9c05 100644 --- 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 deleted file mode 100644 index dd86f79..0000000 --- a/src/components/comment/CommentActions.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { css } from '@emotion/react'; - -interface CommentActionsProps { - onEdit: () => void; - onDelete: () => void; -} - -const CommentActions: React.FC = ({ onEdit, onDelete }) => { - return ( -
- - -
- ); -}; - -const commentActionsStyle = css` - display: flex; - gap: 8px; - margin-top: 4px; -`; - -export default CommentActions; diff --git a/src/components/comment/CommentInput.tsx b/src/components/comment/CommentInput.tsx index af5171d..6047475 100644 --- 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 = ({ +const CommentInput: React.FC = ({ comment, onChange, onSubmit, @@ -42,18 +44,34 @@ export const CommentInput: React.FC = ({ } }; + const handleChange = (e: React.ChangeEvent) => { + const inputValue = e.target.value.slice(0, MAX_LENGTH); + onChange(inputValue); + }; + return (
-