레이아웃 수정 (#issue 289)

src/components/comment/CommentLayout.styled.ts

@@ -5,7 +5,7 @@ export const Container = styled.div`
 `;
 
 export const CommentCountsContainer = styled.div`
-  margin-bottom: 20px;
+  margin: 20px 0 30px 0;
 `;
 
 export const Count = styled.span`
@@ -17,7 +17,7 @@ export const Count = styled.span`
 export const CommentContainer = styled.div``;
 
 export const CommentInput = styled.div`
-  margin-bottom: 60px;
+  margin-bottom: 40px;
 `;
 
 export const Icon = styled.div``;

src/components/comment/commentInput/CommentInput.styled.ts

@@ -19,6 +19,7 @@ export const InputWrapper = styled.div`
 export const ButtonWrapper = styled.div`
   display: flex;
   justify-content: flex-end;
+  gap: 0.5rem;
   margin-top: 3px;
 `;
 export const Line = styled.hr<{ $isFocused: boolean }>`

src/components/common/contentBorder/ContentBorder.styled.ts

@@ -4,4 +4,6 @@ export const ContentBorder = styled.div`
   width: 100%;
   height: 0.5px;
   background: ${({ theme }) => theme.color.placeholder};
+  position: relative;
+  z-index: 1;
 `;

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

@@ -7,11 +7,8 @@ export const HeaderContainer = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 120px;
+  padding: 10px 60px;
 
-  @media ${({ theme }) => theme.mediaQuery.tablet} {
-    padding: 10px 60px;
-  }
   @media ${({ theme }) => theme.mediaQuery.mobile} {
     padding: 10px 16px;
   }

src/components/common/layout/Layout.styled.ts

@@ -4,13 +4,4 @@ export const LayoutContainer = styled.div`
   width: 100%;
   margin: 0 auto;
   max-width: ${({ theme }) => theme.layout.width.desktop};
-  padding: 0 120px;
-
-  @media ${({ theme }) => theme.mediaQuery.tablet} {
-    padding: 0 60px;
-  }
-
-  @media ${({ theme }) => theme.mediaQuery.mobile} {
-    padding: 0;
-  }
 `;

src/components/common/positionButton/PositionButton.styled.ts

@@ -1,30 +1,41 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div``;
 
 export const PositionButton = styled.button<{
   $isSelected: boolean;
   $isHover: boolean;
+  $fontSize: boolean;
 }>`
-  background-color: ${({ $isSelected, theme }) =>
-    $isSelected ? theme.buttonScheme.primary.bg : theme.color.lightgrey};
+  background-color: ${({ theme }) => theme.color.lightgrey};
   width: fit-content;
-  border: 1px solid
-    ${({ $isSelected, theme }) =>
-      $isSelected ? theme.buttonScheme.primary.bg : theme.color.border};
+  border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   padding: 0.3rem 0.4rem;
-  color: ${({ $isSelected, theme }) => $isSelected && theme.color.white};
+
+  ${({ $isSelected }) =>
+    $isSelected &&
+    css`
+      background-color: ${({ theme }) => theme.color.navy};
+      color: ${({ theme }) => theme.color.white};
+      border: 1px solid ${({ theme }) => theme.color.navy};
+    `}
+
+  ${({ $fontSize }) =>
+    $fontSize &&
+    css`
+      font-size: 1rem;
+    `}
 
   cursor: pointer;
   transition: all 0.2s;
 
   ${({ $isHover }) =>
     $isHover &&
-    `
-        &:hover {
-          transform: scale(1.1);
-          transition: all 100ms ease-in-out;
-        }
-      `}
+    css`
+      &:hover {
+        transform: scale(1.1);
+        transition: all 100ms ease-in-out;
+      }
+    `}
 `;

src/components/common/positionButton/PositionButton.tsx

@@ -5,19 +5,22 @@ interface PositionButtonProps {
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   isSelected?: boolean;
   isHover?: boolean;
+  fontSize: boolean;
 }
 
 export default function PositionButton({
   position,
   onClick,
   isSelected = false,
   isHover = false,
+  fontSize = false,
 }: PositionButtonProps) {
   return (
     <S.Container onClick={onClick}>
       <S.PositionButton
         $isSelected={isSelected}
         $isHover={isHover}
+        $fontSize={fontSize}
         type='button'
       >
         {position}

src/components/common/skillTagBox/SkillTagBox.tsx

@@ -29,19 +29,21 @@ export default function SkillTagBox({
       {Boolean(skillTagsData.length) && (
         <S.Wrapper>
           <S.SkillTagWrapper>
-            {skillTagsData?.map((skillTagData) => (
-              <SkillTag
-                skillTagData={skillTagData}
-                key={`skillTagBox-${skillTagData.id}`}
-                $select={
-                  (isMain &&
-                    searchFiltersSkillTag?.includes(skillTagData.id)) ||
-                  (isCreate && selectedTag?.includes(skillTagData.id))
-                    ? true
-                    : false
-                }
-              />
-            ))}
+            {skillTagsData
+              .filter((skill) => skill.id !== 0)
+              .map((skillTagData) => (
+                <SkillTag
+                  skillTagData={skillTagData}
+                  key={`skillTagBox-${skillTagData.id}`}
+                  $select={
+                    (isMain &&
+                      searchFiltersSkillTag?.includes(skillTagData.id)) ||
+                    (isCreate && selectedTag?.includes(skillTagData.id))
+                      ? true
+                      : false
+                  }
+                />
+              ))}
           </S.SkillTagWrapper>
           {isMain && Boolean(searchFiltersSkillTag?.length) && (
             <S.ButtonWrapper>

src/components/customerService/inquiry/Inquiry.styled.ts

@@ -22,7 +22,7 @@ export const InquiryForm = styled.form`
 `;
 
 export const InquiryWrapper = styled.div`
-  width: 49rem;
+  width: 65%;
 `;
 
 export const Nav = styled.nav`
@@ -174,12 +174,11 @@ export const SendButton = styled.button`
   justify-content: center;
   align-items: center;
   font-size: 1rem;
-  width: 6rem;
   background: ${({ theme }) => theme.color.navy};
   border-radius: ${({ theme }) => theme.borderRadius.large};
   color: ${({ theme }) => theme.color.white};
   border: 1px solid ${({ theme }) => theme.color.navy};
-  padding: 0.5em;
+  padding: 0.5rem 1.5rem;
 
   &:hover {
     background: ${({ theme }) => theme.color.lightgrey};

src/components/home/projectCardLists/ProjectCardLists.styled.ts

@@ -1,4 +1,5 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import type { Display } from './ProjectCardLists';
 
 export const Container = styled.section`
   width: 100%;
@@ -19,13 +20,25 @@ export const CardListTitle = styled.h1`
   }
 `;
 
-export const Wrapper = styled.div<{ $flex: boolean }>`
+export const Wrapper = styled.div<{ $flex: Display }>`
   width: 100%;
-  display: ${({ $flex }) => ($flex ? 'flex' : 'grid')};
-  grid-template-columns: ${({ $flex }) =>
-    $flex ? '' : 'repeat(auto-fit, minmax(30%, 1fr))'};
-  place-items: ${({ $flex }) => ($flex ? '' : 'center')};
-  /* justify-content: space-evenly; */
+
+  ${({ $flex }) => {
+    switch ($flex) {
+      case 'flex':
+        return css`
+          display: flex;
+        `;
+      case 'grid':
+        return css`
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
+          place-items: center;
+        `;
+      default:
+        break;
+    }
+  }}
   gap: 3rem;
 
   a {

src/components/home/projectCardLists/ProjectCardLists.tsx

@@ -9,21 +9,23 @@ import NoResult from '../../common/noResult/NoResult';
 import { useSaveSearchFiltering } from '../../../hooks/useSaveSearchFiltering';
 import Pagination from '../../common/pagination/Pagination';
 
+export type Display = 'flex' | 'grid';
+
 export default function ProjectCardLists() {
   const { projectListsData, isLoading } = useProjectCardListData();
   const { searchFilters, handleUpdateFilters } = useSaveSearchFiltering();
-  const [isFlex, setIsFlex] = useState(false);
+  const [display, setDisplay] = useState<Display>('grid');
 
   const handleChangePagination = (page: number) => {
     handleUpdateFilters('page', page);
   };
 
   useEffect(() => {
     if (projectListsData && Boolean(projectListsData.projects.length)) {
-      setIsFlex(false);
+      setDisplay('grid');
       return;
     }
-    setIsFlex(true);
+    setDisplay('flex');
   }, [projectListsData]);
 
   if (isLoading)
@@ -36,7 +38,7 @@ export default function ProjectCardLists() {
       <S.CardListTitleWrapper>
         <S.CardListTitle>프로젝트 리스트</S.CardListTitle>
       </S.CardListTitleWrapper>
-      <S.Wrapper $flex={isFlex}>
+      <S.Wrapper $flex={display}>
         {projectListsData && Boolean(projectListsData.projects.length) ? (
           projectListsData.projects.map((list) => (
             <Link

src/components/mypage/ContentTab.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import * as S from './ContentTab.styled';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import { ROUTES } from '../../constants/routes';
-import MovedInquiredLink from '../../pages/customerService/MoveInquiredLink';
 import ScrollWrapper from './ScrollWrapper';
+import MovedInquiredLink from '../customerService/MoveInquiredLink';
 
 interface Filter {
   title: string;

src/components/projectFormComponents/inputComponent/InputComponent.styled.ts

@@ -71,14 +71,19 @@ export const InputInfoStyle = styled.input<{ type?: string }>`
   }}
 `;
 
-export const FormError = styled.p`
+export const FormError = styled.p<{ $markDown: boolean }>`
   margin-top: 0.3px;
   font-size: 0.9rem;
   color: ${({ theme }) => theme.color.red};
   position: absolute;
   top: 115%;
   left: 5px;
   white-space: nowrap;
+  ${({ $markDown }) =>
+    $markDown &&
+    css`
+      margin-top: -1.5rem;
+    `}
 
   @media ${({ theme }) => theme.mediaQuery.tablet} {
     font-size: ${({ theme }) => theme.heading.small.tabletFontSize};

src/components/projectFormComponents/inputComponent/InputComponent.tsx

@@ -42,7 +42,11 @@ const Input = ({
   return (
     <S.InputContainer>
       {renderInput()}
-      {hasError && <S.FormError>{String(errors?.[name]?.message)}</S.FormError>}
+      {hasError && (
+        <S.FormError $markDown={name === 'markdownEditor'}>
+          {String(errors?.[name]?.message)}
+        </S.FormError>
+      )}
     </S.InputContainer>
   );
 };

src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx

@@ -39,7 +39,9 @@ const ProjectInformationInput = ({
               placeholder={input.placeholder}
             />
             {input.type === 'checkbox' && (
-              <S.welcomeSprout>"새싹 멤버도 환영해요 !!"</S.welcomeSprout>
+              <S.welcomeSprout>
+                새싹 멤버를 환영한다면 체크를 눌러주세요!!
+              </S.welcomeSprout>
             )}
           </S.InfoRow>
         </>

src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div``;
 
@@ -13,24 +13,32 @@ export const CategoryContainer = styled.div`
   margin-bottom: 20px;
 `;
 
-export const CategoryItem = styled.div<{ isSelected: boolean }>`
-  background-color: ${({ theme, isSelected }) =>
-    isSelected ? theme.buttonScheme.primary.bg : theme.color.lightgrey};
+export const CategoryItem = styled.div<{ $isSelected: boolean }>`
+  background-color: ${({ theme }) => theme.color.lightgrey};
   width: fit-content;
-  border: 1px solid ${({ theme }) => theme.color.grey};
+  border: 1px solid ${({ theme }) => theme.color.border};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   padding: 0.2rem 0.4rem;
   cursor: pointer;
   transition: all 0.2s;
 
+  ${({ $isSelected }) =>
+    $isSelected &&
+    css`
+      background-color: ${({ theme }) => theme.color.navy};
+      color: ${({ theme }) => theme.color.white};
+      border: 1px solid ${({ theme }) => theme.color.navy};
+    `}
+
   &:hover {
     transform: scale(1.1);
     transition: all 100ms ease-in-out;
   }
 `;
 
-export const NameSpan = styled.span<{ isSelected: boolean }>`
-  color: ${({ theme, isSelected }) => isSelected && theme.color.white};
+export const NameSpan = styled.button<{ $isSelected: boolean }>`
+  font-size: 1rem;
+  color: ${({ theme, $isSelected }) => $isSelected && theme.color.white};
 `;
 
 export const FormError = styled.p`

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

@@ -34,10 +34,10 @@ const FieldCategoryComponent = ({
           return (
             <S.CategoryItem
               key={idx}
-              isSelected={selectedTag[0] === idx}
+              $isSelected={selectedTag[0] === idx}
               onClick={(e) => handleClick(e, idx)}
             >
-              <S.NameSpan isSelected={selectedTag[0] === idx}>
+              <S.NameSpan type='button' $isSelected={selectedTag[0] === idx}>
                 {data.name}
               </S.NameSpan>
             </S.CategoryItem>

src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts

@@ -6,7 +6,7 @@ export const Container = styled.div``;
 export const CategoryContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
+  gap: 10px;
   margin-top: -20px;
   padding: 3px 0;
   background-color: ${({ theme }) => theme.color.white};