Skip to content

Commit 2090f41

Browse files
dewbeenydewbeeny
authored
Merge pull request #63 from DguFarmSystem/fix/62-mainpage
Fix: 전체적인 1차 QA 반영
2 parents 98ad474 + d4db92e commit 2090f41

File tree

16 files changed

+612
-451
lines changed

16 files changed

+612
-451
lines changed

‎src/assets/Icons/logobutton.png

29 KB
Loading

‎src/components/Header/Header.styled.tsx

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import styled from "styled-components";
22

33
export const HeaderContainer = styled.header`
4-
position: relative;
4+
position: fixed;
55
width: 100%;
66
height: 70px;
77
background-color: rgb(245, 245, 245);
88
display: flex;
99
align-items: center;
1010
justify-content: space-between;
1111
padding: 0 25px;
12+
z-index: 1000;
13+
1214
`;
1315

1416
export const MobileHeader = styled.div`
@@ -31,6 +33,7 @@ export const NavWrapper = styled.div`
3133
justify-content: center;
3234
gap: 35px;
3335
flex-grow: 1;
36+
3437
`;
3538

3639
export const Nav = styled.nav`
@@ -40,15 +43,27 @@ export const Nav = styled.nav`
4043
gap: 40px;
4144
`;
4245

43-
export const NavItem = styled.a<{ $isMobile: boolean; $isTablet: boolean }>`
46+
export const NavItem = styled.a<{ $isMobile: boolean; $isTablet: boolean; isActive: boolean }>`
4447
text-decoration: none;
4548
font-size: ${({$isTablet}) => ($isTablet ? "15px": "18px")};
4649
font-weight: 500;
47-
color: #102C19;
50+
color: ${({ isActive }) => (isActive ? "#28723f" : "#102C19")};
4851
cursor: pointer;
52+
position: relative;
4953
&:hover {
5054
color: #28723f;
5155
}
56+
&:hover::after, ${({ isActive }) => isActive && `
57+
&::after {
58+
content: '';
59+
position: absolute;
60+
left: 0;
61+
bottom: -2px;
62+
width: 100%;
63+
height: 2px;
64+
background-color: #28723f;
65+
}
66+
`}
5267
`;
5368

5469
export const FarmingLogButton = styled.button`

‎src/components/Header/Header.tsx

Lines changed: 76 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
import { useCallback, useState } from 'react';
2-
import { useNavigate } from 'react-router';
1+
import { useState } from 'react';
2+
import { useNavigate, useLocation } from 'react-router';
33
import * as S from './Header.styled';
44
import Popup from '../Popup/Popup';
55
import Hamburger from '../../assets/Icons/Hamburger.png';
6-
import CloseIcon from '../../assets/Icons/close.png';
76
import useMediaQueries from '@/hooks/useMediaQueries';
87

98
export default function Header() {
109
const [isPopupOpen, setPopupOpen] = useState(false);
1110
const [isMenuOpen, setMenuOpen] = useState(false);
1211
const navigate = useNavigate();
12+
const location = useLocation();
1313
const { isMobile, isTablet } = useMediaQueries();
1414

15-
const onContainerClick = useCallback(() => {}, []);
16-
1715
const handleNavItemClick = (path?: string) => {
1816
if (path) navigate(path);
1917
setMenuOpen(false);
@@ -31,26 +29,88 @@ export default function Header() {
3129
<S.Logo onClick={() => navigate('/')}>Farm System</S.Logo>
3230
<S.NavWrapper>
3331
<S.Nav>
34-
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => navigate('/')}>홈</S.NavItem>
35-
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => navigate('/blog')}>블로그 / 프로젝트</S.NavItem>
36-
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>소식</S.NavItem>
37-
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => navigate('/FAQ')}>FAQ</S.NavItem>
32+
<S.NavItem
33+
$isTablet={isTablet}
34+
$isMobile={isMobile}
35+
onClick={() => navigate('/')}
36+
isActive={location.pathname === '/'}
37+
>
38+
홈
39+
</S.NavItem>
40+
<S.NavItem
41+
$isTablet={isTablet}
42+
$isMobile={isMobile}
43+
onClick={() => navigate('/blog')}
44+
isActive={location.pathname === '/blog'}
45+
>
46+
블로그 / 프로젝트
47+
</S.NavItem>
48+
<S.NavItem
49+
$isTablet={isTablet}
50+
$isMobile={isMobile}
51+
onClick={() => setPopupOpen(true)}
52+
isActive={false}
53+
>
54+
소식
55+
</S.NavItem>
56+
<S.NavItem
57+
$isTablet={isTablet}
58+
$isMobile={isMobile}
59+
onClick={() => navigate('/FAQ')}
60+
isActive={location.pathname === '/FAQ'}
61+
>
62+
FAQ
63+
</S.NavItem>
3864
</S.Nav>
3965
</S.NavWrapper>
40-
<S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
66+
<S.FarmingLogButton onClick={() => setPopupOpen(true)}>파밍로그</S.FarmingLogButton>
4167
</>
4268
)}
4369

4470
<S.MobileNavWrapper $isMenuOpen={isMenuOpen}>
4571
{isMobile && (
4672
<>
47-
<S.CloseButton src={CloseIcon} alt="Close Menu" onClick={() => setMenuOpen(false)} />
4873
<S.MobileNav>
49-
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => handleNavItemClick('/')}>홈</S.NavItem>
50-
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => handleNavItemClick('/')}>블로그 / 프로젝트</S.NavItem>
51-
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>소식</S.NavItem>
52-
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>FAQ</S.NavItem>
53-
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={onContainerClick}>파밍로그</S.NavItem>
74+
<S.NavItem
75+
$isTablet={isTablet}
76+
$isMobile={isMobile}
77+
onClick={() => handleNavItemClick('/')}
78+
isActive={location.pathname === '/'}
79+
>
80+
홈
81+
</S.NavItem>
82+
<S.NavItem
83+
$isTablet={isTablet}
84+
$isMobile={isMobile}
85+
onClick={() => handleNavItemClick('/blog')}
86+
isActive={location.pathname === '/blog'}
87+
>
88+
블로그 / 프로젝트
89+
</S.NavItem>
90+
<S.NavItem
91+
$isTablet={isTablet}
92+
$isMobile={isMobile}
93+
onClick={() => setPopupOpen(true)}
94+
isActive={false}
95+
>
96+
소식
97+
</S.NavItem>
98+
<S.NavItem
99+
$isTablet={isTablet}
100+
$isMobile={isMobile}
101+
onClick={() => handleNavItemClick('/FAQ')}
102+
isActive={location.pathname === '/FAQ'}
103+
>
104+
FAQ
105+
</S.NavItem>
106+
<S.NavItem
107+
$isTablet={isTablet}
108+
$isMobile={isMobile}
109+
onClick={() => setPopupOpen(true)}
110+
isActive={false}
111+
>
112+
파밍로그
113+
</S.NavItem>
54114
</S.MobileNav>
55115
</>
56116
)}

‎src/components/Popup/Popup.styled.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import styled from 'styled-components';
22

3-
4-
//${({ $isMobile, $isTablet }) => ($isMobile ? "280px" : $isTablet ? "330px" : "390px")}
5-
63
export const PopupOverlay = styled.div`
74
position: fixed;
85
inset: 0;
@@ -14,10 +11,10 @@ export const PopupOverlay = styled.div`
1411
`;
1512

1613
export const PopupBox = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
17-
width: 500px;
18-
width: ${({ $isMobile, $isTablet }) => ($isMobile ? "260px" : $isTablet ? "420px" : "500px")};
14+
width: ${({ $isMobile, $isTablet }) => ($isMobile ? "300px" : $isTablet ? "420px" : "500px")};
1915
background-color: #fcfcfc;
2016
border-radius: 15px;
17+
border: 3px solid #28723f;
2118
text-align: center;
2219
padding: ${({ $isMobile }) => ($isMobile ? "30px" : "40px")};
2320
z-index: 10000;

‎src/pages/Blog/BlogList.styles.tsx

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,24 @@ export const Container = styled.div`
77
align-items: center;
88
gap: 20px;
99
width: 100%;
10+
margin-top: 60px;
1011
`;
1112

1213
// 상단들을 감싸는 컨테이너
1314
export const TableContainer = styled.div`
1415
display: flex;
1516
gap: 30px;
16-
width: 100%;
17-
justify-content: end;
18-
19-
height: 10vh;
17+
justify-content: flex-end; /* 왼쪽 정렬 */
2018
min-height: 60px;
19+
width: 100%;
2120
`;
2221

23-
export const SubDescription = styled.div`
24-
height: 30px;
22+
export const SubDescription = styled.div<{$isMobile: boolean;}>`
2523
color: var(--FarmSystem_DarkGrey);
26-
font-size: 18px;
24+
font-size: ${(props) => (props.$isMobile ? "10px" : "18px")};
2725
font-weight: 400;
26+
width: 100%;
27+
text-align: right; /* 오른쪽 정렬 */
2828
`;
2929

3030
/** 프로젝트 리스트(카드)들을 감싸는 컨테이너 */
@@ -46,22 +46,19 @@ export const DescriptionContainer = styled.div`
4646
`;
4747

4848
/* 텍스트 컨테이너*/
49-
export const TextContainer = styled.div`
50-
49+
export const TextContainer = styled.div<{$isMobile: boolean;}>`
5150
padding-top: 20vh;
5251
height: 100px;
5352
display: flex;
54-
5553
justify-content: center;
5654
text-align: center;
57-
5855
flex-direction: column;
5956
color: black;
60-
font-size: 32px;
57+
font-size: ${(props) => (props.$isMobile ? "20px" : "32px")};
6158
font-weight: 600;
6259
63-
a{
64-
font-size: 14px;
60+
a {
61+
font-size: ${(props) => (props.$isMobile ? "10px" : "14px")};
6562
font-weight: 300;
6663
}
6764
gap: 10px;

‎src/pages/Blog/BlogList.tsx

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,71 @@
11
import * as S from './BlogList.styles';
2-
import BlogItem, { BlogItemProps } from './BlogItem';
3-
import BlankImg from '../../assets/Images/Blog_Project/blank_img.svg';
2+
// import BlogItem, { BlogItemProps } from './BlogItem';
3+
// import BlankImg from '../../assets/Images/Blog_Project/blank_img.svg';
44
import useMediaQueries from '@/hooks/useMediaQueries';
55

66
/** 샘플용 더미 데이터 */
7-
const blogData: BlogItemProps[] = [
8-
{
9-
title: '임시직 프로젝트 1',
10-
description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
11-
imageUrl: BlankImg,
12-
blogUrl: 'https://www.naver.com',
13-
},
14-
{
15-
title: '임시직 프로젝트 2',
16-
description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
17-
imageUrl: BlankImg,
18-
blogUrl: 'https://www.naver.com',
19-
},
20-
{
21-
title: '임시직 프로젝트 3',
22-
description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
23-
imageUrl: BlankImg,
24-
blogUrl: 'https://www.naver.com',
25-
},
26-
{
27-
title: '임시직 프로젝트 1',
28-
description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
29-
imageUrl: BlankImg,
30-
blogUrl: 'https://www.naver.com',
31-
},
32-
{
33-
title: '임시직 프로젝트 2',
34-
description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
35-
imageUrl: BlankImg,
36-
blogUrl: 'https://www.naver.com',
37-
},
38-
{
39-
title: '임시직 프로젝트 3',
40-
description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
41-
imageUrl: BlankImg,
42-
blogUrl: 'https://www.naver.com',
43-
},
44-
];
7+
// const blogData: BlogItemProps[] = [
8+
// {
9+
// title: '임시직 프로젝트 1',
10+
// description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
11+
// imageUrl: BlankImg,
12+
// blogUrl: 'https://www.naver.com',
13+
// },
14+
// {
15+
// title: '임시직 프로젝트 2',
16+
// description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
17+
// imageUrl: BlankImg,
18+
// blogUrl: 'https://www.naver.com',
19+
// },
20+
// {
21+
// title: '임시직 프로젝트 3',
22+
// description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
23+
// imageUrl: BlankImg,
24+
// blogUrl: 'https://www.naver.com',
25+
// },
26+
// {
27+
// title: '임시직 프로젝트 1',
28+
// description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
29+
// imageUrl: BlankImg,
30+
// blogUrl: 'https://www.naver.com',
31+
// },
32+
// {
33+
// title: '임시직 프로젝트 2',
34+
// description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
35+
// imageUrl: BlankImg,
36+
// blogUrl: 'https://www.naver.com',
37+
// },
38+
// {
39+
// title: '임시직 프로젝트 3',
40+
// description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
41+
// imageUrl: BlankImg,
42+
// blogUrl: 'https://www.naver.com',
43+
// },
44+
// ];
4545

4646
const BlogList: React.FC = () => {
47-
const { isTablet, isBig } = useMediaQueries();
47+
const { isMobile } = useMediaQueries();
4848

4949
return (
5050
<S.Container>
5151
<S.TableContainer>
52-
<S.SubDescription> * 블로그 클릭 시 외부로 연결돼요.</S.SubDescription>
52+
<S.SubDescription $isMobile={isMobile}> * 블로그 클릭 시 외부로 연결돼요.</S.SubDescription>
5353
</S.TableContainer>
5454

5555
{/* 프로젝트 카드 리스트 */}
5656
{/* 지금은 더미데이터의 갯수로 블로그가 있는지 없는지 판단합니다. 디버깅시 projectdata.length>6 이렇게 하면 아무 것도 없는 창 뜹니다.*/}
57-
{(blogData.length > 5) ? (
57+
{/* {(blogData.length > 5) ? (
5858
<S.ListContainer $isTablet={isTablet} $isBig={isBig}>
5959
{blogData.map((item, index) => (
6060
<BlogItem key={index} {...item} />
6161
))}
62-
</S.ListContainer>) : (
63-
<S.TextContainer>
62+
</S.ListContainer>) : ( */}
63+
<S.TextContainer $isMobile={isMobile}>
6464
아직 등록된 글이 없어요.
6565
<a>파밍로그를 통해 글을 작성해보세요!</a>
6666
</S.TextContainer>
67-
)
68-
}
67+
{/* )
68+
} */}
6969
</S.Container>
7070
);
7171
};

0 commit comments

Comments
 (0)