[권수형] sprint7

package.json

@@ -10,11 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^7.6.2",
-    "styled-components": "^6.1.19",
     "vite-plugin-svgr": "^4.3.0"
   },
   "devDependencies": {
@@ -32,6 +32,7 @@
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^16.2.0",
     "prettier": "^3.6.2",
+    "sass": "^1.90.0",
     "vite": "^7.0.0"
   }
 }

src/components/layout/Footer.jsx

@@ -1,26 +1,25 @@
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 
 import FacebookIcon from '@/assets/icons/ic_facebook.svg';
 import InstagramIcon from '@/assets/icons/ic_instagram.svg';
 import TwitterIcon from '@/assets/icons/ic_twitter.svg';
 import YoutubeIcon from '@/assets/icons/ic_youtube.svg';
-import { device } from '@/styles/media';
+import styles from '@/components/layout/styles/Footer.module.scss';
 
 export default function Footer() {
   return (
-    <StyledFooter>
-      <Container>
-        <Copyright>©codeit - 2024</Copyright>
-        <Info>
+    <footer className={styles.footer}>
+      <div className={styles.container}>
+        <span className={styles.copyright}>©codeit - 2024</span>
+        <div className={styles.info}>
           <Link to='privacy' aria-label='개인정보 관리 정책 화면으로 이동'>
             Privacy Policy
           </Link>
           <Link to='faq' aria-label='FAQ 화면으로 이동'>
             FAQ
           </Link>
-        </Info>
-        <Icons>
+        </div>
+        <div className={styles.icons}>
           <Link
             to='https://www.facebook.com'
             target='_blank'
@@ -53,61 +52,8 @@ export default function Footer() {
           >
             <InstagramIcon aria-label='인스타그램 아이콘' />
           </Link>
-        </Icons>
-      </Container>
-    </StyledFooter>
+        </div>
+      </div>
+    </footer>
   );
 }
-
-const StyledFooter = styled.footer`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  background-color: #111827;
-`;
-const Container = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  padding: ${({ theme }) => theme.spacing.xl};
-  font-size: ${({ theme }) => theme.fontSize.sm};
-  font-weight: 400;
-  @media ${device.TABLET} {
-    flex-wrap: nowrap;
-  }
-  @media ${device.DESKTOP} {
-    padding: 2rem 6.5rem 6.75rem;
-  }
-`;
-const Copyright = styled.span`
-  color: ${({ theme }) => theme.colors.gray400};
-  padding-top: 36px;
-  order: 3;
-  width: 100%;
-  @media ${device.TABLET} {
-    padding-top: 0;
-    order: 1;
-    width: auto;
-  }
-`;
-const Info = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: ${({ theme }) => theme.spacing.xl};
-  color: ${({ theme }) => theme.colors.gray200};
-`;
-const Icons = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: ${({ theme }) => theme.spacing.sm};
-  & svg {
-    width: ${({ theme }) => theme.fontSize.md};
-    height: ${({ theme }) => theme.fontSize.md};
-  }
-`;

src/components/layout/Header.jsx

@@ -1,35 +1,31 @@
 import { Link, NavLink, useLocation } from 'react-router-dom';
-import styled from 'styled-components';
+import classNames from 'classnames/bind';
 
 import PandaLogo from '@/assets/icons/panda_icon_small.svg';
 import defaultProfileImg from '@/assets/imgs/default_profile.png';
-import { device } from '@/styles/media';
-import theme from '@/styles/theme';
-
-function getLinkStyle({ isActive }) {
-  return {
-    color: isActive ? theme.colors.primary : theme.colors.gray600,
-  };
-}
+import styles from '@/components/layout/styles/Header.module.scss';
 
 export default function Header() {
   const { pathname } = useLocation();
+  const cn = classNames.bind(styles);
   return (
-    <StyledHeader>
-      <NavBar>
-        <LogoWrapper>
-          <Logo aria-label='판다마켓 로고' />
-          <Title>
+    <header className={styles.container}>
+      <nav className={styles.navbar}>
+        <div className={styles.logoWrapper}>
+          <PandaLogo aria-label='판다마켓 로고' />
+          <h1 className={styles.title}>
             <Link to={'/'} aria-label='홈으로 이동'>
               판다마켓
             </Link>
-          </Title>
-        </LogoWrapper>
-        <NavList>
+          </h1>
+        </div>
+        <ul className={styles.navList}>
           <li>
             <NavLink
+              className={({ isActive }) => {
+                return cn({ activeLink: isActive });
+              }}
               to='/community'
-              style={getLinkStyle}
               aria-label='자유게시판으로 이동'
             >
               자유게시판
@@ -38,110 +34,23 @@ export default function Header() {
           <li>
             <NavLink
               to='/items'
-              style={({ isActive }) => {
+              className={({ isActive }) => {
                 const isItemsPage = isActive || pathname === '/additem';
-                return {
-                  color: isItemsPage
-                    ? theme.colors.primary
-                    : theme.colors.gray600,
-                };
+                return cn({ activeLink: isItemsPage });
               }}
               aria-label='중고마켓 페이지로 이동'
             >
               중고마켓
             </NavLink>
           </li>
-        </NavList>
+        </ul>
         {/* <LoginButton>로그인</LoginButton> */}
-        <ProfileImgWrapper>
+        <div className={styles.profileImgWrapper}>
           <Link to='/login' aria-label='로그인 화면으로 이동'>
             <img src={defaultProfileImg} alt='회색 기본 프로필 이미지' />
           </Link>
-        </ProfileImgWrapper>
-      </NavBar>
-    </StyledHeader>
+        </div>
+      </nav>
+    </header>
   );
 }
-const StyledHeader = styled.header`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: #ffffff;
-  border-bottom: 1px solid #dfdfdf;
-  padding: ${({ theme }) => theme.spacing.sm} 0;
-`;
-const NavBar = styled.nav`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-grow: 1;
-  margin: 0 ${({ theme }) => theme.spacing.md};
-
-  @media ${device.TABLET} {
-    margin: 0 ${({ theme }) => theme.spacing.lg};
-  }
-  @media ${device.DESKTOP} {
-    margin: 0 200px;
-  }
-`;
-const LogoWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-`;
-const Logo = styled(PandaLogo)`
-  width: 3.125rem;
-  height: 3.125rem;
-  display: none;
-  @media ${device.DESKTOP} {
-    display: block;
-  }
-`;
-const Title = styled.h1`
-  font-size: ${({ theme }) => theme.fontSize.lg};
-  font-weight: 700;
-  font-family: ${({ theme }) => theme.fontFamily.logo};
-  color: ${({ theme }) => theme.colors.primary};
-`;
-const NavList = styled.ul`
-  flex: 1 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: ${({ theme }) => theme.spacing.sm};
-  font-size: ${({ theme }) => theme.fontSize.sm};
-  margin-left: ${({ theme }) => theme.spacing.md};
-  color: ${({ theme }) => theme.colors.gray600};
-  @media ${device.DESKTOP} {
-    font-size: ${({ theme }) => theme.fontSize.lg};
-    margin-left: ${({ theme }) => theme.spacing['3xl']};
-    gap: ${({ theme }) => theme.spacing.xl};
-  }
-`;
-const ProfileImgWrapper = styled.div`
-  border-radius: ${({ theme }) => theme.borderRadius.circle};
-  background-color: ${({ theme }) => theme.colors.gray400};
-  width: 40px;
-  height: 40px;
-`;
-// const LoginButton = styled.button`
-//   font-weight: 600;
-//   font-size: ${({ theme }) => theme.fontSize.md};
-//   line-height: 26px;
-//   text-align: center;
-//   padding: ${({ theme }) => theme.spacing.sm} ${({ theme }) => theme.spacing.lg};
-//   color: ${({ theme }) => theme.colors.gray100};
-//   background-color: ${({ theme }) => theme.colors.primary};
-//   border-radius: ${({ theme }) => theme.borderRadius.xs};
-//   border: none;
-//   @media ${device.DESKTOP} {
-//     width: 8rem;
-//     height: 3rem;
-//   }
-// `;

src/components/layout/MainLayout.tsx

@@ -0,0 +1,14 @@
+import Header from '@/components/layout/Header';
+import { Outlet } from 'react-router-dom';
+import styles from '@/components/layout/styles/MainLayout.module.scss';
+
+export function MainLayout() {
+  return (
+    <>
+      <Header />
+      <div className={styles.layoutContainer}>
+        <Outlet />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,53 @@
+.footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  background-color: #cddbf8;
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    padding: var(--spacing-xl);
+    font-size: var(--font-size-sm);
+    font-weight: 400;
+    @include tablet {
+      flex-wrap: nowrap;
+    }
+    @include desktop {
+      padding: 2rem 6.5rem 6.75rem;
+    }
+
+    .copyright {
+      color: var(--color-gray-400);
+      padding-top: 2rem;
+      order: 3;
+      width: 100%;
+      @include tablet {
+        padding-top: 0;
+        order: 1;
+        width: auto;
+      }
+    }
+    .info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--spacing-xl);
+      color: var(--color-gray-200);
+    }
+    .icons {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--spacing-sm);
+      & svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+}