diff --git a/src/assets/banner.svg b/src/assets/banner.svg index 37d8119e..638d1a9b 100644 --- a/src/assets/banner.svg +++ b/src/assets/banner.svg @@ -1,211 +1,211 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - + + - - - - + + + + - - + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - + + - - - - - - - + + + + + + + - - + + - - - - - + + + + + - - + + - - - - + + + + - - + + - - - - - - - - - - + + + + + + + + + + - - - + + + - - - - + + + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - - - - + + + + + + - - + + - - - - + + + + - - + + - - - - - - - - - - + + + + + + + + + + - - - + + + - - - - - + + + + + - - + + - - - - + + + + - - + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - - + + - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/src/components/comment/CommentLayout.styled.ts b/src/components/comment/CommentLayout.styled.ts index 007b51d5..d9a6394e 100644 --- a/src/components/comment/CommentLayout.styled.ts +++ b/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``; diff --git a/src/components/comment/commentInput/CommentInput.styled.ts b/src/components/comment/commentInput/CommentInput.styled.ts index e39ce386..52c9a482 100644 --- a/src/components/comment/commentInput/CommentInput.styled.ts +++ b/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 }>` diff --git a/src/components/common/contentBorder/ContentBorder.styled.ts b/src/components/common/contentBorder/ContentBorder.styled.ts index dba302e9..e3487970 100644 --- a/src/components/common/contentBorder/ContentBorder.styled.ts +++ b/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; `; diff --git a/src/components/common/header/Header.styled.ts b/src/components/common/header/Header.styled.ts index 857c3dae..1a7b859e 100644 --- a/src/components/common/header/Header.styled.ts +++ b/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; } diff --git a/src/components/common/layout/Layout.styled.ts b/src/components/common/layout/Layout.styled.ts index 99200d9e..cafe84c4 100644 --- a/src/components/common/layout/Layout.styled.ts +++ b/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; - } `; diff --git a/src/components/common/positionButton/PositionButton.styled.ts b/src/components/common/positionButton/PositionButton.styled.ts index 24c60cc7..86d6acdd 100644 --- a/src/components/common/positionButton/PositionButton.styled.ts +++ b/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; + } + `} `; diff --git a/src/components/common/positionButton/PositionButton.tsx b/src/components/common/positionButton/PositionButton.tsx index c0cdea11..18384464 100644 --- a/src/components/common/positionButton/PositionButton.tsx +++ b/src/components/common/positionButton/PositionButton.tsx @@ -5,6 +5,7 @@ interface PositionButtonProps { onClick?: (e: React.MouseEvent) => void; isSelected?: boolean; isHover?: boolean; + fontSize: boolean; } export default function PositionButton({ @@ -12,12 +13,14 @@ export default function PositionButton({ onClick, isSelected = false, isHover = false, + fontSize = false, }: PositionButtonProps) { return ( {position} diff --git a/src/components/common/skillTagBox/SkillTagBox.tsx b/src/components/common/skillTagBox/SkillTagBox.tsx index 2b676774..5a769750 100644 --- a/src/components/common/skillTagBox/SkillTagBox.tsx +++ b/src/components/common/skillTagBox/SkillTagBox.tsx @@ -29,19 +29,21 @@ export default function SkillTagBox({ {Boolean(skillTagsData.length) && ( - {skillTagsData?.map((skillTagData) => ( - - ))} + {skillTagsData + .filter((skill) => skill.id !== 0) + .map((skillTagData) => ( + + ))} {isMain && Boolean(searchFiltersSkillTag?.length) && ( diff --git a/src/components/customerService/inquiry/Inquiry.styled.ts b/src/components/customerService/inquiry/Inquiry.styled.ts index 8c4bab09..ad912bb5 100644 --- a/src/components/customerService/inquiry/Inquiry.styled.ts +++ b/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}; diff --git a/src/components/home/projectCardLists/ProjectCardLists.styled.ts b/src/components/home/projectCardLists/ProjectCardLists.styled.ts index 60852409..ee62421a 100644 --- a/src/components/home/projectCardLists/ProjectCardLists.styled.ts +++ b/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 { diff --git a/src/components/home/projectCardLists/ProjectCardLists.tsx b/src/components/home/projectCardLists/ProjectCardLists.tsx index 4a4208dc..ba5d4020 100644 --- a/src/components/home/projectCardLists/ProjectCardLists.tsx +++ b/src/components/home/projectCardLists/ProjectCardLists.tsx @@ -9,10 +9,12 @@ 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('grid'); const handleChangePagination = (page: number) => { handleUpdateFilters('page', page); @@ -20,10 +22,10 @@ export default function ProjectCardLists() { 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() { 프로젝트 리스트 - + {projectListsData && Boolean(projectListsData.projects.length) ? ( projectListsData.projects.map((list) => ( ` }} `; -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}; @@ -79,6 +79,11 @@ export const FormError = styled.p` 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}; diff --git a/src/components/projectFormComponents/inputComponent/InputComponent.tsx b/src/components/projectFormComponents/inputComponent/InputComponent.tsx index 15df394f..d73c3233 100644 --- a/src/components/projectFormComponents/inputComponent/InputComponent.tsx +++ b/src/components/projectFormComponents/inputComponent/InputComponent.tsx @@ -42,7 +42,11 @@ const Input = ({ return ( {renderInput()} - {hasError && {String(errors?.[name]?.message)}} + {hasError && ( + + {String(errors?.[name]?.message)} + + )} ); }; diff --git a/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx b/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx index 04d34c87..ad47783a 100644 --- a/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx +++ b/src/components/projectFormComponents/projectInformationInput/ProjectInformationInput.tsx @@ -39,7 +39,9 @@ const ProjectInformationInput = ({ placeholder={input.placeholder} /> {input.type === 'checkbox' && ( - "새싹 멤버도 환영해요 !!" + + 새싹 멤버를 환영한다면 체크를 눌러주세요!! + )} diff --git a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts b/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts index a37f3c14..06f65388 100644 --- a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts +++ b/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` diff --git a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx b/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx index dea6c483..1268ea6e 100644 --- a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx +++ b/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx @@ -34,10 +34,10 @@ const FieldCategoryComponent = ({ return ( handleClick(e, idx)} > - + {data.name} diff --git a/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts b/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts index 989261db..51b088fa 100644 --- a/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.styled.ts +++ b/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}; diff --git a/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.tsx b/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.tsx index 349b8d5c..fe7bad37 100644 --- a/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.tsx +++ b/src/components/projectFormComponents/projectInformationInput/positionComponent/PositionComponent.tsx @@ -39,6 +39,7 @@ const MozipCategoryComponent = ({ onClick={(e) => handleClick(e, idx + 1)} key={idx + 1} isHover={true} + fontSize={true} /> ); })} diff --git a/src/pages/createProject/CreateProject.styled.ts b/src/pages/createProject/CreateProject.styled.ts index ca8b21b1..197a8303 100644 --- a/src/pages/createProject/CreateProject.styled.ts +++ b/src/pages/createProject/CreateProject.styled.ts @@ -1,7 +1,8 @@ import styled from 'styled-components'; export const Container = styled.div` - max-width: 100%; + width: 100%; + max-width: 80%; margin: 0 auto; padding: 60px; `; @@ -51,17 +52,20 @@ export const SectionInput = styled.div` `; export const SubmitButton = styled.button` - width: 70px; - padding: 15px; - background-color: ${({ theme }) => theme.buttonScheme.primary.bg}; + display: flex; + justify-content: center; + align-items: center; + font-size: 1rem; + background: ${({ theme }) => theme.color.navy}; + border-radius: ${({ theme }) => theme.borderRadius.large}; color: ${({ theme }) => theme.color.white}; - font-size: ${({ theme }) => theme.heading.small}; - font-weight: bold; - border-radius: ${({ theme }) => theme.borderRadius.primary}; - cursor: pointer; - margin-top: 3.5rem; + border: 1px solid ${({ theme }) => theme.color.navy}; + padding: 0.5rem 1.5rem; &:hover { - background-color: #0056b3; + background: ${({ theme }) => theme.color.lightgrey}; + color: ${({ theme }) => theme.color.navy}; + border: 1px solid ${({ theme }) => theme.color.navy}; + transition: all 0.3s ease-in-out; } `; diff --git a/src/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts index fa84d453..7357ad39 100644 --- a/src/pages/home/Home.styled.ts +++ b/src/pages/home/Home.styled.ts @@ -6,6 +6,7 @@ export const Container = styled.main` `; export const Wrapper = styled.div` + padding: 0 120px; @media ${({ theme }) => theme.mediaQuery.mobile} { padding: 0 20px; } diff --git a/src/pages/manage/myProjectList/MyProjectList.styled.ts b/src/pages/manage/myProjectList/MyProjectList.styled.ts index f47df17d..ead5e9a5 100644 --- a/src/pages/manage/myProjectList/MyProjectList.styled.ts +++ b/src/pages/manage/myProjectList/MyProjectList.styled.ts @@ -1,10 +1,17 @@ import styled from 'styled-components'; export const ManageProjectsContainer = styled.div` + width: 100%; + display: flex; + justify-content: center; +`; + +export const ManageProjectsWrapper = styled.div` + width: 100%; display: block; padding-top: 4.375em; max-width: 1048px; - margin: 0 auto; + margin: 0 30px; @media ${({ theme }) => theme.mediaQuery.tablet} { max-width: 692px; } diff --git a/src/pages/manage/myProjectList/MyProjectList.tsx b/src/pages/manage/myProjectList/MyProjectList.tsx index 71c3dc48..d230cf47 100644 --- a/src/pages/manage/myProjectList/MyProjectList.tsx +++ b/src/pages/manage/myProjectList/MyProjectList.tsx @@ -8,11 +8,12 @@ const MyProjectList = () => { return ( - - 모집 프로젝트 리스트 - - - + + + 모집 프로젝트 리스트 + + + ); }; diff --git a/src/pages/modifyProject/ModifyProject.styled.ts b/src/pages/modifyProject/ModifyProject.styled.ts index f3debc50..f77f90d8 100644 --- a/src/pages/modifyProject/ModifyProject.styled.ts +++ b/src/pages/modifyProject/ModifyProject.styled.ts @@ -1,7 +1,8 @@ import styled from 'styled-components'; export const Container = styled.div` - max-width: 100%; + width: 100%; + max-width: 80%; margin: 0 auto; padding: 60px; `; @@ -52,17 +53,20 @@ export const SectionInput = styled.div` `; export const SubmitButton = styled.button` - width: 10%; - padding: 15px; - background-color: ${({ theme }) => theme.buttonScheme.primary.bg}; + display: flex; + justify-content: center; + align-items: center; + font-size: 1rem; + background: ${({ theme }) => theme.color.navy}; + border-radius: ${({ theme }) => theme.borderRadius.large}; color: ${({ theme }) => theme.color.white}; - font-size: ${({ theme }) => theme.heading.small}; - font-weight: bold; - border-radius: ${({ theme }) => theme.borderRadius.primary}; - cursor: pointer; - margin-top: 3.5rem; + border: 1px solid ${({ theme }) => theme.color.navy}; + padding: 0.5rem 1.5rem; &:hover { - background-color: #0056b3; + background: ${({ theme }) => theme.color.lightgrey}; + color: ${({ theme }) => theme.color.navy}; + border: 1px solid ${({ theme }) => theme.color.navy}; + transition: all 0.3s ease-in-out; } `; diff --git a/src/pages/mypage/MyPage.styled.ts b/src/pages/mypage/MyPage.styled.ts index 60fef053..acf7a754 100644 --- a/src/pages/mypage/MyPage.styled.ts +++ b/src/pages/mypage/MyPage.styled.ts @@ -4,6 +4,11 @@ export const Container = styled.div` display: flex; justify-content: space-between; margin-top: 1.5rem; + padding: 0 60px; + + @media ${({ theme }) => theme.mediaQuery.tablet} { + padding: 0 10px; + } `; export const Wrapper = styled.div` diff --git a/src/pages/mypage/MyPage.tsx b/src/pages/mypage/MyPage.tsx index 72579cf0..16c01be2 100644 --- a/src/pages/mypage/MyPage.tsx +++ b/src/pages/mypage/MyPage.tsx @@ -19,7 +19,7 @@ const MyPage = () => { icon: , }, { - label: '참여한 프로젝트', + label: '참여 프로젝트', path: `${ROUTES.mypage}/${ROUTES.mypageJoinedProjects}`, icon: , }, diff --git a/src/pages/projectDetail/ProjectDetail.styled.ts b/src/pages/projectDetail/ProjectDetail.styled.ts index fa917fb2..efe0746f 100644 --- a/src/pages/projectDetail/ProjectDetail.styled.ts +++ b/src/pages/projectDetail/ProjectDetail.styled.ts @@ -2,14 +2,20 @@ import styled from 'styled-components'; import Button from '../../components/common/Button/Button'; export const Container = styled.div` - max-width: 100%; - margin: 0 auto; + width: 100%; + display: flex; + justify-content: center; @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 25px; } `; +export const Wrapper = styled.div` + margin-top: 3rem; + width: 75%; +`; + export const Header = styled.div` display: flex; flex-direction: column; diff --git a/src/pages/projectDetail/ProjectDetail.tsx b/src/pages/projectDetail/ProjectDetail.tsx index fca07e5a..a3a94662 100644 --- a/src/pages/projectDetail/ProjectDetail.tsx +++ b/src/pages/projectDetail/ProjectDetail.tsx @@ -52,53 +52,52 @@ const ProjectDetail = () => { return ( - - - {data.title} - - - - - - - {data.user.nickname} - - {formatDate(data.recruitmentEndDate)} - - - {data.views} - - - - - - - -

- - - - - - {userData?.id !== data.user.id ? ( - - ) : null} - - -
- - + + + + {data.title} + + + + + + + {data.user.nickname} + + {formatDate(data.recruitmentEndDate)} + + + {data.views} + + + + + + +

+ + + + + + {userData?.id !== data.user.id ? ( + + ) : null} + +
+ + ); };