diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx index 2414a4a..b2a8d45 100644 --- a/components/Layout/index.tsx +++ b/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 {children}; + return ( + <> +
+ {children} + + ); }; export default Layout; diff --git a/components/Profile/Banner/AddImage/index.tsx b/components/Profile/Banner/AddImage/index.tsx index ce898e7..0c06e1b 100644 --- a/components/Profile/Banner/AddImage/index.tsx +++ b/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 = ({ text }) => { return ( - - - {text} - + + + {text} + ); }; diff --git a/components/Profile/Banner/AddImage/types.ts b/components/Profile/Banner/AddImage/types.ts deleted file mode 100644 index e69de29..0000000 diff --git a/components/Profile/ItemList/index.tsx b/components/Profile/ItemList/index.tsx index f8b77a9..303b11e 100644 --- a/components/Profile/ItemList/index.tsx +++ b/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 ; +import AddItemCard from 'components/common/AddItemCard'; +import Thumbnail from 'components/common/Thumbnail'; +interface Props { + itemList: string[]; //데이터 형식에따라 타입 변환할 것 +} +const ItemList: React.FC = ({ itemList }) => { + useEffect(() => { + console.log(itemList); + }, [itemList]); + return ( + + {itemList.length ? ( + itemList.map((item, i) => ) + ) : ( + + )} + + ); }; export default ItemList; diff --git a/components/Profile/ItemList/styles.tsx b/components/Profile/ItemList/styles.tsx index 44b7b89..2773983 100644 --- a/components/Profile/ItemList/styles.tsx +++ b/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; `; diff --git a/components/Profile/UploadImage/index.tsx b/components/Profile/UploadImage/index.tsx deleted file mode 100644 index 0d4c509..0000000 --- a/components/Profile/UploadImage/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React, { forwardRef } from 'react'; -import { useMutation, useQuery, useQueryClient } from 'react-query'; -const UploadImage = forwardRef(({}, ref) => { - const queryClient = useQueryClient(); - - return <>; -}); -UploadImage.displayName = 'UploadImage'; -export default UploadImage; diff --git a/components/Profile/UserInfo/index.tsx b/components/Profile/UserInfo/index.tsx index e839372..9b5c349 100644 --- a/components/Profile/UserInfo/index.tsx +++ b/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('Andre'); @@ -24,8 +25,8 @@ const UserInfo = () => { '그래픽', '마케팅', ]); - const [followers, setFollowers] = useState('10,214'); - const [followings, setFollowings] = useState('35,150'); + const [followers, setFollowers] = useState(10214); + const [followings, setFollowings] = useState(35150); const [currentUser, setCurrentUser] = useState(false); const [intro, setIntro] = useState( '사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.' @@ -48,9 +49,9 @@ const UserInfo = () => { 팔로워 - {followers} + {numberWithCommas(followers)} 팔로잉 - {followings} + {numberWithCommas(followings)}

{intro}

diff --git a/components/common/AddItemCard/index.tsx b/components/common/AddItemCard/index.tsx new file mode 100644 index 0000000..323fbc5 --- /dev/null +++ b/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 ( + + + 게시물을 추가 해주세요. + + + + ); +}; + +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; +`; diff --git a/components/Profile/Banner/AddImage/styles.ts b/components/common/Atomic/AddItem/index.ts similarity index 100% rename from components/Profile/Banner/AddImage/styles.ts rename to components/common/Atomic/AddItem/index.ts diff --git a/components/common/Atomic/Tabs/TabButton/index.ts b/components/common/Atomic/Tabs/TabButton/index.ts index e69de29..bfe74af 100644 --- a/components/common/Atomic/Tabs/TabButton/index.ts +++ b/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 { + } + ` + ); + }}; +`; diff --git a/components/common/Thumbnail/index.tsx b/components/common/Thumbnail/index.tsx new file mode 100644 index 0000000..0f9e659 --- /dev/null +++ b/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 = ({ item }) => { + return ( + + + + + {item.length > 0 && ( + +

{item}

+ + )} + + ); +}; + +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; +`; diff --git a/pages/profile.tsx b/pages/profile.tsx index bb03636..c392f0f 100644 --- a/pages/profile.tsx +++ b/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 ( - +
+ {tabMenuArr.map((tab, i) => ( + + {tab[0]} + {Items[tabMenuArr[i][1]].length} + + ))} +
+ ); }; diff --git a/public/images/icon-folder-add.svg b/public/images/icon-folder-add.svg new file mode 100644 index 0000000..7d9da0a --- /dev/null +++ b/public/images/icon-folder-add.svg @@ -0,0 +1,4 @@ + + + + diff --git a/styles/style.d.ts b/styles/style.d.ts index 39037bb..ac26ac6 100644 --- a/styles/style.d.ts +++ b/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'; }; diff --git a/styles/theme.ts b/styles/theme.ts index 55b4566..c67607e 100644 --- a/styles/theme.ts +++ b/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', },