Kyutae

deblog/package.json

@@ -25,8 +25,11 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "gh-pages -d build",
+    "predeploy": "npm run build"
   },
+  "homepage": "https://interfacecreative7.github.io/InterFaceDEBlog-Frontend/",
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -44,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^4.0.0"
   }
-}
+}

deblog/src/component/guestbook/Book.js

@@ -9,16 +9,15 @@ import { BookActions } from "../../store/Book-slice";
 
 
 const StyledBook = styled.div`
-width:40vw;
+width:80%;
 height:auto;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-contents:center;
 
 @media (max-width:500px){
-    width:80%;
-    height:auto;
+    width:80vw;
     margin:auto;
     float:right;
     padding:0.5vw;
@@ -38,7 +37,7 @@ const Book = () => {
             }).then(res => {
                 const { data } = res;
                 console.log(data)
-                setBook(data)
+                setBook(data.reverse())
             }).catch(err => {
                 console.log(err)
             })
@@ -57,7 +56,6 @@ const Book = () => {
 
     return (
         <StyledBook>
-            <button onClick={deletData}>삭제</button>
             <BookForm />
             <ul>
                 {book && book.map(element => (

deblog/src/component/guestbook/BookButton.js

@@ -104,11 +104,11 @@ img:hover{
 
 const BookButton = () => {
 
-    return (
-        <StyledBookButton>
-            <img src="./image/homeButton.jpg" />
-        </StyledBookButton>
-    )
+  return (
+    <StyledBookButton>
+      <img src={process.env.PUBLIC_URL + "/image/homeButton.jpg"} />
+    </StyledBookButton>
+  )
 }
 
 export default BookButton;

deblog/src/component/guestbook/BookContentInput.js

@@ -11,8 +11,8 @@ font-size:1vw;
 text-align: center;
 
 @media (max-width:500px){
-    width:40vw;
-    height:8vw;
+    width:60vw;
+    height:30vw;
     margin-right:1vw;
     padding:0.5vw;
     border-radius:10px;
@@ -25,7 +25,7 @@ text-align: center;
 const BookContentInput = () => {
 
     return (
-        <StyledBookContentInput name="content" placeholder="하고싶은 말을 써주세요!" />
+        <StyledBookContentInput maxLength={100} name="content" placeholder="하고싶은 말을 써주세요!" />
     )
 }
 

deblog/src/component/guestbook/BookContents.js

@@ -4,22 +4,42 @@ import styled from "styled-components";
 const StyledBookContents = styled.li`
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap');
 display:flex;
-justify-content:space-evenly;
-align-items:center;
+flex-direction:column;
+justify-content: space-between;
+align-items:start;
+padding:15px;
+overflow:auto;
 border-radius:30px;
-width:70vw;
+width:40vw;
+height:20vw;
 margin-right:1vw;
-height:15vw;
 margin-top:5vw;
 
+
+background-color: #fffaf0;
 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 list-style:none;
+.start{
+    width:100%;
+    display:flex;
+    justify-content:start;
+    align-items: center;
+    border-bottom:0.1px solid;   
+}
+
+
 box{ 
     width:300px;
     height:300px;
     margin:0 auto;
 }
 
+.end{
+    width:100%;
+    display:flex;
+    justify-content:right;
+}
+
 p{
     font-family: 'Noto Sans KR', sans-serif;
 }
@@ -28,29 +48,71 @@ p.name{
 
 }
 p.contents{
-    font-size:1.3vw;
+    font-size:1.1vw;
 }
+
 .feedback{
     border-style: solid;
     border-color: coral;
 }
+.day{
+font-size:1.2vw;
+}
+
+p.FeedBack{
+    font-size:1.8vw;
+    padding:5px;
+    margin-right:1.5vw;
+    border:1px solid #ff0000;
+    border-radius:30px;
+}
+p.QnA{
+    font-size:1.8vw;
+    padding:5px;
+    margin-right:1.5vw;
+    border:1px solid #0000ff;
+    border-radius:30px;
+}
+p.GuestBook{
+    font-size:1.8vw;
+    padding:5px;
+    margin-right:1.5vw;
+    border:1px solid #ffff00;
+    border-radius:30px;
+}
 @media (max-width:400px){
-    width:65vw;
-    height:8vw;
+    width:70vw;
+    height:40vw;
     margin-right:10vw;
-    padding:0.5vw;
+    padding:15px;
     border-radius:10px;
     font-size:3vw;
+    p.name{ 
+        font-size:3vw;
+    }
+    p.contents{
+        font-size:4vw;
+    }
+    .day{
+        font-size:2vw;
+    }
+
 }
 `
 
 const BookContents = (props) => {
-    const { writername, body, docType } = props.items
+    const { writername, body, docType, date } = props.items
+    const day = date.slice(0, 10);
     return (
         <StyledBookContents className={docType}>
-            <p className="name">{docType}</p>
-            <p className="name">{writername}</p>
+            <header className="start">
+                <p className={docType}>{docType}</p>
+                <p className="name">{writername}</p>
+            </header>
             <p className="contents">{body}</p>
+            <div className="end">
+                <p className="day">{day}</p>
+            </div>
         </StyledBookContents >
     )
 }

deblog/src/component/guestbook/BookForm.js

@@ -19,10 +19,11 @@ align-items:center;
     display:flex;
 }
 @media (max-width:500px){
-    width:80vw;
-    height:30vw;
-    margin:auto;
-    padding:0.5vw;
+    justify-content:start;
+    width:100vw;
+    height:200px;
+    margin:0;
+    padding:0;
     font-size:30%;
 }
 `
@@ -36,8 +37,18 @@ const BookForm = () => {
         const { type } = target;
         const { id } = target;
         const { content } = target;
+        if (id.value === "") {
+            alert("아이디를 입력해주세요!")
+            return;
+        }
+        if (content.value === "") {
+            alert("내용을 입력해주세요!")
+            return;
+        }
         SubmitServer(type.value, id.value, content.value)
         receiveServer()
+        id.value = "";
+        content.value = "";
     }
 
     const SubmitServer = async (type, id, content) => {//서버에 데이터를 제출하는코드
@@ -54,6 +65,8 @@ const BookForm = () => {
         await api.get("about/comments/findall/?title=dataType&value=comment", {
 
         }).then(res => {
+            const { data } = res;
+            console.log(data)
             dispatch(BookActions.checkBook())
         }).catch(err => {
             console.log(err)

deblog/src/component/guestbook/BookNameInput.js

@@ -8,11 +8,11 @@ text-align: center;
 padding:0.5vw;
 border-radius:10px;
 font-size:1.2vw;
-
+margin-bottom:1vw;
 
 @media (max-width:500px){
-    width:40vw;
-    height:8vw;
+    width:30vw;
+    height:5vw;
     margin-right:1vw;
     text-align: center;
     padding:0.5vw;
@@ -25,7 +25,7 @@ font-size:1.2vw;
 const BookNameInput = () => {
 
     return (
-        <StyledBookNameInput name="id" placeholder="이름을 써주세요!" />
+        <StyledBookNameInput maxLength={10} name="id" placeholder="이름을 써주세요!" />
     )
 }
 

deblog/src/component/menubar/MenuBar.js

@@ -5,20 +5,20 @@ function MenuBar() {//component 중 메뉴바
     return (//ul tag를 사용하여 표현 
         <ul className={classes.bar}>
             <div>
-                <Link to="/"><img className={classes.homebtn} src="image/homeButton.jpg" alt="HomeButton" /></Link>
+                <Link to="/"><img className={classes.homebtn} src={process.env.PUBLIC_URL + "/image/homeButton.jpg"} alt="HomeButton" /></Link>
             </div>
             <div className={classes.PageBtn}>
                 <li>
                     <Link to="/About" className={classes.btn}>About</Link>
                 </li>
-                <li>
-                    <Link to="/Book" className={classes.btn}>Book</Link>
-                </li>
                 <li >
-                    <Link to="/Contact" className={classes.btn}>Contact</Link>
+                    <Link to="/Submit" className={classes.btn}>Contact</Link>
                 </li>
                 <li>
-                    <Link to="/Culture" className={classes.btn}>Culture</Link>
+                    <Link to="/Tech" className={classes.btn}>Tech</Link>
+                </li>
+                <li>
+                    <Link to="/Book" className={classes.btn}>Book</Link>
                 </li>
             </div>
         </ul>

deblog/src/component/panel/Panel.js

@@ -29,7 +29,7 @@ margin-bottom:55px;
 const Panel = () => {
     return (
         <StyledPanel>
-            <img className="logo" src="./image/panel.jpg" alt="techblog" />
+            <img className="logo" src={process.env.PUBLIC_URL + "/image/panel.jpg"} alt="techblog" />
         </StyledPanel>
     )
 }

deblog/src/component/post/Content.js

@@ -4,6 +4,7 @@ const Styledcontent = styled.div`
 display:flex;
 justify-content:center;
 padding:5px;
+text-decoration: none;
 `
 
 const Content = (props) => {

deblog/src/component/post/Post.js

@@ -43,7 +43,7 @@ const Post = (props) => {
     const { PostImgae, PostTitle, PostContent, PostFooter } = props.items
     return (
         <Styledpost>
-            <img className="PostImage" src={PostImgae} alt="postImgage"></img>
+            <img className="PostImage" src={process.env.PUBLIC_URL + "/image/tibet.jpg"} alt="postImgage"></img>
             <Title value={PostTitle}></Title>
             <Content value={PostContent}></Content>
             <Footer value={PostFooter}></Footer>

deblog/src/component/post/Title.js

@@ -6,7 +6,6 @@ justify-content:center;
 font-weight:bold;
 font-size:20px;
 padding:5px;
-
 {
     color: #333;
     text-decoration: none;

deblog/src/page/AboutPage.module.css

@@ -7,7 +7,6 @@
     background-color: #9F9F9F;
     height: 100vh;
     font-size: 20px;
-
 }
 
 
@@ -21,6 +20,7 @@
     flex-direction: column;
     align-items: center;
     font-family: 'Nanum Gothic', sans-serif;
+    padding: 5vw;
 }
 
 

deblog/src/page/SubmitPage.js

@@ -3,7 +3,7 @@ import classes from "./SubmitPage.module.css"
 import { useState } from "react"
 import remarkGfm from 'remark-gfm'
 import SubmitMenu from "../component/submitMenu/SubmitMenu"
-
+import MenuBar from "../component/menubar/MenuBar"
 
 const SubmitPage = () => {
     const [title, setTitle] = useState("")
@@ -12,14 +12,16 @@ const SubmitPage = () => {
         setTitle(event.target.value)
     }
     const contentChange = (event) => {
+        console.log(event.target.value)
         setcontent(event.target.value)
     }
     return (
         <div className={classes.main}>
+
             <div className={`${classes.write} ${classes.bisector}`}>
                 <textarea className={`${classes.title} ${classes.border} ${classes.same}`} onChange={titleChange} placeholder="제목을 입력해 주세요." />
                 <textarea className={`${classes.contents} ${classes.same}`} onChange={contentChange} placeholder="내용을 입력해 주세요." />
-                <SubmitMenu />
+
             </div>
             <div className={`${classes.show} ${classes.bisector}`}>
                 <h1 className={`${classes.title} ${classes.same}`}>{title}</h1>