Feat: 홈화면에서 식물과 대화정도 있는 부분 추가, 친구 프로필 조회, 친구 삭제

package.json

@@ -24,6 +24,7 @@
     "react-dom": "19.2.1",
     "react-lottie-player": "^2.1.0",
     "react-query": "^3.39.3",
+    "swiper": "^12.0.3",
     "zustand": "^5.0.9"
   },
   "devDependencies": {

src/app/day-log/page.tsx

@@ -1,5 +1,5 @@
+import { HeaderWithIcon } from "@/components/common/HeaderWithIcon";
 import { NavBar } from "@/components/common/NavBar";
-import { Header } from "@/components/dailyRecord/Header";
 import { RecordMissionFeed } from "@/components/dailyRecord/MissionFeed";
 import { RecordMissionInfo } from "@/components/dailyRecord/MissionInfo";
 import { SharedDiaryCard } from "@/components/dailyRecord/SharedDiaryCard";
@@ -12,7 +12,7 @@ const DailyRecordPage = () => {
 
   return (
     <main className="flex w-full flex-col pb-[112px]">
-      <Header />
+      <HeaderWithIcon title="하루기록" havePencil={true} />
       <RecordMissionInfo hasMyRecord={hasMyRecord} />
       <div className="mt-[17.5px]">
         <RecordMissionFeed />

src/app/friends/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { useState } from "react";
+
+import FriendAddIcon from "@/assets/person-plus.svg";
+
+import { BackHeader } from "@/components/common/BackHeader";
+import { SearchField } from "@/components/common/SearchField";
+import { FriendList } from "@/components/friends/FrinedList";
+
+const FriendsListPage = () => {
+  const [searchText, setSearchText] = useState("");
+  const [modalOpen, setModalOpen] = useState(false);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  const [isButtonClick, setIsButtonClick] = useState(false);
+
+  const toggleFriend = (userId: number) => {
+    setSelectedIds(prev =>
+      prev.includes(userId)
+        ? prev.filter(id => id !== userId)
+        : [...prev, userId],
+    );
+  };
+
+  return (
+    <main className="relative w-full">
+      {!modalOpen && (
+        <div className="mt-[8.5px]">
+          <BackHeader
+            title="친구목록"
+            subtext="편집하기"
+            onClickEdit={() => setIsEditMode(prev => !prev)}
+          />
+        </div>
+      )}
+
+      <div
+        className={`${modalOpen ? "mt-[95px]" : "mt-[30.5px]"} flex flex-col gap-5`}
+      >
+        <SearchField onChangeSearchText={setSearchText} />
+        <FriendList
+          searchText={searchText}
+          setModalOpen={setModalOpen}
+          isEditMode={isEditMode}
+          selectedIds={selectedIds}
+          onToggleFriend={toggleFriend}
+        />
+      </div>
+      <div className="fixed inset-x-0 bottom-[33px] z-50">
+        <div className="mx-auto w-full max-w-[440px]">
+          <button className="bg-mint-01 mr-4 ml-auto flex h-[70px] w-[70px] items-center justify-center rounded-full shadow-[0_0_10px_0_rgba(0,0,0,0.10)]">
+            <FriendAddIcon className="h-10 w-10 text-white" />
+          </button>
+        </div>
+      </div>
+    </main>
+  );
+};
+export default FriendsListPage;

src/app/friends/settings/[userId]/page.tsx

@@ -0,0 +1,5 @@
+const FriendSetting = () => {
+  return <div>친구설정하기</div>;
+};
+
+export default FriendSetting;

src/app/page.tsx

@@ -1,3 +1,24 @@
+import { NavBar } from "@/components/common/NavBar";
+import { ChatProgress } from "@/components/home/ChatProgress";
+import { Header } from "@/components/home/Header";
+import { PlantProgress } from "@/components/home/PlantProgress";
+
 export default function HomePage() {
-  return <div>홈 화면</div>;
+  return (
+    <main className="w-full">
+      <div className="mt-[8.5px]">
+        <Header />
+      </div>
+
+      <div className="pt-[23.5px] pb-[75px]">
+        <PlantProgress />
+      </div>
+      <div className="pb-[119px]">
+        <ChatProgress />
+      </div>
+      <div className="fixed bottom-0 w-full max-w-[440px]">
+        <NavBar />
+      </div>
+    </main>
+  );
 }

src/app/shared-diary/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useParams } from "next/navigation";
 
-import { Header } from "@/components/dailyRecord/Header";
+import { HeaderWithIcon } from "@/components/common/HeaderWithIcon";
 import { SharedDiaryItem } from "@/components/dailyRecord/ShareDiaryItem";
 
 import SharedDiaryData from "@/mock/sharedDiary.json";
@@ -21,8 +21,8 @@ const SharedDiaryPage = () => {
   }
 
   return (
-    <div className="flex w-full flex-col">
-      <Header />
+    <div className="flex w-full flex-col justify-center">
+      <HeaderWithIcon title="공유일기" havePencil={true} />
       <SharedDiaryItem key={diaryData.id} item={diaryData} commentMode />
     </div>
   );

src/assets/GalleryIcon.tsx

@@ -1,14 +1,16 @@
 import GalleryIcon from "@/assets/gallery.svg";
+import HandIcon from "@/assets/hand-with-pen.svg";
+import EyesIcon from "@/assets/two-eyes.svg";
 
 export const GalleryAssets = () => {
   return (
     <div className="flex" role="img" aria-label="갤러리 아이콘">
       <GalleryIcon className="z-20 h-[15px] w-[15px]" />
-      <div className="bg-orange-00 text-sub2-sb z-10 -ml-[3px] flex h-[15px] w-[15px] items-center justify-center rounded-full">
-        👀
+      <div className="bg-orange-00 z-10 -ml-[3px] flex h-[15px] w-[15px] items-center justify-center rounded-full">
+        <EyesIcon className="w-[18px]" />
       </div>
-      <div className="bg-green-01 text-sub3 -ml-[3px] flex h-[15px] w-[15px] items-center justify-center rounded-full">
-        ✍🏻
+      <div className="bg-green-01 -ml-[3px] flex h-[15px] w-[15px] items-center justify-center rounded-full">
+        <HandIcon className="w-[13px]" />
       </div>
     </div>
   );