76 feat place community (#81)

app/(route)/(header)/community/layout.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react'
+
+interface CommunityLayoutProps {
+  children: React.ReactNode
+}
+
+const CommunityLayout = ({ children }: CommunityLayoutProps): ReactNode => {
+  return <div className='mt-24'>{children}</div>
+}
+
+export default CommunityLayout

app/(route)/(header)/community/place/page.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react'
+
+import PlaceBanner from '@/components/community/place/PlaceBanner'
+import PlaceFilter from '@/components/community/place/PlaceFilter'
+import PopularPlace from '@/components/community/place/PopularPlace'
+
+interface CommunityPlacePageProps {}
+
+const CommunityPlacePage = ({}: CommunityPlacePageProps): ReactNode => {
+  return (
+    <div className='flex h-screen w-full justify-center'>
+      <div className='flex h-screen w-[80%] flex-col'>
+        <PlaceBanner />
+        <PopularPlace />
+        <PlaceFilter />
+      </div>
+    </div>
+  )
+}
+
+export default CommunityPlacePage

app/(route)/(header)/community/plan/page.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react'
+
+interface CommunityPlanPageProps {}
+
+const CommunityPlanPage = ({}: CommunityPlanPageProps): ReactNode => {
+  return <div>CommunityPlanPage</div>
+}
+
+export default CommunityPlanPage

components/community/place/PlaceBanner.tsx

@@ -0,0 +1,33 @@
+import Image from 'next/image'
+import React, { ReactNode } from 'react'
+
+import BusanImg from '@/public/images/busan.jpg'
+
+interface PlaceBannerProps {}
+
+const PlaceBanner = ({}: PlaceBannerProps): ReactNode => {
+  return (
+    <>
+      <p className='my-5'>{`홈 > 커뮤니티 > 여행지`}</p>
+      <div className='flex gap-20'>
+        <Image src={BusanImg} alt='BusanImg' height={400} className='rounded-md' />
+        <div className='flex flex-col justify-center gap-6 text-xl'>
+          <div>
+            <div className='text-4xl'>✏️</div>
+            <p>다양한 여행지를 둘러보세요.</p>
+          </div>
+          <div>
+            <div className='text-4xl'>🔖</div>
+            <p>여행하고 싶은 곳을 저장해두세요.</p>
+          </div>
+          <div>
+            <div className='text-4xl'>✉️</div>
+            <p>유명 여행지를 동행인에게 공유해보세요.</p>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default PlaceBanner

components/community/place/PlaceFilter.tsx

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react'
+
+interface PlaceFilterProps {}
+
+const PlaceFilter = ({}: PlaceFilterProps): ReactNode => {
+  return <div>PlaceFilter</div>
+}
+
+export default PlaceFilter

components/community/place/PopularPlace.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+
+import Image from 'next/image'
+import React, { ReactNode, useEffect, useState } from 'react'
+import Slider from 'react-slick'
+
+import BusanImg from '@/public/images/busan.jpg'
+
+interface PopularPlaceProps {}
+
+const PopularPlace = ({}: PopularPlaceProps): ReactNode => {
+  const [popular, setPopular] = useState<any>([])
+  const setting = {
+    variableWidth: true,
+    dots: true,
+    infinite: true,
+    speed: 500,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+  }
+
+  const getPopularPlace = async () => {
+    try {
+      const res = await fetch(`/server/places/popular`, {
+        method: 'GET',
+      })
+
+      if (res.ok) {
+        const data = await res.json()
+        // console.log(data)
+        return data
+      }
+
+      console.log(res)
+
+      const status = res.status
+      switch (status) {
+        default:
+          // alert('오류입니다.')
+          return
+      }
+    } catch (error) {
+      console.log('Fetch error', error)
+    }
+  }
+
+  useEffect(() => {
+    const getPlace = async () => {
+      const data = await getPopularPlace()
+      setPopular(data)
+    }
+    getPlace()
+
+    console.log('popular', popular)
+  }, [])
+
+  const render = (item: any) => (
+    <div className='h-52' style={{ width: 240 }}>
+      <div className='h-[90%] w-[90%] rounded-lg bg-tbSecondary p-3 hover:scale-105 hover:cursor-pointer'>
+        <Image
+          src={item.imageSrc || BusanImg}
+          alt='BusanImg'
+          width={200}
+          height={200}
+          quality={100}
+          className='mb-2 h-2/3 w-full rounded-lg'
+        />
+        <h2 className='text-lg font-medium'>{item.placeName}</h2>
+        <p># {item.category}</p>
+      </div>
+    </div>
+  )
+
+  return (
+    <div className='mb-7'>
+      <p className='mb-7 mt-10 text-3xl'>🔥 TraBook 인기 여행지 Top 10</p>
+      <div className='h-56'>
+        <Slider {...setting}>
+          {popular &&
+            popular.map((item: any) => {
+              return render(item)
+            })}
+        </Slider>
+      </div>
+    </div>
+  )
+}
+
+export default PopularPlace

lib/constants/routes.ts

@@ -84,11 +84,11 @@ export const ROUTES = {
     },
   },
   COMMUNITY: {
-    PLACE: {
+    PLAN: {
       name: '여행 계획 커뮤니티',
       url: '/community/plan',
     },
-    PLAN: {
+    PLACE: {
       name: '여행지 커뮤니티',
       url: '/community/place',
     },

package.json

@@ -30,6 +30,8 @@
     "react-dom": "^18",
     "react-intersection-observer": "^9.13.1",
     "react-kakao-maps-sdk": "^1.1.27",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
     "tailwind-merge": "^2.5.2",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-animate": "^1.0.7",