[Node] Project - Header, Home

1. Header Component

Client

import { Image, Title, Subtitle, Button, Input } from "./Component"

import MORE_ICON from '../images/more.png'
import FACEBOOK_ICON from '../images/facebook-icon.png'
import HOME_ICON from '../images/home.png'
import YOUTUBE_ICON from '../images/youtube.png'
import PEOPLE_ICON from '../images/people.png'
import GAME_ICON from '../images/game.png'
import MENU_ICON from '../images/menu.png'
import ALARM_ICON from '../images/alarm.png'

export default function Header(props) {
  const onClickMenu = () => {
    console.log("menu click")
    if(props.onClick) {
        console.log("onclick call!!!!!")
        props.onClick()
    }
  }
  
  const onClickLogout = () => {
    alert("로그아웃 되었습니다.");
    window.location.href="/";
  }

  return (
    <div className="header">
      <div className="head-logo">
        <img src={FACEBOOK_ICON} alt="메인 로고 아이콘" />
        <input placeholder="Facebook 검색" />
      </div>
      <div className="head-nav">
        <nav className="">
          <MenuIcon src={HOME_ICON} name={"home"} tagname={props.name}/>
          <MenuIcon src={YOUTUBE_ICON} name={"video"} tagname={props.name}/>
          <MenuIcon src={PEOPLE_ICON} name={"people"} tagname={props.name}/>
          <MenuIcon src={GAME_ICON} name={"game"} tagname={props.name}/>
        </nav>
      </div>
      <div className='head-side'>
        <span className='btn-box' onClick={onClickMenu}>
            <img src={MENU_ICON} alt=""/>
        </span>
        <span className='btn-box'>
            <img src={ALARM_ICON} alt=""/>
        </span>
        <span className='btn-box'>
            <img src={MORE_ICON} alt="" onClick={onClickLogout}/>
        </span>
      </div>
    </div>
  )
}

const MenuIcon = (props) => {
  const {tagname, name, src} = props

  return <>
    <span className={`btn-box ${tagname === name ? "active" : " "}`} onClick={() => window.location.href = `/${name}`}>
      <img src={src} alt="" />
      <span className="btn-line"></span>
    </span>
  </>
}

2. Home

Client

import { Image, Title, Subtitle, Button, Input } from "./Component"
import Header from './Header.jsx'

import EDU_ICON from '../images/edu_icon.png'
import MORE_ICON from '../images/more.png'
import MAIN_IMAGE_1 from '../images/game-1.jpg'
import MAIN_IMAGE_2 from '../images/game-2.jpg'
import MAIN_IMAGE_3 from '../images/game-3.jpg'
import HOME_ICON from '../images/home.png'
import YOUTUBE_ICON from '../images/youtube.png'
import PEOPLE_ICON from '../images/people.png'
import axios from "axios"
import { useEffect, useState } from "react"

export default function Home(props) {
  const [array, setArray] = useState("");

  // 이 홈이라는 것이 생성될 떄 딱 한번(didmount와 같은)
  useEffect(() => {
    axios.get("/api/home", {}).then((res) => {
      // console.log(res.data);
      setArray(res.data.result)
    })
  }, [])

  const onRefreshHome = () => {
    console.log("onfresh")
    axios.get("/api/home", {}).then((res) => {
      // console.log(res.data);
      setArray(res.data.result)
    })
  }

  // const value = {title, subtitle, tags, url, text}
  return (
    <>
      <Header name="home" />

      <section className="home-layer">
        <ul className="list">
          {array && array.map((item, index) => {
            return <CardBox key={item.no} value={item} onRefresh={onRefreshHome}/>
          })}
        </ul>
      </section>
    </>
  )
}

const CardBox = (props) => {
  const {no, likecount, title, subtitle, tags, url, text, image} = props.value

  const onClickLike = () => {
    // console.log(props.value)
    axios.put("/api/home/like", {no: no, like: 1}).then(res => {
      props.onRefresh();
    })
  }

  const onClickComment = () => {

  }
  return <li>
    <div className="card">
      <div className="head">
        <div>
          <Image src={EDU_ICON} alt="광고 아이콘" />
          <span className="title">{title}</span>
          <Image className="more" src={MORE_ICON} alt="더보기 메뉴" />
        </div>
        <div className="text">
          <p>{subtitle}</p>
          <p className="blue">{tags}</p>
        </div>
      </div>
      <div className="body">
        <div className="image">
          <Image src={image} alt="광고 메인 이미지" />
        </div>
        <div className="text">
          <div>
            <p className="grey sm">{url}</p>
            <p className="bold">{text}</p>
            <p className="grey"></p>
          </div>
          <button>더 알아보기</button>
        </div>
      </div>
      <div className="foot">
        <div className="btn-box active">
          <div>
            <Image src={HOME_ICON} alt="홈 바로가기" />
            <span className="btn-text" onClick={onClickLike}>좋아요({likecount})</span>
          </div>
        </div>
        <div className="btn-box">
          <div>
            <Image src={YOUTUBE_ICON} alt="동영상 바로가기" />
            <span className="btn-text" onClick={onClickComment}>댓글 달기</span>
          </div>
        </div>
        <div className="btn-box">
          <div>
            <Image src={PEOPLE_ICON} alt="사용자 바로가기" />
            <span className="btn-text">공유 하기</span>
          </div>
        </div>
      </div>
    </div>
  </li>
}

Server

const express = require("express");
const path = require("path");
const app = express();

// 메인 페이지 접속시 html 응답하는 방법

// 미들웨어 : html, css, js, img 파일들이 담긴 곳 명시
app.use(express.static(path.join(__dirname, "public")))

app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, 'public/index.html'))
})

// Body로 파라미터를 받기 위한 설정
const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({extended: false}))
app.use(bodyparser.json())

const api = require("./src/api/index");
app.use("/api", api);

const http = require("http").createServer(app);
http.listen(8080, () => {
    console.log("server listen start : 8080")
})

// 데이터를 배열로 안에 값은 JSON 데이터로
const array = [
    {
      no: 1,
      title: "에듀윌",
      subtitle: "🚨기간한정 특별 이벤트🚨 초시생 필수템, 만화입문서 무료배포!",
      tags: "#합격자수1위 #에듀윌 #공인중개사",
      url: "EDUWILL.NET",
      text: "입문교재 선착순 무료신청☞ 합격자 수 1위 에듀윌 공인중개사",
      image: "/images/game-1.jpg",
      likecount: 1
    },
    {
      no: 2,
      title: "코리아아이티",
      subtitle: "🚨기간한정 특별 이벤트🚨 프론트엔드 5개월차 수업!",
      tags: "#합격자수1위 #에듀윌 #공인중개사",
      url: "KOREATIT.NET",
      text: "녹화 동영상 무료 제공! ☞ 합격자 수 1위 에듀윌 공인중개사",
      image: "/images/game-2.jpg",
      likecount: 2
    },
    {
      no: 3,
      title: "코리아아이티aaaa",
      subtitle: "🚨기간한정 특별 이벤트🚨 aaaaaaa!",
      tags: "#합격자수1위 #에듀윌 #공인중개사",
      url: "KOREATIT.NET",
      text: "aaaaaaaaaaaaa! ☞ 합격자 수 1위 에듀윌 공인중개사",
      image: "/images/game-3.jpg",
      likecount: 3
    }
]

router.get("/home", (req, res) => {
    console.log("===================> [GET]/api/home call!!!");
    console.log(req.query)

    res.send({result: array})
})

router.put("/home/like", (req, res) => {
    console.log("===================> [PUT]/api/home/like call!!!");
    console.log(req.body)

    const {no, like} = req.body;

    const data = array.find(item => item.no === no);
    data.likecount = data.likecount + like

    console.log(array)

    res.send({result: "success"});
})