From bbeb7e70af6780acb2caafa5c1c8a47b414c8ab2 Mon Sep 17 00:00:00 2001 From: nmc2711 Date: Tue, 5 Dec 2023 18:42:23 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/my-page/profile.tsx | 15 ++++++- src/components/ui/your-page/profile.tsx | 60 +++++++++++++++---------- src/pages/rank.tsx | 8 +++- src/pages/subscribe.tsx | 17 +++++-- src/pages/your-page.tsx | 10 ++--- 5 files changed, 76 insertions(+), 34 deletions(-) diff --git a/src/components/ui/my-page/profile.tsx b/src/components/ui/my-page/profile.tsx index 72e8ba9..5f24462 100644 --- a/src/components/ui/my-page/profile.tsx +++ b/src/components/ui/my-page/profile.tsx @@ -10,6 +10,7 @@ import { MyProfileAtom } from '@/store/my-profile'; import { ROOT_PATH } from '@/temp/global-variables'; import { formatNumber } from '@/lib/utils'; import Image from '../image'; +import { IMAGE_URL } from '@/apis/urls'; const HeaderWrapper = styled.div` display: flex; @@ -72,11 +73,15 @@ const NameBox = styled.div` `; const GreetingBox = styled.div` + width: 100%; margin-top: 12px; font-size: 15px; word-break: keep-all; - + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; .nickname { + display: flex; font-size: 18px; font-weight: 700; } @@ -153,6 +158,14 @@ const MyPageProfile = () => {
{myProfile.consumerNickname || '규라니'} + {myProfile.consumerNickname}
{myProfile.profileContent || ''} diff --git a/src/components/ui/your-page/profile.tsx b/src/components/ui/your-page/profile.tsx index 3bc94bb..eb60053 100644 --- a/src/components/ui/your-page/profile.tsx +++ b/src/components/ui/your-page/profile.tsx @@ -10,13 +10,14 @@ import { formatNumber } from '@/lib/utils'; import { postFollow } from '@/apis/consumer'; import { MyProfileAtom } from '@/store/my-profile'; import Image from '../image'; +import { IMAGE_URL } from '@/apis/urls'; const HeaderWrapper = styled.div` display: flex; width: 100%; flex-direction: row; justify-content: space-between; - background-color: #007aff; + background-image: linear-gradient(170deg, #497cff 26%, #002041 79%); color: white; padding: 16px 18px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); @@ -47,6 +48,7 @@ const imageStyle = css` border-radius: 6px; width: 100%; height: 100%; + max-height: 132px; `; const UserInfoArea = styled.div` @@ -60,16 +62,13 @@ const NameBox = styled.div` .club-badge { line-height: 22px; background-color: rgb(8, 31, 63); + border: 1px solid #fff; border-radius: 8px; padding: 0 8px; font-size: 12px; font-weight: 600; - border: 1px solid #fff; - } - .nickname { - font-size: 18px; - font-weight: 700; } + .subscriber-count { margin-left: auto; display: flex; @@ -78,7 +77,6 @@ const NameBox = styled.div` font-size: 14px; font-weight: 600; > span { - background: #ff3399; line-height: 18px; padding: 0 8px; border-radius: 12px; @@ -88,14 +86,21 @@ const NameBox = styled.div` `; const GreetingBox = styled.div` + width: 100%; margin-top: 12px; font-size: 15px; word-break: keep-all; - min-height: 72px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + .nickname { + display: flex; + font-size: 18px; + font-weight: 700; + } `; - const ContentBox = styled.ul` - margin-top: 12px; + margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, auto)); gap: 8px; @@ -128,11 +133,10 @@ const SubscribeIcon = styled.span` padding: 2px 4px; border-radius: 4px; line-height: 16px; - font-size: 13px; + font-size: 14px; color: #fff; font-weight: 600; - margin-left: 4px; - background-color: #ff3399; + margin-right: 3px; `; const YourPageProfile = () => { @@ -196,20 +200,30 @@ const YourPageProfile = () => { U클럽 -
{yourProfile.consumerNickname}
+ {formatNumber(yourProfile.consumerScore)}P - + 구독자 + - {formatNumber(yourProfile.followerConsumerIds?.length)} 명 + {formatNumber(yourProfile.followerConsumerIds?.length)} - 구독중 + 명 - {yourProfile.profileContent} + +
+ {yourProfile.consumerNickname} + {yourProfile.consumerNickname} +
+ {yourProfile.profileContent} +
    • diff --git a/src/pages/rank.tsx b/src/pages/rank.tsx index a0ca74a..6ff41d6 100644 --- a/src/pages/rank.tsx +++ b/src/pages/rank.tsx @@ -87,6 +87,11 @@ const UserName = styled.span` const Description = styled.span` color: grey; + width: 90%; + word-break: keep-all; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; const Badge = styled.img` @@ -97,9 +102,10 @@ const Badge = styled.img` const ActionButton = styled.button` background-color: #007bff; + min-width: 72px; color: white; border: none; - padding: 0.5rem 1rem; + padding: 0.5rem 0.8rem; border-radius: 4px; margin-left: auto; cursor: pointer; diff --git a/src/pages/subscribe.tsx b/src/pages/subscribe.tsx index 1706382..5055f8e 100644 --- a/src/pages/subscribe.tsx +++ b/src/pages/subscribe.tsx @@ -94,6 +94,11 @@ const UserName = styled.span` const Description = styled.span` color: grey; + width: 90%; + word-break: keep-all; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; `; const Badge = styled.img` @@ -104,9 +109,10 @@ const Badge = styled.img` const ActionButton = styled.button` background-color: #007bff; + min-width: 72px; color: white; border: none; - padding: 0.5rem 1rem; + padding: 0.5rem 0.8rem; border-radius: 4px; margin-left: auto; cursor: pointer; @@ -119,6 +125,8 @@ interface IUserProfile { profileContent: string; consumerNickname: string; profileUrl: string; + consumerRankImageUrl: string; + consumerRank: number; } interface ISubscribeItemProps { @@ -135,8 +143,11 @@ const SubscribeItemComponent: React.FC = ({ user }) => ( >
    {user.consumerNickname} - - 파워컨슈머 + + {user.consumerRank === 5 && 파워컨슈머}
    {user.profileContent} diff --git a/src/pages/your-page.tsx b/src/pages/your-page.tsx index d85b7f2..0829f56 100644 --- a/src/pages/your-page.tsx +++ b/src/pages/your-page.tsx @@ -12,7 +12,7 @@ import Image from '@/components/ui/image'; const TabContainer = styled.div` display: flex; - padding: 9px 0; + padding: 2px 0; padding-left: 12px; margin-top: 12px; overflow: auto hidden; @@ -34,21 +34,20 @@ const TabStyle = styled.button<{ active: boolean }>` justify-content: center; height: 32px; padding: 0px 11px; - border: 1px solid rgb(0, 0, 0); + border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; - color: rgb(0, 0, 0); font-weight: 600; margin-right: 8px; background-color: ${(props) => (props.active ? '#222' : '#fff')}; - color: ${(props) => (props.active ? '#fff' : '#222')}; + color: ${(props) => (props.active ? '#fff' : '#757575')}; font-family: Gmarket Sans; `; const GridContainer = styled.div` display: grid; grid-template-columns: repeat(3, 1fr); - gap: 10px; + gap: 4px; padding: 10px; background-color: #fff; `; @@ -56,7 +55,6 @@ const GridContainer = styled.div` const GridItem = styled.div` width: 100%; height: 132px; - border: 1px solid #ddd; display: flex; justify-content: center; align-items: center;