Merge pull request #37 from 2023WISCOM/feature/#10-guestbook

Feat: 이름 입력
2023WISCOM · Nov 2, 2023 · a5e91ea · a5e91ea
2 parents 2128276 + 0638de8
commit a5e91ea
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 48 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/WISCOM/index.html b/WISCOM/index.html
@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/Logo.svg" />
+    <link rel="icon" type="image/svg+xml" href="/Logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WISCOM</title>
   </head>

diff --git a/WISCOM/public/Logo.png b/WISCOM/public/Logo.png
diff --git a/WISCOM/src/components/Guestbook/Content.jsx b/WISCOM/src/components/Guestbook/Content.jsx
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import * as C from './ContentStyle';
 
 export default function Content() {
+  const [name, setName] = useState(''); //이름
   const [inputText, setInputText] = useState(''); // 입력된 텍스트를 저장하는 상태
   const maxLength = 200; // 최대 글자 수
   const [entries, setEntries] = useState([]); // 입력된 내용을 저장하는 배열
-  const [anonymousN, setAnonymousN] = useState(0); // 익명 N 카운터
   const entriesPerPage = 6; // 한 페이지에 보일 엔트리 개수
   const [currentPage, setCurrentPage] = useState(1); // 현재 페이지
 
@@ -16,6 +16,9 @@ export default function Content() {
     const day = now.getDate();
     return `${year}-${month}-${day}`;
   };
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  };
 
   // 입력된 텍스트가 변경될 때 호출되는 함수
   const handleInputChange = (e) => {
@@ -26,18 +29,21 @@ export default function Content() {
       setInputText(text);
     }
   };
+
+  const isSubmitDisabled = inputText === '' || inputText.length > maxLength || name === ''; //완료 버튼 비활성화 조건
+
   // 완료 버튼 클릭 시 입력된 내용을 목록에 추가하는 함수
   const handleAddEntry = () => {
     if (inputText.trim() !== '') {
       const newEntry = {
         text: inputText,
         date: getCurrentDate(),
-        anonymous: `익명 ${anonymousN + 1}`,
+        name: name,
       };
 
       setEntries([newEntry, ...entries]);
       setInputText(''); // 입력 필드 초기화
-      setAnonymousN(anonymousN + 1); // 익명 N 증가
+      setName('');
     }
   };
   // 현재 페이지의 엔트리 배열
@@ -59,6 +65,12 @@ export default function Content() {
       <br />
       <br />
       <C.InputBox>
+        <C.CommentInput
+          type="text"
+          placeholder="이름을 입력해주세요" // 이름을 입력할 플레이스홀더 추가
+          value={name}
+          onChange={handleNameChange} // 이름을 입력하는 이벤트 핸들러 추가
+        />
         <C.ContentInput
           placeholder="방명록을 작성해주세요"
           value={inputText}
@@ -71,12 +83,15 @@ export default function Content() {
       </C.InputBox>
       <br />
 
-      <C.Button onClick={handleAddEntry}>완료</C.Button>
+      <C.Button onClick={handleAddEntry} disabled={isSubmitDisabled}>
+        완료
+      </C.Button>
+
       <C.Entries>
         {currentEntries.map((entry, index) => (
           <C.EntryItem key={index}>
             <C.EntryDate>
-              {entry.anonymous} {entry.date}
+              {entry.name} {entry.date}
             </C.EntryDate>
             <br />
             <C.EntryText>{entry.text}</C.EntryText>

diff --git a/WISCOM/src/components/Guestbook/ContentStyle.jsx b/WISCOM/src/components/Guestbook/ContentStyle.jsx
@@ -3,12 +3,12 @@ import styled from 'styled-components';
 export const ContentContainer = styled.div``;
 
 export const Title = styled.div`
-  color: #20217D;
-  text-align: center; 
-  font-family: 'Pretendard', sans-serif; 
-  font-size: 50px; 
+  color: #20217d;
+  text-align: center;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 50px;
   font-weight: bold;
-  white-space: nowrap; 
+  white-space: nowrap;
   @media screen and (min-width: 0px) and (max-width: 374px) {
     font-size: 25px;
   }
@@ -20,7 +20,7 @@ export const Title = styled.div`
   }
 `;
 export const InputBox = styled.div`
-  font-family: 'Pretendard', sans-serif; 
+  font-family: 'Pretendard', sans-serif;
   background-color: black;
   color: white;
   font-size: 20px;
@@ -34,10 +34,30 @@ export const InputBox = styled.div`
   margin-bottom: 20px;
   padding: 40px;
 `;
+export const CommentInput = styled.input`
+  font-family: 'Pretendard', sans-serif;
+  color: white;
+  font-weight: bold;
+  border: none;
+  font-size: 22px;
+  resize: none; /* 사용자 크기 조정 비활성화 */
+  outline: none; /* 포커스 효과 제거 */
+  ily: 'Pretendard';
+
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    color: #ffffff;
+  }
+  @media screen and (max-width: 412px) {
+    font-size: 15px; /* 작은 화면에서 폰트 크기 조절 */
+  }
+`;
 export const ContentInput = styled.textarea`
-  font-family: 'Pretendard', sans-serif; 
+  font-family: 'Pretendard', sans-serif;
   width: 100%;
-  height: 100%;
+  height: 95%;
   background-color: transparent;
   color: white;
   font-weight: bold;
@@ -62,22 +82,22 @@ export const InputCount = styled.div`
 export const Button = styled.button`
   width: 380px;
   height: 75px;
-  background-color: #75FF72;
+  background-color: #75ff72;
   color: black;
   font-size: 35px;
-  display: flex;
+  display: block;
   justify-content: center;
   align-items: center;
   border: none;
   border-radius: 20px;
   font-weight: bold;
   margin: 0 auto;
-  font-family: 'Pretendard', sans-serif; 
+  font-family: 'Pretendard', sans-serif;
   @media screen and (max-width: 475px) {
     width: 100%; /* 모바일 화면에서 가로 가득 차도록 설정합니다. */
     margin: 0; /* 좌우 마진을 제거합니다. */
   }
-  `;
+`;
 
 export const Entries = styled.div`
   display: flex;
@@ -87,9 +107,9 @@ export const Entries = styled.div`
 `;
 
 export const EntryItem = styled.div`
-  background-color: #EEEEEE;
-  width: 420px; 
-  height: 525px; 
+  background-color: #eeeeee;
+  width: 420px;
+  height: 525px;
   padding: 17px;
   margin: 15px;
   border-radius: 20px;
@@ -98,16 +118,16 @@ export const EntryItem = styled.div`
   line-height: 1.3;
   color: black; /* 글씨 색상 설정 */
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-  @media screen and (min-width:0px) and (max-width: 700px) {
+  @media screen and (min-width: 0px) and (max-width: 700px) {
     margin: 10px;
     flex-basis: calc(100% - 25px);
-    height: 440px; 
+    height: 440px;
     line-height: 1.2;
   }
   @media screen and (min-width: 701px) and (max-width: 900px) {
     margin: 10px;
     flex-basis: calc(50% - 20px);
-    height: 410px; 
+    height: 410px;
     line-height: 1.2;
   }
   @media screen and (min-width: 901px) and (max-width: 1000px) {
@@ -116,7 +136,7 @@ export const EntryItem = styled.div`
 `;
 export const EntryDate = styled.span`
   font-size: 18px;
-  white-space: nowrap; 
+  white-space: nowrap;
   @media screen and (min-width: 0px) and (max-width: 700px) {
     font-size: 16px;
   }
@@ -127,31 +147,30 @@ export const EntryText = styled.span`
   @media screen and (min-width: 0px) and (max-width: 700px) {
     font-size: 17px;
   }
-  
 `;
 export const Pagination = styled.span`
-display: flex;
-justify-content: center;
-margin-top: 20px;
-
-ul {
-  list-style: none;
   display: flex;
-  gap: 5px;
-  padding: 0;
+  justify-content: center;
+  margin-top: 20px;
 
-  li {
-    cursor: pointer;
-    padding: 5px 10px;
-    //border: 1px solid #ccc;
-    border-radius: 5px;
-    &:hover {
-      background-color: #eee;
-    }
-    &.active {
-      background-color: #75FF72;
-      color: #000;
+  ul {
+    list-style: none;
+    display: flex;
+    gap: 5px;
+    padding: 0;
+
+    li {
+      cursor: pointer;
+      padding: 5px 10px;
+      //border: 1px solid #ccc;
+      border-radius: 5px;
+      &:hover {
+        background-color: #eee;
+      }
+      &.active {
+        background-color: #75ff72;
+        color: #000;
+      }
     }
   }
-}
-`;
+`;
diff --git a/WISCOM/src/components/Main/MainAnimation.jsx b/WISCOM/src/components/Main/MainAnimation.jsx
@@ -46,7 +46,16 @@ export default function MainAnimation() {
     <A.AnimationWrapper className="main-animation" ref={animationWrapperRef}>
       {isAnimationVisible && (
         <>
-          <A.Text>축사 들어갈 자리 애니메이션 다 끝나면 자연스럽게 나타나주세요!</A.Text>
+          <A.Text>
+            여러분들이 우리 컴퓨터학과에서 보낸 3년을 마무리하는 2023년 위즈컴 행사를 열게 됨을 매우 기쁘게 생각하고
+            학과 교수들을 대표해서 축하드립니다. 막연하고 두려운 마음으로 백지에서 시작하여 오로지 여러분의 힘으로
+            이루어낸 졸업작품은 컴퓨터과학 분야에서의 성취를 상징하며, 여러분이 어떤 길을 선택하더라도 가치있는 기여를
+            할 수 있다는 능력과 의지를 보여줍니다. 하지만 컴퓨터과학은 끊임없는 변화와 혁신의 분야입니다. 오늘은
+            축하하는 날일뿐만 아니라, 여러분의 앞으로가 더 큰 도전과 성공으로 가득한 여정의 시작이기도 합니다. 우리는
+            여러분의 미래를 응원하고, 계속해서 학습하고 성장하며 이 분야를 선도하는 지식인으로 거듭나길 기대합니다. 다시
+            한번 소중한 작품을 위즈컴에 전시하여 컴퓨터학과를 빛내준 모든 참가자들에게 감사하고 11개 작품 하나하나에
+            찬사와 칭찬의 말을 전합니다. 컴퓨터공학전공 학과장 유견아
+          </A.Text>
           <A.Leading>LEADING</A.Leading>
           <A.Woman>WOMAN</A.Woman>
           <A.Achieving>ACHIEVING</A.Achieving>