Stack-Knowledge · frorong · Sep 9, 2023 · Sep 7, 2023 · Sep 7, 2023 · Sep 7, 2023
diff --git a/packages/common/src/components/Banner/Banner1/index.tsx b/packages/common/src/components/Banner/Banner1/index.tsx
@@ -2,8 +2,8 @@
 
 import * as S from './style';
 import Image from 'next/image';
-import SunIcon from '../../../assets/Banner/SunIcon.png';
-import LetgoIcon from '../../../assets/Banner/LetgoIcon.png';
+import SunIcon from 'common/assets/Banner/SunIcon.png';
+import LetgoIcon from 'common/assets/Banner/LetgoIcon.png';
 
 const Banner1 = () => (
   <S.BannerWrapper>

diff --git a/packages/common/src/components/Banner/Banner2/index.tsx b/packages/common/src/components/Banner/Banner2/index.tsx
@@ -2,7 +2,7 @@
 
 import * as S from './style';
 import Image from 'next/image';
-import DocumentIcon from '../../../assets/Banner/DocumentIcon.png';
+import DocumentIcon from 'common/assets/Banner/DocumentIcon.png';
 
 const Banner2 = () => (
   <S.BannerWrapper>

diff --git a/packages/common/src/components/Banner/Banner3/index.tsx b/packages/common/src/components/Banner/Banner3/index.tsx
@@ -2,7 +2,7 @@
 
 import * as S from './style';
 import Image from 'next/image';
-import GiftIcon from '../../../assets/Banner/GiftIcon.png';
+import GiftIcon from 'common/assets/Banner/GiftIcon.png';
 
 const Banner3 = () => (
   <S.BannerWrapper>

diff --git a/packages/common/src/components/Banner/index.tsx b/packages/common/src/components/Banner/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState, useEffect, useRef } from 'react';
 
 import { Banner1, Banner2, Banner3 } from '../index';

diff --git a/packages/common/src/components/RankingItem/index.stories.tsx b/packages/common/src/components/RankingItem/index.stories.tsx
@@ -19,73 +19,83 @@ type Story = StoryObj<typeof RankingItem>;
 export const Primary: Story = {
   args: {
     ranking: 1,
-    id: 'sampleId',
-    cumulatePoint: 1000,
-    user: {
+    item: {
       id: 'sampleId',
-      email: 'sample@gmail.com',
-      name: 'user',
-      profileImage:
-        'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+      cumulatePoint: 1000,
+      user: {
+        id: 'sampleId',
+        email: 'sample@gmail.com',
+        name: 'user',
+        profileImage:
+          'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+      },
     },
   },
 };
 
 export const Secondary: Story = {
   args: {
     ranking: 2,
-    id: 'sampleId',
-    cumulatePoint: 800,
-    user: {
+    item: {
       id: 'sampleId',
-      email: 'sample@gmail.com',
-      name: '이태랑',
-      profileImage:
-        'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+      cumulatePoint: 800,
+      user: {
+        id: 'sampleId',
+        email: 'sample@gmail.com',
+        name: '이태랑',
+        profileImage:
+          'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+      },
     },
   },
 };
 
 export const Tertiary: Story = {
   args: {
     ranking: 3,
-    id: 'sampleId',
-    cumulatePoint: 700,
-    user: {
+    item: {
       id: 'sampleId',
-      email: 'sample@gmail.com',
-      name: '하제우와이정우와정찬교',
-      profileImage:
-        'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+      cumulatePoint: 700,
+      user: {
+        id: 'sampleId',
+        email: 'sample@gmail.com',
+        name: '하제우와이정우와정찬교',
+        profileImage:
+          'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+      },
     },
   },
 };
 
 export const Hund: Story = {
   args: {
     ranking: 100,
-    id: '100등',
-    cumulatePoint: 0,
-    user: {
+    item: {
       id: '100등',
-      email: 'sample@gmail.com',
-      name: '100등',
-      profileImage:
-        'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+      cumulatePoint: 0,
+      user: {
+        id: '100등',
+        email: 'sample@gmail.com',
+        name: '100등',
+        profileImage:
+          'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+      },
     },
   },
 };
 
 export const NoIMG: Story = {
   args: {
-    ranking: 100,
-    id: '100등',
-    cumulatePoint: 0,
-    user: {
-      id: '100등',
-      email: 'sample@gmail.com',
-      name: '100등',
-      profileImage: null,
+    ranking: 4,
+    item: {
+      id: '정찬교',
+      cumulatePoint: 50,
+      user: {
+        id: '정찬교',
+        email: 'sample@gmail.com',
+        name: '정찬교',
+        profileImage: null,
+      },
     },
   },
 };
diff --git a/packages/common/src/components/RankingItem/index.tsx b/packages/common/src/components/RankingItem/index.tsx
@@ -6,14 +6,17 @@ import DefaultProfile from 'common/assets/svg/DefaultProfile.svg';
 
 import { RankingPropsType } from 'types';
 
-interface RankingItemProps extends RankingPropsType {
+interface RankingItemProps {
   ranking: number;
+  item: RankingPropsType;
 }
 
 const RankingItem: React.FC<RankingItemProps> = ({
-  cumulatePoint,
   ranking,
-  user: { name, profileImage },
+  item: {
+    cumulatePoint,
+    user: { name, profileImage },
+  },
 }) => (
   <S.ItemWrapper>
     <S.FlexWrapper>

diff --git a/packages/common/src/components/RankingItem/style.ts b/packages/common/src/components/RankingItem/style.ts
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import Image from 'next/image';
 
 export const ItemWrapper = styled.div`
-  width: 28.25rem;
+  width: 33.75rem;
   height: 4.375rem;
   border-radius: 0.625rem;
   display: flex;

diff --git a/packages/common/src/components/RankingList/index.stories.tsx b/packages/common/src/components/RankingList/index.stories.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import RankingList from '.';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+export default {
+  title: 'common/RankingList',
+  component: RankingList,
+  parameters: {},
+} as Meta<typeof RankingList>;
+
+type Story = StoryObj<typeof RankingList>;
+
+const list = [
+  {
+    id: 'sampleId',
+    cumulatePoint: 1000,
+    user: {
+      id: 'sampleId',
+      email: 'sample@gmail.com',
+      name: 'user',
+      profileImage:
+        'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+    },
+  },
+  {
+    id: 'sampleId',
+    cumulatePoint: 800,
+    user: {
+      id: 'sampleId',
+      email: 'sample@gmail.com',
+      name: '이태랑',
+      profileImage:
+        'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+    },
+  },
+  {
+    id: 'sampleId',
+    cumulatePoint: 700,
+    user: {
+      id: 'sampleId',
+      email: 'sample@gmail.com',
+      name: '하제우와이정우와정찬교',
+      profileImage:
+        'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+    },
+  },
+  {
+    id: '정찬교',
+    cumulatePoint: 50,
+    user: {
+      id: '정찬교',
+      email: 'sample@gmail.com',
+      name: '정찬교',
+      profileImage: null,
+    },
+  },
+  {
+    id: '100등',
+    cumulatePoint: 0,
+    user: {
+      id: '100등',
+      email: 'sample@gmail.com',
+      name: '100등',
+      profileImage:
+        'https://s3.ap-northeast-2.amazonaws.com/st.dangidata/billing/course/image/133823_20230516174511852.png',
+    },
+  },
+];
+
+export const Primary: Story = {
+  args: {
+    list: list,
+  },
+};
diff --git a/packages/common/src/components/RankingList/index.tsx b/packages/common/src/components/RankingList/index.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as S from './style';
+import { RankingItem } from 'common/components';
+
+import { RankingPropsType } from 'types';
+
+interface RankingListProps {
+  list: RankingPropsType[];
+}
+
+const RankingList: React.FC<RankingListProps> = ({ list }) => (
+  <S.RankingListWrapper>
+    <div>
+      <S.RankingText>랭킹</S.RankingText>
+      <S.ItemListWrapper>
+        {list.map((item, index) => (
+          <>
+            <RankingItem key={item.id} item={item} ranking={index + 1} />
+            {index !== list.length - 1 && <S.Line />}
+          </>
+        ))}
+      </S.ItemListWrapper>
+    </div>
+  </S.RankingListWrapper>
+);
+
+export default RankingList;
diff --git a/packages/common/src/components/RankingList/style.ts b/packages/common/src/components/RankingList/style.ts
@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+
+export const RankingListWrapper = styled.div`
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+`;
+
+export const RankingText = styled.h3`
+  ${({ theme }) => theme.typo.h3}
+  color: ${({ theme }) => theme.color.black};
+  font-weight: 500;
+  margin: 3.75rem 0 1rem 2.75rem;
+`;
+
+export const ItemListWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.8125rem;
+`;
+
+export const Line = styled.div`
+  width: 33.75rem;
+  height: 0.0625rem;
+  margin-top: 0.8125rem;
+  background-color: ${({ theme }) => theme.color.gray['030']};
+`;
diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts
@@ -1,10 +1,9 @@
-
 export { default as Example } from './Example';
 export { default as RankingItem } from './RankingItem';
 export { default as TaskCard } from './TaskCard';
 export { default as LoginButton } from './LoginButton';
+export { default as RankingList } from './RankingList';
 export { default as Banner1 } from './Banner/Banner1';
 export { default as Banner2 } from './Banner/Banner2';
 export { default as Banner3 } from './Banner/Banner3';
 export { default as Header } from './Header';
-
diff --git a/packages/common/tsconfig.json b/packages/common/tsconfig.json
@@ -3,7 +3,6 @@
   "include": ["**/*.ts", "**/*.tsx", "src", "src/custom.d.ts"],
   "exclude": ["node_modules"],
   "compilerOptions": {
-    "jsxImportSource": "@emotion/react",
     "rootDir": ".",
     "baseUrl": "./src",
     "paths": {

diff --git a/packages/tsconfig/nextjs.json b/packages/tsconfig/nextjs.json
@@ -2,7 +2,6 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "./base.json",
   "compilerOptions": {
-    "jsxImportSource": "@emotion/react",
     "jsx": "preserve",
     "plugins": [
       {

diff --git a/packages/tsconfig/react-components.json b/packages/tsconfig/react-components.json
@@ -2,7 +2,6 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "./base.json",
   "compilerOptions": {
-    "jsxImportSource": "@emotion/react",
     "jsx": "react-jsx"
   }
 }
diff --git a/projects/admin/src/app/layout.tsx b/projects/admin/src/app/layout.tsx
@@ -1,16 +1,15 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 
-import { Header } from 'common';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
 import { GlobalStyle } from 'common';
+import { Header } from 'common';
 
 import Providers from './providers';
 
-const inter = Inter({ subsets: ['latin'] });
-
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Stack Knowledge',
+  description: 'Stack Knowledge',
 };
 
 export default function RootLayout({
@@ -20,13 +19,14 @@ export default function RootLayout({
 }) {
   return (
     <html lang='ko'>
-      <GlobalStyle />
-      <Providers>
-        <body className={inter.className}>
+      <body>
+        <Providers>
+          <ReactQueryDevtools />
+          <GlobalStyle />
           <Header role='admin' />
           {children}
-        </body>
-      </Providers>
+        </Providers>
+      </body>
     </html>
   );
 }