From c005e45c1e9bd3ba084a0f96210f4f57caf5da6e Mon Sep 17 00:00:00 2001
From: Junhyeong Park <pljh0906@yonsei.ac.kr>
Date: Sat, 18 May 2024 08:57:11 +0900
Subject: [PATCH 1/3] feat: initial page design revision

---
 src/app/login/page.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index b2d19c4..dff157e 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -64,20 +64,21 @@ export default function LoginPage() {
 
   return (
     <ReactQueryClientProvider>
-      <div className="Frame10453 w-96 h-96 relative bg-white flex flex-col items-center justify-between">
-        <div className="w-24 h-6 mt-16"></div>
-        <div className="text-blue-900 text-xl font-normal font-['Pretendard'] leading-loose mt-4">
-          정책을 빠르고 쉽게 맛보다!
-        </div>
-        <MainSpoon className="mt-4" />
-        <div className="Group10429 w-80 h-12">
-          <KakaoLoginButton onClick={handleKakaoLogin} />
-        </div>
-        <div className="OsBarBottomNavigation h-12 bg-zinc-500/opacity-10 flex justify-center items-center w-full">
+      <div className="flex items-center justify-center min-h-screen bg-white">
+        <div className="Frame10453 w-96 h-96 relative bg-white flex flex-col items-center justify-between">
+          <div className="w-24 h-6 mt-16"></div>
           <SpoonLogo />
-        </div>
-        <div className="OsBarTopNavigation h-9 w-full bg-zinc-500/opacity-10 flex justify-start items-start absolute top-0 left-0">
-          <div className="Absolute self-stretch h-9 flex justify-start items-start"></div>
+          <MainSpoon className="mt-4" />
+          <div className="text-blue-900 text-l font-normal font-['Pretendard'] leading-loose mt-4">
+            정책을 빠르고 쉽게 맛보다!
+          </div>
+          <div className="Group10429 w-80 h-12">
+            <KakaoLoginButton onClick={handleKakaoLogin} />
+          </div>
+          <div className="OsBarBottomNavigation h-12 bg-zinc-500/opacity-10 flex justify-center items-center w-full"></div>
+          <div className="OsBarTopNavigation h-9 w-full bg-zinc-500/opacity-10 flex justify-start items-start absolute top-0 left-0">
+            <div className="Absolute self-stretch h-9 flex justify-start items-start"></div>
+          </div>
         </div>
       </div>
     </ReactQueryClientProvider>

From b53286b697956e3d27431eb6d3503842a18cf33e Mon Sep 17 00:00:00 2001
From: Junhyeong Park <pljh0906@yonsei.ac.kr>
Date: Sat, 18 May 2024 09:07:15 +0900
Subject: [PATCH 2/3] feat: prototype showcase button

---
 src/app/main/page.tsx          | 33 ++++++++++++++++++---------------
 src/app/reviewdetails/page.tsx | 19 ++++++++++---------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
index debdc48..eaa83ec 100644
--- a/src/app/main/page.tsx
+++ b/src/app/main/page.tsx
@@ -18,6 +18,7 @@ import Pencil from "@/svgs/bluepencil.svg";
 import Button from "@/components/Button/Button";
 import Fab from "@/components/FAB/Fab";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 const Page = () => {
   const categoryList = [
@@ -242,21 +243,23 @@ const Page = () => {
             </Button>
           </div>
           <div className="grid grid-cols-2 gap-4">
-            <div className="gap-4">
-              <Review1 />
-              <h1 className="font-semibold text-[15px] text-black">
-                청년 통장 발급 후기
-              </h1>
-              <p className="font-medium text-[12px] text-[#37383C]">
-                으뜸 관악 청년 통장
-              </p>
-              <Box
-                className="px-2 py-0 rounded-[4px] flex items-center justify-center font-medium text-[12px] text-[#FF8E3D] bg-[#FFEDE0]"
-                style={{ display: "inline-block" }}
-              >
-                복지∙문화
-              </Box>
-            </div>
+            <Link href="/reviewdetails" passHref>
+              <div className="gap-4">
+                <Review1 />
+                <h1 className="font-semibold text-[15px] text-black">
+                  청년 통장 발급 후기
+                </h1>
+                <p className="font-medium text-[12px] text-[#37383C]">
+                  으뜸 관악 청년 통장
+                </p>
+                <Box
+                  className="px-2 py-0 rounded-[4px] flex items-center justify-center font-medium text-[12px] text-[#FF8E3D] bg-[#FFEDE0]"
+                  style={{ display: "inline-block" }}
+                >
+                  복지∙문화
+                </Box>
+              </div>
+            </Link>
             <div className="gap-4">
               <Review2 />
               <h1 className="font-semibold text-[15px] text-black">
diff --git a/src/app/reviewdetails/page.tsx b/src/app/reviewdetails/page.tsx
index 5ede6c4..19c6372 100644
--- a/src/app/reviewdetails/page.tsx
+++ b/src/app/reviewdetails/page.tsx
@@ -13,6 +13,15 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { getReview } from "@/apis/api";
 
+interface ReviewData {
+  category: string;
+  reviewTitle: string;
+  createdDate: string;
+  writer: string;
+  link: string;
+  tips: string;
+  content: string;
+}
 
 const ReviewDetailsPage = () => {
   const [isBookmarked, setIsBookmarked] = useState(false);
@@ -41,14 +50,6 @@ const ReviewDetailsPage = () => {
     return <div>Loading...</div>;
   }
 
-  const fetchData = async () => {
-    const communityData = await getReview();
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
   return (
     <div className="w-full h-full relative bg-white">
       <div className="Frame10419 w-full h-full left-0 top-0 absolute bg-white">
@@ -135,7 +136,7 @@ const ReviewDetailsPage = () => {
       <div className="w-80 h-52 left-[16px] top-[582px] absolute text-black text-base font-normal font-['Pretendard'] leading-normal">
         {reviewData.content}
       </div>
-      <div className="w-80 h-24 left-[16px] top-[780px] absolute text-black text-base font-normal font-['Pretendard'] leading-normal">
+      <div className="w-80 h-24 left-[780px] top-[1023px] absolute text-black text-base font-normal font-['Pretendard'] leading-normal">
         <div>
           <Review_3 className="w-full" />
         </div>

From 63ed37a5fee7a57da852ffec5638c44ea4fc2058 Mon Sep 17 00:00:00 2001
From: Junhyeong Park <pljh0906@yonsei.ac.kr>
Date: Sat, 18 May 2024 10:02:23 +0900
Subject: [PATCH 3/3] feat: mainpage image allocation revision

---
 src/app/main/CircleIndicators.tsx | 29 +++++++++++++++++
 src/app/main/page.tsx             | 52 +++----------------------------
 2 files changed, 34 insertions(+), 47 deletions(-)
 create mode 100644 src/app/main/CircleIndicators.tsx

diff --git a/src/app/main/CircleIndicators.tsx b/src/app/main/CircleIndicators.tsx
new file mode 100644
index 0000000..e925ef2
--- /dev/null
+++ b/src/app/main/CircleIndicators.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+interface CircleColorsProps {
+  circleColors: string[];
+  currentBannerIndex: number;
+}
+
+const CircleIndicators: React.FC<CircleColorsProps> = ({
+  circleColors,
+  currentBannerIndex,
+}) => {
+  return (
+    <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 mb-4 flex items-center space-x-2">
+      {circleColors.map((color, index) => (
+        <div
+          key={index}
+          style={{ backgroundColor: color }}
+          className={`w-3 rounded-full ${
+            index === currentBannerIndex
+              ? "ring-2 ring-blue-500"
+              : "ring-2 ring-gray-400"
+          }`}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default CircleIndicators;
diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
index eaa83ec..24d54c2 100644
--- a/src/app/main/page.tsx
+++ b/src/app/main/page.tsx
@@ -19,6 +19,7 @@ import Button from "@/components/Button/Button";
 import Fab from "@/components/FAB/Fab";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import CircleIndicators from "./CircleIndicators";
 
 const Page = () => {
   const categoryList = [
@@ -30,39 +31,6 @@ const Page = () => {
     "💼  일자리",
   ];
 
-  //   const reviewList = [
-  //     {
-  //       key: 1,
-  //       title: "청년 통장 발급 후기",
-  //       metaData: "으뜸 관악 청년 통장",
-  //       category: "복지∙문화",
-  //       path: "../../svgs/review1.svg",
-  //       background: "#FFEDE0",
-  //       color: "#FF8E3D",
-  //     },
-  //     {
-  //       key: 2,
-  //       title: "취업 멘토링 꽤 괜찮네요",
-  //       metaData: "관악구∙삼성전자 청년 취업 멘토링",
-  //       category: "교육",
-  //       path: "../../svgs/review2.svg",
-  //     },
-  //     {
-  //       key: 3,
-  //       title: "청년주택 입주 신청했어요",
-  //       metaData: "관악구 청년주택 입주자 추가 모집",
-  //       category: "주거",
-  //       path: `../../svgs/review3.svg`,
-  //     },
-  //     {
-  //       key: 4,
-  //       title: "신림동 쓰리룸 방문 후기",
-  //       metaData: "청년문화공간 신림동 쓰리룸 운영",
-  //       category: "참여∙권리",
-  //       path: "../../svgs/review4.svg",
-  //     },
-  //   ];
-
   const [selectedAddress, setSelectedAddress] = useState<string | null>(null);
 
   const handleAddressClick = (address: string) => {
@@ -217,20 +185,10 @@ const Page = () => {
                 </div>
               ))}
             </div>
-            <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 mb-4 flex items-center space-x-2">
-              {circleColors.map((circle, index) => (
-                <img
-                  key={index}
-                  src={circle}
-                  alt={`Circle ${index + 1}`}
-                  className={`w-4 h-4 ${
-                    index === currentBannerIndex
-                      ? "text-blue-500"
-                      : "text-gray-500"
-                  }`}
-                />
-              ))}
-            </div>
+            <CircleIndicators
+              circleColors={circleColors}
+              currentBannerIndex={currentBannerIndex}
+            />
           </div>
         </div>
         <div>