통계화면 완성

components/combobox/index.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import { cn } from '@/lib/client/utils'
-
 const variants = {
   open: {
     opacity: 1,
@@ -26,24 +25,26 @@ const variants = {
 }
 
 interface ComboboxDropdownProps {
-  options: string[]
+  options: { label: string; value: string }[]
   onSelect: (selectedOption: string) => void
   disabled?: boolean
   className?: string
+  placeholder?: string
 }
 
 const ComboboxDropdown: React.FC<ComboboxDropdownProps> = ({
   options,
   onSelect,
   disabled = false,
   className,
+  placeholder,
 }) => {
   const [isOpen, setIsOpen] = useState(false)
   const [selectedOption, setSelectedOption] = useState<string | null>(null)
 
-  const handleOptionClick = (option: string) => {
-    setSelectedOption(option)
-    onSelect(option)
+  const handleOptionClick = (value: string) => {
+    setSelectedOption(value)
+    onSelect(value)
     setIsOpen(false)
   }
 
@@ -60,7 +61,7 @@ const ComboboxDropdown: React.FC<ComboboxDropdownProps> = ({
         disabled={disabled}
       >
         <span className={cn(selectedOption && 'font-bold')}>
-          {selectedOption || 'Select an option'}
+          {selectedOption ? selectedOption : placeholder}
         </span>
 
         <svg
@@ -88,35 +89,36 @@ const ComboboxDropdown: React.FC<ComboboxDropdownProps> = ({
             variants={variants}
             className="absolute z-10 w-full mt-2 bg-white rounded-md shadow-lg"
           >
-            {options.map((option, index) => (
-              <motion.li
-                key={index}
-                onClick={() => handleOptionClick(option)}
-                className={cn(
-                  'px-4 py-2 cursor-pointer select-none',
-                  index === options.length - 1 ? 'rounded-b-md' : '',
-                  selectedOption === option && 'font-bold',
-                  !disabled && 'hover:bg-gray-gray50',
-                )}
-                initial={{ opacity: 0, y: -10 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{
-                  delay: index * 0.07,
-                  duration: 0.3,
-                  ease: 'easeInOut',
-                  type: 'spring',
-                  stiffness: 500,
-                  damping: 20,
-                }}
-              >
-                {option}
-              </motion.li>
-            ))}
+            {options.map((option, index) => {
+              return (
+                <motion.li
+                  key={index}
+                  onClick={() => handleOptionClick(option.value)}
+                  className={cn(
+                    'px-4 py-2 cursor-pointer select-none text-left',
+                    index === options.length - 1 ? 'rounded-b-md' : '',
+                    selectedOption === option.value && 'font-bold',
+                    !disabled && 'hover:bg-gray-gray50',
+                  )}
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{
+                    delay: index * 0.07,
+                    duration: 0.3,
+                    ease: 'easeInOut',
+                    type: 'spring',
+                    stiffness: 500,
+                    damping: 20,
+                  }}
+                >
+                  {option.label}
+                </motion.li>
+              )
+            })}
           </motion.ul>
         )}
       </AnimatePresence>
     </div>
   )
 }
-
 export default ComboboxDropdown

components/dashboard/best-worth/index.tsx

@@ -143,7 +143,7 @@ function BestWorth() {
 
   return (
     <div ref={ref} className="w-full h-full flex flex-col">
-      <h2 className="text-mainTitle2 font-bold">
+      <h2 className="text-mainTitle2-bold font-bold">
         가장 중요한 것은 <b className="text-brand-main-green400">명예</b>
         이네요
       </h2>

components/dashboard/happy/index.tsx

@@ -0,0 +1,109 @@
+import Button from '@/components/button'
+import { useInViewRef } from '@/hooks/use-in-view-ref'
+import { cn } from '@/lib/client/utils'
+import { HTMLMotionProps, m, LazyMotion, domAnimation } from 'framer-motion'
+import React from 'react'
+
+const Happy = () => {
+  const { inView, ref } = useInViewRef<HTMLDivElement>({
+    once: true,
+    amount: 'all',
+  })
+  return (
+    <LazyMotion features={domAnimation}>
+      <div>
+        <h2 className="text-mainTitle2-bold mb-5">
+          기쁠 때
+          <br />
+          <b className="text-brand-main-green400 break-keep">
+            사람들에게 알리고 축하를 받아요
+          </b>
+        </h2>
+        <div
+          ref={ref}
+          className="flex flex-col justify-center space-y-8 px-8 py-12 rounded-2xl shadow-basic mx-auto"
+        >
+          <Bar
+            active={inView}
+            color="#00BC68"
+            percent={100}
+            title="사람들에게 알리고 축하를 받아요"
+            accent
+          />
+          <Bar
+            active={inView}
+            color="#199EF0"
+            percent={50}
+            title="혼자 조용히 즐겨요"
+          />
+          <Bar
+            active={inView}
+            color="#FFEB34"
+            percent={21}
+            title="맛있는 음식을 먹어요"
+          />
+        </div>
+        <div className="w-1/2  mx-auto mt-10">
+          <Button
+            rounded="full"
+            variant="muted"
+            className="bg-text-main-whiteFF"
+          >
+            자세히 보기
+          </Button>
+        </div>
+      </div>
+    </LazyMotion>
+  )
+}
+
+export default Happy
+
+interface BarProps extends HTMLMotionProps<'div'> {
+  title: string
+  percent: number
+  color: string
+  active?: boolean
+  accent?: boolean
+}
+
+function Bar({
+  color,
+  title,
+  percent,
+  active = false,
+  accent = false,
+  ...rest
+}: BarProps) {
+  const font = accent ? 'text-body1-bold' : 'title-body-medium'
+  const 최소바크기보정값 = (80 * percent) / 100 + 10
+  return (
+    <div className="flex flex-col space-y-3">
+      <h3 className={cn('text-text-main-black11', font)}>{title}</h3>
+      <div className="flex space-x-2 w-full">
+        <m.div
+          {...rest}
+          initial={{ width: '0%' }}
+          animate={
+            active
+              ? {
+                  width: `${최소바크기보정값}%`,
+                  transition: {
+                    delay: 0.15,
+                    duration: 0.5,
+                  },
+                }
+              : {}
+          }
+          className="w-full rounded-full h-6"
+          style={{
+            backgroundColor: color,
+          }}
+        />
+        <p className={cn(font)} style={accent ? { color } : {}}>
+          {percent}%
+        </p>
+      </div>
+    </div>
+  )
+}

components/dashboard/money/index.tsx

@@ -53,9 +53,11 @@ function Bar({ active, value, isMe = true }: BarProps) {
       <div className="w-14 mx-auto flex flex-col items-center justify-end h-40">
         <div
           className={cn(
-            'w-fit relative rounded-md text-body3-bold whitespace-nowrap text-text-main-whiteFF items-center justify-center',
+            'w-fit relative rounded-md text-body3-bold whitespace-nowrap  items-center justify-center',
             'mb-4 px-2 py-1',
-            isMe ? 'bg-brand-sub1-yellow900' : 'bg-gray-gray100',
+            isMe
+              ? 'bg-brand-sub1-yellow900 text-text-main-whiteFF'
+              : 'bg-gray-gray100 text-text-sub-gray76',
           )}
         >
           {(1384843).toLocaleString()}원
@@ -108,9 +110,8 @@ function Bar({ active, value, isMe = true }: BarProps) {
       <p
         className={cn(
           'w-fit mx-auto mt-4',
-          isMe
-            ? 'text-text-main-black11 text-body1-bold'
-            : 'text-text-sub-gray76 text-body1-medium',
+          isMe && 'text-text-main-black11 text-body1-bold',
+          !isMe && 'text-text-sub-gray76 text-body1-medium opacity-50',
         )}
       >
         {isMe ? '김디엔님' : '이용자 평균'}