@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import '../less/Filter.less';
+import PropTypes from 'prop-types';
+import FilterBox from './FilterBox';
+import * as constants from '../constants';
+
+class Filter extends Component {
+    static propTypes = {
+        MyInfoButton: PropTypes.bool.isRequired,
+        myInfoToggle: PropTypes.func.isRequired,
+        factorLoad: PropTypes.func.isRequired,
+        showFilter: PropTypes.func.isRequired
+    };
+
+    state = {
+        refresh: true
+    };
+
+    doNotShowTips = () => {
+        const { refresh } = this.state;
+        sessionStorage.setItem('doNotShowTipsForFilter', JSON.stringify(true));
+        this.setState({ refresh: !refresh });
+    };
+
+    render() {
+        const {
+            MyInfoButton,
+            factorLoad,
+            myInfoToggle,
+            showFilter
+        } = this.props;
+        const doNotShowTips = JSON.parse(
+            sessionStorage.getItem('doNotShowTipsForFilter')
+        );
+        const factorBox = Object.keys(constants.newToggleBox);
+
+        return (
+            <div id="filterContainer">
+                <div className="filterBox">
+                    {factorBox.map(factor => (
+                        <FilterBox
+                            factorLoad={factorLoad}
+                            factor={factor}
+                            key={factor}
+                        />
+                    ))}
+                </div>
+
+                <div className="buttonBox">
+                    <div
+                        className={
+                            'myInfoButton '
+                            + (MyInfoButton ? 'checked' : 'unChecked')
+                        }
+                        onClick={myInfoToggle}
+                        onKeyPress={myInfoToggle}
+                        role="button"
+                        tabIndex="0"
+                    >
+                        {`내 호재`}
+                    </div>
+                    <div
+                        className="myInfoButton last"
+                        onClick={showFilter}
+                        onKeyPress={showFilter}
+                        role="button"
+                        tabIndex="0"
+                    >
+                        {`닫기`}
+                    </div>
+                </div>
+                {doNotShowTips ? null : (
+                    <div className="tipModalForFilter">
+                        <div className="arrowBoxForFilter">
+                            <p>
+                                부동산 호재 정보를 그리려면 필터를 닫고 그리기
+                                메뉴를 선택해주세요!
+                            </p>
+                            <div
+                                className="doNotShowTipsForFilter"
+                                onClick={this.doNotShowTips}
+                                onKeyDown={this.doNotShowTips}
+                                role="button"
+                                tabIndex="0"
+                            >
+                                다시 보지 않기
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+export default Filter;

리뷰: css로 빼내기