Skip to content

Commit

Permalink
Merge pull request #56 from 2023WISCOM/feature/#10-guestbook
Browse files Browse the repository at this point in the history 
Guestbook: 입력창 작게, 폰트 작게, 스크롤 추가
  • Loading branch information
@imddoy
imddoy authored Nov 3, 2023
2 parents c37f28f + 2c5ca63 commit 91865e7
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 72 deletions.
113 changes: 69 additions & 44 deletions WISCOM/src/components/Guestbook/Content.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,79 @@
import React, { useState } from 'react';
import { useState, useEffect } from 'react';
import * as C from './ContentStyle';
import axios from 'axios';

export default function Content() {
const [data, setData] = useState('');

useEffect(() => {
getDatas();
}, []);

const getDatas = async () => {
await axios
.get(`http://13.124.248.135/guests/`)
.then((response) => {
setData(response.data);
console.log('성공');
console.log(response.data);
})
.catch((error) => {
console.log('전체 글 불러오기 실패', error.message);
});
};

const CommentSubmit = (e) => {
if (inputText.trim() !== '' && name.trim() !== '') {
e.preventDefault();
axios
.post(`http://13.124.248.135/guests/`, {
name: name,
content: inputText,
})
.then((response) => {
console.log('작성 성공');
window.location.reload();
})
.catch((error) => {
console.log('작성 실패');
console.log(error.response.data);
});
}

setName([]);
setInputText([]);
getDatas();
};

const [name, setName] = useState(''); //이름
const [inputText, setInputText] = useState(''); // 입력된 텍스트를 저장하는 상태
const maxLength = 200; // 최대 글자 수
const [entries, setEntries] = useState([]); // 입력된 내용을 저장하는 배열
const entriesPerPage = 6; // 한 페이지에 보일 엔트리 개수
const entriesPerPage = 2; // 한 페이지에 보일 엔트리 개수
const [currentPage, setCurrentPage] = useState(1); // 현재 페이지

const getCurrentDate = () => {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
return `${year}-${month}-${day}`;
};
const handleNameChange = (event) => {
setName(event.target.value);
const name = event.target.value;
if (name.length <= 7) {
setName(name);
}
};

// 입력된 텍스트가 변경될 때 호출되는 함수
const handleInputChange = (e) => {
const text = e.target.value;
if (text.length > maxLength) {
setInputText(text.slice(0, maxLength));
const content = e.target.value;
if (content.length > maxLength) {
setInputText(content.slice(0, maxLength));
} else {
setInputText(text);
setInputText(content);
}
};

const isSubmitDisabled = inputText === '' || inputText.length > maxLength || name === ''; //완료 버튼 비활성화 조건

// 완료 버튼 클릭 시 입력된 내용을 목록에 추가하는 함수
const handleAddEntry = () => {
if (inputText.trim() !== '') {
const newEntry = {
text: inputText,
date: getCurrentDate(),
name: name,
};

setEntries([newEntry, ...entries]);
setInputText(''); // 입력 필드 초기화
setName('');
}
};
// 현재 페이지의 엔트리 배열
const startIndex = (currentPage - 1) * entriesPerPage;
const endIndex = startIndex + entriesPerPage;
const currentEntries = entries.slice(startIndex, endIndex);

// 페이지 변경 처리
const handlePageChange = (page) => {
setCurrentPage(page);
};
Expand All @@ -67,7 +89,7 @@ export default function Content() {
<C.InputBox>
<C.CommentInput
type="text"
placeholder="이름을 입력해주세요" // 이름을 입력할 플레이스홀더 추가
placeholder="이름을 7자 이내로 입력해주세요" // 이름을 입력할 플레이스홀더 추가
value={name}
onChange={handleNameChange} // 이름을 입력하는 이벤트 핸들러 추가
/>
Expand All @@ -83,25 +105,28 @@ export default function Content() {
</C.InputBox>
<br />

<C.Button onClick={handleAddEntry} disabled={isSubmitDisabled}>
<C.Button onClick={CommentSubmit} disabled={isSubmitDisabled}>
완료
</C.Button>

<C.Entries>
{currentEntries.map((entry, index) => (
<C.EntryItem key={index}>
<C.EntryDate>
{entry.name} {entry.date}
</C.EntryDate>
<br />
<C.EntryText>{entry.text}</C.EntryText>
</C.EntryItem>
))}
{data.results &&
data.results.map((entry, index) => (
<C.EntryItem key={index}>
<C.EntryDate>
{entry.name} {entry.date}
</C.EntryDate>
<br />
<C.EntryWrapper>
<C.EntryText>{entry.content}</C.EntryText>
</C.EntryWrapper>
</C.EntryItem>
))}
</C.Entries>

<C.Pagination>
<ul>
{Array.from({ length: Math.ceil(entries.length / entriesPerPage) }).map((_, index) => (
{Array.from({ length: Math.ceil(data.count / entriesPerPage) }).map((_, index) => (
<li
key={index}
onClick={() => handlePageChange(index + 1)}
Expand All @@ -113,4 +138,4 @@ export default function Content() {
</C.Pagination>
</C.ContentContainer>
);
}
}
114 changes: 86 additions & 28 deletions WISCOM/src/components/Guestbook/ContentStyle.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,30 +19,33 @@ export const Title = styled.div`
font-size: 40px;
}
`;

export const InputBox = styled.div`
font-family: 'Pretendard', sans-serif;
background-color: black;
color: white;
font-size: 20px;
font-size: 19px;
font-weight: bold;
width: 1760px;
height: 452px;
width: 1100px;
height: 300px;
resize: none;
border-radius: 45px;
max-width: 100%;
max-height: 100%;
margin-bottom: 20px;
margin: 0 auto; /* 가운데 정렬을 위한 margin 설정 */
margin-bottom: 30px;
padding: 40px;
`;

export const CommentInput = styled.input`
font-family: 'Pretendard', sans-serif;
color: white;
font-weight: bold;
border: none;
font-size: 22px;
font-size: 19px;
resize: none; /* 사용자 크기 조정 비활성화 */
outline: none; /* 포커스 효과 제거 */
ily: 'Pretendard';
&:focus {
outline: none;
Expand All @@ -57,12 +60,12 @@ export const CommentInput = styled.input`
export const ContentInput = styled.textarea`
font-family: 'Pretendard', sans-serif;
width: 100%;
height: 95%;
height: 87%;
background-color: transparent;
color: white;
font-weight: bold;
border: none;
font-size: 22px;
font-size: 19px;
resize: none; /* 사용자 크기 조정 비활성화 */
outline: none; /* 포커스 효과 제거 */
&::placeholder {
Expand All @@ -71,14 +74,33 @@ export const ContentInput = styled.textarea`
@media screen and (max-width: 412px) {
font-size: 15px; /* 작은 화면에서 폰트 크기 조절 */
}
&::-webkit-scrollbar {
width: 10px; /* 스크롤바의 두께 지정 */
border-radius: 5px; /* 스크롤바 모서리를 둥글게 만듭니다. */
}
&::-webkit-scrollbar-thumb {
background-color: #595959;
border-radius: 5px;
backdrop-filter: blur(50px);
}
&::-webkit-scrollbar-track {
background-color: #acacac; /* 스크롤바 트랙 색상 지정 */
border-radius: 5px; /* 스크롤바 모서리를 둥글게 만듭니다. */
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2) inset;
}
`;

export const InputCount = styled.div`
font-size: 18px;
text-align: right; /* 텍스트를 오른쪽 정렬합니다. */
margin-right: 20px;
margin-top: -20px;
margin-top: 5px;
`;


export const Button = styled.button`
width: 380px;
height: 75px;
Expand Down Expand Up @@ -107,12 +129,17 @@ export const Entries = styled.div`
flex-wrap: wrap;
margin-top: 20px;
list-style-type: none;
width: 1100px;
margin: 0 auto;
margin-top: 30px;
max-width: 100%;
`;

export const EntryItem = styled.div`
background-color: #eeeeee;
width: 420px;
height: 525px;
/* width: 200px; */
height: 300px;
padding: 17px;
margin: 15px;
border-radius: 20px;
Expand All @@ -121,36 +148,58 @@ export const EntryItem = styled.div`
line-height: 1.3;
color: black; /* 글씨 색상 설정 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
word-break: break-all;
@media screen and (min-width: 0px) and (max-width: 700px) {
margin: 10px;
flex-basis: calc(100% - 25px);
height: 440px;
flex-basis: calc(100% - 20px);
line-height: 1.2;
}
@media screen and (min-width: 701px) and (max-width: 900px) {
margin: 10px;
flex-basis: calc(50% - 20px);
height: 410px;
line-height: 1.2;
}
@media screen and (min-width: 901px) and (max-width: 1000px) {
line-height: 1.2;
}
`;
export const EntryDate = styled.span`
font-size: 18px;
font-size: 17px;
white-space: nowrap;
@media screen and (min-width: 0px) and (max-width: 700px) {
font-size: 16px;
}
`;

export const EntryText = styled.span`
font-size: 20px;
@media screen and (min-width: 0px) and (max-width: 700px) {
font-size: 17px;
font-size: 18px;
`;

export const EntryWrapper = styled.div`
width: 100%;
height: 94%;
overflow-y: auto;
display: flex;
flex-direction: column;
/* align-items: center; */
&::-webkit-scrollbar {
width: 10px; /* 스크롤바의 두께 지정 */
border-radius: 5px; /* 스크롤바 모서리를 둥글게 만듭니다. */
}
&::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 5px;
backdrop-filter: blur(50px);
}
&::-webkit-scrollbar-track {
background-color: #D9D9D9; /* 스크롤바 트랙 색상 지정 */
border-radius: 5px; /* 스크롤바 모서리를 둥글게 만듭니다. */
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2) inset;
}
`;

export const Pagination = styled.span`
display: flex;
justify-content: center;
Expand All @@ -159,20 +208,29 @@ export const Pagination = styled.span`
ul {
list-style: none;
display: flex;
gap: 5px;
gap: 10px;
padding: 0;
li {
cursor: pointer;
padding: 5px 10px;
//border: 1px solid #ccc;
border-radius: 5px;
border: 1px solid #fff;
font-size: 22px;
font-weight: bold;
color: #d9d9d9;
@media screen and (min-width: 0px) and (max-width: 393px) {
font-size: 18px;
}
@media screen and (min-width: 393px) and (max-width: 520px) {
font-size: 22px;
}
&:hover {
background-color: #eee;
color: #000;
}
&.active {
background-color: #75ff72;
color: #000;
color: #75ff72;
}
}
}
Expand Down

0 comments on commit 91865e7

Please sign in to comment.