Merge pull request #76 from SWM-METEOR/FIN-427

서비스 랜딩페이지 구현
SWM-METEOR · Nov 15, 2023 · 47eb815 · 47eb815
2 parents 21165a7 + 0dc9cdc
commit 47eb815
Show file tree

Hide file tree

Showing 31 changed files with 41,560 additions and 76 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,79 +1,7 @@
-'use client';
-import { useState } from 'react';
-
-import TrendsIcon from '@/components/Icons/TrendsIcon';
-import FeedIcon from '@/components/Icons/FeedIcon';
-import QnAIcon from '@/components/Icons/QnAIcon';
-import TrendsArticleListContainer from '@/components/articles/TrendsArticleList/TrendsArticleListContainer';
-import QnAListContainer from '@/components/qna/QnAListContainer';
+import { redirect } from 'next/navigation';
 
 export default function Home() {
-  const [selectedMode, setSelectedMode] = useState<'trends' | 'feed' | 'qna'>('trends');
-
-  return (
-    // mx-[320px]
-    <div className="flex flex-col h-full w-[1280px] main-md:w-[840px] main-sm:w-[400px] mx-auto">
-      <div className="w-full flex gap-[30px] items-end border-b border-[#DDDDDD] pt-[50px]">
-        {/* 트렌드 아티클 탭 */}
-        <button
-          onClick={() => setSelectedMode('trends')}
-          className={`flex items-center gap-[6px] w-[135px] h-[24px] text-[20px] pb-[14px] ${
-            selectedMode === 'trends'
-              ? 'transition duration-200 ease-in font-bold text-[#00A1FF] border-b-[2px] border-[#00A1FF]'
-              : 'text-[#999999]'
-          }`}
-        >
-          <span className="pb-[2px]">
-            <TrendsIcon
-              width={20}
-              height={20}
-              color={`${selectedMode === 'trends' ? '#00A1FF' : '#999999'}`}
-            />
-          </span>
-          <span className="">트렌드 아티클</span>
-        </button>
-        {/* 피드 탭 */}
-        <button
-          onClick={() => setSelectedMode('feed')}
-          className={`flex items-center gap-[6px] w-[64px] h-[24px] text-[20px] pb-[14px] ${
-            selectedMode === 'feed'
-              ? 'transition ease-in font-bold text-[#00A1FF] border-b-[2px] border-[#00A1FF]'
-              : 'text-[#999999]'
-          }`}
-        >
-          <span className="pb-[2px]">
-            <FeedIcon
-              width={20}
-              height={20}
-              color={`${selectedMode === 'feed' ? '#00A1FF' : '#999999'}`}
-            />
-          </span>
-          <span className="">피드</span>
-        </button>
-        {/* Q&A 탭 */}
-        <button
-          onClick={() => setSelectedMode('qna')}
-          className={`flex items-center gap-[6px] w-[76px] h-[24px] text-[20px] pb-[14px] ${
-            selectedMode === 'qna'
-              ? 'transition ease-in font-bold text-[#00A1FF] border-b-[2px] border-[#00A1FF]'
-              : 'text-[#999999]'
-          }`}
-        >
-          <span className="pb-[2px]">
-            <QnAIcon
-              width={20}
-              height={20}
-              color={`${selectedMode === 'qna' ? '#00A1FF' : '#999999'}`}
-            />
-          </span>
-          <span className="">Q&A</span>
-        </button>
-      </div>
-      <div className="mb-[126px] w-full h-full">
-        {selectedMode === 'trends' ? <TrendsArticleListContainer /> : <></>}
-        {selectedMode === 'feed' ? <></> : <></>}
-        {selectedMode === 'qna' ? <QnAListContainer /> : <></>}
-      </div>
-    </div>
-  );
+  // 랜딩페이지로 이동
+  redirect('/index.html');
+  return <div></div>;
 }
diff --git a/app/trends/layout.tsx b/app/trends/layout.tsx
@@ -0,0 +1,3 @@
+export default function TrendsLayout({ children }: { children: React.ReactNode }) {
+  return <div className="w-full h-full">{children}</div>;
+}
diff --git a/app/trends/page.tsx b/app/trends/page.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import { useState } from 'react';
+
+import TrendsIcon from '@/components/Icons/TrendsIcon';
+import FeedIcon from '@/components/Icons/FeedIcon';
+import QnAIcon from '@/components/Icons/QnAIcon';
+import TrendsArticleListContainer from '@/components/articles/TrendsArticleList/TrendsArticleListContainer';
+import QnAListContainer from '@/components/qna/QnAListContainer';
+
+export default function TrendsPage() {
+  const [selectedMode, setSelectedMode] = useState<'trends' | 'feed' | 'qna'>('trends');
+
+  return (
+    <div className="flex flex-col h-full w-[1280px] main-md:w-[840px] main-sm:w-[400px] mx-auto">
+      <div className="w-full flex gap-[30px] items-end border-b border-[#DDDDDD] pt-[50px]">
+        {/* 트렌드 아티클 탭 */}
+        <button
+          onClick={() => setSelectedMode('trends')}
+          className={`flex items-center gap-[6px] w-[135px] h-[24px] text-[20px] pb-[14px] ${
+            selectedMode === 'trends'
+              ? 'transition duration-200 ease-in font-bold text-[#00A1FF] border-b-[2px] border-[#00A1FF]'
+              : 'text-[#999999]'
+          }`}
+        >
+          <span className="pb-[2px]">
+            <TrendsIcon
+              width={20}
+              height={20}
+              color={`${selectedMode === 'trends' ? '#00A1FF' : '#999999'}`}
+            />
+          </span>
+          <span className="">트렌드 아티클</span>
+        </button>
+        {/* 피드 탭 */}
+        <button
+          onClick={() => setSelectedMode('feed')}
+          className={`flex items-center gap-[6px] w-[64px] h-[24px] text-[20px] pb-[14px] ${
+            selectedMode === 'feed'
+              ? 'transition ease-in font-bold text-[#00A1FF] border-b-[2px] border-[#00A1FF]'
+              : 'text-[#999999]'
+          }`}
+        >
+          <span className="pb-[2px]">
+            <FeedIcon
+              width={20}
+              height={20}
+              color={`${selectedMode === 'feed' ? '#00A1FF' : '#999999'}`}
+            />
+          </span>
+          <span className="">피드</span>
+        </button>
+        {/* Q&A 탭 */}
+        <button
+          onClick={() => setSelectedMode('qna')}
+          className={`flex items-center gap-[6px] w-[76px] h-[24px] text-[20px] pb-[14px] ${
+            selectedMode === 'qna'
+              ? 'transition ease-in font-bold text-[#00A1FF] border-b-[2px] border-[#00A1FF]'
+              : 'text-[#999999]'
+          }`}
+        >
+          <span className="pb-[2px]">
+            <QnAIcon
+              width={20}
+              height={20}
+              color={`${selectedMode === 'qna' ? '#00A1FF' : '#999999'}`}
+            />
+          </span>
+          <span className="">Q&A</span>
+        </button>
+      </div>
+      <div className="mb-[126px] w-full h-full">
+        {selectedMode === 'trends' ? <TrendsArticleListContainer /> : <></>}
+        {selectedMode === 'feed' ? <></> : <></>}
+        {selectedMode === 'qna' ? <QnAListContainer /> : <></>}
+      </div>
+    </div>
+  );
+}
diff --git a/public/CNAME b/public/CNAME
@@ -0,0 +1 @@
+youngdev.store