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.

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

Merge : 메인 페이지 css 및 중복 컴포넌트화 #33

Merged
merged 7 commits into from
Feb 9, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
Style : modal 컴포넌트 폴더정리 #10
- modal 컴포넌트를 따로 폴더를 만들어서 정리했습니다
  • Loading branch information
sheepdog13 committed Feb 6, 2024
commit a0fa5de3be51610e33c66e05af3fca9ad58336e5
102 changes: 102 additions & 0 deletions frontend/src/components/Main/UserModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import React from 'react';
import styled from 'styled-components';
import { media } from '../../style/mediaQuery';

const Wapper = styled.div`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wapper는 무슨 뜻인가요?
Wrapper와 역할과 변수명이 비슷한거같습니다.
오타라면 수정이 필요할거같네요

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오타네요 컨벤션에 따라서 고쳐보겠습니다

${media.smallMobile`
top: 36px;
padding: 10px;
`}
${media.largeMobile`
top: 41px;
padding: 10px;
`}
position: absolute;
top: 53px;
right: 4px;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
border-radius: 5px;
border: 0.5px solid #d3d3d3;
background: #fff;
p {
display: flex;
}
`;

const ModalBox = styled.div`
${media.largeMobile`
gap: 8px;
p {
font-size: 12px;
}
`}
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
`;

const ModalIconBox = styled.div<{ color: string }>`
${media.smallMobile`
width: 18px;
height: 18px;
`}
${media.largeMobile`
width: 20px;
height: 20px;
`}
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: ${(props) => props.color};
`;

const ModalImg = styled.img<{ size: string }>`
${media.smallMobile`
width: 10px;
height: 10px;
`}
${media.largeMobile`
width: 12px;
height: 12px;
`}
width: ${(props) => props.size};
height: ${(props) => props.size};
`;

function UserModal() {
return (
<Wapper>
<ModalBox>
<ModalIconBox color="#FF2868">
<ModalImg
size="15px"
src={`${process.env.PUBLIC_URL}/img/logout.webp`}
alt="connect"
/>
</ModalIconBox>
<p>로그아웃</p>
</ModalBox>
<ModalBox>
<ModalIconBox color="#5562EA">
<ModalImg
size="15px"
src={`${process.env.PUBLIC_URL}/img/profile.webp`}
alt="connect"
/>
</ModalIconBox>
<p>회원정보</p>
</ModalBox>
</Wapper>
);
}

export default UserModal;
121 changes: 3 additions & 118 deletions frontend/src/pages/Main.tsx
Original file line number Diff line number Diff line change
@@ -2,6 +2,8 @@
import styled from 'styled-components';
import { media } from '../style/mediaQuery';
import { useNavigate } from 'react-router-dom';
import UserModal from '../components/Main/UserModal';
import NavigationBar from '../components/common/NavigationBar';

Check failure on line 6 in frontend/src/pages/Main.tsx

GitHub Actions / lint (16.x)

'NavigationBar' is defined but never used

Check failure on line 6 in frontend/src/pages/Main.tsx

GitHub Actions / lint (21.x)

'NavigationBar' is defined but never used

const Wrapper = styled.div`
${media.smallMobile`
@@ -90,76 +92,6 @@
height: 25px;
`;

const UserModal = styled.div`
${media.smallMobile`
top: 36px;
padding: 10px;
`}
${media.largeMobile`
top: 41px;
padding: 10px;
`}
position: absolute;
top: 53px;
right: 4px;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
border-radius: 5px;
border: 0.5px solid #d3d3d3;
background: #fff;
p {
display: flex;
}
`;

const ModalBox = styled.div`
${media.largeMobile`
gap: 8px;
p {
font-size: 12px;
}
`}
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
`;

const ModalIconBox = styled.div<{ color: string }>`
${media.smallMobile`
width: 18px;
height: 18px;
`}
${media.largeMobile`
width: 20px;
height: 20px;
`}
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: ${(props) => props.color};
`;

const ModalImg = styled.img<{ size: string }>`
${media.smallMobile`
width: 10px;
height: 10px;
`}
${media.largeMobile`
width: 12px;
height: 12px;
`}
width: ${(props) => props.size};
height: ${(props) => props.size};
`;

const LetText = styled.h2`
${media.smallMobile`
font-size: 40px;
@@ -276,30 +208,6 @@
font-weight: 500;
`;

const ReportBox = styled.div`
${media.smallMobile`
width: 200px;
height: 50px;
border-radius: 8px;
`}
${media.largeMobile`
width: 300px;
height: 50px;
border-radius: 10px;
margin-bottom: 0px;
`}
display:flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 15px;
width: 400px;
height: 64px;
border-radius: 20px;
background: #fff;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
`;

function Main() {
const navigate = useNavigate();
const [openModal, setOpenModal] = useState<boolean>(false);
@@ -319,30 +227,7 @@
alt="skill"
/>
</Btn>
{openModal && (
<UserModal>
<ModalBox>
<ModalIconBox color="#FF2868">
<ModalImg
size="15px"
src={`${process.env.PUBLIC_URL}/img/logout.webp`}
alt="connect"
/>
</ModalIconBox>
<p>로그아웃</p>
</ModalBox>
<ModalBox>
<ModalIconBox color="#5562EA">
<ModalImg
size="15px"
src={`${process.env.PUBLIC_URL}/img/profile.webp`}
alt="connect"
/>
</ModalIconBox>
<p>회원정보</p>
</ModalBox>
</UserModal>
)}
{openModal && <UserModal />}
</Header>
<LetText>Let’s Go</LetText>
<ProblemBox>
Loading