diff --git a/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/9fb6096287d97a479db612c157579be7746c3d432969a5d8c257e65b4e1b4fd4.html b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/9fb6096287d97a479db612c157579be7746c3d432969a5d8c257e65b4e1b4fd4.html new file mode 100644 index 0000000..c9f6d67 --- /dev/null +++ b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/9fb6096287d97a479db612c157579be7746c3d432969a5d8c257e65b4e1b4fd4.html @@ -0,0 +1,102 @@ + + + + + + 게시물 페이지 + + + + +
+
+ +
+ + + + +
+
+
+ +

+ +
+
+ 프로필 사진 + 2QNRpDwD +
+ +
+ 1245 +
+ +
+ +
+ 125 +
+ +
+ 게시한 사진 +
+ +
+ +
+ + + +
+
+ +
+
+ +
+
Add a Comment
+
+
+ +
+ + +
+
+
+ +
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/ab051d0ae79c5c53d03557326c23636effb79e6e3b716cda0612cc3c11affa79.html b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/ab051d0ae79c5c53d03557326c23636effb79e6e3b716cda0612cc3c11affa79.html new file mode 100644 index 0000000..5ed5f0a --- /dev/null +++ b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/ab051d0ae79c5c53d03557326c23636effb79e6e3b716cda0612cc3c11affa79.html @@ -0,0 +1,102 @@ + + + + + + 게시물 페이지 + + + + +
+
+ +
+ + + + +
+
+
+ +

+ +
+
+ 프로필 사진 + 2QNRpDwD +
+ +
+ 12515 +
+ +
+ +
+ 152512125 +
+ +
+ 게시한 사진 +
+ +
+ +
+ + + +
+
+ +
+
+ +
+
Add a Comment
+
+
+ +
+ + +
+
+
+ +
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/d67d0ef0417837623f06289a333ef1a4049cc4d4040599afbd82c99f6bc23a36.html b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/d67d0ef0417837623f06289a333ef1a4049cc4d4040599afbd82c99f6bc23a36.html new file mode 100644 index 0000000..494a4d2 --- /dev/null +++ b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/d67d0ef0417837623f06289a333ef1a4049cc4d4040599afbd82c99f6bc23a36.html @@ -0,0 +1,102 @@ + + + + + + 게시물 페이지 + + + + +
+
+ +
+ + + + +
+
+
+ +

+ +
+
+ 프로필 사진 + 2QNRpDwD +
+ +
+ 125151 +
+ +
+ +
+ 15512512 +
+ +
+ 게시한 사진 +
+ +
+ +
+ + + +
+
+ +
+
+ +
+
Add a Comment
+
+
+ +
+ + +
+
+
+ +
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/d9943083157b198f4f6f19049dfe9d97507724ce8f02a05234770936c8e0418f.html b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/d9943083157b198f4f6f19049dfe9d97507724ce8f02a05234770936c8e0418f.html new file mode 100644 index 0000000..d46bd72 --- /dev/null +++ b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/d9943083157b198f4f6f19049dfe9d97507724ce8f02a05234770936c8e0418f.html @@ -0,0 +1,102 @@ + + + + + + 게시물 페이지 + + + + +
+
+ +
+ + + + +
+
+
+ +

+ +
+
+ 프로필 사진 + 2QNRpDwD +
+ +
+ 1212 +
+ +
+ +
+ 1212 +
+ +
+ 게시한 사진 +
+ +
+ +
+ + + +
+
+ +
+
+ +
+
Add a Comment
+
+
+ +
+ + +
+
+
+ +
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/db83b7ef646f8f9b4acc72e00878d5de9f207340af8f0a4f90fb78434a09af5f.html b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/db83b7ef646f8f9b4acc72e00878d5de9f207340af8f0a4f90fb78434a09af5f.html new file mode 100644 index 0000000..c1a2ef1 --- /dev/null +++ b/example code/resource/PostFileUpload/81588e4b-2fd6-5eb2-a9ae-0ac1014b9526/db83b7ef646f8f9b4acc72e00878d5de9f207340af8f0a4f90fb78434a09af5f.html @@ -0,0 +1,102 @@ + + + + + + 게시물 페이지 + + + + +
+
+ +
+ + + + +
+
+
+ +

+ +
+
+ 프로필 사진 + 2QNRpDwD +
+ +
+ g +
+ +
+ +
+ g +
+ +
+ 게시한 사진 +
+ +
+ +
+ + + +
+
+ +
+
+ +
+
Add a Comment
+
+
+ +
+ + +
+
+
+ +
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/example code/resource/PostFileUpload/users.post b/example code/resource/PostFileUpload/users.post new file mode 100644 index 0000000..e69de29 diff --git a/example code/resource/ServerUserDB.DB b/example code/resource/ServerUserDB.DB new file mode 100644 index 0000000..95a2675 Binary files /dev/null and b/example code/resource/ServerUserDB.DB differ diff --git a/example code/resource/css/Account_Action.css b/example code/resource/css/Account_Action.css new file mode 100644 index 0000000..1e22112 --- /dev/null +++ b/example code/resource/css/Account_Action.css @@ -0,0 +1,43 @@ +.overlay { + display: flex; + justify-content: center; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + z-index: 999; +} + +.container { + max-width: 425px; + margin: 0 auto; + padding: 20px; + background-color: #f2f2f2; + border: 2px solid #428bca; + border-radius: 5px; + font-family: 'Arial', sans-serif; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.container1 { + max-width: 1550px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; +} + + +h1 { + color: #333; + font-size: 24px; + margin-bottom: 10px; +} + +p { + color: #666; + font-size: 16px; + margin-bottom: 20px; +} diff --git a/example code/resource/css/Account_Info.css b/example code/resource/css/Account_Info.css new file mode 100644 index 0000000..bf4f2aa --- /dev/null +++ b/example code/resource/css/Account_Info.css @@ -0,0 +1,46 @@ +.container { + max-width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #f2f2f2; + border: 1px solid #ccc; + border-radius: 5px; + font-family: 'Arial', sans-serif; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + + .container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + + h1 { + color: #333; + font-size: 24px; + margin-bottom: 10px; + } + + p { + color: #666; + font-size: 16px; + margin-bottom: 20px; + } + + .logout-button { + display: inline-block; + padding: 8px 25px; + background-color: #fff; + color: #333; + text-decoration: none; + border: 1px solid #333; + border-radius: 5px; + transition: background-color 0.3s ease; + margin-left: 115px; + } + + .logout-button:hover { + background-color: #ff4444; + color: #fff; + } \ No newline at end of file diff --git a/example code/resource/css/Error_Form.css b/example code/resource/css/Error_Form.css new file mode 100644 index 0000000..968fd4f --- /dev/null +++ b/example code/resource/css/Error_Form.css @@ -0,0 +1,66 @@ +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.modal { + max-width: 470px; + background-color: #fff; + border-radius: 5px; + padding: 30px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +h1 { + color: #ff0000; + text-align: center; + margin-bottom: 20px; +} + +p { + color: #555555; + font-size: 18px; + margin-bottom: 20px; +} + +.error-code { + font-size: 50px; + font-weight: bold; + margin-bottom: 30px; +} + +.error-message { + font-size: 24px; + margin-bottom: 30px; +} + +.button { + display: block; + width: 100%; + padding: 10px 0; + background-color: #ff0000; + color: #ffffff; + font-size: 18px; + text-align: center; + text-decoration: none; + border-radius: 4px; +} + +.button:hover { + background-color: #cc0000; +} + +.container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + \ No newline at end of file diff --git a/example code/resource/css/Feed_Page.css b/example code/resource/css/Feed_Page.css new file mode 100644 index 0000000..6b4bf39 --- /dev/null +++ b/example code/resource/css/Feed_Page.css @@ -0,0 +1,29 @@ +.container { + max-width: 1200px; + margin-left: auto; + margin-right: auto; +} + +.container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; +} + +.post { + /* 기본 스타일 */ + background-color: #f2f2f2; + padding: 20px; + border-radius: 8px; + transition: background-color 0.3s ease; +} + +.post:hover { + background-color: #e0e0e0ab; +} + +.mainform { + border-radius: 8px; + border: 2px solid #000; +} \ No newline at end of file diff --git a/example code/resource/css/Index.css b/example code/resource/css/Index.css new file mode 100644 index 0000000..52216cf --- /dev/null +++ b/example code/resource/css/Index.css @@ -0,0 +1,105 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; + padding: 0; +} + +h1 { + color: #333; + text-align: center; + padding: 20px; +} + +img { + display: block; + margin: 0 auto; + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 20px; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #007bff; + padding: 10px; +} + +nav ul { + list-style: none; + padding: 0; + margin: 0; +} + +nav ul li { + /* display: inline-block; */ + margin-right: 10px; +} + +nav ul li:last-child { + margin-right: 0; +} + +nav ul li a { + display: block; + color: #fff; + text-decoration: none; + padding: 10px 20px; +} + +nav ul li a:hover { + background-color: #0056b3; +} + +.logout-button { + position: fixed; + bottom: 20px; + right: 20px; + background-color: #007bff; + color: #fff; + border-radius: 5px; + padding: 10px 20px; + text-decoration: none; +} + +.logout-button:hover { + background-color: #0056b3; +} + +/* 추가된 CSS */ +.submenu { + display: none; + position: absolute; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border-radius: 4px; + padding: 10px; +} + +nav ul li:hover .submenu { + display: block; +} + +.submenu a { + display: block; + color: #333; + text-decoration: none; + padding: 5px 0; + transition: color 0.3s ease; +} + +.submenu a:hover { + color: #007bff; +} + +.container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + \ No newline at end of file diff --git a/example code/resource/css/Login_Action.css b/example code/resource/css/Login_Action.css new file mode 100644 index 0000000..2c97adb --- /dev/null +++ b/example code/resource/css/Login_Action.css @@ -0,0 +1,53 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; + padding: 0; + } + + .container { + max-width: 600px; + margin: 0 auto; + padding: 40px 20px; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + + h2 { + color: #333; + text-align: center; + margin-bottom: 20px; + } + + p { + color: #333; + text-align: center; + margin-bottom: 20px; + } + + .button-container { + text-align: center; + } + + .button-container a { + display: inline-block; + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + text-decoration: none; + } + + .button-container a:hover { + background-color: #0056b3; + } \ No newline at end of file diff --git a/example code/resource/css/Login_form.css b/example code/resource/css/Login_form.css new file mode 100644 index 0000000..2ffd81c --- /dev/null +++ b/example code/resource/css/Login_form.css @@ -0,0 +1,59 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; + padding: 0; + } + + h2 { + color: #333; + text-align: center; + padding: 20px; + } + + form { + width: 300px; + margin: 0 auto; + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + label { + display: block; + margin-bottom: 10px; + font-weight: bold; + } + + input[type="text"], + input[type="password"] { + width: 93%; + padding: 10px; + margin-bottom: 20px; + border-radius: 5px; + border: 1px solid #ccc; + } + + input[type="submit"] { + display: block; + width: 100%; + padding: 10px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + } + + input[type="submit"]:hover { + background-color: #0056b3; + } + + .container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + \ No newline at end of file diff --git a/example code/resource/css/Logout_Action.css b/example code/resource/css/Logout_Action.css new file mode 100644 index 0000000..e4e01db --- /dev/null +++ b/example code/resource/css/Logout_Action.css @@ -0,0 +1,62 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; + padding: 0; + } + + .container { + max-width: 500px; + margin: 0 auto; + padding: 40px 20px; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + + + h2 { + color: #333; + text-align: center; + margin-bottom: 20px; + } + + p { + color: #333; + text-align: center; + margin-bottom: 20px; + } + + .button-container { + text-align: center; + } + + .button-container a { + display: inline-block; + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + text-decoration: none; + } + + .button-container a:hover { + background-color: #0056b3; + } + + .container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + \ No newline at end of file diff --git a/example code/resource/css/Logout_form.css b/example code/resource/css/Logout_form.css new file mode 100644 index 0000000..3bd9e99 --- /dev/null +++ b/example code/resource/css/Logout_form.css @@ -0,0 +1,51 @@ +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.modal { + max-width: 400px; + background-color: #fff; + border-radius: 5px; + padding: 30px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +h2 { + color: #333; + text-align: center; + font-size: 24px; + margin-bottom: 20px; +} + +form { + display: flex; + justify-content: center; +} + +input[type="submit"] { + padding: 10px 20px; + background-color: #007bff; + color: #ffffff; + font-size: 18px; + text-decoration: none; + border-radius: 4px; + transition: background-color 0.3s ease; +} + +input[type="submit"]:hover { + background-color: #0056b3; +} +.container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; +} + \ No newline at end of file diff --git a/example code/resource/css/Post_Form.css b/example code/resource/css/Post_Form.css new file mode 100644 index 0000000..ecf9b39 --- /dev/null +++ b/example code/resource/css/Post_Form.css @@ -0,0 +1,134 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + } + .container { + max-width: 800px; + margin: 0 auto; + padding: 20px; + background-color: #ffffff; + border: 1px solid #dddddd; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border-color: #000000; + border-radius: 10px; + } + + .container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + .profile { + display: flex; + align-items: center; + margin-bottom: 20px; + } + + .profile img { + width: 50px; + height: 50px; + border-radius: 50%; + margin-right: 10px; + } + + .post-title { + font-size: 24px; + font-weight: bold; + margin-bottom: 10px; + } + + .post-content { + margin-bottom: 20px; + } + + .post-image { + max-width: 100%; + margin-bottom: 20px; + } + + .divider { + height: 1px; + background-color: #dddddd; + margin-bottom: 20px; + } + + .interactions { + display: flex; + justify-content: center; + align-items: center; + margin-top: 20px; + } + + .interactions button { + padding: 10px 20px; + background-color: #0084ff; + color: #ffffff; + border: none; + border-radius: 4px; + margin-right: 10px; + cursor: pointer; + } + + .home-button { + background-color: #dddddd; + color: #333333; + } + + .share-button { + background-color: #00a7a7; + } + + .like-button { + background-color: #ff5050; + } + + .container2 { + background-color: #ffffff; + padding: 10px; + margin-top: 20px; + max-width: 800px; + margin-left: auto; + margin-right: auto; + border-radius: 5px; + } + + .comment-form { + margin-bottom: 40px; + border: 1px solid #000000; + padding: 20px; + border-radius: 5px; + } + .comment-form input[type="text"], + .comment-form textarea { + background-color: #dfe4e9; + border-color: #000000; + border-radius: 5px; + } + .comment-form input[type="file"] { + background-color: #F9FAFB; + } + .comment-form button[type="submit"] { + background-color: #1d1d1d; + color: white; + } + .comment-form button[type="submit"]:hover { + background-color: #000000; + } + + .comments { + margin-bottom: 20px; + border: 1px solid #000000; + border-radius: 5px; + padding: 20px; + } + + .container3 { + background-color: #ffffff; + padding: 10px; + margin-top: 20px; + max-width: 800px; + margin-left: auto; + margin-right: auto; + border-radius: 5px; + } \ No newline at end of file diff --git a/example code/resource/css/Register_Action.css b/example code/resource/css/Register_Action.css new file mode 100644 index 0000000..71f9d43 --- /dev/null +++ b/example code/resource/css/Register_Action.css @@ -0,0 +1,54 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; + padding: 0; + } + + .container { + max-width: 500px; + margin: 0 auto; + padding: 40px 20px; + background-color: #fff; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + + + h2 { + color: #333; + text-align: center; + margin-bottom: 20px; + } + + p { + color: #333; + text-align: center; + margin-bottom: 20px; + } + + .button-container { + text-align: center; + } + + .button-container a { + display: inline-block; + padding: 10px 20px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + text-decoration: none; + } + + .button-container a:hover { + background-color: #0056b3; + } \ No newline at end of file diff --git a/example code/resource/css/Register_form.css b/example code/resource/css/Register_form.css new file mode 100644 index 0000000..f7bfcb2 --- /dev/null +++ b/example code/resource/css/Register_form.css @@ -0,0 +1,59 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; + padding: 0; + } + + h2 { + color: #333; + text-align: center; + padding: 20px; + } + + form { + width: 300px; + margin: 0 auto; + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + label { + display: block; + margin-bottom: 10px; + font-weight: bold; + } + + input[type="text"], + input[type="password"] { + width: 93%; + padding: 10px; + margin-bottom: 20px; + border-radius: 5px; + border: 1px solid #ccc; + } + + input[type="submit"] { + display: block; + width: 94%; + padding: 10px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + } + + input[type="submit"]:hover { + background-color: #0056b3; + } + + .container1 { + max-width: 1535px; + margin: 0 auto; + border-radius: 5px; + font-family: 'Arial', sans-serif; + } + \ No newline at end of file diff --git a/example code/resource/html/Account_Action.html b/example code/resource/html/Account_Action.html new file mode 100644 index 0000000..8b21d3c --- /dev/null +++ b/example code/resource/html/Account_Action.html @@ -0,0 +1,50 @@ + + + + + + 계정 정보 변경 완료 + + + + +
+
+ +
+ + + + +
+
+
+ +
+
+

계정 정보 변경이 완료되었습니다!

+

만약 비밀번호를 변경했다면 계정이 로그아웃 됩니다!

+ 돌아가기 +
+
+ + \ No newline at end of file diff --git a/example code/resource/html/Account_Info.html b/example code/resource/html/Account_Info.html new file mode 100644 index 0000000..01d87aa --- /dev/null +++ b/example code/resource/html/Account_Info.html @@ -0,0 +1,77 @@ + + + + + + Account Information + + + + +
+
+ +
+ + + + +
+
+
+ +
+

Account Information

+
+
+ Profile Picture +
+
+

Welcome, {UserName}

+

ID: {UserUID}

+

Email: {UserEmail}

+

BirthDate: {BirthDate}

+
+
+
+

Account Settings

+
+ + + + + + + + + + + + + + Logout +
+
+
+ + + diff --git a/example code/resource/html/BaseStyle.html b/example code/resource/html/BaseStyle.html new file mode 100644 index 0000000..8192069 --- /dev/null +++ b/example code/resource/html/BaseStyle.html @@ -0,0 +1,28 @@ +
+ +
+ + + + +
+
\ No newline at end of file diff --git a/example code/resource/html/Error_Form.html b/example code/resource/html/Error_Form.html new file mode 100644 index 0000000..740e89e --- /dev/null +++ b/example code/resource/html/Error_Form.html @@ -0,0 +1,52 @@ + + + + + + + Error Page + + + + +
+
+ +
+ + + + +
+
+
+ +
+
+

Oops! Something went wrong.

+

{0}

+

{1}

+ Go back +
+
+ + diff --git a/example code/resource/html/Feed_Page.html b/example code/resource/html/Feed_Page.html new file mode 100644 index 0000000..0fe1fae --- /dev/null +++ b/example code/resource/html/Feed_Page.html @@ -0,0 +1,122 @@ + + + + + + + 게시판 + + + + + +
+
+ +
+ + + + +
+
+
+ +
+
+
+
+ +
+ +
+
+ + +
+
+ + +
+
+ +
+ + + +
+ +
+
+ + +
+
+ + +
+
+
+
+

게시물 1

+

게시물 1 내용...

+
+
+
+
+
+
+

게시물 2

+

게시물 2 내용...

+
+
+
+
+
+
+

게시물 3

+

게시물 3 내용...

+
+
+
+ + +
+
+
+

1

+

1

+
+
+
+ {FeedPost} +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/example code/resource/html/Index.html b/example code/resource/html/Index.html new file mode 100644 index 0000000..5b9efe0 --- /dev/null +++ b/example code/resource/html/Index.html @@ -0,0 +1,62 @@ + + + + + Register + + + + + +
+
+ +
+ + + + +
+
+
+ +
+
+
+ ㅋ +
+
+ ㅋ +
+
+ ㅋ +
+
+
+ + + + diff --git a/example code/resource/html/Login_Action.html b/example code/resource/html/Login_Action.html new file mode 100644 index 0000000..663a745 --- /dev/null +++ b/example code/resource/html/Login_Action.html @@ -0,0 +1,52 @@ + + + + + Login Success + + + + + +
+
+ +
+ + + + +
+
+
+ +
+

Login Success

+

Welcome to our website!

+
+ Go to Profile + Logout + Go to Home +
+
+ + diff --git a/example code/resource/html/Login_form.html b/example code/resource/html/Login_form.html new file mode 100644 index 0000000..3b7bd88 --- /dev/null +++ b/example code/resource/html/Login_form.html @@ -0,0 +1,52 @@ + + + + + Login + + + + + +
+
+ +
+ + + + +
+
+
+ +

+
+ +

+ +

+ +
+ + + diff --git a/example code/resource/html/Logout_Action.html b/example code/resource/html/Logout_Action.html new file mode 100644 index 0000000..b178384 --- /dev/null +++ b/example code/resource/html/Logout_Action.html @@ -0,0 +1,51 @@ + + + + + Logout + + + + + +
+
+ +
+ + + + +
+
+
+ +
+

Logout

+

You have been logged out successfully.

+
+ Go to Login + Go to Home +
+
+ + diff --git a/example code/resource/html/Logout_form.html b/example code/resource/html/Logout_form.html new file mode 100644 index 0000000..c7b6730 --- /dev/null +++ b/example code/resource/html/Logout_form.html @@ -0,0 +1,51 @@ + + + + + Logout + + + + + +
+
+ +
+ + + + +
+
+
+
+
+

Logout

+
+ +
+
+
+ + + diff --git a/example code/resource/html/PostStorage.html b/example code/resource/html/PostStorage.html new file mode 100644 index 0000000..8f075ae --- /dev/null +++ b/example code/resource/html/PostStorage.html @@ -0,0 +1,9 @@ + +
+
+
+

1212

+

1212

+
+
+
diff --git a/example code/resource/html/Post_Form.html b/example code/resource/html/Post_Form.html new file mode 100644 index 0000000..3e0b301 --- /dev/null +++ b/example code/resource/html/Post_Form.html @@ -0,0 +1,102 @@ + + + + + + 게시물 페이지 + + + + +
+
+ +
+ + + + +
+
+
+ +

+ +
+
+ 프로필 사진 + {UserName} +
+ +
+ {PostTitle} +
+ +
+ +
+ {PostContent} +
+ +
+ 게시한 사진 +
+ +
+ +
+ + + +
+
+ +
+
+ +
+
Add a Comment
+
+
+ +
+ + +
+
+
+ +
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/example code/resource/html/Register_Action.html b/example code/resource/html/Register_Action.html new file mode 100644 index 0000000..b6bfbd8 --- /dev/null +++ b/example code/resource/html/Register_Action.html @@ -0,0 +1,51 @@ + + + + + Register Success + + + + + +
+
+ +
+ + + + +
+
+
+ +

+
+

Register Success

+

Thank you for signing up!

+
+ Go to Login +
+
+ + diff --git a/example code/resource/html/Register_form.html b/example code/resource/html/Register_form.html new file mode 100644 index 0000000..f720d25 --- /dev/null +++ b/example code/resource/html/Register_form.html @@ -0,0 +1,58 @@ + + + + + Register + + + + + +
+
+ +
+ + + + +
+
+
+ +

+
+ +

+ +

+ +

+ +

+ +

+ +
+ + + diff --git a/example code/resource/icon/favicon.ico b/example code/resource/icon/favicon.ico new file mode 100644 index 0000000..1061982 Binary files /dev/null and b/example code/resource/icon/favicon.ico differ diff --git a/example code/resource/img/a.png b/example code/resource/img/a.png new file mode 100644 index 0000000..03453c1 Binary files /dev/null and b/example code/resource/img/a.png differ diff --git a/example code/resource/img/images.png b/example code/resource/img/images.png new file mode 100644 index 0000000..00e0e11 Binary files /dev/null and b/example code/resource/img/images.png differ diff --git a/example code/resource/img/profile_picture.png b/example code/resource/img/profile_picture.png new file mode 100644 index 0000000..868206c Binary files /dev/null and b/example code/resource/img/profile_picture.png differ diff --git a/example code/resource/img/unnamed.png b/example code/resource/img/unnamed.png new file mode 100644 index 0000000..eb5f615 Binary files /dev/null and b/example code/resource/img/unnamed.png differ diff --git a/example code/resource/img/user1-profile.png b/example code/resource/img/user1-profile.png new file mode 100644 index 0000000..98a8812 Binary files /dev/null and b/example code/resource/img/user1-profile.png differ diff --git a/example code/resource/img/user2-profile.png b/example code/resource/img/user2-profile.png new file mode 100644 index 0000000..b3d5441 Binary files /dev/null and b/example code/resource/img/user2-profile.png differ diff --git a/example code/resource/img/user3-profile.png b/example code/resource/img/user3-profile.png new file mode 100644 index 0000000..2e96400 Binary files /dev/null and b/example code/resource/img/user3-profile.png differ diff --git a/example code/resource/img/war.png b/example code/resource/img/war.png new file mode 100644 index 0000000..36f7e54 Binary files /dev/null and b/example code/resource/img/war.png differ diff --git "a/example code/resource/img/\353\213\244\354\232\264\353\241\234\353\223\234.png" "b/example code/resource/img/\353\213\244\354\232\264\353\241\234\353\223\234.png" new file mode 100644 index 0000000..cbddbf8 Binary files /dev/null and "b/example code/resource/img/\353\213\244\354\232\264\353\241\234\353\223\234.png" differ diff --git a/example code/resource/js/Account_Info.js b/example code/resource/js/Account_Info.js new file mode 100644 index 0000000..508eb9e --- /dev/null +++ b/example code/resource/js/Account_Info.js @@ -0,0 +1,43 @@ +function clearInputValue(input) { + input.value = ''; + }; + +// function clearInputValue(element) { +// element.value = ''; +// } + +document.getElementById("accountForm").addEventListener("submit", function(event) { + event.preventDefault(); // 기본 제출 동작 방지 + + // JSON 데이터 생성 + var formData = new FormData(this); + var jsonObject = {Form: "Account"}; + for (const [key, value] of formData.entries()) { + jsonObject[key] = value; + } + var jsonData = JSON.stringify(jsonObject); + + fetch("/Account_Info", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: jsonData + }) + .then(response => { + if (response.ok || response.status === 422 || response.status === 403 || response.status === 400) { + return response.text(); + } else { + throw new Error("Post request failed with status: " + response.status); + } + }) + .then(responseHTML => { + var newPage = document.open("text/html", "replace"); + newPage.write(responseHTML); + newPage.close(); + }) + .catch(error => { + console.error("An error occurred while sending the post data:", error); + }); + }); + \ No newline at end of file diff --git a/example code/resource/js/Feed_Page.js b/example code/resource/js/Feed_Page.js new file mode 100644 index 0000000..f73af24 --- /dev/null +++ b/example code/resource/js/Feed_Page.js @@ -0,0 +1,121 @@ +function goToPostPage(postId) { + // 게시물의 원본 페이지 URL로 이동 + window.location.href = postId; +} + +// document.getElementById("searchForm").addEventListener("submit", function(event) { +// event.preventDefault(); // 폼의 기본 제출 동작 방지 + +// var searchInput = document.getElementById("searchInput").value; +// var encodedSearchInput = encodeURIComponent(searchInput); +// var url = "/search?query=" + encodedSearchInput; + +// // GET 요청을 보내는 로직을 구현해야 합니다. +// // 여기서는 간략하게 콘솔에 URL을 출력하는 예시로 작성하였습니다. +// console.log(url); + +// // 서버로 GET 요청을 보내고 응답을 처리하는 로직을 추가해야 합니다. +// // ... +// }); + +var imageFile = null; +var fileUpload = document.getElementById("file-upload"); +var imagePreview = document.getElementById("image-preview"); +var deleteImage = document.getElementById("delete-image"); +var postForm = document.getElementById("postForm"); + +// 이미지 파일 선택 시 미리보기 +fileUpload.addEventListener("change", function(event) { + var file = event.target.files[0]; + var reader = new FileReader(); + + reader.onload = function(e) { + imagePreview.innerHTML = ""; + var img = document.createElement("img"); + img.src = e.target.result; + img.classList.add("max-w-xs", "max-h-48", "object-contain"); + imagePreview.appendChild(img); + }; + + reader.readAsDataURL(file); + imageFile = file; +}); + +// 이미지 삭제 버튼 클릭 시 +deleteImage.addEventListener("click", function(event) { + imagePreview.innerHTML = ""; + fileUpload.value = ""; + imageFile = null; +}); + +// 폼 제출 이벤트 처리 +postForm.addEventListener("submit", async function(event) { + event.preventDefault(); // 폼의 기본 제출 동작 방지 + + // 제목, 내용, 이미지 값 가져오기 + var title = document.getElementById("title").value; + var content = document.getElementById("content").value; + + // 이미지 파일을 Base64로 인코딩 + if (imageFile) { + var reader = new FileReader(); + reader.onloadend = function() { + // Base64로 인코딩된 이미지 데이터를 JSON에 포함시키기 + var imageData = reader.result.split(",")[1]; + var postData = { + Form: 'PostUpload', + title: title, + content: content, + image: imageData + }; + + // JSON 데이터 서버로 전송 + sendPostDataToServer(postData); + }; + reader.readAsDataURL(imageFile); + } else { + var postData = { + Form: 'PostUpload', + title: title, + content: content, + image: null + }; + + // JSON 데이터 서버로 전송 + sendPostDataToServer(postData) + .then(() => { + }) + .catch((error) => { + console.error(error); + }); + } +}); + +// JSON 데이터를 서버로 전송하는 함수 +function sendPostDataToServer(postData) { + return new Promise((resolve, reject) => { + fetch("/Feed_Page", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(postData) + }) + .then(response => { + if (response.ok || response.status === 422 || response.status === 403 || response.status === 400) { + return response.text(); + } else { + throw new Error("Post request failed with status: " + response.status); + } + }) + .then(responseHTML => { + var newPage = document.open("text/html", "replace"); + newPage.write(responseHTML); + newPage.close(); + resolve(responseHTML); + }) + .catch(error => { + reject(new Error("An error occurred while sending the post data: " + error)); + }); + }); +} diff --git a/example code/resource/js/Login_form.js b/example code/resource/js/Login_form.js new file mode 100644 index 0000000..5f50768 --- /dev/null +++ b/example code/resource/js/Login_form.js @@ -0,0 +1,33 @@ +document.getElementById("loginForm").addEventListener("submit", function(event) { + event.preventDefault(); // 폼 기본 제출 동작 방지 + + var form = event.target; + var data = { + Form: "Login", + UserID: form.elements["UserID"].value, + UserPw: form.elements["UserPw"].value + }; + + fetch("/login_form", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(data) + }) + .then(response => { + if (response.ok || response.status === 422 || response.status === 403 || response.status === 400) { + return response.text(); + } else { + throw new Error("Post request failed with status: " + response.status); + } + }) + .then(responseHTML => { + var newPage = document.open("text/html", "replace"); + newPage.write(responseHTML); + newPage.close(); + }) + .catch(error => { + console.error("An error occurred while sending the post data:", error); + }); +}); diff --git a/example code/resource/js/Logout_form.js b/example code/resource/js/Logout_form.js new file mode 100644 index 0000000..0512379 --- /dev/null +++ b/example code/resource/js/Logout_form.js @@ -0,0 +1,31 @@ +document.getElementById("LogoutForm").addEventListener("submit", function(event) { + event.preventDefault(); // 폼 기본 제출 동작 방지 + + var form = event.target; + var data = { + Form: "Logout" + }; + + fetch("/login_form", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(data) + }) + .then(response => { + if (response.ok || response.status === 403 || response.status === 400) { + return response.text(); + } else { + throw new Error("Post request failed with status: " + response.status); + } + }) + .then(responseHTML => { + var newPage = document.open("text/html", "replace"); + newPage.write(responseHTML); + newPage.close(); + }) + .catch(error => { + console.error("An error occurred while sending the post data:", error); + }); +}); diff --git a/example code/resource/js/Post_Form.js b/example code/resource/js/Post_Form.js new file mode 100644 index 0000000..e60d9da --- /dev/null +++ b/example code/resource/js/Post_Form.js @@ -0,0 +1,89 @@ +function addCommentsToContainer(comments) { + const container = document.querySelector('.container3'); + const commentsContainer = container.querySelector('.comments'); + + // 기존 댓글을 삭제 + commentsContainer.innerHTML = ''; + + // 업로드된 순서대로 번호를 추가 + const commentsWithNumber = comments.map((comment, CommentIndex) => ({ + ...comment, + number: CommentIndex + 1 + })); + + // 번호 순으로 정렬 + const sortedComments = commentsWithNumber.sort((a, b) => a.number - b.number); + + // 각 댓글에 대해 HTML 형식으로 변환하여 추가 + sortedComments.forEach(comment => { + const { CommentIndex, UserName, CommentContent } = comment; + + const commentElement = document.createElement('div'); + commentElement.className = 'comment bg-gray-100 p-4 mb-4 rounded-lg'; + + const profileElement = document.createElement('div'); + profileElement.className = 'comment-profile flex items-center'; + + const profilePictureElement = document.createElement('img'); + profilePictureElement.src = '/img/profile_picture.png'; + profilePictureElement.alt = '프로필 사진'; + profilePictureElement.className = 'w-8 h-8 rounded-full mr-2'; + + const usernameElement = document.createElement('span'); + usernameElement.className = 'comment-username text-gray-700 font-semibold'; + usernameElement.textContent = UserName; + + profileElement.appendChild(profilePictureElement); + profileElement.appendChild(usernameElement); + + const contentElement = document.createElement('div'); + contentElement.className = 'comment-content'; + contentElement.textContent = CommentContent; + + commentElement.appendChild(profileElement); + commentElement.appendChild(contentElement); + + commentsContainer.appendChild(commentElement); + }); +} + +// comment-form의 submit 이벤트 핸들러 +// 이벤트 리스너 함수 정의 +function handleCommentFormSubmit(event) { + + var content = document.getElementById('comment-content').value; + + // 서버로 전송할 JSON 데이터 생성 + var page = window.location.pathname.split("/").pop() + + const data = { + Form: 'Comment', + postid: page.split(".")[0], + content: content + }; + + console.log(data) + + // 서버에 JSON 데이터 전송 + fetch('/Comment', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }) + .then(response => response.json()) + .then(comments => { + // 댓글 리스트를 업데이트 + addCommentsToContainer(comments); + }) + .catch(error => { + console.error('Error:', error); + }); +} + +// 이벤트 리스너 함수를 이벤트 리스너에 연결 +document.getElementById('comment-form').addEventListener('submit', handleCommentFormSubmit); + +handleCommentFormSubmit(); + diff --git a/example code/resource/js/Register_form.js b/example code/resource/js/Register_form.js new file mode 100644 index 0000000..3cc0f3b --- /dev/null +++ b/example code/resource/js/Register_form.js @@ -0,0 +1,43 @@ +document.getElementById("RegisterForm").addEventListener("submit", function(event) { + event.preventDefault(); + + var form = event.target; + var userPw = form.elements["UserPw"].value; + var confirmUserPw = form.elements["ConfirmUserPw"].value; + + if (userPw !== confirmUserPw) { + alert("Passwords do not match. Please try again."); + return; + } + + var data = { + Form: "Register", + UserID: form.elements["UserID"].value, + UserEmail: form.elements["UserEmail"].value, + UserName: form.elements["UserName"].value, + UserPw: userPw + }; + + fetch("/Register_form", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(data) + }) + .then(response => { + if (response.ok || response.status === 403 || response.status === 406 || response.status === 400) { + return response.text(); + } else { + throw new Error("Post request failed with status: " + response.status); + } + }) + .then(responseHTML => { + var newPage = document.open("text/html", "replace"); + newPage.write(responseHTML); + newPage.close(); + }) + .catch(error => { + console.error("An error occurred while sending the post data:", error); + }); +}); \ No newline at end of file diff --git a/example code/resource/js/include_html.js b/example code/resource/js/include_html.js new file mode 100644 index 0000000..d0450c3 --- /dev/null +++ b/example code/resource/js/include_html.js @@ -0,0 +1,18 @@ + +window.addEventListener('load', function() { + var includePath = '/html/BaseStyle.html'; // includePath를 원하는 경로로 설정하세요. + var allElements = document.getElementsByTagName('*'); + Array.prototype.forEach.call(allElements, function(el) { + if (includePath) { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + el.outerHTML = this.responseText; + } + }; + xhttp.open('GET', includePath, true); + xhttp.send(); + } + }); +}); +