diff --git a/src/components/auth/InputText.styled.ts b/src/components/auth/InputText.styled.ts index 4eb1e2e1..7c167d2b 100644 --- a/src/components/auth/InputText.styled.ts +++ b/src/components/auth/InputText.styled.ts @@ -8,6 +8,9 @@ export const Container = styled.div` border-radius: 30px; background-color: ${({ theme }) => theme.color.white}; width: 100%; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + padding: 0.5rem 0.75rem; `; export const IconContainer = styled.div` diff --git a/src/components/common/avatar/Avatar.styled.ts b/src/components/common/avatar/Avatar.styled.ts index 207eb827..8065fee9 100644 --- a/src/components/common/avatar/Avatar.styled.ts +++ b/src/components/common/avatar/Avatar.styled.ts @@ -11,4 +11,9 @@ export const AvatarContainer = styled.div>` height: 100%; border-radius: 50%; } + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + width: calc(${({ size }) => size} * 0.85); + height: calc(${({ size }) => size} * 0.85); + } `; diff --git a/src/components/common/header/Header.styled.ts b/src/components/common/header/Header.styled.ts index 6133571a..65d5b4ff 100644 --- a/src/components/common/header/Header.styled.ts +++ b/src/components/common/header/Header.styled.ts @@ -12,6 +12,11 @@ export const HeaderContainer = styled.div` img { width: 80px; height: 80px; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + width: 70px; + height: 70px; + } } .panel { @@ -58,4 +63,8 @@ export const HeaderContainer = styled.div` } } } + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + padding: 10px 60px; + } `; diff --git a/src/components/common/layout/Layout.styled.ts b/src/components/common/layout/Layout.styled.ts index 03e3896e..68b62fd6 100644 --- a/src/components/common/layout/Layout.styled.ts +++ b/src/components/common/layout/Layout.styled.ts @@ -5,4 +5,8 @@ export const LayoutContainer = styled.div` margin: 0 auto; max-width: ${({ theme }) => theme.layout.width.desktop}; padding: 0 120px; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + padding: 0 60px; + } `; diff --git a/src/components/common/sidebar/Sidebar.styled.ts b/src/components/common/sidebar/Sidebar.styled.ts index 3a227e91..570aae6c 100644 --- a/src/components/common/sidebar/Sidebar.styled.ts +++ b/src/components/common/sidebar/Sidebar.styled.ts @@ -6,11 +6,12 @@ export const Container = styled.div` border: 2px solid #f0f0f0; border-radius: ${({ theme }) => theme.borderRadius.large}; width: 22%; - min-width: 140px; + min-width: 130px; height: 80vh; margin-right: 1.25rem; padding-bottom: 1rem; `; + export const AvartarContainer = styled.div` width: 100%; display: flex; @@ -44,6 +45,10 @@ export const MenuItem = styled.div<{ $isActive: boolean }>` background-color: ${({ $isActive }) => $isActive ? '#f9f9f9' : 'transparent'}; + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; + } + &:hover { background-color: #f9f9f9; } @@ -52,6 +57,11 @@ export const MenuItem = styled.div<{ $isActive: boolean }>` color: #6d6d6d; width: 30px; height: 30px; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + width: 23px; + height: 23px; + } } `; export const IconWrapper = styled.div` diff --git a/src/components/common/title/Title.styled.ts b/src/components/common/title/Title.styled.ts index 0818cc31..3a814dcd 100644 --- a/src/components/common/title/Title.styled.ts +++ b/src/components/common/title/Title.styled.ts @@ -4,4 +4,8 @@ import { TitleProps } from './Title'; export const Container = styled.h1>` font-size: ${({ theme, size }) => theme.heading[size].fontSize}; color: ${({ theme }) => theme.color.primary}; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: ${({ theme, size }) => theme.heading[size].tabletFontSize}; + } `; diff --git a/src/components/mypage/appliedProject/MyApplyProject.styled.ts b/src/components/mypage/appliedProject/MyApplyProject.styled.ts index 3b923a19..dbfbf495 100644 --- a/src/components/mypage/appliedProject/MyApplyProject.styled.ts +++ b/src/components/mypage/appliedProject/MyApplyProject.styled.ts @@ -20,4 +20,8 @@ export const Container = styled.div` display: flex; flex-direction: column; gap: 1rem; + + @media screen and ${({ 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 d02749c9..6b972433 100644 --- a/src/components/mypage/appliedProject/MyStatus.styled.ts +++ b/src/components/mypage/appliedProject/MyStatus.styled.ts @@ -3,6 +3,7 @@ import styled from 'styled-components'; export const Container = styled.div` display: flex; flex-wrap: wrap; + gap: 1rem; justify-content: space-between; align-items: center; padding: 1rem 1.3rem; @@ -10,6 +11,10 @@ export const Container = styled.div` border-radius: 20px; border: 1px solid #ededed; + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: 0.9rem; + } + &:hover { background-color: #eee; } @@ -42,5 +47,9 @@ export const Status = styled.div<{ $isAccepted: boolean }>` span { font-size: 0.8rem; font-weight: 800; + + @media screen and ${({ 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 66beca80..33ec71c4 100644 --- a/src/components/mypage/joinedProject/MyJoinProjects.styled.ts +++ b/src/components/mypage/joinedProject/MyJoinProjects.styled.ts @@ -29,8 +29,11 @@ export const Container = styled.div` display: flex; flex-wrap: wrap; - justify-content: center; - gap: 5%; + justify-content: space-between; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + padding: 1rem 2rem; + } a { display: inline-block; diff --git a/src/components/mypage/joinedProject/Project.styled.ts b/src/components/mypage/joinedProject/Project.styled.ts index b21fd863..c397772e 100644 --- a/src/components/mypage/joinedProject/Project.styled.ts +++ b/src/components/mypage/joinedProject/Project.styled.ts @@ -8,6 +8,10 @@ export const Container = styled.div` border: 1px solid #ededed; width: 100%; + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + padding: 1.3rem; + } + &:hover { background-color: #eee; } @@ -24,6 +28,10 @@ export const Title = styled.p` font-weight: 600; margin-bottom: 1rem; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: 1rem; + } `; export const Date = styled.div` @@ -35,6 +43,10 @@ export const Date = styled.div` span { font-size: 0.9rem; color: #777777; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: 0.7rem; + } } `; @@ -45,11 +57,21 @@ export const DateWrapper = styled.div` padding: 0.2rem 0.65rem; background-color: #3e5879; border-radius: 10px; + text-align: center; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + padding: 0.3rem; + } span { font-weight: 500; font-size: 0.78rem; color: #fff; + word-break: keep-all; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: 0.6rem; + } } `; @@ -61,6 +83,10 @@ export const Member = styled.div` span { font-size: 0.9rem; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: 0.7rem; + } } `; @@ -92,10 +118,20 @@ export const Skill = styled.div` align-items: center; gap: 0.6rem; + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + gap: 0.2rem; + } + img { width: 40px; + height: 40px; border: 1px solid rgb(196 196 196); border-radius: 50%; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + width: 20px; + height: 20px; + } } svg { diff --git a/src/components/mypage/myProfile/myProfile.styled.ts b/src/components/mypage/myProfile/myProfile.styled.ts index ef46a354..54e40702 100644 --- a/src/components/mypage/myProfile/myProfile.styled.ts +++ b/src/components/mypage/myProfile/myProfile.styled.ts @@ -14,6 +14,10 @@ export const Container = styled.div` padding: 2.5rem 3rem; margin-top: 1rem; + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + padding: 2rem; + } + form { display: flex; flex-direction: column; @@ -26,13 +30,33 @@ export const BackgroundWrapper = styled.div` display: flex; padding: 0.5rem 1rem; border-radius: 15px; + + span { + word-break: break-all; + overflow-wrap: break-word; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; + } + } + + li { + span { + font-size: 0.7rem; + } + } `; export const BackgroundBox = styled.div` background-color: #fff; display: flex; - padding: 1.5rem; + padding: 1rem 1.3rem; border-radius: 15px; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + padding: 1.2rem; + font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; + } `; export const ProfileSection = styled.div` @@ -41,12 +65,16 @@ export const ProfileSection = styled.div` button { position: absolute; - top: 1.1rem; - right: 1rem; + top: 0.5rem; + right: 1.2rem; background-color: #3e5879; padding: 0.5rem; border-radius: 50%; + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + padding: 0.4rem; + } + svg { width: 1.3rem; height: 1.3rem; @@ -95,6 +123,10 @@ export const Wrapper = styled.div` label { font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; + } } ul { @@ -110,6 +142,10 @@ export const Wrapper = styled.div` font-size: 0.7rem; color: #a1a1a1; + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: 0.7rem; + } + img { background-color: white; border-radius: 50%; @@ -119,7 +155,9 @@ export const Wrapper = styled.div` } button { - margin-right: 1rem; + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: 0.9rem; + } } `; @@ -132,6 +170,10 @@ export const List = styled.div` label { font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; + } } ul { display: flex; @@ -139,7 +181,7 @@ export const List = styled.div` li { color: #a1a1a1; - margin-bottom: 0.8rem; + margin-bottom: 0.5rem; span { color: ${({ theme }) => theme.color.primary}; @@ -151,14 +193,18 @@ export const List = styled.div` export const EditWrapper = styled.div` display: flex; flex-wrap: wrap; + gap: 1rem; width: 100%; align-items: center; - margin-bottom: 2.6rem; + margin-bottom: 3rem; label { - margin-right: 1rem; font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; + } } button { @@ -166,6 +212,10 @@ export const EditWrapper = styled.div` padding: 0.65rem 1rem; min-width: 60px; font-size: 0.9rem; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; + } } `; @@ -176,6 +226,10 @@ export const InputTextNickname = styled.div` export const InputTextGithub = styled.div` width: 90%; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + width: 100%; + } `; export const InputTextCareer = styled.div` @@ -187,6 +241,10 @@ export const InputWrapper = styled.div` align-items: center; position: relative; width: 85%; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + width: 100%; + } `; export const ErrorMessage = styled.span<{ message?: string }>` @@ -215,6 +273,10 @@ export const EditContainer = styled.div` label { font-weight: 700; color: ${({ theme }) => theme.color.deepGrey}; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize}; + } } button { @@ -255,6 +317,10 @@ export const CareerList = styled.div` border-radius: 20px; padding: 0.5rem; + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + gap: 0.4rem; + } + button { position: static; display: flex; @@ -271,4 +337,8 @@ export const CareerList = styled.div` export const CareerWrapper = styled.div` flex: 1; position: relative; + + @media screen and ${({ 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 df77c016..0ef2c5e4 100644 --- a/src/components/mypage/myProfile/optionBox.styled.ts +++ b/src/components/mypage/myProfile/optionBox.styled.ts @@ -30,6 +30,9 @@ export const OptionLabel = styled.label<{ $isSelected: boolean }>` font-weight: 400; color: ${({ $isSelected }) => ($isSelected ? '#3e5879' : '#a1a1a1')}; transition: border-color 0.3s; + + @media screen and ${({ theme }) => theme.mediaQuery.tablet} { + font-size: 0.7rem; } `; diff --git a/src/components/userPage/userProfile/UserProfile.tsx b/src/components/userPage/userProfile/UserProfile.tsx index 541b55f4..31c20c04 100644 --- a/src/components/userPage/userProfile/UserProfile.tsx +++ b/src/components/userPage/userProfile/UserProfile.tsx @@ -35,7 +35,7 @@ const UserProfile = () => { - +
    {userData?.skills.map((skill) => (
  • @@ -49,7 +49,7 @@ const UserProfile = () => {
    • ))}
- + diff --git a/src/mock/browser.ts b/src/mock/browser.ts index efe033dd..1370c817 100644 --- a/src/mock/browser.ts +++ b/src/mock/browser.ts @@ -7,6 +7,14 @@ import { passNonPassList, } from './applicant'; import { projectDetail } from './projectDetail'; +import { + myPageAppliedProjectList, + myPageJoinedProjectList, + myPagePositionTag, + myPageProfile, + myPageSkillTag, +} from './mypage'; +import { userPageAppliedProjectList, userPageProfile } from './userpage'; export const handlers = [ myProjectList, @@ -14,6 +22,13 @@ export const handlers = [ projectDetail, applicantInfo, passNonPass, + myPageProfile, + myPagePositionTag, + myPageSkillTag, + myPageJoinedProjectList, + myPageAppliedProjectList, + userPageProfile, + userPageAppliedProjectList, passNonPassList, ]; diff --git a/src/mock/mockMypageAppliedProjectListData.json b/src/mock/mockMypageAppliedProjectListData.json new file mode 100644 index 00000000..b1f6fff1 --- /dev/null +++ b/src/mock/mockMypageAppliedProjectListData.json @@ -0,0 +1,12 @@ +[ + { + "id": 1, + "projectTitle": "클론코딩 사이드 프로젝트 팀원 모집", + "status": "ACCEPTED" + }, + { + "id": 2, + "projectTitle": "클론코딩 모집", + "status": "REJECTED" + } +] diff --git a/src/mock/mockMypageJoinedProjectListData.json b/src/mock/mockMypageJoinedProjectListData.json new file mode 100644 index 00000000..79a79e61 --- /dev/null +++ b/src/mock/mockMypageJoinedProjectListData.json @@ -0,0 +1,143 @@ +[ + { + "projectId": 10, + "title": "클론코딩 사이드 프로젝트 모집 공고", + "description": "string", + "totalMember": 3, + "startDate": "2025-01-25T00:00:00.000Z", + "estimatedPeriod": "3개월", + "methodId": 1, + "isBeginner": true, + "isDone": true, + "recruitmentStartDate": "2025-01-06T00:00:00.000Z", + "recruitmentEndDate": "2025-02-15T00:00:00.000Z", + "status": "ACCEPTED", + "ProjectSkillTag": [ + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + } + ], + "ProjectPositionTag": [ + { + "projectId": 10, + "positionTagId": 1, + "PositionTag": { + "id": 1, + "name": "백엔드" + } + } + ] + }, + { + "projectId": 10, + "title": "클론코딩 사이드 프로젝트 모집 공고", + "description": "string", + "totalMember": 3, + "startDate": "2025-01-25T00:00:00.000Z", + "estimatedPeriod": "3개월", + "methodId": 1, + "isBeginner": true, + "isDone": true, + "recruitmentStartDate": "2025-01-06T00:00:00.000Z", + "recruitmentEndDate": "2025-02-15T00:00:00.000Z", + "status": "ACCEPTED", + "ProjectSkillTag": [ + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + } + ], + "ProjectPositionTag": [ + { + "projectId": 10, + "positionTagId": 1, + "PositionTag": { + "id": 1, + "name": "백엔드" + } + } + ] + }, + { + "projectId": 10, + "title": "클론코딩 사이드 프로젝트 모집 공고", + "description": "string", + "totalMember": 3, + "startDate": "2025-01-25T00:00:00.000Z", + "estimatedPeriod": "3개월", + "methodId": 1, + "isBeginner": true, + "isDone": true, + "recruitmentStartDate": "2025-01-06T00:00:00.000Z", + "recruitmentEndDate": "2025-02-15T00:00:00.000Z", + "status": "ACCEPTED", + "ProjectSkillTag": [ + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + } + ], + "ProjectPositionTag": [ + { + "projectId": 10, + "positionTagId": 1, + "PositionTag": { + "id": 1, + "name": "백엔드" + } + } + ] + } +] diff --git a/src/mock/mockMypageProfileData.json b/src/mock/mockMypageProfileData.json new file mode 100644 index 00000000..1c13ad6b --- /dev/null +++ b/src/mock/mockMypageProfileData.json @@ -0,0 +1,42 @@ +{ + "id": 1, + "nickname": "Jenny", + "email": "jenny@example.com", + "bio": "안녕하세요, 저는 프론트엔드 개발자입니다.", + "profileImg": "https://example.com/profile.jpg", + "userLevel": "Beginner", + "github": "https://github.com/jennywithlove", + "career": [ + { + "name": "Google", + "periodStart": "2020-01-01", + "periodEnd": "2022-01-01", + "role": "Software Engineer" + }, + { + "name": "Facebook", + "periodStart": "2018-06-01", + "periodEnd": "2019-12-31", + "role": "Backend Developer" + } + ], + "positionTag": { + "id": 2, + "name": "프론트엔드" + }, + "skills": [ + { + "skillName": "JavaScript", + "skillImg": "" + }, + { + "skillName": "TypeScript", + "skillImg": "" + }, + { + "skillName": "React", + "skillImg": "" + } + ], + "createdAt": "2023-01-01T00:00:00.000Z" +} diff --git a/src/mock/mockPositionTagData.json b/src/mock/mockPositionTagData.json new file mode 100644 index 00000000..a38a5e88 --- /dev/null +++ b/src/mock/mockPositionTagData.json @@ -0,0 +1,22 @@ +[ + { + "id": 1, + "name": "백엔드", + "createdAt": "2025-01-02T12:19:48.000Z" + }, + { + "id": 2, + "name": "프론트엔드", + "createdAt": "2025-01-02T12:19:51.000Z" + }, + { + "id": 3, + "name": "디자이너", + "createdAt": "2025-01-02T12:19:55.000Z" + }, + { + "id": 4, + "name": "PM", + "createdAt": "2025-01-02T12:19:55.000Z" + } +] diff --git a/src/mock/mockSkillTagData.json b/src/mock/mockSkillTagData.json new file mode 100644 index 00000000..d5dda079 --- /dev/null +++ b/src/mock/mockSkillTagData.json @@ -0,0 +1,38 @@ +[ + { + "id": 1, + "name": "JavaScript", + "img": "", + "createdAt": "2025-01-02T15:07:03.000Z" + }, + { + "id": 2, + "name": "TypeScript", + "img": "", + "createdAt": "2025-01-02T15:07:23.000Z" + }, + { + "id": 3, + "name": "React", + "img": "", + "createdAt": "2025-01-02T15:07:31.000Z" + }, + { + "id": 4, + "name": "Nodejs", + "img": "", + "createdAt": "2025-01-02T15:07:31.000Z" + }, + { + "id": 5, + "name": "Nest", + "img": "", + "createdAt": "2025-01-02T15:07:31.000Z" + }, + { + "id": 6, + "name": "Figma", + "img": "", + "createdAt": "2025-01-02T15:07:31.000Z" + } +] diff --git a/src/mock/mockUserpageAppliedProjectListData.json b/src/mock/mockUserpageAppliedProjectListData.json new file mode 100644 index 00000000..939981c6 --- /dev/null +++ b/src/mock/mockUserpageAppliedProjectListData.json @@ -0,0 +1,172 @@ +{ + "acceptedProjects": [ + { + "projectId": 1, + "title": "참여한 프로젝트", + "description": "참여한 프로젝트 설명", + "totalMember": 5, + "startDate": "2025-01-01T00:00:00.000Z", + "estimatedPeriod": "3개월", + "methodId": 1, + "isBeginner": true, + "isDone": true, + "recruitmentStartDate": "2025-01-01T00:00:00.000Z", + "recruitmentEndDate": "2025-02-01T00:00:00.000Z", + "status": "ACCEPTED", + "ProjectSkillTag": [ + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + } + ], + "ProjectPositionTag": [] + }, + { + "projectId": 1, + "title": "참여한 프로젝트", + "description": "참여한 프로젝트 설명", + "totalMember": 5, + "startDate": "2025-01-01T00:00:00.000Z", + "estimatedPeriod": "3개월", + "methodId": 1, + "isBeginner": true, + "isDone": true, + "recruitmentStartDate": "2025-01-01T00:00:00.000Z", + "recruitmentEndDate": "2025-02-01T00:00:00.000Z", + "status": "ACCEPTED", + "ProjectSkillTag": [ + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + } + ], + "ProjectPositionTag": [] + } + ], + "ownProjects": [ + { + "projectId": 2, + "title": "기획한 프로젝트", + "description": "기획한 프로젝트 설명", + "totalMember": 3, + "startDate": "2025-03-01T00:00:00.000Z", + "estimatedPeriod": "6개월", + "methodId": 2, + "isBeginner": false, + "isDone": true, + "recruitmentStartDate": "2025-02-01T00:00:00.000Z", + "recruitmentEndDate": "2025-04-01T00:00:00.000Z", + "ProjectSkillTag": [ + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + }, + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + } + ], + "ProjectPositionTag": [ + { + "projectId": 10, + "positionTagId": 1, + "PositionTag": { + "id": 1, + "name": "백엔드" + } + } + ] + }, + { + "projectId": 1, + "title": "참여한 프로젝트", + "description": "참여한 프로젝트 설명", + "totalMember": 5, + "startDate": "2025-01-01T00:00:00.000Z", + "estimatedPeriod": "3개월", + "methodId": 1, + "isBeginner": true, + "isDone": true, + "recruitmentStartDate": "2025-01-01T00:00:00.000Z", + "recruitmentEndDate": "2025-02-01T00:00:00.000Z", + "status": "ACCEPTED", + "ProjectSkillTag": [ + { + "projectId": 10, + "skillTagId": 1, + "SkillTag": { + "id": 1, + "name": "JavaScript", + "img": "이미지" + } + } + ], + "ProjectPositionTag": [] + } + ] +} diff --git a/src/mock/mockUserpageProfileData.json b/src/mock/mockUserpageProfileData.json new file mode 100644 index 00000000..6a0e3c26 --- /dev/null +++ b/src/mock/mockUserpageProfileData.json @@ -0,0 +1,42 @@ +{ + "id": 1, + "nickname": "Jenny", + "email": "jenny@example.com", + "bio": "안녕하세요, 저는 프론트엔드 개발자입니다.", + "profileImg": "https://example.com/profile.jpg", + "userLevel": "Beginner", + "github": "https://github.com/jennywithlove", + "career": [ + { + "name": "Google", + "periodStart": "2020-01-01", + "periodEnd": "2022-01-01", + "role": "Software Engineer" + }, + { + "name": "Facebook", + "periodStart": "2018-06-01", + "periodEnd": "2019-12-31", + "role": "Backend Developer" + } + ], + "positionTag": { + "id": 2, + "name": "프론트엔드" + }, + "skills": [ + { + "skillName": "JavaScript", + "skillImg": "https://example.com/js-logo.png" + }, + { + "skillName": "TypeScript", + "skillImg": "https://example.com/TypeScript-logo.png" + }, + { + "skillName": "React", + "skillImg": "https://example.com/react-logo.png" + } + ], + "createdAt": "2023-01-01T00:00:00.000Z" +} diff --git a/src/mock/mypage.ts b/src/mock/mypage.ts new file mode 100644 index 00000000..2b48d4fd --- /dev/null +++ b/src/mock/mypage.ts @@ -0,0 +1,51 @@ +import { http, HttpResponse } from 'msw'; +import mockMypageProfileData from './mockMypageProfileData.json'; +import mockPositionTagData from './mockPositionTagData.json'; +import mockSkillTagData from './mockSkillTagData.json'; +import mockMypageJoinedProjectListData from './mockMypageJoinedProjectListData.json'; +import mockMypageAppliedProjectListData from './mockMypageAppliedProjectListData.json'; + +export const myPageProfile = http.get( + `${import.meta.env.VITE_API_BASE_URL}/user/me`, + () => { + return HttpResponse.json(mockMypageProfileData, { + status: 200, + }); + } +); + +export const myPagePositionTag = http.get( + `${import.meta.env.VITE_API_BASE_URL}/position-tag`, + () => { + return HttpResponse.json(mockPositionTagData, { + status: 200, + }); + } +); + +export const myPageSkillTag = http.get( + `${import.meta.env.VITE_API_BASE_URL}/skill-tag`, + () => { + return HttpResponse.json(mockSkillTagData, { + status: 200, + }); + } +); + +export const myPageJoinedProjectList = http.get( + `${import.meta.env.VITE_API_BASE_URL}/user/me/project`, + () => { + return HttpResponse.json(mockMypageJoinedProjectListData, { + status: 200, + }); + } +); + +export const myPageAppliedProjectList = http.get( + `${import.meta.env.VITE_API_BASE_URL}/user/me/applications`, + () => { + return HttpResponse.json(mockMypageAppliedProjectListData, { + status: 200, + }); + } +); diff --git a/src/mock/userpage.ts b/src/mock/userpage.ts new file mode 100644 index 00000000..65f443d1 --- /dev/null +++ b/src/mock/userpage.ts @@ -0,0 +1,21 @@ +import { http, HttpResponse } from 'msw'; +import mockUserpageProfileData from './mockUserpageProfileData.json'; +import mockUserpageAppliedProjectListData from './mockUserpageAppliedProjectListData.json'; + +export const userPageProfile = http.get( + `${import.meta.env.VITE_API_BASE_URL}/user/:id`, + () => { + return HttpResponse.json(mockUserpageProfileData, { + status: 200, + }); + } +); + +export const userPageAppliedProjectList = http.get( + `${import.meta.env.VITE_API_BASE_URL}/user/:id/project`, + () => { + return HttpResponse.json(mockUserpageAppliedProjectListData, { + status: 200, + }); + } +); diff --git a/src/style/theme.ts b/src/style/theme.ts index 87fb0167..b0f6935d 100644 --- a/src/style/theme.ts +++ b/src/style/theme.ts @@ -25,11 +25,15 @@ export type ButtonSchema = 'primary'; export type LayoutWidth = 'desktop' | 'tablet' | 'mobile'; export type BorderRadiusSize = 'primary' | 'large'; + +export type MediaQuery = 'mobile' | 'tablet' | 'desktop'; + interface Theme { color: Record; heading: { [key in HeadingSize]: { fontSize: string; + tabletFontSize: string; }; }; buttonSize: { @@ -52,6 +56,9 @@ interface Theme { [key in LayoutWidth]: string; }; }; + mediaQuery: { + [key in MediaQuery]: string; + }; } export const defaultTheme: Theme = { @@ -68,12 +75,12 @@ export const defaultTheme: Theme = { navy: '#213555', }, heading: { - large: { fontSize: '1.75rem' }, - semiLarge: { fontSize: '1.5rem' }, - medium: { fontSize: '1.25rem' }, - semiSmall: { fontSize: '1.1rem' }, - small: { fontSize: '1rem' }, - verySmall: { fontSize: '0.5rem' }, + large: { fontSize: '1.75rem', tabletFontSize: '1.5rem' }, + semiLarge: { fontSize: '1.5rem', tabletFontSize: '1.25rem' }, + medium: { fontSize: '1.25rem', tabletFontSize: '1.1rem' }, + semiSmall: { fontSize: '1.1rem', tabletFontSize: '0.9rem' }, + small: { fontSize: '1rem', tabletFontSize: '0.8rem' }, + verySmall: { fontSize: '0.5rem', tabletFontSize: '0.4rem' }, }, buttonSize: { primary: { @@ -102,4 +109,9 @@ export const defaultTheme: Theme = { mobile: '320px', }, }, + mediaQuery: { + mobile: '(max-width: 768px)', + tablet: '(max-width: 1024px)', + desktop: '(min-width: 1025px)', + }, };