next+ts 4일차 first form 만들기

유튜브: https://www.youtube.com/watch?v=lu90np9hZVw 
깃허브:https://github.com/qjawns0222/caremaker/tree/4%EC%9D%BC%EC%B0%A8-next+ts 

오늘은 FirstForm 을 만들엇어요 이상태에서 조작할수 있는부분에 input태그로 변경해줄꺼에요

import { NextPage } from "next";

const FirstForm: NextPage = () => {

  return (

    <div>

      <div className="section">

        <h1 className="title">노래방 가자</h1>

        <div className="mapinfo">

          <div className="map">

            <iframe

              src="https://m.map.kakao.com/"

              width="350"

              height="550"

              loading="lazy"

            ></iframe>

          </div>

          <div className="mapdes">

            지도에

            <h3>&#34;노래방dasdsadsadsada&#34;</h3>

            검색해주세요

          </div>

        </div>

        <div className="content">

          <h3 className="contitle">계획</h3>

          <div className="condes">어디서 만나서 뭐하고 놀자</div>

        </div>

        <div className="tags">

          <div className="tag">놀자</div>

          <div className="tag">놀자</div>

          <div className="tag">놀자</div>

        </div>

      </div>

      <style jsx>

        {`

          .section {

            display: flex;

            align-items: center;

            flex-direction: column;

            min-height: 900px;

            background-color: #f5b467;

          }

          .section > .title {

            margin: 1%;

            color: #196aff;

          }

          .section > .mapinfo {

            border: 5px solid #636beb;

            border-radius: 10px;

            max-width: 354px;

            margin: 1%;

          }

          .section > .mapinfo > .map {

            background-color: whitesmoke;

          }

          .section > .mapinfo > .mapdes {

            font-size: 20px;

            text-align: center;

            padding: 1%;

            background-color: whitesmoke;

          }

          .section > .content {

            min-width: 350px;

            display: flex;

            flex-direction: column;

            margin: 1%;

            border: 3px solid #636beb;

            background-color: #eab7f5;

          }

          .section > .content > .contitle {

            text-align: center;

            color: #196aff;

            font-size: 28px;

            width: 100%;

            display: flex;

            flex-direction: column;

          }

          .section > .content > .contitle::after {

            content: " ";

            border: 1px solid #636beb;

            width: 80%;

            margin: auto;

          }

          .section > .content > .condes {

            text-align: center;

            font-weight: bolder;

            font-size: 18px;

            width: 100%;

          }

          .section > .tags {

            width: 350px;

            display: flex;

            flex-flow: wrap;

            justify-content: center;

          }

          .section > .tags > .tag {

            border: 1px solid #636beb;

            border-radius: 16px;

            margin: 1%;

            padding: 1%;

            background-color: #636beb;

            font-weight: bolder;

            color: whitesmoke;

          }

          .section > .tags > .tag::before {

            content: "#";

          }

        `}

      </style>

    </div>

  );

};

export default FirstForm;

오늘은 특별한건느 html에  지도 넣는건데 html로 해서 특정 위치만 넣는것도 있는데 저는 페이지마다 지정해줘야되서 특정위치 넣는건 힘들것 같더라고요. 일단은 iframe으로 구글 네이버 다음 중에 다음지도가 각장 편하게 사용할수 잇을거 같아서 다음지도를 넣어줬습니다. 

 

나중에는  여기에다가 엔터칠때마다 태그 추가되는거 한번 해보겠습니다.