Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: 전체적인 1차 QA 반영 #63

Merged
merged 7 commits into from
Feb 23, 2025
Merged

Fix: 전체적인 1차 QA 반영 #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d1b7976
fix: farm 소개 앱뷰 최종 완성(팜 소개 추가)
dewbeeny Feb 22, 2025
e4ad719
fix: 헤더 고정, isActive로 클릭시 색상 유지 기능 추가, 파밍로그 4월 오픈 모달 활성화
dewbeeny Feb 22, 2025
50e5e57
fix: 메인페이지 하단 순서 변경, 동국대학교 링크 변경(소프트웨어 교육원으로), 그 외 반응형 작업
dewbeeny Feb 22, 2025
c97ef5e
fix: 앱뷰 트랙네비게이션 반응형 작업
dewbeeny Feb 22, 2025
63c90e9
fix: 프로젝트/블로그 반응형 작업 완료
dewbeeny Feb 22, 2025
88f8c5e
fix: 사용하지 않는 함수, props 제거
dewbeeny Feb 22, 2025
d4db92e
fix: 인트로 웹뷰 반응형 적용 및 줄글 삭제
dewbeeny Feb 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/assets/Icons/logobutton.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 18 additions & 3 deletions src/components/Header/Header.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import styled from "styled-components";

export const HeaderContainer = styled.header`
position: relative;
position: fixed;
width: 100%;
height: 70px;
background-color: rgb(245, 245, 245);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 25px;
z-index: 1000;

`;

export const MobileHeader = styled.div`
Expand All @@ -31,6 +33,7 @@ export const NavWrapper = styled.div`
justify-content: center;
gap: 35px;
flex-grow: 1;

`;

export const Nav = styled.nav`
Expand All @@ -40,15 +43,27 @@ export const Nav = styled.nav`
gap: 40px;
`;

export const NavItem = styled.a<{ $isMobile: boolean; $isTablet: boolean }>`
export const NavItem = styled.a<{ $isMobile: boolean; $isTablet: boolean; isActive: boolean }>`
text-decoration: none;
font-size: ${({$isTablet}) => ($isTablet ? "15px": "18px")};
font-weight: 500;
color: #102C19;
color: ${({ isActive }) => (isActive ? "#28723f" : "#102C19")};
cursor: pointer;
position: relative;
&:hover {
color: #28723f;
}
&:hover::after, ${({ isActive }) => isActive && `
&::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: #28723f;
}
`}
`;

export const FarmingLogButton = styled.button`
Expand Down
92 changes: 76 additions & 16 deletions src/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import { useCallback, useState } from 'react';
import { useNavigate } from 'react-router';
import { useState } from 'react';
import { useNavigate, useLocation } from 'react-router';
import * as S from './Header.styled';
import Popup from '../Popup/Popup';
import Hamburger from '../../assets/Icons/Hamburger.png';
import CloseIcon from '../../assets/Icons/close.png';
import useMediaQueries from '@/hooks/useMediaQueries';

export default function Header() {
const [isPopupOpen, setPopupOpen] = useState(false);
const [isMenuOpen, setMenuOpen] = useState(false);
const navigate = useNavigate();
const location = useLocation();
const { isMobile, isTablet } = useMediaQueries();

const onContainerClick = useCallback(() => {}, []);

const handleNavItemClick = (path?: string) => {
if (path) navigate(path);
setMenuOpen(false);
Expand All @@ -31,26 +29,88 @@ export default function Header() {
<S.Logo onClick={() => navigate('/')}>Farm System</S.Logo>
<S.NavWrapper>
<S.Nav>
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => navigate('/')}>홈</S.NavItem>
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => navigate('/blog')}>블로그 / 프로젝트</S.NavItem>
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>소식</S.NavItem>
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => navigate('/FAQ')}>FAQ</S.NavItem>
<S.NavItem
$isTablet={isTablet}
$isMobile={isMobile}
onClick={() => navigate('/')}
isActive={location.pathname === '/'}
>
홈
</S.NavItem>
<S.NavItem
$isTablet={isTablet}
$isMobile={isMobile}
onClick={() => navigate('/blog')}
isActive={location.pathname === '/blog'}
>
블로그 / 프로젝트
</S.NavItem>
<S.NavItem
$isTablet={isTablet}
$isMobile={isMobile}
onClick={() => setPopupOpen(true)}
isActive={false}
>
소식
</S.NavItem>
<S.NavItem
$isTablet={isTablet}
$isMobile={isMobile}
onClick={() => navigate('/FAQ')}
isActive={location.pathname === '/FAQ'}
>
FAQ
</S.NavItem>
</S.Nav>
</S.NavWrapper>
<S.FarmingLogButton onClick={onContainerClick}>파밍로그</S.FarmingLogButton>
<S.FarmingLogButton onClick={() => setPopupOpen(true)}>파밍로그</S.FarmingLogButton>
</>
)}

<S.MobileNavWrapper $isMenuOpen={isMenuOpen}>
{isMobile && (
<>
<S.CloseButton src={CloseIcon} alt="Close Menu" onClick={() => setMenuOpen(false)} />
<S.MobileNav>
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => handleNavItemClick('/')}>홈</S.NavItem>
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => handleNavItemClick('/')}>블로그 / 프로젝트</S.NavItem>
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>소식</S.NavItem>
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={() => setPopupOpen(true)}>FAQ</S.NavItem>
<S.NavItem $isTablet={isTablet} $isMobile={isMobile} onClick={onContainerClick}>파밍로그</S.NavItem>
<S.NavItem
$isTablet={isTablet}
$isMobile={isMobile}
onClick={() => handleNavItemClick('/')}
isActive={location.pathname === '/'}
>
홈
</S.NavItem>
<S.NavItem
$isTablet={isTablet}
$isMobile={isMobile}
onClick={() => handleNavItemClick('/blog')}
isActive={location.pathname === '/blog'}
>
블로그 / 프로젝트
</S.NavItem>
<S.NavItem
$isTablet={isTablet}
$isMobile={isMobile}
onClick={() => setPopupOpen(true)}
isActive={false}
>
소식
</S.NavItem>
<S.NavItem
$isTablet={isTablet}
$isMobile={isMobile}
onClick={() => handleNavItemClick('/FAQ')}
isActive={location.pathname === '/FAQ'}
>
FAQ
</S.NavItem>
<S.NavItem
$isTablet={isTablet}
$isMobile={isMobile}
onClick={() => setPopupOpen(true)}
isActive={false}
>
파밍로그
</S.NavItem>
</S.MobileNav>
</>
)}
Expand Down
7 changes: 2 additions & 5 deletions src/components/Popup/Popup.styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import styled from 'styled-components';


//${({ $isMobile, $isTablet }) => ($isMobile ? "280px" : $isTablet ? "330px" : "390px")}

export const PopupOverlay = styled.div`
position: fixed;
inset: 0;
Expand All @@ -14,10 +11,10 @@ export const PopupOverlay = styled.div`
`;

export const PopupBox = styled.div<{ $isMobile: boolean; $isTablet: boolean }>`
width: 500px;
width: ${({ $isMobile, $isTablet }) => ($isMobile ? "260px" : $isTablet ? "420px" : "500px")};
width: ${({ $isMobile, $isTablet }) => ($isMobile ? "300px" : $isTablet ? "420px" : "500px")};
background-color: #fcfcfc;
border-radius: 15px;
border: 3px solid #28723f;
text-align: center;
padding: ${({ $isMobile }) => ($isMobile ? "30px" : "40px")};
z-index: 10000;
Expand Down
25 changes: 11 additions & 14 deletions src/pages/Blog/BlogList.styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,24 @@ export const Container = styled.div`
align-items: center;
gap: 20px;
width: 100%;
margin-top: 60px;
`;

// 상단들을 감싸는 컨테이너
export const TableContainer = styled.div`
display: flex;
gap: 30px;
width: 100%;
justify-content: end;

height: 10vh;
justify-content: flex-end; /* 왼쪽 정렬 */
min-height: 60px;
width: 100%;
`;

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

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

/* 텍스트 컨테이너*/
export const TextContainer = styled.div`

export const TextContainer = styled.div<{$isMobile: boolean;}>`
padding-top: 20vh;
height: 100px;
display: flex;

justify-content: center;
text-align: center;

flex-direction: column;
color: black;
font-size: 32px;
font-size: ${(props) => (props.$isMobile ? "20px" : "32px")};
font-weight: 600;

a{
font-size: 14px;
a {
font-size: ${(props) => (props.$isMobile ? "10px" : "14px")};
font-weight: 300;
}
gap: 10px;
Expand Down
94 changes: 47 additions & 47 deletions src/pages/Blog/BlogList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,71 @@
import * as S from './BlogList.styles';
import BlogItem, { BlogItemProps } from './BlogItem';
import BlankImg from '../../assets/Images/Blog_Project/blank_img.svg';
// import BlogItem, { BlogItemProps } from './BlogItem';
// import BlankImg from '../../assets/Images/Blog_Project/blank_img.svg';
import useMediaQueries from '@/hooks/useMediaQueries';

/** 샘플용 더미 데이터 */
const blogData: BlogItemProps[] = [
{
title: '임시직 프로젝트 1',
description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
imageUrl: BlankImg,
blogUrl: 'https://www.naver.com',
},
{
title: '임시직 프로젝트 2',
description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
imageUrl: BlankImg,
blogUrl: 'https://www.naver.com',
},
{
title: '임시직 프로젝트 3',
description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
imageUrl: BlankImg,
blogUrl: 'https://www.naver.com',
},
{
title: '임시직 프로젝트 1',
description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
imageUrl: BlankImg,
blogUrl: 'https://www.naver.com',
},
{
title: '임시직 프로젝트 2',
description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
imageUrl: BlankImg,
blogUrl: 'https://www.naver.com',
},
{
title: '임시직 프로젝트 3',
description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
imageUrl: BlankImg,
blogUrl: 'https://www.naver.com',
},
];
// const blogData: BlogItemProps[] = [
// {
// title: '임시직 프로젝트 1',
// description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
// imageUrl: BlankImg,
// blogUrl: 'https://www.naver.com',
// },
// {
// title: '임시직 프로젝트 2',
// description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
// imageUrl: BlankImg,
// blogUrl: 'https://www.naver.com',
// },
// {
// title: '임시직 프로젝트 3',
// description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
// imageUrl: BlankImg,
// blogUrl: 'https://www.naver.com',
// },
// {
// title: '임시직 프로젝트 1',
// description: '팜시스템에 필요한 모든 정보를 담은 앱! W-300 H-40 고정사이즈로써 2줄까지 소개가 가능하다.',
// imageUrl: BlankImg,
// blogUrl: 'https://www.naver.com',
// },
// {
// title: '임시직 프로젝트 2',
// description: '백동민 최강 백동민 힘내 백동민 파이팅 2.',
// imageUrl: BlankImg,
// blogUrl: 'https://www.naver.com',
// },
// {
// title: '임시직 프로젝트 3',
// description: '백동민 최강 백동민 힘내 백동민 파이팅 3.',
// imageUrl: BlankImg,
// blogUrl: 'https://www.naver.com',
// },
// ];

const BlogList: React.FC = () => {
const { isTablet, isBig } = useMediaQueries();
const { isMobile } = useMediaQueries();

return (
<S.Container>
<S.TableContainer>
<S.SubDescription> * 블로그 클릭 시 외부로 연결돼요.</S.SubDescription>
<S.SubDescription $isMobile={isMobile}> * 블로그 클릭 시 외부로 연결돼요.</S.SubDescription>
</S.TableContainer>

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