From 983ee0e9713f6ae771d4de5db69de740f812fa52 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 20:34:26 +0900 Subject: [PATCH 01/19] Add defaultProfile --- .../common/src/assets/svg/DefaultProfile.tsx | 21 +++++++++++++++++++ packages/common/src/assets/svg/index.ts | 1 + 2 files changed, 22 insertions(+) create mode 100644 packages/common/src/assets/svg/DefaultProfile.tsx diff --git a/packages/common/src/assets/svg/DefaultProfile.tsx b/packages/common/src/assets/svg/DefaultProfile.tsx new file mode 100644 index 00000000..0928dba1 --- /dev/null +++ b/packages/common/src/assets/svg/DefaultProfile.tsx @@ -0,0 +1,21 @@ +const DefaultProfile = () => ( + + + + + +); + +export default DefaultProfile; diff --git a/packages/common/src/assets/svg/index.ts b/packages/common/src/assets/svg/index.ts index ecd340ea..4ea5fc65 100644 --- a/packages/common/src/assets/svg/index.ts +++ b/packages/common/src/assets/svg/index.ts @@ -4,3 +4,4 @@ export { default as QuestionIcon } from './QuestionIcon'; export { default as ShopIcon } from './ShopIcon'; export { default as RankingIcon } from './RankingIcon'; export { default as MadeIcon } from './MadeIcon'; +export { default as DefaultProfile } from './DefaultProfile'; From 4d7a019ac4671016e8b05f118cf5a3c7c57c5bbb Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 20:39:25 +0900 Subject: [PATCH 02/19] Add rankingCard --- .../src/components/RankingCard/index.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 packages/common/src/components/RankingCard/index.tsx diff --git a/packages/common/src/components/RankingCard/index.tsx b/packages/common/src/components/RankingCard/index.tsx new file mode 100644 index 00000000..faa5339b --- /dev/null +++ b/packages/common/src/components/RankingCard/index.tsx @@ -0,0 +1,18 @@ +'use client'; + +import * as S from './style'; + +const RankingCard = () => { + return ( + + {} + {} + + {} + M + + + ); +}; + +export default RankingCard; From 8679b7f7d65c75f63ad520d2014688ed53d40109 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 20:39:31 +0900 Subject: [PATCH 03/19] Add style --- .../src/components/RankingCard/style.ts | 44 +++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 packages/common/src/components/RankingCard/style.ts diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts new file mode 100644 index 00000000..7ee7ef95 --- /dev/null +++ b/packages/common/src/components/RankingCard/style.ts @@ -0,0 +1,44 @@ +import styled from '@emotion/styled'; + +export const CardWrapper = styled.div` + width: 224px; + height: 304px; + border-radius: 20px; + background: ${({ theme }) => theme.color.white}; +`; + +export const ProfileWrapper = styled.div` + width: 90px; + height: 90px; + border-radius: 50%; + + overflow: hidden; + position: relative; + img { + object-fit: cover; + } +`; + +export const UserName = styled.span` + ${({ theme }) => theme.typo.h5}; + color: ${({ theme }) => theme.color.black}; + font-weight: 700; +`; + +export const FlexWrapper = styled.div` + display: flex; + align-items: center; +`; + +export const Point = styled.span` + ${({ theme }) => theme.typo.button}; + color: ${({ theme }) => theme.color.black}; + font-weight: 500; + margin-right: 0.25rem; +`; + +export const PointUnit = styled.span` + ${({ theme }) => theme.typo.body2}; + color: ${({ theme }) => theme.color.black}; + font-weight: 500; +`; From 652cea6225f7eb14722e1ba6081e5451a8233d0b Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 20:39:38 +0900 Subject: [PATCH 04/19] Add story --- .../components/RankingCard/index.stories.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 packages/common/src/components/RankingCard/index.stories.tsx diff --git a/packages/common/src/components/RankingCard/index.stories.tsx b/packages/common/src/components/RankingCard/index.stories.tsx new file mode 100644 index 00000000..4fadfc34 --- /dev/null +++ b/packages/common/src/components/RankingCard/index.stories.tsx @@ -0,0 +1,20 @@ +'use client'; + +import RankingCard from '.'; + +import type { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'common/RankingCard', + component: RankingCard, +} as Meta; + +type Story = StoryObj; + +export const Primary: Story = { + parameters: { + backgrounds: { + default: 'dark', + }, + }, +}; From cd7a2d5a13b7e1d7b0f0465a8d508d74d9b9fabf Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 20:52:07 +0900 Subject: [PATCH 05/19] Update rankingCard --- .../components/RankingCard/index.stories.tsx | 14 +++++++++- .../src/components/RankingCard/index.tsx | 28 ++++++++++++++++--- .../src/components/RankingCard/style.ts | 5 ++++ 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/packages/common/src/components/RankingCard/index.stories.tsx b/packages/common/src/components/RankingCard/index.stories.tsx index 4fadfc34..13ce22d8 100644 --- a/packages/common/src/components/RankingCard/index.stories.tsx +++ b/packages/common/src/components/RankingCard/index.stories.tsx @@ -11,7 +11,19 @@ export default { type Story = StoryObj; -export const Primary: Story = { +export const ST1: Story = { + args: { + rank: 1, + id: 'userId', + cumulatePoint: 1000, + user: { + id: 'userId', + email: 'moondgod@gmail.com', + name: '이정우', + profileImage: + 'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png', + }, + }, parameters: { backgrounds: { default: 'dark', diff --git a/packages/common/src/components/RankingCard/index.tsx b/packages/common/src/components/RankingCard/index.tsx index faa5339b..4c8ec786 100644 --- a/packages/common/src/components/RankingCard/index.tsx +++ b/packages/common/src/components/RankingCard/index.tsx @@ -2,13 +2,33 @@ import * as S from './style'; -const RankingCard = () => { +import Image from 'next/image'; + +import { DefaultProfile } from '../../assets'; + +import { RankingPropsType } from 'types'; + +interface RankingCardType extends RankingPropsType { + rank: number; +} + +const RankingCard: React.FC = ({ + rank, + cumulatePoint, + user: { profileImage, name }, +}) => { return ( - {} - {} + + {/* {profileImage ? ( */} + profile + {/* ) : ( */} + {/* */} + {/* )} */} + + {name} - {} + {cumulatePoint} M diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts index 7ee7ef95..7c3ec9fc 100644 --- a/packages/common/src/components/RankingCard/style.ts +++ b/packages/common/src/components/RankingCard/style.ts @@ -5,6 +5,10 @@ export const CardWrapper = styled.div` height: 304px; border-radius: 20px; background: ${({ theme }) => theme.color.white}; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; `; export const ProfileWrapper = styled.div` @@ -23,6 +27,7 @@ export const UserName = styled.span` ${({ theme }) => theme.typo.h5}; color: ${({ theme }) => theme.color.black}; font-weight: 700; + margin: 12px 0 83px; `; export const FlexWrapper = styled.div` From a6993506437b26e94578388a84270ef826da4529 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 21:08:01 +0900 Subject: [PATCH 06/19] Add medal --- .../components/RankingCard/index.stories.tsx | 53 +++++++++++++++++-- .../src/components/RankingCard/index.tsx | 11 ++-- .../src/components/RankingCard/style.ts | 19 +++++++ 3 files changed, 74 insertions(+), 9 deletions(-) diff --git a/packages/common/src/components/RankingCard/index.stories.tsx b/packages/common/src/components/RankingCard/index.stories.tsx index 13ce22d8..d709d7de 100644 --- a/packages/common/src/components/RankingCard/index.stories.tsx +++ b/packages/common/src/components/RankingCard/index.stories.tsx @@ -7,11 +7,16 @@ import type { Meta, StoryObj } from '@storybook/react'; export default { title: 'common/RankingCard', component: RankingCard, + parameters: { + backgrounds: { + default: 'dark', + }, + }, } as Meta; type Story = StoryObj; -export const ST1: Story = { +export const First: Story = { args: { rank: 1, id: 'userId', @@ -24,9 +29,49 @@ export const ST1: Story = { 'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png', }, }, - parameters: { - backgrounds: { - default: 'dark', +}; + +export const Second: Story = { + args: { + rank: 2, + id: 'userId', + cumulatePoint: 999, + user: { + id: 'userId', + email: 'moondgod@gmail.com', + name: '전지환님', + profileImage: + 'https://image.rocketpunch.com/user/352358/352358_1606388335.jpg?s=200x200&t=cover', + }, + }, +}; + +export const Third: Story = { + args: { + rank: 3, + id: 'userId', + cumulatePoint: 700, + user: { + id: 'userId', + email: 'moondgod@gmail.com', + name: '형록이형', + profileImage: + 'https://publy.imgix.net/user-uploaded/463804/2023.04/d07558f49fda2c53d9c02a038337c88e84fff56ad0d04eed8f37c774c0eca49c.jpeg?w=400&h=400&auto=format&fm=jpeg', + }, + }, +}; + +export const Fourth: Story = { + args: { + rank: 4, + id: 'userId', + cumulatePoint: 600, + user: { + id: 'userId', + email: 'moondgod@gmail.com', + name: '이정우교수', + profileImage: + 'https://file.newswire.co.kr/data/datafile2/thumb_480/2021/08/1889381261_20210805181428_7137680622.jpg', }, }, }; diff --git a/packages/common/src/components/RankingCard/index.tsx b/packages/common/src/components/RankingCard/index.tsx index 4c8ec786..c233d015 100644 --- a/packages/common/src/components/RankingCard/index.tsx +++ b/packages/common/src/components/RankingCard/index.tsx @@ -19,12 +19,13 @@ const RankingCard: React.FC = ({ }) => { return ( + {rank <= 3 && {rank}} - {/* {profileImage ? ( */} - profile - {/* ) : ( */} - {/* */} - {/* )} */} + {profileImage ? ( + profile + ) : ( + + )} {name} diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts index 7c3ec9fc..7bf57b8a 100644 --- a/packages/common/src/components/RankingCard/style.ts +++ b/packages/common/src/components/RankingCard/style.ts @@ -9,6 +9,7 @@ export const CardWrapper = styled.div` align-items: center; justify-content: center; flex-direction: column; + position: relative; `; export const ProfileWrapper = styled.div` @@ -47,3 +48,21 @@ export const PointUnit = styled.span` color: ${({ theme }) => theme.color.black}; font-weight: 500; `; + +export const Medal = styled.div<{ rank: number }>` + ${({ theme }) => theme.typo.body2} + color: ${({ theme }) => theme.color.black}; + font-weight: 500; + + width: 40px; + height: 40px; + border-radius: 50%; + position: absolute; + top: -12px; + left: -12px; + display: flex; + align-items: center; + justify-content: center; + background: ${({ rank, theme }) => + rank === 1 ? '#FFD79B' : rank === 2 ? theme.color.gray['040'] : '#ce865d'}; +`; From 03179a0e0c064307f8d0fce32d13014b82793aa7 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 21:08:44 +0900 Subject: [PATCH 07/19] Update image exception --- .../src/components/RankingCard/index.stories.tsx | 14 ++++++++++++++ packages/types/src/ranking.ts | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/common/src/components/RankingCard/index.stories.tsx b/packages/common/src/components/RankingCard/index.stories.tsx index d709d7de..716ba8a2 100644 --- a/packages/common/src/components/RankingCard/index.stories.tsx +++ b/packages/common/src/components/RankingCard/index.stories.tsx @@ -75,3 +75,17 @@ export const Fourth: Story = { }, }, }; + +export const NoIMG: Story = { + args: { + rank: 4, + id: 'userId', + cumulatePoint: 600, + user: { + id: 'userId', + email: 'moondgod@gmail.com', + name: '이정우교수', + profileImage: null, + }, + }, +}; diff --git a/packages/types/src/ranking.ts b/packages/types/src/ranking.ts index 4d07dad7..e9e174ce 100644 --- a/packages/types/src/ranking.ts +++ b/packages/types/src/ranking.ts @@ -5,6 +5,6 @@ export interface RankingPropsType { id: string; email: string; name: string; - profileImage: string; + profileImage: string | null; }; } From b21e64793c31a75b25f4433b1a9c5b64c03a5613 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 21:11:01 +0900 Subject: [PATCH 08/19] Update rankingItem image exception --- .../common/src/components/RankingCard/index.tsx | 5 ++--- .../common/src/components/RankingItem/index.tsx | 17 +++++++++++------ 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/common/src/components/RankingCard/index.tsx b/packages/common/src/components/RankingCard/index.tsx index c233d015..e41689eb 100644 --- a/packages/common/src/components/RankingCard/index.tsx +++ b/packages/common/src/components/RankingCard/index.tsx @@ -1,13 +1,12 @@ 'use client'; import * as S from './style'; - -import Image from 'next/image'; - import { DefaultProfile } from '../../assets'; import { RankingPropsType } from 'types'; +import Image from 'next/image'; + interface RankingCardType extends RankingPropsType { rank: number; } diff --git a/packages/common/src/components/RankingItem/index.tsx b/packages/common/src/components/RankingItem/index.tsx index 5d03d539..af930305 100644 --- a/packages/common/src/components/RankingItem/index.tsx +++ b/packages/common/src/components/RankingItem/index.tsx @@ -2,6 +2,7 @@ import * as S from './style'; import { slicePoint } from '../../utils'; +import { DefaultProfile } from '../../assets'; import { RankingPropsType } from 'types'; @@ -17,12 +18,16 @@ const RankingItem: React.FC = ({ {ranking} - + {profileImage ? ( + + ) : ( + + )} {name} From bdc1244cc00f5d6d4fc369ef8ac1dc3c2aab7f05 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 21:15:35 +0900 Subject: [PATCH 09/19] Update rankingItem image exception style --- .../src/components/RankingItem/index.stories.tsx | 14 ++++++++++++++ .../common/src/components/RankingItem/index.tsx | 2 +- .../common/src/components/RankingItem/style.ts | 11 ++++++++++- 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/common/src/components/RankingItem/index.stories.tsx b/packages/common/src/components/RankingItem/index.stories.tsx index 1f130fec..d425277a 100644 --- a/packages/common/src/components/RankingItem/index.stories.tsx +++ b/packages/common/src/components/RankingItem/index.stories.tsx @@ -70,3 +70,17 @@ export const Hund: Story = { }, }, }; + +export const NoIMG: Story = { + args: { + ranking: 100, + id: '100등', + cumulatePoint: 0, + user: { + id: '100등', + email: 'sample@gmail.com', + name: '100등', + profileImage: null, + }, + }, +}; diff --git a/packages/common/src/components/RankingItem/index.tsx b/packages/common/src/components/RankingItem/index.tsx index af930305..781708c6 100644 --- a/packages/common/src/components/RankingItem/index.tsx +++ b/packages/common/src/components/RankingItem/index.tsx @@ -16,7 +16,7 @@ const RankingItem: React.FC = ({ user: { name, profileImage }, }) => ( - + {ranking} {profileImage ? ( ` display: flex; align-items: center; + ${({ profileImage }) => + !profileImage && + ` + svg { + width: 40px; + height:40px; + margin: 0 1rem 0 2.25rem; + } + `} `; export const Ranking = styled.span` From 784af203fcb7777ec5bbe2cc806742448fb6121c Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 21:15:55 +0900 Subject: [PATCH 10/19] Update px -> rem --- .../src/components/RankingCard/style.ts | 20 +++++++++---------- .../src/components/RankingItem/style.ts | 4 ++-- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts index 7bf57b8a..54337d14 100644 --- a/packages/common/src/components/RankingCard/style.ts +++ b/packages/common/src/components/RankingCard/style.ts @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; export const CardWrapper = styled.div` - width: 224px; - height: 304px; - border-radius: 20px; + width: 14rem; + height: 19rem; + border-radius: 1.25rem; background: ${({ theme }) => theme.color.white}; display: flex; align-items: center; @@ -13,8 +13,8 @@ export const CardWrapper = styled.div` `; export const ProfileWrapper = styled.div` - width: 90px; - height: 90px; + width: 5.625rem; + height: 5.625rem; border-radius: 50%; overflow: hidden; @@ -28,7 +28,7 @@ export const UserName = styled.span` ${({ theme }) => theme.typo.h5}; color: ${({ theme }) => theme.color.black}; font-weight: 700; - margin: 12px 0 83px; + margin: 0.75rem 0 5.1875rem; `; export const FlexWrapper = styled.div` @@ -54,12 +54,12 @@ export const Medal = styled.div<{ rank: number }>` color: ${({ theme }) => theme.color.black}; font-weight: 500; - width: 40px; - height: 40px; + width: 2.5rem; + height: 2.5rem; border-radius: 50%; position: absolute; - top: -12px; - left: -12px; + top: -0.75rem; + left: -0.75rem; display: flex; align-items: center; justify-content: center; diff --git a/packages/common/src/components/RankingItem/style.ts b/packages/common/src/components/RankingItem/style.ts index 84cc8c15..245ac010 100644 --- a/packages/common/src/components/RankingItem/style.ts +++ b/packages/common/src/components/RankingItem/style.ts @@ -25,8 +25,8 @@ export const FlexWrapper = styled.div<{ profileImage?: string | null }>` !profileImage && ` svg { - width: 40px; - height:40px; + width: 2.5rem; + height:2.5rem; margin: 0 1rem 0 2.25rem; } `} From 1d43b452a8ad0ab094b182eff2a3f6aa7ad6975f Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Sat, 2 Sep 2023 21:21:46 +0900 Subject: [PATCH 11/19] Update item color --- packages/common/src/components/RankingItem/index.stories.tsx | 5 +++++ packages/common/src/components/RankingItem/style.ts | 1 + 2 files changed, 6 insertions(+) diff --git a/packages/common/src/components/RankingItem/index.stories.tsx b/packages/common/src/components/RankingItem/index.stories.tsx index d425277a..3c2ee68d 100644 --- a/packages/common/src/components/RankingItem/index.stories.tsx +++ b/packages/common/src/components/RankingItem/index.stories.tsx @@ -7,6 +7,11 @@ import type { Meta, StoryObj } from '@storybook/react'; export default { title: 'common/RankingItem', component: RankingItem, + parameters: { + backgrounds: { + default: 'dark', + }, + }, } as Meta; type Story = StoryObj; diff --git a/packages/common/src/components/RankingItem/style.ts b/packages/common/src/components/RankingItem/style.ts index 245ac010..38f240bb 100644 --- a/packages/common/src/components/RankingItem/style.ts +++ b/packages/common/src/components/RankingItem/style.ts @@ -12,6 +12,7 @@ export const ItemWrapper = styled.div` align-items: center; transition: ease-in-out 0.2s; cursor: pointer; + background-color: ${({ theme }) => theme.color.white}; &:hover { background: #ffd79b; From 4485e6cc2f6efa065a29a46699b0282a4bf96a8a Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 5 Sep 2023 23:09:51 +0900 Subject: [PATCH 12/19] Update medal color --- .../common/src/components/RankingCard/index.tsx | 2 +- .../common/src/components/RankingCard/style.ts | 14 +++++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/common/src/components/RankingCard/index.tsx b/packages/common/src/components/RankingCard/index.tsx index e41689eb..239cfb07 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 = ({ }) => { return ( - {rank <= 3 && {rank}} + {rank <= 3 && {rank}} {profileImage ? ( profile diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts index 54337d14..162955b5 100644 --- a/packages/common/src/components/RankingCard/style.ts +++ b/packages/common/src/components/RankingCard/style.ts @@ -10,6 +10,16 @@ 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` @@ -49,7 +59,7 @@ export const PointUnit = styled.span` font-weight: 500; `; -export const Medal = styled.div<{ rank: number }>` +export const Medal = styled.div` ${({ theme }) => theme.typo.body2} color: ${({ theme }) => theme.color.black}; font-weight: 500; @@ -63,6 +73,4 @@ export const Medal = styled.div<{ rank: number }>` display: flex; align-items: center; justify-content: center; - background: ${({ rank, theme }) => - rank === 1 ? '#FFD79B' : rank === 2 ? theme.color.gray['040'] : '#ce865d'}; `; From 1c81801fdd9198e13f4a1f9c0d6bad089e452e8a Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 5 Sep 2023 23:11:29 +0900 Subject: [PATCH 13/19] Add gauid --- packages/common/src/components/RankingCard/style.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/common/src/components/RankingCard/style.ts b/packages/common/src/components/RankingCard/style.ts index 162955b5..f01886dc 100644 --- a/packages/common/src/components/RankingCard/style.ts +++ b/packages/common/src/components/RankingCard/style.ts @@ -11,7 +11,8 @@ export const CardWrapper = styled.div` flex-direction: column; position: relative; - .medal:nth-child(1n) { + // 후에 리스트 래퍼에 이 코드를 작성합니다. + /* .medal:nth-child(1n) { background-color: #ffd79b; } .medal:nth-child(2n) { @@ -19,7 +20,7 @@ export const CardWrapper = styled.div` } .medal:nth-child(3n) { background-color: #ce865d; - } + } */ `; export const ProfileWrapper = styled.div` From 3e20ac65f89566fbf2b167be6f22c93d6cf1f0f8 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 5 Sep 2023 23:14:16 +0900 Subject: [PATCH 14/19] Update defaultProfile --- .../common/src/assets/svg/DefaultProfile.svg | 17 +++++++++++++++++ .../common/src/components/RankingCard/index.tsx | 14 ++++++++------ 2 files changed, 25 insertions(+), 6 deletions(-) create mode 100644 packages/common/src/assets/svg/DefaultProfile.svg diff --git a/packages/common/src/assets/svg/DefaultProfile.svg b/packages/common/src/assets/svg/DefaultProfile.svg new file mode 100644 index 00000000..37dc9765 --- /dev/null +++ b/packages/common/src/assets/svg/DefaultProfile.svg @@ -0,0 +1,17 @@ + + + + + \ No newline at end of file diff --git a/packages/common/src/components/RankingCard/index.tsx b/packages/common/src/components/RankingCard/index.tsx index 239cfb07..4975bae3 100644 --- a/packages/common/src/components/RankingCard/index.tsx +++ b/packages/common/src/components/RankingCard/index.tsx @@ -1,10 +1,11 @@ 'use client'; import * as S from './style'; -import { DefaultProfile } from '../../assets'; import { RankingPropsType } from 'types'; +import { DefaultProfile } from '../../assets/svg/DefaultProfile.svg'; + import Image from 'next/image'; interface RankingCardType extends RankingPropsType { @@ -20,11 +21,12 @@ const RankingCard: React.FC = ({ {rank <= 3 && {rank}} - {profileImage ? ( - profile - ) : ( - - )} + profile {name} From 9f08d3922eae6db687255d6a03078ff0fca824be Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 5 Sep 2023 23:16:25 +0900 Subject: [PATCH 15/19] Update image.d.ts --- packages/common/src/image.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/common/src/image.d.ts b/packages/common/src/image.d.ts index 03f7e4ab..ccb76282 100644 --- a/packages/common/src/image.d.ts +++ b/packages/common/src/image.d.ts @@ -2,3 +2,4 @@ declare module '*.jpg'; declare module '*.png'; declare module '*.jpeg'; declare module '*.gif'; +declare module '*.svg'; From 2592f2248f1f289fcd4790f341d3e35082ac4160 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 5 Sep 2023 23:16:39 +0900 Subject: [PATCH 16/19] Update tsconfig --- packages/common/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/tsconfig.json b/packages/common/tsconfig.json index 6754fd45..32a82c6c 100644 --- a/packages/common/tsconfig.json +++ b/packages/common/tsconfig.json @@ -1,6 +1,6 @@ { "extends": "tsconfig/react-components.json", - "include": ["**/*.ts", "**/*.tsx"], + "include": ["**/*.ts", "**/*.tsx", "src", "src/custom.d.ts"], "exclude": ["node_modules"], "compilerOptions": { "paths": { From 2f33325b45d2fcd69278c9fe455701b6662c3c00 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 5 Sep 2023 23:32:32 +0900 Subject: [PATCH 17/19] Update svg --- .../src/components/RankingCard/index.tsx | 9 ++------- .../src/components/RankingItem/index.tsx | 19 ++++++++----------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/common/src/components/RankingCard/index.tsx b/packages/common/src/components/RankingCard/index.tsx index 4975bae3..3a951318 100644 --- a/packages/common/src/components/RankingCard/index.tsx +++ b/packages/common/src/components/RankingCard/index.tsx @@ -4,7 +4,7 @@ import * as S from './style'; import { RankingPropsType } from 'types'; -import { DefaultProfile } from '../../assets/svg/DefaultProfile.svg'; +import DefaultProfile from '../../assets/svg/DefaultProfile.svg'; import Image from 'next/image'; @@ -21,12 +21,7 @@ const RankingCard: React.FC = ({ {rank <= 3 && {rank}} - profile + profile {name} diff --git a/packages/common/src/components/RankingItem/index.tsx b/packages/common/src/components/RankingItem/index.tsx index 781708c6..58822e06 100644 --- a/packages/common/src/components/RankingItem/index.tsx +++ b/packages/common/src/components/RankingItem/index.tsx @@ -2,7 +2,8 @@ import * as S from './style'; import { slicePoint } from '../../utils'; -import { DefaultProfile } from '../../assets'; + +import DefaultProfile from '../../assets/svg/DefaultProfile.svg'; import { RankingPropsType } from 'types'; @@ -18,16 +19,12 @@ const RankingItem: React.FC = ({ {ranking} - {profileImage ? ( - - ) : ( - - )} + {name} From 99b62ab50da891a8344bf084d87418bf002ad676 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 5 Sep 2023 23:33:11 +0900 Subject: [PATCH 18/19] Delete defaultProfile --- .../common/src/assets/svg/DefaultProfile.tsx | 21 ------------------- packages/common/src/assets/svg/index.ts | 1 - 2 files changed, 22 deletions(-) delete mode 100644 packages/common/src/assets/svg/DefaultProfile.tsx diff --git a/packages/common/src/assets/svg/DefaultProfile.tsx b/packages/common/src/assets/svg/DefaultProfile.tsx deleted file mode 100644 index 0928dba1..00000000 --- a/packages/common/src/assets/svg/DefaultProfile.tsx +++ /dev/null @@ -1,21 +0,0 @@ -const DefaultProfile = () => ( - - - - - -); - -export default DefaultProfile; diff --git a/packages/common/src/assets/svg/index.ts b/packages/common/src/assets/svg/index.ts index 4ea5fc65..ecd340ea 100644 --- a/packages/common/src/assets/svg/index.ts +++ b/packages/common/src/assets/svg/index.ts @@ -4,4 +4,3 @@ export { default as QuestionIcon } from './QuestionIcon'; export { default as ShopIcon } from './ShopIcon'; export { default as RankingIcon } from './RankingIcon'; export { default as MadeIcon } from './MadeIcon'; -export { default as DefaultProfile } from './DefaultProfile'; From 44226053eab22d36357a8808b374ea3739a86bc7 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 5 Sep 2023 23:36:07 +0900 Subject: [PATCH 19/19] Delete image style --- packages/common/src/components/RankingItem/index.tsx | 2 +- packages/common/src/components/RankingItem/style.ts | 11 +---------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/common/src/components/RankingItem/index.tsx b/packages/common/src/components/RankingItem/index.tsx index 58822e06..76d752c2 100644 --- a/packages/common/src/components/RankingItem/index.tsx +++ b/packages/common/src/components/RankingItem/index.tsx @@ -17,7 +17,7 @@ const RankingItem: React.FC = ({ user: { name, profileImage }, }) => ( - + {ranking} ` +export const FlexWrapper = styled.div` display: flex; align-items: center; - ${({ profileImage }) => - !profileImage && - ` - svg { - width: 2.5rem; - height:2.5rem; - margin: 0 1rem 0 2.25rem; - } - `} `; export const Ranking = styled.span`