[Feat] 전략목록페이지 아코디언 형식의 검색 사이드바 추가

app/(dashboard)/strategies/[strategyId]/page.tsx

@@ -34,7 +34,7 @@ const StrategyDetailPage = ({ params }: { params: { strategyId: string } }) => {
       {detailsInformationData && <DetailsInformation information={detailsInformationData} />}
       <AnalysisContainer />
       <ReviewContainer strategyId={params.strategyId} />
-      <SideContainer>
+      <SideContainer isFixed={true}>
         <SubscriberItem subscribers={99} />
         {hasDetailsSideData?.[0] &&
           detailsSideData?.map((data, idx) => (

app/(dashboard)/strategies/_ui/search-bar/_hooks/use-accordion-button.ts

@@ -0,0 +1,18 @@
+import { useRef, useState } from 'react'
+
+export interface ButtonIdStateModel {
+  [key: string]: boolean
+}
+
+const useAccordionButton = () => {
+  const [openIds, setOpenIds] = useState<ButtonIdStateModel | null>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  const handleButtonIds = (id: string, isOpen: boolean) => {
+    setOpenIds((prev) => ({ ...prev, [id]: isOpen }))
+  }
+
+  return { panelRef, openIds, handleButtonIds }
+}
+
+export default useAccordionButton

app/(dashboard)/strategies/_ui/search-bar/_hooks/use-accordion-context.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+
+import { AccordionContext } from '../accordion-container'
+
+export const useAccordionContext = () => {
+  const context = useContext(AccordionContext)
+  if (!context) {
+    throw new Error('검색 메뉴 로드 실패')
+  }
+  return context
+}

app/(dashboard)/strategies/_ui/search-bar/_store/use-searching-item-store.ts

@@ -0,0 +1,89 @@
+import { create } from 'zustand'
+
+import { AlgorithmItemType, RangeModel, SearchTermsModel } from '../_type/search'
+import { isRangeModel } from '../_utils/type-validate'
+
+interface StateModel {
+  searchTerms: SearchTermsModel
+  errOptions: (keyof SearchTermsModel)[] | null
+}
+
+interface ActionModel {
+  setAlgorithm: (algorithm: AlgorithmItemType) => void
+  setPanelItem: (key: keyof SearchTermsModel, item: string) => void
+  setRangeValue: (key: keyof SearchTermsModel, type: keyof RangeModel, value: number) => void
+  resetState: () => void
+  validateRangeValues: () => void
+}
+
+interface ActionsModel {
+  actions: ActionModel
+}
+
+const initialState = {
+  searchWord: null,
+  tradeTypeNames: null,
+  operationCycles: null,
+  stockTypeNames: null,
+  durations: null,
+  profitRanges: null,
+  principalRange: null,
+  mddRange: null,
+  smScoreRange: null,
+  algorithmType: null,
+}
+
+const useSearchingItemStore = create<StateModel & ActionsModel>((set, get) => ({
+  searchTerms: {
+    ...initialState,
+  },
+  errOptions: [],
+
+  actions: {
+    setAlgorithm: (algorithm) =>
+      set((state) => ({
+        searchTerms: { ...state.searchTerms, algorithmType: algorithm },
+      })),
+
+    setPanelItem: (key, item) =>
+      set((state) => {
+        const currentItems = state.searchTerms[key]
+        if (Array.isArray(currentItems)) {
+          const updatedItems = currentItems.includes(item)
+            ? currentItems.filter((i) => i !== item)
+            : [...currentItems, item]
+          return { searchTerms: { ...state.searchTerms, [key]: [...updatedItems] } }
+        }
+        return { searchTerms: { ...state.searchTerms, [key]: [item] } }
+      }),
+
+    setRangeValue: (key, type, value) =>
+      set((state) => ({
+        searchTerms: {
+          ...state.searchTerms,
+          [key]: { ...(state.searchTerms[key] as RangeModel), [type]: value },
+        },
+      })),
+
+    resetState: () => set(() => ({ searchTerms: { ...initialState }, errOptions: [] })),
+
+    validateRangeValues: () => {
+      const { searchTerms } = get()
+      const rangeOptions: (keyof SearchTermsModel)[] = [
+        'principalRange',
+        'mddRange',
+        'smScoreRange',
+      ]
+      const errOptions = rangeOptions.filter((option) => {
+        const value = searchTerms[option]
+        if (value !== null && isRangeModel(value)) {
+          return value.min > value.max
+        }
+        return false
+      })
+      set({ errOptions })
+    },
+  },
+}))
+
+export default useSearchingItemStore

app/(dashboard)/strategies/_ui/search-bar/_type/search.ts

@@ -0,0 +1,19 @@
+export type AlgorithmItemType = 'EFFICIENT_STRATEGY' | 'ATTACK_STRATEGY' | 'DEFENSIVE_STRATE'
+
+export interface SearchTermsModel {
+  searchWord: string | null
+  tradeTypeNames: string[] | null
+  operationCycles: string[] | null
+  stockTypeNames: string[] | null
+  durations: string[] | null
+  profitRanges: string[] | null
+  principalRange: RangeModel | null
+  mddRange: RangeModel | null
+  smScoreRange: RangeModel | null
+  algorithmType: AlgorithmItemType | null
+}
+
+export interface RangeModel {
+  min: number
+  max: number
+}

app/(dashboard)/strategies/_ui/search-bar/_utils/type-validate.ts

@@ -0,0 +1,12 @@
+import { RangeModel } from '../_type/search'
+
+export const isRangeModel = (value: unknown): value is RangeModel => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'min' in value &&
+    'max' in value &&
+    typeof (value as RangeModel).min === 'number' &&
+    typeof (value as RangeModel).max === 'number'
+  )
+}

app/(dashboard)/strategies/_ui/search-bar/accordion-button.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { useContext } from 'react'
+
+import { CloseIcon, OpenIcon } from '@/public/icons'
+import classNames from 'classnames/bind'
+
+import useSearchingItemStore from './_store/use-searching-item-store'
+import { SearchTermsModel } from './_type/search'
+import { AccordionContext } from './accordion-container'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  optionId: keyof SearchTermsModel
+  title: string
+  size?: number
+}
+
+const AccordionButton = ({ optionId, title, size }: Props) => {
+  const { openIds, handleButtonIds } = useContext(AccordionContext)
+  const searchTerms = useSearchingItemStore((state) => state.searchTerms)
+
+  const hasOpenId = openIds?.[optionId]
+  const clickedValue = searchTerms[optionId]
+
+  return (
+    <div className={cx('accordion-button', { active: hasOpenId })}>
+      <button onClick={() => handleButtonIds(optionId, !hasOpenId)}>
+        <p>
+          {title}
+          {Array.isArray(clickedValue) &&
+            clickedValue?.length !== 0 &&
+            (clickedValue.length !== size ? (
+              <span>
+                ({clickedValue.length}/{size})
+              </span>
+            ) : (
+              <span>(All)</span>
+            ))}
+        </p>
+        {hasOpenId ? <CloseIcon /> : <OpenIcon />}
+      </button>
+    </div>
+  )
+}
+
+export default AccordionButton

app/(dashboard)/strategies/_ui/search-bar/accordion-container.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { createContext } from 'react'
+
+import useAccordionButton, { ButtonIdStateModel } from './_hooks/use-accordion-button'
+import { SearchTermsModel } from './_type/search'
+import AccordionButton from './accordion-button'
+import AccordionPanel from './accordion-panel'
+
+interface AccordionContextModel {
+  panelRef: React.RefObject<HTMLDivElement>
+  openIds: ButtonIdStateModel | null
+  handleButtonIds: (id: string, open: boolean) => void
+}
+
+const initialState: AccordionContextModel = {
+  panelRef: { current: null },
+  openIds: null,
+  handleButtonIds: () => {},
+}
+
+export const AccordionContext = createContext(initialState)
+
+interface Props {
+  optionId: keyof SearchTermsModel
+  title: string
+  panels?: string[]
+}
+
+const AccordionContainer = ({ optionId, title, panels }: Props) => {
+  const { openIds, panelRef, handleButtonIds } = useAccordionButton()
+
+  return (
+    <AccordionContext.Provider value={{ openIds, panelRef, handleButtonIds }}>
+      <div>
+        <AccordionButton optionId={optionId} title={title} size={panels?.length} />
+        <AccordionPanel optionId={optionId} panels={panels} />
+      </div>
+    </AccordionContext.Provider>
+  )
+}
+
+export default AccordionContainer

app/(dashboard)/strategies/_ui/search-bar/accordion-panel.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useContext, useEffect, useState } from 'react'
+
+import { CheckedCircleIcon } from '@/public/icons'
+import classNames from 'classnames/bind'
+
+import useSearchingItemStore from './_store/use-searching-item-store'
+import { SearchTermsModel } from './_type/search'
+import { AccordionContext } from './accordion-container'
+import RangeContainer from './range-container'
+import styles from './styles.module.scss'
+
+/* eslint-disable react-hooks/exhaustive-deps */
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  optionId: keyof SearchTermsModel
+  panels?: string[]
+}
+
+const AccordionPanel = ({ optionId, panels }: Props) => {
+  const { openIds, panelRef } = useContext(AccordionContext)
+  const [panelHeight, setPanelHeight] = useState<number | null>(null)
+  const [isClose, setIsClose] = useState(false)
+  const searchTerms = useSearchingItemStore((state) => state.searchTerms)
+  const { setPanelItem } = useSearchingItemStore((state) => state.actions)
+
+  useEffect(() => {
+    if (panelRef.current && hasOpenId) {
+      const panelHeight = panelRef.current.clientHeight + 32 * (panels?.length || 1)
+      setPanelHeight(panelHeight)
+      panelRef.current.style.setProperty('--panel-height', `${panelHeight}px`)
+    }
+
+    if (!hasOpenId) {
+      setIsClose(true)
+      const timeout = setTimeout(() => {
+        setIsClose(false)
+        setPanelHeight(null)
+      }, 300)
+      return () => clearTimeout(timeout)
+    }
+  }, [openIds, panelRef, optionId])
+
+  const hasOpenId = openIds?.[optionId]
+  const clickedValue = searchTerms[optionId]
+
+  return (
+    <>
+      {hasOpenId !== undefined && (
+        <div
+          className={cx('panel-wrapper', { open: hasOpenId, close: isClose })}
+          style={{ '--panel-height': `${panelHeight}px` || '0px' } as React.CSSProperties}
+          ref={panelRef}
+        >
+          {panels
+            ? hasOpenId &&
+              panels?.map((panel, idx) => (
+                <button
+                  key={`${panel}-${idx}`}
+                  onClick={() => setPanelItem(optionId, panel)}
+                  className={cx({
+                    active: Array.isArray(clickedValue) && clickedValue?.includes(panel),
+                  })}
+                >
+                  <p>{panel}</p>
+                  <CheckedCircleIcon />
+                </button>
+              ))
+            : hasOpenId && <RangeContainer optionId={optionId} />}
+        </div>
+      )}
+    </>
+  )
+}
+
+export default AccordionPanel

app/(dashboard)/strategies/_ui/search-bar/algorithm-item.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import classNames from 'classnames/bind'
+
+import { AlgorithmItemType } from './_type/search'
+import styles from './styles.module.scss'
+
+const cx = classNames.bind(styles)
+
+interface Props {
+  name: AlgorithmItemType
+  clickedAlgorithm: AlgorithmItemType | null
+  onChange: (algorithm: AlgorithmItemType) => void
+}
+
+const AlgorithmItem = ({ name, clickedAlgorithm, onChange }: Props) => {
+  return (
+    <button
+      className={cx('algorithm-button', { active: clickedAlgorithm === name })}
+      onClick={() => onChange(name)}
+    >
+      {name}
+    </button>
+  )
+}
+
+export default AlgorithmItem