main ui 및 search 기능 구현

keyword 및 search 기능 구현은 아직 완성하지 못함

package.json

@@ -19,7 +19,7 @@
     "@tanstack/react-query": "^5.32.0",
     "@tanstack/react-query-devtools": "^5.32.0",
     "axios": "^1.6.8",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.6",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-calendar": "^5.0.0",

src/apis/gallery.ts

@@ -43,7 +43,7 @@ export const getGalleries = async ({
   sort = 'latest',
 }: GetGalleriesParams) => {
   const response = await instance.get(
-    `${import.meta.env.VITE_DEV_URL}api/galleries?page=${pageIndex}&size=${size}&category=${category}&cost=${cost}&display=${display}&keyword=${keyword}&sort=${sort}`,
+    `/api/galleries?page=${pageIndex}&size=${size}&category=${category}&cost=${cost}&display=${display}&keyword=${keyword}&sort=${sort}`,
   );
   return response?.data as GalleriesData;
 };

src/pages/main/components/buttonBar/index.tsx

@@ -1,8 +1,9 @@
-import { Button, Icon, Text } from '@/components';
+import { Icon, Text } from '@/components';
 import { DisplayInfoType, SortInfoType } from '@/consts/filter';
 import { FilterType } from '@/types/gallery';
 
 import * as S from './styles';
+import { useState } from 'react';
 
 interface ButtonBarProps {
   title: string;
@@ -13,6 +14,7 @@ interface ButtonBarProps {
 }
 
 const ButtonBar = ({ title, selected, keyPorp, onChange, buttons }: ButtonBarProps) => {
+  const [position, setPosition] = useState<number>(keyPorp === 'display' ? -2 : 0);
   return (
     <S.Container>
       <S.TitleBox>
@@ -24,26 +26,29 @@ const ButtonBar = ({ title, selected, keyPorp, onChange, buttons }: ButtonBarPro
             value="all"
             size={25}
             color={selected === 'all' ? 'black' : 'gray200'}
-            onClick={() => onChange({ [keyPorp]: 'all' })}
+            onClick={() => {
+              onChange({ [keyPorp]: 'all' });
+              setPosition(-2);
+            }}
             $active={!(selected === 'all')}
           />
         )}
       </S.TitleBox>
       <S.ButtonBox>
-        {buttons.map(({ value, label }) => {
-          const buttonType = selected === value ? 'RoundBlack' : 'onlyText';
-          const color = selected === value ? 'white' : 'black';
+        {buttons.map(({ value, label }, index) => {
           return (
-            <Button
+            <S.Button
+              selected={selected === value}
               key={value}
-              buttonType={buttonType}
-              size="xs"
               children={label}
-              color={color}
-              onClick={() => onChange({ [keyPorp]: value })}
+              onClick={() => {
+                onChange({ [keyPorp]: value });
+                setPosition(index);
+              }}
             />
           );
         })}
+        <S.SelectedButton width={buttons.length} position={position} />
       </S.ButtonBox>
     </S.Container>
   );

src/pages/main/components/buttonBar/styles.ts

@@ -1,3 +1,4 @@
+import { buttonTypeMap } from '@/styles/button';
 import { colors } from '@/styles/colorPalette';
 import { LayoutMap } from '@/styles/layout';
 import styled from '@emotion/styled';
@@ -18,12 +19,38 @@ export const TitleBox = styled.div`
 `;
 
 export const ButtonBox = styled.div`
+  position: relative;
   ${LayoutMap.displayFlex}
   border: 1px solid ${colors.black};
   width: 100%;
   padding: 2px;
   border-radius: 30px;
+  overflow: hidden;
   > div {
     flex: 1;
   }
 `;
+
+export const Button = styled.div<{ selected?: boolean }>`
+  ${LayoutMap.displayFlex}
+  justify-content: center;
+  color: ${({ selected }) => (selected ? `${colors.white}` : `${colors.black}`)};
+  font-size: 12px;
+  flex: 1;
+  height: 30px;
+  cursor: pointer;
+  z-index: 2;
+  animation: 0.5s forwards;
+`;
+export const SelectedButton = styled.div<{ width: number; position: number }>`
+  position: absolute;
+  ${LayoutMap.displayFlex}
+  justify-content: center;
+  ${buttonTypeMap['RoundBlack']}
+  font-size: 12px;
+  width: ${({ width }) => `calc((100% - 4px)/${width})`};
+  height: 30px;
+  z-index: 1;
+  transform: ${({ position }) => `translateX(${100 * position}%)`};
+  transition: all 0.3s ease-in-out;
+`;

src/pages/main/components/costFilter/index.tsx

@@ -2,14 +2,14 @@ import { Button, Text } from '@/components';
 import * as S from './styles';
 import { CostInfoType } from '@/consts/filter';
 import { FilterType } from '@/types/gallery';
-interface CoastFilterProps {
+interface CostFilterProps {
   title: string;
   selected: string;
   onChange: (newValue: Partial<FilterType>) => void;
   buttons: CostInfoType[];
 }
 
-const CoastFilter = ({ buttons, onChange, selected, title }: CoastFilterProps) => {
+const CostFilter = ({ buttons, onChange, selected, title }: CostFilterProps) => {
   return (
     <S.Container>
       <Text typography="t6" bold="regular">
@@ -23,15 +23,12 @@ const CoastFilter = ({ buttons, onChange, selected, title }: CoastFilterProps) =
               : selected === value
                 ? 'circle'
                 : 'reverseCircle';
-          const color =
-            selected === 'all' ? 'white' : selected === value ? 'white' : 'black';
           return (
             <Button
               key={value}
               buttonType={buttonType}
               size="circle"
               children={label}
-              color={color}
               onClick={() => onChange({ cost: value })}
             />
           );
@@ -41,4 +38,4 @@ const CoastFilter = ({ buttons, onChange, selected, title }: CoastFilterProps) =
   );
 };
 
-export default CoastFilter;
+export default CostFilter;

src/pages/main/components/postButton/index.tsx

@@ -1,13 +1,13 @@
-import { Icon } from '@/components';
-import * as S from './styles';
 import { useNavigate } from 'react-router-dom';
+import buttonimg from '@/assets/images/postButton.png';
+import * as S from './styles';
 
 const PostButton = () => {
   const navigate = useNavigate();
   return (
     <S.Container onClick={() => navigate('/post')}>
       <S.PostArrow value="postArrow" $active={false} />
-      <Icon value="postButton" />
+      <S.BackgroundImage alt="버튼 백그라운드 이미지" src={buttonimg} />
     </S.Container>
   );
 };

src/pages/main/components/postButton/styles.ts

@@ -3,12 +3,14 @@ import styled from '@emotion/styled';
 
 export const Container = styled.div`
   position: relative;
+  width: fit-content;
+  height: fit-content;
 `;
 
 export const PostArrow = styled(Icon)`
   position: absolute;
   animation: none;
-  z-index: 1;
+  z-index: 0;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
@@ -17,3 +19,23 @@ export const PostArrow = styled(Icon)`
     cursor: pointer;
   }
 `;
+
+export const BackgroundImage = styled.img`
+  z-index: 1;
+  width: fit-content;
+  height: fit-content;
+  cursor: pointer;
+  @keyframes rotateInfinite {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  animation: rotateInfinite 3s linear infinite paused;
+
+  &:hover {
+    animation-play-state: running;
+  }
+`;

src/types/gallery.ts

@@ -44,7 +44,7 @@ export interface FilterType {
   category: 'hashtag' | 'author' | 'title';
   sort: 'latest' | 'hot' | 'liked';
   cost: 'all' | 'free' | 'pay';
-  display: 'all' | 'upcomming' | 'inprogress' | 'finished';
+  display: 'all' | 'upcoming' | 'inprogress' | 'finished';
 }
 
 export type CategoryValues = FilterType['category'];

tsconfig.node.json

@@ -5,7 +5,8 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
-    "strict": true
+    "strict": true,
+    "jsxImportSource": "@emotion/react"
   },
   "include": ["vite.config.ts"]
 }