From 46f93daf3df03def3efb21659a90bb8ef6e917ef Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 9 Sep 2023 12:24:33 +0900 Subject: [PATCH 1/9] Add main page --- .../src/PageContainer/MainPage/index.stories.tsx | 14 ++++++++++++++ .../common/src/PageContainer/MainPage/index.tsx | 14 ++++++++++++++ .../common/src/PageContainer/MainPage/style.ts | 8 ++++++++ packages/common/src/PageContainer/index.ts | 1 + packages/common/src/components/index.ts | 1 + 5 files changed, 38 insertions(+) create mode 100644 packages/common/src/PageContainer/MainPage/index.stories.tsx create mode 100644 packages/common/src/PageContainer/MainPage/index.tsx create mode 100644 packages/common/src/PageContainer/MainPage/style.ts diff --git a/packages/common/src/PageContainer/MainPage/index.stories.tsx b/packages/common/src/PageContainer/MainPage/index.stories.tsx new file mode 100644 index 00000000..2b9369c4 --- /dev/null +++ b/packages/common/src/PageContainer/MainPage/index.stories.tsx @@ -0,0 +1,14 @@ +'use client'; + +import MainPage from '.'; + +import type { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'common/Page/MainPage', + component: MainPage, +} as Meta; + +type Story = StoryObj; + +export const Primary: Story = {}; diff --git a/packages/common/src/PageContainer/MainPage/index.tsx b/packages/common/src/PageContainer/MainPage/index.tsx new file mode 100644 index 00000000..41431d31 --- /dev/null +++ b/packages/common/src/PageContainer/MainPage/index.tsx @@ -0,0 +1,14 @@ +'use client'; + +import * as S from './style'; +import { Banner } from 'common/components'; + +const MainPage = () => { + return ( + + + + ); +}; + +export default MainPage; diff --git a/packages/common/src/PageContainer/MainPage/style.ts b/packages/common/src/PageContainer/MainPage/style.ts new file mode 100644 index 00000000..42255b49 --- /dev/null +++ b/packages/common/src/PageContainer/MainPage/style.ts @@ -0,0 +1,8 @@ +import styled from '@emotion/styled'; + +export const MainWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + padding-top: 60px; +`; diff --git a/packages/common/src/PageContainer/index.ts b/packages/common/src/PageContainer/index.ts index 7d13f561..b70fd4f8 100644 --- a/packages/common/src/PageContainer/index.ts +++ b/packages/common/src/PageContainer/index.ts @@ -1 +1,2 @@ export { default as LoginPage } from './LoginPage'; +export { default as MainPage } from './MainPage'; diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts index e8597585..a6c0e87e 100644 --- a/packages/common/src/components/index.ts +++ b/packages/common/src/components/index.ts @@ -6,4 +6,5 @@ export { default as RankingList } from './RankingList'; export { default as Banner1 } from './Banner/Banner1'; export { default as Banner2 } from './Banner/Banner2'; export { default as Banner3 } from './Banner/Banner3'; +export { default as Banner } from './Banner'; export { default as Header } from './Header'; From bb8f38b0b7f181e06bddb57b4863df8471ea69f5 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 9 Sep 2023 12:41:36 +0900 Subject: [PATCH 2/9] Add mainContents --- .../components/MainContents/index.stories.tsx | 13 ++++++ .../src/components/MainContents/index.tsx | 15 +++++++ .../src/components/MainContents/style.ts | 40 +++++++++++++++++++ 3 files changed, 68 insertions(+) create mode 100644 packages/common/src/components/MainContents/index.stories.tsx create mode 100644 packages/common/src/components/MainContents/index.tsx create mode 100644 packages/common/src/components/MainContents/style.ts diff --git a/packages/common/src/components/MainContents/index.stories.tsx b/packages/common/src/components/MainContents/index.stories.tsx new file mode 100644 index 00000000..3c98e5e6 --- /dev/null +++ b/packages/common/src/components/MainContents/index.stories.tsx @@ -0,0 +1,13 @@ +'use client'; + +import MainContents from '.'; +import type { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'common/MainContents', + component: MainContents, +} as Meta; + +type Story = StoryObj; + +export const Primary: Story = {}; diff --git a/packages/common/src/components/MainContents/index.tsx b/packages/common/src/components/MainContents/index.tsx new file mode 100644 index 00000000..2e18e5bc --- /dev/null +++ b/packages/common/src/components/MainContents/index.tsx @@ -0,0 +1,15 @@ +'use client'; + +import * as S from './style'; + +const Banner = () => ( + <> + 문제 + + + + + +); + +export default Banner; diff --git a/packages/common/src/components/MainContents/style.ts b/packages/common/src/components/MainContents/style.ts new file mode 100644 index 00000000..ad6ac647 --- /dev/null +++ b/packages/common/src/components/MainContents/style.ts @@ -0,0 +1,40 @@ +import styled from '@emotion/styled'; + +export const MissionText = styled.h4` + ${({ theme }) => theme.typo.h4}; + color: ${({ theme }) => theme.color.black}; + font-weight: 600; + margin: 65px 0 20px; + width: 1280px; +`; + +export const ContentWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 50px; +`; + +export const Contents = styled.div` + width: 1279px; + height: 380px; + border-radius: 20px; + background-color: rgba(217, 217, 217, 0.48); + display: flex; + padding: 38px 40px; + gap: 48px; + overflow: scroll; + &::-webkit-scrollbar { + display: none; + } + + // 후에 리스트 래퍼에 이 코드를 작성합니다. + .medal:nth-child(1n) { + background-color: #ffd79b; + } + .medal:nth-child(2n) { + background-color: ${({ theme }) => theme.color.gray['040']}; + } + .medal:nth-child(3n) { + background-color: #ce865d; + } +`; From af3cdef50a9bd9bff450235e245ed8a9e2c1c03f Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 9 Sep 2023 12:41:57 +0900 Subject: [PATCH 3/9] Update mainPage --- packages/common/src/PageContainer/MainPage/index.tsx | 6 +++++- packages/common/src/PageContainer/MainPage/style.ts | 10 +++++++++- packages/common/src/components/RankingCard/style.ts | 11 ----------- packages/common/src/components/index.ts | 1 + projects/admin/src/app/page.tsx | 4 +++- 5 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/common/src/PageContainer/MainPage/index.tsx b/packages/common/src/PageContainer/MainPage/index.tsx index 41431d31..a76e4c74 100644 --- a/packages/common/src/PageContainer/MainPage/index.tsx +++ b/packages/common/src/PageContainer/MainPage/index.tsx @@ -1,12 +1,16 @@ 'use client'; import * as S from './style'; -import { Banner } from 'common/components'; +import { Banner, MainContents } from 'common/components'; const MainPage = () => { return ( + + * 문제는 12:30 ~ 19:30분까지 풀수 있습니다. + + ); }; diff --git a/packages/common/src/PageContainer/MainPage/style.ts b/packages/common/src/PageContainer/MainPage/style.ts index 42255b49..a95ebde2 100644 --- a/packages/common/src/PageContainer/MainPage/style.ts +++ b/packages/common/src/PageContainer/MainPage/style.ts @@ -4,5 +4,13 @@ export const MainWrapper = styled.div` display: flex; flex-direction: column; align-items: center; - padding-top: 60px; + padding: 60px 0 172px; +`; + +export const MissionAlertText = styled.p` + ${({ theme }) => theme.typo.body2}; + color: ${({ theme }) => theme.color.gray['070']}; + font-weight: 400; + margin-top: 16px; + width: 1280px; `; diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts index f01886dc..9d495be6 100644 --- a/packages/common/src/components/RankingCard/style.ts +++ b/packages/common/src/components/RankingCard/style.ts @@ -10,17 +10,6 @@ export const CardWrapper = styled.div` justify-content: center; flex-direction: column; position: relative; - - // 후에 리스트 래퍼에 이 코드를 작성합니다. - /* .medal:nth-child(1n) { - background-color: #ffd79b; - } - .medal:nth-child(2n) { - background-color: ${({ theme }) => theme.color.gray['040']}; - } - .medal:nth-child(3n) { - background-color: #ce865d; - } */ `; export const ProfileWrapper = styled.div` diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts index a6c0e87e..675489f1 100644 --- a/packages/common/src/components/index.ts +++ b/packages/common/src/components/index.ts @@ -8,3 +8,4 @@ export { default as Banner2 } from './Banner/Banner2'; export { default as Banner3 } from './Banner/Banner3'; export { default as Banner } from './Banner'; export { default as Header } from './Header'; +export { default as MainContents } from './MainContents'; diff --git a/projects/admin/src/app/page.tsx b/projects/admin/src/app/page.tsx index 6ff53738..8f0bd138 100644 --- a/projects/admin/src/app/page.tsx +++ b/projects/admin/src/app/page.tsx @@ -1,3 +1,5 @@ +import { MainPage } from 'common'; + export default function Home() { - return <>; + return ; } From ddf907795b96c1d345887a65a302caf93cf9e81e Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 9 Sep 2023 12:45:27 +0900 Subject: [PATCH 4/9] Add mission type --- packages/types/src/index.ts | 1 + packages/types/src/mission.ts | 15 +++++++++++++++ 2 files changed, 16 insertions(+) create mode 100644 packages/types/src/mission.ts diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index dddfdd9c..21ca40c1 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -1,3 +1,4 @@ export * from './ranking'; export * from './shopItem'; export * from './orderdItem'; +export * from './mission'; diff --git a/packages/types/src/mission.ts b/packages/types/src/mission.ts new file mode 100644 index 00000000..76f45d0f --- /dev/null +++ b/packages/types/src/mission.ts @@ -0,0 +1,15 @@ +export interface Mission { + id: string; + title: string; + point: number; + missionStatus: 'CLOSED' | 'OPENED' | 'AVAILABLE_OPEN'; + // CLOSED : Mission을 풀 수 없는 상태 + // OPENED : Mission을 풀 수 있는 상태 + // AVAILABLE_OPEN : Mission을 내일 풀 수 있습니다. + user: { + id: string; + email: string; + name: string; + profileImage: string; + }; +} From 2a93dcdee38894a10a34a3f1bc9ffebb48033850 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 9 Sep 2023 13:00:45 +0900 Subject: [PATCH 5/9] Add dummy --- .../src/components/MainContents/index.tsx | 213 +++++++++++++++++- packages/common/src/components/index.ts | 1 + projects/admin/next.config.js | 4 +- 3 files changed, 215 insertions(+), 3 deletions(-) diff --git a/packages/common/src/components/MainContents/index.tsx b/packages/common/src/components/MainContents/index.tsx index 2e18e5bc..3eff20dc 100644 --- a/packages/common/src/components/MainContents/index.tsx +++ b/packages/common/src/components/MainContents/index.tsx @@ -2,12 +2,221 @@ import * as S from './style'; +import { TaskCard, RankingCard } from 'common/components'; + +const missionList = [ + { + id: 'new id', + title: '북학파의 배경', + point: 1000, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '미소쌤', + profileImage: null, + }, + }, + { + id: 'new id', + title: '가방에 동전 넣기', + point: 10, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '이정우', + profileImage: null, + }, + }, + { + id: 'new id', + title: '돈을 굴리는법', + point: 100000, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '정찬교', + profileImage: null, + }, + }, + { + id: 'new id', + title: '아나콘다 길들이기', + point: 800, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '박준호', + profileImage: null, + }, + }, + { + id: 'new id', + title: '머리감기는 아침에', + point: 80000, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '하제우', + profileImage: null, + }, + }, + { + id: 'new id', + title: '호주가 위험해요', + point: 902000, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '김경수', + profileImage: null, + }, + }, + { + id: 'new id', + title: '김치찌개 끓이기', + point: 500000, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '채종인', + profileImage: null, + }, + }, + { + id: 'new id', + title: '게로에서 살아남기', + point: 8000, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '김태오', + profileImage: null, + }, + }, + { + id: 'new id', + title: '부상 당하는법', + point: 1, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '안강호', + profileImage: null, + }, + }, + { + id: 'new id', + title: '외지주 정독하기', + point: 30, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '이동욱', + profileImage: null, + }, + }, + { + id: 'new id', + title: '마이린 미안해', + point: 92991, + missionStatus: 'OPENED', + user: { + id: 'new id', + email: 'moondgod@gmail.com', + name: '박주홍', + profileImage: null, + }, + }, +]; + +const rankingList = [ + { + id: 'sampleId', + cumulatePoint: 1000, + user: { + id: 'sampleId', + email: 'sample@gmail.com', + name: 'user', + profileImage: null, + }, + }, + { + id: 'sampleId', + cumulatePoint: 800, + user: { + id: 'sampleId', + email: 'sample@gmail.com', + name: '이태랑', + profileImage: null, + }, + }, + { + id: 'sampleId', + cumulatePoint: 700, + user: { + id: 'sampleId', + email: 'sample@gmail.com', + name: '하제우와이정우와정찬교', + profileImage: null, + }, + }, + { + id: '정찬교', + cumulatePoint: 50, + user: { + id: '정찬교', + email: 'sample@gmail.com', + name: '정찬교', + profileImage: null, + }, + }, + { + id: '100등', + cumulatePoint: 0, + user: { + id: '100등', + email: 'sample@gmail.com', + name: '100등', + profileImage: null, + }, + }, +]; + const Banner = () => ( <> 문제 - - + + {missionList.map((mission) => ( + + ))} + + + {rankingList.map((ranking, index) => ( + + ))} + ); diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts index 675489f1..ab18a14e 100644 --- a/packages/common/src/components/index.ts +++ b/packages/common/src/components/index.ts @@ -9,3 +9,4 @@ export { default as Banner3 } from './Banner/Banner3'; export { default as Banner } from './Banner'; export { default as Header } from './Header'; export { default as MainContents } from './MainContents'; +export { default as RankingCard } from './RankingCard'; diff --git a/projects/admin/next.config.js b/projects/admin/next.config.js index 7f171dc1..4dcff375 100644 --- a/projects/admin/next.config.js +++ b/projects/admin/next.config.js @@ -1,4 +1,6 @@ /** @type {import('next').NextConfig} */ -const nextConfig = { transpilePackages: ['common'] }; +const nextConfig = { + transpilePackages: ['common'], +}; module.exports = nextConfig; From 4276b133185c6ddf253e482c911b85b819518e93 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 9 Sep 2023 13:09:43 +0900 Subject: [PATCH 6/9] Update medal style --- packages/common/src/components/MainContents/style.ts | 10 +++++----- packages/common/src/components/RankingCard/index.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/common/src/components/MainContents/style.ts b/packages/common/src/components/MainContents/style.ts index ad6ac647..5178ec84 100644 --- a/packages/common/src/components/MainContents/style.ts +++ b/packages/common/src/components/MainContents/style.ts @@ -15,26 +15,26 @@ export const ContentWrapper = styled.div` `; export const Contents = styled.div` - width: 1279px; + width: 1280px; height: 380px; border-radius: 20px; background-color: rgba(217, 217, 217, 0.48); display: flex; padding: 38px 40px; gap: 48px; - overflow: scroll; + overflow-x: scroll; &::-webkit-scrollbar { display: none; } // 후에 리스트 래퍼에 이 코드를 작성합니다. - .medal:nth-child(1n) { + .medalWrapper:nth-child(1n) .medal { background-color: #ffd79b; } - .medal:nth-child(2n) { + .medalWrapper:nth-child(2n) .medal { background-color: ${({ theme }) => theme.color.gray['040']}; } - .medal:nth-child(3n) { + .medalWrapper:nth-child(3n) .medal { background-color: #ce865d; } `; diff --git a/packages/common/src/components/RankingCard/index.tsx b/packages/common/src/components/RankingCard/index.tsx index a26009a8..ea389147 100644 --- a/packages/common/src/components/RankingCard/index.tsx +++ b/packages/common/src/components/RankingCard/index.tsx @@ -18,7 +18,7 @@ const RankingCard: React.FC = ({ user: { profileImage, name }, }) => { return ( - + {rank <= 3 && {rank}} profile From bf45eebfc6acbeb27f583444a9a981217e8f78d2 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 9 Sep 2023 13:23:28 +0900 Subject: [PATCH 7/9] Update card style --- .../src/components/MainContents/index.tsx | 48 +++++++++++++++++-- .../src/components/MainContents/style.ts | 2 +- .../src/components/RankingCard/style.ts | 2 + .../common/src/components/TaskCard/style.ts | 2 + 4 files changed, 49 insertions(+), 5 deletions(-) diff --git a/packages/common/src/components/MainContents/index.tsx b/packages/common/src/components/MainContents/index.tsx index 3eff20dc..598fb4a2 100644 --- a/packages/common/src/components/MainContents/index.tsx +++ b/packages/common/src/components/MainContents/index.tsx @@ -166,7 +166,47 @@ const rankingList = [ user: { id: 'sampleId', email: 'sample@gmail.com', - name: '하제우와이정우와정찬교', + name: '하제우', + profileImage: null, + }, + }, + { + id: 'sampleId', + cumulatePoint: 600, + user: { + id: 'sampleId', + email: 'sample@gmail.com', + name: '이태랑', + profileImage: null, + }, + }, + { + id: 'sampleId', + cumulatePoint: 500, + user: { + id: 'sampleId', + email: 'sample@gmail.com', + name: '하제우', + profileImage: null, + }, + }, + { + id: 'sampleId', + cumulatePoint: 400, + user: { + id: 'sampleId', + email: 'sample@gmail.com', + name: '이태랑', + profileImage: null, + }, + }, + { + id: 'sampleId', + cumulatePoint: 300, + user: { + id: 'sampleId', + email: 'sample@gmail.com', + name: '하제우', profileImage: null, }, }, @@ -197,12 +237,12 @@ const Banner = () => ( 문제 - {missionList.map((mission) => ( + {missionList.map((mission, index) => ( ))} @@ -213,7 +253,7 @@ const Banner = () => ( cumulatePoint={ranking.cumulatePoint} rank={index + 1} id={ranking.id} - key={ranking.id} + key={ranking.id + index} /> ))} diff --git a/packages/common/src/components/MainContents/style.ts b/packages/common/src/components/MainContents/style.ts index 5178ec84..85f47238 100644 --- a/packages/common/src/components/MainContents/style.ts +++ b/packages/common/src/components/MainContents/style.ts @@ -17,6 +17,7 @@ export const ContentWrapper = styled.div` export const Contents = styled.div` width: 1280px; height: 380px; + position: relative; border-radius: 20px; background-color: rgba(217, 217, 217, 0.48); display: flex; @@ -27,7 +28,6 @@ export const Contents = styled.div` display: none; } - // 후에 리스트 래퍼에 이 코드를 작성합니다. .medalWrapper:nth-child(1n) .medal { background-color: #ffd79b; } diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts index 9d495be6..e8c98ab5 100644 --- a/packages/common/src/components/RankingCard/style.ts +++ b/packages/common/src/components/RankingCard/style.ts @@ -34,6 +34,8 @@ export const UserName = styled.span` export const FlexWrapper = styled.div` display: flex; align-items: center; + width: 14rem; + justify-content: center; `; export const Point = styled.span` diff --git a/packages/common/src/components/TaskCard/style.ts b/packages/common/src/components/TaskCard/style.ts index 48e06bdf..d2b8b10b 100644 --- a/packages/common/src/components/TaskCard/style.ts +++ b/packages/common/src/components/TaskCard/style.ts @@ -28,10 +28,12 @@ export const TaskTitle = styled.span` `; export const MiledgeWrapper = styled.div` + width: 14rem; display: flex; gap: 0.25rem; margin-top: 8rem; align-items: center; + justify-content: center; `; export const Mildege = styled.span` From e8477428d2df751fceaec88d52bf99295a1e156c Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 9 Sep 2023 13:24:24 +0900 Subject: [PATCH 8/9] Add cursor pointer --- packages/common/src/components/RankingCard/style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts index e8c98ab5..ce629afd 100644 --- a/packages/common/src/components/RankingCard/style.ts +++ b/packages/common/src/components/RankingCard/style.ts @@ -10,6 +10,7 @@ export const CardWrapper = styled.div` justify-content: center; flex-direction: column; position: relative; + cursor: pointer; `; export const ProfileWrapper = styled.div` From d677ba569bfe3af5bd95964d6ee0f263c8e6655c Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sun, 10 Sep 2023 16:54:17 +0900 Subject: [PATCH 9/9] Update px -> rem --- .../src/PageContainer/MainPage/style.ts | 6 ++-- .../src/components/MainContents/style.ts | 16 ++++----- projects/client/src/app/page.module.css | 36 +++++++++---------- 3 files changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/common/src/PageContainer/MainPage/style.ts b/packages/common/src/PageContainer/MainPage/style.ts index a95ebde2..43bff4a9 100644 --- a/packages/common/src/PageContainer/MainPage/style.ts +++ b/packages/common/src/PageContainer/MainPage/style.ts @@ -4,13 +4,13 @@ export const MainWrapper = styled.div` display: flex; flex-direction: column; align-items: center; - padding: 60px 0 172px; + padding: 3.75rem 0 10.75rem; `; export const MissionAlertText = styled.p` ${({ theme }) => theme.typo.body2}; color: ${({ theme }) => theme.color.gray['070']}; font-weight: 400; - margin-top: 16px; - width: 1280px; + margin-top: 1rem; + width: 80rem; `; diff --git a/packages/common/src/components/MainContents/style.ts b/packages/common/src/components/MainContents/style.ts index 85f47238..2ca41c5c 100644 --- a/packages/common/src/components/MainContents/style.ts +++ b/packages/common/src/components/MainContents/style.ts @@ -4,25 +4,25 @@ export const MissionText = styled.h4` ${({ theme }) => theme.typo.h4}; color: ${({ theme }) => theme.color.black}; font-weight: 600; - margin: 65px 0 20px; - width: 1280px; + margin: 4.0625rem 0 1.25rem; + width: 80rem; `; export const ContentWrapper = styled.div` display: flex; flex-direction: column; - gap: 50px; + gap: 3.125rem; `; export const Contents = styled.div` - width: 1280px; - height: 380px; + width: 80rem; + height: 23.75rem; position: relative; - border-radius: 20px; + border-radius: 1.25rem; background-color: rgba(217, 217, 217, 0.48); display: flex; - padding: 38px 40px; - gap: 48px; + padding: 2.375rem 2.5rem; + gap: 3rem; overflow-x: scroll; &::-webkit-scrollbar { display: none; diff --git a/projects/client/src/app/page.module.css b/projects/client/src/app/page.module.css index 9411a5e6..90f75d67 100644 --- a/projects/client/src/app/page.module.css +++ b/projects/client/src/app/page.module.css @@ -30,7 +30,7 @@ margin: 0; padding: 1rem; background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border: 0.0625rem solid rgba(var(--callout-border-rgb), 0.3); border-radius: var(--border-radius); } @@ -50,7 +50,7 @@ padding: 1rem 1.2rem; border-radius: var(--border-radius); background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); + border: 0.0625rem solid rgba(var(--card-border-rgb), 0); transition: background 200ms, border 200ms; } @@ -83,15 +83,15 @@ .center::before { background: var(--secondary-glow); border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; + width: 30rem; + height: 22.5rem; + margin-left: -25rem; } .center::after { background: var(--primary-glow); - width: 240px; - height: 180px; + width: 15rem; + height: 11.25rem; z-index: -1; } @@ -100,7 +100,7 @@ content: ''; left: 50%; position: absolute; - filter: blur(45px); + filter: blur(2.8125rem); transform: translateZ(0); } @@ -111,11 +111,11 @@ @media (hover: hover) and (pointer: fine) { .card:hover { background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); + border: 0.0625rem solid rgba(var(--card-border-rgb), 0.15); } .card:hover span { - transform: translateX(4px); + transform: translateX(0.25rem); } } @@ -126,15 +126,15 @@ } /* Mobile */ -@media (max-width: 700px) { +@media (max-width: 43.75rem) { .content { padding: 4rem; } .grid { grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; + margin-bottom: 7.5rem; + max-width: 20rem; text-align: center; } @@ -152,7 +152,7 @@ .center::before { transform: none; - height: 300px; + height: 18.75rem; } .description { @@ -177,14 +177,14 @@ padding: 2rem 1rem 1.4rem; border-radius: 0; border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); + border-bottom: 0.0625rem solid rgba(var(--callout-border-rgb), 0.25); background: linear-gradient( to bottom, rgba(var(--background-start-rgb), 1), rgba(var(--callout-rgb), 0.5) ); background-clip: padding-box; - backdrop-filter: blur(24px); + backdrop-filter: blur(1.5rem); } .description div { @@ -192,7 +192,7 @@ pointer-events: none; inset: auto 0 0; padding: 2rem; - height: 200px; + height: 12.5rem; background: linear-gradient( to bottom, transparent 0%, @@ -203,7 +203,7 @@ } /* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { +@media (min-width: 43.8125rem) and (max-width: 70rem) { .grid { grid-template-columns: repeat(2, 50%); }