Skip to content

Commit

Permalink
feat/로그인 모달 연결 #18
Browse files Browse the repository at this point in the history
  • Loading branch information
@yelynnn
yelynnn committed Jan 28, 2025
1 parent 5e52284 commit 2f1def2
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 182 deletions.
342 changes: 176 additions & 166 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,197 +11,207 @@ import chargeTicket from '../assets/searchBox/img-charge-ticket.png';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import CategoryMenu from './CategoryMenu';
import { useModalContext } from './Modal/context/ModalContext';
import SplashModal from '../pages/login/components/SplashModal';

const Header = () => {
const navigate = useNavigate();
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
const [isCatClicked, setIsCatClicked] = useState<boolean>(false);

return (
<Container>
<TopContainer>
<LoginBtn state={String(isLoggedIn)}>
{isLoggedIn ? '로그아웃' : '로그인'}
</LoginBtn>
<LineDiv height={'27px'} margin={'0 32px'} />
<SmallIconDiv>
<img src={icNotice} />
<IconTextDiv fontSize={'14px'}>알림</IconTextDiv>
</SmallIconDiv>
<LineDiv height={'27px'} margin={'0 32px'} />
<SmallIconDiv>
<img src={icSetting} />
<IconTextDiv fontSize={'14px'}>설정</IconTextDiv>
</SmallIconDiv>
</TopContainer>
<SearchBoxContainer>
<LogoImg src={imgLogo} onClick={()=>navigate('/')} />
<CategoryContainer>
<IconHamburgerDiv onClick={()=>setIsCatClicked(!isCatClicked)}>
<img src={icHamburger} width={24} />
<IconTextDiv fontSize={'14px'}>카테고리</IconTextDiv>
</IconHamburgerDiv>
<CategoryMenu clicked={isCatClicked} />
</CategoryContainer>
<SearchBoxDiv>
<TicketImg src={ticket} width={88} />
<SearchInput type="text" />
<SearchIcon src={icSearch} />
</SearchBoxDiv>
<IconDiv>
<img src={icHeart} width={24} />
<IconTextDiv fontSize={'13px'}>관심</IconTextDiv>
</IconDiv>
<IconDiv>
<img src={icMyPage} width={24} />
<IconTextDiv fontSize={'13px'}>마이페이지</IconTextDiv>
</IconDiv>
<IconDiv>
<img src={chargeTicket} width={28.952} />
<IconTextDiv fontSize={'13px'}>충전/환전</IconTextDiv>
</IconDiv>
</SearchBoxContainer>
</Container>
);
}
const navigate = useNavigate();
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
const [isCatClicked, setIsCatClicked] = useState<boolean>(false);
const { openModal } = useModalContext();

const handleOpenModal = () => {
openModal(({ onClose }) => <SplashModal onClose={onClose} />);
};

return (
<Container>
<TopContainer>
<LoginBtn onClick={handleOpenModal} state={String(isLoggedIn)}>
{isLoggedIn ? '로그아웃' : '로그인'}
</LoginBtn>
<LineDiv height={'27px'} margin={'0 32px'} />
<SmallIconDiv>
<img src={icNotice} />
<IconTextDiv fontSize={'14px'}>알림</IconTextDiv>
</SmallIconDiv>
<LineDiv height={'27px'} margin={'0 32px'} />
<SmallIconDiv>
<img src={icSetting} />
<IconTextDiv fontSize={'14px'}>설정</IconTextDiv>
</SmallIconDiv>
</TopContainer>
<SearchBoxContainer>
<LogoImg src={imgLogo} onClick={() => navigate('/')} />
<CategoryContainer>
<IconHamburgerDiv onClick={() => setIsCatClicked(!isCatClicked)}>
<img src={icHamburger} width={24} />
<IconTextDiv fontSize={'14px'}>카테고리</IconTextDiv>
</IconHamburgerDiv>
<CategoryMenu clicked={isCatClicked} />
</CategoryContainer>
<SearchBoxDiv>
<TicketImg src={ticket} width={88} />
<SearchInput type="text" />
<SearchIcon src={icSearch} />
</SearchBoxDiv>
<IconDiv>
<img src={icHeart} width={24} />
<IconTextDiv fontSize={'13px'}>관심</IconTextDiv>
</IconDiv>
<IconDiv>
<img src={icMyPage} width={24} />
<IconTextDiv fontSize={'13px'}>마이페이지</IconTextDiv>
</IconDiv>
<IconDiv>
<img src={chargeTicket} width={28.952} />
<IconTextDiv fontSize={'13px'}>충전/환전</IconTextDiv>
</IconDiv>
</SearchBoxContainer>
</Container>
);
};

export default Header;

const Container = styled.div`
display: flex;
flex-direction: column;
width: 100%;
height: 188px;
border-bottom: 1px solid #E4E4E4;
// background-color: green;
`
display: flex;
flex-direction: column;
width: 100%;
height: 188px;
border-bottom: 1px solid #e4e4e4;
// background-color: green;
`;

const TopContainer = styled.div`
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0 34px 26px 0;
`

const LoginBtn = styled.button<{state:string}>`
width: 99.355px;
height: 26.644px;
border-radius: 40px;
${props => props.state==='true' ?
`border: 1px solid #8F8E94;
display: flex;
justify-content: flex-end;
align-items: center;
margin: 0 34px 26px 0;
`;

const LoginBtn = styled.button<{ state: string }>`
width: 99.355px;
height: 26.644px;
border-radius: 40px;
${(props) =>
props.state === 'true'
? `border: 1px solid #8F8E94;
background-color: transparent;
color: #8F8E94;`
:
`border: 1px solid #C908FF;
: `border: 1px solid #C908FF;
background: rgba(201, 8, 255, 0.20);
color: #C908FF;`
}
font-family: Pretendard;
font-size: 15px;
font-weight: 500;
line-height: 18px;
letter-spacing: -0.165px;
cursor: pointer;
`

const IconTextDiv = styled.div<{fontSize:string, color?:string, fontWeight?:string}>`
font-size: ${props => props.fontSize};
color: ${props => props.color || '#8F8E94'};
text-align: center;
font-family: Pretendard;
font-style: normal;
font-weight: ${props => props.fontWeight || '600'};
line-height: 18px;
letter-spacing: -0.165px;
`
color: #C908FF;`}
font-family: Pretendard;
font-size: 15px;
font-weight: 500;
line-height: 18px;
letter-spacing: -0.165px;
cursor: pointer;
`;

const IconTextDiv = styled.div<{
fontSize: string;
color?: string;
fontWeight?: string;
}>`
font-size: ${(props) => props.fontSize};
color: ${(props) => props.color || '#8F8E94'};
text-align: center;
font-family: Pretendard;
font-style: normal;
font-weight: ${(props) => props.fontWeight || '600'};
line-height: 18px;
letter-spacing: -0.165px;
`;

const SearchBoxContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
`
display: flex;
justify-content: center;
align-items: center;
`;

const LogoImg = styled.img`
width: 133px;
height: 64px;
margin-right: 39px;
&:hover {
cursor: pointer;
}
`
width: 133px;
height: 64px;
margin-right: 39px;
&:hover {
cursor: pointer;
}
`;

const CategoryContainer = styled.div`
position: relative;
`
position: relative;
`;

const SearchBoxDiv = styled.div`
position: relative;
width: 560px;
height: 42px;
border-radius: 51px;
border: 2px solid #8F8E94;
box-sizing: border-box;
padding: 3px 20px;
display: flex;
margin: 0 26px 0 0;
`
position: relative;
width: 560px;
height: 42px;
border-radius: 51px;
border: 2px solid #8f8e94;
box-sizing: border-box;
padding: 3px 20px;
display: flex;
margin: 0 26px 0 0;
`;

const TicketImg = styled.img`
position: absolute;
bottom: 105%;
left: 50%;
transform: translateX(-50%);
`
position: absolute;
bottom: 105%;
left: 50%;
transform: translateX(-50%);
`;

const SearchInput = styled.input`
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 18px;
font-family: Pretendard;
font-style: normal;
line-height: 18px;
letter-spacing: -0.165px;
`
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 18px;
font-family: Pretendard;
font-style: normal;
line-height: 18px;
letter-spacing: -0.165px;
`;

const SearchIcon = styled.img`
cursor: pointer;
width: 20.975px;
`
cursor: pointer;
width: 20.975px;
`;

const SmallIconDiv = styled.div`
display: flex;
column-gap: 11px;
align-items: center;
justify-content: space-evenly;
height: 65px;
cursor: pointer;
`
display: flex;
column-gap: 11px;
align-items: center;
justify-content: space-evenly;
height: 65px;
cursor: pointer;
`;

const IconDiv = styled.div`
display: flex;
flex-direction: column;
row-gap: 6px;
align-items: center;
justify-content: space-evenly;
height: 56px;
min-width: 61px;
margin: 0 25px 0 0;
cursor: pointer;
`
display: flex;
flex-direction: column;
row-gap: 6px;
align-items: center;
justify-content: space-evenly;
height: 56px;
min-width: 61px;
margin: 0 25px 0 0;
cursor: pointer;
`;

const IconHamburgerDiv = styled.div`
display: flex;
flex-direction: column;
row-gap: 6px;
align-items: center;
justify-content: space-between;
height: 56px;
min-width: 61px;
margin: 0 25px 0 0;
cursor: pointer;
`
display: flex;
flex-direction: column;
row-gap: 6px;
align-items: center;
justify-content: space-between;
height: 56px;
min-width: 61px;
margin: 0 25px 0 0;
cursor: pointer;
`;

// const UploadBtn = styled.button`
// color: white;
Expand All @@ -219,9 +229,9 @@ const IconHamburgerDiv = styled.div`
// margin-left: 13px;
// `

const LineDiv = styled.div<{height:string, margin:string}>`
width: 1px;
height: ${props => props.height};
background: #8F8E94;
margin: ${props => props.margin};
`
const LineDiv = styled.div<{ height: string; margin: string }>`
width: 1px;
height: ${(props) => props.height};
background: #8f8e94;
margin: ${(props) => props.margin};
`;
Loading

0 comments on commit 2f1def2

Please sign in to comment.