Feat/#170피드백

src/components/Common/DreamerFilter.tsx

@@ -1,38 +1,46 @@
-import React, { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
-import downBlue from '@public/assets/dropdown_down_blue.svg';
-import downGray from '@public/assets/dropdown_down_gray.svg';
+import React, { useState, useEffect, useRef } from "react";
+import Image from "next/image";
+import downBlue from "@public/assets/dropdown_down_blue.svg";
+import downGray from "@public/assets/dropdown_down_gray.svg";
 
-const placeholder = '지역';
-const items = ['전체', '서울', '경기', '인천', '강원', '충북', '충남', '세종', '대전', '전북'];
-const placeholder2 = '서비스';
-const items2 = ['전체', '기념품/쇼핑형', '맛집 탐방형', '액티비티/탐험형', '문화/역사탐방형', '축제참여형', '휴양형'];
+const placeholder = "지역";
+const items = ["전체", "서울", "경기", "인천", "강원", "충북", "충남", "세종", "대전", "전북"];
+const placeholder2 = "서비스";
+const items2 = [
+  "전체",
+  "기념품/쇼핑형",
+  "맛집 탐방형",
+  "액티비티/탐험형",
+  "문화/역사탐방형",
+  "축제참여형",
+  "휴양형",
+];
 
 const serviceTypeMapping: Record<string, string> = {
-  '전체': '',
-  '기념품/쇼핑형': 'SHOPPING',
-  '맛집 탐방형': 'FOOD_TOUR',
-  '액티비티/탐험형': 'ACTIVITY',
-  '문화/역사탐방형': 'CULTURE',
-  '축제참여형': 'FESTIVAL',
-  '휴양형': 'RELAXATION',
+  전체: "",
+  "기념품/쇼핑형": "SHOPPING",
+  "맛집 탐방형": "FOOD_TOUR",
+  "액티비티/탐험형": "ACTIVITY",
+  "문화/역사탐방형": "CULTURE",
+  축제참여형: "FESTIVAL",
+  휴양형: "RELAXATION",
 };
 
 const areaMapping: Record<string, string> = {
-  '전체': '',
-  '서울': 'SEOUL',
-  '경기': 'GYEONGGI',
-  '인천': 'INCHEON',
-  '강원': 'GANGWON',
-  '충북': 'CHUNGBUK',
-  '충남': 'CHUNGNAM',
-  '세종': 'SEJONG',
-  '대전': 'DAEJEON',
-  '전북': 'JEONBUK',
+  전체: "",
+  서울: "SEOUL",
+  경기: "GYEONGGI",
+  인천: "INCHEON",
+  강원: "GANGWON",
+  충북: "CHUNGBUK",
+  충남: "CHUNGNAM",
+  세종: "SEJONG",
+  대전: "DAEJEON",
+  전북: "JEONBUK",
 };
 
 interface DreamerFilterProps {
-  type: 'location' | 'service';
+  type: "location" | "service";
   reset: boolean;
   onSelect: (selectedItem: string) => void;
 }
@@ -59,67 +67,57 @@ const DreamerFilter = ({ type, reset, onSelect }: DreamerFilterProps) => {
   };
 
   useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
 
-  const itemsToDisplay = type === 'location' ? items : items2;
-  const placeholderText = type === 'location' ? placeholder : placeholder2;
+  const itemsToDisplay = type === "location" ? items : items2;
+  const placeholderText = type === "location" ? placeholder : placeholder2;
 
   const handleItemClick = (item: string) => {
     if (itemsToDisplay.includes(item)) {
       setSelectedItem(item);
       setIsOpen(false);
-      const mappedValue = type === 'service' ? serviceTypeMapping[item] : areaMapping[item];
+      const mappedValue = type === "service" ? serviceTypeMapping[item] : areaMapping[item];
       onSelect(mappedValue);
     }
   };
 
   return (
-    <div ref={dropdownRef} className="w-full relative">
+    <div ref={dropdownRef} className="relative w-full">
       <button
         onClick={toggleDropdown}
-        className={`w-[328px] h-16 px-6 py-4 flex justify-between items-center border-[1px] rounded-[16px] cursor-pointer transition duration-200 shadow-sm 
-          ${isOpen ? 'border-color-blue-300 bg-color-blue-50 shadow-md' : ''} 
-          ${selectedItem ? 'border-color-blue-300 bg-color-blue-50' : 'border-color-line-200'} 
-          ${type === 'service' ? 'mobile-tablet:w-[150px]' : 'mobile-tablet:w-[75px]'}
-            mobile-tablet:h-[36px] mobile-tablet:rounded-[8px] mobile-tablet:border-[1px] mobile-tablet:pl-[14px] mobile-tablet:pr-[10px] mobile-tablet:py-[6px]
-          pc:max-w-[328px]
-          `}
+        className={`flex h-16 w-[328px] cursor-pointer items-center justify-between rounded-[16px] border-[1px] px-6 py-4 shadow-sm transition duration-200 ${isOpen ? "border-color-blue-300 bg-color-blue-50 shadow-md" : ""} ${selectedItem ? "border-color-blue-300 bg-color-blue-50" : "border-color-line-200"} ${type === "service" ? "mobile-tablet:w-[150px]" : "mobile-tablet:w-[75px]"} pc:max-w-[328px] mobile-tablet:h-[36px] mobile-tablet:rounded-[8px] mobile-tablet:border-[1px] mobile-tablet:py-[6px] mobile-tablet:pl-[14px] mobile-tablet:pr-[10px]`}
       >
         <p
-          className={` text-color-black-400 text-[18px] mobile-tablet:text-[14px]
-            ${selectedItem ? 'text-color-blue-300' : ''}`}
+          className={`text-[18px] text-color-black-400 mobile-tablet:text-[14px] ${selectedItem ? "text-color-blue-300" : ""}`}
         >
           {selectedItem || placeholderText}
         </p>
         <Image
           src={isOpen ? downBlue : downGray}
           alt="dropdown icon"
-          className={`transition-transform duration-200 mobile-tablet:w-[20px] mobile-tablet:h-[20px] pc:w-[36px] pc:h-[36px] ${isOpen ? 'transform rotate-180' : ''}`}
+          className={`transition-transform duration-200 pc:h-[36px] pc:w-[36px] mobile-tablet:h-[20px] mobile-tablet:w-[20px] ${isOpen ? "rotate-180 transform" : ""}`}
         />
       </button>
       {isOpen && (
-        <div className={`
-          w-[328px] h-80 absolute top-20 border border-gray-300 bg-gray-50 rounded-[16px] z-10 shadow-sm transition-all duration-300 ease-in-out overflow-y-scroll 
-          mobile-tablet:top-full mobile-tablet:left-0 mobile-tablet:rounded-[8px] mobile-tablet:border-[1px] 
-          ${type === 'service' ? 'mobile-tablet:w-full mobile-tablet:h-[144px]' : 'mobile-tablet:w-[150px] tablet:h-[179px] mobile:h-[180px]'} 
-          ${isOpen ? 'z-50 shadow-md' : 'opacity-0 pointer-events-none'} 
-          `}>
-          <div className={`${type === 'location' ? 'grid grid-cols-2 mt-2' : 'flex flex-col w-full mt-2'}`}>
-            {itemsToDisplay.map(item => (
+        <div
+          className={`absolute top-20 z-10 h-80 w-[328px] overflow-y-scroll rounded-[16px] border border-gray-300 bg-gray-50 shadow-sm transition-all duration-300 ease-in-out mobile-tablet:left-0 mobile-tablet:top-full mobile-tablet:rounded-[8px] mobile-tablet:border-[1px] ${type === "service" ? "mobile-tablet:h-[144px] mobile-tablet:w-full" : "mobile:h-[180px] tablet:h-[179px] mobile-tablet:w-[150px]"} ${isOpen ? "z-50 shadow-md" : "pointer-events-none opacity-0"} `}
+        >
+          <div
+            className={`${type === "location" ? "mt-2 grid grid-cols-2" : "mt-2 flex w-full flex-col"}`}
+          >
+            {itemsToDisplay.map((item) => (
               <button
                 key={item}
                 onClick={() => handleItemClick(item)}
-                className={`h-[64px] justify-between px-[24px] py-[16px] font-medium text-color-black-400 cursor-pointer transition duration-200 hover:bg-gray-100
-                  mobile-tablet:w-full mobile-tablet:h-auto mobile-tablet:px-[14px] mobile-tablet:py-[8px]
-
-                  ${type === 'service' ? 
-                    'text-left w-full mobile-tablet:text-[14px] mobile-tablet:w-full'
-                    : 'border-r-[1px] border-l-[1px] mobile-tablet:text-[14px]'}
-                  `}
+                className={`h-[64px] cursor-pointer justify-between px-[24px] py-[16px] font-medium text-color-black-400 transition duration-200 hover:bg-gray-100 mobile-tablet:h-auto mobile-tablet:w-full mobile-tablet:px-[14px] mobile-tablet:py-[8px] ${
+                  type === "service"
+                    ? "w-full text-left mobile-tablet:w-full mobile-tablet:text-[14px]"
+                    : "border-l-[1px] border-r-[1px] mobile-tablet:text-[14px]"
+                } `}
               >
                 {item}
               </button>
@@ -131,4 +129,4 @@ const DreamerFilter = ({ type, reset, onSelect }: DreamerFilterProps) => {
   );
 };
 
-export default DreamerFilter;
+export default DreamerFilter;

src/components/Common/Selector.tsx

@@ -6,14 +6,16 @@ const Services = ({
   data,
   className,
   itemClassName,
+  useWide,
 }: {
   selectedTypes: string[];
   toggleSelection?: (type: string) => void;
   data?: Service[];
   className?: string;
   itemClassName?: string;
+  useWide?: boolean;
 }) => (
-  <div className={`${className ?? "grid grid-cols-3 gap-3"} `}>
+  <div className={`${className ?? "grid grid-cols-3 gap-3"} ${useWide ? "w-[510px]" : ""}`}>
     {(data || planData.services).map((service, index) => (
       <div
         key={index}
@@ -69,13 +71,15 @@ export default function Selector({
   data,
   className,
   itemClassName,
+  useWide,
 }: {
   category: string;
   selectedTypes: string[];
   toggleSelection?: (type: string) => void;
   data?: Service[] | Location[];
   className?: string;
   itemClassName?: string;
+  useWide?: boolean;
 }) {
   return (
     <>
@@ -86,6 +90,7 @@ export default function Selector({
           data={data as Service[]}
           className={className}
           itemClassName={itemClassName}
+          useWide={useWide}
         />
       )}
       {category === "locations" && (

src/components/Gnb/NavBar.tsx

@@ -57,23 +57,14 @@ const getNotification = () => {
 };
 
 const NavBar = () => {
-  const {
-    isLoggedIn,
-    nickName,
-    role,
-    coconut,
-    setCoconut,
-    email,
-    phoneNumber,
-    profileImage,
-    setLogin,
-  } = useAuthStore();
+  const { isLoggedIn, nickName, role, coconut, setCoconut, email, phoneNumber, setLogin } =
+    useAuthStore();
   const [isOpenSidebar, setIsOpenSidebar] = useState<boolean>(false);
   const [isOpenNotification, setIsOpenNotification] = useState<boolean>(false);
   const [isOpenUserMenu, setIsOpenUserMenu] = useState<boolean>(false);
   const [userInfo, setUserInfo] = useState<any>(null);
   const [notifications, setNotifications] = useState<NotificationProps[]>([]);
-  const [userImage, setUserImage] = useState<string>(profileImage || user_img.src);
+  const [userImage, setUserImage] = useState<string>(user_img.src);
   const userMenuRef = useRef<HTMLDivElement | null>(null);
   const notificationRef = useRef<HTMLDivElement | null>(null);
   const sideBarRef = useRef<HTMLDivElement | null>(null);
@@ -163,11 +154,12 @@ const NavBar = () => {
       const fetchUserInfo = async () => {
         try {
           const userData = await userService.getUserInfo();
+          const profileData = await userService.getProfileInfo();
 
           setUserInfo(userData);
-          const avatarImage = avatarImages.find((avatar) => avatar.key === profileImage);
+          const avatarImage = avatarImages.find((avatar) => avatar.key === profileData.image);
           setUserImage(avatarImage ? avatarImage.src : user_img.src);
-          setLogin(nickName, role, coconut, email, phoneNumber, profileImage);
+          setLogin(nickName, role, coconut, email, phoneNumber);
           if (userData.coconut !== coconut) {
             handleCoconutChange(userData.coconut);
           }