feat: 활동 추천 기능 타이머 제외 완성

- 자투리 시간 입력 완
- 온오프라인 선택 완
- 현재 위치 탐색 및 검색 완
- 키워드 선택 완
- 추천 받은 활동 캐러셀 구현 완
- 이 활동하기 버튼 시 새 탭이 생성되며, 활동 타이머 패이지로 넘어감
- 백엔드 API 구현 완료 시 연동 예정
- 키워드 이미지 svgr 적용 후 변경 예정
- 타이머 오류로 인해 수정 중

package.json

@@ -21,6 +21,8 @@
     "next": "14.2.14",
     "react": "^18",
     "react-dom": "^18",
+    "react-kakao-maps-sdk": "^1.1.27",
+    "swiper": "^11.1.15",
     "tailwind-merge": "^2.5.3",
     "zustand": "^5.0.0"
   },

src/app/activity/page.tsx

@@ -0,0 +1,3 @@
+export default function ActivityPage() {
+  return <div>액티비티여</div>
+}

src/app/home/sg-activity/components/ChoiceKeyword.tsx

@@ -1,3 +1,104 @@
-export default function ChoiceKeyword() {
-  return <div></div>
+'use client'
+
+import useUserInfo from '@/store/useUserInfo'
+import { useActivityStore } from '@/store/activityStore'
+import { useEffect, useMemo } from 'react'
+import Image from 'next/image'
+import { setErrorProps } from '../types/types'
+
+export default function ChoiceKeyword({ setError }: setErrorProps) {
+  const { userInfo } = useUserInfo()
+  const { nickname } = userInfo
+  const { activityType, keywords, setKeywords } = useActivityStore()
+  const keywordList = [
+    'SELF_DEVELOPMENT',
+    'HEALTH',
+    'NATURE',
+    'CULTURE_ART',
+    'ENTERTAINMENT',
+    'RELAXATION',
+    'SOCIAL',
+  ]
+
+  const MAX_KEYWORDS = 5
+
+  useEffect(() => {
+    if (keywords.length > 0) {
+      setError(false)
+    } else {
+      setError(true)
+    }
+  }, [keywords])
+
+  const filteredKeywordList = useMemo(() => {
+    if (activityType.includes('오프라인') && !activityType.includes('온라인')) {
+      return keywordList.filter((keyword) => keyword !== 'SOCIAL')
+    }
+    if (activityType.includes('온라인') && !activityType.includes('오프라인')) {
+      return keywordList.filter((keyword) => keyword !== 'NATURE')
+    }
+    return keywordList
+  }, [activityType])
+
+  const toggleKeyword = (keyword: string) => {
+    if (keywords.includes(keyword)) {
+      const updateKeywords = keywords.filter((k) => k != keyword)
+
+      setKeywords(updateKeywords)
+    } else if (keywords.length < MAX_KEYWORDS) {
+      const updateKeywords = [...keywords, keyword]
+
+      setKeywords(updateKeywords)
+    }
+  }
+
+  const getImageName = (keyword: string) => {
+    if (keywords.includes(keyword)) {
+      return `${keyword}_selected.png`
+    }
+    if (keywords.length >= MAX_KEYWORDS) {
+      return `${keyword}_disabled.png`
+    }
+    return `${keyword}.png`
+  }
+
+  return (
+    <div className="w-342 mx-auto mt-50">
+      <section>
+        <h3 className="font-semibold text-24">
+          {nickname} 님이 선호하는
+          <br />
+          활동 키워드를 선택해 주세요
+        </h3>
+        <p className="text-14 text-primay_foundation-50 mt-10">
+          키워드는 최대 5개까지 선택 가능해요
+        </p>
+        {/* <button>
+          활동 키워드 알아보기
+        </button> */}
+      </section>
+
+      <section className="grid grid-cols-3 gap-4 mt-50">
+        {filteredKeywordList.map((keyword) => (
+          <div
+            key={keyword}
+            className={`flex flex-col items-center cursor-pointer ${
+              keywords.length >= MAX_KEYWORDS && !keywords.includes(keyword)
+                ? 'pointer-events-none opacity-50' // 비활성화 상태
+                : ''
+            }`}
+            onClick={() => toggleKeyword(keyword)}
+          >
+            <Image
+              src={`/images/${getImageName(keyword)}`}
+              alt={keyword}
+              width={104}
+              height={104}
+              className="mb-5"
+            />
+          </div>
+        ))}
+      </section>
+    </div>
+  )
 }