항해 99 - 2022.02.18.FRI (드롭다운 )

이번 챕터 일정

• 02/18 (금) 19:00 까지 : 클론 코딩 주차 S.A. 제출 ✅
• 02/21 (월) 저녁 : 클론 코딩 주차 중간 멘토링
• 02/22 (화) ~ 02/23 (수): 담당 매니저와 1:1 선택 면담
• 02/23 (수) 10:00 ~ 21:00 : 리더/부리더 신청 & 다면평가 진행
• 02/24 (목) 10:00 ~ 21:00 : 알고리즘 스터디 신청
• 02/24 (목) 오후 : 리더/부리더 선별 면담
• 02/24 (목) 19:00 까지 : 클론 코딩 완성본 제출
• 02/24 (목) 저녁 : 클론 코딩 주차 회고 멘토링
• 02/25 (금) 09:00 : 실전 프로젝트 주차 발제

오늘 내가 할 일 

• 헤더 뷰 작업 ✅ 

이번에 맡은 부분

• 헤더 (드롭다운& 로그인시 변경)
• 모달 창 (웹페이지 전반에 걸친 모달 창)
• 로그인 회원가입 기능

아직 기능을 하기엔 너무 먼 이야기
이번에 한번도 안 해본 기능이 많아서 걱정이다. 
회원가입이며 로그인이며,,,생각할게 너무 많아졌다 

 

<드롭다운>

const DropDown = (props)=>{

const dropdownRef = useRef(null);
  //드롭되어있는지 여부 확인하기 위함
  const [isActive, setIsActive] = useState(false);
  const onSetIsVisible =(active)=>{
    setIsActive(active)
  }

  return (
    <div className="container">
      <div className="menu-container">
        <Button onClick={()=> setIsActive(!isActive)} className="menu-trigger">
        <svg
              viewBox="0 0 32 32"
              style={{
                display: "block",
                fill: "none",
                height: "16px",
                width: "16px",
                stroke: "#222222",
                strokeWidth: "3",
                overflow: "visible",
                padding: "0px 10px 0px 0px",
              }}>
              <g fill="none" fillRule="nonzero">
                <path d="m2 16h28"></path>
                <path d="m2 24h28"></path>
                <path d="m2 8h28"></path>
              </g>
            </svg> 
          <svg
              viewBox="0 0 32 32"
              style={{
                display: "block",
                height: "100%",
                width: "100%",
                fill: "#222222",
              }}
            >
              <path d="m16 .7c-8.437 0-15.3 6.863-15.3 15.3s6.863 15.3 15.3 15.3 15.3-6.863 15.3-15.3-6.863-15.3-15.3-15.3zm0 28c-4.021 0-7.605-1.884-9.933-4.81a12.425 12.425 0 0 1 6.451-4.4 6.507 6.507 0 0 1 -3.018-5.49c0-3.584 2.916-6.5 6.5-6.5s6.5 2.916 6.5 6.5a6.513 6.513 0 0 1 -3.019 5.491 12.42 12.42 0 0 1 6.452 4.4c-2.328 2.925-5.912 4.809-9.933 4.809z"></path>
            </svg>
        </Button>
        <nav
          ref={dropdownRef}
          className={`menu ${isActive ? "active" : "inactive"}`}
        >
          <ul>
            <li>
              <a >로그인</a>
            </li>
            <li>
              <a >회원가입</a>
            </li>
            <li>
              <a>필터모달</a>
            </li>
            <li>
              <a>댓글모달</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  );
}

//드롭다운 css

.menu-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .menu-trigger:hover {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  }
  
  .menu-trigger span {
    font-weight: 700;
    vertical-align: middle;
    font-size: 14px;
    margin: 0 10px;
  }
  
  .menu-trigger img {
    border-radius: 90px;
  }
  
  .menu {
    background: #ffffff;
    border-radius: 8px;
    position: absolute;
    top: 60px;
    right: 0;
    width: 200px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    z-index: 999;
  }
  
  .menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .menu li {
    border-bottom: 1px solid #dddddd;
  }
  
  .menu li a {
    text-decoration: none;
    color: #333333;
    padding: 15px 20px;
    display: block;
    cursor: pointer;
    text-align: center;
  }