Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Junbrro #17

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Junbrro #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c005e45
feat: initial page design revision
jun-brro May 17, 2024
a87e3d2
Merge branch 'junbrro' of https://github.com/DNDHackathon-choonsik/po…
jun-brro May 17, 2024
b53286b
feat: prototype showcase button
jun-brro May 18, 2024
63ed37a
feat: mainpage image allocation revision
jun-brro May 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions src/app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
29 changes: 29 additions & 0 deletions src/app/main/CircleIndicators.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
85 changes: 23 additions & 62 deletions src/app/main/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ 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";
import CircleIndicators from "./CircleIndicators";

const Page = () => {
const categoryList = [
Expand All @@ -29,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) => {
Expand Down Expand Up @@ -216,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>
Expand All @@ -242,21 +201,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">
Expand Down
19 changes: 10 additions & 9 deletions src/app/reviewdetails/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down