[🎨 Style] TopNav 공통 컴포넌트 세팅작업 #2

FRONTENDSCHOOL5 · Jun 10, 2023 · 332af65 · 332af65
1 parent a13efee
commit 332af65
Showing 1 changed file with 51 additions and 32 deletions.
diff --git a/src/components/Common/TopNav.jsx b/src/components/Common/TopNav.jsx
@@ -1,9 +1,9 @@
-import React, { useState } from "react";
-import styled from "styled-components";
-import SearchIcon from "../../assets/img/icon-search.svg";
-import ArrowIcon from "../../assets/img/icon-arrow-left.svg";
-import MoreIcon from "../../assets/img/icon- more-vertical.svg";
-import { ButtonStyle } from "./ButtonStyle";
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import SearchIcon from '../../assets/img/icon-search.svg';
+import ArrowIcon from '../../assets/img/icon-arrow-left.svg';
+import MoreIcon from '../../assets/img/icon- more-vertical.svg';
+import { ButtonStyle } from './Button';
 
 //메인, 클래스 타이틀 nav
 const MainNav = styled.div`
@@ -141,59 +141,59 @@ function MainNavigation({ title }) {
   return (
     <MainNav>
       <NavTitle>만들만들 {title}</NavTitle>
-      <Image className="search" src={SearchIcon} alt="검색하기 아이콘" />
+      <Image className='search' src={SearchIcon} alt='검색하기 아이콘' />
     </MainNav>
   );
 }
 
 function SearchNavigation() {
   return (
     <SearchBackNav>
-      <Image src={ArrowIcon} alt="뒤로가기 아이콘" />
-      <label htmlFor="search-input" />
-      <Input id="search-input" type="text" placeholder="계정 검색" />
+      <Image src={ArrowIcon} alt='뒤로가기 아이콘' />
+      <label htmlFor='search-input' />
+      <Input id='search-input' type='text' placeholder='계정 검색' />
     </SearchBackNav>
   );
 }
 
 function MoreNavigation() {
   return (
     <MoreBackNav>
-      <Image src={ArrowIcon} alt="뒤로가기 아이콘" />
-      <Image className="more-icon" src={MoreIcon} alt="더보기 아이콘" />
+      <Image src={ArrowIcon} alt='뒤로가기 아이콘' />
+      <Image className='more-icon' src={MoreIcon} alt='더보기 아이콘' />
     </MoreBackNav>
   );
 }
 
 function ArrowLeftNavigation() {
   return (
     <ArrowLeft>
-      <Image src={ArrowIcon} alt="뒤로가기 아이콘" />
+      <Image src={ArrowIcon} alt='뒤로가기 아이콘' />
     </ArrowLeft>
   );
 }
 
 function SearchBar() {
   return (
     <SearchNav>
-      <Image className="search" src={SearchIcon} alt="검색하기 아이콘" />
+      <Image className='search' src={SearchIcon} alt='검색하기 아이콘' />
     </SearchNav>
   );
 }
 
 function UploadButton() {
   return (
     <BackButtonNav>
-      <Image src={ArrowIcon} alt="뒤로가기 아이콘" />
+      <Image src={ArrowIcon} alt='뒤로가기 아이콘' />
       <ButtonStyle
-        type="button"
-        bg="#036635"
-        width="90px"
-        height="32px"
-        br="32px"
-        color="#ffffff"
-        fontsize="14px"
-        margin="0 16px 0 0"
+        type='button'
+        bg='#036635'
+        width='90px'
+        height='32px'
+        br='32px'
+        color='#ffffff'
+        fontsize='14px'
+        margin='0 16px 0 0'
       >
         업로드
       </ButtonStyle>
@@ -204,19 +204,38 @@ function UploadButton() {
 function DisabledUploadButton() {
   return (
     <BackButtonNav>
-      <Image src={ArrowIcon} alt="뒤로가기 아이콘" />
+      <Image src={ArrowIcon} alt='뒤로가기 아이콘' />
       <ButtonStyle
-        type="button"
-        bg="#b1d4c3"
-        width="90px"
-        height="32px"
-        br="32px"
-        color="#ffffff"
-        fontsize="14px"
-        margin="0 16px 0 0"
+        type='button'
+        bg='#b1d4c3'
+        width='90px'
+        height='32px'
+        br='32px'
+        color='#ffffff'
+        fontsize='14px'
+        margin='0 16px 0 0'
       >
         업로드
       </ButtonStyle>
     </BackButtonNav>
   );
 }
+
+function TopNavs({ name }) {
+  const [title, setTitle] = useState(name);
+
+  return (
+    <>
+      <MainNavigation title={title} />
+      <SearchNavigation />
+      <MainNavigation title={title} />
+      <MoreNavigation />
+      <ArrowLeftNavigation />
+      <SearchBar />
+      <UploadButton />
+      <DisabledUploadButton />
+    </>
+  );
+}
+
+export default TopNavs;