diff --git a/src/components/applyComponents/careersComponent/CareersComponent.styled.ts b/src/components/applyComponents/careersComponent/CareersComponent.styled.ts index f855b317..d7aeb55f 100644 --- a/src/components/applyComponents/careersComponent/CareersComponent.styled.ts +++ b/src/components/applyComponents/careersComponent/CareersComponent.styled.ts @@ -11,7 +11,7 @@ export const CareerContainer = styled.div` width: 100%; margin-bottom: 10px; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { display: flex; gap: 10px; } diff --git a/src/components/applyComponents/careersComponent/careersInputComponent/CareersComponentInput.styled.ts b/src/components/applyComponents/careersComponent/careersInputComponent/CareersComponentInput.styled.ts index 5217b795..2cff7546 100644 --- a/src/components/applyComponents/careersComponent/careersInputComponent/CareersComponentInput.styled.ts +++ b/src/components/applyComponents/careersComponent/careersInputComponent/CareersComponentInput.styled.ts @@ -26,7 +26,7 @@ export const CareerInput = styled.input` ${dateStyle} } - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { width: 100%; margin-bottom: 12px; font-size: ${({ theme }) => theme.heading.small.fontSize}; diff --git a/src/components/auth/InputText.styled.ts b/src/components/auth/InputText.styled.ts index 7c167d2b..782d635b 100644 --- a/src/components/auth/InputText.styled.ts +++ b/src/components/auth/InputText.styled.ts @@ -9,7 +9,7 @@ export const Container = styled.div` background-color: ${({ theme }) => theme.color.white}; width: 100%; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 0.5rem 0.75rem; `; diff --git a/src/components/common/avatar/Avatar.styled.ts b/src/components/common/avatar/Avatar.styled.ts index 38938e57..441590fb 100644 --- a/src/components/common/avatar/Avatar.styled.ts +++ b/src/components/common/avatar/Avatar.styled.ts @@ -7,14 +7,14 @@ export const AvatarContainer = styled.div>` border-radius: 50%; border: 1px solid ${({ theme }) => theme.color.border}; - .avatar { - width: 100%; - height: 100%; - border-radius: 50%; - } - - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { width: calc(${({ size }) => size} * 0.85); height: calc(${({ size }) => size} * 0.85); } `; + +export const AvatarImg = styled.img` + width: 100%; + height: 100%; + border-radius: 50%; +`; diff --git a/src/components/common/avatar/Avatar.tsx b/src/components/common/avatar/Avatar.tsx index 1ecaa38b..61accdcc 100644 --- a/src/components/common/avatar/Avatar.tsx +++ b/src/components/common/avatar/Avatar.tsx @@ -13,7 +13,7 @@ function Avatar({ size, image }: AvatarProps) { return ( {typeof image === 'string' || !image ? ( - Avatar + ) : ( image )} diff --git a/src/components/common/avatar/AvartarList.tsx b/src/components/common/avatar/AvatarList.tsx similarity index 83% rename from src/components/common/avatar/AvartarList.tsx rename to src/components/common/avatar/AvatarList.tsx index 49fa7609..281d2419 100644 --- a/src/components/common/avatar/AvartarList.tsx +++ b/src/components/common/avatar/AvatarList.tsx @@ -3,17 +3,13 @@ import { ProjectSkillTag } from '../../../models/manageMyProject'; import Avatar from './Avatar'; import { UserSkillTag } from '../../../models/applicant'; import { formatImgPath } from '../../../util/formatImgPath'; -export interface AvartarListProps { +export interface AvatarListProps { avatars: ProjectSkillTag[] | UserSkillTag[] | null; size?: string; maxCount?: number; } -function AvartarList({ - avatars, - size = '33px', - maxCount = 8, -}: AvartarListProps) { +function AvatarList({ avatars, size = '33px', maxCount = 8 }: AvatarListProps) { if (!avatars) return; const displayAvatars = avatars.slice(0, maxCount); @@ -32,4 +28,4 @@ function AvartarList({ ); } -export default AvartarList; +export default AvatarList; diff --git a/src/components/common/header/Header.styled.ts b/src/components/common/header/Header.styled.ts index 387c197b..f4f43131 100644 --- a/src/components/common/header/Header.styled.ts +++ b/src/components/common/header/Header.styled.ts @@ -9,66 +9,107 @@ export const HeaderContainer = styled.div` align-items: center; padding: 10px 120px; - img { - width: 80px; - height: 80px; + @media ${({ theme }) => theme.mediaQuery.tablet} { + padding: 10px 60px; + } + @media ${({ theme }) => theme.mediaQuery.mobile} { + padding: 10px 16px; + } +`; - @media ${({ theme }) => theme.mediaQuery.tablet} { - width: 70px; - height: 70px; - } +export const Wrapper = styled.nav` + ul { + display: flex; + flex-direction: column; + width: 9rem; - @media ${({ theme }) => theme.mediaQuery.mobile} { - width: 50px; - height: 50px; - } - } + a, + button { + font-size: 0.9rem; + font-weight: 600; + width: 100%; + line-height: 1; + text-align: center; + color: inherit; - .auth { - 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}; - } + &: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}; - } + a { + &:first-child { + border-top-left-radius: ${({ theme }) => theme.borderRadius.primary}; + border-top-right-radius: ${({ theme }) => theme.borderRadius.primary}; } - - li { - width: 100%; - padding: 1rem; + &: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 LogoImg = styled.img` + width: 80px; + height: 80px; @media ${({ theme }) => theme.mediaQuery.tablet} { - padding: 10px 60px; + width: 70px; + height: 70px; } + @media ${({ theme }) => theme.mediaQuery.mobile} { - padding: 10px 16px; + width: 50px; + height: 50px; } `; + +export const List = styled.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 Item = styled.li` + width: 100%; + padding: 1rem; +`; diff --git a/src/components/common/header/Header.tsx b/src/components/common/header/Header.tsx index e2d3a6b3..d53e9c42 100644 --- a/src/components/common/header/Header.tsx +++ b/src/components/common/header/Header.tsx @@ -29,9 +29,9 @@ function Header() { return ( - logo + - + {message} diff --git a/src/components/common/modal/Modal.styled.ts b/src/components/common/modal/Modal.styled.ts index 749a48b6..8fe0f387 100644 --- a/src/components/common/modal/Modal.styled.ts +++ b/src/components/common/modal/Modal.styled.ts @@ -1,7 +1,9 @@ import styled from 'styled-components'; -export const ModalContainer = styled.div` - @keyframes fade-in { +export const ModalContainer = styled.div<{ + $fade: boolean; +}>` + @keyframes ${({ $fade }) => !$fade && 'fade-in'} { from { opacity: 0; } @@ -10,7 +12,7 @@ export const ModalContainer = styled.div` } } - @keyframes fade-out { + @keyframes ${({ $fade }) => $fade && 'fade-out'} { from { opacity: 1; } diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx index 5675c189..873fe1cb 100644 --- a/src/components/common/modal/Modal.tsx +++ b/src/components/common/modal/Modal.tsx @@ -31,10 +31,7 @@ const Modal = ({ children, isOpen, onClose }: ModalProps) => { return createPortal( - + diff --git a/src/components/common/noResultPage/NoResultPage.tsx b/src/components/common/noResultPage/NoResultPage.tsx index 790624c2..e5f034bc 100644 --- a/src/components/common/noResultPage/NoResultPage.tsx +++ b/src/components/common/noResultPage/NoResultPage.tsx @@ -9,7 +9,7 @@ export default function NoResultPage({ height }: NoResultPageProps) { return ( - 검색 결과가 없습니다. + 검색 결과가 없습니다. diff --git a/src/components/home/projectCardLists/pagination/Pagination.tsx b/src/components/home/projectCardLists/pagination/Pagination.tsx index 7c949020..770494a2 100644 --- a/src/components/home/projectCardLists/pagination/Pagination.tsx +++ b/src/components/home/projectCardLists/pagination/Pagination.tsx @@ -53,7 +53,6 @@ export default function Pagination() { handleUpdateFilters('page', 1)} > 1 @@ -75,7 +74,6 @@ export default function Pagination() { <> handleUpdateFilters('page', lastPage)} > {lastPage} diff --git a/src/components/home/searchFiltering/filteringContents/FilteringContents.tsx b/src/components/home/searchFiltering/filteringContents/FilteringContents.tsx index 0a4baee4..32dad24f 100644 --- a/src/components/home/searchFiltering/filteringContents/FilteringContents.tsx +++ b/src/components/home/searchFiltering/filteringContents/FilteringContents.tsx @@ -62,10 +62,7 @@ export default function FilteringContents() { selects={methodTagsData} defaultValue={SEARCH_FILTERING_DEFAULT_VALUE.METHOD} /> - + diff --git a/src/components/home/searchFiltering/filteringContents/filtering/Filtering.tsx b/src/components/home/searchFiltering/filteringContents/filtering/Filtering.tsx index b364df3c..9115b489 100644 --- a/src/components/home/searchFiltering/filteringContents/filtering/Filtering.tsx +++ b/src/components/home/searchFiltering/filteringContents/filtering/Filtering.tsx @@ -77,7 +77,6 @@ export default function Filtering({ selects, defaultValue }: FilteringProps) { {addAll.map((select) => ( handleValueClick(select.name, select.id)} > diff --git a/src/components/home/searchFiltering/search/Search.tsx b/src/components/home/searchFiltering/search/Search.tsx index 7b72b7d1..71d1f4f0 100644 --- a/src/components/home/searchFiltering/search/Search.tsx +++ b/src/components/home/searchFiltering/search/Search.tsx @@ -26,7 +26,6 @@ export default function Search() { )} - + diff --git a/src/components/manageProjects/Card.styled.ts b/src/components/manageProjects/Card.styled.ts index c3764221..5a8c66b1 100644 --- a/src/components/manageProjects/Card.styled.ts +++ b/src/components/manageProjects/Card.styled.ts @@ -28,6 +28,13 @@ export const CardWrapper = styled.div` } `; +export const ButtonWrapper = styled.div` + margin-top: 1rem; + width: 100%; + display: flex; + justify-content: end; +`; + export const CardTitle = styled.h3` font-size: 1.125rem; color: ${({ theme }) => theme.color.primary}; diff --git a/src/components/manageProjects/Card.tsx b/src/components/manageProjects/Card.tsx index 6e1a3020..cf0b0fa8 100644 --- a/src/components/manageProjects/Card.tsx +++ b/src/components/manageProjects/Card.tsx @@ -1,6 +1,6 @@ import * as S from './Card.styled'; import type { ManagedProject } from '../../models/manageMyProject'; -import AvartarList from '../common/avatar/AvartarList'; +import AvatarList from '../common/avatar/AvatarList'; import { formatDate } from '../../util/formatDate'; interface CardProps { project: ManagedProject; @@ -14,11 +14,11 @@ function Card({ project }: CardProps) { {project.title} {formatEndDate}까지 {project.totalMember}명 - + -
+ {project.isDone && 모집 종료} -
+ ); } diff --git a/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts b/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts index d125250f..48a4f66d 100644 --- a/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts +++ b/src/components/manageProjects/applicantInfo/ApplicantInfo.styled.ts @@ -15,10 +15,10 @@ export const Container = styled.div` &::-webkit-scrollbar { display: none; } +`; - .skillset-wrap { - margin-bottom: 1rem; - } +export const SkillSetWrapper = styled.div` + margin-bottom: 1rem; `; export const Title = styled.h2` @@ -56,3 +56,7 @@ export const Text = styled.p` font-size: ${({ theme }) => theme.heading.small.tabletFontSize}; } `; + +export const PeriodSpan = styled.span` + color: ${({ theme }) => theme.color.deepGrey}; +`; diff --git a/src/components/manageProjects/applicantInfo/ApplicantInfo.tsx b/src/components/manageProjects/applicantInfo/ApplicantInfo.tsx index 3bcc45f0..5a6fff07 100644 --- a/src/components/manageProjects/applicantInfo/ApplicantInfo.tsx +++ b/src/components/manageProjects/applicantInfo/ApplicantInfo.tsx @@ -1,6 +1,6 @@ import * as S from './ApplicantInfo.styled'; import { ApplicantInfo as MApplicantInfo } from '../../../models/applicant'; -import AvartarList from '../../common/avatar/AvartarList'; +import AvatarList from '../../common/avatar/AvatarList'; import { LabelWithContent } from './LabelWithContent'; import { formatDate } from '../../../util/format'; interface ApplicantInfoProps { @@ -13,17 +13,17 @@ const ApplicantInfo = ({ applicantInfo }: ApplicantInfoProps) => { {applicantInfo.User.nickname} -
+ 스킬셋 - -
+ + 경력 {applicantInfo.career?.map((data) => ( - + [{formatDate(data.periodStart)} ~ {formatDate(data.periodEnd)}] - + {data.name} - {data.role} ))} diff --git a/src/components/mypage/appliedProject/MyApplyProject.styled.ts b/src/components/mypage/appliedProject/MyApplyProject.styled.ts index dbfbf495..8e97c32b 100644 --- a/src/components/mypage/appliedProject/MyApplyProject.styled.ts +++ b/src/components/mypage/appliedProject/MyApplyProject.styled.ts @@ -21,7 +21,7 @@ export const Container = styled.div` flex-direction: column; gap: 1rem; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 2rem; } `; diff --git a/src/components/mypage/appliedProject/MyStatus.styled.ts b/src/components/mypage/appliedProject/MyStatus.styled.ts index 6b972433..cdf0be47 100644 --- a/src/components/mypage/appliedProject/MyStatus.styled.ts +++ b/src/components/mypage/appliedProject/MyStatus.styled.ts @@ -11,7 +11,7 @@ export const Container = styled.div` border-radius: 20px; border: 1px solid #ededed; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.9rem; } @@ -48,7 +48,7 @@ export const Status = styled.div<{ $isAccepted: boolean }>` font-size: 0.8rem; font-weight: 800; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.6rem; } } diff --git a/src/components/mypage/joinedProject/MyJoinProjects.styled.ts b/src/components/mypage/joinedProject/MyJoinProjects.styled.ts index 33ec71c4..3f252c01 100644 --- a/src/components/mypage/joinedProject/MyJoinProjects.styled.ts +++ b/src/components/mypage/joinedProject/MyJoinProjects.styled.ts @@ -31,7 +31,7 @@ export const Container = styled.div` flex-wrap: wrap; justify-content: space-between; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 1rem 2rem; } diff --git a/src/components/mypage/joinedProject/Project.styled.ts b/src/components/mypage/joinedProject/Project.styled.ts index c397772e..9d9a9c60 100644 --- a/src/components/mypage/joinedProject/Project.styled.ts +++ b/src/components/mypage/joinedProject/Project.styled.ts @@ -8,7 +8,7 @@ export const Container = styled.div` border: 1px solid #ededed; width: 100%; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 1.3rem; } @@ -29,7 +29,7 @@ export const Title = styled.p` margin-bottom: 1rem; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 1rem; } `; @@ -44,7 +44,7 @@ export const Date = styled.div` font-size: 0.9rem; color: #777777; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.7rem; } } @@ -59,7 +59,7 @@ export const DateWrapper = styled.div` border-radius: 10px; text-align: center; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 0.3rem; } @@ -69,7 +69,7 @@ export const DateWrapper = styled.div` color: #fff; word-break: keep-all; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.6rem; } } @@ -84,7 +84,7 @@ export const Member = styled.div` span { font-size: 0.9rem; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.7rem; } } @@ -118,7 +118,7 @@ export const Skill = styled.div` align-items: center; gap: 0.6rem; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { gap: 0.2rem; } @@ -128,7 +128,7 @@ export const Skill = styled.div` border: 1px solid rgb(196 196 196); border-radius: 50%; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { width: 20px; height: 20px; } diff --git a/src/components/mypage/myProfile/myProfile.styled.ts b/src/components/mypage/myProfile/myProfile.styled.ts index 54e40702..c704d3d9 100644 --- a/src/components/mypage/myProfile/myProfile.styled.ts +++ b/src/components/mypage/myProfile/myProfile.styled.ts @@ -14,7 +14,7 @@ export const Container = styled.div` padding: 2.5rem 3rem; margin-top: 1rem; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 2rem; } @@ -35,7 +35,7 @@ export const BackgroundWrapper = styled.div` word-break: break-all; overflow-wrap: break-word; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; } } @@ -53,7 +53,7 @@ export const BackgroundBox = styled.div` padding: 1rem 1.3rem; border-radius: 15px; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 1.2rem; font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; } @@ -71,7 +71,7 @@ export const ProfileSection = styled.div` padding: 0.5rem; border-radius: 50%; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 0.4rem; } @@ -124,7 +124,7 @@ export const Wrapper = styled.div` font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; } } @@ -142,7 +142,7 @@ export const Wrapper = styled.div` font-size: 0.7rem; color: #a1a1a1; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.7rem; } @@ -155,7 +155,7 @@ export const Wrapper = styled.div` } button { - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.9rem; } } @@ -171,7 +171,7 @@ export const List = styled.div` font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; } } @@ -202,7 +202,7 @@ export const EditWrapper = styled.div` font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; } } @@ -213,7 +213,7 @@ export const EditWrapper = styled.div` min-width: 60px; font-size: 0.9rem; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; } } @@ -227,7 +227,7 @@ export const InputTextNickname = styled.div` export const InputTextGithub = styled.div` width: 90%; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { width: 100%; } `; @@ -242,7 +242,7 @@ export const InputWrapper = styled.div` position: relative; width: 85%; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { width: 100%; } `; @@ -274,7 +274,7 @@ export const EditContainer = styled.div` font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; } } @@ -317,7 +317,7 @@ export const CareerList = styled.div` border-radius: 20px; padding: 0.5rem; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { gap: 0.4rem; } @@ -338,7 +338,7 @@ export const CareerWrapper = styled.div` flex: 1; position: relative; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { flex: auto; } `; diff --git a/src/components/mypage/myProfile/optionBox.styled.ts b/src/components/mypage/myProfile/optionBox.styled.ts index 0ef2c5e4..2f23d4d8 100644 --- a/src/components/mypage/myProfile/optionBox.styled.ts +++ b/src/components/mypage/myProfile/optionBox.styled.ts @@ -31,7 +31,7 @@ export const OptionLabel = styled.label<{ $isSelected: boolean }>` color: ${({ $isSelected }) => ($isSelected ? '#3e5879' : '#a1a1a1')}; transition: border-color 0.3s; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.7rem; } `; diff --git a/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts b/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts index 372ea499..5d9c56d2 100644 --- a/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts +++ b/src/components/projectFormComponents/inputComponent/inputComponent.styled.ts @@ -80,7 +80,7 @@ export const FormError = styled.p` left: 5px; white-space: nowrap; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: ${({ theme }) => theme.heading.small.tabletFontSize}; } `; diff --git a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts b/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts index 6b6f2993..a37f3c14 100644 --- a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts +++ b/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.styled.ts @@ -27,9 +27,10 @@ export const CategoryItem = styled.div<{ isSelected: boolean }>` transform: scale(1.1); transition: all 100ms ease-in-out; } +`; - .name { - color : ${({ theme, isSelected }) => isSelected && theme.color.white} +export const NameSpan = styled.span<{ isSelected: boolean }>` + 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 65204f71..3e8144ac 100644 --- a/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx +++ b/src/components/projectFormComponents/projectInformationInput/fieldCategoryComponent/FieldCategoryComponent.tsx @@ -47,7 +47,7 @@ const FieldCategoryComponent = ({ isSelected={selectedMethod === idx} onClick={() => handleClick(idx)} > - {data.name} + {data.name} ); })} diff --git a/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts b/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts index 8b3b7fde..7f21d1d2 100644 --- a/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts +++ b/src/components/projectFormComponents/projectInformationText/ProjectInformation.styled.ts @@ -6,7 +6,7 @@ export const SectionInput = styled.div` flex-direction: column; gap: 1px; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { margin-bottom: 25px; } `; @@ -25,7 +25,7 @@ export const InfoRow = styled.div` margin-right: 10px; } - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { align-items: flex-start; margin-bottom: 15px; `; @@ -39,7 +39,7 @@ export const InfoLabel = styled.label` margin-right: 15px; white-space: nowrap; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { margin-right: 30px; margin-bottom: 8px; font-size: 0.9rem; @@ -53,7 +53,7 @@ export const InfoText = styled.p` flex: 0.8; text-align: left; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.95rem; flex: 1; } @@ -65,7 +65,7 @@ export const SkillTagContainer = styled.div` gap: 10px; flex: 0.9; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; @@ -94,7 +94,7 @@ export const SkillTagImage = styled.div` margin-top: 2px; } - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { img { width: 35px; height: 35px; @@ -116,7 +116,7 @@ export const BeginnerIcon = styled.img` object-fit: contain; margin-bottom: 15px; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { width: 18px; height: 18px; margin-bottom: 10px; diff --git a/src/pages/apply/Apply.styled.ts b/src/pages/apply/Apply.styled.ts index 4726ca8a..4ee5ff3d 100644 --- a/src/pages/apply/Apply.styled.ts +++ b/src/pages/apply/Apply.styled.ts @@ -7,7 +7,7 @@ export const Container = styled.div` padding: 40px; font-family: Arial, sans-serif; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 20px; } `; @@ -17,7 +17,7 @@ export const Title = styled.h1` font-weight: bold; margin-bottom: 50px; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 1.8rem; } `; @@ -27,7 +27,7 @@ export const Subtitle = styled.h2` color: ${({ theme }) => theme.color.primary}; margin-bottom: 20px; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 1.4rem; } `; @@ -37,7 +37,7 @@ export const Dates = styled.p` color: ${({ theme }) => theme.color.placeholder}; margin-bottom: 50px; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: ${({ theme }) => theme.heading.small.fontSize}; } `; @@ -60,7 +60,7 @@ export const Label = styled.label` font-weight: bold; color: ${({ theme }) => theme.color.black}; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 1.1rem; } `; diff --git a/src/pages/changePassword/ChangePassword.tsx b/src/pages/changePassword/ChangePassword.tsx index ac53afd4..7ffb9deb 100644 --- a/src/pages/changePassword/ChangePassword.tsx +++ b/src/pages/changePassword/ChangePassword.tsx @@ -94,11 +94,11 @@ const ChangePassword = () => { return ( -

+ logo -

+ 비밀번호 재설정
{/* email */} diff --git a/src/pages/login/Login.styled.ts b/src/pages/login/Login.styled.ts index 3f2b3c2f..0decffe6 100644 --- a/src/pages/login/Login.styled.ts +++ b/src/pages/login/Login.styled.ts @@ -31,6 +31,8 @@ export const Container = styled.div` } `; +export const LogoH1 = styled.h1``; + export const InputContainer = styled.div` display: flex; min-width: 310px; diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index 12761f66..71571cb0 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -48,11 +48,11 @@ const Login = () => { return ( -

+ logo -

+ 로그인 theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { padding: 25px; } `; @@ -23,7 +23,7 @@ export const Title = styled.h1` margin-bottom: 0.8rem; margin-top: 1rem; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 28px; } `; @@ -44,7 +44,7 @@ export const UserInfo = styled.div` gap: 12px; align-items: center; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { flex-wrap: wrap; gap: 8px; } @@ -55,7 +55,7 @@ export const UserName = styled.div` font-weight: bold; cursor: pointer; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 18px; } `; @@ -64,7 +64,7 @@ export const PostDate = styled.div` font-size: 0.9rem; color: ${({ theme }) => theme.color.deepGrey}; - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.8rem; } `; @@ -83,7 +83,7 @@ export const ViewCount = styled.div` color: ${({ theme }) => theme.color.deepGrey}; } - @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + @media ${({ theme }) => theme.mediaQuery.tablet} { font-size: 0.9rem; svg { diff --git a/src/pages/register/Register.tsx b/src/pages/register/Register.tsx index 2b7cc3d5..4d7da77f 100644 --- a/src/pages/register/Register.tsx +++ b/src/pages/register/Register.tsx @@ -113,11 +113,11 @@ const Register = () => { return ( -

+ logo -

+ 회원가입 {/* email */} diff --git a/src/routes/AppRoutes.tsx b/src/routes/AppRoutes.tsx index dcc93313..e3fa0181 100644 --- a/src/routes/AppRoutes.tsx +++ b/src/routes/AppRoutes.tsx @@ -32,7 +32,7 @@ const MyProjectList = lazy( () => import('../pages/manage/myProjectList/MyProjectList') ); const MyProfile = lazy( - () => import('../components/mypage/myProfile/myProfile') + () => import('../components/mypage/myProfile/MyProfile') ); const MyApplyProject = lazy( () => import('../components/mypage/appliedProject/MyApplyProject')