표시 정보

제목 setTitle(e.target.value)} />

설명

setDesc(e.target.value)} /></div>

<div className="settings-group-title">View 형태</div>
          <div className="field">
            <div className="seg">
              {['bar', 'line', 'pie', 'table'].map((v) => (
                <button key={v} className={view === v ? 'active' : ''} onClick={() => setView(v)}>
                  {VIEW_ICON[v]}{({ bar: '막대', line: '선', pie: '파이', table: '표' })[v]}
                </button>
              ))}
            </div>
          </div>

<div className="settings-group-title">색상 테마</div>
          <div className="field">
            <div className="swatches">
              {Object.entries(THEME_SWATCH).map(([k, c]) => (
                <button key={k} className={'swatch' + (cfg.theme === k ? ' active' : '')} style={{ background: c }} onClick={() => setCfg({ ...cfg, theme: k })} title={k}></button>
              ))}
            </div>
          </div>
        </div>

<div>
          <div className="settings-group-title">데이터 조건</div>
          <div className="field">
            <label>데이터셋</label>
            <div className="ds-pill">{I.db}{comp.source}</div>
          </div>

<div className="field">
            <label>조회 기간</label>
            <div className="seg" style={{ marginBottom: 10 }}>
              <button className={period === 'range' ? 'active' : ''} onClick={() => setPeriod('range')}>{I.calendar}기간 지정</button>
              <button className={period === 'recent' ? 'active' : ''} onClick={() => setPeriod('recent')}>최근 N개월</button>
            </div>
            {period === 'range' ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <input type="date" className="input" value={cfg.from || '2026-01-01'} onChange={(e) => setCfg({ ...cfg, from: e.target.value })} />
                <span style={{ color: 'var(--ink-3)' }}>~</span>
                <input type="date" className="input" value={cfg.to || '2026-06-25'} onChange={(e) => setCfg({ ...cfg, to: e.target.value })} />
              </div>
            ) : (
              <div className="seg">
                {[3, 6, 12].map((n) => (<button key={n} className={(cfg.recentN || 6) === n ? 'active' : ''} onClick={() => setCfg({ ...cfg, recentN: n })}>{n}개월</button>))}
              </div>
            )}
          </div>

{!isTrendOrShare && (
            <div className="field">
              <label>투자 주체</label>
              <div className="seg">
                {['ind', 'inst', 'frgn'].map((s) => (<button key={s} className={(cfg.subject || comp.subject || 'ind') === s ? 'active' : ''} onClick={() => setCfg({ ...cfg, subject: s })}>{SUBJ[s]}</button>))}
              </div>
            </div>
          )}

<div className="field">
            <label>표시 항목 수 (TOP N)</label>
            <div className="stepper">
              <button onClick={() => setCfg({ ...cfg, topN: Math.max(3, (cfg.topN || 10) - 1) })}>−</button>
              <input value={cfg.topN || 10} onChange={(e) => setCfg({ ...cfg, topN: Math.max(3, Math.min(12, +e.target.value || 10)) })} />
              <button onClick={() => setCfg({ ...cfg, topN: Math.min(12, (cfg.topN || 10) + 1) })}>+</button>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { I, VIEW_ICON, Modal, useToasts, SettingsModal });

{title}