[이경원] sprint8

package.json

@@ -6,13 +6,18 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
     "axios": "^1.6.8",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.8",
+    "typescript": "^5.4.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/CommentInput.js → src/components/CommentInput.tsx

@@ -1,9 +1,14 @@
-import React, { useState } from "react";
+import React, { useState, ChangeEvent } from "react";
 import styled from "styled-components";
-function CommentInput() {
-  const [comment, setComment] = useState("");
 
-  const handleInputChange = (event) => {
+interface RegisterButtonProps {
+  isEnabled: boolean;
+}
+
+function CommentInput(): JSX.Element {
+  const [comment, setComment] = useState<string>("");
+
+  const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>): void => {
     setComment(event.target.value);
   };
 
@@ -65,7 +70,7 @@ const InputArea = styled.textarea`
     }
   }
 `;
-const RegisterButton = styled.button`
+const RegisterButton = styled.button<RegisterButtonProps>`
   display: flex;
   flex-direction: row;
   justify-content: center;

src/components/CommentList.js → src/components/CommentList.tsx

@@ -5,8 +5,16 @@ import axios from "axios";
 import noneComments from "../images/noneComments.svg";
 import dots from "../images/3dots.svg";
 
+interface Comment {
+  id: number;
+  content: string;
+  image: string;
+  nickname: string;
+  updatedAt: string;
+}
+
 function CommentList() {
-  const [comments, setComments] = useState(null);
+  const [comments, setComments] = useState<Comment[]>([]);
   const { productId } = useParams();
 
   const getComments = async (productId) => {

src/components/FileInput.js → src/components/FileInput.tsx

@@ -1,10 +1,17 @@
-import { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import X from "../images/ic_X.svg";
 import plus from "../images/ic_plus.svg";
-function FileInput({ name, value, initialPreview, onChange }) {
+
+interface FileInputProps {
+  name: string;
+  value: File | null;
+  initialPreview?: string;
+  onChange: (name: string, nextName: string | null) => void;
+}
+function FileInput({ name, value, initialPreview, onChange }: FileInputProps) {
   const [preview, setPreview] = useState(initialPreview);
-  const inputRef = useRef();
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const handleChange = (e) => {
     const nextValue = e.target.files[0];
@@ -43,8 +50,10 @@ function FileInput({ name, value, initialPreview, onChange }) {
         <InputText>이미지 등록</InputText>
       </InputWrapper>
       <Container1>
-        {value && <Image src={preview} alt="이미지 등록"></Image>}
-        {value && <Delete onClick={handleClearClick} src={X}></Delete>}
+        <>
+          {value && <Image src={preview} alt="이미지 등록"></Image>}
+          {value && <Delete onClick={handleClearClick} src={X}></Delete>}
+        </>
       </Container1>
     </Container>
   );

src/components/TagInput.js → src/components/TagInput.tsx

@@ -2,32 +2,47 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import DeleteIcon from "../images/ic_X_gray.svg";
 
-const InputTag = ({ tags, setTags, setIsTagsEmpty }) => {
+interface TagInputProps {
+  tags: string[];
+  setTags: React.Dispatch<React.SetStateAction<string[]>>;
+  setIsTagsEmpty?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
+  placeholder?: string;
+}
+const TagInput = ({
+  tags,
+  setTags,
+  setIsTagsEmpty,
+  placeholder,
+}: TagInputProps) => {
   const [inputValue, setInputValue] = useState("");
 
-  const handleInputChange = (e) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
 
-  const handleInputKeyDown = (e) => {
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && inputValue.trim() !== "") {
       setTags([...tags, inputValue.trim()]);
       e.preventDefault();
       setInputValue("");
-      setIsTagsEmpty(false);
+      if (setIsTagsEmpty) {
+        setIsTagsEmpty(false);
+      }
     }
   };
 
   const handleTagDelete = (index) => {
     const newTags = [...tags];
     newTags.splice(index, 1);
     setTags(newTags);
-    setIsTagsEmpty(newTags.length === 0);
+    if (setIsTagsEmpty) {
+      setIsTagsEmpty(newTags.length === 0);
+    }
   };
 
   return (
     <InputTagContainer>
-      <TagInput
+      <InputTag
         type="tag"
         value={inputValue}
         onChange={handleInputChange}
@@ -54,7 +69,7 @@ const InputTagContainer = styled.div`
   align-items: flex-start;
 `;
 
-const TagInput = styled.input`
+const InputTag = styled.input`
   width: 100%;
   height: 56px;
   background: #f3f4f6;
@@ -111,4 +126,4 @@ const CloseIcon = styled.img`
   width: 20px;
   height: 20px;
 `;
-export default InputTag;
+export default TagInput;