diff --git a/components/molecules/PlaceImage.tsx b/components/molecules/PlaceImage.tsx index 00269b432..671235596 100644 --- a/components/molecules/PlaceImage.tsx +++ b/components/molecules/PlaceImage.tsx @@ -16,9 +16,17 @@ interface PlaceHeartImageProps { hasToggleHeart?: boolean; selected?: "main" | "sub" | null; size: "sm" | "md" | "lg"; + isFull?: boolean; } -function PlaceImage({ imageProps, id, hasToggleHeart, selected, size }: PlaceHeartImageProps) { +function PlaceImage({ + imageProps, + id, + hasToggleHeart, + selected, + size, + isFull, +}: PlaceHeartImageProps) { const { data: session } = useSession(); const isGuest = session?.user.name === "guest"; @@ -39,7 +47,7 @@ function PlaceImage({ imageProps, id, hasToggleHeart, selected, size }: PlaceHea const sizeLength = size === "sm" ? "60px" : size === "md" ? "80px" : size === "lg" ? "100px" : null; - + const onClickHeart = (e: MouseEvent) => { switch (myPreferType) { case "main": @@ -74,8 +82,8 @@ function PlaceImage({ imageProps, id, hasToggleHeart, selected, size }: PlaceHea ? "0px 5px 10px 0px #1BB8760A" : null } - w={sizeLength} - h={sizeLength} + w={isFull ? "100%" : sizeLength} + h={isFull ? "100%" : sizeLength} > + {imageDataArr.map((imageData, idx) => imageData?.url ? ( ) : ( @@ -82,6 +86,7 @@ export function ImageTileLayout({ id, selected, hasToggleHeart, + size, }: { url: string; text: string; @@ -89,26 +94,28 @@ export function ImageTileLayout({ id?: string; selected: "main" | "sub" | null; hasToggleHeart: boolean; + size: "sm" | "lg"; }) { return ( - + {text} ); } -const GridContainer = styled.div<{ row: number; col: number }>` +const GridContainer = styled.div<{ row: number; col: number; size: "sm" | "lg" }>` display: grid; grid-template-columns: ${(props) => `repeat(${props.col}, 1fr)`}; grid-template-rows: ${(props) => `repeat(${props.row}, 1fr)`}; - gap: 8px; + gap: ${(props) => (props.size === "sm" ? "8" : "12")}px; `; const TextContainer = styled(SingleLineText)<{ selected: "main" | "sub" | null }>` @@ -119,6 +126,6 @@ const TextContainer = styled(SingleLineText)<{ selected: "main" | "sub" | null } props.selected === "main" ? "var(--color-mint)" : props.selected === "sub" - ? "var(--color-orange)" - : null}; + ? "var(--color-orange)" + : null}; `; diff --git a/pageTemplates/gather/detail/GatherHeader.tsx b/pageTemplates/gather/detail/GatherHeader.tsx index 6e0524703..6b5456258 100644 --- a/pageTemplates/gather/detail/GatherHeader.tsx +++ b/pageTemplates/gather/detail/GatherHeader.tsx @@ -42,7 +42,7 @@ function GatherHeader({ gatherData }: IGatherHeader) { setDrawerType("kakaoShare")}> - {(gatherData.user as IUserSummary)._id === session?.user.id && ( + {(gatherData.user as IUserSummary)._id !== session?.user.id && ( diff --git a/pageTemplates/home/HomeReviewSection.tsx b/pageTemplates/home/HomeReviewSection.tsx index e52454a15..050d737a9 100644 --- a/pageTemplates/home/HomeReviewSection.tsx +++ b/pageTemplates/home/HomeReviewSection.tsx @@ -1,8 +1,9 @@ import { Box } from "@chakra-ui/react"; import { useRouter } from "next/navigation"; -import HighlightedTextButton from "../../components/atoms/buttons/HighlightedTextButton"; -import SectionBar from "../../components/molecules/bars/SectionBar"; +import ButtonWrapper from "../../components/atoms/ButtonWrapper"; +import SectionHeader from "../../components/atoms/SectionHeader"; +import { ShortArrowIcon } from "../../components/Icons/ArrowIcons"; import { IImageTileData } from "../../components/molecules/layouts/ImageTileFlexLayout"; import ImageTileGridLayout from "../../components/molecules/layouts/ImageTitleGridLayout"; import { useFeedsQuery } from "../../hooks/feed/queries"; @@ -15,18 +16,19 @@ export default function HomeReviewSection() { const imageArr: IImageTileData[] = feeds ?.map((feed) => ({ imageUrl: feed.images[0], - func: () => router.push(`/square?tab=lounge&category=gather&scroll=${feed.typeId}`), + func: () => router.push(`/gather?category=all&tab=lounge&scroll=${feed.typeId}`), text: feed.text, })) .slice(0, 4); return ( - - } - /> - {imageArr && } + + + + + + + {imageArr && } ); } diff --git a/pages/gather/index.tsx b/pages/gather/index.tsx index dc9cec7ee..2151707a6 100644 --- a/pages/gather/index.tsx +++ b/pages/gather/index.tsx @@ -1,6 +1,6 @@ import { Box } from "@chakra-ui/react"; import { useRouter, useSearchParams } from "next/navigation"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import WritingButton from "../../components/atoms/buttons/WritingButton"; import Slide from "../../components/layouts/PageSlide"; @@ -13,8 +13,15 @@ function Gather() { const router = useRouter(); const searchParams = useSearchParams(); const newSearchParams = new URLSearchParams(searchParams); + const tabParam = searchParams.get("tab"); + const [tab, setTab] = useState<"번개" | "라운지">("번개"); + useEffect(() => { + if (tabParam === "gather") setTab("번개"); + if (tabParam === "lounge") setTab("라운지"); + }, [tabParam]); + const tabNavOptions: ITabNavOptions[] = [ { text: "번개", diff --git a/pages/home/index.tsx b/pages/home/index.tsx index bc7858ff2..edd403e86 100644 --- a/pages/home/index.tsx +++ b/pages/home/index.tsx @@ -5,7 +5,7 @@ import HomeGroupSection from "../../pageTemplates/home/HomeGroupSection"; import HomeHeader from "../../pageTemplates/home/homeHeader/HomeHeader"; import HomeInitialSetting from "../../pageTemplates/home/HomeInitialSetting"; import HomeNav from "../../pageTemplates/home/HomeNav"; -import HomeStudySection from "../../pageTemplates/home/HomeStudySection"; +import HomeReviewSection from "../../pageTemplates/home/HomeReviewSection"; function Home() { return ( @@ -19,10 +19,11 @@ function Home() { + - + {/* - + */} ); }