home-review-section

AboutClan · Nov 14, 2024 · b970d93 · b970d93
1 parent 4f2aaa7
commit b970d93
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 29 deletions.
diff --git 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<HTMLButtonElement, globalThis.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}
     >
       <Image
         src={imageProps.image}

diff --git a/components/molecules/layouts/ImageTitleGridLayout.tsx b/components/molecules/layouts/ImageTitleGridLayout.tsx
@@ -22,22 +22,25 @@ interface IImageTileGridLayout {
   selectedId?: string[];
   selectedSubId?: string[];
   hasToggleHeart?: boolean;
+  size?: "sm" | "lg";
 }
 export default function ImageTileGridLayout({
   imageDataArr,
   grid,
   selectedId,
   selectedSubId,
   hasToggleHeart,
+  size = "sm",
 }: IImageTileGridLayout) {
   const { row = 2, col = 2 } = grid || {};
 
   return (
-    <GridContainer row={row} col={col}>
+    <GridContainer row={row} col={col} size={size}>
       {imageDataArr.map((imageData, idx) =>
         imageData?.url ? (
           <Link key={idx} href={imageData.url} passHref>
             <ImageTileLayout
+              size={size}
               url={imageData.imageUrl}
               text={imageData.text}
               isPriority={idx === 0}
@@ -47,14 +50,15 @@ export default function ImageTileGridLayout({
                 selectedId?.includes(imageData?.id)
                   ? "main"
                   : selectedSubId?.includes(imageData?.id)
-                    ? "sub"
-                    : null
+                  ? "sub"
+                  : null
               }
             />
           </Link>
         ) : (
           <Box as="button" key={idx} onClick={imageData.func}>
             <ImageTileLayout
+              size={size}
               url={imageData.imageUrl}
               hasToggleHeart={hasToggleHeart}
               text={imageData.text}
@@ -64,8 +68,8 @@ export default function ImageTileGridLayout({
                 selectedId?.includes(imageData?.id)
                   ? "main"
                   : selectedSubId?.includes(imageData?.id)
-                    ? "sub"
-                    : null
+                  ? "sub"
+                  : null
               }
             />
           </Box>
@@ -82,33 +86,36 @@ export function ImageTileLayout({
   id,
   selected,
   hasToggleHeart,
+  size,
 }: {
   url: string;
   text: string;
   isPriority: boolean;
   id?: string;
   selected: "main" | "sub" | null;
   hasToggleHeart: boolean;
+  size: "sm" | "lg";
 }) {
   return (
-    <Flex direction="column" textAlign="center" mb={2}>
+    <Flex direction="column" textAlign="center" mb={2} w="full" aspectRatio={1 / 1}>
       <PlaceImage
         selected={selected}
         imageProps={{ image: url, isPriority }}
         id={id}
         hasToggleHeart={hasToggleHeart}
-        size="sm"
+        size={size === "sm" ? "sm" : undefined}
+        isFull={size === "lg"}
       />
       <TextContainer selected={selected}>{text}</TextContainer>
     </Flex>
   );
 }
 
-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
@@ -42,7 +42,7 @@ function GatherHeader({ gatherData }: IGatherHeader) {
           <IconWrapper onClick={() => setDrawerType("kakaoShare")}>
             <i className="fa-light fa-share-nodes fa-lg" />
           </IconWrapper>
-          {(gatherData.user as IUserSummary)._id === session?.user.id && (
+          {(gatherData.user as IUserSummary)._id !== session?.user.id && (
             <IconWrapper>
               <Link href={`/gather/${gatherData.id}/setting`}>
                 <i className="fa-light fa-gear fa-lg" />

diff --git 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 (
-    <Box mb="24px">
-      <SectionBar
-        title="ABOUT 모임 후기"
-        rightComponent={<HighlightedTextButton text="더보기" url="/square?tab=lounge" />}
-      />
-      <Box p="16px">{imageArr && <ImageTileGridLayout imageDataArr={imageArr} />}</Box>
+    <Box mb="20px">
+      <SectionHeader title="About 소셜링" subTitle="Meeting">
+        <ButtonWrapper size="xs" url="/gather?category=all">
+          <ShortArrowIcon dir="right" />
+        </ButtonWrapper>
+      </SectionHeader>
+      <Box mt={4}>{imageArr && <ImageTileGridLayout size="lg" imageDataArr={imageArr} />}</Box>
     </Box>
   );
 }
diff --git 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
@@ -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() {
       <Slide>
         <HomeGatherSection />
         <HomeGroupSection />
+        <HomeReviewSection />
       </Slide>
-      <Slide isNoPadding>
+      {/* <Slide isNoPadding>
         <HomeStudySection />
-      </Slide>
+      </Slide> */}
     </>
   );
 }