fix: 스타일드컴포넌트 변경 후 생긴 오류 수정 (#issue 222)

src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.styled.ts

@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+export const PhoneDiv = styled.div``;
+
 export const PhoneInput = styled.input`
   width: 70px;
   padding: 10px;
@@ -8,7 +10,7 @@ export const PhoneInput = styled.input`
   text-align: center;
   font-size: ${({ theme }) => theme.heading.semiSmall.fontSize};
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: ${({ theme }) => theme.heading.small.fontSize};
   }
 `;

src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.tsx

@@ -20,14 +20,14 @@ const PhoneInput = ({
   });
 
   return (
-    <div>
+    <S.PhoneDiv>
       <S.PhoneInput
         {...field}
         maxLength={maxLength}
         placeholder={placeholder}
         name={name}
       />
-    </div>
+    </S.PhoneDiv>
   );
 };
 

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

@@ -17,45 +17,7 @@ export const HeaderContainer = styled.div`
   }
 `;
 
-export const Wrapper = styled.nav`
-  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 Wrapper = styled.nav``;
 
 export const LogoImg = styled.img`
   width: 80px;
@@ -102,11 +64,6 @@ export const List = styled.ul`
       border-bottom-right-radius: ${({ theme }) => theme.borderRadius.primary};
     }
   }
-
-  li {
-    width: 100%;
-    padding: 1rem;
-  }
 `;
 
 export const Item = styled.li`

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

@@ -1,9 +1,12 @@
 import styled from 'styled-components';
 
 export const ModalContainer = styled.div<{
-  $fade: boolean;
+  $fadeOut: boolean;
 }>`
-  @keyframes ${({ $fade }) => !$fade && 'fade-in'} {
+  animation: ${({ $fadeOut }) => ($fadeOut ? 'fade-out' : 'fade-in')} 0.3s
+    ease-in-out forwards;
+
+  @keyframes fade-in {
     from {
       opacity: 0;
     }
@@ -12,7 +15,7 @@ export const ModalContainer = styled.div<{
     }
   }
 
-  @keyframes ${({ $fade }) => $fade && 'fade-out'} {
+  @keyframes fade-out {
     from {
       opacity: 1;
     }
@@ -21,13 +24,6 @@ export const ModalContainer = styled.div<{
     }
   }
 
-  &.fade-in {
-    animation: fade-in 0.3s ease-in-out forwards;
-  }
-  &.fade-out {
-    animation: fade-out 0.3s ease-in-out forwards;
-  }
-
   position: fixed;
   top: 0;
   left: 0;

src/components/common/modal/Modal.tsx

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

src/components/mypage/myProfile/optionBox.styled.ts

@@ -33,6 +33,7 @@ export const OptionLabel = styled.label<{ $isSelected: boolean }>`
 
     @media ${({ theme }) => theme.mediaQuery.tablet} {
       font-size: 0.7rem;
+    }
   }
 `;
 

src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx

@@ -47,7 +47,9 @@ const FieldCategoryComponent = ({
               isSelected={selectedMethod === idx}
               onClick={() => handleClick(idx)}
             >
-              <S.NameSpan>{data.name}</S.NameSpan>
+              <S.NameSpan isSelected={selectedMethod === idx}>
+                {data.name}
+              </S.NameSpan>
             </S.CategoryItem>
           );
         })}