Merge pull request #405 from kakao-tech-campus-3rd-step3/feature/main-filter-usability#404

[FEAT] 동아리 탐색 페이지 필터 및 배너 섹션 리디자인 #404

Author: ganimjeong

src/pages/user/Main/Page.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { useCallback, useState } from 'react';
 import { BannerSection } from '@/pages/user/Main/components/BannerSection';
 import { ClubListSection } from '@/pages/user/Main/components/ClubListSection';
+import { FiltersSection } from '@/pages/user/Main/components/FiltersSection';
 import type { RecruitStatus } from './types/club';
 import type { ClubCategoryEng } from '@/shared/types/club';
 
@@ -20,12 +21,12 @@ export const MainPage = () => {
 
   return (
     <Container>
-      <BannerSection
+      <BannerSection onChangeSearch={(s: string) => setSearchText(s)} />
+      <FiltersSection
         selectedCategory={categoryFilter}
         selectedRecruitStatus={recruitStatus}
         onSelectCategory={handleCategoryFilter}
         onSelectStatus={handleRecruitStatusFilter}
-        onChangeSearch={(s: string) => setSearchText(s)}
       />
       <ClubListSection
         categoryFilter={categoryFilter}

src/pages/user/Main/components/BannerSection/Banner.styled.ts

@@ -9,13 +9,13 @@ export const BannerWrapper = styled.div(({ theme }) => ({
   alignItems: 'flex-start',
   width: '100%',
   maxWidth: '100vw',
-  height: 400,
+  height: '300px',
   gap: '16px',
   boxSizing: 'border-box',
   backgroundColor: theme.colors.bg,
 
   [`@media (max-width: ${theme.breakpoints.web})`]: {
-    minHeight: 300,
+    minHeight: 240,
     gap: 24,
     zIndex: 1000,
   },

src/pages/user/Main/components/BannerSection/BannerText.styled.ts

@@ -7,6 +7,7 @@ export const BannerTextWrapper = styled.div(({ theme }) => ({
   gap: '12px',
   position: 'relative',
   zIndex: 2,
+  marginTop: '88px',
 
   [`@media(max-width: ${theme.breakpoints.web})`]: {
     gap: '10px',
@@ -33,9 +34,9 @@ export const HeaderText = styled.h2(({ theme }) => ({
 
 export const SubText = styled.p(({ theme }) => ({
   fontSize: theme.font.size.lg,
-  fontWeight: theme.font.weight.regular,
+  fontWeight: theme.font.weight.medium,
   color: 'rgba(255, 255, 255, 0.9)',
-  textShadow: '0 2px 5px rgba(0, 0, 0, 0.3)',
+  textShadow: '0 2px 5px rgba(0, 0, 0, 0.5)',
   margin: 0,
   lineHeight: 1.5,
 }));

src/pages/user/Main/components/BannerSection/ClubSearchInput.tsx

@@ -5,24 +5,21 @@ import { FiSearch } from 'react-icons/fi';
 const InputWrapper = styled.div(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
-  width: '400px',
-  maxWidth: '100%',
-  border: `1px solid ${theme.colors.border}`,
-  borderRadius: theme.radius.md,
-  padding: '10px 10px',
+  width: '100%',
+  border: 'none',
+  borderRadius: '50px',
+  padding: '16px 28px',
   backgroundColor: theme.colors.bg,
   boxSizing: 'border-box',
-  boxShadow: '0 2px 6px rgba(0,0,0,0.1)',
+  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.15)',
 
   [`@media (max-width: ${theme.breakpoints.web})`]: {
-    width: 300,
-    maxWidth: '100%',
+    padding: '14px 24px',
   },
 
   [`@media (max-width: ${theme.breakpoints.mobile})`]: {
-    gap: 12,
-    width: '100%',
-    padding: '8px 12px',
+    padding: '12px 20px',
+    borderRadius: '40px',
   },
 }));
 
@@ -31,12 +28,28 @@ const Input = styled.input(({ theme }) => ({
   border: 'none',
   outline: 'none',
   fontSize: theme.font.size.base,
+  backgroundColor: 'transparent',
+
+  '::placeholder': {
+    color: theme.colors.textSecondary,
+  },
+
+  [`@media (max-width: ${theme.breakpoints.mobile})`]: {
+    fontSize: theme.font.size.sm,
+  },
 }));
 
-const SearchIcon = styled(FiSearch)({
-  marginRight: '8px',
-  color: '#666',
-});
+const SearchIcon = styled(FiSearch)(({ theme }) => ({
+  marginRight: '12px', // marginLeft → marginRight
+  fontSize: '20px',
+  color: theme.colors.textSecondary,
+  flexShrink: 0,
+
+  [`@media (max-width: ${theme.breakpoints.mobile})`]: {
+    fontSize: '18px',
+    marginRight: '8px', // marginLeft → marginRight
+  },
+}));
 
 type Props = {
   onChangeSearch: (s: string) => void;
@@ -50,8 +63,8 @@ export function ClubSearchInput({ onChangeSearch }: Props) {
 
   return (
     <InputWrapper>
-      <Input onChange={handleChange} placeholder='동아리를 검색하세요.' />
       <SearchIcon />
+      <Input onChange={handleChange} placeholder='동아리를 검색하세요.' />
     </InputWrapper>
   );
 }

src/pages/user/Main/components/BannerSection/index.tsx

@@ -1,54 +1,14 @@
 import styled from '@emotion/styled';
-import { useSearchParams } from 'react-router-dom';
-import { CLUB_CATEGORY } from '@/app/constants/clubCategory';
 import { ClubSearchInput } from '@/pages/user/Main/components/BannerSection/ClubSearchInput.tsx';
-import { CLUB_RECRUIT_STATUS_KOR, type RecruitStatus } from '@/pages/user/Main/types/club.ts';
-import { Dropdown } from '@/shared/components/Dropdown/index.tsx';
-import {
-  engToKorCategory,
-  korToEngCategory,
-  korToEngRecruitStatus,
-} from '@/shared/utils/formatting.ts';
 import * as S from './Banner.styled.ts';
 import { BannerSlideshow } from './BannerSlideshow';
 import * as B from './BannerText.styled.ts';
-import type { ClubCategory, ClubCategoryEng } from '@/shared/types/club';
 
-type FilterRecruitStatus = RecruitStatus | '전체';
 type Props = {
   onChangeSearch: (searchText: string) => void;
-  onSelectCategory: (category: ClubCategoryEng) => void;
-  onSelectStatus: (recruitStatus: FilterRecruitStatus) => void;
-  selectedCategory: ClubCategoryEng;
-  selectedRecruitStatus: RecruitStatus | undefined;
 };
 
-export const BannerSection = ({
-  onChangeSearch,
-  onSelectCategory,
-  onSelectStatus,
-  selectedCategory,
-  selectedRecruitStatus,
-}: Props) => {
-  const [filterParams, setFilterParams] = useSearchParams();
-
-  const handleCategoryClick = (newCategory: ClubCategory) => {
-    const engCategory = korToEngCategory[newCategory];
-    onSelectCategory(engCategory);
-    filterParams.set('category', engCategory);
-    setFilterParams(filterParams);
-  };
-
-  const handleRecruitStatusClick = (status: RecruitStatus) => {
-    onSelectStatus(status);
-    if (status === '전체') {
-      filterParams.delete('status');
-    } else {
-      filterParams.set('status', korToEngRecruitStatus[status]);
-    }
-    setFilterParams(filterParams);
-  };
-
+export const BannerSection = ({ onChangeSearch }: Props) => {
   return (
     <S.BannerWrapper>
       <BannerSlideshow />
@@ -58,25 +18,11 @@ export const BannerSection = ({
           <B.HeaderText>함께할 사람이 있는 곳, 동아리움.</B.HeaderText>
           <B.SubText>관심 있는 동아리를 찾고, 참여해보세요.</B.SubText>
         </B.BannerTextWrapper>
-
-        <SearchContainer>
-          <ClubSearchInput onChangeSearch={onChangeSearch} />
-          <DropdownWrapper>
-            <Dropdown
-              placeholder='동아리 카테고리'
-              value={engToKorCategory[selectedCategory]}
-              options={CLUB_CATEGORY}
-              onSelect={handleCategoryClick}
-            />
-            <Dropdown
-              placeholder='모집 상태'
-              value={selectedRecruitStatus === '전체' ? undefined : selectedRecruitStatus}
-              options={['전체', ...CLUB_RECRUIT_STATUS_KOR] as RecruitStatus[]}
-              onSelect={handleRecruitStatusClick}
-            />
-          </DropdownWrapper>
-        </SearchContainer>
       </ContentContainer>
+
+      <SearchContainer>
+        <ClubSearchInput onChangeSearch={onChangeSearch} />
+      </SearchContainer>
     </S.BannerWrapper>
   );
 };
@@ -89,50 +35,39 @@ const ContentContainer = styled.div(({ theme }) => ({
   margin: '0 auto',
   display: 'flex',
   flexDirection: 'column',
-  gap: '16px',
+  gap: '24px',
   padding: '0 1.5rem',
   boxSizing: 'border-box',
+  paddingBottom: '60px',
 
   [`@media (max-width: ${theme.breakpoints.mobile})`]: {
     padding: '0 1rem',
-    gap: '12px',
+    paddingBottom: '50px',
+    gap: '16px',
   },
 }));
 
 export const SearchContainer = styled.div(({ theme }) => ({
-  position: 'relative',
+  position: 'absolute',
+  bottom: '-30px',
+  left: '0',
+  right: '0',
   zIndex: 10,
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  width: '100%',
-  gap: 16,
+  width: '700px',
+  maxWidth: '90%',
+  marginLeft: 'max(20px, calc((100vw - 1200px) / 2))',
   boxSizing: 'border-box',
-  opacity: 1,
 
-  [`@media(max-width: ${theme.breakpoints.mobile})`]: {
-    flexDirection: 'column',
-    gap: 12,
-    width: '100%',
-    '& > *': {
-      width: '100%',
-      boxSizing: 'border-box',
-    },
+  [`@media (max-width: ${theme.breakpoints.web})`]: {
+    width: '600px',
+    bottom: '-25px',
+    marginLeft: '1.5rem',
   },
-}));
 
-export const DropdownWrapper = styled.div(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  gap: 16,
-  zIndex: 3,
-
-  [`@media(max-width: ${theme.breakpoints.mobile})`]: {
-    width: '100%',
-    gap: 12,
-    '& > *': {
-      width: 'calc(50% - 6px)',
-    },
+  [`@media (max-width: ${theme.breakpoints.mobile})`]: {
+    width: 'calc(100% - 2rem)',
+    bottom: '-25px',
+    marginLeft: '1rem',
+    marginRight: '1rem',
   },
 }));