diff --git a/next.config.js b/next.config.js index 420dcf02..3d015966 100644 --- a/next.config.js +++ b/next.config.js @@ -18,6 +18,14 @@ const nextConfig = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], }, + images: { + remotePatterns: [ + { + protocol: 'https', + hostname: 'dnd-academy-v3.s3.ap-northeast-2.amazonaws.com', + }, + ], + }, swcMinify: true, experimental: { typedRoutes: true, diff --git a/src/app/jobs/page.tsx b/src/app/(detail)/jobs/page.tsx similarity index 100% rename from src/app/jobs/page.tsx rename to src/app/(detail)/jobs/page.tsx diff --git a/src/app/organizers/page.tsx b/src/app/(detail)/organizers/page.tsx similarity index 100% rename from src/app/organizers/page.tsx rename to src/app/(detail)/organizers/page.tsx diff --git a/src/app/projects/page.tsx b/src/app/(detail)/projects/page.tsx similarity index 100% rename from src/app/projects/page.tsx rename to src/app/(detail)/projects/page.tsx diff --git a/src/app/reviews/page.tsx b/src/app/(detail)/reviews/page.tsx similarity index 100% rename from src/app/reviews/page.tsx rename to src/app/(detail)/reviews/page.tsx diff --git a/src/app/index.module.scss b/src/app/index.module.scss new file mode 100644 index 00000000..6f5a4735 --- /dev/null +++ b/src/app/index.module.scss @@ -0,0 +1,6 @@ +.main { + width: 100%; + max-width: 1156px; + margin: 0 auto; + padding: 0 24px; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 787f0681..d6382ed1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -5,6 +5,7 @@ import TopNavigationBar from '@/components/global/TopNavigationBar'; import { pretendardFont, senFont } from './fonts'; import 'src/styles/global.scss'; +import styles from './index.module.scss'; export const metadata = { title: 'DND', @@ -18,7 +19,9 @@ function RootLayout({ children }: { - {children} +
+ {children} +
); diff --git a/src/app/page.test.tsx b/src/app/page.test.tsx index 77a12576..10f6020b 100644 --- a/src/app/page.test.tsx +++ b/src/app/page.test.tsx @@ -7,9 +7,9 @@ describe('HomePage', () => { )); - it('Should be visible "한글"', () => { + it('Should be visible "DND"', () => { const { container } = renderHomePage(); - expect(container).toHaveTextContent('한글'); + expect(container).toHaveTextContent('DND'); }); }); diff --git a/src/app/page.tsx b/src/app/page.tsx index 7a519086..ecb24f83 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,15 +1,8 @@ -import clsx from 'clsx'; - -import { pretendardFont, senFont } from './fonts'; +import HomePage from '@/components/pages/HomePage'; function Home() { return ( -
-
한글
-
english
-
한글
-
english
-
+ ); } diff --git a/src/components/pages/HomePage/index.module.scss b/src/components/pages/HomePage/index.module.scss new file mode 100644 index 00000000..72748d5b --- /dev/null +++ b/src/components/pages/HomePage/index.module.scss @@ -0,0 +1,50 @@ +@import "/src/styles/main"; + +.homeSection { + display: flex; + flex-direction: row; + padding: 100px 0; + justify-content: space-between; + + .contentsWrapper { + display: flex; + flex-direction: column; + gap: 72px; + + .description { + display: flex; + flex-direction: column; + gap: 16px; + + .title { + white-space: pre-line; + font-size: 56px; + font-weight: 700; + line-height: 140%; + } + + .subTitle { + font-size: 20px; + line-height: 140%; + color: color('gray02'); + } + + .counter { + color: color('primary'); + font-size: 20px; + font-weight: 700; + line-height: 140%; + } + } + } + + .bannerWrapper { + position: relative; + max-width: 400px; + width: 100%; + + .banner { + object-fit: contain; + } + } +} diff --git a/src/components/pages/HomePage/index.tsx b/src/components/pages/HomePage/index.tsx new file mode 100644 index 00000000..47facab4 --- /dev/null +++ b/src/components/pages/HomePage/index.tsx @@ -0,0 +1,44 @@ +import Image from 'next/image'; + +import styles from './index.module.scss'; + +function HomePage() { + return ( +
+
+
+
badge
+

+ {`프로젝트에 즐거움을 + 모두에게 기회를`} +

+
+ DND + 는  + 개발자 + 와  + 디자이너 + 를 위한 +
+ 계속해서 성장하는  + IT비영리단체 + 입니다. +
+
오늘까지 000명이 지원했어요!
+
+ +
+
+ main-banner +
+
+ ); +} + +export default HomePage;