[JOJI-775] 서비스섹션 (#35)

* feat: 서비스섹션 구현(기본구조) * feat: 폰트크기 변경 * feat: 서비스섹션 ui개선 -생동감이 느껴지도록 하였음 * feat: 서비스섹션 ui 수정 * feat: 공지사항 페이지 ui 수정 -표시되는 시간을 YYYY-MM-DD형식으로 수정 * feat: 모바일 네비게이션 바 수정 -애니메이션이 정상 작동하도록 수정 * feat: 네비게이션 바 경로수정 * feat: contact 삭제 * feat: contact 삭제 * feat: 메뉴아이템 추출 -serviceItem.js 로 컴포넌트분리 * feat: 시간형식 변환 함수 모듈화 -useFormatDate * feat: 포맷데이트 유틸화 - _utils/formatDate.js
joji-company-dev · Feb 11, 2025 · 6435165 · 6435165
1 parent 38fe1af
commit 6435165
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 96 deletions.
diff --git a/src/app/_components/navBar.js b/src/app/_components/navBar.js
@@ -77,7 +77,6 @@ export default function NavBar() {
         { label: "서비스", href: "#service" },
         { label: "FAQ", href: "#faq" },
         { label: "구독", href: "#subscribe" },
-        { label: "문의", href: "#contact" },
       ],
     },
     {
@@ -92,7 +91,7 @@ export default function NavBar() {
       label: "공지사항",
       baseUrl: "/post",
       children: [
-        { label: "공지사항", href: "/post" },
+        { label: "공지사항", href: "/" },
         { label: "게시판", href: "#board" },
       ],
     },
@@ -108,7 +107,6 @@ export default function NavBar() {
         { label: "서비스", href: "#service" },
         { label: "FAQ", href: "#faq" },
         { label: "구독", href: "#subscribe" },
-        { label: "문의", href: "#contact" },
       ],
     },
     {
@@ -142,7 +140,7 @@ export default function NavBar() {
             className="sticky bg-white top-0 z-50 w-full flex items-center shadow-sm"
             style={{ height: `${NAVBAR_HEIGHT}px` }}
           >
-            <div className="flex items-center justify-between w-full px-4">
+            <div className="flex items-center justify-between w-full px-4 z-50">
               {/* 로고 */}
               <Link href="/" className="flex items-center">
                 <Image
@@ -172,74 +170,76 @@ export default function NavBar() {
 
                 {/* 햄버거 메뉴 버튼 */}
                 <button
-                  onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-                  className="text-2xl"
+                  onClick={() => {
+                    setIsMobileMenuOpen((prev) => {
+                      return !prev;
+                    });
+                  }}
+                  className="text-2xl test"
                 >
                   {isMobileMenuOpen ? <FaTimes /> : <FaBars />}
                 </button>
               </div>
             </div>
 
             {/* 모바일 메뉴 */}
-            {isMobileMenuOpen && (
-              <div
-                className={`absolute left-0 w-full bg-white z-50 flex flex-col items-center p-6 shadow-lg transition-all duration-300 ease-in-out`}
-                style={{
-                  top: `${NAVBAR_HEIGHT}px`,
-                  transform: isMobileMenuOpen
-                    ? "translateY(0)"
-                    : "translateY(-100%)",
-                  opacity: isMobileMenuOpen ? 1 : 0,
-                }}
-              >
-                {mobileMenuItems.map((item) => (
-                  <div key={item.label} className="w-full items-center">
-                    {/* 메인 메뉴 버튼 */}
-                    <button
-                      onClick={() => toggleMenu(item.label)}
-                      className="text-lg font-semibold py-2 w-full"
-                    >
-                      {item.label}
-                      {openMenu === item.label ? (
-                        <ExpandLess className="ml-2" />
-                      ) : (
-                        <ExpandMore className="ml-2" />
-                      )}
-                    </button>
 
-                    {openMenu === item.label && (
-                      <div className="flex flex-col items-center w-full py-2">
-                        {item.children.map((child) => (
-                          <Link
-                            key={child.href}
-                            href={child.href}
-                            className="py-1 text-gray-700"
-                          >
-                            {child.label}
-                          </Link>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                ))}
-
-                {/* 대시보드 버튼 */}
-                <Link
-                  href="https://easily-dashboard.jojicompany.com"
-                  className="bg-[#FF6B2B] text-white py-2 px-4 rounded-md hover:bg-[#e55a1f] mt-2"
-                >
-                  대시보드
-                </Link>
-                {isLoggedIn && (
+            <div
+              className={`absolute left-0 w-full bg-white z-40 flex flex-col items-center p-6 shadow-lg 
+                 duration-300 ease-in-out ${
+                   isMobileMenuOpen
+                     ? "opacity-100 translate-y-0"
+                     : "opacity-0 -translate-y-full"
+                 }`}
+              style={{ top: `${NAVBAR_HEIGHT}px` }}
+            >
+              {mobileMenuItems.map((item) => (
+                <div key={item.label} className="w-full items-center">
+                  {/* 메인 메뉴 버튼 */}
                   <button
-                    onClick={handleLogout}
-                    className="bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 mt-2"
+                    onClick={() => toggleMenu(item.label)}
+                    className="text-lg font-semibold py-2 w-full"
                   >
-                    로그아웃
+                    {item.label}
+                    {openMenu === item.label ? (
+                      <ExpandLess className="ml-2" />
+                    ) : (
+                      <ExpandMore className="ml-2" />
+                    )}
                   </button>
-                )}
-              </div>
-            )}
+
+                  {openMenu === item.label && (
+                    <div className="flex flex-col items-center w-full py-2">
+                      {item.children.map((child) => (
+                        <Link
+                          key={child.href}
+                          href={child.href}
+                          className="py-1 text-gray-700"
+                        >
+                          {child.label}
+                        </Link>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))}
+
+              {/* 대시보드 버튼 */}
+              <Link
+                href="https://easily-dashboard.jojicompany.com"
+                className="bg-[#FF6B2B] text-white py-2 px-4 rounded-md hover:bg-[#e55a1f] mt-2"
+              >
+                대시보드
+              </Link>
+              {isLoggedIn && (
+                <button
+                  onClick={handleLogout}
+                  className="bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 mt-2"
+                >
+                  로그아웃
+                </button>
+              )}
+            </div>
           </nav>
 
           {/* 오버레이 배경 */}

diff --git a/src/app/_components/sections/serviceSection.js b/src/app/_components/sections/serviceSection.js
@@ -1,11 +1,28 @@
+import { serviceItem } from "@/app/_consts/serviceItem";
+
 export function ServiceSection() {
-    return (
-      <div className="max-w-7xl mx-auto px-6 py-24 text-center">
-        <h2 className="text-3xl font-bold mb-6">서비스</h2>
-        <p className="text-lg text-muted-foreground">
-          이즐리는 다양한 서비스로 영상 기획을 돕습니다.
-        </p>
-      </div>
-    );
-  }
-
+  return (
+    <div className="max-w-7xl mx-auto px-6 py-24 text-center bg-gradient-to-b text-black">
+      <h2 className="text-5xl font-extrabold mb-12">✨ 이즐리 ✨</h2>
+      {serviceItem.map((item) => (
+        <div
+          key={item.id}
+          className="relative bg-opacity-90 rounded-2xl shadow-sm p-10 mb-16 max-w-6xl mx-auto transition-transform duration-300 hover:scale-105"
+        >
+          <h2 className="text-4xl font-bold mb-4">{item.title}</h2>
+          <p className="text-lg text-black mb-6">{item.subtitle}</p>
+          <div className="relative w-full aspect-video overflow-hidden rounded-lg shadow-lg">
+            <video
+              className="w-full h-full object-cover"
+              src={item.videoSrc}
+              autoPlay
+              loop
+              muted
+              playsInline
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/_consts/serviceItem.js b/src/app/_consts/serviceItem.js
@@ -0,0 +1,23 @@
+export const serviceItem = [
+  {
+    id: 1,
+    title: "서비스1",
+    subtitle: "이즐리는 여러분의 일상에 행복을 줍니다.",
+    videoSrc:
+      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
+  },
+  {
+    id: 2,
+    title: "서비스2",
+    subtitle: "이즐리는 여러분의 일상에 행복을 줍니다.",
+    videoSrc:
+      "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+  },
+  {
+    id: 3,
+    title: "서비스3",
+    subtitle: "이즐리는 여러분의 일상에 행복을 줍니다.",
+    videoSrc:
+      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+  },
+];
diff --git a/src/app/_utils/formatDate.js b/src/app/_utils/formatDate.js
@@ -0,0 +1,4 @@
+export const formatDate = (dateString) => {
+  const date = new Date(dateString);
+  return date.toISOString().split("T")[0];
+};
diff --git a/src/app/page.js b/src/app/page.js
@@ -22,16 +22,18 @@ export default function Home() {
       >
         <ServiceSection />
       </section>
-      {/* Contact Section */}
-      <section id="contact" className="min-h-screen flex items-center justify-center bg-gray-100">
-        <ContactSection />
-      </section>
       {/* Review Section */}
-      <section id="review" className="h-1/2 flex items-center justify-center bg-gray-100">
-        <ReviewSection/>
+      <section
+        id="review"
+        className="h-1/2 flex items-center justify-center bg-gray-100"
+      >
+        <ReviewSection />
       </section>
       {/* FAQ Section */}
-      <section id="faq" className="h-1/2 flex items-center justify-center bg-gray-100">
+      <section
+        id="faq"
+        className="h-1/2 flex items-center justify-center bg-gray-100"
+      >
         <FAQSection />
       </section>
       <section
@@ -40,12 +42,6 @@ export default function Home() {
       >
         <SubscribeSection />
       </section>
-      <section
-        id="contact"
-        className="min-h-screen flex items-center justify-center bg-gray-100"
-      >
-        <ContactSection />
-      </section>
     </div>
   );
 }
diff --git a/src/app/post/page.js b/src/app/post/page.js
@@ -14,6 +14,7 @@ import {
   PaginationNext,
 } from "@/app/_components/ui/pagination";
 import usePagination from "../_components/hooks/usePagination";
+import { formatDate } from "../_utils/formatDate";
 
 export default function NoticePage() {
   const [posts, setPosts] = useState([]);
@@ -82,16 +83,13 @@ export default function NoticePage() {
                   {post.commentCount}
                 </TypographyP>
               </div>
-              <div className="text-sm text-gray-500 md:text-right mt-4 md:mt-0">
+              <div className="text-sm text-gray-500 md:text-right md:mt-0">
                 <TypographyP className="text-gray-400">
-                  {post.createdAt}
-                </TypographyP>
-                <TypographyP className="text-gray-400">
-                  {post.category}
+                  {formatDate(post.createdAt)}
                 </TypographyP>
               </div>
             </CardContent>
-            <div className="flex justify-end mt-4">
+            <div className="flex justify-end">
               <Button
                 onClick={() => router.push(`/postDetail/${post.id}`)}
                 variant="outline"

diff --git a/src/app/postDetail/[id]/page.js b/src/app/postDetail/[id]/page.js
@@ -10,10 +10,12 @@ export default function CommunityPostDetailPage({ params }) {
 
   useEffect(() => {
     const fetchPostDetail = async () => {
-        const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/posts/${id}`);
-        const data = await response.json();
-        setContent(data.content);
-        setLoading(false);
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_BASE_URL}/posts/${id}`
+      );
+      const data = await response.json();
+      setContent(data.content);
+      setLoading(false);
     };
 
     fetchPostDetail();
@@ -32,7 +34,9 @@ export default function CommunityPostDetailPage({ params }) {
   if (!content) {
     return (
       <div className="text-center mt-10">
-        <h2 className="text-2xl font-bold text-red-500">게시글을 찾을 수 없습니다.</h2>
+        <h2 className="text-2xl font-bold text-red-500">
+          게시글을 찾을 수 없습니다.
+        </h2>
         <Link href="/post">
           <button className="mt-4 px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100">
             공지사항 목록으로 돌아가기
@@ -44,7 +48,9 @@ export default function CommunityPostDetailPage({ params }) {
 
   return (
     <div className="bg-white rounded-lg shadow-md p-6 max-w-4xl mx-auto mt-8">
-      <h2 className="text-2xl font-bold text-orange-600 mb-4">게시글 상세보기</h2>
+      <h2 className="text-2xl font-bold text-orange-600 mb-4">
+        게시글 상세보기
+      </h2>
       <div className="flex justify-end mt-6">
         <Link href="/post">
           <button className="px-4 py-2 border border-orange-500 text-orange-500 rounded hover:bg-orange-500 hover:text-white">