fix: 디자인 조정

g-magazine-hackaton · Dec 5, 2023 · bbeb7e7 · bbeb7e7
1 parent 5ae48c3
commit bbeb7e7
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 34 deletions.
diff --git 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 = () => {
         <GreetingBox>
           <div className="nickname">
             {myProfile.consumerNickname || '규라니'}
+            <img
+              src={IMAGE_URL + myProfile.consumerRankImageUrl}
+              alt={myProfile.consumerNickname}
+              style={{
+                width: '24px',
+                marginLeft: '4px',
+              }}
+            />
           </div>
           {myProfile.profileContent || ''}
         </GreetingBox>

diff --git 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 = () => {
       <UserInfoArea>
         <NameBox>
           <span className="club-badge">U클럽</span>
-          <div className="nickname">{yourProfile.consumerNickname}</div>
+          <strong>{formatNumber(yourProfile.consumerScore)}P</strong>
           <SubscribeWrap>
-            <FaUserPlus
-              size={18}
-              color="#fff
-"
-            />
+            <SubscribeIcon>구독자</SubscribeIcon>
+            <FaUserPlus size={16} color="#fff" />
             <strong>
-              {formatNumber(yourProfile.followerConsumerIds?.length)} 명
+              {formatNumber(yourProfile.followerConsumerIds?.length)}
             </strong>
-            <SubscribeIcon>구독중</SubscribeIcon>
+            명
           </SubscribeWrap>
         </NameBox>
-        <GreetingBox>{yourProfile.profileContent}</GreetingBox>
+        <GreetingBox>
+          <div className="nickname">
+            {yourProfile.consumerNickname}
+            <img
+              src={IMAGE_URL + yourProfile.consumerRankImageUrl}
+              alt={yourProfile.consumerNickname}
+              style={{
+                width: '24px',
+                marginLeft: '4px',
+              }}
+            />
+          </div>
+          {yourProfile.profileContent}
+        </GreetingBox>
         <ContentBox>
           <li>
             <button
@@ -219,7 +233,7 @@ const YourPageProfile = () => {
                 color: isFollow ? '#fff' : '#222',
               }}
             >
-              {isFollow ? '구독중' : '구독 취소하기'}
+              {isFollow ? '구독중' : '구독하기'}
             </button>
           </li>
         </ContentBox>

diff --git 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
@@ -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<ISubscribeItemProps> = ({ user }) => (
     >
       <div style={{ display: 'flex', alignItems: 'center' }}>
         <UserName>{user.consumerNickname}</UserName>
-        <Badge src={IMAGE_URL + user.profileUrl} alt={user.consumerNickname} />
-        <PowerWrap>파워컨슈머</PowerWrap>
+        <Badge
+          src={IMAGE_URL + user.consumerRankImageUrl}
+          alt={user.consumerNickname}
+        />
+        {user.consumerRank === 5 && <PowerWrap>파워컨슈머</PowerWrap>}
       </div>
 
       <Description>{user.profileContent}</Description>

diff --git 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,29 +34,27 @@ 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;
 `;
 
 const GridItem = styled.div`
   width: 100%;
   height: 132px;
-  border: 1px solid #ddd;
   display: flex;
   justify-content: center;
   align-items: center;