diff --git a/src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.styled.ts b/src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.styled.ts
index 7a722b4e..1ca792ec 100644
--- a/src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.styled.ts
+++ b/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};
   }
 `;
diff --git a/src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.tsx b/src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.tsx
index a7bae981..752c6137 100644
--- a/src/components/applyComponents/phoneComponent/phoneComponentInput/PhoneComponentInput.tsx
+++ b/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>
   );
 };
 
diff --git a/src/components/common/header/Header.styled.ts b/src/components/common/header/Header.styled.ts
index f4f43131..0e91c959 100644
--- a/src/components/common/header/Header.styled.ts
+++ b/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`
diff --git a/src/components/common/modal/Modal.styled.ts b/src/components/common/modal/Modal.styled.ts
index 8fe0f387..a13a734a 100644
--- a/src/components/common/modal/Modal.styled.ts
+++ b/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;
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index 873fe1cb..929b5c1e 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/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>
diff --git a/src/components/mypage/myProfile/myProfile.styled.ts b/src/components/mypage/myProfile/MyProfile.styled.ts
similarity index 100%
rename from src/components/mypage/myProfile/myProfile.styled.ts
rename to src/components/mypage/myProfile/MyProfile.styled.ts
diff --git a/src/components/mypage/myProfile/myProfile.tsx b/src/components/mypage/myProfile/MyProfile.tsx
similarity index 100%
rename from src/components/mypage/myProfile/myProfile.tsx
rename to src/components/mypage/myProfile/MyProfile.tsx
diff --git a/src/components/mypage/myProfile/optionBox.styled.ts b/src/components/mypage/myProfile/OptionBox.styled.ts
similarity index 99%
rename from src/components/mypage/myProfile/optionBox.styled.ts
rename to src/components/mypage/myProfile/OptionBox.styled.ts
index 2f23d4d8..dea495ba 100644
--- a/src/components/mypage/myProfile/optionBox.styled.ts
+++ b/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;
+    }
   }
 `;
 
diff --git a/src/components/mypage/myProfile/optionBox.tsx b/src/components/mypage/myProfile/OptionBox.tsx
similarity index 100%
rename from src/components/mypage/myProfile/optionBox.tsx
rename to src/components/mypage/myProfile/OptionBox.tsx
diff --git a/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts b/src/components/projectFormComponents/inputComponent/InputComponent.styled.ts
similarity index 100%
rename from src/components/projectFormComponents/inputComponent/inputComponent.styled.ts
rename to src/components/projectFormComponents/inputComponent/InputComponent.styled.ts
diff --git a/src/components/projectFormComponents/inputComponent/inputComponent.tsx b/src/components/projectFormComponents/inputComponent/InputComponent.tsx
similarity index 95%
rename from src/components/projectFormComponents/inputComponent/inputComponent.tsx
rename to src/components/projectFormComponents/inputComponent/InputComponent.tsx
index 38ad621a..15df394f 100644
--- a/src/components/projectFormComponents/inputComponent/inputComponent.tsx
+++ b/src/components/projectFormComponents/inputComponent/InputComponent.tsx
@@ -1,5 +1,5 @@
 import { Control, FieldErrors, useController } from 'react-hook-form';
-import * as S from './inputComponent.styled';
+import * as S from './InputComponent.styled';
 import MdEditorInput from '../editor/MarkdownEditor';
 
 type InputProps = {
diff --git a/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx b/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx
index 2271d5ef..07864773 100644
--- a/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx
+++ b/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx
@@ -6,9 +6,9 @@ import { Control, FieldErrors, UseFormSetValue } from 'react-hook-form';
 import { PROJECT_DATA } from '../../../constants/projectConstants';
 import { CreateProjectFormValues } from '../../../models/createProject';
 import * as S from './ProjectInformationInput.styled';
-import Input from '../inputComponent/inputComponent';
 import { useSearchFilteringSkillTag } from '../../../hooks/useSearchFilteringSkillTag';
 import { ProjectDetailExtended } from '../../../models/projectDetail';
+import Input from '../inputComponent/InputComponent';
 
 interface ProjectInformationProps {
   errors: FieldErrors;
diff --git a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx b/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx
index 3e8144ac..2ec7c390 100644
--- a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx
+++ b/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>
           );
         })}
diff --git a/src/pages/apply/Apply.tsx b/src/pages/apply/Apply.tsx
index 7d2e56a6..f7bccd68 100644
--- a/src/pages/apply/Apply.tsx
+++ b/src/pages/apply/Apply.tsx
@@ -1,5 +1,5 @@
 import * as S from './Apply.styled';
-import Input from '../../components/projectFormComponents/inputComponent/inputComponent';
+import Input from '../../components/projectFormComponents/inputComponent/InputComponent';
 import { useFieldArray, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
diff --git a/src/pages/createProject/CreateProject.tsx b/src/pages/createProject/CreateProject.tsx
index 1885626c..bc747d58 100644
--- a/src/pages/createProject/CreateProject.tsx
+++ b/src/pages/createProject/CreateProject.tsx
@@ -2,7 +2,7 @@ import * as S from './CreateProject.styled';
 import { z } from 'zod';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import Input from '../../components/projectFormComponents/inputComponent/inputComponent';
+import Input from '../../components/projectFormComponents/inputComponent/InputComponent';
 import { CreateProjectFormValues, FormData } from '../../models/createProject';
 import ProjectInformationInput from '../../components/projectFormComponents/projectInformationInput/ProjectInformationInput';
 import { useState } from 'react';
diff --git a/src/pages/modifyProject/ModifyProject.tsx b/src/pages/modifyProject/ModifyProject.tsx
index 50db6a42..000fa204 100644
--- a/src/pages/modifyProject/ModifyProject.tsx
+++ b/src/pages/modifyProject/ModifyProject.tsx
@@ -2,7 +2,7 @@ import * as S from './ModifyProject.styled';
 import { z } from 'zod';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import Input from '../../components/projectFormComponents/inputComponent/inputComponent';
+import Input from '../../components/projectFormComponents/inputComponent/InputComponent';
 import { CreateProjectFormValues, FormData } from '../../models/createProject';
 import { useParams } from 'react-router-dom';
 import ProjectInformationInput from '../../components/projectFormComponents/projectInformationInput/ProjectInformationInput';