YAPP-Github · moong23 · Jul 10, 2024 · Jul 7, 2024 · Jul 7, 2024 · Jul 8, 2024
@@ -6,4 +6,5 @@ node_modules
 
 
 localhost+1-key.pem
-localhost+1.pem
+localhost+1.pem
+*.pem
@@ -1,5 +1,8 @@
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ['localhost', 'via.placeholder.com'],
+  },
 
   async rewrites() {
     return [

@@ -22,6 +22,7 @@
     "@tanstack/react-query": "^5.40.1",
     "axios": "^1.7.2",
     "next": "^14.2.3",
+    "react-cookie": "^7.1.4",
     "typescript": "^5.4.5",
     "zustand": "^4.5.2"
   },

@@ -0,0 +1,6 @@
+import { GET } from '@/network';
+
+export const getInterestList = async () => {
+  const data = await GET('/interests');
+  return data.data;
+};
@@ -1,13 +1,10 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
 import MSWComponent from '@/mocks/MSWWrapper';
 import '@/styles/tailwind.css';
 
-const inter = Inter({ subsets: ['latin'] });
-
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Inspo Mail Club',
+  description: 'TODO: FIX DESCRIPTION',
 };
 
 export default function RootLayout({
@@ -16,8 +13,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang='en'>
-      <body className={inter.className}>
+    <html lang='ko'>
+      <body>
         <MSWComponent>{children}</MSWComponent>
       </body>
     </html>

@@ -0,0 +1,156 @@
+import ServiceIcon from '@/assets/icons/ServiceIcon';
+import EmailListInteraction from '@/components/Onboard/EmailListInteraction';
+
+interface EmailListProps {
+  userName: string;
+}
+
+const EmailList = async ({ userName = '채현' }: EmailListProps) => {
+  const incomingSenders = await getIncomingSenders();
+  const incomingSenders2 = await getIncomingSenders2();
+  return (
+    <div className='flex flex-col items-center gap-10 mb-24'>
+      <span className='flex flex-col items-center gap-2'>
+        <span className='flex flex-row items-center'>
+          <ServiceIcon width={195} />
+          <span className='text-black text-h1'>에서 골라 볼 뉴스레터를 선택하세요</span>
+        </span>
+        <span className='text-body3'>골라 볼 뉴스레터 목록은 언제든 수정할 수 있어요.</span>
+      </span>
+
+      <EmailListInteraction
+        userName={userName}
+        interest={'IT/테크'}
+        incomingSenders={incomingSenders}
+        techSenders={incomingSenders2}
+      />
+    </div>
+  );
+};
+
+export default EmailList;
+
+const getIncomingSenders = async () => {
+  const response = {
+    senders: [
+      {
+        senderId: 'randomString1',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub1',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString2',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub2',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString3',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub3',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString4',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub4',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString5',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub5',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+    ],
+    count: 5,
+  };
+
+  return response;
+};
+
+const getIncomingSenders2 = async () => {
+  const response = {
+    senders: [
+      {
+        senderId: 'randomString1',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub11',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString2',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub12',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString3',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub13',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString4',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub14',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString5',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub15',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString6',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub16',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString7',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub17',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString8',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub18',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString9',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub19',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+      {
+        senderId: 'randomString10',
+        fullAddress: '[email protected]',
+        localPart: 'inspomailclub20',
+        domain: 'hedwig.com',
+        category: 'IT / 테크',
+      },
+    ],
+    count: 10,
+  };
+
+  return response;
+};
@@ -0,0 +1,59 @@
+import { OnboardButton } from '@/components/OnboardButton';
+import { getInterestList } from '@/api/onboard';
+import InterestInteraction from '@/components/Onboard/InterestInteraction';
+
+interface InterestProps {
+  userName: string;
+}
+
+const Interest = async ({ userName = '채현' }: InterestProps) => {
+  const interestList = await getInterest();
+  return (
+    <div className='flex flex-col items-center justify-start w-full h-full gap-10'>
+      <span className='flex flex-col items-center gap-2'>
+        <h1 className='text-black text-h1'>{userName}님, 관심 있는 분야를 선택해주세요</h1>
+        <div className='text-body3'>맞춤형 인사이트 제공을 위해 ‘1개 이상’ 선택해주세요.</div>
+      </span>
+
+      <InterestInteraction interestList={interestList} />
+    </div>
+  );
+};
+
+export default Interest;
+
+const getInterest = async () => {
+  const interestList = [
+    {
+      id: 'randomstring1',
+      interest: '시사',
+      desc: '세상 돌아가는',
+    },
+    {
+      id: 'randomstring2',
+      interest: 'IT/테크',
+      desc: '최신 테크',
+    },
+    {
+      id: 'randomstring3',
+      interest: '디자인',
+      desc: '디자인 영감',
+    },
+    {
+      id: 'randomstring4',
+      interest: '경제',
+      desc: '핵심 기업',
+    },
+    {
+      id: 'randomstring5',
+      interest: '트렌드',
+      desc: '글로벌 트렌드',
+    },
+    {
+      id: 'randomstring6',
+      interest: '채용',
+      desc: '신규 채용',
+    },
+  ];
+  return interestList;
+};
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import MSWComponent from '@/mocks/MSWWrapper';
+import '@/styles/tailwind.css';
+import { Header } from '@/components/Header';
+
+export const metadata: Metadata = {
+  title: 'Inspo Mail Club',
+  description: 'TODO: FIX DESCRIPTION',
+};
+
+export default function OnBoardLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <MSWComponent>
+      <Header isMain={false} />
+      <div className='flex justify-center w-full h-full mt-12'>{children}</div>
+    </MSWComponent>
+  );
+}
@@ -0,0 +1,55 @@
+import ServiceIcon from '@/assets/icons/ServiceIcon';
+import Carousel from '@/components/Carousel/Carousel';
+import Image from 'next/image';
+import GoogleIcon from '@/assets/icons/GoogleIcon.png';
+import Link from 'next/link';
+
+const OnBoard = () => {
+  const BLUR_DATA_URL = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mOcUg8AAa0BFSX8uBwAAAAASUVORK5CYII=';
+  return (
+    <div className='flex flex-col items-center gap-10'>
+      <span className='flex flex-col items-center'>
+        <span className='flex flex-row items-center'>
+          <ServiceIcon width={195} />
+          <span className='text-black text-h1'>은 관리되지 않는 메일함 속에서</span>
+        </span>
+        <span className='text-black text-h1'>방치되는 유익한 메일을 큐레이팅해요</span>
+      </span>
+      {/* <Carousel width={690} height={400} length={3}>
+        <Carousel.Wrapper>
+          <Carousel.Item index={0}>
+            <img src='https://via.placeholder.com/690x400' alt='carousel1' />
+          </Carousel.Item>
+          <Carousel.Item index={1}>
+            <img src='https://via.placeholder.com/690x400' alt='carousel2' />
+          </Carousel.Item>
+          <Carousel.Item index={2}>
+            <img src='https://via.placeholder.com/690x400' alt='carousel3' />
+          </Carousel.Item>
+        </Carousel.Wrapper>
+        <Carousel.Dots imageLength={3} />
+        <Carousel.Move direction='prev' />
+        <Carousel.Move direction='next' />
+      </Carousel> */}
+      <Image
+        placeholder='blur'
+        blurDataURL='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg=='
+        src='http://via.placeholder.com/690x400'
+        alt='carousel'
+        width={690}
+        height={400}
+      />
+      <Link href='/onboard/interest'>
+        <Image
+          className='cursor-pointer'
+          placeholder='blur'
+          src={GoogleIcon}
+          alt='google login'
+          width={350}
+          height={64}
+        />
+      </Link>
+    </div>
+  );
+};
+export default OnBoard;