feat: main page design

JangHwanPark · Jul 9, 2024 · dceb779 · dceb779
1 parent 8e430fa
commit dceb779
Show file tree

Hide file tree

Showing 15 changed files with 522 additions and 357 deletions.
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
  "passport": "^0.7.0",
  "passport-google-oauth20": "^2.0.0",
  "redis": "^4.6.15",
+ "scss": "^0.2.4",
  "uuid": "^10.0.0"
  },
  "devDependencies": {
@@ -59,4 +60,4 @@
  "keywords": [],
  "license": "ISC",
  "description": ""
-}
+}
diff --git a/src/controllers/viewController.js b/src/controllers/viewController.js
@@ -4,25 +4,21 @@ dotenv.config();
 
 export const renderIndexPage = (req, res) => {
  const data = {
- title: "학술",
+ title: "Resources",
+ subTitle: "Routes",
  message: "MOCK",
+ hero: "Home",
  endpoints: [
- { method: "GET", url: `${process.env.DOMAIN}/admin/users`, description: "전체 유저 조회", id: "user-count" },
- { method: "GET", url: `${process.env.DOMAIN}/books/book`, description: "전체 책 조회", id: "book-count" },
- { method: "GET", url: `${process.env.DOMAIN}/coupang_products/all`, description: "전체 쿠팡 제품 조회", id: "coupang-count" }
+ { method: "GET", url: `${process.env.DOMAIN}/users/v1/get/all`, description: "/users/v1/get/all", id: "user-count" },
+ { method: "GET", url: `${process.env.DOMAIN}/books/v1/get/all`, description: "/books/v1/get/all", id: "book-count" },
+ { method: "GET", url: `${process.env.DOMAIN}/products/v1/get/all`, description: "/products/v1/get/all", id: "coupang-count" }
  ],
+
  specificEndpoints: [
- { method: "GET", url: `${process.env.DOMAIN}/admin/user/000043c2-b919-4281-9dab-f2a5b446973b`, description: "특정 유저 조회" },
- { method: "GET", url: `${process.env.DOMAIN}/books/info/1`, description: "특정 책 조회" },
- { method: "GET", url: `${process.env.DOMAIN}/coupang_products/product/1`, description: "특정 제품 조회" },
- { method: "GET", url: `${process.env.DOMAIN}/coupang_products/food`, description: "특정 카테고리 조회" }
+ { method: "GET", url: `${process.env.DOMAIN}/users/v1/get/user/0fd41b40-6c25-497d-930d-1b3c44273ffa`, description: "/users/v1/get/user/:uid" },
+ { method: "GET", url: `${process.env.DOMAIN}/books/v1/get/info/1`, description: "/books/v1/get/info/:id" },
+ { method: "GET", url: `${process.env.DOMAIN}/products/v1/get/food`, description: "/products/v1/get/:category" }
  ],
- inputSections: [
- { type: "users", label: "/admin/user/", placeholder: "유저의 ID를 입력하세요" },
- { type: "books", label: "/books/info/", placeholder: "책의 ID를 입력하세요" },
- { type: "products", label: "/coupang_products/product/", placeholder: "제품의 ID를 입력하세요" },
- { type: "github", label: "/github/repos/", placeholder: "유저 ID/레포지트리 이름" }
- ]
  };
 
  res.render("index", data);

diff --git a/src/public/header.css b/src/public/header.css
@@ -1,25 +1,23 @@
 .main_header {
- background-color: #086fb6;
-}
-
-.main_header .logo {
- color: #fff;
+ height: 70px;
+ position: relative;
 }
 
 .header-wrapper {
- padding: 1rem;
+ width: 1168px;
+ height: 100%;
+ margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
 
-.main_header h1 {
- margin: 0 0 0 25px;
+.link-wrapper a,
+.guide-link a {
+ color: #595959;
+ text-decoration: none;
 }
 
-.main_nav a {
- margin-right: 25px;
- color: #fff;
- font-size: 20px;
- font-weight: 400;
+.guide-link a:hover {
+ color: #589fb8;
 }
diff --git a/src/public/hero.css b/src/public/hero.css
@@ -0,0 +1,40 @@
+.hero-container {
+ height: 160px;
+ background: #589fb8;
+}
+
+.hero-wrapper {
+ width: 1168px;
+ height: 100%;
+ margin: 0 auto;
+ text-align: left;
+}
+
+.hero-wrapper:before {
+ width: 289px;
+ height: 100%;
+ display: inline-block;
+ vertical-align: middle;
+ content: '';
+}
+
+.hero-content {
+ display: inline-block;
+ vertical-align: middle;
+ color: #fff;
+}
+
+.main-title {
+ margin-right: 20px;
+ padding-right: 20px;
+ line-height: 34px;
+ border-right: 1px solid #fff;
+}
+
+.main-title span {
+ font-size: 3rem;
+}
+
+.sub-title {
+ font-size: 1.5rem;
+}
diff --git a/src/public/styles.css b/src/public/styles.css
@@ -1,188 +1,15 @@
+html,
 body {
- font-family: Tahoma;
  margin: 0;
  padding: 0;
- background-color: #f4f4f9;
- color: #333;
+ box-sizing: border-box;
 }
 
-.logo {
- color: #fff;
+.container {
+ max-width: 56rem;
+ margin: 0 auto;
 }
 
-p {
- font-weight: bold;
- padding-right: 1rem;
-}
-
-span {
- padding-left: 1rem;
-}
-
-
-
-
-section {
- margin: 2rem;
-}
-
-.guide, .endpoint {
- background-color: white;
- padding: 1.5rem;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- margin-bottom: 2rem;
-}
-
-.guide h1, .endpoint h2 {
- margin-top: 0;
-}
-
-.guide div, .endpoint div {
- margin-top: 1rem;
-}
-
-.data_container {
- display: flex;
- flex-direction: column;
-}
-
-.data_container div{
- display: flex;
- align-items: center;
-}
-
-
-a {
- text-decoration: none;
-}
-
-.run-button {
- background-color: #007bff;
- color: white;
- border: none;
- padding: 0.5rem 1rem;
- border-radius: 5px;
- cursor: pointer;
- transition: background-color 0.3s ease;
-}
-
-.run-button:hover {
- background-color: #0056b3;
-
-}
-
-input {
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 5px;
- margin-right: 10px;
-}
-
-pre {
- background-color: #f8f9fa;
- padding: 1rem;
- border: 1px solid #ddd;
- border-radius: 5px;
-}
-
-/* 추가한 CSS 스타일 */
-.modal {
- display: none;
- position: fixed;
- z-index: 1000;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-color: transparent; /* 배경을 투명하게 설정 */
- overflow: auto;
- justify-content: center;
- align-items: center;
-}
-
-
-.modal-content {
- background-color: #fefefe;
- margin: auto;
- padding: 20px;
- border: 1px solid #888;
- width: 80%;
- max-width: 600px;
- text-align: center;
- border-radius: 8px;
-}
-
-.close {
- color: #aaaaaa;
- float: right;
- font-size: 28px;
- font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
- color: #000;
- text-decoration: none;
- cursor: pointer;
-}
-
-#result {
- max-width: 300px; /* 최대 가로폭 설정 */
- overflow-x: auto; /* 가로 스크롤 나타나게 설정 */
-
-}
-.sub_nav ul {
- display: flex;
- list-style: none; /* 기본 리스트 스타일 제거 */
- padding: 0; /* 패딩 제거 */
- margin: 0; /* 마진 제거 */
-}
-
-.sub_nav li {
- margin-right: 1rem; /* 항목 간의 간격 설정 */
-}
-
-.sub_nav li:last-child {
- margin-right: 0; /* 마지막 항목의 오른쪽 마진 제거 */
-}
-
-.sub_nav a {
- text-decoration: none; /* 링크의 기본 밑줄 제거 */
- color: #007bff; /* 링크 색상 설정 */
-}
-
-.sub_nav a:hover {
- text-decoration: underline; /* 링크에 마우스 올렸을 때 밑줄 표시 */
-}
-/* input-section 요소를 감싸는 div들의 스타일 */
-.input-section {
- display: none; /* 기본적으로 숨김 */
- align-items: center;
- margin-top: 10px; /* 각 입력 섹션 사이의 간격 설정 */
-}
-
-.input-section label {
- margin-right: 10px; /* 라벨과 입력 필드 사이의 간격 설정 */
-}
-
-.input-section input {
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 5px;
- margin-right: 10px;
-}
-
-.input-section button {
- background-color: #007bff;
- color: white;
- border: none;
- padding: 0.5rem 1rem;
- border-radius: 5px;
- cursor: pointer;
- transition: background-color 0.3s ease;
-}
-
-.input-section button:hover {
- background-color: #0056b3;
+.contents {
+ margin-top: 6rem;
 }
diff --git a/src/routes/index.js b/src/routes/index.js
@@ -10,7 +10,7 @@ const router = express.Router();
 router.use('/auth', authRouter);
 router.use('/books', booksRouter);
 router.use('/users', adminRouter);
-router.use('/coupang-products', coupangRouter);
+router.use('/products', coupangRouter);
 router.use('/github', githubRouter);
 
 export default router;
diff --git a/src/routes/products/books.js b/src/routes/products/books.js
@@ -31,7 +31,7 @@ router.post('/add', async (req, res) => {
 });
 
 // R: 모든 책 가져오기 O
-router.get('/books', async (req, res) => {
+router.get('/v1/get/all', async (req, res) => {
  try {
  const books = await prisma.books.findMany();
  res.status(200).json(books);
@@ -45,7 +45,7 @@ router.get('/books', async (req, res) => {
 });
 
 // R: 특정 책 가져오기 O
-router.get('/info/:id', async (req, res) => {
+router.get('/v1/get/info/:id', async (req, res) => {
  try {
  const { id } = req.params;
  const book = await prisma.books.findUnique({

diff --git a/src/routes/products/coupang.js b/src/routes/products/coupang.js
@@ -4,7 +4,7 @@ import {addProduct, deleteProduct, getAllProducts, getProductByCategory} from ".
 /* Route 는 경로 정의및 경로에서 실행할 컨트롤러를 지정한다. */
 const router = express.Router();
 router.post("/add", addProduct);
-router.get("/get/all", getAllProducts);
-router.get("/get/:category", getProductByCategory);
+router.get("/v1/get/all", getAllProducts);
+router.get("/v1/get/:category", getProductByCategory);
 router.delete("/delete/:pid", deleteProduct);
 export default router;
diff --git a/src/routes/users.js b/src/routes/users.js
@@ -11,8 +11,8 @@ import {
 const router = express.Router();
 
 router.post("/user/create", createUser);
-router.get("/get/all", getAllUsers);
-router.get("/user/:uid", findUserById);
+router.get("/v1/get/all", getAllUsers);
+router.get("/v1/get/user/:uid", findUserById);
 router.get('/count', findUserCount);
 router.post("/user/update/:uid", updateUser);
 router.delete("/user/:uid", deleteUserById);

diff --git a/src/views/components/header.ejs b/src/views/components/header.ejs
@@ -5,8 +5,8 @@
  <h1><%= message %></h1>
  </a>
  </div>
- <nav class="main_nav">
- <a href="/guide" class="nav-link">Guide</a>
- </nav>
+ <div class="guide-link">
+ <a href="/guide" class="nav-link">Documents</a>
+ </div>
  </div>
 </header>