Project Fake Search#4移動応答ページとマニュアルポップアップの実装

開始します。

本プロジェクトの主な機能は既に実装されているため、このセクションでは、モバイル画面でもサービスを正常に使用できるように反応式ページを実現し、ポップアップ表示マニュアルで初めて登録したユーザーがサービスを使用できるようにした.
このサービスを企画する意図は、映画やドラマのシーンに活用することで、実際にスマホで検索するシーンが多いので、モバイルを実現することも重要だと思います.また,登録して設定ページに入るまではサイトの使い方が分かりにくいため,別途ユーザに案内する必要がある.最初は別のレンダリングページを作成すべきだと思いましたが、検索ウィンドウがあるホームページはウェブサイトに接続したときに現れる最初のページであるべきだと思い、ポップアップウィンドウとして実現しました.

モバイルレスポンス実装

モバイルページで使用される画面は、ページとは異なり、縦方向が横方向よりも長い画面であるため、メディアクエリを用いてflex-directionをcolumnに設定したり、モバイルで使用される素子を個別に作成したりする方式が用いられる.

ページの設定

ネットワーク

移動

ページのオプションカードメニューセクションを設定selectを使用してコンポーネントを個別に作成し、画面上に表示し、margin、paddingを適切に使用します.

一番悩んでいるのは、検索ページ設定画面ですが、検索データを追加すると、携帯電話の画面によって縮小サイズが小さくなるので、overflow-x:autoに設定して横スクロールを生成します.

ホームページ

ネットワーク

移動

ホームページでは、要素の全体的なサイズのみを設定し、検索ウィンドウをクリックすると、上の画像のように見える個別のページが実現されます.モバイルでは、inputウィンドウにフォーカスすると、仮想キーボードが下の部分を占めるため、他のポータルサイトを参照して類似のページを設定できます.

検索ページ

ネットワーク

移動

検索ページは設定ページと同様にoverflow-x:autoに設定され、画面を超えるデータがある場合にスクロールすることができ、画面を超えないようにいくつかのカテゴリボタンが設定されています.

実施マニュアルポップアップ

説明が必要な部分が想像以上に多く、画像を利用する必要があるため、1つのポップアップウィンドウにすべての内容を含めるのは不合理であると考え、スライド形式を採用した.

//매뉴얼 닫기(일주일간 보지 않기) 관련 함수
import { useState } from 'react';

const useManual = () => {
    const localDate = localStorage.getItem('manualPopUpDate') || new Date();
    const lastDate = Date.parse(localDate)
    const NowDate = Date.parse(new Date())
    const [isPopUpOpen, setIsPopUpOpen] = useState(lastDate<=NowDate);
    const setDate = () => {
      localStorage.setItem('manualPopUpDate', new Date(new Date().setDate(new Date().getDate() + 7)));
      setIsPopUpOpen(false);
    };
    return [isPopUpOpen, setDate];
  };
  
  export default useManual;

使い方に詳しいプレイヤーにとっては、ページをリフレッシュするたびにポップアップウィンドウが表示されるのは不要なので、ポップアップウィンドウを閉じるだけで1週間以内に見えない形で表示されます.最初にローカルストレージで最後にポップアップウィンドウを閉じた日付が今日の日付と比較された場合、ポップアップウィンドウを開いて閉じるボタンを押すかどうかを決定すると、setDateが実行され、7日後の日付がローカルストレージに保存され、ポップアップウィンドウを閉じるように記述されます.
以前は暗いモードでローカルストレージを使用してこの機能を実現するのは難しくなかったが,当初はクッキーやセッションのように満期日を設定できると考えられていたが,ローカルストレージで設定できないため,時間を比較に格納した.

の最後の部分

今、ある程度、プロジェクトが完成したので、次の計画を具体的に考え始めました.開発者として、就職準備は初めてなので、私がどのような面を強調すべきか、どのような開発者を成長させたいのかを深く考える必要があると思います.プロジェクトやコード作成のプロセスが楽しいので、就職準備ができているかどうか心配ですが、現業界で実際のサービスを体験していると思うと、ワクワクします.