[이석찬]Sprint8

src/App.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import ItemsPage from "./pages/ItemsPage.jsx";
-import AddItem from "./pages/AddItem.jsx";
-import Nav from "./components/Nav.jsx";
-import ItemDetail from "./pages/ItemDetail.jsx";
+import ItemsPage from "./pages/ItemsPage.tsx";
+import AddItem from "./pages/AddItem.tsx";
+import Nav from "./components/Nav.tsx";
+import ItemDetail from "./pages/ItemDetail.tsx";
 import "./style.css";
 
 function App() {

src/components/AddImgForm.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useRef, ChangeEvent } from "react";
+import PlusIcon from "../asset/icon/ic_plus.png";
+import CloseIcon from "../asset/icon/ic_X.png";
+import styles from "./AddImgForm.module.css";
+
+interface AddImgFormProps {
+  label: string;
+}
+
+function AddImgForm({ label }: AddImgFormProps) {
+  const [imagePreviewUrl, setImagePreviewUrl] = useState<string>("");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  function handleImageChange(e: ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) {
+      const imageUrl = URL.createObjectURL(file);
+      setImagePreviewUrl(imageUrl);
+    }
+  }
+
+  function handleClick() {
+    fileInputRef.current?.click();
+  }
+
+  function handleRemoveImage() {
+    setImagePreviewUrl("");
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }
+
+  return (
+    <div>
+      <label>{label}</label>
+      <div className={styles["img-upload-container"]}>
+        <div
+          onClick={handleClick}
+          className={styles["img-upload-btn"]}
+          style={{ cursor: "pointer" }}
+        >
+          <img
+            src={PlusIcon}
+            alt="업로드 아이콘"
+            className={styles["plus-icon"]}
+          />
+          <p className={styles["img-upload-text"]}>이미지 등록</p>
+        </div>
+
+        {imagePreviewUrl && (
+          <div className={styles["img-preview-container"]}>
+            <img
+              src={imagePreviewUrl}
+              alt="미리보기"
+              className={styles["img-preview"]}
+            />
+            <img
+              src={CloseIcon}
+              alt="삭제 버튼"
+              onClick={handleRemoveImage}
+              className={styles["img-remove-button"]}
+              style={{ cursor: "pointer" }}
+            />
+          </div>
+        )}
+      </div>
+
+      <input
+        ref={fileInputRef}
+        id="img-upload"
+        type="file"
+        accept="image/*"
+        onChange={handleImageChange}
+        style={{ display: "none" }}
+      />
+    </div>
+  );
+}
+
+export default AddImgForm;

src/components/AddItemForm.jsx → src/components/AddItemForm.tsx

@@ -1,27 +1,42 @@
 import React from "react";
-import "./AddItemForm.css";
+import styles from "./AddItemForm.module.css";
+
+interface AddItemFormProps {
+  label: string;
+  type?: string;
+  placeholder: string;
+  id: string;
+  value: string;
+  onChange: (
+    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  isTextArea?: boolean;
+  onKeyDown?: (
+    event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+}
 
 function AddItemForm({
   label,
-  type,
+  type = "text",
   placeholder,
   id,
   value,
   onChange,
-  isTextArea,
+  isTextArea = false,
   onKeyDown,
-}) {
+}: AddItemFormProps) {
   return (
-    <div className="form-field">
+    <div className={styles["form-field"]}>
       <label htmlFor={id}>{label}</label>
       {isTextArea ? (
         <textarea
           id={id}
-          type={type}
           placeholder={placeholder}
           value={value}
           onChange={onChange}
           onKeyDown={onKeyDown}
+          className={styles["textarea"]}
         />
       ) : (
         <input
@@ -31,6 +46,7 @@ function AddItemForm({
           value={value}
           onChange={onChange}
           onKeyDown={onKeyDown}
+          className={styles["input"]}
         />
       )}
     </div>

src/components/AddTagForm.jsx → src/components/AddTagForm.tsx

@@ -1,12 +1,20 @@
-import React, { useState } from "react";
-import AddItemForm from "./AddItemForm";
+import React, { useState, KeyboardEvent } from "react";
+import AddItemForm from "./AddItemForm.tsx";
 import CloseIcon from "../asset/icon/ic_X.png";
-import "./AddTagForm.css";
+import styles from "./AddTagForm.module.css";
 
-function AddTagForm({ tags, onAddTag, onRemoveTag }) {
-  const [input, setInput] = useState("");
+interface AddTagFormProps {
+  tags: string[];
+  onAddTag: (tag: string) => void;
+  onRemoveTag: (tag: string) => void;
+}
+
+function AddTagForm({ tags, onAddTag, onRemoveTag }: AddTagFormProps) {
+  const [input, setInput] = useState<string>("");
 
-  const onPressEnter = (event) => {
+  function onPressEnter(
+    event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
+  ): void {
     if (event.nativeEvent.isComposing) return;
 
     const inputString = input.trim();
@@ -15,7 +23,7 @@ function AddTagForm({ tags, onAddTag, onRemoveTag }) {
       onAddTag(inputString);
       setInput("");
     }
-  };
+  }
 
   return (
     <div>
@@ -28,16 +36,16 @@ function AddTagForm({ tags, onAddTag, onRemoveTag }) {
         placeholder="태그를 입력해주세요"
       />
 
-      <div className="tag-buttons-section">
+      <div className={styles["tag-buttons-section"]}>
         {tags.map((tag) => (
-          <div key={`tag-${tag}`} className="tag">
-            <span className="tag-text">#{tag}</span>
+          <div key={`tag-${tag}`} className={styles["tag"]}>
+            <span className={styles["tag-text"]}>#{tag}</span>
             <img
               src={CloseIcon}
               alt="태그 삭제 버튼"
               onClick={() => onRemoveTag(tag)}
               aria-label={`${tag} 태그 삭제`}
-              className="tag-delete-button"
+              className={styles["tag-delete-button"]}
             />
           </div>
         ))}

src/components/DetailInquiry.jsx → src/components/DetailInquiry.tsx

@@ -1,39 +1,43 @@
-import React, { useState } from "react";
-import "./detailInquiry.css";
+import React, { useState, ChangeEvent } from "react";
+import styles from "./detailInquiry.module.css";
 
-function Inquiry() {
-  const [inputValue, setInputValue] = useState("");
+interface InquiryProps {}
 
-  const handleChange = (event) => {
+function Inquiry(props: InquiryProps) {
+  const [inputValue, setInputValue] = useState<string>("");
+
+  function handleChange(event: ChangeEvent<HTMLTextAreaElement>): void {
     setInputValue(event.target.value);
-  };
+  }
 
-  const handleSubmit = () => {
+  function handleSubmit(): void {
     if (inputValue.trim()) {
       alert(`문의 내용: ${inputValue}`);
       setInputValue("");
     }
-  };
+  }
 
   const isButtonEnabled = inputValue.trim().length > 0;
 
   return (
-    <div className="form-container">
-      <label htmlFor="inquiry" className="form-label">
+    <div className={styles["form-container"]}>
+      <label htmlFor="inquiry" className={styles["form-label"]}>
         문의하기
       </label>
       <textarea
-        className="form-textarea"
+        className={styles["form-textarea"]}
         id="inquiry"
         placeholder="개인정보를 공유 및 요청하거나, 명예 훼손, 무단 광고, 불법 정보 유포시 모니터링 후 삭제될 수 있으며, 이에 대한 민형사상 책임은 게시자에게 있습니다."
         value={inputValue}
         onChange={handleChange}
       />
-      <div className="button-container">
+      <div className={styles["button-container"]}>
         <button
-          className={`form-button ${isButtonEnabled ? "enabled" : "disabled"}`}
+          className={`${styles["form-button"]} ${
+            isButtonEnabled ? styles["enabled"] : styles["disabled"]
+          }`}
           onClick={handleSubmit}
-          disabled={!inputValue.trim()}
+          disabled={!isButtonEnabled}
         >
           등록
         </button>