[#136] 🐛 빌드 에러 해결 (#195)

* [#136] ♻️ turn checkbox button from button tag into div tag

* [#136] 🐛 add handleChange methods to send down to select components

* [#136] ♻️ change data structure of selected values in select component into set

* [#136] 🐛 solve light build issues

* [#136] 🐛 solve set using array methods property issues

* [#136] 🗑️ remove select stories

Author: KingNono1030

src/app/(pages)/team/page.tsx

@@ -247,7 +247,7 @@ export default function TeamPage(): JSX.Element {
   console.log(`기존 twMergeEx : ${twMergeEx(mergeText)}`)
 
   const [techStack, setTechstack] = useState<string[]>([])
-  const [position, setPosition] = useState('')
+  const [position, setPosition] = useState<string[]>([])
   const [order, setOrder] = useState<'recent' | 'like'>('recent')
   const { isOpen: onRecruitment, toggle: toggleRecruitment } = useToggle()
   const {
@@ -261,12 +261,11 @@ export default function TeamPage(): JSX.Element {
   } = usePagination({ totalItems: 20, itemsPerPage: 10, buttonsPerPage: 10 })
   const [teamType, setTeamType] = useState<TeamType>('STUDY')
 
-  const handleTechStack = (newValue: string) => {
-    if (techStack.includes(newValue)) {
-      setTechstack(prev => prev.filter(item => item !== newValue))
-    } else {
-      setTechstack(prev => [...prev, newValue])
-    }
+  const handleTechStackChange = (values: string[]) => {
+    setTechstack(() => values)
+  }
+  const handlePositionChange = (values: string[]) => {
+    setPosition(() => values)
   }
 
   return (
@@ -355,7 +354,7 @@ export default function TeamPage(): JSX.Element {
                 options={stackOptions}
                 isMulti={true}
                 isSearchable={true}
-                onChange={setTechstack}
+                onChange={handleTechStackChange}
               >
                 <Select.Trigger placeholder='기술 스택' />
                 <Select.Menu className='w-246'>
@@ -366,7 +365,7 @@ export default function TeamPage(): JSX.Element {
                 options={positionOptions}
                 isMulti={true}
                 isSearchable={false}
-                onChange={setPosition}
+                onChange={handlePositionChange}
               >
                 <Select.Trigger placeholder='포지션' />
                 <Select.Menu className='w-216' />

src/app/(pages)/test-page/page.tsx

@@ -22,7 +22,7 @@ export default function Page(): JSX.Element {
             <h2>{team.teamTitle}</h2>
             <h3>{team.teamIsActive}</h3>
             <p>{team.teamContent}</p>
-            <h5>{team.member.nickname}</h5>
+            <h5>{team.writer.nickname}</h5>
           </li>
         ))}
       </ul>

src/components/common/input/CheckboxInput.tsx

@@ -1,10 +1,10 @@
 import { IcCheck, IcCheckboxCheck } from '@/assets/IconList'
+import { twMergeEx } from '@/lib/twMerge'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 import { handleKeyDown } from '@/utils/handleKeyDown'
 import { toggleCheckbox } from '@/utils/toggleCheckbox'
-import { twMergeEx } from '@/lib/twMerge'
 
 export interface CheckboxInputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
@@ -71,7 +71,7 @@ export const CheckboxInput = ({
         {...props}
         className='hidden'
       />
-      <button
+      <span
         role='checkbox'
         tabIndex={0}
         aria-checked={checked}
@@ -81,7 +81,7 @@ export const CheckboxInput = ({
         className={buttonClass}
       >
         {getIconForState(variant, checked)}
-      </button>
+      </span>
       <span className={labelTextClass}>{label}</span>
     </label>
   )

src/components/shared/select/Select.tsx

@@ -9,7 +9,7 @@ import { CheckboxInput, TextInput } from '@/components/common/input'
 
 interface SelectContextType {
   options: Option[]
-  selectedValues: string[]
+  selectedValues: Set<string>
   searchTerm: string
   isMulti: boolean
   setSearchTerm: (value: string) => void
@@ -46,7 +46,7 @@ export const Select = ({
   children,
   disabled = false,
 }: SelectProps): JSX.Element => {
-  const [selectedValues, setSelectedValues] = useState<string[]>([])
+  const [selectedValues, setSelectedValues] = useState<Set<string>>(new Set())
   const [searchTerm, setSearchTerm] = useState<string>('')
 
   const filteredOptions = options.filter(option =>
@@ -55,19 +55,27 @@ export const Select = ({
 
   const toggleValue = (value: string) => {
     setSelectedValues(prev => {
-      const newValues = prev.includes(value)
-        ? prev.filter(v => v !== value)
-        : isMulti
-          ? [...prev, value]
-          : [value]
-      if (JSON.stringify(newValues) !== JSON.stringify(prev)) {
-        onChange(newValues)
+      const newValues = new Set(prev)
+
+      if (newValues.has(value)) {
+        newValues.delete(value)
+      } else {
+        if (isMulti) {
+          newValues.add(value)
+        } else {
+          return new Set([value])
+        }
       }
+
+      if (JSON.stringify([...newValues]) !== JSON.stringify([...prev])) {
+        onChange([...newValues])
+      }
+
       return newValues
     })
   }
 
-  const isSelected = (value: string) => selectedValues.includes(value)
+  const isSelected = (value: string) => selectedValues.has(value)
 
   return (
     <SelectContext.Provider
@@ -100,17 +108,18 @@ const Trigger = ({
 
   const { selectedValues, isMulti, options, disabled } = useSelectContext()
   const selectedLabel = isMulti
-    ? selectedValues.length
-      ? `${selectedValues[0]}` +
-        (selectedValues.length > 1 ? ` 외 ${selectedValues.length - 1}개` : '')
+    ? selectedValues.size
+      ? `${selectedValues.values().next().value}` +
+        (selectedValues.size > 1 ? ` 외 ${selectedValues.size - 1}개` : '')
       : ''
-    : options.find(o => o.value === selectedValues[0])?.label || ''
+    : options.find(o => o.value === selectedValues.values().next().value)
+        ?.label || ''
   const triggerStyle = cn({
     'pointer-events-none cursor-not-allowed': disabled,
   })
   const triggerBoxClass = cn(
     'h-48 w-210 justify-between p-12 text-body1 font-medium text-gray-500 focus:border-primary-normal',
-    { 'text-gray-800': selectedValues.length },
+    { 'text-gray-800': selectedValues.size },
     { 'bg-gray-200 text-gray-400': disabled },
     className
   )

src/middleware.ts

@@ -6,16 +6,14 @@ import { requestNewToken } from '@/services/auth/auth'
 
 import { middlewareBufferTime } from './constants/auth'
 
-requestNewToken
-
 export const config = {
   matcher: ['/protected', '/protected/:path*'],
 }
 
 export async function middleware(req: NextRequest): Promise<NextResponse> {
-  let cookies = req.cookies
-  let oldAccessToken = cookies.get('accessToken')?.value as string
-  let refreshToken = cookies.get('refreshToken')?.value as string
+  const cookies = req.cookies
+  const oldAccessToken = cookies.get('accessToken')?.value as string
+  const refreshToken = cookies.get('refreshToken')?.value as string
 
   console.log('Access Token:', oldAccessToken)
   console.log('Refresh Token:', refreshToken)
@@ -27,7 +25,7 @@ export async function middleware(req: NextRequest): Promise<NextResponse> {
 
   try {
     let decodedToken = jwt.decode(oldAccessToken) as { exp?: number }
-    let currentTime = Math.floor(Date.now() / 1000)
+    const currentTime = Math.floor(Date.now() / 1000)
     let expirationTime = decodedToken?.exp
 
     if (expirationTime && expirationTime > currentTime) {
@@ -44,7 +42,7 @@ export async function middleware(req: NextRequest): Promise<NextResponse> {
         if (newTokenResponse.success && newTokenResponse.result) {
           const newAccessToken = newTokenResponse.result.accessToken
           const response = NextResponse.next()
-          
+
           // 새로운 Access Token 디코딩
           decodedToken = jwt.decode(newAccessToken) as { exp?: number }
           expirationTime = decodedToken?.exp || 0

src/services/team/index.ts

@@ -1,3 +1,4 @@
+import { ApiResponse } from '@/types/api/ApiResponse.types'
 import {
   AddTeamMemberRequest,
   AddTeamMemberResponse,