From 1c158b56399e9770f28bd18ad2532cf1e7e8e80f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Sat, 11 Jan 2025 03:37:01 +0900
Subject: [PATCH 01/12] =?UTF-8?q?feat:=20post=20api=20=EC=97=B0=EA=B2=B0?=
 =?UTF-8?q?=20=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feed/Post.tsx              |  13 +-
 src/components/layout/SideBar.tsx         |  91 +++++++++++--
 src/components/modals/CreatePostModal.tsx | 148 ++++++++++++++++++++++
 src/pages/MainPage.tsx                    | 119 ++++++++---------
 4 files changed, 302 insertions(+), 69 deletions(-)
 create mode 100644 src/components/modals/CreatePostModal.tsx

diff --git a/src/components/feed/Post.tsx b/src/components/feed/Post.tsx
index 03f5e0b..e46fe4a 100644
--- a/src/components/feed/Post.tsx
+++ b/src/components/feed/Post.tsx
@@ -26,7 +26,18 @@ const Post = ({
       />
       <span className="ml-3 font-semibold">{username}</span>
     </div>
-    <img src={imageUrl} alt="Post" className="w-full" />
+    <img
+      src={
+        imageUrl.startsWith('http')
+          ? imageUrl
+          : `http://3.34.185.81:8000/${imageUrl}`
+      }
+      alt="Post"
+      className="w-full"
+      onError={(e) => {
+        e.currentTarget.src = '/placeholder.svg';
+      }}
+    />
     <div className="p-4">
       <div className="flex space-x-4 mb-4">
         <Heart className="w-6 h-6" />
diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index f09b210..2932e1c 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -11,10 +11,13 @@ import { useContext, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { LoginContext } from '../../App';
+import CreatePostModal from '../modals/CreatePostModal';
 import { NavItem } from './NavItem';
 
 const SideBar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState('home');
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   const context = useContext(LoginContext);
 
@@ -22,24 +25,91 @@ const SideBar = () => {
     throw new Error('LoginContext is not provided');
   }
 
+  const handleNavItemClick = (itemName: string) => {
+    setActiveItem(itemName);
+    if (itemName === 'create') {
+      setIsCreateModalOpen(true);
+    }
+  };
+
   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" />
+        <img
+          src="https://a.slack-edge.com/production-standard-emoji-assets/14.0/apple-small/1f9c7@2x.png"
+          alt="Logo"
+          className="w-16"
+        />
       </div>
 
       <div className="flex flex-col flex-1 space-y-2">
-        <Link to="/">
-          <NavItem icon={<Home />} label="Home" active />
+        <Link
+          to="/"
+          onClick={() => {
+            handleNavItemClick('home');
+          }}
+        >
+          <NavItem
+            icon={<Home />}
+            label="Home"
+            active={activeItem === 'home'}
+          />
         </Link>
-        <NavItem icon={<Search />} label="Search" active={false} />
-        <Link to="/explore">
-          <NavItem icon={<Compass />} label="Explore" active={false} />
+        <NavItem
+          icon={<Search />}
+          label="Search"
+          active={activeItem === 'search'}
+          onClick={() => {
+            handleNavItemClick('search');
+          }}
+        />
+        <Link
+          to="/explore"
+          onClick={() => {
+            handleNavItemClick('explore');
+          }}
+        >
+          <NavItem
+            icon={<Compass />}
+            label="Explore"
+            active={activeItem === 'explore'}
+          />
         </Link>
-        <NavItem icon={<Heart />} label="Notifications" active={false} />
-        <NavItem icon={<PlusSquare />} label="Create" active={false} />
-        <Link to="/username">
-          <NavItem icon={<User />} label="Profile" active={false} />
+        <NavItem
+          icon={<Heart />}
+          label="Notifications"
+          active={activeItem === 'notifications'}
+          onClick={() => {
+            handleNavItemClick('notifications');
+          }}
+        />
+        <NavItem
+          icon={<PlusSquare />}
+          label="Create"
+          active={activeItem === 'create'}
+          onClick={() => {
+            handleNavItemClick('create');
+          }}
+        />
+        {isCreateModalOpen && (
+          <CreatePostModal
+            isOpen={isCreateModalOpen}
+            onClose={() => {
+              setIsCreateModalOpen(false);
+            }}
+          />
+        )}
+        <Link
+          to="/username"
+          onClick={() => {
+            handleNavItemClick('profile');
+          }}
+        >
+          <NavItem
+            icon={<User />}
+            label="Profile"
+            active={activeItem === 'profile'}
+          />
         </Link>
       </div>
 
@@ -57,7 +127,6 @@ const SideBar = () => {
               <button
                 className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
                 onClick={() => {
-                  // TODO: 로그아웃 로직 구현
                   context.handleIsLoggedIn(false);
                   setIsMenuOpen(false);
                 }}
diff --git a/src/components/modals/CreatePostModal.tsx b/src/components/modals/CreatePostModal.tsx
new file mode 100644
index 0000000..854f7dd
--- /dev/null
+++ b/src/components/modals/CreatePostModal.tsx
@@ -0,0 +1,148 @@
+import { useState } from 'react';
+
+type CreatePostModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+const CreatePostModal = ({ isOpen, onClose }: CreatePostModalProps) => {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [content, setContent] = useState('');
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file != null) {
+      const imageUrl = URL.createObjectURL(file);
+      setSelectedImage(imageUrl);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (selectedImage == null) return;
+
+    try {
+      // Build query parameters
+      const queryParams = new URLSearchParams();
+      if (content.length > 0) {
+        queryParams.append('post_text', content);
+      }
+
+      const result = await fetch(
+        `http://3.34.185.81:8000/api/post/?${queryParams.toString()}`,
+        {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('token') as string}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            image_url: selectedImage,
+          }),
+        },
+      );
+
+      if (!result.ok) {
+        throw new Error('Failed to create post');
+      }
+
+      onClose();
+    } catch (error) {
+      console.error('Error creating post:', error);
+    }
+  };
+
+  return (
+    <>
+      {isOpen && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white rounded-lg p-6 w-11/12 md:w-1/2 max-w-2xl">
+            <h2 className="text-lg font-bold mb-4">Create New Post</h2>
+            <form onSubmit={void handleSubmit}>
+              <div className="mb-4">
+                <div className="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center">
+                  {selectedImage != null ? (
+                    <div className="relative">
+                      <img
+                        src={selectedImage}
+                        alt="Preview"
+                        className="max-h-[400px] mx-auto object-contain"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setSelectedImage(null);
+                        }}
+                        className="absolute top-2 right-2 bg-gray-800 text-white p-2 rounded-full"
+                      >
+                        ×
+                      </button>
+                    </div>
+                  ) : (
+                    <div className="py-8">
+                      <label className="cursor-pointer">
+                        <input
+                          type="file"
+                          accept="image/*"
+                          className="hidden"
+                          onChange={handleImageChange}
+                        />
+                        <div className="text-gray-500">
+                          <svg
+                            className="mx-auto h-12 w-12 mb-2"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+                            />
+                          </svg>
+                          Click to upload image
+                        </div>
+                      </label>
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="mb-4">
+                <textarea
+                  id="content"
+                  className="border border-gray-300 rounded-md p-2 w-full resize-none"
+                  placeholder="Write a caption..."
+                  rows={4}
+                  value={content}
+                  onChange={(e) => {
+                    setContent(e.target.value);
+                  }}
+                />
+              </div>
+              <div className="flex justify-end">
+                <button
+                  type="button"
+                  className="mr-2 bg-gray-300 text-gray-800 rounded-md px-4 py-2"
+                  onClick={onClose}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="bg-blue-500 text-white rounded-md px-4 py-2"
+                  disabled={selectedImage == null}
+                >
+                  Share
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CreatePostModal;
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 1fd6f07..fde5ce3 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,74 +1,79 @@
+import { useEffect, useState } from 'react';
+
 import Posts from '../components/feed/Posts';
 import { Stories } from '../components/feed/Stories';
 import BottomBar from '../components/layout/MobileBar';
 import MobileHeader from '../components/layout/MobileHeader';
 import SideBar from '../components/layout/SideBar';
+import type { Post } from '../types/post';
 
-const dummyPosts = [
-  {
-    id: 1,
-    username: 'user1',
-    imageUrl: '/placeholder.svg',
-    caption: 'This is a sample post',
-    likes: 1000,
-    comments: 100,
-    timestamp: '1 HOUR AGO',
-  },
-  {
-    id: 2,
-    username: 'user2',
-    imageUrl: '/placeholder.svg',
-    caption: 'Another sample post',
-    likes: 1500,
-    comments: 150,
-    timestamp: '2 HOURS AGO',
-  },
-  {
-    id: 3,
-    username: 'user3',
-    imageUrl: '/placeholder.svg',
-    caption: 'Yet another sample post',
-    likes: 2000,
-    comments: 200,
-    timestamp: '3 HOURS AGO',
-  },
-  {
-    id: 4,
-    username: 'user4',
-    imageUrl: '/placeholder.svg',
-    caption: 'Fourth sample post',
-    likes: 2500,
-    comments: 250,
-    timestamp: '4 HOURS AGO',
-  },
-  {
-    id: 5,
-    username: 'user5',
-    imageUrl: '/placeholder.svg',
-    caption: 'Fifth sample post',
-    likes: 3000,
-    comments: 300,
-    timestamp: '5 HOURS AGO',
-  },
-  {
-    id: 6,
-    username: 'user6',
-    imageUrl: '/placeholder.svg',
-    caption: 'Sixth sample post',
-    likes: 3500,
-    comments: 350,
-    timestamp: '6 HOURS AGO',
-  },
-];
+interface ApiPost {
+  post_id: number;
+  user_id: number;
+  location: string;
+  post_text: string;
+  creation_date: string;
+  file_url: string[];
+}
 
 const MainPage = () => {
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const friendIds = [25, 39, 42, 'user1234']; // 임시 친구 목록
+
+    const fetchPosts = async () => {
+      try {
+        const postsPromises = friendIds.map((id) =>
+          fetch(`http://3.34.185.81:8000/api/post/user/${id}`, {
+            headers: {
+              Authorization: `Bearer ${localStorage.getItem('access_token') as string}`,
+            },
+          }).then((res) => res.json()),
+        );
+
+        const postsArrays = await Promise.all(postsPromises);
+        const allPosts = postsArrays.flat();
+
+        const transformedPosts = allPosts.map((post: ApiPost) => ({
+          id: post.post_id,
+          username: `user${post.user_id}`,
+          imageUrl: `http://3.34.185.81:8000/${post.file_url[0] as string}`,
+          caption: post.post_text,
+          likes: 0,
+          comments: 0,
+          timestamp: new Date(post.creation_date).toLocaleString(),
+        }));
+
+        const sortedPosts = transformedPosts.sort((a, b) => {
+          const dateA = new Date(a.timestamp.replace(/\./g, '/')).getTime();
+          const dateB = new Date(b.timestamp.replace(/\./g, '/')).getTime();
+          return dateB - dateA;
+        });
+
+        setPosts(sortedPosts);
+      } catch (error) {
+        console.error('Error fetching posts:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void fetchPosts();
+  }, []);
+
   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">
           <MobileHeader />
           <Stories />
-          <Posts posts={dummyPosts} postsPerPage={5} />
+          {loading ? (
+            <div className="text-center py-4">Loading posts...</div>
+          ) : (
+            <Posts posts={posts} postsPerPage={5} />
+          )}
           <div className="text-xs text-gray-400 mt-8 mb-16 md:mb-4">
             <p>© INSTAGRAM</p>
           </div>

From 695c534bf5acf37c7afcbb8e6357b2fd5b0ad4d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Tue, 14 Jan 2025 00:16:13 +0900
Subject: [PATCH 02/12] =?UTF-8?q?fix:=20=ED=81=B4=EB=A6=AD=EB=90=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=ED=95=AD=EB=AA=A9=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/SideBar.tsx | 34 +++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index 2932e1c..178381e 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -7,8 +7,8 @@ import {
   Search,
   User,
 } from 'lucide-react';
-import { useContext, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useContext, useEffect, useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
 
 import { LoginContext } from '../../App';
 import CreatePostModal from '../modals/CreatePostModal';
@@ -18,6 +18,7 @@ const SideBar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [activeItem, setActiveItem] = useState('home');
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const location = useLocation();
 
   const context = useContext(LoginContext);
 
@@ -25,6 +26,17 @@ const SideBar = () => {
     throw new Error('LoginContext is not provided');
   }
 
+  useEffect(() => {
+    const path = location.pathname;
+    if (path === '/') {
+      setActiveItem('home');
+    } else if (path === '/explore') {
+      setActiveItem('explore');
+    } else if (path.startsWith('/username')) {
+      setActiveItem('profile');
+    }
+  }, [location.pathname]);
+
   const handleNavItemClick = (itemName: string) => {
     setActiveItem(itemName);
     if (itemName === 'create') {
@@ -45,14 +57,14 @@ const SideBar = () => {
       <div className="flex flex-col flex-1 space-y-2">
         <Link
           to="/"
-          onClick={() => {
-            handleNavItemClick('home');
-          }}
         >
           <NavItem
             icon={<Home />}
             label="Home"
             active={activeItem === 'home'}
+            onClick={() => {
+              handleNavItemClick('home');
+            }}
           />
         </Link>
         <NavItem
@@ -65,14 +77,14 @@ const SideBar = () => {
         />
         <Link
           to="/explore"
-          onClick={() => {
-            handleNavItemClick('explore');
-          }}
         >
           <NavItem
             icon={<Compass />}
             label="Explore"
             active={activeItem === 'explore'}
+            onClick={() => {
+              handleNavItemClick('explore');
+            }}
           />
         </Link>
         <NavItem
@@ -101,14 +113,14 @@ const SideBar = () => {
         )}
         <Link
           to="/username"
-          onClick={() => {
-            handleNavItemClick('profile');
-          }}
         >
           <NavItem
             icon={<User />}
             label="Profile"
             active={activeItem === 'profile'}
+            onClick={() => {
+              handleNavItemClick('profile');
+            }}
           />
         </Link>
       </div>

From 9472eab2fba84c690801b236042ad30726a14eff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Tue, 14 Jan 2025 22:21:00 +0900
Subject: [PATCH 03/12] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8,=20?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20api=20=EB=B6=84=EB=A6=AC?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/fetchProfile.ts           | 21 +++++++++
 src/api/signup.ts                 | 24 ++++++++++
 src/api/singin.ts                 | 34 ++++++++++++++
 src/components/layout/SideBar.tsx | 27 ++---------
 src/hooks/useAuth.ts              | 12 +++--
 src/pages/LoginPage.tsx           | 34 +++-----------
 src/pages/RegisterPage.tsx        | 78 +++++++++----------------------
 src/types/auth.ts                 |  8 +---
 8 files changed, 121 insertions(+), 117 deletions(-)
 create mode 100644 src/api/fetchProfile.ts
 create mode 100644 src/api/signup.ts
 create mode 100644 src/api/singin.ts

diff --git a/src/api/fetchProfile.ts b/src/api/fetchProfile.ts
new file mode 100644
index 0000000..2c6cf5c
--- /dev/null
+++ b/src/api/fetchProfile.ts
@@ -0,0 +1,21 @@
+import type { UserProfile } from "../types/user";
+
+export const fetchProfile = async (token: string) => {
+  try {
+    const response = await fetch('https://waffle-instaclone.kro.kr/api/user/profile', {
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'accept': 'application/json'
+      }
+    });
+    
+    if (response.ok) {
+      const profileData = await response.json() as UserProfile;
+      return profileData.username;
+    }
+    throw new Error('Profile fetch failed');
+  } catch (err) {
+    console.error('Profile fetch error:', err);
+    return null;
+  }
+};
\ No newline at end of file
diff --git a/src/api/signup.ts b/src/api/signup.ts
new file mode 100644
index 0000000..a05d104
--- /dev/null
+++ b/src/api/signup.ts
@@ -0,0 +1,24 @@
+interface SignupRequest {
+  username: string;
+  password: string;
+  full_name: string;
+  email: string;
+  phone_number: string;
+}
+
+export const signup = async (formData: SignupRequest): Promise<void> => {
+  const response = await fetch('http://3.34.185.81:8000/api/user/signup', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(formData),
+  });
+
+  if (!response.ok) {
+    const errorData = (await response.json()) as { detail?: string };
+    throw new Error(
+      errorData.detail ?? '회원가입에 실패했습니다.'
+    );
+  }
+};
\ No newline at end of file
diff --git a/src/api/singin.ts b/src/api/singin.ts
new file mode 100644
index 0000000..22cf618
--- /dev/null
+++ b/src/api/singin.ts
@@ -0,0 +1,34 @@
+import type { User } from '../hooks/useAuth';
+import { fetchProfile } from './fetchProfile';
+
+interface SignInResponse {
+  access_token: string;
+  refresh_token: string;
+}
+
+export const signin = async (username: string, password: string): Promise<User> => {
+  const response = await fetch('https://waffle-instaclone.kro.kr/api/user/signin', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      username,
+      password,
+    }),
+  });
+
+  if (response.ok) {
+    const data = (await response.json()) as SignInResponse;
+    localStorage.setItem('access_token', data.access_token);
+    localStorage.setItem('refresh_token', data.refresh_token);
+
+    return await fetchProfile(data.access_token) as User;
+  }
+
+  if (response.status === 401) {
+    throw new Error('아이디 또는 비밀번호가 일치하지 않습니다.');
+  }
+
+  throw new Error('로그인 중 오류가 발생했습니다.');
+};
\ No newline at end of file
diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index 178381e..c55a4d0 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -37,11 +37,9 @@ const SideBar = () => {
     }
   }, [location.pathname]);
 
-  const handleNavItemClick = (itemName: string) => {
+  const handleCreateClick = (itemName: string) => {
     setActiveItem(itemName);
-    if (itemName === 'create') {
-      setIsCreateModalOpen(true);
-    }
+    setIsCreateModalOpen(true);
   };
 
   return (
@@ -62,18 +60,12 @@ const SideBar = () => {
             icon={<Home />}
             label="Home"
             active={activeItem === 'home'}
-            onClick={() => {
-              handleNavItemClick('home');
-            }}
           />
         </Link>
         <NavItem
           icon={<Search />}
           label="Search"
           active={activeItem === 'search'}
-          onClick={() => {
-            handleNavItemClick('search');
-          }}
         />
         <Link
           to="/explore"
@@ -82,25 +74,19 @@ const SideBar = () => {
             icon={<Compass />}
             label="Explore"
             active={activeItem === 'explore'}
-            onClick={() => {
-              handleNavItemClick('explore');
-            }}
           />
         </Link>
         <NavItem
           icon={<Heart />}
           label="Notifications"
           active={activeItem === 'notifications'}
-          onClick={() => {
-            handleNavItemClick('notifications');
-          }}
         />
         <NavItem
           icon={<PlusSquare />}
           label="Create"
           active={activeItem === 'create'}
           onClick={() => {
-            handleNavItemClick('create');
+            handleCreateClick('create');
           }}
         />
         {isCreateModalOpen && (
@@ -112,15 +98,12 @@ const SideBar = () => {
           />
         )}
         <Link
-          to="/username"
+          to="/:username"
         >
           <NavItem
             icon={<User />}
             label="Profile"
             active={activeItem === 'profile'}
-            onClick={() => {
-              handleNavItemClick('profile');
-            }}
           />
         </Link>
       </div>
@@ -139,7 +122,7 @@ const SideBar = () => {
               <button
                 className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
                 onClick={() => {
-                  context.handleIsLoggedIn(false);
+                  context.handleIsLoggedIn(false, context.user);
                   setIsMenuOpen(false);
                 }}
               >
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 26014b7..5074df3 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -2,8 +2,6 @@ import { useState } from 'react';
 
 export type User = {
   username: string;
-  email: string;
-  password: string;
 } | null;
 
 export function useAuth() {
@@ -19,12 +17,16 @@ export function useAuth() {
     return savedUser != null ? (JSON.parse(savedUser) as User) : null;
   });
 
-  const handleIsLoggedIn = (value: boolean) => {
+  const handleIsLoggedIn = (value: boolean, userData: User) => {
     setIsLoggedIn(value);
     localStorage.setItem('isLoggedIn', String(value));
-    if (!value) {
-      localStorage.removeItem('user');
+    
+    if (value && (userData != null)) {
+      setUser(userData);
+      localStorage.setItem('user', JSON.stringify(userData));
+    } else if (!value) {
       setUser(null);
+      localStorage.removeItem('user');
     }
   };
 
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index c5c21bd..6311652 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
+import { signin } from '../api/singin';
+import type { User } from '../hooks/useAuth';
+
 type LoginPageProps = {
-  handleIsLoggedIn: (value: boolean) => void;
+  handleIsLoggedIn: (value: boolean, userData: User) => void;
 };
 
 const LoginPage = ({ handleIsLoggedIn }: LoginPageProps) => {
@@ -17,34 +20,11 @@ const LoginPage = ({ handleIsLoggedIn }: LoginPageProps) => {
       return;
     }
     try {
-      const response = await fetch('http://3.34.185.81:8000/api/user/signin', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          username,
-          password,
-        }),
-      });
-
-      if (response.ok) {
-        const data = (await response.json()) as {
-          access_token: string;
-          refresh_token: string;
-        };
-        // Store tokens if needed
-        localStorage.setItem('access_token', data.access_token);
-        localStorage.setItem('refresh_token', data.refresh_token);
-        handleIsLoggedIn(true);
-      } else if (response.status === 401) {
-        setError('아이디 또는 비밀번호가 일치하지 않습니다.');
-      } else {
-        setError('로그인 중 오류가 발생했습니다.');
-      }
+      const user = await signin(username, password);
+      handleIsLoggedIn(true, user);
     } catch (err) {
       console.error('Login error:', err);
-      setError('로그인 중 오류가 발생했습니다.');
+      setError(err instanceof Error ? err.message : '로그인 중 오류가 발생했습니다.');
     }
   };
 
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
index 32e6f10..79eaf85 100644
--- a/src/pages/RegisterPage.tsx
+++ b/src/pages/RegisterPage.tsx
@@ -1,8 +1,12 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 
+import { signup } from '../api/signup';
+import { signin } from '../api/singin';
+import type { User } from '../hooks/useAuth';
+
 type RegisterPageProps = {
-  handleIsLoggedIn: (value: boolean) => void;
+  handleIsLoggedIn: (value: boolean, userData: User) => void;
 };
 
 const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
@@ -33,7 +37,6 @@ const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
       phoneNumber: '',
     };
 
-    // Email validation
     if (formData.email.length === 0) {
       newErrors.email = '이메일을 입력해주세요';
       isValid = false;
@@ -42,13 +45,11 @@ const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
       isValid = false;
     }
 
-    // Full name validation
     if (formData.fullName.length === 0) {
       newErrors.fullName = '성명을 입력해주세요';
       isValid = false;
     }
 
-    // Username validation
     if (formData.username.length === 0) {
       newErrors.username = '사용자 이름을 입력해주세요';
       isValid = false;
@@ -57,7 +58,6 @@ const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
       isValid = false;
     }
 
-    // Password validation
     if (formData.password.length === 0) {
       newErrors.password = '비밀번호를 입력해주세요';
       isValid = false;
@@ -66,7 +66,6 @@ const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
       isValid = false;
     }
 
-    // Phone number validation
     if (formData.phoneNumber.length === 0) {
       newErrors.phoneNumber = '전화번호를 입력해주세요';
       isValid = false;
@@ -81,63 +80,29 @@ const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-
+  
     if (!validateForm()) {
       return;
     }
-
+  
     try {
-      const response = await fetch('http://3.34.185.81:8000/api/user/signup', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          username: formData.username,
-          password: formData.password,
-          full_name: formData.fullName,
-          email: formData.email,
-          phone_number: formData.phoneNumber,
-        }),
+      await signup({
+        username: formData.username,
+        password: formData.password,
+        full_name: formData.fullName,
+        email: formData.email,
+        phone_number: formData.phoneNumber,
       });
-
-      if (response.ok) {
-        // After successful signup, attempt to login
-        const loginResponse = await fetch(
-          'http://3.34.185.81:8000/api/user/signin',
-          {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              username: formData.username,
-              password: formData.password,
-            }),
-          },
-        );
-
-        if (loginResponse.ok) {
-          const data = (await loginResponse.json()) as {
-            access_token: string;
-            refresh_token: string;
-          };
-          localStorage.setItem('access_token', data.access_token);
-          localStorage.setItem('refresh_token', data.refresh_token);
-          handleIsLoggedIn(true);
-          await navigate('/');
-        } else {
-          throw new Error('Login failed after signup');
-        }
-      } else {
-        const errorData = (await response.json()) as { detail?: string };
-        throw new Error(
-          errorData.detail != null ? errorData.detail : 'Registration failed',
-        );
-      }
+  
+      const user = await signin(formData.username, formData.password);
+      handleIsLoggedIn(true, user);
+      await navigate('/');
     } catch (error) {
       console.error('Registration/Login failed:', error);
-      // Handle specific error messages here
+      setErrors((prev) => ({
+        ...prev,
+        username: error instanceof Error ? error.message : '회원가입에 실패했습니다.',
+      }));
     }
   };
 
@@ -147,7 +112,6 @@ const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
       ...prev,
       [name]: value,
     }));
-    // Clear error when user starts typing
     if (errors[name as keyof typeof errors].length > 0) {
       setErrors((prev) => ({
         ...prev,
diff --git a/src/types/auth.ts b/src/types/auth.ts
index 8770e4e..dcc5f85 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,11 +1,7 @@
-export type User = {
-  username: string;
-  email: string;
-  password: string;
-} | null;
+import type { User } from "../hooks/useAuth";
 
 export type LoginContextType = {
   isLoggedIn: boolean;
   user: User;
-  handleIsLoggedIn: (value: boolean) => void;
+  handleIsLoggedIn: (value: boolean, userData: User) => void;
 };

From 7e9a8c8b07d17246132c591a3de3547d8e6d7623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Wed, 15 Jan 2025 00:41:10 +0900
Subject: [PATCH 04/12] =?UTF-8?q?feat:=20user=20api=20=EC=97=B0=EA=B2=B0?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/{fetchProfile.ts => myProfile.ts} |  2 +-
 src/api/signup.ts                         |  2 +-
 src/api/singin.ts                         |  6 +--
 src/api/userData.ts                       | 14 ++++++
 src/components/feed/Post.tsx              |  7 +--
 src/components/feed/Posts.tsx             | 11 ++++-
 src/components/layout/SideBar.tsx         |  6 +--
 src/components/profile/ProfileInfo.tsx    |  4 +-
 src/components/profile/ProfileTabs.tsx    | 53 ++++++++++++++++----
 src/components/shared/PostGrid.tsx        | 20 ++++++--
 src/hooks/useAuth.ts                      |  2 -
 src/pages/ExplorePage.tsx                 |  2 +-
 src/pages/MainPage.tsx                    | 28 +----------
 src/pages/ProfilePage.tsx                 | 59 ++++++++++++++++++-----
 src/types/post.ts                         | 13 +++--
 src/types/user.ts                         | 14 +++---
 16 files changed, 160 insertions(+), 83 deletions(-)
 rename src/api/{fetchProfile.ts => myProfile.ts} (90%)
 create mode 100644 src/api/userData.ts

diff --git a/src/api/fetchProfile.ts b/src/api/myProfile.ts
similarity index 90%
rename from src/api/fetchProfile.ts
rename to src/api/myProfile.ts
index 2c6cf5c..3f4f169 100644
--- a/src/api/fetchProfile.ts
+++ b/src/api/myProfile.ts
@@ -1,6 +1,6 @@
 import type { UserProfile } from "../types/user";
 
-export const fetchProfile = async (token: string) => {
+export const myProfile = async (token: string) => {
   try {
     const response = await fetch('https://waffle-instaclone.kro.kr/api/user/profile', {
       headers: {
diff --git a/src/api/signup.ts b/src/api/signup.ts
index a05d104..8904025 100644
--- a/src/api/signup.ts
+++ b/src/api/signup.ts
@@ -6,7 +6,7 @@ interface SignupRequest {
   phone_number: string;
 }
 
-export const signup = async (formData: SignupRequest): Promise<void> => {
+export const signup = async (formData: SignupRequest) => {
   const response = await fetch('http://3.34.185.81:8000/api/user/signup', {
     method: 'POST',
     headers: {
diff --git a/src/api/singin.ts b/src/api/singin.ts
index 22cf618..4c3c743 100644
--- a/src/api/singin.ts
+++ b/src/api/singin.ts
@@ -1,12 +1,12 @@
 import type { User } from '../hooks/useAuth';
-import { fetchProfile } from './fetchProfile';
+import { myProfile } from './myProfile';
 
 interface SignInResponse {
   access_token: string;
   refresh_token: string;
 }
 
-export const signin = async (username: string, password: string): Promise<User> => {
+export const signin = async (username: string, password: string) => {
   const response = await fetch('https://waffle-instaclone.kro.kr/api/user/signin', {
     method: 'POST',
     headers: {
@@ -23,7 +23,7 @@ export const signin = async (username: string, password: string): Promise<User>
     localStorage.setItem('access_token', data.access_token);
     localStorage.setItem('refresh_token', data.refresh_token);
 
-    return await fetchProfile(data.access_token) as User;
+    return await myProfile(data.access_token) as User;
   }
 
   if (response.status === 401) {
diff --git a/src/api/userData.ts b/src/api/userData.ts
new file mode 100644
index 0000000..bc4619f
--- /dev/null
+++ b/src/api/userData.ts
@@ -0,0 +1,14 @@
+import type { UserProfile } from "../types/user";
+
+export async function fetchUserData(username: string): Promise<UserProfile> {
+  try {
+    const response = await fetch(`https://waffle-instaclone.kro.kr/api/user/${username}`);
+    if (!response.ok) {
+      throw new Error('Failed to fetch user data');
+    }
+    return await response.json() as UserProfile;
+  } catch (error) {
+    console.error('Error fetching user data:', error);
+    throw error;
+  }
+}
\ No newline at end of file
diff --git a/src/components/feed/Post.tsx b/src/components/feed/Post.tsx
index e46fe4a..c13903d 100644
--- a/src/components/feed/Post.tsx
+++ b/src/components/feed/Post.tsx
@@ -3,10 +3,11 @@ import { Heart, MessageCircle, Send } from 'lucide-react';
 type PostProps = {
   username: string;
   imageUrl: string;
+  location: string;
   caption: string;
   likes: number;
   comments: number;
-  timestamp: string;
+  creation_date: string;
 };
 
 const Post = ({
@@ -15,7 +16,7 @@ const Post = ({
   caption,
   likes,
   comments,
-  timestamp,
+  creation_date,
 }: PostProps) => (
   <div className="bg-white border rounded-md">
     <div className="flex items-center p-4">
@@ -49,7 +50,7 @@ const Post = ({
         <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>
+      <p className="text-gray-400 text-xs mt-1">{creation_date}</p>
     </div>
   </div>
 );
diff --git a/src/components/feed/Posts.tsx b/src/components/feed/Posts.tsx
index d5a8068..478fe3f 100644
--- a/src/components/feed/Posts.tsx
+++ b/src/components/feed/Posts.tsx
@@ -9,7 +9,16 @@ const Posts = ({ posts, postsPerPage }: PostsProps) => {
   return (
     <div className="space-y-8">
       {currentPosts.map((post) => (
-        <Post key={post.id} {...post} />
+        <Post
+          key={post.post_id}
+          username={post.user_id.toString()}
+          imageUrl={post.file_url[0] as string}
+          caption={post.post_text}
+          likes={0}
+          location={post.location}
+          creation_date={post.creation_date} 
+          comments={0}        
+        />
       ))}
       <div className="flex justify-center mt-8 mb-16 md:mb-8">
         <button
diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index c55a4d0..1c8caa6 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -32,10 +32,10 @@ const SideBar = () => {
       setActiveItem('home');
     } else if (path === '/explore') {
       setActiveItem('explore');
-    } else if (path.startsWith('/username')) {
+    } else if (path === `/${String(context.user)}`) {
       setActiveItem('profile');
     }
-  }, [location.pathname]);
+  }, [location.pathname, context.user]);
 
   const handleCreateClick = (itemName: string) => {
     setActiveItem(itemName);
@@ -98,7 +98,7 @@ const SideBar = () => {
           />
         )}
         <Link
-          to="/:username"
+          to={`/${String(context.user)}`}
         >
           <NavItem
             icon={<User />}
diff --git a/src/components/profile/ProfileInfo.tsx b/src/components/profile/ProfileInfo.tsx
index 6fd7e32..0a8d693 100644
--- a/src/components/profile/ProfileInfo.tsx
+++ b/src/components/profile/ProfileInfo.tsx
@@ -2,6 +2,7 @@ import { Settings } from 'lucide-react';
 
 type ProfileInfoProps = {
   username: string;
+  profileImage: string;
   posts: number;
   followers: number;
   following: number;
@@ -11,6 +12,7 @@ type ProfileInfoProps = {
 
 const ProfileInfo = ({
   username,
+  profileImage,
   posts,
   followers,
   following,
@@ -21,7 +23,7 @@ const ProfileInfo = ({
     <div className="mb-8">
       <div className="flex items-center mb-4">
         <img
-          src="/placeholder.svg"
+          src={`http://3.34.185.81:8000/${profileImage}`}
           alt={username}
           className="w-20 h-20 rounded-full mr-4"
         />
diff --git a/src/components/profile/ProfileTabs.tsx b/src/components/profile/ProfileTabs.tsx
index c51fef6..f630562 100644
--- a/src/components/profile/ProfileTabs.tsx
+++ b/src/components/profile/ProfileTabs.tsx
@@ -1,35 +1,68 @@
 import { Bookmark, Grid } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect,useState } from 'react';
 
+import type { Post } from '../../types/post';
 import PostGrid from '../shared/PostGrid';
 
-const ProfileTabs = () => {
+type ProfileTabsProps = {
+  postIds: number[];
+};
+
+const ProfileTabs = ({ postIds }: ProfileTabsProps) => {
   const [activeTab, setActiveTab] = useState('posts');
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      if (postIds.length===0) return;
+      
+      setIsLoading(true);
+      try {
+        const promises = postIds.map(id => 
+          fetch(`https://waffle-instaclone.kro.kr/api/post/${id}`, {
+            headers: { 'accept': 'application/json' }
+          }).then(res => res.json())
+        );
+        
+        const results = await Promise.all(promises) as Post[];
+        setPosts(results);
+      } catch (error) {
+        console.error('Failed to fetch posts:', error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void fetchPosts();
+  }, [postIds]);
 
   return (
     <div>
       <div className="flex justify-around border-t">
         <button
           className={`flex-1 py-2 ${activeTab === 'posts' ? 'border-t-2 border-black' : ''}`}
-          onClick={() => {
-            setActiveTab('posts');
-          }}
+          onClick={() => { setActiveTab('posts'); }}
         >
           <Grid className="w-6 h-6 mx-auto" />
         </button>
         <button
           className={`flex-1 py-2 ${activeTab === 'saved' ? 'border-t-2 border-black' : ''}`}
-          onClick={() => {
-            setActiveTab('saved');
-          }}
+          onClick={() => { setActiveTab('saved'); }}
         >
           <Bookmark className="w-6 h-6 mx-auto" />
         </button>
       </div>
-      {activeTab === 'posts' && <PostGrid />}
+      {activeTab === 'posts' && (
+        isLoading ? (
+          <div className="text-center py-8">Loading...</div>
+        ) : (
+          <PostGrid posts={posts} />
+        )
+      )}
       {activeTab === 'saved' && <div className="text-center py-8">저장됨</div>}
     </div>
   );
 };
 
-export default ProfileTabs;
+export default ProfileTabs;
\ No newline at end of file
diff --git a/src/components/shared/PostGrid.tsx b/src/components/shared/PostGrid.tsx
index 48e56d3..862a282 100644
--- a/src/components/shared/PostGrid.tsx
+++ b/src/components/shared/PostGrid.tsx
@@ -1,13 +1,23 @@
-const PostGrid = () => {
-  const posts = Array(4).fill(null);
+import type { Post } from "../../types/post";
 
+interface PostGridProps {
+  posts: Post[];
+}
+
+const PostGrid = ({ posts }: PostGridProps) => {
   return (
     <div className="grid grid-cols-3 gap-1">
-      {posts.map((_, index) => (
-        <div key={index} className="aspect-square bg-gray-200"></div>
+      {posts.map(post => (
+        <div key={post.post_id} className="aspect-square relative">
+          <img
+            src={`https://waffle-instaclone.kro.kr/${post.file_url[0] as string}`}
+            alt="Post image"
+            className="absolute inset-0 w-full h-full object-cover"
+          />
+        </div>
       ))}
     </div>
   );
 };
 
-export default PostGrid;
+export default PostGrid;
\ No newline at end of file
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 5074df3..36091be 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -5,8 +5,6 @@ export type User = {
 } | null;
 
 export function useAuth() {
-  // 임시 로그인 상태
-  // TODO: 로그인 API 관리 로직 구현
   const [isLoggedIn, setIsLoggedIn] = useState(() => {
     const saved = localStorage.getItem('isLoggedIn');
     return saved === 'true';
diff --git a/src/pages/ExplorePage.tsx b/src/pages/ExplorePage.tsx
index 826d4f6..0e66d45 100644
--- a/src/pages/ExplorePage.tsx
+++ b/src/pages/ExplorePage.tsx
@@ -7,7 +7,7 @@ const ExplorePage = () => {
     <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 />
+          <PostGrid posts={[]} />
         </div>
       </div>
 
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index fde5ce3..0a345c0 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -7,14 +7,6 @@ import MobileHeader from '../components/layout/MobileHeader';
 import SideBar from '../components/layout/SideBar';
 import type { Post } from '../types/post';
 
-interface ApiPost {
-  post_id: number;
-  user_id: number;
-  location: string;
-  post_text: string;
-  creation_date: string;
-  file_url: string[];
-}
 
 const MainPage = () => {
   const [posts, setPosts] = useState<Post[]>([]);
@@ -26,7 +18,7 @@ const MainPage = () => {
     const fetchPosts = async () => {
       try {
         const postsPromises = friendIds.map((id) =>
-          fetch(`http://3.34.185.81:8000/api/post/user/${id}`, {
+          fetch(`https://waffle-instaclone.kro.kr/api/post/user/${id}`, {
             headers: {
               Authorization: `Bearer ${localStorage.getItem('access_token') as string}`,
             },
@@ -36,23 +28,7 @@ const MainPage = () => {
         const postsArrays = await Promise.all(postsPromises);
         const allPosts = postsArrays.flat();
 
-        const transformedPosts = allPosts.map((post: ApiPost) => ({
-          id: post.post_id,
-          username: `user${post.user_id}`,
-          imageUrl: `http://3.34.185.81:8000/${post.file_url[0] as string}`,
-          caption: post.post_text,
-          likes: 0,
-          comments: 0,
-          timestamp: new Date(post.creation_date).toLocaleString(),
-        }));
-
-        const sortedPosts = transformedPosts.sort((a, b) => {
-          const dateA = new Date(a.timestamp.replace(/\./g, '/')).getTime();
-          const dateB = new Date(b.timestamp.replace(/\./g, '/')).getTime();
-          return dateB - dateA;
-        });
-
-        setPosts(sortedPosts);
+        setPosts(allPosts);
       } catch (error) {
         console.error('Error fetching posts:', error);
       } finally {
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 84fb5c2..d639296 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -1,35 +1,68 @@
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
+import { fetchUserData } from '../api/userData';
 import MobileBar from '../components/layout/MobileBar';
 import MobileHeader from '../components/layout/MobileHeader';
 import SideBar from '../components/layout/SideBar';
 import Highlights from '../components/profile/Highlights';
 import ProfileInfo from '../components/profile/ProfileInfo';
 import ProfileTabs from '../components/profile/ProfileTabs';
+import type { UserProfile } from '../types/user';
 
 const ProfilePage = () => {
   const { username } = useParams();
-  const profileData = {
-    username: username as string,
-    posts: 4,
-    followers: 100,
-    following: 100,
-    fullName: 'User1',
-    bio: 'User1 Bio',
-  };
+  const [profileData, setProfileData] = useState<UserProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadUserProfile = async () => {
+      if (username == null) return;
+      
+      try {
+        setLoading(true);
+        const userData = await fetchUserData(username);
+        setProfileData(userData);
+      } catch (err) {
+        console.error('Error loading profile:', err);
+        setError('Failed to load profile data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    void loadUserProfile();
+  }, [username]);
+
+  if (loading) {
+    return <div className="flex justify-center items-center min-h-screen">Loading...</div>;
+  }
+
+  if (error != null || profileData == null) {
+    return <div className="flex justify-center items-center min-h-screen">Failed to load profile</div>;
+  }
 
   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">
           <MobileHeader />
-          <ProfileInfo {...profileData} />
+          <ProfileInfo
+            username={profileData.username}
+            posts={profileData.post_count}
+            followers={profileData.follower_count}
+            following={profileData.following_count}
+            fullName={profileData.full_name}
+            bio={profileData.introduce}
+            profileImage={profileData.profile_image}
+          />
           <div className="hidden md:block mb-4">
-            <h2 className="font-semibold">{profileData.fullName}</h2>
-            <p>{profileData.bio}</p>
+            <h2 className="font-semibold">{profileData.full_name}</h2>
+            <p>{profileData.introduce}</p>
           </div>
           <Highlights />
-          <ProfileTabs />
+          <ProfileTabs postIds={profileData.post_ids} />
         </div>
       </div>
 
@@ -41,4 +74,4 @@ const ProfilePage = () => {
   );
 };
 
-export default ProfilePage;
+export default ProfilePage;
\ No newline at end of file
diff --git a/src/types/post.ts b/src/types/post.ts
index d0d8b47..2a02ca5 100644
--- a/src/types/post.ts
+++ b/src/types/post.ts
@@ -1,11 +1,10 @@
 export interface Post {
-  id: number;
-  username: string;
-  imageUrl: string;
-  caption: string;
-  likes: number;
-  comments: number;
-  timestamp: string;
+  post_id: number;
+  user_id: number;
+  location: string;
+  post_text: string;
+  creation_date: string;
+  file_url: string[];
 }
 
 export interface PostsProps {
diff --git a/src/types/user.ts b/src/types/user.ts
index edf19a3..25d7647 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -6,12 +6,14 @@ export interface UserProfile {
   phone_number: string;
   creation_date: string;
   profile_image: string;
-  gender: string | null;
-  birthday: string | null;
-  introduce: string | null;
-  website: string | null;
-  followers: number;
-  following: number;
+  gender: string;
+  birthday: string;
+  introduce: string;
+  website: string;
+  follower_count: number;
+  following_count: number;
+  followers: number[];
+  following: number[];
   post_count: number;
   post_ids: number[];
 }

From cc654524b10d4191ecc10fea58141050688dd7c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Wed, 15 Jan 2025 00:43:17 +0900
Subject: [PATCH 05/12] fix: prettier

---
 src/api/myProfile.ts                   | 23 ++++++++++--------
 src/api/signup.ts                      |  6 ++---
 src/api/singin.ts                      | 25 ++++++++++---------
 src/api/userData.ts                    | 10 ++++----
 src/components/feed/Posts.tsx          |  4 ++--
 src/components/layout/SideBar.tsx      | 12 +++-------
 src/components/profile/ProfileTabs.tsx | 33 ++++++++++++++------------
 src/components/shared/PostGrid.tsx     |  6 ++---
 src/hooks/useAuth.ts                   |  4 ++--
 src/pages/LoginPage.tsx                |  4 +++-
 src/pages/MainPage.tsx                 |  1 -
 src/pages/ProfilePage.tsx              | 16 +++++++++----
 src/pages/RegisterPage.tsx             |  9 +++----
 src/types/auth.ts                      |  2 +-
 14 files changed, 84 insertions(+), 71 deletions(-)

diff --git a/src/api/myProfile.ts b/src/api/myProfile.ts
index 3f4f169..1caafef 100644
--- a/src/api/myProfile.ts
+++ b/src/api/myProfile.ts
@@ -1,16 +1,19 @@
-import type { UserProfile } from "../types/user";
+import type { UserProfile } from '../types/user';
 
 export const myProfile = async (token: string) => {
   try {
-    const response = await fetch('https://waffle-instaclone.kro.kr/api/user/profile', {
-      headers: {
-        'Authorization': `Bearer ${token}`,
-        'accept': 'application/json'
-      }
-    });
-    
+    const response = await fetch(
+      'https://waffle-instaclone.kro.kr/api/user/profile',
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          accept: 'application/json',
+        },
+      },
+    );
+
     if (response.ok) {
-      const profileData = await response.json() as UserProfile;
+      const profileData = (await response.json()) as UserProfile;
       return profileData.username;
     }
     throw new Error('Profile fetch failed');
@@ -18,4 +21,4 @@ export const myProfile = async (token: string) => {
     console.error('Profile fetch error:', err);
     return null;
   }
-};
\ No newline at end of file
+};
diff --git a/src/api/signup.ts b/src/api/signup.ts
index 8904025..d496368 100644
--- a/src/api/signup.ts
+++ b/src/api/signup.ts
@@ -17,8 +17,6 @@ export const signup = async (formData: SignupRequest) => {
 
   if (!response.ok) {
     const errorData = (await response.json()) as { detail?: string };
-    throw new Error(
-      errorData.detail ?? '회원가입에 실패했습니다.'
-    );
+    throw new Error(errorData.detail ?? '회원가입에 실패했습니다.');
   }
-};
\ No newline at end of file
+};
diff --git a/src/api/singin.ts b/src/api/singin.ts
index 4c3c743..70ea401 100644
--- a/src/api/singin.ts
+++ b/src/api/singin.ts
@@ -7,23 +7,26 @@ interface SignInResponse {
 }
 
 export const signin = async (username: string, password: string) => {
-  const response = await fetch('https://waffle-instaclone.kro.kr/api/user/signin', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
+  const response = await fetch(
+    'https://waffle-instaclone.kro.kr/api/user/signin',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        username,
+        password,
+      }),
     },
-    body: JSON.stringify({
-      username,
-      password,
-    }),
-  });
+  );
 
   if (response.ok) {
     const data = (await response.json()) as SignInResponse;
     localStorage.setItem('access_token', data.access_token);
     localStorage.setItem('refresh_token', data.refresh_token);
 
-    return await myProfile(data.access_token) as User;
+    return (await myProfile(data.access_token)) as User;
   }
 
   if (response.status === 401) {
@@ -31,4 +34,4 @@ export const signin = async (username: string, password: string) => {
   }
 
   throw new Error('로그인 중 오류가 발생했습니다.');
-};
\ No newline at end of file
+};
diff --git a/src/api/userData.ts b/src/api/userData.ts
index bc4619f..de6ac20 100644
--- a/src/api/userData.ts
+++ b/src/api/userData.ts
@@ -1,14 +1,16 @@
-import type { UserProfile } from "../types/user";
+import type { UserProfile } from '../types/user';
 
 export async function fetchUserData(username: string): Promise<UserProfile> {
   try {
-    const response = await fetch(`https://waffle-instaclone.kro.kr/api/user/${username}`);
+    const response = await fetch(
+      `https://waffle-instaclone.kro.kr/api/user/${username}`,
+    );
     if (!response.ok) {
       throw new Error('Failed to fetch user data');
     }
-    return await response.json() as UserProfile;
+    return (await response.json()) as UserProfile;
   } catch (error) {
     console.error('Error fetching user data:', error);
     throw error;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/feed/Posts.tsx b/src/components/feed/Posts.tsx
index 478fe3f..5e2c6d8 100644
--- a/src/components/feed/Posts.tsx
+++ b/src/components/feed/Posts.tsx
@@ -16,8 +16,8 @@ const Posts = ({ posts, postsPerPage }: PostsProps) => {
           caption={post.post_text}
           likes={0}
           location={post.location}
-          creation_date={post.creation_date} 
-          comments={0}        
+          creation_date={post.creation_date}
+          comments={0}
         />
       ))}
       <div className="flex justify-center mt-8 mb-16 md:mb-8">
diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index 1c8caa6..99afe3f 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -53,9 +53,7 @@ const SideBar = () => {
       </div>
 
       <div className="flex flex-col flex-1 space-y-2">
-        <Link
-          to="/"
-        >
+        <Link to="/">
           <NavItem
             icon={<Home />}
             label="Home"
@@ -67,9 +65,7 @@ const SideBar = () => {
           label="Search"
           active={activeItem === 'search'}
         />
-        <Link
-          to="/explore"
-        >
+        <Link to="/explore">
           <NavItem
             icon={<Compass />}
             label="Explore"
@@ -97,9 +93,7 @@ const SideBar = () => {
             }}
           />
         )}
-        <Link
-          to={`/${String(context.user)}`}
-        >
+        <Link to={`/${String(context.user)}`}>
           <NavItem
             icon={<User />}
             label="Profile"
diff --git a/src/components/profile/ProfileTabs.tsx b/src/components/profile/ProfileTabs.tsx
index f630562..c575b78 100644
--- a/src/components/profile/ProfileTabs.tsx
+++ b/src/components/profile/ProfileTabs.tsx
@@ -1,5 +1,5 @@
 import { Bookmark, Grid } from 'lucide-react';
-import { useEffect,useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import type { Post } from '../../types/post';
 import PostGrid from '../shared/PostGrid';
@@ -15,17 +15,17 @@ const ProfileTabs = ({ postIds }: ProfileTabsProps) => {
 
   useEffect(() => {
     const fetchPosts = async () => {
-      if (postIds.length===0) return;
-      
+      if (postIds.length === 0) return;
+
       setIsLoading(true);
       try {
-        const promises = postIds.map(id => 
+        const promises = postIds.map((id) =>
           fetch(`https://waffle-instaclone.kro.kr/api/post/${id}`, {
-            headers: { 'accept': 'application/json' }
-          }).then(res => res.json())
+            headers: { accept: 'application/json' },
+          }).then((res) => res.json()),
         );
-        
-        const results = await Promise.all(promises) as Post[];
+
+        const results = (await Promise.all(promises)) as Post[];
         setPosts(results);
       } catch (error) {
         console.error('Failed to fetch posts:', error);
@@ -42,27 +42,30 @@ const ProfileTabs = ({ postIds }: ProfileTabsProps) => {
       <div className="flex justify-around border-t">
         <button
           className={`flex-1 py-2 ${activeTab === 'posts' ? 'border-t-2 border-black' : ''}`}
-          onClick={() => { setActiveTab('posts'); }}
+          onClick={() => {
+            setActiveTab('posts');
+          }}
         >
           <Grid className="w-6 h-6 mx-auto" />
         </button>
         <button
           className={`flex-1 py-2 ${activeTab === 'saved' ? 'border-t-2 border-black' : ''}`}
-          onClick={() => { setActiveTab('saved'); }}
+          onClick={() => {
+            setActiveTab('saved');
+          }}
         >
           <Bookmark className="w-6 h-6 mx-auto" />
         </button>
       </div>
-      {activeTab === 'posts' && (
-        isLoading ? (
+      {activeTab === 'posts' &&
+        (isLoading ? (
           <div className="text-center py-8">Loading...</div>
         ) : (
           <PostGrid posts={posts} />
-        )
-      )}
+        ))}
       {activeTab === 'saved' && <div className="text-center py-8">저장됨</div>}
     </div>
   );
 };
 
-export default ProfileTabs;
\ No newline at end of file
+export default ProfileTabs;
diff --git a/src/components/shared/PostGrid.tsx b/src/components/shared/PostGrid.tsx
index 862a282..ca89b8f 100644
--- a/src/components/shared/PostGrid.tsx
+++ b/src/components/shared/PostGrid.tsx
@@ -1,4 +1,4 @@
-import type { Post } from "../../types/post";
+import type { Post } from '../../types/post';
 
 interface PostGridProps {
   posts: Post[];
@@ -7,7 +7,7 @@ interface PostGridProps {
 const PostGrid = ({ posts }: PostGridProps) => {
   return (
     <div className="grid grid-cols-3 gap-1">
-      {posts.map(post => (
+      {posts.map((post) => (
         <div key={post.post_id} className="aspect-square relative">
           <img
             src={`https://waffle-instaclone.kro.kr/${post.file_url[0] as string}`}
@@ -20,4 +20,4 @@ const PostGrid = ({ posts }: PostGridProps) => {
   );
 };
 
-export default PostGrid;
\ No newline at end of file
+export default PostGrid;
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 36091be..7677ab1 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -18,8 +18,8 @@ export function useAuth() {
   const handleIsLoggedIn = (value: boolean, userData: User) => {
     setIsLoggedIn(value);
     localStorage.setItem('isLoggedIn', String(value));
-    
-    if (value && (userData != null)) {
+
+    if (value && userData != null) {
       setUser(userData);
       localStorage.setItem('user', JSON.stringify(userData));
     } else if (!value) {
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 6311652..7e1e312 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -24,7 +24,9 @@ const LoginPage = ({ handleIsLoggedIn }: LoginPageProps) => {
       handleIsLoggedIn(true, user);
     } catch (err) {
       console.error('Login error:', err);
-      setError(err instanceof Error ? err.message : '로그인 중 오류가 발생했습니다.');
+      setError(
+        err instanceof Error ? err.message : '로그인 중 오류가 발생했습니다.',
+      );
     }
   };
 
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 0a345c0..fb9eec4 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -7,7 +7,6 @@ import MobileHeader from '../components/layout/MobileHeader';
 import SideBar from '../components/layout/SideBar';
 import type { Post } from '../types/post';
 
-
 const MainPage = () => {
   const [posts, setPosts] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index d639296..7415d41 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -19,7 +19,7 @@ const ProfilePage = () => {
   useEffect(() => {
     const loadUserProfile = async () => {
       if (username == null) return;
-      
+
       try {
         setLoading(true);
         const userData = await fetchUserData(username);
@@ -36,11 +36,19 @@ const ProfilePage = () => {
   }, [username]);
 
   if (loading) {
-    return <div className="flex justify-center items-center min-h-screen">Loading...</div>;
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        Loading...
+      </div>
+    );
   }
 
   if (error != null || profileData == null) {
-    return <div className="flex justify-center items-center min-h-screen">Failed to load profile</div>;
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        Failed to load profile
+      </div>
+    );
   }
 
   return (
@@ -74,4 +82,4 @@ const ProfilePage = () => {
   );
 };
 
-export default ProfilePage;
\ No newline at end of file
+export default ProfilePage;
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
index 79eaf85..3787c29 100644
--- a/src/pages/RegisterPage.tsx
+++ b/src/pages/RegisterPage.tsx
@@ -80,11 +80,11 @@ const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-  
+
     if (!validateForm()) {
       return;
     }
-  
+
     try {
       await signup({
         username: formData.username,
@@ -93,7 +93,7 @@ const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
         email: formData.email,
         phone_number: formData.phoneNumber,
       });
-  
+
       const user = await signin(formData.username, formData.password);
       handleIsLoggedIn(true, user);
       await navigate('/');
@@ -101,7 +101,8 @@ const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {
       console.error('Registration/Login failed:', error);
       setErrors((prev) => ({
         ...prev,
-        username: error instanceof Error ? error.message : '회원가입에 실패했습니다.',
+        username:
+          error instanceof Error ? error.message : '회원가입에 실패했습니다.',
       }));
     }
   };
diff --git a/src/types/auth.ts b/src/types/auth.ts
index dcc5f85..6ac3665 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,4 +1,4 @@
-import type { User } from "../hooks/useAuth";
+import type { User } from '../hooks/useAuth';
 
 export type LoginContextType = {
   isLoggedIn: boolean;

From 36fe8f256e752cfdcd9b5241efafb831ebde6132 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Sat, 18 Jan 2025 19:31:21 +0900
Subject: [PATCH 06/12] =?UTF-8?q?fix:=20myProfile=20fetch=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/myProfile.ts                    |  2 +-
 src/api/singin.ts                       |  4 +--
 src/api/{userData.ts => userProfile.ts} |  2 +-
 src/components/layout/SideBar.tsx       |  8 ++---
 src/hooks/useAuth.ts                    | 23 +++++----------
 src/pages/LoginPage.tsx                 |  4 +--
 src/pages/ProfilePage.tsx               | 39 +++++++++++++++----------
 src/types/auth.ts                       |  6 ++--
 src/types/user.ts                       |  4 +--
 9 files changed, 46 insertions(+), 46 deletions(-)
 rename src/api/{userData.ts => userProfile.ts} (82%)

diff --git a/src/api/myProfile.ts b/src/api/myProfile.ts
index 1caafef..45596ac 100644
--- a/src/api/myProfile.ts
+++ b/src/api/myProfile.ts
@@ -14,7 +14,7 @@ export const myProfile = async (token: string) => {
 
     if (response.ok) {
       const profileData = (await response.json()) as UserProfile;
-      return profileData.username;
+      return profileData;
     }
     throw new Error('Profile fetch failed');
   } catch (err) {
diff --git a/src/api/singin.ts b/src/api/singin.ts
index 70ea401..9a3c9ca 100644
--- a/src/api/singin.ts
+++ b/src/api/singin.ts
@@ -1,4 +1,4 @@
-import type { User } from '../hooks/useAuth';
+import type { UserProfile } from '../types/user';
 import { myProfile } from './myProfile';
 
 interface SignInResponse {
@@ -26,7 +26,7 @@ export const signin = async (username: string, password: string) => {
     localStorage.setItem('access_token', data.access_token);
     localStorage.setItem('refresh_token', data.refresh_token);
 
-    return (await myProfile(data.access_token)) as User;
+    return (await myProfile(data.access_token)) as UserProfile;
   }
 
   if (response.status === 401) {
diff --git a/src/api/userData.ts b/src/api/userProfile.ts
similarity index 82%
rename from src/api/userData.ts
rename to src/api/userProfile.ts
index de6ac20..a85439e 100644
--- a/src/api/userData.ts
+++ b/src/api/userProfile.ts
@@ -1,6 +1,6 @@
 import type { UserProfile } from '../types/user';
 
-export async function fetchUserData(username: string): Promise<UserProfile> {
+export async function fetchUserProfile(username: string): Promise<UserProfile> {
   try {
     const response = await fetch(
       `https://waffle-instaclone.kro.kr/api/user/${username}`,
diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index 99afe3f..ee6cdbc 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -32,10 +32,10 @@ const SideBar = () => {
       setActiveItem('home');
     } else if (path === '/explore') {
       setActiveItem('explore');
-    } else if (path === `/${String(context.user)}`) {
+    } else if (path === `/${String(context.myProfile?.username)}`) {
       setActiveItem('profile');
     }
-  }, [location.pathname, context.user]);
+  }, [location.pathname, context.myProfile, context.myProfile?.username]);
 
   const handleCreateClick = (itemName: string) => {
     setActiveItem(itemName);
@@ -93,7 +93,7 @@ const SideBar = () => {
             }}
           />
         )}
-        <Link to={`/${String(context.user)}`}>
+        <Link to={`/${String(context.myProfile?.username)}`}>
           <NavItem
             icon={<User />}
             label="Profile"
@@ -116,7 +116,7 @@ const SideBar = () => {
               <button
                 className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
                 onClick={() => {
-                  context.handleIsLoggedIn(false, context.user);
+                  context.handleIsLoggedIn(false, context.myProfile);
                   setIsMenuOpen(false);
                 }}
               >
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 7677ab1..7787543 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -1,8 +1,6 @@
 import { useState } from 'react';
 
-export type User = {
-  username: string;
-} | null;
+import type { UserProfile } from '../types/user';
 
 export function useAuth() {
   const [isLoggedIn, setIsLoggedIn] = useState(() => {
@@ -10,23 +8,18 @@ export function useAuth() {
     return saved === 'true';
   });
 
-  const [user, setUser] = useState<User>(() => {
-    const savedUser = localStorage.getItem('user');
-    return savedUser != null ? (JSON.parse(savedUser) as User) : null;
-  });
+  const [myProfile, setMyProfile] = useState<UserProfile | null>(null);
 
-  const handleIsLoggedIn = (value: boolean, userData: User) => {
+  const handleIsLoggedIn = (value: boolean, user: UserProfile) => {
     setIsLoggedIn(value);
     localStorage.setItem('isLoggedIn', String(value));
 
-    if (value && userData != null) {
-      setUser(userData);
-      localStorage.setItem('user', JSON.stringify(userData));
-    } else if (!value) {
-      setUser(null);
-      localStorage.removeItem('user');
+    if (value) {
+      setMyProfile(user);
+    } else {
+      setMyProfile(null);
     }
   };
 
-  return { isLoggedIn, user, handleIsLoggedIn };
+  return { isLoggedIn, myProfile, handleIsLoggedIn };
 }
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 7e1e312..869deb9 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -2,10 +2,10 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { signin } from '../api/singin';
-import type { User } from '../hooks/useAuth';
+import type { UserProfile } from '../types/user';
 
 type LoginPageProps = {
-  handleIsLoggedIn: (value: boolean, userData: User) => void;
+  handleIsLoggedIn: (value: boolean, userData: UserProfile) => void;
 };
 
 const LoginPage = ({ handleIsLoggedIn }: LoginPageProps) => {
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 7415d41..89af843 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -1,29 +1,36 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { fetchUserData } from '../api/userData';
+import { fetchUserProfile } from '../api/userProfile';
 import MobileBar from '../components/layout/MobileBar';
 import MobileHeader from '../components/layout/MobileHeader';
 import SideBar from '../components/layout/SideBar';
 import Highlights from '../components/profile/Highlights';
 import ProfileInfo from '../components/profile/ProfileInfo';
 import ProfileTabs from '../components/profile/ProfileTabs';
+import { useAuth } from '../hooks/useAuth';
 import type { UserProfile } from '../types/user';
 
 const ProfilePage = () => {
   const { username } = useParams();
-  const [profileData, setProfileData] = useState<UserProfile | null>(null);
+  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  const { myProfile } = useAuth();
+
   useEffect(() => {
     const loadUserProfile = async () => {
       if (username == null) return;
 
       try {
         setLoading(true);
-        const userData = await fetchUserData(username);
-        setProfileData(userData);
+        if (myProfile !== null && myProfile.username === username) {
+          setUserProfile(myProfile);
+        } else {
+          const userData = await fetchUserProfile(username);
+          setUserProfile(userData);
+        }
       } catch (err) {
         console.error('Error loading profile:', err);
         setError('Failed to load profile data');
@@ -33,7 +40,7 @@ const ProfilePage = () => {
     };
 
     void loadUserProfile();
-  }, [username]);
+  }, [username, myProfile]);
 
   if (loading) {
     return (
@@ -43,7 +50,7 @@ const ProfilePage = () => {
     );
   }
 
-  if (error != null || profileData == null) {
+  if (error != null || userProfile == null) {
     return (
       <div className="flex justify-center items-center min-h-screen">
         Failed to load profile
@@ -57,20 +64,20 @@ const ProfilePage = () => {
         <div className="max-w-3xl mx-auto">
           <MobileHeader />
           <ProfileInfo
-            username={profileData.username}
-            posts={profileData.post_count}
-            followers={profileData.follower_count}
-            following={profileData.following_count}
-            fullName={profileData.full_name}
-            bio={profileData.introduce}
-            profileImage={profileData.profile_image}
+            username={userProfile.username}
+            profileImage={userProfile.profile_image}
+            posts={userProfile.post_count}
+            followers={userProfile.follower_count}
+            following={userProfile.following_count}
+            fullName={userProfile.full_name}
+            bio={userProfile.introduce}
           />
           <div className="hidden md:block mb-4">
-            <h2 className="font-semibold">{profileData.full_name}</h2>
-            <p>{profileData.introduce}</p>
+            <h2 className="font-semibold">{userProfile.full_name}</h2>
+            <p>{userProfile.introduce}</p>
           </div>
           <Highlights />
-          <ProfileTabs postIds={profileData.post_ids} />
+          <ProfileTabs postIds={userProfile.post_ids} />
         </div>
       </div>
 
diff --git a/src/types/auth.ts b/src/types/auth.ts
index 6ac3665..8cb5f2f 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,7 +1,7 @@
-import type { User } from '../hooks/useAuth';
+import type { UserProfile } from './user';
 
 export type LoginContextType = {
   isLoggedIn: boolean;
-  user: User;
-  handleIsLoggedIn: (value: boolean, userData: User) => void;
+  myProfile: UserProfile | null;
+  handleIsLoggedIn: (value: boolean, userData: UserProfile) => void;
 };
diff --git a/src/types/user.ts b/src/types/user.ts
index 25d7647..deefaf4 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,4 +1,4 @@
-export interface UserProfile {
+export type UserProfile = {
   user_id: number;
   username: string;
   full_name: string;
@@ -16,4 +16,4 @@ export interface UserProfile {
   following: number[];
   post_count: number;
   post_ids: number[];
-}
+} | null;

From 24451913f44d4e24891a98d91f92e89b50a46a9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Sun, 19 Jan 2025 01:55:43 +0900
Subject: [PATCH 07/12] =?UTF-8?q?feat:=20follow=20api=20=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/follow.ts                      | 47 +++++++++++++
 src/api/singin.ts                      |  3 +-
 src/components/profile/ProfileInfo.tsx | 96 ++++++++++++++++++++++++--
 src/hooks/useAuth.ts                   | 15 ++--
 src/pages/MainPage.tsx                 | 15 ++--
 src/pages/ProfilePage.tsx              | 14 ++--
 src/types/auth.ts                      |  1 +
 7 files changed, 161 insertions(+), 30 deletions(-)
 create mode 100644 src/api/follow.ts

diff --git a/src/api/follow.ts b/src/api/follow.ts
new file mode 100644
index 0000000..2141209
--- /dev/null
+++ b/src/api/follow.ts
@@ -0,0 +1,47 @@
+export const followUser = async (token: string, followId: number) => {
+  try {
+    const response = await fetch(
+      `http://3.34.185.81:8000/api/follower/follow?follow_id=${followId}`,
+      {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          accept: 'application/json',
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error('Follow request failed');
+    }
+
+    return true;
+  } catch (err) {
+    console.error('Follow error:', err);
+    return false;
+  }
+};
+
+export const unfollowUser = async (token: string, followId: number) => {
+  try {
+    const response = await fetch(
+      `http://3.34.185.81:8000/api/follower/unfollow?follow_id=${followId}`,
+      {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          accept: 'application/json',
+        },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error('Unfollow request failed');
+    }
+
+    return true;
+  } catch (error) {
+    console.error('Error unfollowing user:', error);
+    return false;
+  }
+};
diff --git a/src/api/singin.ts b/src/api/singin.ts
index 9a3c9ca..269f623 100644
--- a/src/api/singin.ts
+++ b/src/api/singin.ts
@@ -1,4 +1,3 @@
-import type { UserProfile } from '../types/user';
 import { myProfile } from './myProfile';
 
 interface SignInResponse {
@@ -26,7 +25,7 @@ export const signin = async (username: string, password: string) => {
     localStorage.setItem('access_token', data.access_token);
     localStorage.setItem('refresh_token', data.refresh_token);
 
-    return (await myProfile(data.access_token)) as UserProfile;
+    return await myProfile(data.access_token);
   }
 
   if (response.status === 401) {
diff --git a/src/components/profile/ProfileInfo.tsx b/src/components/profile/ProfileInfo.tsx
index 0a8d693..c773ffb 100644
--- a/src/components/profile/ProfileInfo.tsx
+++ b/src/components/profile/ProfileInfo.tsx
@@ -1,6 +1,12 @@
 import { Settings } from 'lucide-react';
+import { useContext, useState } from 'react';
+
+import { followUser, unfollowUser } from '../../api/follow';
+import { myProfile } from '../../api/myProfile';
+import { LoginContext } from '../../App';
 
 type ProfileInfoProps = {
+  userId: number;
   username: string;
   profileImage: string;
   posts: number;
@@ -11,6 +17,7 @@ type ProfileInfoProps = {
 };
 
 const ProfileInfo = ({
+  userId,
   username,
   profileImage,
   posts,
@@ -19,6 +26,43 @@ const ProfileInfo = ({
   fullName,
   bio,
 }: ProfileInfoProps) => {
+  const [showUnfollowMenu, setShowUnfollowMenu] = useState(false);
+  const context = useContext(LoginContext);
+
+  const handleFollow = async () => {
+    const token = localStorage.getItem('access_token') as string;
+    if (token === '') {
+      console.error('No token found');
+      return;
+    }
+
+    const success = await followUser(token, userId);
+
+    if (success) {
+      const updatedProfile = await myProfile(token);
+      if (updatedProfile != null) {
+        context?.setMyProfile(updatedProfile);
+      }
+    }
+  };
+
+  const handleUnfollow = async () => {
+    const token = localStorage.getItem('access_token') as string;
+    if (token === '') {
+      console.error('No token found');
+      return;
+    }
+
+    const success = await unfollowUser(token, userId);
+    if (success) {
+      const updatedProfile = await myProfile(token);
+      if (updatedProfile != null) {
+        context?.setMyProfile(updatedProfile);
+      }
+    }
+    setShowUnfollowMenu(false);
+  };
+
   return (
     <div className="mb-8">
       <div className="flex items-center mb-4">
@@ -30,9 +74,47 @@ const ProfileInfo = ({
         <div className="flex-1">
           <div className="flex items-center mb-2">
             <h1 className="text-xl font-semibold mr-4">{username}</h1>
-            <button className="bg-blue-500 text-white px-4 py-1 rounded-md text-sm font-semibold mr-2">
-              Follow
-            </button>
+            {username === context?.myProfile?.username ? (
+              <button className="border border-gray-300 px-4 py-1 rounded-md text-sm font-semibold mr-2">
+                Edit Profile
+              </button>
+            ) : (
+              <>
+                {(context?.myProfile?.following.includes(userId) ?? false) ? (
+                  <div className="relative">
+                    <button
+                      className="bg-gray-200 text-black px-4 py-1 rounded-md text-sm font-semibold mr-2"
+                      onClick={() => {
+                        setShowUnfollowMenu(!showUnfollowMenu);
+                      }}
+                    >
+                      Following
+                    </button>
+                    {showUnfollowMenu && (
+                      <div className="absolute top-full left-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
+                        <div className="py-1">
+                          <button
+                            className="block w-full px-4 py-2 text-sm text-red-600 hover:bg-gray-100 text-left"
+                            onClick={() => void handleUnfollow()}
+                          >
+                            Unfollow @{username}
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <button
+                    className="bg-blue-500 text-white px-4 py-1 rounded-md text-sm font-semibold mr-2"
+                    onClick={() => void handleFollow()}
+                  >
+                    {(context?.myProfile?.followers.includes(userId) ?? false)
+                      ? 'Follow Back'
+                      : 'Follow'}
+                  </button>
+                )}
+              </>
+            )}
             <Settings className="w-6 h-6" />
           </div>
           <div className="flex space-x-4 text-sm">
@@ -46,12 +128,12 @@ const ProfileInfo = ({
               <strong>{following}</strong> following
             </span>
           </div>
+          <div className="mt-4">
+            <div className="font-semibold">{fullName}</div>
+            <div>{bio}</div>
+          </div>
         </div>
       </div>
-      <div className="md:hidden">
-        <h2 className="font-semibold">{fullName}</h2>
-        <p>{bio}</p>
-      </div>
     </div>
   );
 };
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index 7787543..87eac27 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -8,18 +8,17 @@ export function useAuth() {
     return saved === 'true';
   });
 
-  const [myProfile, setMyProfile] = useState<UserProfile | null>(null);
+  const [myProfile, setMyProfile] = useState<UserProfile | null>(() => {
+    const saved = localStorage.getItem('userProfile');
+    return saved != null ? (JSON.parse(saved) as UserProfile) : null;
+  });
 
   const handleIsLoggedIn = (value: boolean, user: UserProfile) => {
     setIsLoggedIn(value);
+    setMyProfile(user);
     localStorage.setItem('isLoggedIn', String(value));
-
-    if (value) {
-      setMyProfile(user);
-    } else {
-      setMyProfile(null);
-    }
+    localStorage.setItem('userProfile', JSON.stringify(user));
   };
 
-  return { isLoggedIn, myProfile, handleIsLoggedIn };
+  return { isLoggedIn, myProfile, handleIsLoggedIn, setMyProfile };
 }
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index fb9eec4..47cebaf 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
+import { LoginContext } from '../App';
 import Posts from '../components/feed/Posts';
 import { Stories } from '../components/feed/Stories';
 import BottomBar from '../components/layout/MobileBar';
@@ -10,13 +11,16 @@ import type { Post } from '../types/post';
 const MainPage = () => {
   const [posts, setPosts] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
+  const context = useContext(LoginContext);
 
   useEffect(() => {
-    const friendIds = [25, 39, 42, 'user1234']; // 임시 친구 목록
-
+    const targetIds = [
+      ...(context?.myProfile?.following as number[]),
+      context?.myProfile?.user_id as number,
+    ];
     const fetchPosts = async () => {
       try {
-        const postsPromises = friendIds.map((id) =>
+        const postsPromises = targetIds.map((id) =>
           fetch(`https://waffle-instaclone.kro.kr/api/post/user/${id}`, {
             headers: {
               Authorization: `Bearer ${localStorage.getItem('access_token') as string}`,
@@ -26,7 +30,6 @@ const MainPage = () => {
 
         const postsArrays = await Promise.all(postsPromises);
         const allPosts = postsArrays.flat();
-
         setPosts(allPosts);
       } catch (error) {
         console.error('Error fetching posts:', error);
@@ -36,7 +39,7 @@ const MainPage = () => {
     };
 
     void fetchPosts();
-  }, []);
+  }, [context?.myProfile?.following, context?.myProfile?.user_id]);
 
   return (
     <div className="flex flex-col min-h-screen bg-gray-50">
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 89af843..d9b0c0d 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { fetchUserProfile } from '../api/userProfile';
+import { LoginContext } from '../App';
 import MobileBar from '../components/layout/MobileBar';
 import MobileHeader from '../components/layout/MobileHeader';
 import SideBar from '../components/layout/SideBar';
 import Highlights from '../components/profile/Highlights';
 import ProfileInfo from '../components/profile/ProfileInfo';
 import ProfileTabs from '../components/profile/ProfileTabs';
-import { useAuth } from '../hooks/useAuth';
 import type { UserProfile } from '../types/user';
 
 const ProfilePage = () => {
@@ -16,8 +16,7 @@ const ProfilePage = () => {
   const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-
-  const { myProfile } = useAuth();
+  const context = useContext(LoginContext);
 
   useEffect(() => {
     const loadUserProfile = async () => {
@@ -25,8 +24,8 @@ const ProfilePage = () => {
 
       try {
         setLoading(true);
-        if (myProfile !== null && myProfile.username === username) {
-          setUserProfile(myProfile);
+        if (context !== null && context.myProfile?.username === username) {
+          setUserProfile(context.myProfile);
         } else {
           const userData = await fetchUserProfile(username);
           setUserProfile(userData);
@@ -40,7 +39,7 @@ const ProfilePage = () => {
     };
 
     void loadUserProfile();
-  }, [username, myProfile]);
+  }, [username, context?.myProfile, context]);
 
   if (loading) {
     return (
@@ -64,6 +63,7 @@ const ProfilePage = () => {
         <div className="max-w-3xl mx-auto">
           <MobileHeader />
           <ProfileInfo
+            userId={userProfile.user_id}
             username={userProfile.username}
             profileImage={userProfile.profile_image}
             posts={userProfile.post_count}
diff --git a/src/types/auth.ts b/src/types/auth.ts
index 8cb5f2f..5330ccf 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -4,4 +4,5 @@ export type LoginContextType = {
   isLoggedIn: boolean;
   myProfile: UserProfile | null;
   handleIsLoggedIn: (value: boolean, userData: UserProfile) => void;
+  setMyProfile: (profile: UserProfile) => void;
 };

From d660a3186d2add8b2f4de896e2b7c286084b7a2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Sun, 19 Jan 2025 02:25:10 +0900
Subject: [PATCH 08/12] =?UTF-8?q?feat:=20profile=20edit=20page=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EA=B8=B0=ED=83=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                |  5 +++
 src/components/layout/SideBar.tsx          |  2 +
 src/components/profile/ProfileEditForm.tsx | 50 ++++++++++++++++++++++
 src/components/profile/ProfileInfo.tsx     | 11 +++--
 src/pages/MainPage.tsx                     |  4 +-
 src/pages/ProfileEditPage.tsx              | 29 +++++++++++++
 6 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 src/components/profile/ProfileEditForm.tsx
 create mode 100644 src/pages/ProfileEditPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 4f5a506..07bb707 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { useAuth } from './hooks/useAuth';
 import ExplorePage from './pages/ExplorePage';
 import LoginPage from './pages/LoginPage';
 import MainPage from './pages/MainPage';
+import ProfileEditPage from './pages/ProfileEditPage';
 import ProfilePage from './pages/ProfilePage';
 import RegisterPage from './pages/RegisterPage';
 import type { LoginContextType } from './types/auth';
@@ -47,6 +48,10 @@ export const App = () => {
           path="/:username"
           element={auth.isLoggedIn ? <ProfilePage /> : <Navigate to="/" />}
         />
+        <Route
+          path="/accounts/edit"
+          element={auth.isLoggedIn ? <ProfileEditPage/> : <Navigate to="/" />}
+        />
       </Routes>
     </LoginContext.Provider>
   );
diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index ee6cdbc..4312bb6 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -34,6 +34,8 @@ const SideBar = () => {
       setActiveItem('explore');
     } else if (path === `/${String(context.myProfile?.username)}`) {
       setActiveItem('profile');
+    } else {
+      setActiveItem('');
     }
   }, [location.pathname, context.myProfile, context.myProfile?.username]);
 
diff --git a/src/components/profile/ProfileEditForm.tsx b/src/components/profile/ProfileEditForm.tsx
new file mode 100644
index 0000000..9c6e031
--- /dev/null
+++ b/src/components/profile/ProfileEditForm.tsx
@@ -0,0 +1,50 @@
+import React, { useContext,useState } from 'react';
+
+import { LoginContext } from '../../App';
+
+const ProfileEditForm = () => {
+  const context = useContext(LoginContext);
+  const [name, setName] = useState(context.myProfile?.username || '');
+  const [bio, setBio] = useState(context.myProfile?.bio || '');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Logic to update the profile goes here
+    console.log('Profile updated:', { name, bio });
+  };
+
+  return (
+    <div className="flex flex-col p-4">
+      <h1 className="text-2xl font-bold mb-4">Edit Profile</h1>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Name</label>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="mt-1 block w-full border border-gray-300 rounded-md p-2"
+            required
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Bio</label>
+          <textarea
+            value={bio}
+            onChange={(e) => setBio(e.target.value)}
+            className="mt-1 block w-full border border-gray-300 rounded-md p-2"
+            rows={4}
+          />
+        </div>
+        <button
+          type="submit"
+          className="w-full bg-blue-500 text-white py-2 rounded-md"
+        >
+          Save Changes
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default ProfileEditForm;
\ No newline at end of file
diff --git a/src/components/profile/ProfileInfo.tsx b/src/components/profile/ProfileInfo.tsx
index c773ffb..f19fee3 100644
--- a/src/components/profile/ProfileInfo.tsx
+++ b/src/components/profile/ProfileInfo.tsx
@@ -1,5 +1,6 @@
 import { Settings } from 'lucide-react';
 import { useContext, useState } from 'react';
+import { Link } from 'react-router-dom';
 
 import { followUser, unfollowUser } from '../../api/follow';
 import { myProfile } from '../../api/myProfile';
@@ -75,9 +76,13 @@ const ProfileInfo = ({
           <div className="flex items-center mb-2">
             <h1 className="text-xl font-semibold mr-4">{username}</h1>
             {username === context?.myProfile?.username ? (
-              <button className="border border-gray-300 px-4 py-1 rounded-md text-sm font-semibold mr-2">
-                Edit Profile
-              </button>
+              <Link to="/accounts/edit">
+                  <button 
+                  className="border border-gray-300 px-4 py-1 rounded-md text-sm font-semibold mr-2"
+                  >
+                  Edit Profile
+                  </button>
+              </Link>
             ) : (
               <>
                 {(context?.myProfile?.following.includes(userId) ?? false) ? (
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 47cebaf..fe40485 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from 'react';
 import { LoginContext } from '../App';
 import Posts from '../components/feed/Posts';
 import { Stories } from '../components/feed/Stories';
-import BottomBar from '../components/layout/MobileBar';
+import MobileBar from '../components/layout/MobileBar';
 import MobileHeader from '../components/layout/MobileHeader';
 import SideBar from '../components/layout/SideBar';
 import type { Post } from '../types/post';
@@ -60,7 +60,7 @@ const MainPage = () => {
 
       <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 />
-        <BottomBar />
+        <MobileBar />
       </div>
     </div>
   );
diff --git a/src/pages/ProfileEditPage.tsx b/src/pages/ProfileEditPage.tsx
new file mode 100644
index 0000000..83a400b
--- /dev/null
+++ b/src/pages/ProfileEditPage.tsx
@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+
+import { LoginContext } from '../App';
+import MobileBar from '../components/layout/MobileBar';
+import SideBar from '../components/layout/SideBar';
+import ProfileEditForm from '../components/profile/ProfileEditForm';
+
+
+const ProfileEditPage = () => {
+  const context = useContext(LoginContext);
+
+  if (context === null) {
+    throw new Error('LoginContext is not provided');
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      <div className="flex-1 p-4 md:ml-64">
+        <ProfileEditForm />
+      </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 ProfileEditPage;
\ No newline at end of file

From abc93983af65497fc09852e6feba329c087cb445 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Sun, 19 Jan 2025 21:08:24 +0900
Subject: [PATCH 09/12] =?UTF-8?q?feat:=20profile=20edit=20api=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/updateProfile.ts                   |  29 +++++
 src/components/profile/ProfileEditForm.tsx | 138 ++++++++++++++++-----
 src/components/profile/ProfileInfo.tsx     |   2 +-
 src/pages/ProfileEditPage.tsx              |  15 +--
 4 files changed, 142 insertions(+), 42 deletions(-)
 create mode 100644 src/api/updateProfile.ts

diff --git a/src/api/updateProfile.ts b/src/api/updateProfile.ts
new file mode 100644
index 0000000..d9e81ac
--- /dev/null
+++ b/src/api/updateProfile.ts
@@ -0,0 +1,29 @@
+import type { UserProfile } from "../types/user";
+
+type ProfileUpdateData = {
+  username?: string;
+  introduce?: string;
+  profile_image?: File;
+}
+
+export const updateProfile = async (data: ProfileUpdateData): Promise<UserProfile> => {
+  const formData = new FormData();
+  
+  if (data.username != null) formData.append('username', data.username);
+  if (data.introduce != null) formData.append('introduce', data.introduce);
+  if (data.profile_image != null) formData.append('profile_image', data.profile_image);
+
+  const response = await fetch('https://waffle-instaclone.kro.kr/api/user/profile/edit', {
+    method: 'PATCH',
+    headers: {
+      'Authorization': `Bearer ${localStorage.getItem('access_token') as string}`,
+    },
+    body: formData,
+  });
+
+  if (!response.ok) {
+    throw new Error('Failed to update profile');
+  }
+
+  return response.json() as Promise<UserProfile>;
+};
\ No newline at end of file
diff --git a/src/components/profile/ProfileEditForm.tsx b/src/components/profile/ProfileEditForm.tsx
index 9c6e031..212d20e 100644
--- a/src/components/profile/ProfileEditForm.tsx
+++ b/src/components/profile/ProfileEditForm.tsx
@@ -1,47 +1,125 @@
-import React, { useContext,useState } from 'react';
+import React, { useContext, useEffect,useRef, useState } from 'react';
 
+import { updateProfile } from '../../api/updateProfile';
 import { LoginContext } from '../../App';
 
 const ProfileEditForm = () => {
   const context = useContext(LoginContext);
-  const [name, setName] = useState(context.myProfile?.username || '');
-  const [bio, setBio] = useState(context.myProfile?.bio || '');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  const [name, setName] = useState(context?.myProfile?.username);
+  const [bio, setBio] = useState(context?.myProfile?.introduce);
+  const [imagePreview] = useState(context?.myProfile?.profile_image);
+  const [imageFile, setImageFile] = useState<File | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(false);
+  const [localImageUrl, setLocalImageUrl] = useState<string | null>(null);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  useEffect(() => {
+    return () => {
+      if (localImageUrl != null) {
+        URL.revokeObjectURL(localImageUrl);
+      }
+    };
+  }, [localImageUrl]);
+
+  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file != null) {
+      setImageFile(file);
+      if (localImageUrl != null) {
+        URL.revokeObjectURL(localImageUrl);
+      }
+      const newUrl = URL.createObjectURL(file);
+      setLocalImageUrl(newUrl);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    // Logic to update the profile goes here
-    console.log('Profile updated:', { name, bio });
+    setIsLoading(true);
+
+    try {
+      const updatedProfile = await updateProfile({
+        username: name,
+        introduce: bio,
+        profile_image: imageFile,
+      });
+      if ((context?.setMyProfile) != null) {
+        context.setMyProfile(updatedProfile);
+      }
+      alert('Profile updated successfully!');
+    } catch (error) {
+      console.error('Error updating profile:', error);
+      alert('Failed to update profile. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
-    <div className="flex flex-col p-4">
-      <h1 className="text-2xl font-bold mb-4">Edit Profile</h1>
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Name</label>
+    <div className="h-full max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-8 flex flex-col">
+      <h1 className="text-2xl font-bold mb-8 text-center">Edit Profile</h1>
+      <form onSubmit={(e) => { void handleSubmit(e); }} className="flex-1 flex flex-col">
+        <div className="flex flex-col items-center mb-8">
+          <div className="relative">
+            <img
+              src={localImageUrl ?? (imagePreview != null ? `https://waffle-instaclone.kro.kr/${imagePreview}` : '/default-profile.png')}
+              alt="Profile"
+              className="w-32 h-32 rounded-full object-cover border-2 border-gray-200"
+            />
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              className="absolute bottom-0 right-0 bg-blue-500 text-white p-2 rounded-full shadow hover:bg-blue-600 transition-colors"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+              </svg>
+            </button>
+          </div>
           <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className="mt-1 block w-full border border-gray-300 rounded-md p-2"
-            required
+            type="file"
+            ref={fileInputRef}
+            onChange={handleImageChange}
+            className="hidden"
+            accept="image/*"
           />
         </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Bio</label>
-          <textarea
-            value={bio}
-            onChange={(e) => setBio(e.target.value)}
-            className="mt-1 block w-full border border-gray-300 rounded-md p-2"
-            rows={4}
-          />
+
+        <div className="flex-1 space-y-6">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => { setName(e.target.value); }}
+              className="block w-full border border-gray-300 rounded-md p-2.5 focus:ring-blue-500 focus:border-blue-500"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">Bio</label>
+            <textarea
+              value={bio}
+              onChange={(e) => { setBio(e.target.value); }}
+              className="block w-full border border-gray-300 rounded-md p-2.5 focus:ring-blue-500 focus:border-blue-500"
+              rows={4}
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-center mt-auto pt-8">
+          <button
+            type="submit"
+            disabled={isLoading}
+            className={`px-6 py-2 bg-blue-500 text-white text-sm rounded-md hover:bg-blue-600 transition-colors ${
+              isLoading ? 'opacity-50 cursor-not-allowed' : ''
+            }`}
+          >
+            {isLoading ? 'Saving...' : 'Save Changes'}
+          </button>
         </div>
-        <button
-          type="submit"
-          className="w-full bg-blue-500 text-white py-2 rounded-md"
-        >
-          Save Changes
-        </button>
       </form>
     </div>
   );
diff --git a/src/components/profile/ProfileInfo.tsx b/src/components/profile/ProfileInfo.tsx
index f19fee3..f5e391c 100644
--- a/src/components/profile/ProfileInfo.tsx
+++ b/src/components/profile/ProfileInfo.tsx
@@ -68,7 +68,7 @@ const ProfileInfo = ({
     <div className="mb-8">
       <div className="flex items-center mb-4">
         <img
-          src={`http://3.34.185.81:8000/${profileImage}`}
+          src={`https://waffle-instaclone.kro.kr/${profileImage}`}
           alt={username}
           className="w-20 h-20 rounded-full mr-4"
         />
diff --git a/src/pages/ProfileEditPage.tsx b/src/pages/ProfileEditPage.tsx
index 83a400b..189e7fc 100644
--- a/src/pages/ProfileEditPage.tsx
+++ b/src/pages/ProfileEditPage.tsx
@@ -1,22 +1,15 @@
-import { useContext } from 'react';
-
-import { LoginContext } from '../App';
 import MobileBar from '../components/layout/MobileBar';
 import SideBar from '../components/layout/SideBar';
 import ProfileEditForm from '../components/profile/ProfileEditForm';
 
-
 const ProfileEditPage = () => {
-  const context = useContext(LoginContext);
-
-  if (context === null) {
-    throw new Error('LoginContext is not provided');
-  }
 
   return (
     <div className="flex flex-col min-h-screen bg-gray-50">
-      <div className="flex-1 p-4 md:ml-64">
-        <ProfileEditForm />
+      <div className="flex-1 p-4 md:ml-64 flex items-stretch justify-center">
+        <div className="w-full max-w-3xl">
+          <ProfileEditForm />
+        </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 />

From ab5f2690a52b1c42af9d9acb28f753a17dd975f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Sun, 19 Jan 2025 21:09:35 +0900
Subject: [PATCH 10/12] fix: prettier

---
 src/App.tsx                                |  2 +-
 src/api/updateProfile.ts                   | 30 +++++++++------
 src/components/profile/ProfileEditForm.tsx | 45 ++++++++++++++++------
 src/components/profile/ProfileInfo.tsx     |  6 +--
 src/pages/ProfileEditPage.tsx              |  3 +-
 5 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 07bb707..f22be5c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -50,7 +50,7 @@ export const App = () => {
         />
         <Route
           path="/accounts/edit"
-          element={auth.isLoggedIn ? <ProfileEditPage/> : <Navigate to="/" />}
+          element={auth.isLoggedIn ? <ProfileEditPage /> : <Navigate to="/" />}
         />
       </Routes>
     </LoginContext.Provider>
diff --git a/src/api/updateProfile.ts b/src/api/updateProfile.ts
index d9e81ac..684fe35 100644
--- a/src/api/updateProfile.ts
+++ b/src/api/updateProfile.ts
@@ -1,29 +1,35 @@
-import type { UserProfile } from "../types/user";
+import type { UserProfile } from '../types/user';
 
 type ProfileUpdateData = {
   username?: string;
   introduce?: string;
   profile_image?: File;
-}
+};
 
-export const updateProfile = async (data: ProfileUpdateData): Promise<UserProfile> => {
+export const updateProfile = async (
+  data: ProfileUpdateData,
+): Promise<UserProfile> => {
   const formData = new FormData();
-  
+
   if (data.username != null) formData.append('username', data.username);
   if (data.introduce != null) formData.append('introduce', data.introduce);
-  if (data.profile_image != null) formData.append('profile_image', data.profile_image);
+  if (data.profile_image != null)
+    formData.append('profile_image', data.profile_image);
 
-  const response = await fetch('https://waffle-instaclone.kro.kr/api/user/profile/edit', {
-    method: 'PATCH',
-    headers: {
-      'Authorization': `Bearer ${localStorage.getItem('access_token') as string}`,
+  const response = await fetch(
+    'https://waffle-instaclone.kro.kr/api/user/profile/edit',
+    {
+      method: 'PATCH',
+      headers: {
+        Authorization: `Bearer ${localStorage.getItem('access_token') as string}`,
+      },
+      body: formData,
     },
-    body: formData,
-  });
+  );
 
   if (!response.ok) {
     throw new Error('Failed to update profile');
   }
 
   return response.json() as Promise<UserProfile>;
-};
\ No newline at end of file
+};
diff --git a/src/components/profile/ProfileEditForm.tsx b/src/components/profile/ProfileEditForm.tsx
index 212d20e..4db868f 100644
--- a/src/components/profile/ProfileEditForm.tsx
+++ b/src/components/profile/ProfileEditForm.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect,useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import { updateProfile } from '../../api/updateProfile';
 import { LoginContext } from '../../App';
@@ -6,7 +6,7 @@ import { LoginContext } from '../../App';
 const ProfileEditForm = () => {
   const context = useContext(LoginContext);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  
+
   const [name, setName] = useState(context?.myProfile?.username);
   const [bio, setBio] = useState(context?.myProfile?.introduce);
   const [imagePreview] = useState(context?.myProfile?.profile_image);
@@ -44,7 +44,7 @@ const ProfileEditForm = () => {
         introduce: bio,
         profile_image: imageFile,
       });
-      if ((context?.setMyProfile) != null) {
+      if (context?.setMyProfile != null) {
         context.setMyProfile(updatedProfile);
       }
       alert('Profile updated successfully!');
@@ -59,11 +59,21 @@ const ProfileEditForm = () => {
   return (
     <div className="h-full max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-8 flex flex-col">
       <h1 className="text-2xl font-bold mb-8 text-center">Edit Profile</h1>
-      <form onSubmit={(e) => { void handleSubmit(e); }} className="flex-1 flex flex-col">
+      <form
+        onSubmit={(e) => {
+          void handleSubmit(e);
+        }}
+        className="flex-1 flex flex-col"
+      >
         <div className="flex flex-col items-center mb-8">
           <div className="relative">
             <img
-              src={localImageUrl ?? (imagePreview != null ? `https://waffle-instaclone.kro.kr/${imagePreview}` : '/default-profile.png')}
+              src={
+                localImageUrl ??
+                (imagePreview != null
+                  ? `https://waffle-instaclone.kro.kr/${imagePreview}`
+                  : '/default-profile.png')
+              }
               alt="Profile"
               className="w-32 h-32 rounded-full object-cover border-2 border-gray-200"
             />
@@ -72,7 +82,12 @@ const ProfileEditForm = () => {
               onClick={() => fileInputRef.current?.click()}
               className="absolute bottom-0 right-0 bg-blue-500 text-white p-2 rounded-full shadow hover:bg-blue-600 transition-colors"
             >
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
                 <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
               </svg>
             </button>
@@ -88,21 +103,29 @@ const ProfileEditForm = () => {
 
         <div className="flex-1 space-y-6">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Name</label>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Name
+            </label>
             <input
               type="text"
               value={name}
-              onChange={(e) => { setName(e.target.value); }}
+              onChange={(e) => {
+                setName(e.target.value);
+              }}
               className="block w-full border border-gray-300 rounded-md p-2.5 focus:ring-blue-500 focus:border-blue-500"
               required
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">Bio</label>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Bio
+            </label>
             <textarea
               value={bio}
-              onChange={(e) => { setBio(e.target.value); }}
+              onChange={(e) => {
+                setBio(e.target.value);
+              }}
               className="block w-full border border-gray-300 rounded-md p-2.5 focus:ring-blue-500 focus:border-blue-500"
               rows={4}
             />
@@ -125,4 +148,4 @@ const ProfileEditForm = () => {
   );
 };
 
-export default ProfileEditForm;
\ No newline at end of file
+export default ProfileEditForm;
diff --git a/src/components/profile/ProfileInfo.tsx b/src/components/profile/ProfileInfo.tsx
index f5e391c..4f91cf5 100644
--- a/src/components/profile/ProfileInfo.tsx
+++ b/src/components/profile/ProfileInfo.tsx
@@ -77,11 +77,9 @@ const ProfileInfo = ({
             <h1 className="text-xl font-semibold mr-4">{username}</h1>
             {username === context?.myProfile?.username ? (
               <Link to="/accounts/edit">
-                  <button 
-                  className="border border-gray-300 px-4 py-1 rounded-md text-sm font-semibold mr-2"
-                  >
+                <button className="border border-gray-300 px-4 py-1 rounded-md text-sm font-semibold mr-2">
                   Edit Profile
-                  </button>
+                </button>
               </Link>
             ) : (
               <>
diff --git a/src/pages/ProfileEditPage.tsx b/src/pages/ProfileEditPage.tsx
index 189e7fc..de0e09a 100644
--- a/src/pages/ProfileEditPage.tsx
+++ b/src/pages/ProfileEditPage.tsx
@@ -3,7 +3,6 @@ import SideBar from '../components/layout/SideBar';
 import ProfileEditForm from '../components/profile/ProfileEditForm';
 
 const ProfileEditPage = () => {
-
   return (
     <div className="flex flex-col min-h-screen bg-gray-50">
       <div className="flex-1 p-4 md:ml-64 flex items-stretch justify-center">
@@ -19,4 +18,4 @@ const ProfileEditPage = () => {
   );
 };
 
-export default ProfileEditPage;
\ No newline at end of file
+export default ProfileEditPage;

From bc14d815914af5bf86b23133d24eb15a1e0069ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Sun, 19 Jan 2025 21:15:35 +0900
Subject: [PATCH 11/12] =?UTF-8?q?fix:=20=EA=B8=B0=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/feed/Post.tsx              | 2 +-
 src/components/modals/CreatePostModal.tsx | 3 +--
 src/hooks/useStories.ts                   | 4 ++--
 src/hooks/useStoryUpload.ts               | 2 +-
 src/pages/RegisterPage.tsx                | 4 ++--
 5 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/feed/Post.tsx b/src/components/feed/Post.tsx
index c13903d..5e2455a 100644
--- a/src/components/feed/Post.tsx
+++ b/src/components/feed/Post.tsx
@@ -31,7 +31,7 @@ const Post = ({
       src={
         imageUrl.startsWith('http')
           ? imageUrl
-          : `http://3.34.185.81:8000/${imageUrl}`
+          : `https://waffle-instaclone.kro.kr/${imageUrl}`
       }
       alt="Post"
       className="w-full"
diff --git a/src/components/modals/CreatePostModal.tsx b/src/components/modals/CreatePostModal.tsx
index 854f7dd..d98cc09 100644
--- a/src/components/modals/CreatePostModal.tsx
+++ b/src/components/modals/CreatePostModal.tsx
@@ -23,14 +23,13 @@ const CreatePostModal = ({ isOpen, onClose }: CreatePostModalProps) => {
     if (selectedImage == null) return;
 
     try {
-      // Build query parameters
       const queryParams = new URLSearchParams();
       if (content.length > 0) {
         queryParams.append('post_text', content);
       }
 
       const result = await fetch(
-        `http://3.34.185.81:8000/api/post/?${queryParams.toString()}`,
+        `https://waffle-instaclone.kro.kr/api/post/?${queryParams.toString()}`,
         {
           method: 'POST',
           headers: {
diff --git a/src/hooks/useStories.ts b/src/hooks/useStories.ts
index 562411e..a4768a6 100644
--- a/src/hooks/useStories.ts
+++ b/src/hooks/useStories.ts
@@ -22,7 +22,7 @@ export function useStories(userId: number | null) {
         }
 
         const response = await fetch(
-          `http://3.34.185.81:8000/api/story/list/39`,
+          `https://waffle-instaclone.kro.kr/api/story/list/39`,
           {
             headers: {
               Authorization: `Bearer ${token}`,
@@ -58,7 +58,7 @@ export function useStories(userId: number | null) {
 
     try {
       const response = await fetch(
-        `http://3.34.185.81:8000/api/story/${storyId}`,
+        `https://waffle-instaclone.kro.kr/api/story/${storyId}`,
         {
           method: 'DELETE',
           headers: {
diff --git a/src/hooks/useStoryUpload.ts b/src/hooks/useStoryUpload.ts
index 1e494e9..ed9c8bb 100644
--- a/src/hooks/useStoryUpload.ts
+++ b/src/hooks/useStoryUpload.ts
@@ -13,7 +13,7 @@ export function useStoryUpload() {
     });
 
     try {
-      const response = await fetch('http://3.34.185.81:8000/api/story/', {
+      const response = await fetch('https://waffle-instaclone.kro.kr/api/story/', {
         method: 'POST',
         headers: {
           Authorization: `Bearer ${localStorage.getItem('access_token') ?? ''}`,
diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx
index 3787c29..5375f86 100644
--- a/src/pages/RegisterPage.tsx
+++ b/src/pages/RegisterPage.tsx
@@ -3,10 +3,10 @@ import { Link, useNavigate } from 'react-router-dom';
 
 import { signup } from '../api/signup';
 import { signin } from '../api/singin';
-import type { User } from '../hooks/useAuth';
+import type { UserProfile } from '../types/user';
 
 type RegisterPageProps = {
-  handleIsLoggedIn: (value: boolean, userData: User) => void;
+  handleIsLoggedIn: (value: boolean, userData: UserProfile) => void;
 };
 
 const RegisterPage = ({ handleIsLoggedIn }: RegisterPageProps) => {

From b49d85c4899b2a1b6cd9c7f7414817c880aec1ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=95=EC=84=B8=EC=A4=80?= <likeacloud@iMac.local>
Date: Mon, 20 Jan 2025 00:58:03 +0900
Subject: [PATCH 12/12] =?UTF-8?q?fix:=20=EA=B8=B0=ED=83=80=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/story/StoryList.tsx |  6 ++++--
 src/hooks/useStoryUpload.ts        | 15 +++++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/story/StoryList.tsx b/src/components/story/StoryList.tsx
index 94cb87f..54917bd 100644
--- a/src/components/story/StoryList.tsx
+++ b/src/components/story/StoryList.tsx
@@ -54,8 +54,10 @@ export function StoryList() {
         }
 
         const userData = (await response.json()) as UserProfile;
-        setCurrentUserId(userData.user_id);
-        setError(null);
+        if (userData != null) {
+          setCurrentUserId(userData.user_id);
+          setError(null);
+        }
       } catch (err) {
         setError(err instanceof Error ? err.message : 'Unknown error occurred');
         console.error('Error fetching user info:', err);
diff --git a/src/hooks/useStoryUpload.ts b/src/hooks/useStoryUpload.ts
index ed9c8bb..bbdbdf8 100644
--- a/src/hooks/useStoryUpload.ts
+++ b/src/hooks/useStoryUpload.ts
@@ -13,13 +13,16 @@ export function useStoryUpload() {
     });
 
     try {
-      const response = await fetch('https://waffle-instaclone.kro.kr/api/story/', {
-        method: 'POST',
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem('access_token') ?? ''}`,
+      const response = await fetch(
+        'https://waffle-instaclone.kro.kr/api/story/',
+        {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem('access_token') ?? ''}`,
+          },
+          body: formData,
         },
-        body: formData,
-      });
+      );
 
       if (!response.ok) throw new Error('Failed to upload story');
       return await (response.json() as Promise<Story>);