カンヌ茶屋

この種目は茶屋をテーマにガーナ茶屋で行われ、反フックで行われた.
これはカンヌ茶屋のアドレスです.
ガーナ茶屋の試演ビデオで地図ページの開発を行いました.
プロジェクトの進行中にクラスフラットコンポーネントとSASSを使用して行われた既存のプロジェクトとは異なり、関数コンポーネントを使用して反応フックを使用してステータス管理を行い、スタイルもSASSではなくスタイルコンポーネントを使用して行います.
プロジェクトの実施過程で直面した困難は、新しい概念を学習し、プロジェクトに応用することである.
スタイルコンポーネントをどのように適用するか、css初期化をどのように行うかは難題です.

プロジェクト構造とスタイル構成部品の適用

項目構成上記のように、共通の適用が必要なスタイル要素については、初期化設定がGlobalStyle.jsファイル、汎用cssファイルがmixin.jsファイル、色値についてはtheme.jsファイル、これをindex.jsファイルに適用し、以下に示すようにする.

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './Routes';
import { GlobalStyle } from './Styles/GlobalStyle';
import { ThemeProvider } from 'styled-components';
import theme from './Styles/theme';
import mixin from './Styles/mixin';

ReactDOM.render(
  <>
    <GlobalStyle />
    <ThemeProvider theme={{ ...theme, ...mixin }}>
      <Routes />
    </ThemeProvider>
  </>,
  document.getElementById('root')
);

// GlobalStyle.js
import { createGlobalStyle } from 'styled-components';
import { reset } from 'styled-reset';

export const GlobalStyle = createGlobalStyle`
${reset}
* {
  box-sizing : border-box;
}
*, html, body {
  font-size : 10px;
  font-family: 'Noto Sans KR', sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
input, button {
  background-color: transparent;
  border: none;
  outline: none;
}
ol, ul, li {
  list-style: none;
}
`;

// mixin.js
import { css } from 'styled-components';

const flexSet = (
  justify = 'center',
  items = 'center',
  direction = 'row'
) => css`
  display: flex;
  justify-content: ${justify};
  align-items: ${items};
  flex-direction: ${direction};
`;

const mixin = { flexSet };

export default mixin;

// theme.js
const theme = {
  white: '#ffffffcc',
  black: '#222222',
  lightGray: '#868686',
  gray: '#656565',
  blue: '#326CF9',
  yellow: '#F7E506',
  solidGray: '#cdcdcd',
};

export default theme;

地図ページ

次は私が担当している地図ページです.

react-slaiderとquery-string、react-naver-mapライブラリが使用されています.
react-slaiderライブラリを使用して、-からフォーマットまでの範囲シェイプバーを作成し、query-stringをライブラリとして使用して値の変化を検出し、クエリーされた領域の部屋情報と領域の形状を識別します.
useReducerを使用して各フィルタタブのステータスを管理し、immerを使用してステータスを変更して、不変性の管理を容易にします.useContextを使用して、使用のためにすべてのサブエレメントにステータスを渡します.

// useMapPageContext.js
import { createContext, useContext } from 'react';
import produce from 'immer';

export const CHECK_BOX = 'CHECK_BOX';
export const RANGE = 'RANGE';

const FilterContext = createContext();
export const useFilterContext = () => useContext(FilterContext);
export const FilterProvider = FilterContext.Provider;

const MapContext = createContext();
export const useMapContext = () => useContext(MapContext);
export const MapProvider = MapContext.Provider;

export const useFilterReducer = (state, action) => {
  switch (action.type) {
    case CHECK_BOX:
      return produce(state, draft => {
        const filterTap = draft.find(filter => filter.type === action.key);
        const list = filterTap.list.find(item => item.value === action.value);
        list.checked = action.checked;
      });
    case RANGE:
      return produce(state, draft => {
        const filterTap = draft.find(filter => filter.type === action.key);
        const list = filterTap.range.list.find(
          item => item.value === action.value
        );
        list.range = action.range;
      });
    default:
      return state;
  }
};

上記のuseMapPageContext.jsは、サブエレメントから直接アクセスできるように、useContextとuseReduceをそれぞれファイルとして管理しています.

最後に...

プロジェクトが完了すると、ユーザーの状態から様々なフィードバックフックを学ぶことができます.これは良いプロジェクト期間です.
ただし、必要な機能を実装する場合、使用効果が増加したり、検出が必要な状態値が混乱したりする場合がありますので、これらの部分を分離して処理したいのですが、特にライブラリ開発にあまり依存しない場合は、使わなくてもNAVER提供のAPIで十分な開発ができると思いますし、次回も地図を使えばその時はAPIを使ってプロジェクトをしたいだけです.