Kyutae

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)
             })

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/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/TechPage.module.css

@@ -2,5 +2,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    height: 100vh;
+
 }