[프로젝트 1차] Cha.Dam.Hwa (3/6 - 7일차)

프로젝트 1차 표지

---

1. 회원가입 모달창 만들기 

1차 프로젝트 7일차 , 오늘은 회원가입 페이지로 모달창 만들기에 돌입했다. 하지만, 시련은 또 찾아왔다. 모달창을 만드는 것이 아직은 어렵다는 판단이 섰다. 그래서 1차 프로젝트인 지금은 모달창이 아닌 그냥 페이지로 만들기로 방향을 수정했다. 회원가입 페이지를 만드는 것은 로그인 페이지를 만드는 것과 비슷했다. 아래는 실제로 구현된 회원가입 페이지이다.

---

회원가입 구현 완성

☑️ HTML - select와 option 태그

select 태그

• 아래로 펼치지는 목록 상자
• 드롭다운 메뉴 또는 리스트박스를 만들 수 있음

option 태그

• HTML select 태그 내부의 항목
• HTML에서 드롭다운 메뉴의 항목

<div className="wrap">
  <span className="key">술담화를 어떻게 아셨나요?</span>
  <select>
    <option value="">선택해주세요</option>
    <option value="">지인소개</option>
    <option value="">블로그</option>
    <option value="">인스타그램</option>
    <option value="">페이스북</option>
    <option value="">유투브</option>
    <option value="">검색</option>
    <option value="">기사 / 언론</option>
    <option value="">기타</option>
   </select>
</div>

☑️ 버튼 활성화 작업 ① (style class)

<button 
    onClick={mainCondition} 
    className={SignupValid ? 'btn-active' : 'btn-die'}>
    가입완료
</button>

☑️ 버튼 활성화 작업 ② (활성화 위한 조건들)

function Signup() {
  const [signupEmail, setSignUpEmail] = useState('');
  const [signupPw, setSignUpPw] = useState('');
  const [signupRePw, setSignUpRePw] = useState('');
  const [signupName, setSignUpName] = useState('');
  const [signupAddress, setSignUpAddress] = useState('');
  const navigate = useNavigate();

  const SignupValid =
    signupEmail.includes('@') &&
    signupPw.length > 5 &&
    signupPw === signupRePw &&
    signupName.length > 1 &&
    signupAddress.length > 1;
}

---

2. 배너 자동 슬라이드 구현

전 날, 수동 슬라이드를 구현했었다. 하지만, 자동 슬라이드로 구현하는게 더 좋을 것 같아서 자동 슬라이드 기능으로 변경했다.
자동 슬라이드 기능으로 구현하면, 버튼을 눌러도 넘어가진다. 수동 슬라이드는 버튼을 눌러야만 움직여진다.
총 4개의 배너를 넣었을 때, 아래와 같은 코드를 사용하면 자동 슬라이드 기능을 구현할 수 있다. 유투브에 "코딩하는 남자" 채널을 보고 공부해서 작성했다. 수동슬라이드도, 자동슬라이드도 많이 어려웠다. 처음 사용해보는 코드들이여서 더 어렵게 느껴졌다.

---

function Figure() {
  return (
    <figure className="figure">
      <input className="btn" type="radio" name="slide" id="slide01" checked />
      <input className="btn" type="radio" name="slide" id="slide02" checked />
      <input className="btn" type="radio" name="slide" id="slide03" checked />
      <input className="btn" type="radio" name="slide" id="slide04" checked />
      <ul className="slide-list">
        <li className="slide-item">
          <a href="/">
            <label htmlFor="slide04" className="prev" />
            <img src="/images/banner4.png" alt="event banner" />
            <label htmlFor="slide02" className="next" />
          </a>
        </li>
        <li className="slide-item">
          <a href="/">
            <label htmlFor="slide01" className="prev" />
            <img src="/images/banner3.png" alt="event banner" />
            <label htmlFor="slide03" className="next" />
          </a>
        </li>
        <li className="slide-item">
          <a href="/">
            <label htmlFor="slide02" className="prev" />
            <img src="/images/banner2.png" alt="event banner" />
            <label htmlFor="slide04" className="next" />
          </a>
        </li>
        <li className="slide-item">
          <a href="/">
            <label htmlFor="slide03" className="prev" />
            <img src="/images/banner1.png" alt="event banner" />
            <label htmlFor="slide01" className="next" />
          </a>
        </li>
      </ul>
    </figure>
  );
}

input[name='slide'] {
    display: none;
  }
  [id='slide01']:checked ~ .slide-list .slide-item {
    transform: translateX(0);
    animation: slide01 20s infinite;
  }

  [id='slide02']:checked ~ .slide-list .slide-item {
    transform: translateX(-100%);
    animation: slide02 20s infinite;
  }

  [id='slide03']:checked ~ .slide-list .slide-item {
    transform: translateX(-200%);
    animation: slide03 20s infinite;
  }

  [id='slide04']:checked ~ .slide-list .slide-item {
    transform: translateX(-300%);
    animation: slide04 20s infinite;
  }

  [id='slide05']:checked ~ .slide-list .slide-item {
    transform: translateX(-400%);
    animation: slide05 20s infinite;
  }
}

@keyframes slide01 {
  0% {
    left: 0%;
  }
  33% {
    left: 0%;
  }
  34% {
    left: -100%;
  }
  66% {
    left: -100%;
  }
  67% {
    left: -200%;
  }
  99% {
    left: -200%;
  }
  100% {
    left: 0%;
  }
}

@keyframes slide02 {
  0% {
    left: 0%;
  }
  33% {
    left: 0%;
  }
  34% {
    left: -100%;
  }
  66% {
    left: -100%;
  }
  67% {
    left: 100%;
  }
  99% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}

@keyframes slide03 {
  0% {
    left: 0%;
  }
  33% {
    left: 0%;
  }
  34% {
    left: 200%;
  }
  66% {
    left: 200%;
  }
  67% {
    left: 100%;
  }
  99% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}

@keyframes slide04 {
  0% {
    left: 0%;
  }
  23% {
    left: 0%;
  }
  25% {
    left: 300%;
  }
  48% {
    left: 300%;
  }
  50% {
    left: 200%;
  }
  73% {
    left: 200%;
  }
  75% {
    left: 100%;
  }
  98% {
    left: 100%;
  }
  100% {
    left: 0%;
  }
}

---

배너 자동 슬라이드 기능 구현

---

3. 메인 페이지 - 상품 슬라이드 (props 사용하기)

메인 페이지의 상품들을 4개씩 한 묶음으로 묶은 후, 슬라이드 기능이 가능하게 하는 것이 목표였다. 술담화 홈페이지에 가보면, 메인페이지가 그렇게 동작되도록 구현되어있다. 하지만, props로 묶어주는 것 부터 난관이 시작됬다. 그래서 이 계획은 구현하지 못했다. 

 

술담화 공식홈페이지(메인)

위와 같이 공식홈페이지의 영상처럼 구현하는 것이 숙제다.