✨ 작업물, 스크랩 목록 UI 구현

components/Layout/index.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import * as S from './styles';
+import Header from 'components/header/Header';
 const Layout: React.FC = ({ children }) => {
-  return <S.Wrapper>{children}</S.Wrapper>;
+  return (
+    <>
+      <Header />
+      <S.Wrapper>{children}</S.Wrapper>
+    </>
+  );
 };
 
 export default Layout;

components/Profile/Banner/AddImage/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import * as S from './styles';
 import ImageUploadWrapper from 'components/common/ImageUploadWrapper';
+import { AddImageWrapper, AddImageSvg, AddImageText } from 'components/common/Atomic/AddItem';
 
 interface Props {
   text: string;
@@ -10,10 +10,10 @@ interface Props {
 const AddImage: React.FC<Props> = ({ text }) => {
   return (
     <ImageUploadWrapper name="banner">
-      <S.AddImageWrapper>
-        <S.AddImageSvg width={80} height={80} />
-        <S.AddImageText>{text}</S.AddImageText>
-      </S.AddImageWrapper>
+      <AddImageWrapper>
+        <AddImageSvg width={80} height={80} />
+        <AddImageText>{text}</AddImageText>
+      </AddImageWrapper>
     </ImageUploadWrapper>
   );
 };

components/Profile/ItemList/index.tsx

@@ -1,7 +1,23 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import * as S from './styles';
-const ItemList: React.FC = () => {
-  return <S.ItemListWrapper></S.ItemListWrapper>;
+import AddItemCard from 'components/common/AddItemCard';
+import Thumbnail from 'components/common/Thumbnail';
+interface Props {
+  itemList: string[]; //데이터 형식에따라 타입 변환할 것
+}
+const ItemList: React.FC<Props> = ({ itemList }) => {
+  useEffect(() => {
+    console.log(itemList);
+  }, [itemList]);
+  return (
+    <S.ItemListWrapper>
+      {itemList.length ? (
+        itemList.map((item, i) => <Thumbnail key={i} item={item}></Thumbnail>)
+      ) : (
+        <AddItemCard></AddItemCard>
+      )}
+    </S.ItemListWrapper>
+  );
 };
 
 export default ItemList;

components/Profile/ItemList/styles.tsx

@@ -1,6 +1,9 @@
 import styled from 'styled-components';
 
 export const ItemListWrapper = styled.div`
-  height: 20px;
-  background-color: black;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(363px, 1fr));
+
+  row-gap: 25px;
+  column-gap: 24px;
 `;

components/Profile/UserInfo/index.tsx

@@ -8,6 +8,7 @@ import {
   MessageButton,
 } from 'components/common/Atomic/Tabs/Button';
 import { Keyword } from 'components/common/Atomic/Tabs/Keyword';
+import { numberWithCommas } from 'utils/numberWithCommas';
 
 const UserInfo = () => {
   const [userName, setUserName] = useState<string>('Andre');
@@ -24,8 +25,8 @@ const UserInfo = () => {
     '그래픽',
     '마케팅',
   ]);
-  const [followers, setFollowers] = useState<string>('10,214');
-  const [followings, setFollowings] = useState<string>('35,150');
+  const [followers, setFollowers] = useState<number>(10214);
+  const [followings, setFollowings] = useState<number>(35150);
   const [currentUser, setCurrentUser] = useState<boolean>(false);
   const [intro, setIntro] = useState<string>(
     '사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.'
@@ -48,9 +49,9 @@ const UserInfo = () => {
           </div>
           <S.FollowInfo>
             <span>팔로워</span>
-            <span>{followers}</span>
+            <span>{numberWithCommas(followers)}</span>
             <span>팔로잉</span>
-            <span>{followings}</span>
+            <span>{numberWithCommas(followings)}</span>
           </S.FollowInfo>
           <p>{intro}</p>
         </S.InfoDescription>

components/common/AddItemCard/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import { AddImageWrapper, AddImageSvg } from '../Atomic/AddItem';
+const AddItem = () => {
+  return (
+    <AddItemCard>
+      <AddImageWrapper>
+        <AddImageText>게시물을 추가 해주세요.</AddImageText>
+        <AddImageSvg width={80} height={80} />
+      </AddImageWrapper>
+    </AddItemCard>
+  );
+};
+
+export default AddItem;
+
+const AddItemCard = styled.div`
+  width: 363px;
+  height: 280px;
+  background-color: ${({ theme }) => theme.color.gray_100};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+`;
+
+const AddImageText = styled.span`
+  color: ${(props) => props.theme.color.addTextGray};
+  font-size: 14px;
+  margin-bottom: 16px;
+`;

components/common/Atomic/Tabs/TabButton/index.ts

@@ -0,0 +1,31 @@
+import styled, { css, DefaultTheme } from 'styled-components';
+
+export const TabButton = styled.button<{ active: boolean; theme: DefaultTheme }>`
+  display: inline-block;
+  height: 31px;
+  font-size: 16px;
+  line-height: 1.448125;
+  padding: 4px 12px;
+  border-radius: 24px;
+  margin-left: 24px;
+  font-weight: ${({ theme }) => theme.fontWeight.medium};
+  background-color: ${({ theme }) => theme.color.white};
+  border: 1px solid ${({ theme }) => theme.color.gray_300};
+  color: ${({ theme }) => theme.color.black};
+  span {
+    margin-left: 4px;
+    color: ${({ theme }) => theme.color.gray_400};
+  }
+  ${({ active }) => {
+    return (
+      active &&
+      css`
+        border: none;
+        background-color: ${({ theme }) => theme.color.black};
+        color: ${({ theme }) => theme.color.white};
+        span {
+        }
+      `
+    );
+  }};
+`;

components/common/Thumbnail/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import Image from 'next/image';
+
+interface Props {
+  item: string; //작품 정보에 대한 타입을 정의해줘야함
+}
+const Thumbnail: React.FC<Props> = ({ item }) => {
+  return (
+    <ItemCard>
+      <ImageWrapper>
+        <Image src="/images/icon-folder-add.svg" width={24} height={24} />
+      </ImageWrapper>
+      {item.length > 0 && (
+        <ItemInfo>
+          <p>{item}</p>
+        </ItemInfo>
+      )}
+    </ItemCard>
+  );
+};
+
+export default Thumbnail;
+
+const ItemCard = styled.div`
+  position: relative;
+  width: 363px;
+  height: 280px;
+  border-radius: 10px;
+  background-color: ${({ theme }) => theme.color.gray_500};
+  overflow: hidden;
+`;
+
+const ItemInfo = styled.div`
+  position: absolute;
+  bottom: 0;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 70.31%);
+  width: 100%;
+  height: 100px;
+  padding: 0 16px;
+
+  p {
+    position: absolute;
+    color: ${({ theme }) => theme.color.white};
+    font-weght: ${({ theme }) => theme.fontWeight.medium};
+    font-size: 16px;
+    line-height: 1.4375;
+    letter-spacing: 0.02em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 332px;
+    height: 23px;
+    bottom: 16px;
+  }
+`;
+
+const ImageWrapper = styled.button`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  top: 16px;
+  right: 16px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+`;

pages/profile.tsx

@@ -1,14 +1,51 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import Layout from 'components/Layout';
 import Banner from 'components/Profile/Banner';
 import UserInfo from 'components/Profile/UserInfo';
 import ItemList from 'components/Profile/ItemList';
+import { TabButton } from 'components/common/Atomic/Tabs/TabButton';
 const Profile: React.FC = () => {
+  const [user, getUserQuery] = useState('serre'); // useQuery로 유저정보 받아옴.
+
+  //Suspense를 사용하게 된다면, useQuery를 여러개 선언하는것은 사용할 수 없으므로, useQueries를 사용해야함
+  const Items = {
+    items: [], //['아이템1', '아이템2'],
+    scrabs: [
+      '',
+      '스크랩1 제목입니다.스크랩1 제목입니다.스크랩1 제목입니다.스크랩1 제목입니다.스크랩1 제목입니다.',
+      '스크랩2',
+      '스크랩3',
+      '스크랩4',
+      '스크랩5',
+      '스크랩6',
+      '스크랩7',
+      '스크랩8',
+    ],
+  };
+  const [currentTab, setCurrentTab] = useState(0);
+  const tabMenuArr = [
+    ['작업물', 'items'],
+    ['스크랩', 'scrabs'],
+  ];
+  const selectTab = useCallback(
+    (index: number) => () => {
+      setCurrentTab(index);
+    },
+    [currentTab, setCurrentTab]
+  );
   return (
     <Layout>
       <Banner />
       <UserInfo />
-      <ItemList />
+      <div style={{ marginBottom: '40px' }}>
+        {tabMenuArr.map((tab, i) => (
+          <TabButton active={currentTab === i} key={i} onClick={selectTab(i)}>
+            {tab[0]}
+            <span>{Items[tabMenuArr[i][1]].length}</span>
+          </TabButton>
+        ))}
+      </div>
+      <ItemList itemList={Items[tabMenuArr[currentTab][1]]} />
     </Layout>
   );
 };

styles/style.d.ts

@@ -3,6 +3,8 @@ import 'styled-components';
 declare module 'styled-components' {
   export interface DefaultTheme {
     color: {
+      white: '#ffffff';
+      black: '#000000';
       purple: '#8661de';
       blue: '#00bac7';
       gray: '#f6f6f6';
@@ -14,6 +16,10 @@ declare module 'styled-components' {
       backgroundGray: '#eeeeee';
       backgroundHoverGray: '#e0e0e0';
       addTextGray: '#9e9e9e';
+      gray_100: '#f5f5f5';
+      gray_300: '#e5e5e5';
+      gray_400: '#bdbdbd';
+      gray_500: '#757575';
       gray_700: '#616161';
       profileNameBlack: '#212121';
     };

styles/theme.ts

@@ -2,6 +2,8 @@ import { DefaultTheme } from 'styled-components';
 
 export const theme: DefaultTheme = {
   color: {
+    white: '#ffffff',
+    black: '#000000',
     purple: '#8661de',
     blue: '#00bac7',
     gray: '#f6f6f6',
@@ -13,6 +15,10 @@ export const theme: DefaultTheme = {
     backgroundGray: '#eeeeee', //색깔 변수 이름 소통 필요
     backgroundHoverGray: '#e0e0e0',
     addTextGray: '#9e9e9e',
+    gray_100: '#f5f5f5',
+    gray_300: '#e5e5e5',
+    gray_400: '#bdbdbd',
+    gray_500: '#757575',
     gray_700: '#616161',
     profileNameBlack: '#212121',
   },