From 181a656f76094684a13c7128f35fa4a8282bad16 Mon Sep 17 00:00:00 2001 From: abg3000 Date: Tue, 26 Apr 2022 12:18:01 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20=EB=B0=B0=EB=84=88=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout/index.tsx | 7 ++++++ components/Layout/styles.ts | 7 ++++++ components/Profile/Banner/AddImage/index.tsx | 21 +++++++++++++++++ components/Profile/Banner/AddImage/styles.ts | 24 ++++++++++++++++++++ components/Profile/Banner/AddImage/types.ts | 0 components/Profile/Banner/index.tsx | 16 +++++++++++++ components/Profile/Banner/styles.ts | 15 ++++++++++++ components/Profile/Banner/types.ts | 6 +++++ components/Profile/UploadImage/index.tsx | 9 ++++++++ db.json | 13 +++++++++++ pages/profile.tsx | 12 ++++++++++ public/images/add_project_default.svg | 5 ++++ public/images/add_project_pressed.svg | 5 ++++ styles/style.d.ts | 3 +++ styles/theme.ts | 3 +++ tsconfig.json | 3 ++- 16 files changed, 148 insertions(+), 1 deletion(-) create mode 100644 components/Layout/index.tsx create mode 100644 components/Layout/styles.ts create mode 100644 components/Profile/Banner/AddImage/index.tsx create mode 100644 components/Profile/Banner/AddImage/styles.ts create mode 100644 components/Profile/Banner/AddImage/types.ts create mode 100644 components/Profile/Banner/index.tsx create mode 100644 components/Profile/Banner/styles.ts create mode 100644 components/Profile/Banner/types.ts create mode 100644 components/Profile/UploadImage/index.tsx create mode 100644 db.json create mode 100644 pages/profile.tsx create mode 100644 public/images/add_project_default.svg create mode 100644 public/images/add_project_pressed.svg diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx new file mode 100644 index 0000000..2414a4a --- /dev/null +++ b/components/Layout/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import * as S from './styles'; +const Layout: React.FC = ({ children }) => { + return {children}; +}; + +export default Layout; diff --git a/components/Layout/styles.ts b/components/Layout/styles.ts new file mode 100644 index 0000000..6d4da2b --- /dev/null +++ b/components/Layout/styles.ts @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +export const Wrapper = styled.div` + max-width: ${(props) => props.theme.desktop}; + padding: 0 30px; + margin: 0 auto; +`; diff --git a/components/Profile/Banner/AddImage/index.tsx b/components/Profile/Banner/AddImage/index.tsx new file mode 100644 index 0000000..ce898e7 --- /dev/null +++ b/components/Profile/Banner/AddImage/index.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import * as S from './styles'; +import ImageUploadWrapper from 'components/common/ImageUploadWrapper'; + +interface Props { + text: string; +} + +const AddImage: React.FC = ({ text }) => { + return ( + + + + {text} + + + ); +}; + +export default AddImage; diff --git a/components/Profile/Banner/AddImage/styles.ts b/components/Profile/Banner/AddImage/styles.ts new file mode 100644 index 0000000..9c8397e --- /dev/null +++ b/components/Profile/Banner/AddImage/styles.ts @@ -0,0 +1,24 @@ +import styled, { DefaultTheme } from 'styled-components'; +import Image from 'next/image'; + +export const AddImageWrapper = styled.div` + cursor: pointer; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + +export const AddImageSvg = styled(Image).attrs((props) => ({ + src: '/images/add_project_default.svg', +}))` + display: block; + border-radius: 50%; +`; + +export const AddImageText = styled.span<{ theme: DefaultTheme }>` + color: ${(props) => props.theme.color.addTextGray}; + font-size: 14px; + margin-top: 16px; +`; diff --git a/components/Profile/Banner/AddImage/types.ts b/components/Profile/Banner/AddImage/types.ts new file mode 100644 index 0000000..e69de29 diff --git a/components/Profile/Banner/index.tsx b/components/Profile/Banner/index.tsx new file mode 100644 index 0000000..8374edc --- /dev/null +++ b/components/Profile/Banner/index.tsx @@ -0,0 +1,16 @@ +import React, { useState } from 'react'; +import { useRecoilValue } from 'recoil'; + +import * as S from './styles'; + +import AddImage from './AddImage'; + +import { userRegisterInfoState, UserRegisterInfoType } from 'recoil/auth'; + +const Banner: React.FC = () => { + const [banner, setBanner] = useState(); + + return {!banner && }; +}; + +export default Banner; diff --git a/components/Profile/Banner/styles.ts b/components/Profile/Banner/styles.ts new file mode 100644 index 0000000..763c726 --- /dev/null +++ b/components/Profile/Banner/styles.ts @@ -0,0 +1,15 @@ +import styled from 'styled-components'; +import { styledProps } from './types'; + +export const BannerWrapper = styled.div` + width: 100%; + height: 280px; + background-color: ${(props) => props.theme.color.backgroundGray}; + background-image: ${(props) => props.url && `url(${props.url})`}; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; +`; diff --git a/components/Profile/Banner/types.ts b/components/Profile/Banner/types.ts new file mode 100644 index 0000000..c2abbf1 --- /dev/null +++ b/components/Profile/Banner/types.ts @@ -0,0 +1,6 @@ +import { DefaultTheme } from 'styled-components'; + +export interface styledProps { + url?: string | ArrayBuffer | null; + theme: DefaultTheme; +} diff --git a/components/Profile/UploadImage/index.tsx b/components/Profile/UploadImage/index.tsx new file mode 100644 index 0000000..0d4c509 --- /dev/null +++ b/components/Profile/UploadImage/index.tsx @@ -0,0 +1,9 @@ +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/db.json b/db.json new file mode 100644 index 0000000..b505452 --- /dev/null +++ b/db.json @@ -0,0 +1,13 @@ +{ + "user": [ + { + "id": 1, + "userProfile": null, + "email": "abg3000@naver.com", + "nickname": "장종오", + "description": "안녕하세요", + "mainCategory": [], + "banner": null + } + ] +} diff --git a/pages/profile.tsx b/pages/profile.tsx new file mode 100644 index 0000000..369c778 --- /dev/null +++ b/pages/profile.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Layout from 'components/Layout'; +import Banner from 'components/Profile/Banner'; +const Profile: React.FC = () => { + return ( + + + + ); +}; + +export default Profile; diff --git a/public/images/add_project_default.svg b/public/images/add_project_default.svg new file mode 100644 index 0000000..5590139 --- /dev/null +++ b/public/images/add_project_default.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/images/add_project_pressed.svg b/public/images/add_project_pressed.svg new file mode 100644 index 0000000..e66aceb --- /dev/null +++ b/public/images/add_project_pressed.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/styles/style.d.ts b/styles/style.d.ts index 2237fb4..729bdc2 100644 --- a/styles/style.d.ts +++ b/styles/style.d.ts @@ -9,6 +9,9 @@ declare module 'styled-components' { green: '#07b495'; lightGreen: '#99ecdd'; darkGray: '#54595d'; + backgroundGray: '#eeeeee'; + addTextGray: '#9e9e9e'; }; + desktop: '1200px'; } } diff --git a/styles/theme.ts b/styles/theme.ts index f5beaf1..63f2f76 100644 --- a/styles/theme.ts +++ b/styles/theme.ts @@ -8,5 +8,8 @@ export const theme: DefaultTheme = { green: '#07b495', lightGreen: '#99ecdd', darkGray: '#54595d', + backgroundGray: '#eeeeee', //색깔 변수 이름 소통 필요 + addTextGray: '#9e9e9e', }, + desktop: '1200px', }; diff --git a/tsconfig.json b/tsconfig.json index d292f69..722e2d1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,8 @@ "isolatedModules": true, "jsx": "preserve", "rootDir": ".", - "incremental": true + "incremental": true, + "baseUrl": "." }, "include": [ "next-env.d.ts", From 5ef853022ad279725f5feba00de110d9c6a65a25 Mon Sep 17 00:00:00 2001 From: abg3000 Date: Tue, 26 Apr 2022 17:16:41 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=E2=9C=A8=20=ED=8F=B0=ED=8A=B8=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/_app.tsx | 4 ++++ pages/profile.tsx | 6 +++++- styles/globalStyle.ts | 5 ++++- styles/style.d.ts | 8 ++++++++ styles/theme.ts | 8 ++++++++ 5 files changed, 29 insertions(+), 2 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index b33fb65..7f1102e 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -14,6 +14,10 @@ const MyApp = ({ Component, pageProps }: AppProps) => { <> + dreamIn diff --git a/pages/profile.tsx b/pages/profile.tsx index 369c778..bb03636 100644 --- a/pages/profile.tsx +++ b/pages/profile.tsx @@ -1,10 +1,14 @@ import React 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'; const Profile: React.FC = () => { return ( - + + + ); }; diff --git a/styles/globalStyle.ts b/styles/globalStyle.ts index 45abc6f..af6012a 100644 --- a/styles/globalStyle.ts +++ b/styles/globalStyle.ts @@ -16,11 +16,14 @@ export const GlobalStyle = createGlobalStyle` html{ font-size: 16px; -webkit-text-size-adjust: none; - font-family: -apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,sans-serif; + font-family: 'Noto Sans KR',sans-serif; font-display: fallback; -ms-overflow-style: none; scrollbar-width: none; } + button,span,input{ + font-family: 'Noto Sans KR',sans-serif; + } button { background: none; padding: 0; diff --git a/styles/style.d.ts b/styles/style.d.ts index 729bdc2..d20cc7c 100644 --- a/styles/style.d.ts +++ b/styles/style.d.ts @@ -7,10 +7,18 @@ declare module 'styled-components' { blue: '#00bac7'; gray: '#f6f6f6'; green: '#07b495'; + DefaultPrimaryGreen: '#bdF486'; + PressedPrimaryGreen: '#abf066'; lightGreen: '#99ecdd'; darkGray: '#54595d'; backgroundGray: '#eeeeee'; + backgroundHoverGray: '#e0e0e0'; addTextGray: '#9e9e9e'; + profileNameBlack: '#212121'; + }; + fontWeight: { + bold: 700; + medium: 500; }; desktop: '1200px'; } diff --git a/styles/theme.ts b/styles/theme.ts index 63f2f76..ef63524 100644 --- a/styles/theme.ts +++ b/styles/theme.ts @@ -6,10 +6,18 @@ export const theme: DefaultTheme = { blue: '#00bac7', gray: '#f6f6f6', green: '#07b495', + DefaultPrimaryGreen: '#bdF486', + PressedPrimaryGreen: '#abf066', lightGreen: '#99ecdd', darkGray: '#54595d', backgroundGray: '#eeeeee', //색깔 변수 이름 소통 필요 + backgroundHoverGray: '#e0e0e0', addTextGray: '#9e9e9e', + profileNameBlack: '#212121', + }, + fontWeight: { + bold: 700, + medium: 500, }, desktop: '1200px', }; From ffe771e419eebafc1387b1aa466d1f3bd73d4930 Mon Sep 17 00:00:00 2001 From: abg3000 Date: Tue, 26 Apr 2022 18:57:26 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20=EC=9C=A0=EC=A0=80=20=EC=86=8C?= =?UTF-8?q?=EA=B0=9C=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Profile/ItemList/index.tsx | 7 ++ components/Profile/ItemList/styles.tsx | 6 ++ components/Profile/UserInfo/index.tsx | 88 ++++++++++++++++++ components/Profile/UserInfo/styles.ts | 57 ++++++++++++ components/common/Atomic/Tabs/Button/index.ts | 50 ++++++++++ .../common/Atomic/Tabs/Keyword/index.ts | 16 ++++ .../common/Atomic/Tabs/TabButton/index.ts | 0 public/images/Message.svg | 4 + public/images/icon-add-round.svg | 4 + public/images/icon-message.svg | 4 + public/images/profile-edit-write2.png | Bin 0 -> 424 bytes public/images/profile-edit-write2.svg | 4 + public/images/profile-edit.svg | 4 + public/images/profile_off.svg | 13 +++ styles/style.d.ts | 1 + styles/theme.ts | 1 + 16 files changed, 259 insertions(+) create mode 100644 components/Profile/ItemList/index.tsx create mode 100644 components/Profile/ItemList/styles.tsx create mode 100644 components/Profile/UserInfo/index.tsx create mode 100644 components/Profile/UserInfo/styles.ts create mode 100644 components/common/Atomic/Tabs/Button/index.ts create mode 100644 components/common/Atomic/Tabs/Keyword/index.ts create mode 100644 components/common/Atomic/Tabs/TabButton/index.ts create mode 100644 public/images/Message.svg create mode 100644 public/images/icon-add-round.svg create mode 100644 public/images/icon-message.svg create mode 100644 public/images/profile-edit-write2.png create mode 100644 public/images/profile-edit-write2.svg create mode 100644 public/images/profile-edit.svg create mode 100644 public/images/profile_off.svg diff --git a/components/Profile/ItemList/index.tsx b/components/Profile/ItemList/index.tsx new file mode 100644 index 0000000..f8b77a9 --- /dev/null +++ b/components/Profile/ItemList/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import * as S from './styles'; +const ItemList: React.FC = () => { + return ; +}; + +export default ItemList; diff --git a/components/Profile/ItemList/styles.tsx b/components/Profile/ItemList/styles.tsx new file mode 100644 index 0000000..44b7b89 --- /dev/null +++ b/components/Profile/ItemList/styles.tsx @@ -0,0 +1,6 @@ +import styled from 'styled-components'; + +export const ItemListWrapper = styled.div` + height: 20px; + background-color: black; +`; diff --git a/components/Profile/UserInfo/index.tsx b/components/Profile/UserInfo/index.tsx new file mode 100644 index 0000000..e839372 --- /dev/null +++ b/components/Profile/UserInfo/index.tsx @@ -0,0 +1,88 @@ +import React, { useState } from 'react'; +import * as S from './styles'; +import Image from 'next/image'; +import { + ProfileEditButton, + UploadProductButton, + FollowButton, + MessageButton, +} from 'components/common/Atomic/Tabs/Button'; +import { Keyword } from 'components/common/Atomic/Tabs/Keyword'; + +const UserInfo = () => { + const [userName, setUserName] = useState('Andre'); + const [abilties, setAbiliies] = useState([ + '일러스트레이션', + '그래픽 디자인', + '일러스트레이션', + '그래픽 디자인', + '일러스트레이션', + '그래픽 디자인', + '일러스트레이션', + '그래픽 디자인', + '일러스트레이션', + '그래픽', + '마케팅', + ]); + const [followers, setFollowers] = useState('10,214'); + const [followings, setFollowings] = useState('35,150'); + const [currentUser, setCurrentUser] = useState(false); + const [intro, setIntro] = useState( + '사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.사용자 소개입니다.' + ); + const handler = () => { + setCurrentUser(!currentUser); + }; + return ( + + + + + +

{userName}

+ +
+ {abilties.map((ability, i) => ( + {ability} + ))} +
+ + 팔로워 + {followers} + 팔로잉 + {followings} + +

{intro}

+ + + + {currentUser ? ( + <> + {' '} + + + 프로필 수정 + + + + 작품 업로드 + + + ) : ( + <> + + + 팔로우 + + + + 메시지 + + + )} + + + ); +}; + +export default UserInfo; diff --git a/components/Profile/UserInfo/styles.ts b/components/Profile/UserInfo/styles.ts new file mode 100644 index 0000000..8696209 --- /dev/null +++ b/components/Profile/UserInfo/styles.ts @@ -0,0 +1,57 @@ +import styled from 'styled-components'; +import Image from 'next/image'; +export const InfoWrapper = styled.div` + padding: 24px; + position: relative; + margin-bottom: 80px; + display: flex; +`; + +export const ProfileImg = styled.div``; + +export const InfoSection = styled.div` + margin-left: 24px; + width: 610px; + + & > h1{ + font-size: 20px; + line-height: 1.3; + font-weight : ${({ theme }) => theme.fontWeight.bold} + color: ${({ theme }) => theme.color.profileNameBlack}; + margin-bottom: 16px; + } +`; + +export const InfoDescription = styled.div` + display: flex; + flex-direction: column; + flex-wrap: wrap; + + p { + color: ${({ theme }) => theme.color.gray_700}; + font-weight: ${({ theme }) => theme.fontWeight.medium}; + font-size: 12px; + line-height: 1.416666; + } +`; + +export const InfoAside = styled.div` + position: absolute; + right: 24px; +`; + +export const FollowInfo = styled.div` + margin-bottom: 8px; + span { + font-weight: 400; + font-size: 12px; + line-height: 1.833333; + letter-spacing: -0.01em; + color: ${({ theme }) => theme.color.gray_700}; + margin-right: 16px; + } + + span:nth-child(2n-1) { + margin-right: 4px; + } +`; diff --git a/components/common/Atomic/Tabs/Button/index.ts b/components/common/Atomic/Tabs/Button/index.ts new file mode 100644 index 0000000..fe107c5 --- /dev/null +++ b/components/common/Atomic/Tabs/Button/index.ts @@ -0,0 +1,50 @@ +import styled, { css } from 'styled-components'; + +export const DefaultButton = styled.button<{ bgColor?: boolean }>` + height: 40px; + border-radius: 30px; + display: inline-flex; + align-items: center; + justify-content: center; + + ${({ bgColor, theme }) => { + const color = bgColor ? theme.color.DefaultPrimaryGreen : theme.color.backgroundGray; + const pressed = bgColor ? theme.color.PressedPrimaryGreen : theme.color.backgroundHoverGray; + return css` + background-color: ${color}; + &: hover { + background-color: ${pressed}; + } + &: active { + background-color: ${pressed}; + } + `; + }} + + & + & { + margin-left: 16px; + } + + & > span { + font-size: 16px; + font-weight: ${({ theme }) => theme.fontWeight.medium}; + line-height: 1.448125; + margin-left: 4px; + } +`; + +export const ProfileEditButton = styled(DefaultButton)` + padding: 10px 24px 10px 20px; +`; + +export const UploadProductButton = styled(DefaultButton)` + padding: 10px 24px 10px 20px; +`; + +export const FollowButton = styled(DefaultButton)` + padding: 10px 16px; +`; + +export const MessageButton = styled(DefaultButton)` + padding: 10px 16px; +`; diff --git a/components/common/Atomic/Tabs/Keyword/index.ts b/components/common/Atomic/Tabs/Keyword/index.ts new file mode 100644 index 0000000..a7a73a8 --- /dev/null +++ b/components/common/Atomic/Tabs/Keyword/index.ts @@ -0,0 +1,16 @@ +import styled from 'styled-components'; + +export const Keyword = styled.span` + display: inline-block; + height: 24px; + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + font-weight: ${({ theme }) => theme.fontWeight.medium}; + line-height: 1.4166666; + + background-color: ${({ theme }) => theme.color.backgroundGray}; + + margin-right: 8px; + margin-bottom: 8px; +`; diff --git a/components/common/Atomic/Tabs/TabButton/index.ts b/components/common/Atomic/Tabs/TabButton/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/public/images/Message.svg b/public/images/Message.svg new file mode 100644 index 0000000..f9a863a --- /dev/null +++ b/public/images/Message.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/icon-add-round.svg b/public/images/icon-add-round.svg new file mode 100644 index 0000000..1d8f149 --- /dev/null +++ b/public/images/icon-add-round.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/icon-message.svg b/public/images/icon-message.svg new file mode 100644 index 0000000..f9a863a --- /dev/null +++ b/public/images/icon-message.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/profile-edit-write2.png b/public/images/profile-edit-write2.png new file mode 100644 index 0000000000000000000000000000000000000000..69f0f112a884b59edaa5066147107aad7fc741c6 GIT binary patch literal 424 zcmV;Z0ayNsP)P000>X1^@s6#OZ}&00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP_Nz0%_>H>vwxKzha6n|yh7PAylaSEIF;+3< znk}7)r|v~p*rpBH<)lAPLQwy2)c;?cQnHIT#eS%?!Jn4?R8I+jOK9spHA`2|!17*I S@M$Ul0000 + + + diff --git a/public/images/profile-edit.svg b/public/images/profile-edit.svg new file mode 100644 index 0000000..15ab526 --- /dev/null +++ b/public/images/profile-edit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/profile_off.svg b/public/images/profile_off.svg new file mode 100644 index 0000000..4aea2f9 --- /dev/null +++ b/public/images/profile_off.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/styles/style.d.ts b/styles/style.d.ts index d20cc7c..39037bb 100644 --- a/styles/style.d.ts +++ b/styles/style.d.ts @@ -14,6 +14,7 @@ declare module 'styled-components' { backgroundGray: '#eeeeee'; backgroundHoverGray: '#e0e0e0'; addTextGray: '#9e9e9e'; + gray_700: '#616161'; profileNameBlack: '#212121'; }; fontWeight: { diff --git a/styles/theme.ts b/styles/theme.ts index ef63524..55b4566 100644 --- a/styles/theme.ts +++ b/styles/theme.ts @@ -13,6 +13,7 @@ export const theme: DefaultTheme = { backgroundGray: '#eeeeee', //색깔 변수 이름 소통 필요 backgroundHoverGray: '#e0e0e0', addTextGray: '#9e9e9e', + gray_700: '#616161', profileNameBlack: '#212121', }, fontWeight: { From ed1d796a6786533162ecc5449a7efa13a1f0634c Mon Sep 17 00:00:00 2001 From: abg3000 Date: Wed, 27 Apr 2022 12:23:13 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=90=9B=20google=20font=20error=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/_app.tsx | 4 ---- pages/_document.tsx | 4 ++++ 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index 7f1102e..b33fb65 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -14,10 +14,6 @@ const MyApp = ({ Component, pageProps }: AppProps) => { <> - dreamIn diff --git a/pages/_document.tsx b/pages/_document.tsx index baf8fed..8de0d86 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -38,6 +38,10 @@ class MyDocument extends Document { +
From 41a2145a2db13346216ca38257abc4c4da800c86 Mon Sep 17 00:00:00 2001 From: abg3000 Date: Wed, 27 Apr 2022 14:36:46 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=E2=99=BB=203=EC=9E=90=EB=A6=AC=EB=A7=88?= =?UTF-8?q?=EB=8B=A4=20,=EC=82=BD=EC=9E=85=20util=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- utils/numberWithCommas.ts | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 utils/numberWithCommas.ts diff --git a/utils/numberWithCommas.ts b/utils/numberWithCommas.ts new file mode 100644 index 0000000..1d76b24 --- /dev/null +++ b/utils/numberWithCommas.ts @@ -0,0 +1,7 @@ +export const numberWithCommas = (num: number): string => { + let parts: number | string[] = num; + parts = parts.toString().split('.'); + return parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',') + (parts[1] ? '.' + parts[1] : ''); +}; + +//숫자를 넣으면 3자리마다 , 찍히고 소수점 2자리 까지 표현 From dc6ea369e20291d7024f36646355d75270f87fb5 Mon Sep 17 00:00:00 2001 From: abg3000 Date: Wed, 27 Apr 2022 17:40:03 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=E2=9C=A8=20=EC=9E=91=EC=97=85=EB=AC=BC,=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=9E=A9=20=EB=AA=A9=EB=A1=9D=20UI=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Layout/index.tsx | 8 ++- components/Profile/Banner/AddImage/index.tsx | 10 +-- components/Profile/Banner/AddImage/types.ts | 0 components/Profile/ItemList/index.tsx | 22 +++++- components/Profile/ItemList/styles.tsx | 7 +- components/Profile/UploadImage/index.tsx | 9 --- components/Profile/UserInfo/index.tsx | 9 +-- components/common/AddItemCard/index.tsx | 31 ++++++++ .../Atomic/AddItem/index.ts} | 0 .../common/Atomic/Tabs/TabButton/index.ts | 31 ++++++++ components/common/Thumbnail/index.tsx | 70 +++++++++++++++++++ pages/profile.tsx | 41 ++++++++++- public/images/icon-folder-add.svg | 4 ++ styles/style.d.ts | 6 ++ styles/theme.ts | 6 ++ 15 files changed, 228 insertions(+), 26 deletions(-) delete mode 100644 components/Profile/Banner/AddImage/types.ts delete mode 100644 components/Profile/UploadImage/index.tsx create mode 100644 components/common/AddItemCard/index.tsx rename components/{Profile/Banner/AddImage/styles.ts => common/Atomic/AddItem/index.ts} (100%) create mode 100644 components/common/Thumbnail/index.tsx create mode 100644 public/images/icon-folder-add.svg 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', },