From 46134caa40b14088bb627fb95052c1709b4ed0ac Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Sat, 22 Mar 2025 18:17:19 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Design:=20=ED=8C=8C=EC=9D=BC=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=99=84=EB=A3=8C=20(#19)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image/upload.svg                   |   4 +
 .../FileUploadPage/FileUploadPage.style.ts    | 187 ++++++++++++++++++
 src/pages/FileUploadPage/FileUploadPage.tsx   |  63 +++++-
 3 files changed, 253 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/image/upload.svg

diff --git a/src/assets/image/upload.svg b/src/assets/image/upload.svg
new file mode 100644
index 0000000..e10b989
--- /dev/null
+++ b/src/assets/image/upload.svg
@@ -0,0 +1,4 @@
+<svg width="121" height="120" viewBox="0 0 121 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60.5" cy="60" r="60" fill="#F1F8FD"/>
+<path d="M60.5 34.4C46.42 34.4 34.9 45.92 34.9 60C34.9 74.08 46.42 85.6 60.5 85.6C74.58 85.6 86.1 74.08 86.1 60C86.1 45.92 74.58 34.4 60.5 34.4ZM72.82 57.92C72.5 58.24 72.18 58.4 71.7 58.4C71.22 58.4 70.9 58.24 70.58 57.92L62.1 49.44L62.1 74.4C62.1 75.36 61.46 76 60.5 76C59.54 76 58.9 75.36 58.9 74.4L58.9 49.44L50.42 57.92C49.78 58.56 48.82 58.56 48.18 57.92C47.54 57.28 47.54 56.32 48.18 55.68L59.38 44.48C59.54 44.32 59.7 44.16 59.86 44.16C60.18 44 60.66 44 61.14 44.16C61.3 44.32 61.46 44.32 61.62 44.48L72.82 55.68C73.46 56.32 73.46 57.28 72.82 57.92Z" fill="#379AE6"/>
+</svg>
diff --git a/src/pages/FileUploadPage/FileUploadPage.style.ts b/src/pages/FileUploadPage/FileUploadPage.style.ts
index e69de29..89be132 100644
--- a/src/pages/FileUploadPage/FileUploadPage.style.ts
+++ b/src/pages/FileUploadPage/FileUploadPage.style.ts
@@ -0,0 +1,187 @@
+import styled from "styled-components";
+
+export const StyledFileUploadPage = styled.div`
+  margin-top: 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 20px;
+  .title {
+    color: #171a1f;
+    font-family: Archivo;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 48px; /* 150% */
+    text-align: start;
+  }
+`;
+
+export const FileUploadContent = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: start;
+  gap: 30px;
+`;
+
+export const FileUpload = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  width: 55vh;
+  height: 25vw;
+  flex-shrink: 0;
+  border-radius: 16px;
+  border: 0px solid #9095a1;
+  background: #fff;
+  box-shadow: 0px 0px 2px 0px rgba(23, 26, 31, 0.12),
+    0px 4px 9px 0px rgba(23, 26, 31, 0.11);
+  gap: 20%;
+
+  .text {
+    color: #379ae6;
+    text-align: center;
+    font-family: Archivo;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 28px; /* 155.556% */
+  }
+`;
+
+export const FileUploadDescription = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  justify-content: center;
+  gap: 16px;
+  margin-left: 16px;
+
+  .ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .li {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+
+  .title {
+    color: #424856;
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px; /* 155.556% */
+    margin-bottom: 5px;
+  }
+
+  .name_input {
+    padding: 10px;
+    width: 40vw;
+    border-radius: 6px 6px 0px 0px;
+    border: 0px solid rgba(0, 0, 0, 0);
+    background: #fff;
+    color: #171a1f;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 26px; /* 162.5% */
+  }
+
+  .price_input {
+    padding: 10px;
+    width: 20vw;
+    border-radius: 6px 6px 0px 0px;
+    border: 0px solid rgba(0, 0, 0, 0);
+    background: #fff;
+    color: #171a1f;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 26px; /* 162.5% */
+  }
+
+  .div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .textarea {
+    color: #171a1f;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 26px; /* 162.5% */
+    padding: 10px;
+    width: 40vw;
+    border-radius: 6px 6px 0px 0px;
+    border: 0px solid rgba(0, 0, 0, 0);
+    background: #fff;
+  }
+
+  .select {
+    color: #171a1f;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 26px; /* 162.5% */
+    padding: 10px;
+    width: 40vw;
+    border-radius: 6px 6px 0px 0px;
+    border: 0px solid rgba(0, 0, 0, 0);
+    background: #fff;
+  }
+
+  .description {
+    color: #323743;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+
+    line-height: 22px;
+    margin-top: 8px;
+    margin-bottom: 30px;
+  }
+
+  hr {
+    stroke-width: 1px;
+    stroke: #bdc1ca;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .button {
+    display: flex;
+    width: 513px;
+    padding: 12px 216px 12px 209px;
+    align-items: center;
+    border-radius: 6px;
+    border: 1px solid rgba(0, 0, 0, 0);
+    background: #636ae8;
+    color: #fff;
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px; /* 155.556% */
+  }
+
+  .button:hover {
+    background: #4f55c1;
+  }
+`;
diff --git a/src/pages/FileUploadPage/FileUploadPage.tsx b/src/pages/FileUploadPage/FileUploadPage.tsx
index 1e546fe..c6dadc2 100644
--- a/src/pages/FileUploadPage/FileUploadPage.tsx
+++ b/src/pages/FileUploadPage/FileUploadPage.tsx
@@ -1,5 +1,66 @@
+import NavBar from "@/components/NavBar/NavBar";
+import * as S from "@/pages/FileUploadPage/FileUploadPage.style";
+import upload from "@/assets/image/upload.svg";
+
 const FileUploadPage = () => {
-  return <h1>FileUploadPage</h1>;
+  return (
+    <>
+      <NavBar />
+      <S.StyledFileUploadPage>
+        <div className="title">새 자료 업로드</div>
+        <S.FileUploadContent>
+          <S.FileUpload>
+            <img src={upload} alt="upload" />
+            <span className="text">클릭하거나 파일을 드래그 하여 업로드</span>
+          </S.FileUpload>
+          <S.FileUploadDescription>
+            <form>
+              <ul className="ul">
+                <li className="li">
+                  <label htmlFor="fileName" className="title">
+                    자료명
+                  </label>
+                  <input type="text" id="fileName" className="name_input" />
+                </li>
+                <li className="li">
+                  <label htmlFor="fileCategory" className="title">
+                    카테고리
+                  </label>
+                  <select id="fileCategory" className="select">
+                    <option value="0">카테고리 선택</option>
+                    <option value="1">카테고리1</option>
+                    <option value="2">카테고리2</option>
+                    <option value="3">카테고리3</option>
+                  </select>
+                </li>
+                <li className="li">
+                  <label htmlFor="filePrice" className="title price">
+                    가격
+                  </label>
+                  <div className="div">
+                    <input
+                      type="number"
+                      id="filePrice"
+                      className="price_input"
+                    />
+                    &nbsp;XRP
+                  </div>
+                </li>
+                <li className="li">
+                  <label htmlFor="fileDes" className="title">
+                    자료 설명
+                  </label>
+                  <textarea id="fileDes" className="textarea" />
+                </li>
+              </ul>
+              <hr />
+              <button className="button"> 자료 업로드</button>
+            </form>
+          </S.FileUploadDescription>
+        </S.FileUploadContent>
+      </S.StyledFileUploadPage>
+    </>
+  );
 };
 
 export default FileUploadPage;

From 77eb42101c90f7aafa33c61429c68d563fbf744d Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Sat, 22 Mar 2025 21:06:09 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Feat:=20=ED=8C=8C=EC=9D=BC=20=EB=93=9C?=
 =?UTF-8?q?=EB=9E=98=EA=B7=B8=20=EC=95=A4=20=EB=93=9C=EB=9E=8D=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20=20(#19)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/image/remove.svg                   |  14 ++
 src/pages/FileUploadPage/FileUpload.style.ts  |  92 ++++++++++
 src/pages/FileUploadPage/FileUpload.tsx       | 157 ++++++++++++++++++
 .../FileUploadPage/FileUploadPage.style.ts    |  27 ---
 src/pages/FileUploadPage/FileUploadPage.tsx   |   7 +-
 5 files changed, 265 insertions(+), 32 deletions(-)
 create mode 100644 src/assets/image/remove.svg
 create mode 100644 src/pages/FileUploadPage/FileUpload.style.ts
 create mode 100644 src/pages/FileUploadPage/FileUpload.tsx

diff --git a/src/assets/image/remove.svg b/src/assets/image/remove.svg
new file mode 100644
index 0000000..f7f227e
--- /dev/null
+++ b/src/assets/image/remove.svg
@@ -0,0 +1,14 @@
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="E remove 1">
+<g id="Group">
+<g id="Group_2">
+<g id="Group_3">
+<path id="Vector" d="M25.3 7.19995L7.7 24.8" stroke="#323743" stroke-width="1.92" stroke-miterlimit="10" stroke-linecap="square"/>
+</g>
+<g id="Group_4">
+<path id="Vector_2" d="M25.3 24.8L7.7 7.19995" stroke="#323743" stroke-width="1.92" stroke-miterlimit="10" stroke-linecap="square"/>
+</g>
+</g>
+</g>
+</g>
+</svg>
diff --git a/src/pages/FileUploadPage/FileUpload.style.ts b/src/pages/FileUploadPage/FileUpload.style.ts
new file mode 100644
index 0000000..990c1be
--- /dev/null
+++ b/src/pages/FileUploadPage/FileUpload.style.ts
@@ -0,0 +1,92 @@
+import styled from "styled-components";
+
+export const UploadWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 55vh;
+  height: 330px;
+  flex-shrink: 0;
+  border-radius: 16px;
+  border: 0px solid #9095a1;
+  background: #fff;
+  box-shadow: 0px 0px 2px 0px rgba(23, 26, 31, 0.12),
+    0px 4px 9px 0px rgba(23, 26, 31, 0.11);
+
+  .desdiv {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    height: 200px;
+    gap: 20%;
+  }
+
+  .text {
+    color: #379ae6;
+    text-align: center;
+    font-family: Archivo;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 28px; /* 155.556% */
+  }
+
+  .UploadWrapperActive {
+    background: #0000000f;
+    width: 400px;
+    height: 200px;
+    border: 2px dotted black;
+    opacity: 0.7;
+  }
+
+  .UploadArea {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .FileContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: start;
+    margin-top: 10px;
+    gap: 2px;
+  }
+
+  .UploadFile {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 5px;
+    background-color: #0000000f;
+    border-radius: 5px;
+  }
+
+  .Filename {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .DeleteBtn {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    vertical-align: center;
+  }
+
+  .DeleteBtn:hover {
+    cursor: pointer;
+  }
+`;
diff --git a/src/pages/FileUploadPage/FileUpload.tsx b/src/pages/FileUploadPage/FileUpload.tsx
new file mode 100644
index 0000000..0a90d76
--- /dev/null
+++ b/src/pages/FileUploadPage/FileUpload.tsx
@@ -0,0 +1,157 @@
+import * as S from "@/pages/FileUploadPage/FileUpload.style";
+import { ChangeEvent, useCallback, useRef, useState, useEffect } from "react";
+import upload from "@/assets/image/upload.svg";
+import remove from "@/assets/image/remove.svg";
+
+interface FileFormat {
+  id: number;
+  content: File;
+}
+
+const Upload = () => {
+  const [files, setFiles] = useState<FileFormat[]>([]);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const dragRef = useRef<HTMLLabelElement | null>(null);
+  const fileId = useRef<number>(0);
+
+  const onChangeFiles = useCallback(
+    (e: ChangeEvent<HTMLInputElement> | any): void => {
+      let selectFiles: File[] = [];
+      let tempFiles: FileFormat[] = [];
+
+      e.type === "drop"
+        ? (selectFiles = e.dataTransfer.files)
+        : (selectFiles = e.target.files);
+
+      // 새로운 파일을 하나만 추가
+      const file = selectFiles[0];
+      if (file) {
+        tempFiles = [
+          {
+            id: fileId.current++,
+            content: file,
+          },
+        ];
+        setFiles(tempFiles);
+      }
+    },
+    []
+  );
+
+  const handleLabelClick = (e: any) => {
+    e.preventDefault();
+  };
+
+  const handleDeleteFile = useCallback(
+    (id: number): void => {
+      setFiles(files.filter((file: FileFormat) => file.id !== id));
+    },
+    [files]
+  );
+
+  const handleDragIn = useCallback((e: DragEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDragOut = useCallback((e: DragEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsDragging(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: DragEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (e.dataTransfer!.files) {
+      setIsDragging(true);
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: DragEvent): void => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      onChangeFiles(e);
+      setIsDragging(false);
+    },
+    [onChangeFiles]
+  );
+
+  const initDragEvents = useCallback((): void => {
+    if (dragRef.current !== null) {
+      dragRef.current.addEventListener("dragenter", handleDragIn);
+      dragRef.current.addEventListener("dragleave", handleDragOut);
+      dragRef.current.addEventListener("dragover", handleDragOver);
+      dragRef.current.addEventListener("drop", handleDrop);
+    }
+  }, [handleDragIn, handleDragOut, handleDragOver, handleDrop]);
+
+  const resetDragEvents = useCallback((): void => {
+    if (dragRef.current !== null) {
+      dragRef.current.removeEventListener("dragenter", handleDragIn);
+      dragRef.current.removeEventListener("dragleave", handleDragOut);
+      dragRef.current.removeEventListener("dragover", handleDragOver);
+      dragRef.current.removeEventListener("drop", handleDrop);
+    }
+  }, [handleDragIn, handleDragOut, handleDragOver, handleDrop]);
+
+  useEffect(() => {
+    initDragEvents();
+    return () => resetDragEvents();
+  }, [initDragEvents, resetDragEvents]);
+
+  return (
+    <S.UploadWrapper>
+      <div
+        className={`${isDragging ? "UploadWrapperActive" : "UploadWrapper"}`}
+      >
+        <label
+          className="UploadArea"
+          htmlFor="fileUpload"
+          ref={dragRef}
+          onClick={handleLabelClick}
+        >
+          {files.length === 0 ? (
+            <div className="desdiv">
+              <img src={upload} alt="upload" />
+              <span className="text">파일을 드래그 하여 업로드</span>
+            </div>
+          ) : (
+            ""
+          )}
+        </label>
+      </div>
+
+      <div className="FileContainer">
+        {files.length > 0 &&
+          files.map((file: FileFormat) => {
+            const {
+              id,
+              content: { name },
+            } = file;
+
+            return (
+              <div className="UploadFile" key={id}>
+                <div className="Filename">{name} </div>
+                <div className="DeleteBtn" onClick={() => handleDeleteFile(id)}>
+                  <img src={remove} alt="remove" />
+                </div>
+              </div>
+            );
+          })}
+      </div>
+      <input
+        type="file"
+        id="fileUpload"
+        style={{ display: "none" }}
+        onChange={onChangeFiles} // 하나의 파일만 추가
+      />
+    </S.UploadWrapper>
+  );
+};
+
+export default Upload;
diff --git a/src/pages/FileUploadPage/FileUploadPage.style.ts b/src/pages/FileUploadPage/FileUploadPage.style.ts
index 89be132..b09803c 100644
--- a/src/pages/FileUploadPage/FileUploadPage.style.ts
+++ b/src/pages/FileUploadPage/FileUploadPage.style.ts
@@ -24,33 +24,6 @@ export const FileUploadContent = styled.div`
   gap: 30px;
 `;
 
-export const FileUpload = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  width: 55vh;
-  height: 25vw;
-  flex-shrink: 0;
-  border-radius: 16px;
-  border: 0px solid #9095a1;
-  background: #fff;
-  box-shadow: 0px 0px 2px 0px rgba(23, 26, 31, 0.12),
-    0px 4px 9px 0px rgba(23, 26, 31, 0.11);
-  gap: 20%;
-
-  .text {
-    color: #379ae6;
-    text-align: center;
-    font-family: Archivo;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 28px; /* 155.556% */
-  }
-`;
-
 export const FileUploadDescription = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/src/pages/FileUploadPage/FileUploadPage.tsx b/src/pages/FileUploadPage/FileUploadPage.tsx
index c6dadc2..e6fbc3b 100644
--- a/src/pages/FileUploadPage/FileUploadPage.tsx
+++ b/src/pages/FileUploadPage/FileUploadPage.tsx
@@ -1,6 +1,6 @@
 import NavBar from "@/components/NavBar/NavBar";
 import * as S from "@/pages/FileUploadPage/FileUploadPage.style";
-import upload from "@/assets/image/upload.svg";
+import Upload from "./FileUpload";
 
 const FileUploadPage = () => {
   return (
@@ -9,10 +9,7 @@ const FileUploadPage = () => {
       <S.StyledFileUploadPage>
         <div className="title">새 자료 업로드</div>
         <S.FileUploadContent>
-          <S.FileUpload>
-            <img src={upload} alt="upload" />
-            <span className="text">클릭하거나 파일을 드래그 하여 업로드</span>
-          </S.FileUpload>
+          <Upload />
           <S.FileUploadDescription>
             <form>
               <ul className="ul">

From 73724354f5b911d3e82a70a4c6473f35df7c79c7 Mon Sep 17 00:00:00 2001
From: Eunjin Oh <ibsuny3214@naver.com>
Date: Sat, 22 Mar 2025 21:10:14 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Feat:=20=EC=9E=90=EB=A3=8C=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=20(#1?=
 =?UTF-8?q?9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/FileUploadPage/FileUploadPage.tsx | 55 ++++++++++++++++++---
 1 file changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/pages/FileUploadPage/FileUploadPage.tsx b/src/pages/FileUploadPage/FileUploadPage.tsx
index e6fbc3b..f6cf330 100644
--- a/src/pages/FileUploadPage/FileUploadPage.tsx
+++ b/src/pages/FileUploadPage/FileUploadPage.tsx
@@ -1,8 +1,24 @@
 import NavBar from "@/components/NavBar/NavBar";
 import * as S from "@/pages/FileUploadPage/FileUploadPage.style";
 import Upload from "./FileUpload";
+import { useState } from "react";
 
 const FileUploadPage = () => {
+  // 상태 선언
+  const [fileName, setFileName] = useState("");
+  const [fileCategory, setFileCategory] = useState("0");
+  const [filePrice, setFilePrice] = useState("");
+  const [fileDescription, setFileDescription] = useState("");
+
+  // form 제출 시 데이터 출력
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault(); // 기본 폼 제출 동작 방지
+    console.log("자료명:", fileName);
+    console.log("카테고리:", fileCategory);
+    console.log("가격:", filePrice);
+    console.log("자료 설명:", fileDescription);
+  };
+
   return (
     <>
       <NavBar />
@@ -11,23 +27,37 @@ const FileUploadPage = () => {
         <S.FileUploadContent>
           <Upload />
           <S.FileUploadDescription>
-            <form>
+            <form onSubmit={handleSubmit}>
               <ul className="ul">
                 <li className="li">
                   <label htmlFor="fileName" className="title">
                     자료명
                   </label>
-                  <input type="text" id="fileName" className="name_input" />
+                  <input
+                    type="text"
+                    id="fileName"
+                    className="name_input"
+                    value={fileName}
+                    onChange={(e) => setFileName(e.target.value)}
+                  />
                 </li>
                 <li className="li">
                   <label htmlFor="fileCategory" className="title">
                     카테고리
                   </label>
-                  <select id="fileCategory" className="select">
+                  <select
+                    id="fileCategory"
+                    className="select"
+                    value={fileCategory}
+                    onChange={(e) => setFileCategory(e.target.value)}
+                  >
                     <option value="0">카테고리 선택</option>
-                    <option value="1">카테고리1</option>
-                    <option value="2">카테고리2</option>
-                    <option value="3">카테고리3</option>
+                    <option value="1">시험 자료</option>
+                    <option value="2">자소서</option>
+                    <option value="3">이력서</option>
+                    <option value="4">레포트</option>
+                    <option value="5">악보</option>
+                    <option value="6">기타</option>
                   </select>
                 </li>
                 <li className="li">
@@ -39,6 +69,8 @@ const FileUploadPage = () => {
                       type="number"
                       id="filePrice"
                       className="price_input"
+                      value={filePrice}
+                      onChange={(e) => setFilePrice(e.target.value)}
                     />
                     &nbsp;XRP
                   </div>
@@ -47,11 +79,18 @@ const FileUploadPage = () => {
                   <label htmlFor="fileDes" className="title">
                     자료 설명
                   </label>
-                  <textarea id="fileDes" className="textarea" />
+                  <textarea
+                    id="fileDes"
+                    className="textarea"
+                    value={fileDescription}
+                    onChange={(e) => setFileDescription(e.target.value)}
+                  />
                 </li>
               </ul>
               <hr />
-              <button className="button"> 자료 업로드</button>
+              <button className="button" type="submit">
+                자료 업로드
+              </button>
             </form>
           </S.FileUploadDescription>
         </S.FileUploadContent>