feat: 메인 페이지 및 구성 컴포넌트 구현, 로컬스토리지 로그인 유지 기능 추가

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "autoprefixer": "10.4.20",
+    "lucide-react": "0.469.0",
     "postcss": "8.4.49",
     "react": "18.3.1",
     "react-dom": "18.3.1",

src/App.tsx

@@ -1,31 +1,50 @@
 import './index.css';
 
-import { useState } from 'react';
+import { createContext, useState } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import ExplorePage from './pages/ExplorePage';
-import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
+import MainPage from './pages/MainPage';
+
+export type LoginContextType = {
+  isLoggedIn: boolean;
+  handleIsLoggedIn: (value: boolean) => void;
+};
+
+export const LoginContext = createContext<LoginContextType | null>(null);
 
 export const App = () => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  // 임시 로그인 상태
+  // TODO: 로그인 API 관리 로직 구현
+  const [isLoggedIn, setIsLoggedIn] = useState(() => {
+    const saved = localStorage.getItem('isLoggedIn');
+    return saved === 'true';
+  });
+
+  const handleIsLoggedIn = (value: boolean) => {
+    setIsLoggedIn(value);
+    localStorage.setItem('isLoggedIn', String(value));
+  };
 
   return (
-    <Routes>
-      <Route
-        path="/"
-        element={
-          isLoggedIn ? (
-            <HomePage />
-          ) : (
-            <LoginPage setIsLoggedIn={setIsLoggedIn} />
-          )
-        }
-      ></Route>
-      <Route
-        path="/explore"
-        element={isLoggedIn ? <ExplorePage /> : <Navigate to="/" />}
-      ></Route>
-    </Routes>
+    <LoginContext.Provider value={{ isLoggedIn, handleIsLoggedIn }}>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            isLoggedIn ? (
+              <MainPage />
+            ) : (
+              <LoginPage handleIsLoggedIn={handleIsLoggedIn} />
+            )
+          }
+        ></Route>
+        <Route
+          path="/explore"
+          element={isLoggedIn ? <ExplorePage /> : <Navigate to="/" />}
+        ></Route>
+      </Routes>
+    </LoginContext.Provider>
   );
 };

src/components/MobileBar.tsx

@@ -0,0 +1,26 @@
+import { Heart, Home, PlusSquare, Search, User } from 'lucide-react';
+import React from 'react';
+
+interface NavItemProps {
+  icon: React.ReactNode;
+}
+
+const NavItem = ({ icon }: NavItemProps) => (
+  <a href="#" className="flex items-center justify-center p-2">
+    {icon}
+  </a>
+);
+
+const BottomBar = () => {
+  return (
+    <nav className="flex md:hidden justify-around py-2 bg-white border-t">
+      <NavItem icon={<Home />} />
+      <NavItem icon={<Search />} />
+      <NavItem icon={<PlusSquare />} />
+      <NavItem icon={<Heart />} />
+      <NavItem icon={<User />} />
+    </nav>
+  );
+};
+
+export default BottomBar;

src/components/MobileHeader.tsx

@@ -0,0 +1,15 @@
+import { Heart, MessageCircle } from 'lucide-react';
+
+const MobileHeader = () => {
+  return (
+    <div className="md:hidden flex justify-between items-center mb-4">
+      <img src="/instagram-logo.png" alt="Instagram" className="w-24" />
+      <div className="flex space-x-4">
+        <Heart className="w-6 h-6" />
+        <MessageCircle className="w-6 h-6" />
+      </div>
+    </div>
+  );
+};
+
+export default MobileHeader;

src/components/Post.tsx

@@ -0,0 +1,46 @@
+import { Heart, MessageCircle, Send } from 'lucide-react';
+
+type PostProps = {
+  username: string;
+  imageUrl: string;
+  caption: string;
+  likes: number;
+  comments: number;
+  timestamp: string;
+};
+
+const Post = ({
+  username,
+  imageUrl,
+  caption,
+  likes,
+  comments,
+  timestamp,
+}: PostProps) => (
+  <div className="bg-white border rounded-md">
+    <div className="flex items-center p-4">
+      <img
+        src="/placeholder.svg"
+        alt={username}
+        className="w-8 h-8 rounded-full"
+      />
+      <span className="ml-3 font-semibold">{username}</span>
+    </div>
+    <img src={imageUrl} alt="Post" className="w-full" />
+    <div className="p-4">
+      <div className="flex space-x-4 mb-4">
+        <Heart className="w-6 h-6" />
+        <MessageCircle className="w-6 h-6" />
+        <Send className="w-6 h-6" />
+      </div>
+      <p className="font-semibold mb-2">{likes.toLocaleString()} likes</p>
+      <p>
+        <span className="font-semibold">{username}</span> {caption}
+      </p>
+      <p className="text-gray-500 text-sm mt-2">View all {comments} comments</p>
+      <p className="text-gray-400 text-xs mt-1">{timestamp}</p>
+    </div>
+  </div>
+);
+
+export default Post;

src/components/Posts.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+
+import Post from './Post';
+
+interface PostData {
+  id: number;
+  username: string;
+  imageUrl: string;
+  caption: string;
+  likes: number;
+  comments: number;
+  timestamp: string;
+}
+
+type PostsProps = {
+  posts: PostData[];
+  postsPerPage: number;
+};
+
+const Posts = ({ posts, postsPerPage }: PostsProps) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const indexOfLastPost = currentPage * postsPerPage;
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
+
+  const totalPages = Math.ceil(posts.length / postsPerPage);
+
+  return (
+    <div className="space-y-8">
+      {currentPosts.map((post) => (
+        <Post key={post.id} {...post} />
+      ))}
+      <div className="flex justify-center mt-8 mb-16 md:mb-8">
+        <button
+          onClick={() => {
+            setCurrentPage((prev) => Math.max(prev - 1, 1));
+          }}
+          disabled={currentPage === 1}
+          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-300"
+        >
+          Previous
+        </button>
+        <span className="mx-4 self-center">
+          Page {currentPage} of {totalPages}
+        </span>
+        <button
+          onClick={() => {
+            setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+          }}
+          disabled={currentPage === totalPages}
+          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-300"
+        >
+          Next
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Posts;

src/components/SideBar.tsx

@@ -0,0 +1,81 @@
+import {
+  Compass,
+  Heart,
+  Home,
+  Menu,
+  PlusSquare,
+  Search,
+  User,
+} from 'lucide-react';
+import React, { useContext } from 'react';
+
+import { LoginContext, type LoginContextType } from '../App';
+
+interface NavItemProps {
+  icon: React.ReactNode;
+  label: string;
+  active: boolean;
+}
+
+const NavItem = ({ icon, label, active }: NavItemProps) => (
+  <a
+    href="#"
+    className={`flex items-center p-2 rounded-md ${active ? 'font-bold' : 'text-gray-700 hover:bg-gray-100'}`}
+  >
+    {icon}
+    {<span className="ml-4 hidden md:inline">{label}</span>}
+  </a>
+);
+
+const Sidebar = () => {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const context = useContext(LoginContext) as LoginContextType;
+  const handleIsLoggedIn = context.handleIsLoggedIn;
+
+  return (
+    <div className="hidden md:flex md:flex-col h-full px-4 py-8">
+      <div className="mb-8">
+        <img src="/instagram-logo.png" alt="Instagram" className="w-24" />
+      </div>
+      <div className="flex flex-col flex-1 space-y-2">
+        <NavItem icon={<Home />} label="Home" active />
+        <NavItem icon={<Search />} label="Search" active={false} />
+        <NavItem icon={<Compass />} label="Explore" active={false} />
+        <NavItem icon={<Heart />} label="Notifications" active={false} />
+        <NavItem icon={<PlusSquare />} label="Create" active={false} />
+        <NavItem icon={<User />} label="Profile" active={false} />
+      </div>
+      <div className="relative mt-auto">
+        <button
+          onClick={toggleMenu}
+          className="flex items-center p-2 w-full hover:bg-gray-100 rounded-md"
+        >
+          <Menu />
+          <span className="ml-4 hidden md:inline">More</span>
+        </button>
+        {isMenuOpen && (
+          <div className="absolute bottom-full left-0 mb-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
+            <div className="py-1">
+              <button
+                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                onClick={() => {
+                  // TODO: 로그아웃 로직 구현
+                  handleIsLoggedIn(false);
+                }}
+              >
+                Log Out
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

src/components/Stories.tsx

@@ -0,0 +1,22 @@
+const Story = () => (
+  <div className="flex flex-col items-center">
+    <div className="w-16 h-16 rounded-full bg-gradient-to-tr from-yellow-400 to-pink-600 p-0.5">
+      <div className="w-full h-full rounded-full bg-white p-0.5">
+        <img src="" alt="Story" className="w-full h-full rounded-full" />
+      </div>
+    </div>
+    <p className="mt-1 text-xs">username</p>
+  </div>
+);
+
+const Stories = () => {
+  return (
+    <div className="flex space-x-4 overflow-x-auto pb-4 mb-8">
+      {[1, 2, 3, 4, 5].map((_, i) => (
+        <Story key={i} />
+      ))}
+    </div>
+  );
+};
+
+export default Stories;

src/pages/LoginPage.tsx

@@ -1,16 +1,16 @@
 import React, { useState } from 'react';
 
-type Props = {
-  setIsLoggedIn: (isLoggedIn: boolean) => void;
+type LoginPageProps = {
+  handleIsLoggedIn: (value: boolean) => void;
 };
 
-const LoginPage = ({ setIsLoggedIn }: Props) => {
+const LoginPage = ({ handleIsLoggedIn }: LoginPageProps) => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setIsLoggedIn(true);
+    handleIsLoggedIn(true);
     //TODO : 로그인 로직
   };