From c0215cf51d359e2ff31ac522ff741b2a5dca3aca Mon Sep 17 00:00:00 2001 From: bmj0053 Date: Thu, 18 Jul 2024 11:22:54 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=EC=A7=84=ED=96=89=20=EC=A4=91?= =?UTF-8?q?=EC=9D=B8=20=EB=AF=B8=EC=85=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 진행 중인 미션 컴포넌트 mock data로 구현 - url 및 페이지 추가 --- .../MyMissionCompleted/MyMissionCompleted.tsx | 3 + .../MyMissionInProgress.styled.ts | 105 ++++++++++++++++++ .../MyMissionInProgress.tsx | 33 ++++++ frontend/src/constants/routes.ts | 1 + frontend/src/index.tsx | 9 ++ frontend/src/pages/MyMissionPage.styled.ts | 6 + frontend/src/pages/MyMissionPage.tsx | 12 ++ 7 files changed, 169 insertions(+) create mode 100644 frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx create mode 100644 frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.styled.ts create mode 100644 frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.tsx create mode 100644 frontend/src/pages/MyMissionPage.styled.ts create mode 100644 frontend/src/pages/MyMissionPage.tsx diff --git a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx new file mode 100644 index 00000000..dead36c6 --- /dev/null +++ b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx @@ -0,0 +1,3 @@ +export default function MyMissionCompleted() { + return
완료한 미션
; +} diff --git a/frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.styled.ts b/frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.styled.ts new file mode 100644 index 00000000..5d702124 --- /dev/null +++ b/frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.styled.ts @@ -0,0 +1,105 @@ +import GithubLogo from '@/assets/images/githubLogo.svg'; +import styled from 'styled-components'; + +export const MyMissionInProgressContainer = styled.div` + display: flex; + flex-direction: column; + gap: 3.5rem; +`; + +export const MyMissionInProgressWrapper = styled.div` + background-color: var(--grey-50); + width: 100%; + height: 24rem; + + display: grid; + grid-template-columns: 1fr 1.5fr 1fr; + gap: 2.7rem; + padding: 3.2rem 4.1rem; + box-sizing: border-box; + border-radius: 0.8rem; +`; + +export const MissionContentWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; +`; + +export const MissionButtonWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; +`; + +export const PrButtonWrapper = styled.div` + display: flex; + gap: 0.7rem; + justify-content: flex-end; +`; + +export const MissionCompleteWrapper = styled.div` + display: flex; + justify-content: flex-end; +`; + +export const ThumbnailImg = styled.img` + width: 100%; + height: -webkit-fill-available; // Chrome, Safari + height: -moz-available; // Firefox + overflow: hidden; + object-fit: cover; + border-radius: 0.8rem; +`; + +export const Title = styled.h2` + font-size: 3.2rem; + font-weight: bold; +`; + +export const MissionTitle = styled.h3` + font-size: 2.4rem; + font-weight: bold; +`; + +export const MissionDate = styled.p` + font-size: 1.8rem; + font-weight: 500; + color: var(--grey-400); +`; + +export const GithubIcons = styled(GithubLogo)` + height: 100%; +`; + +export const PrButton = styled.button` + background-color: var(--grey-200); + width: fit-content; + padding: 0.6rem 1.9rem; + border-radius: 0.4rem; + + display: flex; + gap: 0.4rem; + justify-content: center; + align-items: center; + + white-space: nowrap; + font-size: 1.4rem; + font-weight: bold; +`; + +export const MissionCompleteButton = styled.button` + background-color: var(--primary-200); + width: fit-content; + padding: 0.6rem 1.9rem; + border-radius: 0.4rem; + + display: flex; + gap: 0.4rem; + justify-content: center; + align-items: center; + + white-space: nowrap; + font-size: 1.4rem; + font-weight: bold; +`; diff --git a/frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.tsx b/frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.tsx new file mode 100644 index 00000000..b3ebb5cf --- /dev/null +++ b/frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.tsx @@ -0,0 +1,33 @@ +import * as S from './MyMissionInProgress.styled'; + +export default function MyMissionInProgress() { + return ( + + 진행 중인 미션 + + + + + + 숫자 야구 게임 미션 + 2024.07.17 ~ 2024.07.24 23:59 + + + + + + + 페어 PR 이동 + + + 내 PR 이동 + + + + 리뷰 완료 + + + + + ); +} diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts index f84bdbbe..b2874dcd 100644 --- a/frontend/src/constants/routes.ts +++ b/frontend/src/constants/routes.ts @@ -2,4 +2,5 @@ export const ROUTES = { main: '/', submit: '/submit/:id', missionDetail: '/missions/:id', + myMission: '/my-mission' } as const; diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 82969ee8..84b9253b 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -8,6 +8,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import MissionDetailPage from './pages/MissionDetailPage'; import MissionListPage from './pages/MissionListPage'; import MissionSubmitPage from './pages/MissionSubmitPage'; +import MyMissionPage from './pages/MyMissionPage'; const queryClient = new QueryClient(); @@ -39,6 +40,14 @@ const routes = [ ), }, + { + path: ROUTES.myMission, + element: ( + + + + ), + }, ]; const router = createBrowserRouter(routes, { diff --git a/frontend/src/pages/MyMissionPage.styled.ts b/frontend/src/pages/MyMissionPage.styled.ts new file mode 100644 index 00000000..113cbfb1 --- /dev/null +++ b/frontend/src/pages/MyMissionPage.styled.ts @@ -0,0 +1,6 @@ +import styled from 'styled-components'; + +export const MyMissionPageContainer = styled.div` + width: 100rem; + margin: 0 auto; +`; diff --git a/frontend/src/pages/MyMissionPage.tsx b/frontend/src/pages/MyMissionPage.tsx new file mode 100644 index 00000000..49b525e5 --- /dev/null +++ b/frontend/src/pages/MyMissionPage.tsx @@ -0,0 +1,12 @@ +import MyMissionInProgress from '@/components/MyMission/MyMissionInProgress/MyMissionInProgress'; +import MyMissionCompleted from '@/components/MyMission/MyMissionCompleted/MyMissionCompleted'; +import * as S from './MyMissionPage.styled'; + +export default function MyMissionPage() { + return ( + + + + + ); +} From bcffa0cb133f319a665b176b81b263c8ad59a708 Mon Sep 17 00:00:00 2001 From: bmj0053 Date: Thu, 18 Jul 2024 13:44:00 +0900 Subject: [PATCH 2/6] =?UTF-8?q?design:=20=EC=99=84=EB=A3=8C=ED=95=9C=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyMissionCompleted.styled.ts | 106 ++++++++++++++++++ .../MyMissionCompleted/MyMissionCompleted.tsx | 93 ++++++++++++++- frontend/src/pages/MyMissionPage.styled.ts | 6 +- 3 files changed, 203 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.styled.ts diff --git a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.styled.ts b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.styled.ts new file mode 100644 index 00000000..69367b27 --- /dev/null +++ b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.styled.ts @@ -0,0 +1,106 @@ +import styled from 'styled-components'; + +export const MyMissionCompletedContainer = styled.div` + display: flex; + flex-direction: column; + gap: 3.5rem; +`; + +export const MissionCardListWrapper = styled.div` + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2.7rem; +`; + +export const MissionCardWrapper = styled.div` + min-height: 32.6rem; + border-radius: 0.8rem; + + display: flex; + flex-direction: column; + background-color: var(--grey-50); + + position: relative; + box-sizing: border-box; +`; + +export const MissionCardHeaderWrapper = styled.div` + display: flex; + position: relative; + height: 50%; +`; + +export const MissionCardContentWrapper = styled.div` + width: 100%; + height: 50%; + + display: flex; + flex-direction: column; + justify-content: space-between; + + box-sizing: border-box; + padding: 0.8rem 1.7rem; +`; + +export const Title = styled.h2` + font-size: 3.2rem; + font-weight: bold; +`; + +export const MissionLanguageBox = styled.div` + background-color: var(--primary-300); + position: absolute; + top: 0.8rem; + right: 0.8rem; + + padding: 0.3rem 1.2rem; + box-sizing: border-box; + border-radius: 0.4rem; + + font-size: 1.4rem; + font-weight: 500; +`; + +export const ThumbnailImg = styled.img` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + object-fit: cover; + border-radius: 0.8rem 0.8rem 0 0; +`; + +export const MissionTitle = styled.h3` + font-size: 2.2rem; + font-weight: bold; +`; + +export const MissionDate = styled.p` + font-size: 1.4rem; + font-weight: 500; + color: var(--grey-400); +`; + +export const PrButtonWrapper = styled.div` + display: flex; + gap: 0.7rem; + justify-content: start; +`; + +export const PrButton = styled.button` + background-color: var(--grey-200); + width: fit-content; + padding: 0.6rem 1.9rem; + border-radius: 0.4rem; + + display: flex; + gap: 0.4rem; + justify-content: center; + align-items: center; + + white-space: nowrap; + font-size: 1.2rem; + font-weight: bold; +`; diff --git a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx index dead36c6..50526be1 100644 --- a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx +++ b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx @@ -1,3 +1,94 @@ +import * as S from './MyMissionCompleted.styled'; + +const mocks = [ + { + id: 1, + mission: { + id: 1, + title: '루터회관 흡연 단속', + language: 'JAVA', + description: '루터회관 흡연 벌칙 프로그램을 구현한다.', + thumbnail: + 'https://dszw1qtcnsa5e.cloudfront.net/community/20231115/ccefd368-2687-4d26-954d-712315f38fea/2232611625864AF59FF189AB61A75869.jpeg', + url: 'https://github.com/develup-mission/java-smoking', + }, + myPrLink: 'https://github.com/develup-mission/java-smoking/pull/1', + pairPrLink: 'https://github.com/develup-mission/java-smoking/pull/2', + status: '리뷰 완료', + }, + { + id: 2, + mission: { + id: 2, + title: '루터회관 흡연 단속 2', + language: 'JAVA', + description: '루터회관 흡연 벌칙 프로그램을 구현한다.', + thumbnail: + 'https://dszw1qtcnsa5e.cloudfront.net/community/20231115/ccefd368-2687-4d26-954d-712315f38fea/2232611625864AF59FF189AB61A75869.jpeg', + url: 'https://github.com/develup-mission/java-smoking', + }, + myPrLink: 'https://github.com/develup-mission/java-smoking/pull/1', + pairPrLink: 'https://github.com/develup-mission/java-smoking/pull/2', + status: '리뷰 완료', + }, + { + id: 3, + mission: { + id: 2, + title: '루터회관 흡연 단속 3', + language: 'JAVA', + description: '루터회관 흡연 벌칙 프로그램을 구현한다.', + thumbnail: + 'https://dszw1qtcnsa5e.cloudfront.net/community/20231115/ccefd368-2687-4d26-954d-712315f38fea/2232611625864AF59FF189AB61A75869.jpeg', + url: 'https://github.com/develup-mission/java-smoking', + }, + myPrLink: 'https://github.com/develup-mission/java-smoking/pull/1', + pairPrLink: 'https://github.com/develup-mission/java-smoking/pull/2', + status: '리뷰 완료', + }, + { + id: 4, + mission: { + id: 2, + title: '루터회관 흡연 단속 4', + language: 'JAVA', + description: '루터회관 흡연 벌칙 프로그램을 구현한다.', + thumbnail: + 'https://dszw1qtcnsa5e.cloudfront.net/community/20231115/ccefd368-2687-4d26-954d-712315f38fea/2232611625864AF59FF189AB61A75869.jpeg', + url: 'https://github.com/develup-mission/java-smoking', + }, + myPrLink: 'https://github.com/develup-mission/java-smoking/pull/1', + pairPrLink: 'https://github.com/develup-mission/java-smoking/pull/2', + status: '리뷰 완료', + }, +]; + export default function MyMissionCompleted() { - return
완료한 미션
; + return ( + + 완료한 미션 + + {mocks.map((mock) => ( + + + + {mock.mission.language} + + + +
+ {mock.mission.title} + 2024.07.17 ~ 2024.07.24 +
+ + + 페어 PR 이동 + 내 PR 이동 + + + + ))} + + + ); } diff --git a/frontend/src/pages/MyMissionPage.styled.ts b/frontend/src/pages/MyMissionPage.styled.ts index 113cbfb1..ca686327 100644 --- a/frontend/src/pages/MyMissionPage.styled.ts +++ b/frontend/src/pages/MyMissionPage.styled.ts @@ -2,5 +2,9 @@ import styled from 'styled-components'; export const MyMissionPageContainer = styled.div` width: 100rem; - margin: 0 auto; + margin: 4rem auto; + + display: flex; + flex-direction: column; + gap: 7rem; `; From 0e100d5cdcfe014e13b2cd07551fe5adda4012ec Mon Sep 17 00:00:00 2001 From: bmj0053 Date: Thu, 18 Jul 2024 14:01:55 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=EC=99=84=EB=A3=8C=ED=95=9C=20?= =?UTF-8?q?=EB=AF=B8=EC=85=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyMissionCompleted/MyMissionCompleted.tsx | 39 +++++++++++-------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx index 50526be1..79afc5ce 100644 --- a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx +++ b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx @@ -1,3 +1,4 @@ +import { Link } from 'react-router-dom'; import * as S from './MyMissionCompleted.styled'; const mocks = [ @@ -68,24 +69,30 @@ export default function MyMissionCompleted() { 완료한 미션 - {mocks.map((mock) => ( - - - - {mock.mission.language} - + {mocks.map((data) => ( + + + + + {data.mission.language} + - -
- {mock.mission.title} - 2024.07.17 ~ 2024.07.24 -
+ +
+ {data.mission.title} + 2024.07.17 ~ 2024.07.24 +
- - 페어 PR 이동 - 내 PR 이동 - - + + e.stopPropagation()}> + 페어 PR 이동 + + e.stopPropagation()}> + 내 PR 이동 + {' '} + + + ))} From 07fc17fb48ea0e334628a8dad2a0f739a81e5634 Mon Sep 17 00:00:00 2001 From: bmj0053 Date: Thu, 18 Jul 2024 17:52:06 +0900 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20Link=20=EC=A4=91=EC=B2=A9=20?= =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyMissionCompleted/MyMissionCompleted.tsx | 50 ++++++++++--------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx index 79afc5ce..378cb283 100644 --- a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx +++ b/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx @@ -1,4 +1,4 @@ -import { Link } from 'react-router-dom'; +import { Link, useNavigate } from 'react-router-dom'; import * as S from './MyMissionCompleted.styled'; const mocks = [ @@ -65,34 +65,38 @@ const mocks = [ ]; export default function MyMissionCompleted() { + const navigate = useNavigate(); + + const handleMissionClick = (id: number) => { + navigate(`/missions/${id}`); + }; + return ( 완료한 미션 - {mocks.map((data) => ( - - - - - {data.mission.language} - + {mocks.map(({ id, mission, pairPrLink, myPrLink }) => ( + handleMissionClick(id)}> + + + {mission.language} + - -
- {data.mission.title} - 2024.07.17 ~ 2024.07.24 -
+ +
+ {mission.title} + 2024.07.17 ~ 2024.07.24 +
- - e.stopPropagation()}> - 페어 PR 이동 - - e.stopPropagation()}> - 내 PR 이동 - {' '} - - - + + e.stopPropagation()}> + 페어 PR 이동 + + e.stopPropagation()}> + 내 PR 이동 + + + ))} From 751a21f1f51cd7119b6d5df81230eefa8bd02a23 Mon Sep 17 00:00:00 2001 From: bmj0053 Date: Fri, 19 Jul 2024 10:33:32 +0900 Subject: [PATCH 5/6] =?UTF-8?q?rename:=20myMission=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/MyMissionPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/MyMissionPage.tsx b/frontend/src/pages/MyMissionPage.tsx index 49b525e5..bea07661 100644 --- a/frontend/src/pages/MyMissionPage.tsx +++ b/frontend/src/pages/MyMissionPage.tsx @@ -1,5 +1,5 @@ -import MyMissionInProgress from '@/components/MyMission/MyMissionInProgress/MyMissionInProgress'; -import MyMissionCompleted from '@/components/MyMission/MyMissionCompleted/MyMissionCompleted'; +import MyMissionInProgress from '@/components/myMission/myMissionInProgress/MyMissionInProgress'; +import MyMissionCompleted from '@/components/myMission/myMissionCompleted/MyMissionCompleted'; import * as S from './MyMissionPage.styled'; export default function MyMissionPage() { From 28e23e201da2b42035fca51676df576d359cf9a6 Mon Sep 17 00:00:00 2001 From: bmj0053 Date: Fri, 19 Jul 2024 14:37:19 +0900 Subject: [PATCH 6/6] =?UTF-8?q?rename:=20=ED=8F=B4=EB=8D=94=EB=AA=85=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../myMissionCompleted}/MyMissionCompleted.styled.ts | 0 .../myMissionCompleted}/MyMissionCompleted.tsx | 0 .../myMissionInProgress}/MyMissionInProgress.styled.ts | 0 .../myMissionInProgress}/MyMissionInProgress.tsx | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename frontend/src/components/{MyMission/MyMissionCompleted => myMission/myMissionCompleted}/MyMissionCompleted.styled.ts (100%) rename frontend/src/components/{MyMission/MyMissionCompleted => myMission/myMissionCompleted}/MyMissionCompleted.tsx (100%) rename frontend/src/components/{MyMission/MyMissionInProgress => myMission/myMissionInProgress}/MyMissionInProgress.styled.ts (100%) rename frontend/src/components/{MyMission/MyMissionInProgress => myMission/myMissionInProgress}/MyMissionInProgress.tsx (100%) diff --git a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.styled.ts b/frontend/src/components/myMission/myMissionCompleted/MyMissionCompleted.styled.ts similarity index 100% rename from frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.styled.ts rename to frontend/src/components/myMission/myMissionCompleted/MyMissionCompleted.styled.ts diff --git a/frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx b/frontend/src/components/myMission/myMissionCompleted/MyMissionCompleted.tsx similarity index 100% rename from frontend/src/components/MyMission/MyMissionCompleted/MyMissionCompleted.tsx rename to frontend/src/components/myMission/myMissionCompleted/MyMissionCompleted.tsx diff --git a/frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.styled.ts b/frontend/src/components/myMission/myMissionInProgress/MyMissionInProgress.styled.ts similarity index 100% rename from frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.styled.ts rename to frontend/src/components/myMission/myMissionInProgress/MyMissionInProgress.styled.ts diff --git a/frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.tsx b/frontend/src/components/myMission/myMissionInProgress/MyMissionInProgress.tsx similarity index 100% rename from frontend/src/components/MyMission/MyMissionInProgress/MyMissionInProgress.tsx rename to frontend/src/components/myMission/myMissionInProgress/MyMissionInProgress.tsx