Merge pull request #235 from Neogasogaeseo/feat/#233

공통 상단 네비게이션 만들기
Neogasogaeseo · Mar 13, 2022 · 844ea13 · 844ea13
2 parents 74384ba + c38e949
commit 844ea13
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 43 deletions.
diff --git a/src/assets/icons/ic_back.svg b/src/assets/icons/ic_back.svg
diff --git 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';

diff --git a/src/presentation/components/common/CommonNavigation/index.tsx b/src/presentation/components/common/CommonNavigation/index.tsx
@@ -0,0 +1,25 @@
+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 (
+    <StCommonNavigation>
+      {isBack && <StBack src={icBack} onClick={onClickBack ? onClickBack : () => navigate(-1)} />}
+      {title && <StTitle>{title}</StTitle>}
+      {submitButton && (
+        <StSubmitButton onClick={submitButton.onClick}>{submitButton.content}</StSubmitButton>
+      )}
+    </StCommonNavigation>
+  );
+}
diff --git a/src/presentation/components/common/CommonNavigation/style.ts 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;
+`;
diff --git 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 (
     <StTeamRegister>
       {isMemberSelectMode && <TeamMembers onClickSubmitButton={closeMembers} />}
-      <StTeamRegisterWrapper>
-        <StTitle>팀 등록하기</StTitle>
-        <StAbsoluteWrapper>
-          <PhotoUpload width="104px" height="104px" borderRadius="36px" setFile={setImage}>
-            <ImgTeamAdd />
-          </PhotoUpload>
-          {!image && <StIcPencil />}
-        </StAbsoluteWrapper>
-        <CommonLabel content="팀 이름" marginTop="32px" marginBottom="18px" />
-        <CommonInput
-          value={name}
-          width="100%"
-          placeholder="팀 이름을 입력해주세요"
-          onChange={(name) => setName(name)}
-        />
-        <CommonLabel content="팀에 관해 간략히 설명해주세요" marginTop="44px" />
-        <StTextarea
-          placeholder="설명을 입력해주세요"
-          value={description}
-          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
-        />
-        <CommonLabel content="팀원을 추가해주세요" marginTop="44px" marginBottom="18px" />
-        <ProfileList
-          isSquare={false}
-          profileList={[
-            { id: id, profileName: username, profileImage: profileImage ?? imgEmptyProfile },
-            ...selectedUserList,
-          ]}
-          onAddClick={() => setIsMemberSelectMode(true)}
-        />
-        <StSubmitButton
-          onClick={() => {
-            submitTeamInfo();
-            navigate('/home/team');
-          }}
-          isActive={name.length > 0}
-        >
-          완료
-        </StSubmitButton>
-      </StTeamRegisterWrapper>
+      <>
+        <CommonNavigation />
+        <StTeamRegisterWrapper>
+          <StTitle>팀 등록하기</StTitle>
+          <StAbsoluteWrapper>
+            <PhotoUpload width="104px" height="104px" borderRadius="36px" setFile={setImage}>
+              <ImgTeamAdd />
+            </PhotoUpload>
+            {!image && <StIcPencil />}
+          </StAbsoluteWrapper>
+          <CommonLabel content="팀 이름" marginTop="32px" marginBottom="18px" />
+          <CommonInput
+            value={name}
+            width="100%"
+            placeholder="팀 이름을 입력해주세요"
+            onChange={(name) => setName(name)}
+          />
+          <CommonLabel content="팀에 관해 간략히 설명해주세요" marginTop="44px" />
+          <StTextarea
+            placeholder="설명을 입력해주세요"
+            value={description}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(e.target.value)}
+          />
+          <CommonLabel content="팀원을 추가해주세요" marginTop="44px" marginBottom="18px" />
+          <ProfileList
+            isSquare={false}
+            profileList={[
+              { id: id, profileName: username, profileImage: profileImage ?? imgEmptyProfile },
+              ...selectedUserList,
+            ]}
+            onAddClick={() => setIsMemberSelectMode(true)}
+          />
+          <StSubmitButton
+            onClick={() => {
+              submitTeamInfo();
+              navigate('/home/team');
+            }}
+            isActive={name.length > 0}
+          >
+            완료
+          </StSubmitButton>
+        </StTeamRegisterWrapper>
+      </>
     </StTeamRegister>
   );
 }

diff --git 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;
 `;