DeaHun/KimDeaHun
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메인 페이지 스타일 작성완료 :push

Browse Source
This commit is contained in:
DeaHun
2024-09-11 15:42:01 +09:00
parent e5f1c11f03
commit 45d79fd9ec
8 changed files with 1398 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
board-front/src/App.css
View File

@ -224,3 +224,20 @@
.comment-icon {
background-image: url(assets/image/chat-light.png);
}
.word-badge {
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 30px;
padding: 6px 20px;
color: rgba(0, 0, 0, 0.5);
font-size: 14px;
font-weight: 500;
line-height: 140%;
}
.word-badge:hover {
background-color: rgba(0, 0, 0, 0.03);
cursor: pointer;
}

7
board-front/src/components/BoardItem/index.tsx
View File

@ -4,6 +4,7 @@ import { BoardListItem } from "types/interface";
import { useNavigate } from "react-router-dom";
import DefaultProfileImage from "assets/image/default-profile-image.png";
import { BOARD_DETAIL_PATH, BOARD_PATH } from "constant";
interface Props {
boardListItem: BoardListItem;
@ -17,16 +18,16 @@ export default function BoardItem({ boardListItem }: Props) {
const { writeDatetime, writerNickname, writerProfileImage } = boardListItem;
// function: 네비게이트 함수 //
//const navigate = useNavigate();
const navigate = useNavigate();
// event handler: 게시물 아이템 클릭 이벤트 처리 함수 //
const onClickHandler = () => {
//navigate(boardNumber);
navigate(BOARD_PATH() + "/" + BOARD_DETAIL_PATH(boardNumber));
};
// render: Board List Item 렌더링 //
return (
<div className="board-list-item">
<div className="board-list-item" onClick={onClickHandler}>
<div className="board-list-item-main-box">
<div className="board-list-item-top">
<div className="board-list-item-profile-box">

18
board-front/src/components/Top3Item/index.tsx
View File

@ -3,30 +3,32 @@ import "./style.css";
import defaultProfileImage from "assets/image/default-profile-image.png";
import { BoardListItem } from "types/interface";
import { useNavigate } from "react-router-dom";
import { BOARD_DETAIL_PATH, BOARD_PATH } from "constant";
interface Props {
top3ListItem: BoardListItem;
}
// compoent: Top 3 List Item 컴포넌트
// component: Top 3 List Item 컴포넌트 //
export default function Top3Item({ top3ListItem }: Props) {
// 프로퍼티들
// state: 프로퍼티들 //
const { boardNumber, title, content, boardTitleImage } = top3ListItem;
const { favortieCount, commentCount, viewCount } = top3ListItem;
const { writeDatetime, writerNickname, writerProfileImage } = top3ListItem;
// 네비게이트 함수
//const navigate = useNavigate();
// function: 네비게이트 함수 //
const navigate = useNavigate();
// 이벤트 핸들러: 게시물 아이템 클릭 이벤트 처리 함수
/* const onClickHandler = () => {
navigate(boardNumber);
}; */
// event handler: 게시물 아이템 클릭 이벤트 처리 함수 //
const onClickHandler = () => {
navigate(BOARD_PATH() + "/" + BOARD_DETAIL_PATH(boardNumber));
};
// render: Top 3 List Item 컴포넌트
return (
<div
className="top-3-list-item"
style={{ backgroundImage: `url(${boardTitleImage})` }}
onClick={onClickHandler}
>
<div className="top-3-list-item-main-box">
<div className="top-3-list-item-top">

6
board-front/src/layouts/Footer/index.tsx
View File

@ -22,7 +22,7 @@ export default function Footer() {
<div className="icon-box">
<div className="icon logo-light-icon"></div>
</div>
<div className="footer-logo-text">{"김해가야체"}</div>
<div className="footer-logo-text">{"Layouts Footer"}</div>
</div>
<div className="footer-link-box">
<div className="footer-email-link">{"eogns12312@naver.com"}</div>
@ -41,7 +41,9 @@ export default function Footer() {
</div>
</div>
<div className="footer-bottom">
<div className="footer-copyright">{"zkvlfkdlxm카피라이트"}</div>
<div className="footer-copyright">
{"2024.08.21일부터 제작 시작함."}
</div>
</div>
</div>
</div>

2
board-front/src/layouts/Header/index.tsx
View File

@ -319,7 +319,7 @@ export default function Header() {
<div className="icon-box">
<div className="icon logo-dark-icon"></div>
</div>
<div className="header-logo">헤더 로고</div>
<div className="header-logo">{"Layouts Header"}</div>
</div>
<div className="header-right-box">
{(isAuthPage || isMainpage || isSearchPage || isBoardDetailPage) && (

105
board-front/src/views/Main/index.tsx
View File

@ -1,9 +1,106 @@
import React from "react";
import React, { useEffect, useState } from "react";
import "./style.css";
import Top3Item from "components/Top3Item";
import { BoardListItem } from "types/interface";
import { latestBoardListMock, top3BoardListMock } from "mocks";
import BoardItem from "components/BoardItem";
import Pagination from "components/Pagination";
import { useNavigate } from "react-router-dom";
import { SEARCH_PATH } from "constant";
// component 메인 화면 컴포넌트 //
export default function Main() {
// render 메인화면 렌더링 //
// function: 네비게이트 함수 //
const navigate = useNavigate();
return <div>메인화면</div>;
// component 메인 화면 상단 컴포넌트 //
const MainTop = () => {
// state: 주간 top3 게시물 리스트 상태 //
const [top3BoardList, setTop3BoardList] = useState<BoardListItem[]>([]);
// effect: 첫 마운트 시 실행될 함수 //
useEffect(() => {
setTop3BoardList(top3BoardListMock);
}, []);
// render 메인화면 상단 컴포넌트 렌더링 //
return (
<div id="main-top-wrapper">
<div className="main-top-container">
<div className="main-top-title">{"Project Demo\n-Main Page-"}</div>
<div className="main-top-contents-box">
<div className="main-top-contents-title">{"주간 TOP3 게시글"}</div>
<div className="main-top-contents">
{top3BoardList.map((top3ListItem) => (
<Top3Item top3ListItem={top3ListItem} />
))}
</div>
</div>
</div>
</div>
);
};
// component 메인 화면 하단 컴포넌트 //
const MainBottom = () => {
// state: 최신 게시물 리스트 상태(임시) //
const [currentBoardList, setCurrentBoardList] = useState<BoardListItem[]>(
[]
);
// state: 인기 검색어 리스트 상태 //
const [popularWordList, setPopularWordList] = useState<string[]>([]);
// event handler: 인기 검색어 클릭 이벤트 처리 //
const onPopularWordClickHandler = (word: string) => {
navigate(SEARCH_PATH(word));
};
// effect: 첫 마운트 시 실행될 함수 //
useEffect(() => {
setCurrentBoardList(latestBoardListMock);
setPopularWordList(["1", "2", "3"]);
}, []);
// render: 메인 화면 하단 컴포넌트 렌더링 //
return (
<div id="main-bottom-wrapper">
<div className="main-bottom-container">
<div className="main-bottom-title">{"최신 게시물"}</div>
<div className="main-bottom-contents-box">
<div className="main-bottom-current-contents">
{currentBoardList.map((boardListItem) => (
<BoardItem boardListItem={boardListItem} />
))}
</div>
<div className="main-bottom-popular-box">
<div className="main-bottom-popular-card">
<div className="main-bottom-popular-card-box">
<div className="main-bottom-popular-card-title">
{"인기 검색어"}
</div>
<div className="main-bottom-popular-card-contents">
{popularWordList.map((word) => (
<div
className="word-badge"
onClick={() => onPopularWordClickHandler(word)}
>
{word}
</div>
))}
</div>
</div>
</div>
</div>
</div>
<div className="main-bottom-pagination-box">
{/* <Pagination /> */}
</div>
</div>
</div>
);
};
// render 메인화면 컴포넌트 렌더링 //
return (
<>
<MainTop />
<MainBottom />
</>
);
}

131
board-front/src/views/Main/style.css
View File

@ -0,0 +1,131 @@
#main-top-wrapper {
padding: 80px 0 40px;
display: flex;
justify-content: center;
}
.main-top-container {
width: 1200px;
min-width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 56px;
}
.main-top-title {
color: rgba(0, 0, 0, 1);
text-align: center; /* 텍스트 중앙정렬 */
font-family: GimhaeGaya;
font-size: 40px;
font-weight: 400;
line-height: 140%;
letter-spacing: -0.8px;
white-space: pre-wrap; /* 줄바꿈 설정 */
}
.main-top-contents-box {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.main-top-contents-title {
color: rgba(0, 0, 0, 1);
font-size: 24px;
font-weight: 500;
line-height: 140%;
}
.main-top-contents {
display: flex;
justify-content: space-between;
gap: 24px;
}
#main-bottom-wrapper {
padding: 40px 0;
display: flex;
justify-content: center;
background-color: rgba(0, 0, 0, 0.05);
}
.main-bottom-container {
width: 1200px;
min-width: 1200px;
display: flex;
flex-direction: column;
gap: 20px;
}
.main-bottom-title {
color: rgba(0, 0, 0, 1);
font-size: 24px;
font-weight: 500;
line-height: 140%;
}
.main-bottom-contents-box {
width: 100%;
display: grid;
grid-template-columns: 8fr 4fr; /* 최신 게시물과 인기검색어 간의 비율 2 : 1 비율로 설정함 */
gap: 24px;
}
.main-bottom-current-contents {
grid-column: 1 / 2;
display: flex;
flex-direction: column;
gap: 16px;
}
.main-bottom-popular-box {
grid-column: 2 / 3;
}
.main-bottom-popular-card {
padding: 24px;
background-color: rgba(255, 255, 255, 1);
}
.main-bottom-popular-card-box {
display: flex;
flex-direction: column;
gap: 24px;
}
.main-bottom-popular-card-title {
color: rgba(0, 0, 0, 1);
font-size: 24px;
font-weight: 500;
line-height: 140%;
}
.main-bottom-popular-card-contents {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.main-bottom-pagination-box {
margin-top: 60px;
display: flex;
justify-content: center;
}

1311
pro.vuerd.json
View File

File diff suppressed because it is too large Load Diff