From bd3e7e939637f786f7cb41fe7451d9bbcbeeeb42 Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Sat, 16 Jul 2022 14:41:27 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[=20=20style=20=20]=20GUI=20=EA=B8=B0?= =?UTF-8?q?=EB=B0=98=EC=9C=BC=EB=A1=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/community/CommunityList.tsx | 9 +++++++-- components/community/ContentsCard.tsx | 15 ++++++++++++--- public/assets/icons/commentIcon.svg | 3 --- 3 files changed, 19 insertions(+), 8 deletions(-) delete mode 100644 public/assets/icons/commentIcon.svg diff --git a/components/community/CommunityList.tsx b/components/community/CommunityList.tsx index 62b66f9..066dbe6 100644 --- a/components/community/CommunityList.tsx +++ b/components/community/CommunityList.tsx @@ -7,7 +7,7 @@ export default function CommunityList() { return ( - + @@ -57,7 +57,7 @@ const StSearchBar = styled.div` width: 64.2rem; height: 4.5rem; - border-bottom: 0.1rem solid ${({ theme }) => theme.colors.black}; + border-bottom: 0.2rem solid ${({ theme }) => theme.colors.gray008}; margin-bottom: 7.9rem; input { @@ -65,6 +65,11 @@ const StSearchBar = styled.div` height: 2.5rem; font-size: 2.5rem; + + &::placeholder { + font-family: Pretandard; + color: ${({ theme }) => theme.colors.gray006}; + } } `; const StWriteBtn = styled.a` diff --git a/components/community/ContentsCard.tsx b/components/community/ContentsCard.tsx index 3ac1502..8fb59f0 100644 --- a/components/community/ContentsCard.tsx +++ b/components/community/ContentsCard.tsx @@ -61,6 +61,8 @@ const StContentsCardWrapper = styled.div` font-weight: 500; font-size: 2.3rem; line-height: 3.3rem; + + ${({ theme }) => theme.fonts.b9_24_medium_150} } p { @@ -70,6 +72,11 @@ const StContentsCardWrapper = styled.div` font-weight: 400; font-size: 1.6rem; line-height: 2.9rem; + + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } `; const StContentInfo = styled.section` @@ -82,8 +89,8 @@ const StCategory = styled.div` justify-content: center; align-items: center; - width: 10.2rem; - height: 3.2rem; + width: 7.6rem; + height: 2.6rem; margin-bottom: 2.6rem; @@ -95,12 +102,14 @@ const StCategory = styled.div` line-height: 2.6rem; color: ${({ theme }) => theme.colors.white}; + ${({ theme }) => theme.fonts.b5_14_medium_140} `; const StCategoryReview = styled(StCategory)` background-color: ${({ theme }) => theme.colors.mainGreen}; `; const StCategoryQuestion = styled(StCategory)` - background-color: ${({ theme }) => theme.colors.black}; + color: ${({ theme }) => theme.colors.gray009}; + background-color: ${({ theme }) => theme.colors.subYellow}; `; const StCategoryInfo = styled(StCategory)` background-color: ${({ theme }) => theme.colors.mainDarkgreen}; diff --git a/public/assets/icons/commentIcon.svg b/public/assets/icons/commentIcon.svg deleted file mode 100644 index 45db5bd..0000000 --- a/public/assets/icons/commentIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From 9eb53318299b5813e40e076beaf6824603be20ba Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Sat, 16 Jul 2022 15:51:43 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[=20=20feat=20=20]=20=EC=BB=A4=EB=AE=A4?= =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20GUI=20?= =?UTF-8?q?=EB=8C=80=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/community/CommunityList.tsx | 12 +++++- components/community/ContentsCard.tsx | 5 ++- mocks/handlers/toy.ts | 52 ++++++++++++++++++++++++++ styles/emotion.d.ts | 3 ++ styles/theme.ts | 3 ++ 5 files changed, 72 insertions(+), 3 deletions(-) create mode 100644 mocks/handlers/toy.ts diff --git a/components/community/CommunityList.tsx b/components/community/CommunityList.tsx index 066dbe6..ce50cb0 100644 --- a/components/community/CommunityList.tsx +++ b/components/community/CommunityList.tsx @@ -15,7 +15,7 @@ export default function CommunityList() { theme.colors.gray006}; + ${({ theme }) => theme.fonts.b10_22_regular_150} + &::placeholder { font-family: Pretandard; color: ${({ theme }) => theme.colors.gray006}; + ${({ theme }) => theme.fonts.b10_22_regular_150} + } + + :focus::placeholder { + opacity: 0; } } `; diff --git a/components/community/ContentsCard.tsx b/components/community/ContentsCard.tsx index 8fb59f0..03dbc78 100644 --- a/components/community/ContentsCard.tsx +++ b/components/community/ContentsCard.tsx @@ -49,7 +49,7 @@ const StContentsCardWrapper = styled.div` margin-bottom: 4.8rem; padding-bottom: 4.5rem; - width: 120rem; + width: 97.6rem; height: auto; border-bottom: 0.1rem solid #d6d6d6; @@ -77,6 +77,9 @@ const StContentsCardWrapper = styled.div` -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; + + color: ${({ theme }) => theme.colors.gray009}; + ${({ theme }) => theme.fonts.t6_17_regular_140} } `; const StContentInfo = styled.section` diff --git a/mocks/handlers/toy.ts b/mocks/handlers/toy.ts new file mode 100644 index 0000000..97ab3d4 --- /dev/null +++ b/mocks/handlers/toy.ts @@ -0,0 +1,52 @@ +import { rest } from 'msw'; +import { toyMockData } from '../data/toyMockData'; +import { ToyData } from '../../types/toy'; + +// 장난감 리스트 조회 (메인뷰) +export const getHome = rest.get('/home', (req, res, ctx) => + res(ctx.json(toyMockData)), +); + +// 장난감 컬렉션 별 조회 +export const getToyCollection = rest.get('/collection', (req, res, ctx) => { + const theme = req.url.searchParams.get('theme'); + const sort = req.url.searchParams.get('sort'); + + // 낮은 가격 순 + function priceDesc(a: ToyData, b: ToyData) { + if (a.price == b.price) { + return 0; + } + return a.price > b.price ? 1 : -1; + } + // 높은 가격 순 + function priceAsc(a: ToyData, b: ToyData) { + if (a.price == b.price) { + return 0; + } + return a.price < b.price ? 1 : -1; + } + return sort === 'price-desc' + ? res(ctx.json(toyMockData.sort(priceDesc))) + : res(ctx.json(toyMockData.sort(priceAsc))); +}); + +// 장난감 검색 및 필터 리스트 조회 +// 필터 검증 로직은 영이 로직 짜고 생각해봐야할 것같아 +export const getToyList = rest.get('/toy/list', (req, res, ctx) => { + const search = req.url.searchParams.get('search'); + const type = req.url.searchParams.get('type'); + const month = req.url.searchParams.getAll('month'); + const price = req.url.searchParams.get('price'); + const playHow = req.url.searchParams.get('playHow'); + const category = req.url.searchParams.get('category'); + + const toyList = toyMockData.filter( + (toy) => + toy.title.includes(`${search}`) && + toy.type === Number(type) && + toy.price <= Number(price) && + toy.playHow === Number(playHow), + ); + return res(ctx.json(toyList)); +}); diff --git a/styles/emotion.d.ts b/styles/emotion.d.ts index cc738b6..9efddd5 100644 --- a/styles/emotion.d.ts +++ b/styles/emotion.d.ts @@ -31,6 +31,7 @@ declare module '@emotion/react' { t3_19_medium_130: SerializedStyles; t4_18_semibold_150: SerializedStyles; t4_18_regular_150: SerializedStyles; + t6_17_regular_140: SerializedStyles; b1_20_bold_140: SerializedStyles; b2_18_bold_140: SerializedStyles; b2_18_medium_130: SerializedStyles; @@ -45,6 +46,8 @@ declare module '@emotion/react' { b7_12_bold_120: SerializedStyles; b7_12_medium_140: SerializedStyles; b7_12_regular_120: SerializedStyles; + b9_24_medium_150: SerializedStyles; + b10_22_regular_150: SerializedStyles; }; } } diff --git a/styles/theme.ts b/styles/theme.ts index 148354a..2bb3ef3 100644 --- a/styles/theme.ts +++ b/styles/theme.ts @@ -48,6 +48,7 @@ const fonts = { t3_19_medium_130: FONT({ weight: 500, size: 1.8, height: 2.47, spacing: 0 }), t4_18_semibold_150: FONT({ weight: 600, size: 1.8, height: 2.7, spacing: 0 }), t4_18_regular_150: FONT({ weight: 400, size: 1.8, height: 2.7, spacing: 0 }), + t6_17_regular_140: FONT({ weight: 400, size: 1.7, height: 2.38, spacing: 0 }), b1_20_bold_140: FONT({ weight: 700, size: 2, height: 2.8, spacing: 0 }), b2_18_bold_140: FONT({ weight: 700, size: 1.8, height: 2.52, spacing: 0 }), b2_18_medium_130: FONT({ weight: 500, size: 1.8, height: 2.34, spacing: 0 }), @@ -77,6 +78,8 @@ const fonts = { b7_12_bold_120: FONT({ weight: 700, size: 1.2, height: 1.44, spacing: 0 }), b7_12_medium_140: FONT({ weight: 500, size: 1.2, height: 1.68, spacing: 0 }), b7_12_regular_120: FONT({ weight: 400, size: 1.2, height: 1.44, spacing: 0 }), + b9_24_medium_150: FONT({ weight: 500, size: 2.4, height: 3.6, spacing: 0 }), + b10_22_regular_150: FONT({ weight: 400, size: 2.2, height: 3.3, spacing: 0 }), }; const theme: Theme = { From 5f52f5b91e7142485c033fc66b6e2342a45c761e Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Sun, 17 Jul 2022 00:08:01 +0900 Subject: [PATCH 3/4] =?UTF-8?q?[=20=20feat=20=20]=20=ED=94=8C=EB=A1=9C?= =?UTF-8?q?=ED=8C=85=20=EB=B0=94=20=EC=B5=9C=EC=B4=88=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/common/Header.tsx | 4 + components/community/CommunityFloatingBtn.tsx | 38 ++++++++ components/community/CommunityList.tsx | 96 ++++++++++--------- components/community/ContentsCard.tsx | 23 +++-- components/community/index.ts | 1 + public/assets/icons/CommentIcon.svg | 3 - public/assets/icons/CommunitySearchIcon.svg | 4 +- public/assets/icons/index.ts | 4 +- public/assets/icons/replyIcon.svg | 9 ++ public/assets/icons/topBtnIcon.svg | 21 ++++ public/assets/icons/writeBtnIcon.svg | 26 +++++ styles/emotion.d.ts | 1 + styles/theme.ts | 1 + 13 files changed, 171 insertions(+), 60 deletions(-) create mode 100644 components/community/CommunityFloatingBtn.tsx delete mode 100644 public/assets/icons/CommentIcon.svg create mode 100644 public/assets/icons/replyIcon.svg create mode 100644 public/assets/icons/topBtnIcon.svg create mode 100644 public/assets/icons/writeBtnIcon.svg diff --git a/components/common/Header.tsx b/components/common/Header.tsx index a58a306..b225ea9 100644 --- a/components/common/Header.tsx +++ b/components/common/Header.tsx @@ -90,6 +90,10 @@ const StSearchBar = styled.div` background: ${({ theme }) => theme.colors.white_opacity_14}; border-radius: 0.8rem; + & > svg { + cursor: pointer; + } + input { height: 2.2rem; width: 22rem; diff --git a/components/community/CommunityFloatingBtn.tsx b/components/community/CommunityFloatingBtn.tsx new file mode 100644 index 0000000..444d880 --- /dev/null +++ b/components/community/CommunityFloatingBtn.tsx @@ -0,0 +1,38 @@ +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; +import Link from 'next/link'; +import { IcWriteBtn, IcTopBtn } from '../../public/assets/icons'; + +export default function CommunityFloatingBtn() { + const handleTopScroll = () => { + if (!window.scrollY) return; + + window.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }; + return ( + + + + + + + ); +} + +const StCommunityFloatingBtnWrapper = styled.section` + display: flex; + flex-direction: column; + row-gap: 2.4rem; + align-items: cetner; + position: sticky; + top: 43rem; + + margin-left: 3.4rem; + + & > svg { + cursor: pointer; + } +`; diff --git a/components/community/CommunityList.tsx b/components/community/CommunityList.tsx index ce50cb0..d31e9aa 100644 --- a/components/community/CommunityList.tsx +++ b/components/community/CommunityList.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { IcCommunitySearchIcon } from '../../public/assets/icons'; import ContentCard from './ContentsCard'; -import Link from 'next/link'; +import CommunityFloatingBtn from './CommunityFloatingBtn'; export default function CommunityList() { return ( @@ -10,35 +10,38 @@ export default function CommunityList() { - - 글쓰기 - - - - + + + + + + + + + ); } @@ -55,14 +58,16 @@ const StSearchBar = styled.div` display: flex; flex-direction: row; - width: 64.2rem; + width: 57.6rem; height: 4.5rem; border-bottom: 0.2rem solid ${({ theme }) => theme.colors.gray008}; margin-bottom: 7.9rem; input { + margin-left: 0.9rem; + width: 60rem; - height: 2.5rem; + height: 3.3rem; font-size: 2.5rem; @@ -79,21 +84,18 @@ const StSearchBar = styled.div` opacity: 0; } } -`; -const StWriteBtn = styled.a` - padding: 0.9rem 2.5rem; - margin-bottom: 3.3rem; - margin-left: 85%; + & > svg { + margin-right: 0.9rem; - font-style: normal; - font-weight: 400; - font-size: 2rem; - line-height: 2.8rem; - - background-color: #e1ffeb; - color: ${({ theme }) => theme.colors.mainDarkgreen}; - border: 0.2rem solid ${({ theme }) => theme.colors.mainDarkgreen}; - border-radius: 1rem; + cursor: pointer; + } +`; +const StMainArticle = styled.article` + display: flex; +`; - cursor: pointer; +const StFloatingBlock = styled.div` + width: 9rem; `; + +const StContentCardList = styled.div``; diff --git a/components/community/ContentsCard.tsx b/components/community/ContentsCard.tsx index 03dbc78..d85423a 100644 --- a/components/community/ContentsCard.tsx +++ b/components/community/ContentsCard.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { useState } from 'react'; -import { IcComment, IcHeart } from '../../public/assets/icons'; +import { IcReply, IcHeart } from '../../public/assets/icons'; interface ContentInfoProps { category: string; @@ -33,11 +33,11 @@ export default function ContentCard(props: ContentInfoProps) { {createdAt} - + {replyCount} - {img === undefined ? <> : }; + {img === undefined ? <> : } ); } @@ -55,7 +55,7 @@ const StContentsCardWrapper = styled.div` border-bottom: 0.1rem solid #d6d6d6; h1 { - margin-bottom: 1.1rem; + margin-bottom: 0.7rem; font-style: normal; font-weight: 500; @@ -95,7 +95,7 @@ const StCategory = styled.div` width: 7.6rem; height: 2.6rem; - margin-bottom: 2.6rem; + margin-bottom: 1.6rem; border-radius: 4.5rem; @@ -118,8 +118,11 @@ const StCategoryInfo = styled(StCategory)` background-color: ${({ theme }) => theme.colors.mainDarkgreen}; `; const StContentImg = styled.img` - width: 26rem; - height: 25.5rem; + width: 21.6rem; + height: 21.6rem; + + border: 0.1rem solid ${({ theme }) => theme.colors.gray005}; + border-radius: 0.5rem; `; const StWriteInfo = styled.div` margin-bottom: 1.2rem; @@ -131,6 +134,9 @@ const StWriteInfo = styled.div` font-weight: 500; font-size: 1.7rem; line-height: 2.5rem; + + color: ${({ theme }) => theme.colors.gray008}; + ${({ theme }) => theme.fonts.b4_15_semibold_146} } span:last-child { @@ -138,6 +144,9 @@ const StWriteInfo = styled.div` font-weight: 350; font-size: 1.7rem; line-height: 2.5rem; + + color: ${({ theme }) => theme.colors.gray008}; + ${({ theme }) => theme.fonts.b4_15_regular_146}; } `; const StReplyInfo = styled.div` diff --git a/components/community/index.ts b/components/community/index.ts index 164b282..d38f26c 100644 --- a/components/community/index.ts +++ b/components/community/index.ts @@ -1,3 +1,4 @@ export { default as ReplyContent } from './ReplyContent'; export { default as CommunityList } from './CommunityList'; export { default as Reply } from './Reply'; +export { default as CommunityFloatingBtn } from './CommunityFloatingBtn'; diff --git a/public/assets/icons/CommentIcon.svg b/public/assets/icons/CommentIcon.svg deleted file mode 100644 index 561d409..0000000 --- a/public/assets/icons/CommentIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/assets/icons/CommunitySearchIcon.svg b/public/assets/icons/CommunitySearchIcon.svg index af3a3fb..8928e63 100644 --- a/public/assets/icons/CommunitySearchIcon.svg +++ b/public/assets/icons/CommunitySearchIcon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/public/assets/icons/index.ts b/public/assets/icons/index.ts index ef482c9..2d60d8a 100644 --- a/public/assets/icons/index.ts +++ b/public/assets/icons/index.ts @@ -10,5 +10,7 @@ export { default as IcToyMark } from './toyMark.svg'; export { default as IcFillToyMark } from './fillToyMark.svg'; export { default as IcMenu } from './menuIcon.svg'; export { default as IcCommunitySearchIcon } from './communitySearchIcon.svg'; -export { default as IcComment } from './commentIcon.svg'; +export { default as IcReply } from './replyIcon.svg'; export { default as IcHeart } from './heartIcon.svg'; +export { default as IcWriteBtn } from './writeBtnIcon.svg'; +export { default as IcTopBtn } from './topBtnIcon.svg'; diff --git a/public/assets/icons/replyIcon.svg b/public/assets/icons/replyIcon.svg new file mode 100644 index 0000000..a1bad2e --- /dev/null +++ b/public/assets/icons/replyIcon.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/icons/topBtnIcon.svg b/public/assets/icons/topBtnIcon.svg new file mode 100644 index 0000000..c47647e --- /dev/null +++ b/public/assets/icons/topBtnIcon.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/icons/writeBtnIcon.svg b/public/assets/icons/writeBtnIcon.svg new file mode 100644 index 0000000..c3a2dfc --- /dev/null +++ b/public/assets/icons/writeBtnIcon.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/emotion.d.ts b/styles/emotion.d.ts index 9efddd5..66ba622 100644 --- a/styles/emotion.d.ts +++ b/styles/emotion.d.ts @@ -40,6 +40,7 @@ declare module '@emotion/react' { b3_16_semibold_140: SerializedStyles; b3_16_medium_140: SerializedStyles; b4_15_semibold_146: SerializedStyles; + b4_15_regular_146: SerializedStyles; b5_14_semibold_140: SerializedStyles; b5_14_medium_140: SerializedStyles; b6_13_medium_120: SerializedStyles; diff --git a/styles/theme.ts b/styles/theme.ts index 2bb3ef3..e859678 100644 --- a/styles/theme.ts +++ b/styles/theme.ts @@ -67,6 +67,7 @@ const fonts = { height: 2.19, spacing: 0, }), + b4_15_regular_146: FONT({ weight: 400, size: 1.5, height: 2.19, spacing: 0 }), b5_14_semibold_140: FONT({ weight: 600, size: 1.4, From d511a3a83fdcb0ac7b1ae75e41e55305b881397b Mon Sep 17 00:00:00 2001 From: Brokyeom Date: Sun, 17 Jul 2022 14:07:38 +0900 Subject: [PATCH 4/4] =?UTF-8?q?[=20=20feat=20=20]=20=EC=BB=A4=EB=AE=A4?= =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20GUI=EB=8C=80?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=81=EC=9A=A9=20=EC=99=84=EB=A3=8C=20/=20?= =?UTF-8?q?=ED=8F=B0=ED=8A=B8=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/community/CommunityFloatingBtn.tsx | 2 ++ components/community/CommunityList.tsx | 3 +++ components/community/ContentsCard.tsx | 5 +++++ public/assets/icons/heartIcon.svg | 14 ++++++++++++-- styles/emotion.d.ts | 1 + styles/theme.ts | 1 + 6 files changed, 24 insertions(+), 2 deletions(-) diff --git a/components/community/CommunityFloatingBtn.tsx b/components/community/CommunityFloatingBtn.tsx index 444d880..649379f 100644 --- a/components/community/CommunityFloatingBtn.tsx +++ b/components/community/CommunityFloatingBtn.tsx @@ -30,6 +30,8 @@ const StCommunityFloatingBtnWrapper = styled.section` position: sticky; top: 43rem; + height: 30rem; + margin-top: 8.8rem; margin-left: 3.4rem; & > svg { diff --git a/components/community/CommunityList.tsx b/components/community/CommunityList.tsx index d31e9aa..85dc3e8 100644 --- a/components/community/CommunityList.tsx +++ b/components/community/CommunityList.tsx @@ -1,9 +1,12 @@ import styled from '@emotion/styled'; +// import { useState } from 'react'; import { IcCommunitySearchIcon } from '../../public/assets/icons'; import ContentCard from './ContentsCard'; import CommunityFloatingBtn from './CommunityFloatingBtn'; export default function CommunityList() { + // const [category, setCategory] = useState('모든 글'); + return ( diff --git a/components/community/ContentsCard.tsx b/components/community/ContentsCard.tsx index d85423a..02455c2 100644 --- a/components/community/ContentsCard.tsx +++ b/components/community/ContentsCard.tsx @@ -33,6 +33,8 @@ export default function ContentCard(props: ContentInfoProps) { {createdAt} + {/* + 12 */} {replyCount} @@ -161,5 +163,8 @@ const StReplyInfo = styled.div` font-weight: 400; font-size: 1.76rem; line-height: 2.5rem; + + color: ${({ theme }) => theme.colors.gray008}; + ${({ theme }) => theme.fonts.b4_15_medium_140}; } `; diff --git a/public/assets/icons/heartIcon.svg b/public/assets/icons/heartIcon.svg index 72b00ae..713b208 100644 --- a/public/assets/icons/heartIcon.svg +++ b/public/assets/icons/heartIcon.svg @@ -1,3 +1,13 @@ - - + + + + + + + + + + + + diff --git a/styles/emotion.d.ts b/styles/emotion.d.ts index 66ba622..c32244c 100644 --- a/styles/emotion.d.ts +++ b/styles/emotion.d.ts @@ -41,6 +41,7 @@ declare module '@emotion/react' { b3_16_medium_140: SerializedStyles; b4_15_semibold_146: SerializedStyles; b4_15_regular_146: SerializedStyles; + b4_15_medium_140: SerializedStyles; b5_14_semibold_140: SerializedStyles; b5_14_medium_140: SerializedStyles; b6_13_medium_120: SerializedStyles; diff --git a/styles/theme.ts b/styles/theme.ts index e859678..aeda002 100644 --- a/styles/theme.ts +++ b/styles/theme.ts @@ -67,6 +67,7 @@ const fonts = { height: 2.19, spacing: 0, }), + b4_15_medium_140: FONT({ weight: 500, size: 1.5, height: 2.1, spacing: 0 }), b4_15_regular_146: FONT({ weight: 400, size: 1.5, height: 2.19, spacing: 0 }), b5_14_semibold_140: FONT({ weight: 600,