next+ts 5일차 MYPAGE NAVBAR FIRSTFORM

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

오늘은 이것저것 많이 수정했습니다. 마이페이지도 만들고 어제만든것도 input으로 변경하고 네브바에 로그인 관련없어서 추가했고요. 마이페이지도 만들었어요.

mypage는  특별한거 없고 css에서 after을쓰니까 다음에 드가는게 아니라 해당 요소 내부에서 가장 아래에 들어가더라고요 그요소에 display flex 를 해버려서 위치 조절이 잘안되서 그냥 <hr>을 사용해서 줄을 만들었습니다.

 

id 페이지는 어제꺼 그대로 복 붙했고 나중에 저장된 데이터를 자동으로 넣어주게 만들겠습니다.

import { NextPage } from "next";

const FirstForm: NextPage = () => {

  return (

    <div>

      <div className="section">

        <h1 className="title">

          <input className="titleinput" placeholder="약속이름 작성" />

        </h1>

        <div className="time">

          <div className="timetitle">약속 시간</div>

          <div className="timecontent">

            <input type="date" className="timedateinput" />

            <input type="time" className="timetimeinput" />

          </div>

        </div>

        <div className="mapinfo">

          <div className="map">

            <iframe

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

              width="350"

              height="350"

              loading="lazy"

            ></iframe>

          </div>

          <div className="mapdes">

            지도에

            <h3>

              <input

                className="mapdesinput"

                placeholder="주소 또는 장소 이름 작성"

              />

            </h3>

            검색해주세요

          </div>

        </div>

        <div className="content">

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

          <div className="condes">

            <textarea className="condesinput" placeholder="세부내용 작성" />

          </div>

        </div>

        <input className="tagsinput" />

        <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 > .title > .titleinput {

            font-size: 28px;

            text-align: center;

            font-weight: bolder;

            width: 350px;

          }

          .scetion > .time {

            width: 100%;

          }

          .section > .time > .timetitle {

            font-size: 28px;

            font-weight: bolder;

            width: 350px;

            text-align: center;

            margin: 2%;

            display: flex;

            flex-direction: column;

          }

          .section > .time > .timetitle::after {

            content: " ";

            border: 1px solid #636beb;

            width: 90%;

            margin: auto;

          }

          .section > .time > .timecontent {

            font-size: 28px;

            font-weight: bolder;

            width: 350px;

            text-align: center;

            display: flex;

            justify-content: space-around;

            margin: 2%;

          }

          .section > .time > .timecontent > * {

            font-size: 18px;

            font-weight: bolder;

          }

          .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 > .mapinfo > .mapdes > h3 > .mapdesinput {

            font-size: 20px;

            text-align: center;

            font-weight: bolder;

          }

          .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 > .content > .condes > .condesinput {

            text-align: center;

            font-weight: bolder;

            font-size: 18px;

            margin: 1%;

            width: 80%;

            height: 100px;

          }

          .tagsinput {

            width: 350px;

            font-size: 18px;

          }

          .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;

어제 만든 firstform은 input태그를 필요한곳에 넣어주고 placeholder로 옅은 글씨로 주의사항을 보이게해줬습니다.

nav bar는 login을 가장 오른쪽에 넣고  삼항연산자로 로그인했으면 로그인 아니면 로그아웃 할려고 일단 저렇게 놔뒀습니다. 나중에는 Link 태그전체를 삼항연산자로 묶을 생각입니다.