feat: explore page UI 구현 & 오타 수정 (#9)

- Explore page UI 구현
- 일부 오타 수정

Co-authored-by: 박세준 <[email protected]>

src/components/MobileBar.tsx

@@ -1,4 +1,4 @@
-import { Heart, Home, PlusSquare, Search, User } from 'lucide-react';
+import { Compass, Heart, Home, PlusSquare, User } from 'lucide-react';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -12,13 +12,15 @@ const NavItem = ({ icon }: NavItemProps) => (
   </a>
 );
 
-const BottomBar = () => {
+const MobileBar = () => {
   return (
     <nav className="flex md:hidden justify-around py-2 bg-white border-t">
       <Link to="/">
         <NavItem icon={<Home />} />
       </Link>
-      <NavItem icon={<Search />} />
+      <Link to="/explore">
+        <NavItem icon={<Compass />} />
+      </Link>
       <NavItem icon={<PlusSquare />} />
       <NavItem icon={<Heart />} />
       <Link to="/username">
@@ -28,4 +30,4 @@ const BottomBar = () => {
   );
 };
 
-export default BottomBar;
+export default MobileBar;

src/components/SideBar.tsx

@@ -28,7 +28,7 @@ const NavItem = ({ icon, label, active }: NavItemProps) => (
   </a>
 );
 
-const Sidebar = () => {
+const SideBar = () => {
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
 
   const toggleMenu = () => {
@@ -44,14 +44,16 @@ const Sidebar = () => {
         <img src="/instagram-logo.png" alt="Instagram" className="w-24" />
       </div>
       <div className="flex flex-col flex-1 space-y-2">
-        <Link to="/" className="no-underline">
+        <Link to="/">
           <NavItem icon={<Home />} label="Home" active />
         </Link>
         <NavItem icon={<Search />} label="Search" active={false} />
-        <NavItem icon={<Compass />} label="Explore" active={false} />
+        <Link to="/explore">
+          <NavItem icon={<Compass />} label="Explore" active={false} />
+        </Link>
         <NavItem icon={<Heart />} label="Notifications" active={false} />
         <NavItem icon={<PlusSquare />} label="Create" active={false} />
-        <Link to="/username" className="no-underline">
+        <Link to="/username">
           <NavItem icon={<User />} label="Profile" active={false} />
         </Link>
       </div>
@@ -83,4 +85,4 @@ const Sidebar = () => {
   );
 };
 
-export default Sidebar;
+export default SideBar;

src/pages/ExplorePage.tsx

@@ -1,7 +1,22 @@
-import React from 'react';
+import MobileBar from '../components/MobileBar';
+import PostGrid from '../components/PostGrid';
+import SideBar from '../components/SideBar';
 
-const ExplorePage: React.FC = () => {
-  return <h1>Explore Page</h1>;
+const ExplorePage = () => {
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      <div className="flex-1 p-4 pb-16 md:pb-4 md:ml-64 overflow-y-auto">
+        <div className="max-w-3xl mx-auto">
+          <PostGrid />
+        </div>
+      </div>
+
+      <div className="fixed bottom-0 left-0 right-0 md:left-0 md:top-0 md:right-auto md:w-64 bg-white border-t md:border-r md:border-t-0">
+        <SideBar />
+        <MobileBar />
+      </div>
+    </div>
+  );
 };
 
 export default ExplorePage;

src/pages/ProfilePage.tsx

@@ -1,6 +1,6 @@
 import { useParams } from 'react-router-dom';
 
-import Highlights from '../components/Hilghlights';
+import Highlights from '../components/Highlights';
 import MobileBar from '../components/MobileBar';
 import MobileHeader from '../components/MobileHeader';
 import ProfileInfo from '../components/ProfileInfo';