diff --git a/backend/app.js b/backend/app.js
index 92a0005cf6849f218554f32f3b2afd99359b2a2e..ca0dc6d6bea109080fd4b8536f345345dab3178d 100644
--- a/backend/app.js
+++ b/backend/app.js
@@ -8,6 +8,7 @@ var flash = require("connect-flash");
 var expressSession = require("express-session");
 var bodyParser = require("body-parser");
 const cors = require("cors");
+var multer = require("multer");
 
 const mongoose = require("mongoose");
 const mongooseAutoInc = require("mongoose-auto-increment");
@@ -24,11 +25,21 @@ mongooseAutoInc.initialize(mongoose.connection);
 var usersRouter = require("./routes/users");
 
 var app = express();
+// app.all("/*", function (req, res, next) {
+//   //이미지 권한문제의 핵심 나중에 서버쪽 사람들한테 이걸 붙이라고 해라!!!!!!!!!!!!!//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+//   res.header("Access-Control-Allow-Origin", "*");
+//   res.header("Access-Control-Allow-Headers", "X-Requested-With");
+//   next();
+// });
+app.use(cors({ origin: "http://localhost:3000", credentials: true }));
+// app.use(cors());
+// app.options("*", cors());
+
 app.use(bodyParser.json({ type: "application/json" }));
-app.use(bodyParser.urlencoded({ extended: true }));
-// view engine setup
-app.set("views", path.join(__dirname, "views"));
-app.set("view engine", "jade");
+app.use(bodyParser.urlencoded({ extended: false }));
+// // view engine setup
+// app.set("views", path.join(__dirname, "views"));
+// app.set("view engine", "jade");
 
 app.use(logger("dev"));
 app.use(express.json());
@@ -42,19 +53,26 @@ app.use(
     //cookie: { maxAge: 30000, secure: false, httpOnly: false },
   })
 );
-//app.use(cors({ origin: "http://localhost:3000", credentials: true }));
-app.use(cors());
-app.options("*", cors());
 app.use(express.static(path.join(__dirname, "public")));
-app.use(passport.initialize());
-app.use(passport.session());
-app.use(flash());
+app.use("/uploads", express.static(path.join(__dirname, "uploads")));
+// app.use(passport.initialize());
+// app.use(passport.session());
+// app.use(flash());
 
-var UserModel = require("./models/user");
-const { POINT_CONVERSION_COMPRESSED } = require("constants");
-const { doesNotMatch } = require("assert");
+// var storage = multer.diskStorage({
+//   destination: function (req, file, callback) {
+//     callback(null, "uploads");
+//   },
+//   filename: function (req, file, callback) {
+//     var extension = path.extname(file.originalname);
+//     var basename = path.basename(file.originalname, extension);
+//     callback(null, basename + Date.now() + extension);
+//   },
+// });
 
-let LocalStrategy = require("passport-local").Strategy;
+// var upload = multer({
+//   storage: storage,
+// });
 
 //app.use("/", indexRouter);
 app.use("/", usersRouter);
diff --git a/backend/models/board.js b/backend/models/board.js
index c72e07e39baebbe2d9b5249f7eec28054fb50c3b..09d270d4dde17b9c09af274d3fec1a807297407e 100644
--- a/backend/models/board.js
+++ b/backend/models/board.js
@@ -6,6 +6,7 @@ const BoardSchema = new mongoose.Schema({
   content: { type: String, required: true },
   hobby: { type: String },
   created_at: { type: Date, default: Date.now },
+  picture: { type: String },
 });
 
 // mongoose.connect("mongodb://localhost:27017/local", {
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 9de4edc4939338e95e75a296068d3c8d47c39295..e6346a9e286d8cb89d045c10ae21f50e8ede73e0 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -41,6 +41,11 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY="
+    },
     "array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -95,6 +100,43 @@
       "resolved": "https://registry.npmjs.org/bson/-/bson-1.1.5.tgz",
       "integrity": "sha512-kDuEzldR21lHciPQAIulLs1LZlCXdLziXI6Mb/TDkwXhb//UORJNPXgcRs2CuO4H0DcMkpfT3/ySsP3unoZjBg=="
     },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "busboy": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
+      "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=",
+      "requires": {
+        "dicer": "0.2.5",
+        "readable-stream": "1.1.x"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
@@ -160,6 +202,17 @@
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
       "integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0="
     },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
     "connect-flash": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/connect-flash/-/connect-flash-0.1.1.tgz",
@@ -263,6 +316,38 @@
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
     },
+    "dicer": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz",
+      "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=",
+      "requires": {
+        "readable-stream": "1.1.x",
+        "streamsearch": "0.1.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "dotenv": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
@@ -638,6 +723,21 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "multer": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.2.tgz",
+      "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==",
+      "requires": {
+        "append-field": "^1.0.0",
+        "busboy": "^0.2.11",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.1",
+        "on-finished": "^2.3.0",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -892,6 +992,11 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
       "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
     },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -951,6 +1056,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
     "uglify-js": {
       "version": "2.8.29",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
@@ -1033,6 +1143,11 @@
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
       "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
     "yargs": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
diff --git a/backend/package.json b/backend/package.json
index f81eee76db6488bed78c013b13ca6e55aa83ba8a..4b36ce05c929d6b4d207133572628320df55f652 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -18,6 +18,7 @@
     "mongoose": "^5.10.15",
     "mongoose-auto-increment": "^5.0.1",
     "morgan": "~1.9.1",
+    "multer": "^1.4.2",
     "passport": "^0.4.1",
     "passport-local": "^1.0.0"
   }
diff --git a/backend/routes/users.js b/backend/routes/users.js
index a463dbb5201cb3805a65466fe81f491ca977b8c6..076c1b686b1590a5b2ebc1fd9918bfb1c08614a4 100644
--- a/backend/routes/users.js
+++ b/backend/routes/users.js
@@ -3,6 +3,10 @@ const passport = require("passport");
 var flash = require("connect-flash");
 var router = express.Router();
 var UserModel = require("../models/user");
+var BoardModel = require("../models/board");
+var cors = require("cors");
+const { ConnectionStates } = require("mongoose");
+var path = require("path");
 
 // let LocalStrategy = require("passport-local").Strategy;
 
@@ -165,7 +169,7 @@ router.post("/login", async function (req, res) {
 
     if (found_user) {
       console.log("이메일과 비번이 일치하는 사용자 찾음 ");
-      res.redirect("/board");
+      res.redirect("http://localhost:3000/board");
     } else {
       console.log("이메일과 비밀번호를 다시 확인해주세요.");
       res.redirect("http://localhost:3000/login");
@@ -192,11 +196,107 @@ router.get("/logout", function (req, res) {
   }
 });
 
-router.get("/board", function (req, res) {
+router.get("/board", async function (req, res) {
   console.log("/board 패스 요청됨.");
   // console.log("세션:" + req.session.user);
   // console.dir(req.session);
-  res.send("axios test");
+  // try {
+  //   let boards = await BoardModel.find({});
+  //   console.log(boards);
+  //   res.send(boards);
+  // } catch (err) {
+  //   console.log(err);
+  // }
+
+  BoardModel.find({}, function (err, results) {
+    if (err) {
+      console.log(err);
+      return;
+    }
+    if (results.length > 0) {
+      console.log(results);
+      res.send(results);
+    } else {
+      res.send(null);
+    }
+  });
+});
+
+var multer = require("multer");
+
+var storage = multer.diskStorage({
+  destination: function (req, file, callback) {
+    callback(null, "uploads");
+  },
+  filename: function (req, file, callback) {
+    var extension = path.extname(file.originalname);
+    var basename = path.basename(file.originalname, extension);
+    callback(null, basename + Date.now() + extension);
+  },
+});
+
+var upload = multer({
+  storage: storage,
+});
+
+router.post("/writeBoard", upload.array("photo", 1), function (req, res) {
+  console.log("/writeBoard 호출됨.");
+
+  try {
+    var files = req.files;
+
+    if (files.length > 0) {
+      console.log(files[0]);
+    } else {
+      console.log("업로드된 파일 x");
+    }
+
+    let originalname = "";
+    let filename = "";
+    let mimetype = "";
+    let size = 0;
+
+    if (Array.isArray(files)) {
+      console.log("배열에 들어있는 파일 갯수 : %d", files.length);
+
+      for (let i = 0; i < files.length; i++) {
+        originalname = files[i].originalname;
+        filename = files[i].filename;
+        mimetype = files[i].mimetype;
+        size = files[i].size;
+      }
+    } else {
+      console.log("파일 개수 : 1");
+      originalname = files[0].originalname;
+      filename = files[0].name;
+      mimetype = files[0].mimetype;
+      size = files[0].size;
+    }
+
+    console.log(
+      "현재 파일 정보 : " +
+        originalname +
+        ", " +
+        filename +
+        ", " +
+        mimetype +
+        ", " +
+        size
+    );
+
+    let save_board = new BoardModel({
+      title: req.body.title,
+      content: req.body.content,
+      hobby: req.body.hobby,
+      picture: filename,
+    });
+
+    save_board.save();
+    console.log("게시글 저장 완료");
+    res.redirect("http://localhost:3000/board");
+  } catch (err) {
+    console.log(err);
+  }
 });
 
 module.exports = router;
diff --git "a/backend/uploads/\354\272\241\354\262\23021607104103660.PNG" "b/backend/uploads/\354\272\241\354\262\23021607104103660.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..c071fd8a30e93dbcbdc226158dcf41d4efd0e0a0
Binary files /dev/null and "b/backend/uploads/\354\272\241\354\262\23021607104103660.PNG" differ
diff --git "a/backend/uploads/\354\272\241\354\262\23021607104162782.PNG" "b/backend/uploads/\354\272\241\354\262\23021607104162782.PNG"
new file mode 100644
index 0000000000000000000000000000000000000000..c071fd8a30e93dbcbdc226158dcf41d4efd0e0a0
Binary files /dev/null and "b/backend/uploads/\354\272\241\354\262\23021607104162782.PNG" differ
diff --git a/frontend/.eslintcache b/frontend/.eslintcache
index 15c6b363f82b2bf15c66b87deafeb7f48904991a..4f79d8ec85c17fc6e2224093ab960d5ffe1a2055 100644
--- a/frontend/.eslintcache
+++ b/frontend/.eslintcache
@@ -1 +1 @@
-[{"C:\\WYH\\frontend\\src\\reportWebVitals.js":"1","C:\\WYH\\frontend\\src\\App.js":"2","C:\\WYH\\frontend\\src\\index.js":"3","C:\\WYH\\frontend\\src\\components\\Profile.js":"4","C:\\WYH\\frontend\\src\\components\\Board.js":"5","C:\\WYH\\frontend\\src\\components\\Home.js":"6"},{"size":362,"mtime":1606157613272,"results":"7","hashOfConfig":"8"},{"size":1067,"mtime":1606663325293,"results":"9","hashOfConfig":"8"},{"size":544,"mtime":1606240034288,"results":"10","hashOfConfig":"8"},{"size":1175,"mtime":1606662802658,"results":"11","hashOfConfig":"8"},{"size":805,"mtime":1607026420418,"results":"12","hashOfConfig":"8"},{"size":370,"mtime":1606662762631,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"10w9ldj",{"filePath":"16","messages":"17","errorCount":1,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"C:\\WYH\\frontend\\src\\reportWebVitals.js",[],"C:\\WYH\\frontend\\src\\App.js",["26","27"],"C:\\WYH\\frontend\\src\\index.js",[],"C:\\WYH\\frontend\\src\\components\\Profile.js",[],"C:\\WYH\\frontend\\src\\components\\Board.js",["28","29","30","31"],"C:\\WYH\\frontend\\src\\components\\Home.js",["32"],{"ruleId":"33","severity":1,"message":"34","line":1,"column":17,"nodeType":"35","messageId":"36","endLine":1,"endColumn":26},{"ruleId":"37","severity":2,"message":"38","line":38,"column":39,"nodeType":"35","messageId":"39","endLine":38,"endColumn":44},{"ruleId":"33","severity":1,"message":"40","line":2,"column":10,"nodeType":"35","messageId":"36","endLine":2,"endColumn":15},{"ruleId":"33","severity":1,"message":"41","line":6,"column":10,"nodeType":"35","messageId":"36","endLine":6,"endColumn":18},{"ruleId":"42","severity":1,"message":"43","line":8,"column":3,"nodeType":"35","endLine":8,"endColumn":12,"suggestions":"44"},{"ruleId":"42","severity":1,"message":"45","line":8,"column":13,"nodeType":"46","endLine":15,"endColumn":4},{"ruleId":"33","severity":1,"message":"40","line":2,"column":10,"nodeType":"35","messageId":"36","endLine":2,"endColumn":15},"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","no-undef","'Board' is not defined.","undef","'Route' is defined but never used.","'response' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect contains a call to 'setResponse'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [] as a second argument to the useEffect Hook.",["47"],"Effect callbacks are synchronous to prevent race conditions. Put the async function inside:\n\nuseEffect(() => {\n  async function fetchData() {\n    // You can await here\n    const response = await MyAPI.getData(someId);\n    // ...\n  }\n  fetchData();\n}, [someId]); // Or [] if effect doesn't need props or state\n\nLearn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching","ArrowFunctionExpression",{"desc":"48","fix":"49"},"Add dependencies array: []",{"range":"50","text":"51"},[419,419],", []"]
\ No newline at end of file
+[{"C:\\WYH\\frontend\\src\\reportWebVitals.js":"1","C:\\WYH\\frontend\\src\\App.js":"2","C:\\WYH\\frontend\\src\\index.js":"3","C:\\WYH\\frontend\\src\\components\\Profile.js":"4","C:\\WYH\\frontend\\src\\components\\Board.js":"5","C:\\WYH\\frontend\\src\\components\\Home.js":"6","C:\\WYH\\frontend\\src\\components\\Signup.js":"7","C:\\WYH\\frontend\\src\\components\\Login.js":"8","C:\\WYH\\frontend\\src\\components\\WriteBoard.js":"9"},{"size":362,"mtime":1606157613272,"results":"10","hashOfConfig":"11"},{"size":1218,"mtime":1607099502736,"results":"12","hashOfConfig":"11"},{"size":544,"mtime":1606240034288,"results":"13","hashOfConfig":"11"},{"size":1175,"mtime":1606662802658,"results":"14","hashOfConfig":"11"},{"size":1032,"mtime":1607105664770,"results":"15","hashOfConfig":"11"},{"size":370,"mtime":1606662762631,"results":"16","hashOfConfig":"11"},{"size":1575,"mtime":1606662809909,"results":"17","hashOfConfig":"11"},{"size":1232,"mtime":1606662786263,"results":"18","hashOfConfig":"11"},{"size":3419,"mtime":1607104090152,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"10w9ldj",{"filePath":"22","messages":"23","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":3,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"32","messages":"33","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"34"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"37"},{"filePath":"38","messages":"39","errorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":"40"},"C:\\WYH\\frontend\\src\\reportWebVitals.js",[],"C:\\WYH\\frontend\\src\\App.js",["41"],"C:\\WYH\\frontend\\src\\index.js",[],"C:\\WYH\\frontend\\src\\components\\Profile.js",[],"C:\\WYH\\frontend\\src\\components\\Board.js",["42","43","44"],"C:\\WYH\\frontend\\src\\components\\Home.js",["45"],"C:\\WYH\\frontend\\src\\components\\Signup.js",["46"],"import React, { useState } from \"react\";\r\n//import { post } from \"../../backend/app\";\r\nimport { post } from \"axios\";\r\n\r\nconst Signup = () => {\r\n  const [email, setEmail] = useState(\"\");\r\n  const [nicname, setNicname] = useState(\"\");\r\n  const [password, setPassword] = useState(\"\");\r\n\r\n  const onChangeEmail = (e) => setEmail(e.target.value);\r\n  const onChangeNicname = (e) => setNicname(e.target.value);\r\n  const onChangePassword = (e) => setPassword(e.target.value);\r\n\r\n  // const handleFormSubmit = () => {\r\n  //   const url = \"/signup\";\r\n  //   const formData = new FormData();\r\n  //   formData.append(\"username\", username);\r\n  //   formData.append(\"password\", password);\r\n  //   formData.append(\"nicname\", nicname);\r\n\r\n  //   const config = {\r\n  //     headers: {\r\n  //       \"content-type\": \"multipart/form-data\",\r\n  //     },\r\n  //   };\r\n\r\n  //   return post(url, formData, config);\r\n  // };\r\n\r\n  return (\r\n    <form action=\"http://localhost:3001/signup\" method=\"post\">\r\n      <h1>회원가입</h1>\r\n      이메일:\r\n      <input\r\n        type=\"text\"\r\n        name=\"email\"\r\n        value={email}\r\n        onChange={onChangeEmail}\r\n      ></input>\r\n      비밀번호:\r\n      <input\r\n        type=\"password\"\r\n        name=\"password\"\r\n        value={password}\r\n        onChange={onChangePassword}\r\n      ></input>\r\n      닉네임:\r\n      <input\r\n        type=\"text\"\r\n        name=\"nicname\"\r\n        value={nicname}\r\n        onChange={onChangeNicname}\r\n      ></input>\r\n      <button type=\"submit\">가입완료</button>\r\n    </form>\r\n  );\r\n};\r\n\r\nexport default Signup;\r\n","C:\\WYH\\frontend\\src\\components\\Login.js",["47"],"import React, { useState } from \"react\";\r\nimport { post } from \"axios\";\r\n\r\nconst Login = () => {\r\n  const [username, setUsername] = useState(\"\");\r\n  const [password, setPassword] = useState(\"\");\r\n\r\n  const onChangeUsername = (e) => setUsername(e.target.value);\r\n  const onChangePassword = (e) => setPassword(e.target.value);\r\n\r\n  // const handleFormSubmit = () => {\r\n  //   const url = \"/login\";\r\n  //   let formData = new FormData();\r\n  //   formData.append(\"username\", username);\r\n  //   formData.append(\"password\", password);\r\n\r\n  //   let config = {\r\n  //     headers: {\r\n  //       \"content-type\": \"multipart/form-data\",\r\n  //     },\r\n  //   };\r\n\r\n  //   return post(url, formData, config);\r\n  // };\r\n\r\n  return (\r\n    <form action=\"http://localhost:3001/login\" method=\"post\">\r\n      <h1>로그인 화면</h1>\r\n      이메일:\r\n      <input\r\n        type=\"text\"\r\n        name=\"email\"\r\n        value={username}\r\n        onChange={onChangeUsername}\r\n      ></input>\r\n      비밀번호:\r\n      <input\r\n        type=\"password\"\r\n        name=\"password\"\r\n        value={password}\r\n        onChange={onChangePassword}\r\n      ></input>\r\n      <button type=\"submit\">로그인</button>\r\n    </form>\r\n  );\r\n};\r\n\r\nexport default Login;\r\n","C:\\WYH\\frontend\\src\\components\\WriteBoard.js",["48","49","50","51"],"import React, { useState } from \"react\";\r\n\r\nconst WriteBoard = () => {\r\n  const [title, setTitle] = useState(\"\");\r\n  const [content, setContent] = useState(\"\");\r\n  const [hobby, setHobby] = useState(\"\");\r\n\r\n  const onChangeTitle = (e) => setTitle(e.target.value);\r\n  const onChangeContent = (e) => setContent(e.target.value);\r\n  const onChangeHobby = (e) => setHobby(e.target.value);\r\n\r\n  return (\r\n    <div>\r\n      <form\r\n        action=\"http://localhost:3001/writeBoard\"\r\n        method=\"post\"\r\n        encType=\"multipart/form-data\"\r\n      >\r\n        <label>제목</label>\r\n        <input type=\"text\" name=\"title\" onChange={onChangeTitle}></input>\r\n        <br></br>\r\n        <label>본문</label>\r\n        <textarea\r\n          type=\"text\"\r\n          name=\"content\"\r\n          onChange={onChangeContent}\r\n        ></textarea>\r\n        <br></br>\r\n        <label>취미</label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"ex/sp\" name=\"hobby\" />\r\n          운동/스포츠\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"out/tr\" name=\"hobby\" />\r\n          아웃도어/여행\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"bk/wr\" name=\"hobby\" />\r\n          인문학/책/글\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"fg/lg\" name=\"hobby\" />\r\n          외국/언어\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"cul/pfm\" name=\"hobby\" />\r\n          문화/공연\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"mu/inst\" name=\"hobby\" />\r\n          음악/악기\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"cft\" name=\"hobby\" />\r\n          공예/만들기\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"dan\" name=\"hobby\" />\r\n          댄스/무용\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"volu\" name=\"hobby\" />\r\n          봉사활동\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"par\" name=\"hobby\" />\r\n          사교/인맥\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"game\" name=\"hobby\" />\r\n          게임/오락\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"pic\" name=\"hobby\" />\r\n          사진/편집/촬영/영상\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"inv\" name=\"hobby\" />\r\n          제테크/투자\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"cok/fod\" name=\"hobby\" />\r\n          요리/음식/맛집\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"fas/bea\" name=\"hobby\" />\r\n          패션/뷰티/코디\r\n        </label>\r\n        <br></br>\r\n        <label>\r\n          <input type=\"radio\" value=\"art/draw\" name=\"hobby\" />\r\n          미술/그림\r\n        </label>\r\n        <br></br>\r\n        <br></br>\r\n        <label>사진첨부</label>\r\n        <input type=\"file\" name=\"photo\"></input>\r\n        <br></br>\r\n        <button type=\"submit\">ok</button>\r\n      </form>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default WriteBoard;\r\n",{"ruleId":"52","severity":1,"message":"53","line":1,"column":17,"nodeType":"54","messageId":"55","endLine":1,"endColumn":26},{"ruleId":"52","severity":1,"message":"56","line":2,"column":10,"nodeType":"54","messageId":"55","endLine":2,"endColumn":15},{"ruleId":"57","severity":1,"message":"58","line":8,"column":3,"nodeType":"54","endLine":8,"endColumn":12,"suggestions":"59"},{"ruleId":"57","severity":1,"message":"60","line":8,"column":13,"nodeType":"61","endLine":20,"endColumn":4},{"ruleId":"52","severity":1,"message":"56","line":2,"column":10,"nodeType":"54","messageId":"55","endLine":2,"endColumn":15},{"ruleId":"52","severity":1,"message":"62","line":3,"column":10,"nodeType":"54","messageId":"55","endLine":3,"endColumn":14},{"ruleId":"52","severity":1,"message":"62","line":2,"column":10,"nodeType":"54","messageId":"55","endLine":2,"endColumn":14},{"ruleId":"52","severity":1,"message":"63","line":4,"column":10,"nodeType":"54","messageId":"55","endLine":4,"endColumn":15},{"ruleId":"52","severity":1,"message":"64","line":5,"column":10,"nodeType":"54","messageId":"55","endLine":5,"endColumn":17},{"ruleId":"52","severity":1,"message":"65","line":6,"column":10,"nodeType":"54","messageId":"55","endLine":6,"endColumn":15},{"ruleId":"52","severity":1,"message":"66","line":10,"column":9,"nodeType":"54","messageId":"55","endLine":10,"endColumn":22},"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","'Route' is defined but never used.","react-hooks/exhaustive-deps","React Hook useEffect contains a call to 'setResponse'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [response] as a second argument to the useEffect Hook.",["67"],"Effect callbacks are synchronous to prevent race conditions. Put the async function inside:\n\nuseEffect(() => {\n  async function fetchData() {\n    // You can await here\n    const response = await MyAPI.getData(someId);\n    // ...\n  }\n  fetchData();\n}, [someId]); // Or [] if effect doesn't need props or state\n\nLearn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching","ArrowFunctionExpression","'post' is defined but never used.","'title' is assigned a value but never used.","'content' is assigned a value but never used.","'hobby' is assigned a value but never used.","'onChangeHobby' is assigned a value but never used.",{"desc":"68","fix":"69"},"Add dependencies array: [response]",{"range":"70","text":"71"},[532,532],", [response]"]
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index c0c85113321802f16f8fa06792aed8d0fb030b16..40829eea998214971aceda0cc1745a1b1961a124 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,6 +47,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "proxy": "http://localhost:3001"
+  }
+  
 }
diff --git a/frontend/src/App.js b/frontend/src/App.js
index c72e71efe79825d06ed409c0492d25e5753bdaaf..fd9c652fc42db1fe83bf925da4865f594faf30c5 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -5,6 +5,7 @@ import Login from "./components/Login";
 import Signup from "./components/Signup";
 import Profile from "./components/Profile";
 import Board from "./components/Board";
+import WriteBoard from "./components/WriteBoard";
 
 //class App extends Component {
 // state = {
@@ -36,7 +37,8 @@ const App = () => {
       <Route path="/login" component={Login} />
       <Route path="/signup" component={Signup} />
       <Route path="/profile" component={Profile} />
-      <Route path="/Board" component={Board} />
+      <Route path="/board" component={Board} />
+      <Route path="/writeBoard" component={WriteBoard} />
     </div>
   );
 };
diff --git a/frontend/src/components/Board.js b/frontend/src/components/Board.js
index c74fb50aff95375d7d137ac55b02d50689abf281..7e9358c2714b08be4d9f87476ce7e7576b321acd 100644
--- a/frontend/src/components/Board.js
+++ b/frontend/src/components/Board.js
@@ -3,15 +3,20 @@ import { Route, Link } from "react-router-dom";
 import axios from "axios";
 
 const Board = () => {
-  const [response, setResponse] = useState(null);
+  const [response, setResponse] = useState([]);
 
   useEffect(async () => {
     try {
       console.log("axios 실행");
-      let res = await axios.get("http://localhost:30001/board");
+      let res = [];
+      res = await axios.get("http://localhost:3001/board");
       console.log(res);
-      setResponse(res);
-    } catch (err) {}
+      setResponse(res.data);
+      console.log(response);
+    } catch (err) {
+      console.log("axios err");
+      console.log(err);
+    }
   });
 
   return (
@@ -23,7 +28,15 @@ const Board = () => {
         <input type="text" name="searchKeyword"></input>
         <button type="submit">게시글검색</button>
       </form>
-      <ol></ol>
+      <ol>
+        {response.map((res) => (
+          <li>
+            <Link to="/detailBoard">
+              {res.title} {res.created_at}
+            </Link>
+          </li>
+        ))}
+      </ol>
     </div>
   );
 };
diff --git a/frontend/src/components/WriteBoard.js b/frontend/src/components/WriteBoard.js
new file mode 100644
index 0000000000000000000000000000000000000000..1a1d9dd80f648a2c86952934d4424aaa508554d2
--- /dev/null
+++ b/frontend/src/components/WriteBoard.js
@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+
+const WriteBoard = () => {
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [hobby, setHobby] = useState("");
+
+  const onChangeTitle = (e) => setTitle(e.target.value);
+  const onChangeContent = (e) => setContent(e.target.value);
+  const onChangeHobby = (e) => setHobby(e.target.value);
+
+  return (
+    <div>
+      <form
+        action="http://localhost:3001/writeBoard"
+        method="post"
+        encType="multipart/form-data"
+      >
+        <label>제목</label>
+        <input type="text" name="title" onChange={onChangeTitle}></input>
+        <br></br>
+        <label>본문</label>
+        <textarea
+          type="text"
+          name="content"
+          onChange={onChangeContent}
+        ></textarea>
+        <br></br>
+        <label>취미</label>
+        <br></br>
+        <label>
+          <input type="radio" value="ex/sp" name="hobby" />
+          운동/스포츠
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="out/tr" name="hobby" />
+          아웃도어/여행
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="bk/wr" name="hobby" />
+          인문학/책/글
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="fg/lg" name="hobby" />
+          외국/언어
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="cul/pfm" name="hobby" />
+          문화/공연
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="mu/inst" name="hobby" />
+          음악/악기
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="cft" name="hobby" />
+          공예/만들기
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="dan" name="hobby" />
+          댄스/무용
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="volu" name="hobby" />
+          봉사활동
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="par" name="hobby" />
+          사교/인맥
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="game" name="hobby" />
+          게임/오락
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="pic" name="hobby" />
+          사진/편집/촬영/영상
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="inv" name="hobby" />
+          제테크/투자
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="cok/fod" name="hobby" />
+          요리/음식/맛집
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="fas/bea" name="hobby" />
+          패션/뷰티/코디
+        </label>
+        <br></br>
+        <label>
+          <input type="radio" value="art/draw" name="hobby" />
+          미술/그림
+        </label>
+        <br></br>
+        <br></br>
+        <label>사진첨부</label>
+        <input type="file" name="photo"></input>
+        <br></br>
+        <button type="submit">ok</button>
+      </form>
+    </div>
+  );
+};
+
+export default WriteBoard;