refactor: className 혼용 삭제, styled-componenet 통일 (#issue 216)

src/components/applyComponents/careersComponent/CareersComponent.styled.ts

@@ -11,7 +11,7 @@ export const CareerContainer = styled.div`
   width: 100%;
   margin-bottom: 10px;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     display: flex;
     gap: 10px;
   }

src/components/applyComponents/careersComponent/careersInputComponent/CareersComponentInput.styled.ts

@@ -26,7 +26,7 @@ export const CareerInput = styled.input`
     ${dateStyle}
   }
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     width: 100%;
     margin-bottom: 12px;
     font-size: ${({ theme }) => theme.heading.small.fontSize};

src/components/auth/InputText.styled.ts

@@ -9,7 +9,7 @@ export const Container = styled.div`
   background-color: ${({ theme }) => theme.color.white};
   width: 100%;
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
       padding: 0.5rem 0.75rem;
 `;
 

src/components/common/avatar/Avatar.styled.ts

@@ -7,14 +7,14 @@ export const AvatarContainer = styled.div<Omit<AvatarProps, 'image'>>`
   border-radius: 50%;
   border: 1px solid ${({ theme }) => theme.color.border};
 
-  .avatar {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-  }
-
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     width: calc(${({ size }) => size} * 0.85);
     height: calc(${({ size }) => size} * 0.85);
   }
 `;
+
+export const AvatarImg = styled.img`
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+`;

src/components/common/avatar/Avatar.tsx

@@ -13,7 +13,7 @@ function Avatar({ size, image }: AvatarProps) {
   return (
     <S.AvatarContainer size={size}>
       {typeof image === 'string' || !image ? (
-        <img className='avatar' src={releasedImg} alt='Avatar' />
+        <S.AvatarImg src={releasedImg} alt='Avatar' />
       ) : (
         image
       )}

src/components/common/avatar/AvartarList.tsx → src/components/common/avatar/AvatarList.tsx

@@ -3,17 +3,13 @@ import { ProjectSkillTag } from '../../../models/manageMyProject';
 import Avatar from './Avatar';
 import { UserSkillTag } from '../../../models/applicant';
 import { formatImgPath } from '../../../util/formatImgPath';
-export interface AvartarListProps {
+export interface AvatarListProps {
   avatars: ProjectSkillTag[] | UserSkillTag[] | null;
   size?: string;
   maxCount?: number;
 }
 
-function AvartarList({
-  avatars,
-  size = '33px',
-  maxCount = 8,
-}: AvartarListProps) {
+function AvatarList({ avatars, size = '33px', maxCount = 8 }: AvatarListProps) {
   if (!avatars) return;
   const displayAvatars = avatars.slice(0, maxCount);
 
@@ -32,4 +28,4 @@ function AvartarList({
   );
 }
 
-export default AvartarList;
+export default AvatarList;

src/components/common/header/Header.styled.ts

@@ -9,66 +9,107 @@ export const HeaderContainer = styled.div`
   align-items: center;
   padding: 10px 120px;
 
-  img {
-    width: 80px;
-    height: 80px;
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    padding: 10px 60px;
+  }
+  @media ${({ theme }) => theme.mediaQuery.mobile} {
+    padding: 10px 16px;
+  }
+`;
 
-    @media ${({ theme }) => theme.mediaQuery.tablet} {
-      width: 70px;
-      height: 70px;
-    }
+export const Wrapper = styled.nav`
+  ul {
+    display: flex;
+    flex-direction: column;
+    width: 9rem;
 
-    @media ${({ theme }) => theme.mediaQuery.mobile} {
-      width: 50px;
-      height: 50px;
-    }
-  }
+    a,
+    button {
+      font-size: 0.9rem;
+      font-weight: 600;
+      width: 100%;
+      line-height: 1;
+      text-align: center;
+      color: inherit;
 
-  .auth {
-    ul {
-      display: flex;
-      flex-direction: column;
-      width: 9rem;
-
-      a,
-      button {
-        font-size: 0.9rem;
-        font-weight: 600;
-        width: 100%;
-        line-height: 1;
-        text-align: center;
-        color: inherit;
-
-        &:hover {
-          color: ${({ theme }) => theme.color.white};
-          background-color: ${({ theme }) => theme.color.navy};
-        }
+      &:hover {
+        color: ${({ theme }) => theme.color.white};
+        background-color: ${({ theme }) => theme.color.navy};
       }
+    }
 
-      a {
-        &:first-child {
-          border-top-left-radius: ${({ theme }) => theme.borderRadius.primary};
-          border-top-right-radius: ${({ theme }) => theme.borderRadius.primary};
-        }
-        &:last-child {
-          border-bottom-left-radius: ${({ theme }) =>
-            theme.borderRadius.primary};
-          border-bottom-right-radius: ${({ theme }) =>
-            theme.borderRadius.primary};
-        }
+    a {
+      &:first-child {
+        border-top-left-radius: ${({ theme }) => theme.borderRadius.primary};
+        border-top-right-radius: ${({ theme }) => theme.borderRadius.primary};
       }
-
-      li {
-        width: 100%;
-        padding: 1rem;
+      &:last-child {
+        border-bottom-left-radius: ${({ theme }) => theme.borderRadius.primary};
+        border-bottom-right-radius: ${({ theme }) =>
+          theme.borderRadius.primary};
       }
     }
+
+    li {
+      width: 100%;
+      padding: 1rem;
+    }
   }
+`;
+
+export const LogoImg = styled.img`
+  width: 80px;
+  height: 80px;
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
-    padding: 10px 60px;
+    width: 70px;
+    height: 70px;
   }
+
   @media ${({ theme }) => theme.mediaQuery.mobile} {
-    padding: 10px 16px;
+    width: 50px;
+    height: 50px;
   }
 `;
+
+export const List = styled.ul`
+  display: flex;
+  flex-direction: column;
+  width: 9rem;
+
+  a,
+  button {
+    font-size: 0.9rem;
+    font-weight: 600;
+    width: 100%;
+    line-height: 1;
+    text-align: center;
+    color: inherit;
+
+    &:hover {
+      color: ${({ theme }) => theme.color.white};
+      background-color: ${({ theme }) => theme.color.navy};
+    }
+  }
+
+  a {
+    &:first-child {
+      border-top-left-radius: ${({ theme }) => theme.borderRadius.primary};
+      border-top-right-radius: ${({ theme }) => theme.borderRadius.primary};
+    }
+    &:last-child {
+      border-bottom-left-radius: ${({ theme }) => theme.borderRadius.primary};
+      border-bottom-right-radius: ${({ theme }) => theme.borderRadius.primary};
+    }
+  }
+
+  li {
+    width: 100%;
+    padding: 1rem;
+  }
+`;
+
+export const Item = styled.li`
+  width: 100%;
+  padding: 1rem;
+`;

src/components/common/header/Header.tsx

@@ -29,9 +29,9 @@ function Header() {
   return (
     <S.HeaderContainer>
       <Link to={ROUTES.main}>
-        <img src={Mainlogo} alt='logo' />
+        <S.LogoImg src={Mainlogo} alt='logo' />
       </Link>
-      <nav className='auth'>
+      <S.Wrapper>
         <DropDown
           toggleButton={
             isLoading ? (
@@ -45,31 +45,31 @@ function Header() {
         >
           <>
             {isLoggedIn && (
-              <ul>
+              <S.List>
                 <Link to={ROUTES.mypage}>
-                  <li>마이페이지</li>
+                  <S.Item>마이페이지</S.Item>
                 </Link>
                 <Link to={ROUTES.manageProjectsRoot}>
-                  <li>공고관리</li>
+                  <S.Item>공고관리</S.Item>
                 </Link>
                 <Link to='#' onClick={(e) => e.preventDefault()}>
-                  <li onClick={userLogout}>로그아웃</li>
+                  <S.Item onClick={userLogout}>로그아웃</S.Item>
                 </Link>
-              </ul>
+              </S.List>
             )}
             {!isLoggedIn && (
-              <ul>
+              <S.List>
                 <Link to={ROUTES.login}>
-                  <li>로그인</li>
+                  <S.Item>로그인</S.Item>
                 </Link>
                 <Link to={ROUTES.signup}>
-                  <li>회원가입</li>
+                  <S.Item>회원가입</S.Item>
                 </Link>
-              </ul>
+              </S.List>
             )}
           </>
         </DropDown>
-      </nav>
+      </S.Wrapper>
       <Modal isOpen={isOpen} onClose={handleModalClose}>
         {message}
       </Modal>

src/components/common/modal/Modal.styled.ts

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 
-export const ModalContainer = styled.div`
-  @keyframes fade-in {
+export const ModalContainer = styled.div<{
+  $fade: boolean;
+}>`
+  @keyframes ${({ $fade }) => !$fade && 'fade-in'} {
     from {
       opacity: 0;
     }
@@ -10,7 +12,7 @@ export const ModalContainer = styled.div`
     }
   }
 
-  @keyframes fade-out {
+  @keyframes ${({ $fade }) => $fade && 'fade-out'} {
     from {
       opacity: 1;
     }

src/components/common/modal/Modal.tsx

@@ -31,10 +31,7 @@ const Modal = ({ children, isOpen, onClose }: ModalProps) => {
 
   return createPortal(
     <ScrollPreventor>
-      <S.ModalContainer
-        className={isFadingOut ? 'fade-out' : 'fade-in'}
-        onAnimationEnd={handleAnimationEnd}
-      >
+      <S.ModalContainer $fade={isFadingOut} onAnimationEnd={handleAnimationEnd}>
         <S.ModalBody ref={modalRefs}>
           <ModalCloseButton onClose={handleClose} />
           <S.ModalIconWrapper>

src/components/common/noResultPage/NoResultPage.tsx

@@ -9,7 +9,7 @@ export default function NoResultPage({ height }: NoResultPageProps) {
   return (
     <S.Container height={height}>
       <S.Wrapper>
-        <S.Title className='noResultTitle'>검색 결과가 없습니다.</S.Title>
+        <S.Title>검색 결과가 없습니다.</S.Title>
         <FaceFrownIcon />
       </S.Wrapper>
     </S.Container>

src/components/home/projectCardLists/pagination/Pagination.tsx

@@ -53,7 +53,6 @@ export default function Pagination() {
               <ChevronLeftIcon />
             </S.PaginationButton>
             <S.PaginationDoubleButton
-              className='doubleButton'
               onClick={() => handleUpdateFilters('page', 1)}
             >
               1
@@ -75,7 +74,6 @@ export default function Pagination() {
           <>
             <EllipsisHorizontalIcon />
             <S.PaginationDoubleButton
-              className='doubleButton'
               onClick={() => handleUpdateFilters('page', lastPage)}
             >
               {lastPage}

src/components/home/searchFiltering/filteringContents/FilteringContents.tsx

@@ -62,10 +62,7 @@ export default function FilteringContents() {
         selects={methodTagsData}
         defaultValue={SEARCH_FILTERING_DEFAULT_VALUE.METHOD}
       />
-      <S.BeginnerButtonWrapper
-        className='filteringButton beginnerButton'
-        $toggle={searchFilters.isBeginner}
-      >
+      <S.BeginnerButtonWrapper $toggle={searchFilters.isBeginner}>
         <S.BeginnerButton
           $toggle={searchFilters.isBeginner}
           onClick={() =>

src/components/home/searchFiltering/filteringContents/filtering/Filtering.tsx

@@ -77,7 +77,6 @@ export default function Filtering({ selects, defaultValue }: FilteringProps) {
             <S.SelectWrapper>
               {addAll.map((select) => (
                 <S.SelectButton
-                  className='option'
                   key={`${defaultValue}-${select.id}`}
                   onClick={() => handleValueClick(select.name, select.id)}
                 >

src/components/home/searchFiltering/search/Search.tsx

@@ -26,7 +26,6 @@ export default function Search() {
         <S.SearchForm onSubmit={handleSubmitSearch}>
           <S.SearchInput
             type='text'
-            className='search'
             placeholder='제목, 글 내용 검색'
             value={searchText}
             onChange={handleTextChange}
@@ -37,7 +36,7 @@ export default function Search() {
                 <XCircleIcon />
               </S.SearchButton>
             )}
-            <S.SearchButton className='searchIcon'>
+            <S.SearchButton>
               <MagnifyingGlassIcon />
             </S.SearchButton>
           </S.ButtonWrapper>