diff --git a/frontend/src/assets/images/icons/category_button/category_all_button_icon.svg b/frontend/src/assets/images/icons/category_button/category_all_button_icon.svg index 684b705cf..a94994ab6 100644 --- a/frontend/src/assets/images/icons/category_button/category_all_button_icon.svg +++ b/frontend/src/assets/images/icons/category_button/category_all_button_icon.svg @@ -1,6 +1,7 @@ - - - - - + + + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_all_button_icon_active.svg b/frontend/src/assets/images/icons/category_button/category_all_button_icon_active.svg new file mode 100644 index 000000000..8de36efe3 --- /dev/null +++ b/frontend/src/assets/images/icons/category_button/category_all_button_icon_active.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_hobby_button_icon.svg b/frontend/src/assets/images/icons/category_button/category_hobby_button_icon.svg index 280c0d80a..e50044c06 100644 --- a/frontend/src/assets/images/icons/category_button/category_hobby_button_icon.svg +++ b/frontend/src/assets/images/icons/category_button/category_hobby_button_icon.svg @@ -1,11 +1,7 @@ - - - - - - - - - - + + + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_hobby_button_icon_active.svg b/frontend/src/assets/images/icons/category_button/category_hobby_button_icon_active.svg new file mode 100644 index 000000000..4ecf0d866 --- /dev/null +++ b/frontend/src/assets/images/icons/category_button/category_hobby_button_icon_active.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_performance_button_icon.svg b/frontend/src/assets/images/icons/category_button/category_performance_button_icon.svg index 209498dcb..e484552d3 100644 --- a/frontend/src/assets/images/icons/category_button/category_performance_button_icon.svg +++ b/frontend/src/assets/images/icons/category_button/category_performance_button_icon.svg @@ -1,13 +1,5 @@ - - - - - - - - - - - - + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_performance_button_icon_active.svg b/frontend/src/assets/images/icons/category_button/category_performance_button_icon_active.svg new file mode 100644 index 000000000..dbec135e0 --- /dev/null +++ b/frontend/src/assets/images/icons/category_button/category_performance_button_icon_active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_religion_button_icon.svg b/frontend/src/assets/images/icons/category_button/category_religion_button_icon.svg index c8b57f892..8f558c619 100644 --- a/frontend/src/assets/images/icons/category_button/category_religion_button_icon.svg +++ b/frontend/src/assets/images/icons/category_button/category_religion_button_icon.svg @@ -1,20 +1,5 @@ - - - - - - - - - - - - - - - - - - - + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_religion_button_icon_active.svg b/frontend/src/assets/images/icons/category_button/category_religion_button_icon_active.svg new file mode 100644 index 000000000..2e116b990 --- /dev/null +++ b/frontend/src/assets/images/icons/category_button/category_religion_button_icon_active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_sport_button_icon.svg b/frontend/src/assets/images/icons/category_button/category_sport_button_icon.svg index ecd780d9f..9f7efdfb0 100644 --- a/frontend/src/assets/images/icons/category_button/category_sport_button_icon.svg +++ b/frontend/src/assets/images/icons/category_button/category_sport_button_icon.svg @@ -1,30 +1,4 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + diff --git a/frontend/src/assets/images/icons/category_button/category_sport_button_icon_active.svg b/frontend/src/assets/images/icons/category_button/category_sport_button_icon_active.svg new file mode 100644 index 000000000..443de7d09 --- /dev/null +++ b/frontend/src/assets/images/icons/category_button/category_sport_button_icon_active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_study_button_icon.svg b/frontend/src/assets/images/icons/category_button/category_study_button_icon.svg index 149a3d8f1..98aa93c0b 100644 --- a/frontend/src/assets/images/icons/category_button/category_study_button_icon.svg +++ b/frontend/src/assets/images/icons/category_button/category_study_button_icon.svg @@ -1,14 +1,5 @@ - - - - - - - - - - - - - + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_study_button_icon_active.svg b/frontend/src/assets/images/icons/category_button/category_study_button_icon_active.svg new file mode 100644 index 000000000..8a4bb4077 --- /dev/null +++ b/frontend/src/assets/images/icons/category_button/category_study_button_icon_active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_volunteer_button_icon.svg b/frontend/src/assets/images/icons/category_button/category_volunteer_button_icon.svg index 4492f88e7..cf0a53ead 100644 --- a/frontend/src/assets/images/icons/category_button/category_volunteer_button_icon.svg +++ b/frontend/src/assets/images/icons/category_button/category_volunteer_button_icon.svg @@ -1,6 +1,5 @@ - - - - - + + + + diff --git a/frontend/src/assets/images/icons/category_button/category_volunteer_button_icon_active.svg b/frontend/src/assets/images/icons/category_button/category_volunteer_button_icon_active.svg new file mode 100644 index 000000000..8ccc84737 --- /dev/null +++ b/frontend/src/assets/images/icons/category_button/category_volunteer_button_icon_active.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/frontend/src/assets/images/icons/category_button/index.ts b/frontend/src/assets/images/icons/category_button/index.ts new file mode 100644 index 000000000..3d3fa1f45 --- /dev/null +++ b/frontend/src/assets/images/icons/category_button/index.ts @@ -0,0 +1,34 @@ +import iconAll from '@/assets/images/icons/category_button/category_all_button_icon.svg'; +import iconVolunteer from '@/assets/images/icons/category_button/category_volunteer_button_icon.svg'; +import iconReligion from '@/assets/images/icons/category_button/category_religion_button_icon.svg'; +import iconHobby from '@/assets/images/icons/category_button/category_hobby_button_icon.svg'; +import iconStudy from '@/assets/images/icons/category_button/category_study_button_icon.svg'; +import iconSport from '@/assets/images/icons/category_button/category_sport_button_icon.svg'; +import iconPerformance from '@/assets/images/icons/category_button/category_performance_button_icon.svg'; +import iconAllActive from '@/assets/images/icons/category_button/category_all_button_icon_active.svg'; +import iconVolunteerActive from '@/assets/images/icons/category_button/category_volunteer_button_icon_active.svg'; +import iconReligionActive from '@/assets/images/icons/category_button/category_religion_button_icon_active.svg'; +import iconHobbyActive from '@/assets/images/icons/category_button/category_hobby_button_icon_active.svg'; +import iconStudyActive from '@/assets/images/icons/category_button/category_study_button_icon_active.svg'; +import iconSportActive from '@/assets/images/icons/category_button/category_sport_button_icon_active.svg'; +import iconPerformanceActive from '@/assets/images/icons/category_button/category_performance_button_icon_active.svg'; + +export const inactiveCategoryIcons : Record = { + all : iconAll, + volunteer : iconVolunteer, + religion : iconReligion, + hobby : iconHobby, + study : iconStudy, + sport : iconSport, + performance : iconPerformance +} + +export const activeCategoryIcons : Record = { + all : iconAllActive, + volunteer : iconVolunteerActive, + religion : iconReligionActive, + hobby : iconHobbyActive, + study : iconStudyActive, + sport : iconSportActive, + performance : iconPerformanceActive +} diff --git a/frontend/src/constants/CLUB_UNION_INFO.ts b/frontend/src/constants/CLUB_UNION_INFO.ts index f3e004ef9..1956391c7 100644 --- a/frontend/src/constants/CLUB_UNION_INFO.ts +++ b/frontend/src/constants/CLUB_UNION_INFO.ts @@ -1,10 +1,4 @@ -import PresidentAvatar from '@/assets/images/icons/category_button/category_all_button_icon.svg'; -import ReligionAvatar from '@/assets/images/icons/category_button/category_religion_button_icon.svg'; -import HobbyAvatar from '@/assets/images/icons/category_button/category_hobby_button_icon.svg'; -import StudyAvatar from '@/assets/images/icons/category_button/category_study_button_icon.svg'; -import VolunteerAvatar from '@/assets/images/icons/category_button/category_volunteer_button_icon.svg'; -import PerformanceAvatar from '@/assets/images/icons/category_button/category_performance_button_icon.svg'; -import SportAvatar from '@/assets/images/icons/category_button/category_sport_button_icon.svg'; +import {inactiveCategoryIcons} from '@/assets/images/icons/category_button'; export interface ClubUnionMember { id: number; @@ -15,16 +9,16 @@ export interface ClubUnionMember { } const MEMBER_AVATARS = { - PRESIDENT: PresidentAvatar, - VICE_PRESIDENT: PresidentAvatar, - SECRETARY: PresidentAvatar, - PROMOTION: PresidentAvatar, - RELIGION: ReligionAvatar, - HOBBY: HobbyAvatar, - STUDY: StudyAvatar, - VOLUNTEER: VolunteerAvatar, - PERFORMANCE: PerformanceAvatar, - SPORT: SportAvatar, + PRESIDENT: inactiveCategoryIcons.all, + VICE_PRESIDENT: inactiveCategoryIcons.all, + SECRETARY: inactiveCategoryIcons.all, + PROMOTION: inactiveCategoryIcons.all, + RELIGION: inactiveCategoryIcons.religion, + HOBBY: inactiveCategoryIcons.hobby, + STUDY: inactiveCategoryIcons.study, + VOLUNTEER: inactiveCategoryIcons.volunteer, + PERFORMANCE: inactiveCategoryIcons.performance, + SPORT: inactiveCategoryIcons.sport, }; // 개발자 가이드: description 필드는 UI가 깨지지 않도록 글자 수를 제한합니다. diff --git a/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts b/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts index c7c96f24e..fbe645b65 100644 --- a/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts +++ b/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.styles.ts @@ -4,11 +4,10 @@ export const CategoryButtonContainer = styled.div` display: flex; justify-content: space-between; flex-wrap: nowrap; - margin-top: 60px; + margin-top: 32px; @media (max-width: 500px) { - margin: 0 -10px; - margin-top: 16px; + margin: 16px 0 12px 0; background-color: white; position: sticky; top: 56px; @@ -23,7 +22,7 @@ export const CategoryButton = styled.button` border: none; background: none; cursor: pointer; - padding: 8px; + padding: 8px 0px; transition: transform 0.1s ease; &:active { @@ -31,43 +30,42 @@ export const CategoryButton = styled.button` } img { - width: 36px; - height: 36px; + width: 56px; + height: 56px; transition: transform 0.2s ease; @media (max-width: 500px) { - margin-top: 5px; - width: 30px; - height: 30px; + width: 40px; + height: 40px; } @media (max-width: 360px) { - width: 25px; - height: 25px; + width: 23px; + height: 23px; } } span { - font-size: 1rem; + font-size: 14px; font-weight: 500; - margin-top: 11px; + color: #787878; + margin-top: 8px; line-height: 30px; white-space: nowrap; @media (max-width: 768px) { - font-size: 14px; + font-size: 12px; margin-top: 10px; } @media (max-width: 500px) { - font-size: 12px; - margin-top: 11px; + font-size: 10px; + margin-top: 4px; line-height: normal; - margin-bottom: 5px; } @media (max-width: 375px) { - font-size: 11px; - margin-top: 8px; + font-size: 10px; + margin-top: 2px; line-height: normal; } } diff --git a/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx b/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx index f9274db19..b65f6f51d 100644 --- a/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx +++ b/frontend/src/pages/MainPage/components/CategoryButtonList/CategoryButtonList.tsx @@ -1,12 +1,6 @@ import useMixpanelTrack from '@/hooks/useMixpanelTrack'; import * as Styled from './CategoryButtonList.styles'; -import iconAll from '@/assets/images/icons/category_button/category_all_button_icon.svg'; -import iconVolunteer from '@/assets/images/icons/category_button/category_volunteer_button_icon.svg'; -import iconReligion from '@/assets/images/icons/category_button/category_religion_button_icon.svg'; -import iconHobby from '@/assets/images/icons/category_button/category_hobby_button_icon.svg'; -import iconStudy from '@/assets/images/icons/category_button/category_study_button_icon.svg'; -import iconSport from '@/assets/images/icons/category_button/category_sport_button_icon.svg'; -import iconPerformance from '@/assets/images/icons/category_button/category_performance_button_icon.svg'; +import { inactiveCategoryIcons, activeCategoryIcons } from '@/assets/images/icons/category_button'; import { useSearchStore } from '@/store/useSearchStore'; import { useSelectedCategory } from '@/store/useCategoryStore'; import { EVENT_NAME } from '@/constants/eventName'; @@ -14,21 +8,21 @@ import { EVENT_NAME } from '@/constants/eventName'; interface Category { id: string; name: string; - icon: string; + type: string; } const clubCategories: Category[] = [ - { id: 'all', name: '전체', icon: iconAll }, - { id: '봉사', name: '봉사', icon: iconVolunteer }, - { id: '종교', name: '종교', icon: iconReligion }, - { id: '취미교양', name: '취미교양', icon: iconHobby }, - { id: '학술', name: '학술', icon: iconStudy }, - { id: '운동', name: '운동', icon: iconSport }, - { id: '공연', name: '공연', icon: iconPerformance }, + { id: 'all', name: '전체', type: 'all' }, + { id: '봉사', name: '봉사', type: 'volunteer' }, + { id: '종교', name: '종교', type: 'religion' }, + { id: '취미교양', name: '취미교양', type: 'hobby' }, + { id: '학술', name: '학술', type: 'study' }, + { id: '운동', name: '운동', type: 'sport' }, + { id: '공연', name: '공연', type: 'performance' }, ]; const CategoryButtonList = () => { - const { setSelectedCategory } = useSelectedCategory(); + const { selectedCategory, setSelectedCategory } = useSelectedCategory(); const trackEvent = useMixpanelTrack(); const handleCategoryClick = (category: Category) => { @@ -50,7 +44,10 @@ const CategoryButtonList = () => { key={category.id} onClick={() => handleCategoryClick(category)} > - {category.name} + {category.name} {category.name} ))} diff --git a/frontend/src/store/useCategoryStore.ts b/frontend/src/store/useCategoryStore.ts index fa8ba5f32..4298b1295 100644 --- a/frontend/src/store/useCategoryStore.ts +++ b/frontend/src/store/useCategoryStore.ts @@ -27,8 +27,6 @@ export const useCategoryStore = create()( export const useSelectedCategory = () => { const selectedCategory = useCategoryStore((state) => state.selectedCategory); - const setSelectedCategory = useCategoryStore( - (state) => state.setSelectedCategory, - ); + const setSelectedCategory = useCategoryStore((state) => state.setSelectedCategory); return { selectedCategory, setSelectedCategory }; };