Skip to content

Commit 48cb5fd

Browse files
ByungyeonKimByungyeonKim
authored
Merge pull request #94 from Ospac/React-권수형-sprint7
[권수형] sprint7
2 parents 7314d6a + 2c42ba2 commit 48cb5fd

96 files changed

Lines changed: 2571 additions & 1495 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package-lock.json‎

Lines changed: 461 additions & 133 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"classnames": "^2.5.1",
1314
"react": "^19.1.0",
1415
"react-dom": "^19.1.0",
1516
"react-helmet": "^6.1.0",
1617
"react-router-dom": "^7.6.2",
17-
"styled-components": "^6.1.19",
1818
"vite-plugin-svgr": "^4.3.0"
1919
},
2020
"devDependencies": {
@@ -32,6 +32,7 @@
3232
"eslint-plugin-simple-import-sort": "^12.1.1",
3333
"globals": "^16.2.0",
3434
"prettier": "^3.6.2",
35+
"sass": "^1.90.0",
3536
"vite": "^7.0.0"
3637
}
3738
}

‎src/assets/icons/ic_back.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/assets/icons/ic_kebab.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/assets/icons/ic_loading_dots.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/assets/imgs/Img_inquiry_empty.png‎

9.29 KB
Loading

‎src/components/layout/Footer.jsx‎

Lines changed: 10 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
11
import { Link } from 'react-router-dom';
2-
import styled from 'styled-components';
32

43
import FacebookIcon from '@/assets/icons/ic_facebook.svg';
54
import InstagramIcon from '@/assets/icons/ic_instagram.svg';
65
import TwitterIcon from '@/assets/icons/ic_twitter.svg';
76
import YoutubeIcon from '@/assets/icons/ic_youtube.svg';
8-
import { device } from '@/styles/media';
7+
import styles from '@/components/layout/styles/Footer.module.scss';
98

109
export default function Footer() {
1110
return (
12-
<StyledFooter>
13-
<Container>
14-
<Copyright>©codeit - 2024</Copyright>
15-
<Info>
11+
<footer className={styles.footer}>
12+
<div className={styles.container}>
13+
<span className={styles.copyright}>©codeit - 2024</span>
14+
<div className={styles.info}>
1615
<Link to='privacy' aria-label='개인정보 관리 정책 화면으로 이동'>
1716
Privacy Policy
1817
</Link>
1918
<Link to='faq' aria-label='FAQ 화면으로 이동'>
2019
FAQ
2120
</Link>
22-
</Info>
23-
<Icons>
21+
</div>
22+
<div className={styles.icons}>
2423
<Link
2524
to='https://www.facebook.com'
2625
target='_blank'
@@ -53,61 +52,8 @@ export default function Footer() {
5352
>
5453
<InstagramIcon aria-label='인스타그램 아이콘' />
5554
</Link>
56-
</Icons>
57-
</Container>
58-
</StyledFooter>
55+
</div>
56+
</div>
57+
</footer>
5958
);
6059
}
61-
62-
const StyledFooter = styled.footer`
63-
display: flex;
64-
flex-direction: column;
65-
justify-content: flex-start;
66-
align-items: center;
67-
width: 100%;
68-
background-color: #111827;
69-
`;
70-
const Container = styled.div`
71-
display: flex;
72-
justify-content: space-between;
73-
align-items: center;
74-
flex-wrap: wrap;
75-
width: 100%;
76-
padding: ${({ theme }) => theme.spacing.xl};
77-
font-size: ${({ theme }) => theme.fontSize.sm};
78-
font-weight: 400;
79-
@media ${device.TABLET} {
80-
flex-wrap: nowrap;
81-
}
82-
@media ${device.DESKTOP} {
83-
padding: 2rem 6.5rem 6.75rem;
84-
}
85-
`;
86-
const Copyright = styled.span`
87-
color: ${({ theme }) => theme.colors.gray400};
88-
padding-top: 36px;
89-
order: 3;
90-
width: 100%;
91-
@media ${device.TABLET} {
92-
padding-top: 0;
93-
order: 1;
94-
width: auto;
95-
}
96-
`;
97-
const Info = styled.div`
98-
display: flex;
99-
justify-content: space-between;
100-
align-items: center;
101-
gap: ${({ theme }) => theme.spacing.xl};
102-
color: ${({ theme }) => theme.colors.gray200};
103-
`;
104-
const Icons = styled.div`
105-
display: flex;
106-
justify-content: space-between;
107-
align-items: center;
108-
gap: ${({ theme }) => theme.spacing.sm};
109-
& svg {
110-
width: ${({ theme }) => theme.fontSize.md};
111-
height: ${({ theme }) => theme.fontSize.md};
112-
}
113-
`;

‎src/components/layout/Header.jsx‎

Lines changed: 21 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,31 @@
11
import { Link, NavLink, useLocation } from 'react-router-dom';
2-
import styled from 'styled-components';
2+
import classNames from 'classnames/bind';
33

44
import PandaLogo from '@/assets/icons/panda_icon_small.svg';
55
import defaultProfileImg from '@/assets/imgs/default_profile.png';
6-
import { device } from '@/styles/media';
7-
import theme from '@/styles/theme';
8-
9-
function getLinkStyle({ isActive }) {
10-
return {
11-
color: isActive ? theme.colors.primary : theme.colors.gray600,
12-
};
13-
}
6+
import styles from '@/components/layout/styles/Header.module.scss';
147

158
export default function Header() {
169
const { pathname } = useLocation();
10+
const cn = classNames.bind(styles);
1711
return (
18-
<StyledHeader>
19-
<NavBar>
20-
<LogoWrapper>
21-
<Logo aria-label='판다마켓 로고' />
22-
<Title>
12+
<header className={styles.container}>
13+
<nav className={styles.navbar}>
14+
<div className={styles.logoWrapper}>
15+
<PandaLogo aria-label='판다마켓 로고' />
16+
<h1 className={styles.title}>
2317
<Link to={'/'} aria-label='홈으로 이동'>
2418
판다마켓
2519
</Link>
26-
</Title>
27-
</LogoWrapper>
28-
<NavList>
20+
</h1>
21+
</div>
22+
<ul className={styles.navList}>
2923
<li>
3024
<NavLink
25+
className={({ isActive }) => {
26+
return cn({ activeLink: isActive });
27+
}}
3128
to='/community'
32-
style={getLinkStyle}
3329
aria-label='자유게시판으로 이동'
3430
>
3531
자유게시판
@@ -38,110 +34,23 @@ export default function Header() {
3834
<li>
3935
<NavLink
4036
to='/items'
41-
style={({ isActive }) => {
37+
className={({ isActive }) => {
4238
const isItemsPage = isActive || pathname === '/additem';
43-
return {
44-
color: isItemsPage
45-
? theme.colors.primary
46-
: theme.colors.gray600,
47-
};
39+
return cn({ activeLink: isItemsPage });
4840
}}
4941
aria-label='중고마켓 페이지로 이동'
5042
>
5143
중고마켓
5244
</NavLink>
5345
</li>
54-
</NavList>
46+
</ul>
5547
{/* <LoginButton>로그인</LoginButton> */}
56-
<ProfileImgWrapper>
48+
<div className={styles.profileImgWrapper}>
5749
<Link to='/login' aria-label='로그인 화면으로 이동'>
5850
<img src={defaultProfileImg} alt='회색 기본 프로필 이미지' />
5951
</Link>
60-
</ProfileImgWrapper>
61-
</NavBar>
62-
</StyledHeader>
52+
</div>
53+
</nav>
54+
</header>
6355
);
6456
}
65-
const StyledHeader = styled.header`
66-
position: fixed;
67-
top: 0;
68-
left: 0;
69-
right: 0;
70-
z-index: 999;
71-
display: flex;
72-
justify-content: center;
73-
align-items: center;
74-
background-color: #ffffff;
75-
border-bottom: 1px solid #dfdfdf;
76-
padding: ${({ theme }) => theme.spacing.sm} 0;
77-
`;
78-
const NavBar = styled.nav`
79-
display: flex;
80-
justify-content: space-between;
81-
align-items: center;
82-
flex-grow: 1;
83-
margin: 0 ${({ theme }) => theme.spacing.md};
84-
85-
@media ${device.TABLET} {
86-
margin: 0 ${({ theme }) => theme.spacing.lg};
87-
}
88-
@media ${device.DESKTOP} {
89-
margin: 0 200px;
90-
}
91-
`;
92-
const LogoWrapper = styled.div`
93-
display: flex;
94-
justify-content: space-between;
95-
align-items: center;
96-
gap: 10px;
97-
`;
98-
const Logo = styled(PandaLogo)`
99-
width: 3.125rem;
100-
height: 3.125rem;
101-
display: none;
102-
@media ${device.DESKTOP} {
103-
display: block;
104-
}
105-
`;
106-
const Title = styled.h1`
107-
font-size: ${({ theme }) => theme.fontSize.lg};
108-
font-weight: 700;
109-
font-family: ${({ theme }) => theme.fontFamily.logo};
110-
color: ${({ theme }) => theme.colors.primary};
111-
`;
112-
const NavList = styled.ul`
113-
flex: 1 1;
114-
display: flex;
115-
align-items: center;
116-
justify-content: flex-start;
117-
gap: ${({ theme }) => theme.spacing.sm};
118-
font-size: ${({ theme }) => theme.fontSize.sm};
119-
margin-left: ${({ theme }) => theme.spacing.md};
120-
color: ${({ theme }) => theme.colors.gray600};
121-
@media ${device.DESKTOP} {
122-
font-size: ${({ theme }) => theme.fontSize.lg};
123-
margin-left: ${({ theme }) => theme.spacing['3xl']};
124-
gap: ${({ theme }) => theme.spacing.xl};
125-
}
126-
`;
127-
const ProfileImgWrapper = styled.div`
128-
border-radius: ${({ theme }) => theme.borderRadius.circle};
129-
background-color: ${({ theme }) => theme.colors.gray400};
130-
width: 40px;
131-
height: 40px;
132-
`;
133-
// const LoginButton = styled.button`
134-
// font-weight: 600;
135-
// font-size: ${({ theme }) => theme.fontSize.md};
136-
// line-height: 26px;
137-
// text-align: center;
138-
// padding: ${({ theme }) => theme.spacing.sm} ${({ theme }) => theme.spacing.lg};
139-
// color: ${({ theme }) => theme.colors.gray100};
140-
// background-color: ${({ theme }) => theme.colors.primary};
141-
// border-radius: ${({ theme }) => theme.borderRadius.xs};
142-
// border: none;
143-
// @media ${device.DESKTOP} {
144-
// width: 8rem;
145-
// height: 3rem;
146-
// }
147-
// `;

‎src/components/layout/MainLayout.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Header from '@/components/layout/Header';
2+
import { Outlet } from 'react-router-dom';
3+
import styles from '@/components/layout/styles/MainLayout.module.scss';
4+
5+
export function MainLayout() {
6+
return (
7+
<>
8+
<Header />
9+
<div className={styles.layoutContainer}>
10+
<Outlet />
11+
</div>
12+
</>
13+
);
14+
}

‎src/components/layout/styles/Footer.module.scss‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.footer {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: flex-start;
5+
align-items: center;
6+
width: 100%;
7+
background-color: #cddbf8;
8+
.container {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
flex-wrap: wrap;
13+
width: 100%;
14+
padding: var(--spacing-xl);
15+
font-size: var(--font-size-sm);
16+
font-weight: 400;
17+
@include tablet {
18+
flex-wrap: nowrap;
19+
}
20+
@include desktop {
21+
padding: 2rem 6.5rem 6.75rem;
22+
}
23+
24+
.copyright {
25+
color: var(--color-gray-400);
26+
padding-top: 2rem;
27+
order: 3;
28+
width: 100%;
29+
@include tablet {
30+
padding-top: 0;
31+
order: 1;
32+
width: auto;
33+
}
34+
}
35+
.info {
36+
display: flex;
37+
justify-content: space-between;
38+
align-items: center;
39+
gap: var(--spacing-xl);
40+
color: var(--color-gray-200);
41+
}
42+
.icons {
43+
display: flex;
44+
justify-content: space-between;
45+
align-items: center;
46+
gap: var(--spacing-sm);
47+
& svg {
48+
width: 1rem;
49+
height: 1rem;
50+
}
51+
}
52+
}
53+
}

0 commit comments

Comments
 (0)