Feat : html skeleton of Page /board

- /board 화면 뼈대 완성 - /board 내에 중요 부분 별로 component 분리 구성 -- center, 게시판 작은 뷰, 왼쪽 User, SearchBar, NavBar로 구분
osamhack2022 · Oct 4, 2022 · a97a2b5 · a97a2b5
1 parent 42e4237
commit a97a2b5
Show file tree

Hide file tree

Showing 6 changed files with 227 additions and 3 deletions.
diff --git a/frontend/components/board/BoardCenter.js b/frontend/components/board/BoardCenter.js
@@ -0,0 +1,8 @@
+//게시판 위, 중앙에 사진 및 제목 등
+
+export default function BoardCenter() {
+    return (
+        <>
+        </>
+    )
+}
diff --git a/frontend/components/board/BoardMiniView.js b/frontend/components/board/BoardMiniView.js
@@ -0,0 +1,77 @@
+//id별 네모네모하게 제목이랑 안에 글들 보여주는 것
+
+export default function BoardMiniView(props) {
+  return (
+    <>
+      {/* type:string 에 따라 백에서 다른 값 받아옴. */}
+
+      <table>
+        <tr>
+          <th>
+            <h3 className="boardName">{`${props.type} 게시판`}</h3>
+          </th>
+        </tr>
+        <tr>
+          <td>
+            <a>
+              <div>게시글 제목 1</div>
+              <div>n분 전</div>
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a>
+              <div>게시글 제목 2</div>
+              <div>n분 전</div>
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a>
+              <div>게시글 제목 3</div>
+              <div>n분 전</div>
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a>
+              <div>게시글 제목 4</div>
+              <div>n분 전</div>
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <a>
+              <div>게시글 제목 5</div>
+              <div>n분 전</div>
+            </a>
+          </td>
+        </tr>
+      </table>
+
+      <style jsx>{`
+        table {
+          margin: 0px;
+          border: 1px solid purple;
+          width: 300px;
+        }
+        .boardName {
+          margin: 0px;
+          text-align: left;
+        }
+        tr {
+          padding-left: 10px;
+        }
+        a {
+          display: flex;
+          justify-content: space-between;
+          flex-direction: row;
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/frontend/components/board/BoardNavBar.js b/frontend/components/board/BoardNavBar.js
@@ -0,0 +1,72 @@
+//board 전용 네비게이션 바 / 좌측바 - 네이버 카페 처럼.
+
+export default function BoardNavBar() {
+  return (
+    <>
+      <ul>
+        {/*게시물 좌측*/}
+        <li>
+          <ul>
+            <li>공지사항</li>
+            <li>실시간 인기 게시판</li>
+            <li>자유게시판</li>
+          </ul>
+        </li>
+        {/*게시물 출력 template*/}
+        <li>
+          <div>복무지 별 커뮤니티</div>
+          <ul>
+            <li>커뮤니티1</li>
+            <li>커뮤니티2</li>
+            <li>커뮤니티3</li>
+            <li>커뮤니티4</li>
+            <li>커뮤니티5</li>
+          </ul>
+        </li>
+        <li>
+          <div>관심사 별 커뮤니티</div>
+          <ul>
+            <li>커뮤니티1</li>
+            <li>커뮤니티2</li>
+            <li>커뮤니티3</li>
+            <li>커뮤니티4</li>
+            <li>커뮤니티5</li>
+          </ul>
+        </li>
+
+        <li>
+          <ul>
+            <li>버그 신고하기</li>
+            <li>건의사항</li>
+          </ul>
+        </li>
+
+        {/*게시판 페이징 template 
+        <li>
+          <div>&lt;</div>
+          <div>1</div>
+          <div>2</div>
+          <div>3</div>
+          <div>4</div>
+          <div>5</div>
+          <div>&gt;</div>
+        </li>
+        or 무한 스크롤??*/}
+
+        {/*게시글 검색 기능 - 따로 분리해야 할 듯*/}
+        <li>
+          <div>
+            <select>
+              <option value="All">제목 + 내용</option>
+              <option value="Title">제목</option>
+              <option value="Content">내용</option>
+            </select>
+            <input />
+            <input type="button" value="검색"/>
+          </div>
+        </li>
+
+      </ul>
+    </>
+  )
+}
diff --git a/frontend/components/board/BoardSearchBar.js b/frontend/components/board/BoardSearchBar.js
@@ -0,0 +1,15 @@
+// 게시판 검색 기능
+
+export default function BoardSearchBar() {
+  return (
+    <>
+      {/* bootstrap */}
+      <nav class="navbar navbar-light bg-light">
+        <form class="form-inline">
+          <input class="form-control mr-sm-2" type="search" placeholder="게시판 검색" aria-label="Search" />
+          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+        </form>
+      </nav>
+    </>
+  )
+}
diff --git a/frontend/components/board/BoardUser.js b/frontend/components/board/BoardUser.js
@@ -0,0 +1,31 @@
+//게시판 안에 각 유저별 로그인 정보 보여주는거.
+
+export default function BoardUser(props) {
+  return (
+    <>
+      <div className={"box"}>
+        <div className={"image"}>이미지</div>
+        <div className={"userId"}>유저아이디</div>
+      </div>
+      <style jsx>{`
+        .box {
+          margin: 30px;
+          border: 1px solid gray;
+          padding: 10px;
+          width: 300px;
+          height: 300px;
+        }
+        .image {
+          margin: 20px;
+          border: 1px solid black;
+          background-color: gray;
+          width: 100px;
+          height: 100px;
+        }
+        .userId {
+          
+        }
+      `}</style>
+    </>
+  )
+}
diff --git a/frontend/pages/board/index.js b/frontend/pages/board/index.js
@@ -1,7 +1,28 @@
+import BoardUser from "../../components/board/BoardUser";
+import BoardSearchBar from "../../components/board/BoardSearchBar";
+import BoardNavBar from "../../components/board/BoardNavBar";
+import BoardCenter from "../../components/board/BoardCenter";
+import BoardMiniView from "../../components/board/BoardMiniView";
+
 export default function board() {
   return (
-      <div>
-          <h1>게시판 메인 페이지</h1>
-      </div>
+      <>
+        <h1>게시판 메인 페이지</h1>
+        <BoardUser />
+        <BoardSearchBar />
+        <BoardNavBar />
+        <BoardCenter />
+        <div className="BoardMain">
+          <BoardMiniView type="popular" />
+          <BoardMiniView type="free" />
+          <BoardMiniView type="recommendPlace" />
+          <BoardMiniView type="recommendHobby" />
+        </div>
+        <style jsx>{`
+          .BoardMain {
+            display: flex;
+          }
+        `}</style>
+      </>
   )
 }