feat: rank

g-magazine-hackaton · Dec 2, 2023 · 7ef51b4 · 7ef51b4
1 parent e314098
commit 7ef51b4
Show file tree

Hide file tree

Showing 6 changed files with 329 additions and 4 deletions.
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
@@ -74,7 +74,11 @@ const Navbar = () => {
   };
 
   // 상세 네비바 사용
-  if (['/profile', '/write'].find((path) => pathname.endsWith(path)))
+  if (
+    ['/profile', '/write', '/rank', '/seller'].find((path) =>
+      pathname.endsWith(path),
+    )
+  )
     return (
       <Header id="nav">
         <IoIosArrowBack className="prev-icon" onClick={handlePrev} />

diff --git a/src/components/ui/my-page/profile.tsx b/src/components/ui/my-page/profile.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import Button from '../button';
 import ScrapSheet from '@/components/ui/my-page/scrap-sheet';
+import { ROOT_PATH } from '@/temp/global-variables';
 
 const HeaderWrapper = styled.div`
   display: flex;
@@ -170,7 +171,9 @@ const MyPageProfile = () => {
             <button onClick={() => setOpen(true)}>스크랩</button>
           </li>
           <li>
-            <button>컨슈머 랭킹</button>
+            <button>
+              <Link to={`${ROOT_PATH}/rank`}>컨슈머 랭킹</Link>
+            </button>
           </li>
         </ContentBox>
       </UserInfoArea>

diff --git a/src/components/ui/your-page/profile.tsx b/src/components/ui/your-page/profile.tsx
@@ -1,5 +1,9 @@
 import styled from '@emotion/styled';
-import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { useSetAtom } from 'jotai';
+import { titleAtom } from '@/store/page-info';
+import { ROOT_PATH } from '@/temp/global-variables';
 
 const HeaderWrapper = styled.div`
   display: flex;
@@ -100,10 +104,16 @@ const ContentBox = styled.ul`
 
 const YourPageProfile = () => {
   const [isFollow, setIsFollow] = useState(true);
+  const setTitle = useSetAtom(titleAtom);
 
   const onClickFollowToggle = () => {
     setIsFollow(!isFollow);
   };
+
+  useEffect(() => {
+    setTitle('매거진');
+  }, [setTitle]);
+
   return (
     <HeaderWrapper>
       <ProfileImageBox>
@@ -138,7 +148,9 @@ const YourPageProfile = () => {
             </button>
           </li>
           <li>
-            <button>컨슈머 랭킹</button>
+            <button>
+              <Link to={`${ROOT_PATH}/rank`}>컨슈머 랭킹</Link>
+            </button>
           </li>
         </ContentBox>
       </UserInfoArea>

diff --git a/src/main.tsx b/src/main.tsx
@@ -12,6 +12,7 @@ import MagazinePage from '@/pages/magazine';
 import MagazineWritePage from '@/pages/magazine/write';
 import ProfilePage from '@/pages/profile';
 import NotFoundPage from '@/pages/not-found';
+import RankPage from '@/pages/rank';
 
 import { ROOT_PATH } from '@/temp/global-variables';
 
@@ -46,6 +47,10 @@ const router = createBrowserRouter([
         path: 'profile',
         element: <ProfilePage />,
       },
+      {
+        path: 'rank',
+        element: <RankPage />,
+      },
     ],
   },
 ]);

diff --git a/src/pages/rank.tsx b/src/pages/rank.tsx
@@ -0,0 +1,146 @@
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { useSetAtom } from 'jotai';
+import styled from '@emotion/styled';
+import { titleAtom } from '@/store/page-info';
+import { RankListMockData } from '@/temp/rank';
+import { ROOT_PATH } from '@/temp/global-variables';
+
+const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: #f7f7f7;
+`;
+
+const PowerWrap = styled.span`
+  padding: 0px 4px;
+  border-radius: 10px;
+  line-height: 16px;
+  font-size: 12px;
+  color: #fff;
+  font-weight: 600;
+  margin-left: 2px;
+  background-color: #ff5454;
+`;
+
+const RankNumber = styled.span`
+  font-weight: 700;
+  font-size: 24px;
+  margin-right: 1rem;
+`;
+
+const RankItem = styled.li`
+  background: white;
+  margin: 0.5rem;
+  padding: 1rem;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+
+const ProfileImage = styled.img`
+  border-radius: 50%;
+  width: 52px;
+  height: 52px;
+`;
+
+const UserName = styled.span`
+  font-weight: 600;
+  font-size: 18px;
+`;
+
+const Description = styled.span`
+  color: grey;
+`;
+
+const Badge = styled.img`
+  width: 20px;
+  height: 20px;
+  margin-left: 4px;
+`;
+
+const ActionButton = styled.button`
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  margin-left: auto;
+  cursor: pointer;
+  > a {
+    color: white;
+  }
+`;
+
+interface IUserProfile {
+  id: string;
+  name: string;
+  isPower: boolean;
+  description: string;
+  profileImageUrl: string;
+  crownIconUrl: string;
+}
+
+interface IRankItemProps {
+  user: IUserProfile;
+  onActionClick: (userId: string) => void;
+  rank: number;
+}
+const RankItemComponent: React.FC<IRankItemProps> = ({
+  user,
+  onActionClick,
+  rank,
+}) => (
+  <RankItem>
+    <RankNumber>{rank}</RankNumber>
+    <ProfileImage src={user.profileImageUrl} alt={user.name} />
+    <div
+      style={{ display: 'flex', flexDirection: 'column', marginLeft: '18px' }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <UserName>{user.name}</UserName>
+        <Badge src={user.crownIconUrl} alt={user.name} />
+        {user.isPower && <PowerWrap>파워컨슈머</PowerWrap>}
+      </div>
+
+      <Description>{user.description}</Description>
+    </div>
+
+    <ActionButton onClick={() => onActionClick(user.id)}>
+      <Link to={`${ROOT_PATH}/my-page/seller`}>매거진</Link>
+    </ActionButton>
+  </RankItem>
+);
+
+const RankPage: React.FC = () => {
+  const [userProfiles, setUserProfiles] = useState<IUserProfile[]>([]);
+  const setTitle = useSetAtom(titleAtom);
+
+  useEffect(() => {
+    setUserProfiles(RankListMockData);
+  }, []);
+
+  const handleActionClick = () => {
+    //
+  };
+
+  useEffect(() => {
+    setTitle('컨슈머 랭킹');
+  }, [setTitle]);
+
+  return (
+    <PageContainer>
+      {userProfiles.map((user, index) => (
+        <RankItemComponent
+          key={user.id}
+          user={user}
+          onActionClick={handleActionClick}
+          rank={index + 1}
+        />
+      ))}
+    </PageContainer>
+  );
+};
+
+export default RankPage;
diff --git a/src/temp/rank.ts b/src/temp/rank.ts
@@ -0,0 +1,155 @@
+export const RankListMockData = [
+  {
+    id: '1',
+    name: '지마켓 판매자 1',
+    description: '안녕하세요. 또 만나요. 아닙니다.',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: true,
+  },
+  {
+    id: '1',
+    name: '송 강 송 약',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: true,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+  {
+    id: '1',
+    name: '송 강',
+    description: '안녕하세요',
+    profileImageUrl:
+      'https://i.namu.wiki/i/nbQ_jSgZcfGat1XZaxZrYR0RKsdTOwKXD298Z80F-RZw4aVDRijii1H5z-o_faB4vbiFNZ7oXTiWJewDtWiOZg.webp',
+    crownIconUrl: 'https://cdn-icons-png.flaticon.com/512/5899/5899666.png',
+    isPower: false,
+  },
+];