[5주차] diaMEtes 미션 제출합니다.

package.json

@@ -17,6 +17,7 @@
     "next": "13.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "styled-components": "^5.3.6",
     "typescript": "4.8.4"
   },
   "devDependencies": {

src/assets/FooterInfo.json

@@ -0,0 +1,27 @@
+[
+    {
+        "id":0,
+        "name":"Home",
+        "alt":"home"
+    },
+    {
+        "id":1,
+        "name":"Search",
+        "alt":"search"
+    },
+    {
+        "id":2,
+        "name":"Comingsoon",
+        "alt":"comingsoon"
+    },
+    {
+        "id":3,
+        "name":"Downloads",
+        "alt":"downloads"
+    },
+    {
+        "id":4,
+        "name":"More",
+        "alt":"more"
+    }
+]

src/components/common/Footer.tsx

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import FooterItem from './FooterItem';
+import FooterInfo from "../../assets/FooterInfo.json"
+import { useRouter } from "next/router";
+
+export default function Footer(){
+    const router = useRouter();
+    const footerInfo = FooterInfo;
+
+    return(
+        <Container>
+            {
+                footerInfo.map((f)=>{
+                    const select = router.pathname === '/'+f.alt;
+                    return (
+                        <FooterItem
+                            key={f.id}
+                            alt={f.alt}
+                            name={f.name}
+                            selected = {select}
+                        />
+                    )
+                })
+            }
+        </Container>
+    );
+};
+
+const Container = styled.div`
+    position : fixed;
+
+    // 중앙 정렬
+    left: 50%;
+    transform: translate(-50%, 0);
+
+    bottom: 0;
+
+    width: 375px;
+    height: 48px;
+
+    display: flex;
+    justify-content: space-evenly;
+`

src/components/common/FooterItem.tsx

@@ -0,0 +1,50 @@
+import { IFooter } from "../../interfaces/interface"
+import Image from 'next/image';
+import styled from 'styled-components';
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export default function FooterItem({alt,name,selected}:IFooter){
+    let src = '';
+    if (selected){
+        src = '/img/Footer/'+name+'.png'
+    }else{
+        src = '/img/Footer/'+name+'-2.png'
+    }
+
+    return (
+        <Container>
+            <StyledButton select = {selected}>
+                <Image
+                    alt={alt}
+                    src={src}
+                    width={25}
+                    height={25}
+                />
+                <StyledFont>
+                    {name}
+                </StyledFont>
+            </StyledButton>
+        </Container>
+    )
+}
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+`
+
+const StyledFont = styled.div`
+    font-size: 8.2px;
+`
+
+const StyledButton = styled.button<{select : boolean}>`
+    border: 0;
+    outline: 0;
+    background: black;
+    color: #8C8787;
+    color: ${
+        ({select}) => (select? 'white' : '#8C8787')
+    }
+`

src/interfaces/interface.tsx

@@ -0,0 +1,5 @@
+export interface IFooter{
+    alt: string;
+    name: string;
+    selected: boolean;
+}

src/pages/home/index.tsx

@@ -1,7 +1,20 @@
+import Footer from "../../components/common/Footer"
+import styled from 'styled-components'
+
 export default function Home(){
     return (
-        <>
+        <Container>
             home
-        </>
+            <Footer/>
+        </Container>
     )
-};
+};
+
+const Container = styled.div`
+    background: blue;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 375px;
+
+`