概要

INSTAGRAMクローン自己反省中
シモンティックから、この間は自分でレイアウトを間違えましたが...
一方で次回の再制作も楽しみです
1はログイン画面です.

実装画面

1枚目の写真は全幅時の状態です.
2枚目の写真はブラウザ幅が735 px未満の画面を示しています.

CSS Idea

Instagramは、決まった背景に窓を置いた感じを堅持しています.

エリアはきれいに落ちています.margin,padding,font-sizeなどの大きさは統一されているように見えます.

Wrapper->コンテンツ->コンテンツのような方法です.

開発者のツールから見ると、小さな要素でも親要素で包むことができ、位置決めがスムーズになります.
図から見ると.

1. main은 flex가 적용된다.
  -> 너비, 높이 100% 및 중앙 정렬이 된다.
  -> 즉, main안에 넣는 요소는 항상 브라우저 기준 가운데 정렬이 된다.
2. Article은 컨텐츠들을 감싸는 container 역할을 한다.
  -> flex로 row 방향으로 나열되도록 하며
  -> 각 컨텐츠는 section으로 한 번 더 감싼다.
3. ImgBox는 별도의 처리가 없으므로 
  -> background 속성으로 컨트롤하는 것으로 마무리한다.
4. LoginForm
  -> logo / input / hr / optionBtn / Register 영역으로 나뉜다.
  -> Register는 약간 띄워져있으므로
  -> logo,input...등등과 Register를 또 별개의 Wrapper로 나눈다.

1つずつ分割され、各要素は独立したオブジェクトになります.
スタイルシートがたくさんあるような気がします
たとえば、

Article은 flex-direction이 row이지만
그 안에 있는 section인 LoginForm은 column으로 정렬시킵니다.

1つのページではなく複数のページを組み立てるように.

JS Idea

ブラウザの幅に従って要素を表示/非表示にします.

inputに従ってbtnを有効または無効にします.

ログイン、フェイスブックログイン、パスワード、登録などルーティング関数を保留します.

resize event

window.addEventListener('resize',function(event){
    const imgBox = document.querySelector('#imgBox')
    if (window.innerWidth<=735){
        imgBox.style.display='none';
    }else{
        imgBox.style.display='block';
    }
})

反応型なので要素が真ん中まで来ない…このような状況があるかもしれません.
displayプロパティを簡単に使用しました

display:none은 DOM에서 이 요소를 사라지게 하고
visibility:none은 단순히 눈에 안보일 뿐, DOM에는 남아있습니다.

input event

与えられた条件は次のとおりです.

1. ID는 @가 포함되어야 한다.
2. Password는 5자 이상이어야한다.
3. 버튼 클릭뿐만 아니라 Enter키로 로그인할 수 있다.

inputID.addEventListener('input',function(event){
    if (event.target.value.includes('@') && inputPW.value.length>=5){
        loginBtn.style.backgroundColor='rgba(var(--d69,0,149,246),1)'
        loginBtn.style.cursor='pointer';
    }else{
        loginBtn.style.backgroundColor='rgba(var(--d69,0,149,246),.3)'
        loginBtn.style.cursor='inherit';
    }
})

inputID.addEventListener('keydown',function(event){
    if (event.key==='Enter'){
        if (inputID.value.includes('@') && inputPW.value.length>=5){

        }else{
            alert('ID, PW를 모두 입력해주시기 바랍니다.');
        }
    }
})

Inputイベントが発生したときにイベントが呼び出されることを確認します.
reactのonchangeと同じ役割を果たします.
キーワードは「input」です.ちょっと紛らわしいポイントううう
JSではキーボード入力に「keydown」を使用します.
event.キーを呼び出すと、Stringシェイプは次のようになります.
event.keycodeを呼び出すと、各キーのコードが出力されます.
「Enter」Stringだと知っていますが、複数の異なるキーが必要な場合は
key codeでプレビューするのは面倒かもしれません.

1. input이 발생할 때마다 유효성 체크를 진행합니다.
2. 조건이 충족되지 않으면
  2-1. 로그인 버튼을 흐리게 만들고 
  2-2. 로그인 버튼의 클릭 커서를 비활성화합니다.
3. 조건이 충족되면
  3-1. 로그인 버튼을 명확하게 만들고
  3-2. 로그인 버튼의 클릭 커서를 활성화시킵니다.
4. input 태그에서 keydown 이벤트가 발생하면
  4-1. 'Enter'인지 식별하고
  4-2. 맞다면 유효성 체크 후
  4-3. 조건이 충족되면 서버와 통신하여 인증 절차를 거치고
  4-4. 조건이 충족되지 않으면 alert를 발생시킨다.

4-3の場合、apiはまだ検証されていないため、空のままです.
4-4 alertを生成したり、モードを個別に定義して出力したりすることができます!
InputPWはIDと論理が同じなので省略します.

routing Buttons

const loginFunc = () =>{
    if (inputID.value.includes('@') && inputPW.value.length>=5){
        // 서버로 입력값을 전달한다.
        // 서버의 응답에 따라 메인으로 이동하거나, alert를 발생시킨다.
    }
}
const forgetPWFunc = () =>{
    // 비밀번호 찾기 페이지로 라우팅한다.
}
const facebookLoginFunc = () =>{
    // 페이스북 로그인 modal를 출력한다.
}

前述したように、apiはまだないので、作成していません.
たとえば

axios.post('/api/loginProgress',{id:inputID.value, pw:inputPW.value}
.then(response=>{
  if (response.data.status){
    window.location.href='/main'
  }else{
    alert('로그인 정보가 일치하지 않습니다.')
    window.location.href='/'
})

loginFunc()には、上記のコードを含めることができます.
forgetPWfunc()は、パスワードを検索するページにのみルーティングされます.
fetchなどの関数は必要ありません.
Facebook LoginFunc()は、FacebookログインAPIによって認証されます.
htmlでは、簡単に

<input id='inputID' type='text' onclick='loginFunc()'>

前述したように、イベント関連の関数呼び出しをタグに挿入しました.

ETC

label floating

実際のInstagramでは、IDとPWを入力するとプレースホルダが印刷されます.
実現した画面はこれには当てはまらないが,まとめてみる.

<label id='inputPlaceholder'> 입력해주세요! </label>
<input id='inputTag' type='text'>

#inputPlaceholder{
  position:absolute;
  ~ 이하.. top left right bottom 등 사용..
  left:14px; // 시작점에 위치..
  font-size:14px;
  font-weight:600;
  transition:0.5s ease; // animate를 0.5초간 smooth처리
}
#inputTag{
  padding-top:5px;   // 플로팅 위치를 비워줌...
  padding-left:14px; // 커서 위치를 옮김..
}

inputTag.addEventListener('input',function(){
  if (inputTag.value.length>0){
    inputPlace.style.fontSize:10px;
  }else{
    inputPlace.style.fontSize=14px;
}

上の感じでやればいい
既存のタグとの違いであれば、labelタグはプレースホルダのようになります.
cssを適用して表示し、inputにイベントを追加します.
placeholder文字はinputタグの内部からCSSを上に撫でます.
属性を利用するのではなく、簡単なトリックです.

最終アニメーション画面

key points

1. 사소한 element라도 부모 요소를 만들면 포지셔닝이 편하다.
2. relative -> absolute로 짜게되는 경우
  2-1. absolute의 배치가 명확하다면 상관없지만
  2-2. 그렇지 않다면 element의 포지션이 꼬일 수 있다.
3. flex.. 이거 치트키일지도?

の最後の部分

#2ログイン後に表示されるページを説明します.
flexの氾濫(?!)歯を広げて、
絶対好きな私はこのように生で食べることができますか?!やっています.😂