Feat: 홈(구 탐색) 개편

src/app/(home)/_components/FeedLists.css.ts

@@ -1,6 +1,5 @@
 import { style, createVar, keyframes } from '@vanilla-extract/css';
 import { vars } from '@/styles/__theme.css';
-import { headlineSmall } from '@/styles/__font.css';
 
 export const listBackground = createVar();
 
@@ -20,12 +19,9 @@ export const titleWrapper = style({
   gap: '5px',
 });
 
-export const sectionTitle = style([
-  headlineSmall,
-  {
-    fontWeight: 600,
-  },
-]);
+export const sectionTitle = style({
+  fontWeight: 600,
+});
 
 const listWrapperHoverAnimation = keyframes({
   '0%': {

src/app/(home)/_components/Header.tsx

@@ -24,9 +24,9 @@ import BellIcon from '/public/icons/ver3/bell.svg';
 import Avatar from '/public/icons/ver3/Avatar.svg';
 
 function Header() {
-  const [isSearchBarOpened, setIsSearchBarOpened] = useState(false);
+  const { isOn: isSearchBarOpened, handleSetOn: handleSearchBarOpened } = useBooleanOutput();
   const { isOn, handleSetOn, handleSetOff } = useBooleanOutput();
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태를 관리하는 useState 추가
 
   const { user } = useUser();
 
@@ -41,11 +41,11 @@ function Header() {
   };
 
   const handleInactivateSearchBar = () => {
-    setIsSearchBarOpened(false);
+    handleSearchBarOpened();
   };
 
   const handleSearchIconClick = () => {
-    setIsSearchBarOpened(true);
+    handleSearchBarOpened();
   };
 
   useEffect(() => {

src/app/(home)/_components/HomeTab.tsx

@@ -7,25 +7,20 @@ import * as styles from './HomeTab.css';
 function HomeTab() {
   const { currentTab, setCurrentTab } = useTab();
 
+  const getButtonStyle = (selectedTap: string) => {
+    return currentTab === selectedTap ? styles.activeTab : styles.tabButton;
+  };
+
   return (
     <nav className={styles.wrapper}>
       <div className={styles.buttonsWrapper}>
-        <button
-          onClick={() => setCurrentTab('recommendation')}
-          className={currentTab === 'recommendation' ? `${styles.activeTab}` : `${styles.tabButton}`}
-        >
+        <button onClick={() => setCurrentTab('recommendation')} className={getButtonStyle('recommendation')}>
           추천
         </button>
-        <button
-          onClick={() => setCurrentTab('recent')}
-          className={currentTab === 'recent' ? `${styles.activeTab}` : `${styles.tabButton}`}
-        >
+        <button onClick={() => setCurrentTab('recent')} className={getButtonStyle('recent')}>
           최신
         </button>
-        <button
-          onClick={() => setCurrentTab('following')}
-          className={currentTab === 'following' ? `${styles.activeTab}` : `${styles.tabButton}`}
-        >
+        <button onClick={() => setCurrentTab('following')} className={getButtonStyle('following')}>
           팔로잉
         </button>
       </div>

src/app/(home)/_components/__TrendingLists.css.ts

@@ -0,0 +1,187 @@
+import { width } from './../../../components/Skeleton/Skeleton.css';
+import { style, createVar } from '@vanilla-extract/css';
+import { vars } from '@/styles/__theme.css';
+import { headlineSmall, titleMedium, caption } from '@/styles/__font.css';
+
+export const blackLayer = createVar();
+export const itemFontColor = createVar();
+
+export const customBorderRadius = createVar();
+export const customBackgroundColor = createVar();
+export const customFontColor = createVar();
+export const customItemBorder = createVar();
+export const customBackgroundImage = createVar();
+
+export const sectionTitle = style([
+  headlineSmall,
+  {
+    fontWeight: 600,
+  },
+]);
+
+export const titleWrapper = style({
+  marginBottom: '26px',
+  padding: '0 16px',
+
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: '5px',
+});
+
+export const wrapper = style({
+  marginTop: '50px',
+  marginBottom: '50px',
+});
+
+export const listWrapper = style({
+  marginBottom: '30px',
+  height: '220px',
+
+  display: 'flex',
+  alignItems: 'center',
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+});
+
+export const sliderItem = style({
+  height: 'auto',
+});
+
+export const listItem = style({
+  cursor: 'pointer',
+});
+
+export const testItem = style({
+  width: '100%',
+  height: '100%',
+});
+
+export const slide = style({});
+
+export const itemWrapper = style({
+  width: '100%',
+  height: '100%',
+  padding: '0 40px',
+  borderRadius: customBorderRadius,
+
+  position: 'relative',
+
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  background: customBackgroundColor,
+  border: customItemBorder,
+  cursor: 'pointer',
+
+  transition: 'transform 0.3s ease', // 애니메이션 효과를 부여할 속성 및 시간을 지정합니다.
+
+  ':hover': {
+    transform: 'scale(1.01)', // hover 시 scale을 1.02로 변경합니다.
+    boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',
+  },
+});
+
+export const itemWrapperWithImage = style([
+  itemWrapper,
+  {
+    backgroundImage: customBackgroundImage,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    zIndex: 0,
+
+    selectors: {
+      '&:after': {
+        content: '',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        borderRadius: customBorderRadius,
+      },
+    },
+  },
+]);
+
+export const itemInformationWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  zIndex: 4,
+});
+
+export const ownerProfileWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '8px',
+});
+
+export const itemTitle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+
+  marginBottom: '16px',
+  color: customFontColor,
+  textAlign: 'center',
+  zIndex: 1,
+  overflow: 'hidden',
+  whiteSpace: 'normal',
+  textOverflow: 'ellipsis',
+  WebkitLineClamp: 3,
+  WebkitBoxOrient: 'vertical',
+  wordBreak: 'keep-all',
+});
+
+export const itemTitleContent = style({
+  display: 'inline',
+  fontWeight: '600',
+  fontSize: '1.8rem',
+});
+
+export const category = style({
+  padding: '6px 12px',
+  marginBottom: '16px',
+
+  backgroundColor: '#3D95FF',
+  color: '#fff',
+  fontSize: '1.4rem',
+  borderRadius: '20px',
+});
+
+export const listOwner = style({
+  fontSize: '1.6rem',
+  fontWeight: '400',
+  letterSpacing: '-3%',
+});
+
+export const top3ItemNoImage = style({
+  padding: '5px 7px',
+
+  backgroundColor: '#F5FAFF',
+  color: '#3D95FF',
+  borderRadius: '20px',
+});
+
+export const top3ItemWithImage = style({
+  padding: '5px 7px',
+
+  color: '#ffffff',
+  borderRadius: '20px',
+  backgroundColor: '#F5FAFF4D',
+});
+
+export const top3Wrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '7px',
+
+  fontSize: '1rem',
+});

src/app/(home)/layout.tsx

@@ -3,9 +3,6 @@
 import { ReactNode } from 'react';
 
 import Header from '@/app/(home)/_components/Header';
-import FloatingContainer from '@/components/floatingButton/FloatingContainer';
-import PlusOptionFloatingButton from '@/components/floatingButton/PlusOptionFloatingButton';
-import ArrowUpFloatingButton from '@/components/floatingButton/ArrowUpFloatingButton';
 
 interface HomeLayoutProps {
   children: ReactNode;
@@ -16,10 +13,6 @@ function HomeLayout({ children }: HomeLayoutProps) {
     <>
       <Header />
       {children}
-      <FloatingContainer>
-        <PlusOptionFloatingButton />
-        <ArrowUpFloatingButton />
-      </FloatingContainer>
     </>
   );
 }

src/components/Header/Header.tsx

@@ -20,7 +20,7 @@ function Header({ title, left, leftClick, right }: HeaderProps) {
       <button className={`${styles.flexChild} ${styles.leftChild}`} type="button" onClick={leftClick}>
         {left === 'cancel' && <p>{commonLocale[language].cancel}</p>}
         {left === 'back' && <p>{commonLocale[language].back}</p>}
-        {left === 'close' && <p>"닫기"</p>}
+        {left === 'close' && <p>닫기</p>}
       </button>
 
       <h1 className={`${styles.headerTitle} ${styles.flexChild}`}>{title}</h1>