반응형을 위한 미디어 쿼리 추가

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

@@ -10,10 +10,15 @@ export const CareerContainer = styled.div`
   gap: 15px;
   width: 100%;
   margin-bottom: 10px;
+
+  @media (max-width: 963px) {
+    flex-direction: column;
+    gap: 10px;
+  }
 `;
 
 export const AddButton = styled(Button)`
-  width: 5%;
+  width: 50px;
   padding: 10px;
   cursor: pointer;
   border: 1px solid ${({ theme }) => theme.color.border};

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

@@ -39,6 +39,22 @@ export const CareerInput = styled.input`
     flex: 2;
     font-size: ${({ theme }) => theme.heading.small.fontSize};
   }
+
+  @media (max-width: 963px) {
+    width: 100%;
+    flex: 1;
+    margin-bottom: 10px;
+
+    &:nth-child(1),
+    &:nth-child(4) {
+      flex: 1;
+    }
+
+    &:nth-child(2),
+    &:nth-child(3) {
+      flex: 1;
+    }
+  }
 `;
 
 export const FormError = styled.p`

src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts

@@ -5,36 +5,29 @@ export const SectionInput = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1px;
+
+  @media (max-width: 1024px) {
+    margin-bottom: 25px;
+  }
 `;
 
 export const InfoRow = styled.div`
   display: flex;
   align-items: flex-start;
   margin-bottom: 20px;
 
-  label {
-    font-size: 1rem;
-    font-weight: bold;
-    color: #666;
-    text-align: left;
-    margin-right: 30px;
-  }
-
   img {
     width: 40px;
     height: 40px;
     border: 1px solid ${({ theme }) => theme.color.border};
-    border-radius: 50%;
+    border-radius: ${({ theme }) => theme.borderRadius.primary};
     margin-bottom: 5px;
     margin-right: 10px;
   }
 
-  p {
-    font-size: 1rem;
-    font-weight: bold;
-    color: #000;
-    flex: 0.8;
-    text-align: left;
+  @media (max-width: 1024px) {
+    align-items: flex-start;
+    margin-bottom: 15px;
   }
 `;
 
@@ -46,13 +39,38 @@ export const InfoLabel = styled.label`
   text-align: left;
   margin-right: 15px;
   white-space: nowrap;
+
+  @media (max-width: 1024px) {
+    margin-right: 30px;
+    margin-bottom: 8px;
+    font-size: 0.9rem;
+  }
+`;
+
+export const InfoText = styled.p`
+  font-size: 1rem;
+  font-weight: bold;
+  color: #000;
+  flex: 0.8;
+  text-align: left;
+
+  @media (max-width: 1024px) {
+    font-size: 0.95rem;
+    flex: 1;
+  }
 `;
 
 export const SkillTagContainer = styled.div`
   display: grid;
-  grid-template-columns: repeat(9, 1fr);
+  grid-template-columns: repeat(8, 1fr);
   gap: 10px;
-  flex: 0.6;
+  flex: 0.9;
+
+  @media (max-width: 1024px) {
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px;
+    width: 100%;
+  }
 `;
 
 export const SkillTagImage = styled.div`
@@ -66,24 +84,51 @@ export const SkillTagImage = styled.div`
     width: 40px;
     height: 40px;
     border: 1px solid ${({ theme }) => theme.color.border};
-    border-radius: 50%;
+    border-radius: ${({ theme }) => theme.borderRadius.primary};
     margin-bottom: 5px;
+    margin-left: 10px;
   }
 
   p {
     font-size: 0.85rem;
     color: ${({ theme }) => theme.color.primary};
     margin-top: 2px;
   }
+
+  @media (max-width: 1024px) {
+    img {
+      width: 35px;
+      height: 35px;
+    }
+
+    p {
+      font-size: 0.75rem;
+    }
+  }
 `;
 
 export const BeginnerIcon = styled.img`
   width: 21px;
   height: 21px;
   border-radius: 50%;
-  border: 1px solid #ccc;
+  border: 1px solid ${({ theme }) => theme.color.border};
   background-color: #fff;
   padding: 5px;
   object-fit: contain;
   margin-bottom: 15px;
+
+  @media (max-width: 1024px) {
+    width: 18px;
+    height: 18px;
+    margin-bottom: 10px;
+  }
+`;
+
+export const BeginnerText = styled.p`
+  font-size: 1rem;
+  font-weight: bold;
+  color: #000;
+  flex: 0.8;
+  text-align: left;
+  margin-top: 20px;
 `;

src/components/projectFormComponents/projectInformationText/ProjectInformation.tsx

@@ -18,28 +18,28 @@ const ProjectInformation = ({ data }: ProjectInformationProps) => {
     <S.SectionInput>
       <S.InfoRow>
         {data.isBeginner && <S.BeginnerIcon src={beginner} alt='초보자 환영' />}
-        {data.isBeginner && <p>초보 환영</p>}
+        {data.isBeginner && <S.BeginnerText>초보 환영</S.BeginnerText>}
       </S.InfoRow>
 
       {PROJECT_DATA_GET.map((input, index) => (
         <S.InfoRow key={index}>
-          <label htmlFor={input.name}>{input.label}</label>
-          <p>{data[input.name as keyof ProjectDetail]}</p>
+          <S.InfoLabel>{input.label}</S.InfoLabel>
+          <S.InfoText>{data[input.name as keyof ProjectDetail]}</S.InfoText>
         </S.InfoRow>
       ))}
 
       <S.InfoRow>
-        <label htmlFor='position'>모집 분야</label>
-        <p>
+        <S.InfoLabel>모집 분야</S.InfoLabel>
+        <S.InfoText>
           {data.ProjectPositionTag.map(
             (position) => position.PositionTag.name
           ).join(', ')}
-        </p>
+        </S.InfoText>
       </S.InfoRow>
 
       <S.InfoRow>
-        <label htmlFor='method'>진행 방식</label>
-        <p>{data.Method.name}</p>
+        <S.InfoLabel>진행 방식</S.InfoLabel>
+        <S.InfoText>{data.Method.name}</S.InfoText>
       </S.InfoRow>
 
       <S.InfoRow>
@@ -52,7 +52,7 @@ const ProjectInformation = ({ data }: ProjectInformationProps) => {
                 src={skillTag.SkillTag.img}
                 alt={skillTag.SkillTag.name}
               />
-              <p>{skillTag.SkillTag.name}</p>
+              <S.InfoText>{skillTag.SkillTag.name}</S.InfoText>
             </S.SkillTagImage>
           ))}
         </S.SkillTagContainer>

src/pages/apply/Apply.styled.ts

@@ -61,7 +61,7 @@ export const TextArea = styled.textarea`
 `;
 
 export const SubmitButton = styled(Button)`
-  width: 10%;
+  width: 100px;
   padding: 15px;
   margin: 0 auto;
   cursor: pointer;

src/pages/createProject/CreateProject.styled.ts

@@ -52,7 +52,7 @@ export const SectionInput = styled.div`
 `;
 
 export const SubmitButton = styled.button`
-  width: 10%;
+  width: 70px;
   padding: 15px;
   background-color: ${({ theme }) => theme.buttonScheme.primary.bg};
   color: ${({ theme }) => theme.color.white};

src/pages/projectDetail/ProjectDetail.styled.ts

@@ -5,6 +5,10 @@ export const Container = styled.div`
   max-width: 100%;
   margin: 0 auto;
   padding: 40px;
+
+  @media (max-width: 870px) {
+    padding: 25px;
+  }
 `;
 
 export const Header = styled.div`
@@ -17,6 +21,10 @@ export const Title = styled.h1`
   font-size: 36px;
   font-weight: bold;
   margin-bottom: 10px;
+
+  @media (max-width: 870px) {
+    font-size: 28px;
+  }
 `;
 
 export const ProfileContainer = styled.div`
@@ -33,16 +41,29 @@ export const UserInfo = styled.div`
   display: flex;
   gap: 12px;
   align-items: center;
+
+  @media (max-width: 870px) {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
 `;
 
 export const UserName = styled.div`
   font-size: 21px;
   font-weight: bold;
+
+  @media (max-width: 870px) {
+    font-size: 18px;
+  }
 `;
 
 export const PostDate = styled.div`
   font-size: ${({ theme }) => theme.heading.semiSmall};
   color: ${({ theme }) => theme.color.deepGrey};
+
+  @media (max-width: 870px) {
+    font-size: 0.9rem;
+  }
 `;
 
 export const ViewCount = styled.div`
@@ -58,6 +79,15 @@ export const ViewCount = styled.div`
     height: 16px;
     color: ${({ theme }) => theme.color.deepGrey};
   }
+
+  @media (max-width: 870px) {
+    font-size: 0.9rem;
+
+    svg {
+      width: 14px;
+      height: 14px;
+    }
+  }
 `;
 
 export const Content = styled.div`