From 82233b88c4909e3054aa23c5d5b4e76d96e9a73f Mon Sep 17 00:00:00 2001 From: jynam Date: Sun, 13 Mar 2022 16:55:01 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=93=9D=20chore:=20=EB=92=A4=EB=A1=9C?= =?UTF-8?q?=20=EA=B0=80=EA=B8=B0=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/ic_back.svg | 4 ++-- src/assets/icons/index.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/assets/icons/ic_back.svg b/src/assets/icons/ic_back.svg index 9989dee1..eb81b631 100644 --- a/src/assets/icons/ic_back.svg +++ b/src/assets/icons/ic_back.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 56eb3664..2452d084 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -6,6 +6,7 @@ export { default as icBookmarkSelected } from './ic_bookmark_selected.svg'; export { default as icBookmarkUnselected } from './ic_bookmark_unselected.svg'; export { default as icSearch } from './ic_search.svg'; export { ReactComponent as IcBack } from './ic_back.svg'; +export { default as icBack } from './ic_back.svg'; export { ReactComponent as IcDelete } from './ic_delete.svg'; export { default as icMemberAdd } from './ic_member_add.svg'; export { default as icMemberAdded } from './ic_member_added.svg'; From 188d90526e7cdca6c97c9836c29add93dfd8a360 Mon Sep 17 00:00:00 2001 From: jynam Date: Sun, 13 Mar 2022 16:55:32 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20feat:=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EB=A7=8C=EB=93=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/CommonNavigation/index.tsx | 27 ++++++++++++++ .../common/CommonNavigation/style.ts | 37 +++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 src/presentation/components/common/CommonNavigation/index.tsx create mode 100644 src/presentation/components/common/CommonNavigation/style.ts diff --git a/src/presentation/components/common/CommonNavigation/index.tsx b/src/presentation/components/common/CommonNavigation/index.tsx new file mode 100644 index 00000000..19399039 --- /dev/null +++ b/src/presentation/components/common/CommonNavigation/index.tsx @@ -0,0 +1,27 @@ +import { useNavigate } from 'react-router-dom'; + +import { icBack } from '@assets/icons'; +import { StBack, StCommonNavigation, StSubmitButton, StTitle } from './style'; + +interface CommonNavigationProps { + isBack?: boolean; + onClickBack?: () => void; + title?: string; + submitButton?: { content: string; onClick: () => void }; +} + +export default function CommonNavigation(props: CommonNavigationProps) { + const { isBack = true, onClickBack, title, submitButton } = props; + const navigate = useNavigate(); + return ( + + {isBack && navigate(-1)} />} + {title && {title}} + {submitButton && ( + + {submitButton && submitButton.content} + + )} + + ); +} diff --git a/src/presentation/components/common/CommonNavigation/style.ts b/src/presentation/components/common/CommonNavigation/style.ts new file mode 100644 index 00000000..cdade016 --- /dev/null +++ b/src/presentation/components/common/CommonNavigation/style.ts @@ -0,0 +1,37 @@ +import { COLOR } from '@styles/common/color'; +import { FONT_STYLES } from '@styles/common/font-style'; +import styled from 'styled-components'; + +export const StCommonNavigation = styled.div` + width: 100%; + height: 44px; + position: relative; + & > * { + position: absolute; + } +`; + +export const StBack = styled.img` + margin-left: 14px; +`; + +export const StTitle = styled.div` + top: 14px; + left: 50%; + transform: translate(-50%, 0%); + ${FONT_STYLES.SB_17_TITLE} + line-height: 100%; + letter-spacing: -0.01em; + color: ${COLOR.GRAY_8}; +`; + +export const StSubmitButton = styled.button` + top: 14.33px; + right: 0; + margin-right: 14.33px; + ${FONT_STYLES.M_15_TITLE} + line-height: 100%; + letter-spacing: -0.01em; + color: ${COLOR.CORAL_MAIN}; + background-color: transparent; +`; From 0678f6188db607d83bdfa905f04ef6627f687591 Mon Sep 17 00:00:00 2001 From: jynam Date: Sun, 13 Mar 2022 16:56:13 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9C=A8=20feat:=20=ED=8C=80=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=EB=B7=B0=EC=97=90=20=EB=84=A4=EB=B9=84=EA=B2=8C?= =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Team/Register/index.tsx | 84 ++++++++++--------- src/presentation/pages/Team/Register/style.ts | 2 +- 2 files changed, 45 insertions(+), 41 deletions(-) diff --git a/src/presentation/pages/Team/Register/index.tsx b/src/presentation/pages/Team/Register/index.tsx index 9ad7ee07..77906df5 100644 --- a/src/presentation/pages/Team/Register/index.tsx +++ b/src/presentation/pages/Team/Register/index.tsx @@ -20,6 +20,7 @@ import { useLoginUser } from '@hooks/useLoginUser'; import { api } from '@api/index'; import { useState } from 'react'; import { useEffect } from 'react'; +import CommonNavigation from '@components/common/CommonNavigation'; function TeamRegister() { const [isMemberSelectMode, setIsMemberSelectMode] = useState(false); @@ -53,46 +54,49 @@ function TeamRegister() { return ( {isMemberSelectMode && } - - 팀 등록하기 - - - - - {!image && } - - - setName(name)} - /> - - ) => setDescription(e.target.value)} - /> - - setIsMemberSelectMode(true)} - /> - { - submitTeamInfo(); - navigate('/home/team'); - }} - isActive={name.length > 0} - > - 완료 - - + <> + + + 팀 등록하기 + + + + + {!image && } + + + setName(name)} + /> + + ) => setDescription(e.target.value)} + /> + + setIsMemberSelectMode(true)} + /> + { + submitTeamInfo(); + navigate('/home/team'); + }} + isActive={name.length > 0} + > + 완료 + + + ); } diff --git a/src/presentation/pages/Team/Register/style.ts b/src/presentation/pages/Team/Register/style.ts index 1bc56178..942dd768 100644 --- a/src/presentation/pages/Team/Register/style.ts +++ b/src/presentation/pages/Team/Register/style.ts @@ -24,7 +24,7 @@ export const StTitle = styled.div` font-weight: 600; font-size: 24px; color: ${COLOR.GRAY_8}; - margin-top: 42px; + margin-top: 68px; margin-bottom: 30px; `; From c38e9493502efc5d2bd77b5e213222477e1c8f07 Mon Sep 17 00:00:00 2001 From: jynam Date: Mon, 14 Mar 2022 01:50:07 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=93=9D=20chore:=20=EC=93=B8=EB=AA=A8?= =?UTF-8?q?=EC=97=86=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/presentation/components/common/CommonNavigation/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/presentation/components/common/CommonNavigation/index.tsx b/src/presentation/components/common/CommonNavigation/index.tsx index 19399039..5e284efc 100644 --- a/src/presentation/components/common/CommonNavigation/index.tsx +++ b/src/presentation/components/common/CommonNavigation/index.tsx @@ -18,9 +18,7 @@ export default function CommonNavigation(props: CommonNavigationProps) { {isBack && navigate(-1)} />} {title && {title}} {submitButton && ( - - {submitButton && submitButton.content} - + {submitButton.content} )} );