Merge branch 'develop' into feature/QFEED-43

package.json

@@ -25,10 +25,12 @@
     "@emotion/styled": "^11",
     "@tanstack/react-query": "^5.60.6",
     "@types/react-icons": "^3.0.0",
+    "chakra-ui-bottom-navigation": "^2.0.1",
     "framer-motion": "^6",
     "glob": "^11.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.28.0",
     "rimraf": "^6.0.1",

src/components/common/Footer.tsx

@@ -1,5 +1,170 @@
-const Footer = () => {
-  return <div>Footer</div>;
+import { useState } from 'react';
+import styled from '@emotion/styled';
+import {
+  BottomNavigation,
+  BottomNavigationItem,
+  BottomNavigationIcon,
+  BottomNavigationLabel,
+} from 'chakra-ui-bottom-navigation';
+
+import HomeIcon from '@/assets/images/home_icon.svg';
+import HomeIconClicked from '@/assets/images/home_icon_clicked.svg';
+import GroupIcon from '@/assets/images/qspace_icon.svg';
+import GroupIconClicked from '@/assets/images/qspace_icon_clicked.svg';
+import ChatIcon from '@/assets/images/chat_icon.svg';
+import ChatIconClicked from '@/assets/images/chat_icon_clicked.svg';
+import MyPageIcon from '@/assets/images/mypage_icon.svg';
+import MyPageIconClicked from '@/assets/images/mypage_icon_clicked.svg';
+
+import theme from '@/styles/theme';
+import { useNavigate } from 'react-router-dom';
+
+interface FooterProps {
+  maxWidth?: string;
+}
+const Footer = ({ maxWidth = '425px' }: FooterProps) => {
+  const navigate = useNavigate();
+  const [value, setValue] = useState<string>('/');
+  const [hoveredPath, setHoveredPath] = useState<string | null>(null);
+
+  const handleNavigation = (newValue: string) => {
+    setValue(newValue);
+    navigate(newValue);
+  };
+
+  const menuItems = [
+    {
+      path: '/',
+      label: '홈',
+      icon: HomeIcon,
+      activeIcon: HomeIconClicked
+    },
+    {
+      path: '/qspace',
+      label: '큐스페이스',
+      icon: GroupIcon,
+      activeIcon: GroupIconClicked
+    },
+    {
+      path: '/chat',
+      label: '채팅',
+      icon: ChatIcon,
+      activeIcon: ChatIconClicked
+    },
+    {
+      path: '/mypage',
+      label: '마이',
+      icon: MyPageIcon,
+      activeIcon: MyPageIconClicked
+    },
+  ];
+
+  return (
+    <FooterWrapper>
+      <Container maxWidth={maxWidth}>
+        <StyledBottomNavigation
+          value={value}
+          onChange={handleNavigation}
+          showLabel="always"
+          style={{ backgroundColor: theme.colors.white }}
+        >
+          {menuItems.map((item) => (
+            <StyledNavigationItem
+              key={item.path}
+              value={item.path}
+              onMouseEnter={() => setHoveredPath(item.path)}
+              onMouseLeave={() => setHoveredPath(null)}>
+              <BottomNavigationIcon as={() => (
+                <IconWrapper>
+                  <img
+                    src={value === item.path || hoveredPath === item.path ? item.activeIcon : item.icon}
+                    alt={item.label}
+                    width="24"
+                    height="24"
+                  />
+                </IconWrapper>
+              )} />
+              <StyledLabel isActive={value === item.path || hoveredPath === item.path}>
+                {item.label}
+              </StyledLabel>
+            </StyledNavigationItem>
+          ))}
+        </StyledBottomNavigation>
+      </Container>
+    </FooterWrapper>
+  );
 };
 
-export default Footer;
+const FooterWrapper = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  height : 5.25rem; //84px
+  padding : 0;
+  margin : 0;
+`;
+
+const Container = styled.div<{ maxWidth: string }>`
+  width: 100%;
+  max-width: ${props => props.maxWidth};
+  background-color: ${theme.colors.white};
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+`;
+
+const StyledNavigationItem = styled(BottomNavigationItem)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width : 100%;
+  height: 100%;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem; //24px
+`;
+
+const StyledLabel = styled(BottomNavigationLabel)<{ isActive: boolean }>`
+ font-family: ${theme.typography.fontFamily};
+  font-size: ${theme.typography.body2.size};
+  font-weight: ${theme.typography.body2.weight};
+  color: ${props => props.isActive ? theme.colors.primary : theme.colors.gray[300]};
+  margin-top: 4px;
+  text-align: center;
+  transition: color 0.2s ease-in-out;
+`;
+
+const StyledBottomNavigation = styled(BottomNavigation)`
+  width: 100%;
+  height: 5.25rem;   //84px
+  max-width: inherit;
+  position: relative;
+  left: 0;
+  bottom : 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  box-shadow: none;
+  padding: 10px;
+  margin: 0;
+
+  && {
+    box-shadow: none;
+  }
+`;
+
+export default Footer;

src/components/ui/Logo/Logo.stories.tsx

@@ -0,0 +1,40 @@
+// Logo.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { Logo } from './Logo';
+
+const meta: Meta<typeof Logo> = {
+  title: 'Components/Logo',
+  component: Logo,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: { type: 'text' },
+      description: '로고의 너비 (px 또는 문자열)',
+    },
+    height: {
+      control: { type: 'text' },
+      description: '로고의 높이 (px 또는 문자열)',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Logo>;
+
+// 기본 로고
+export const Default: Story = {
+  args: {
+    width: 120,
+    height: 40,
+  },
+};
+
+
+// 문자열 단위를 사용한 로고
+export const WithStringUnits: Story = {
+  args: {
+    width: '10rem',
+    height: '4rem',
+  },
+};
+

src/components/ui/Logo/Logo.tsx

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import LogoImg from "../../../assets/images/qfeed-logo.svg";
+
+type LogoProps = {
+  width?: string | number;
+  height?: string | number;
+};
+
+const Container = styled.img<{
+  width?: string | number;
+  height?: string | number;
+}>`
+  width: ${({ width }) => (typeof width === 'number' ? `${width}px` : width)};
+  height: ${({ height }) => (typeof height === 'number' ? `${height}px` : height)};
+  object-fit: contain;
+`;
+
+export const Logo = ({ width, height }: LogoProps) => {
+  return (
+    <Container
+      src={LogoImg}
+      width={width}
+      height={height}
+      alt="logo"
+    />
+  );
+};

src/main.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
-import { ChakraProvider } from '@chakra-ui/react';
+import { ChakraProvider, extendTheme } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import router from '@/router';
 import { ThemeProvider } from '@emotion/react';
 import { GlobalStyles } from '@/styles/GlobalStyles';
 import theme from '@/styles/theme';
+import { BottomNavigationStyleConfig as BottomNavigation } from 'chakra-ui-bottom-navigation';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -20,11 +21,17 @@ const queryClient = new QueryClient({
   },
 });
 
+const chakraTheme = extendTheme({
+  components: {
+    BottomNavigation,
+  },
+});
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <ThemeProvider theme={theme}>
-        <ChakraProvider>
+        <ChakraProvider theme = {chakraTheme}>
           <GlobalStyles />
           <RouterProvider router={router} />
         </ChakraProvider>