diff --git a/src/app/domain/[id]/DomainCard.tsx b/src/app/domain/[id]/DomainCard.tsx index 81b4e90..af81c27 100644 --- a/src/app/domain/[id]/DomainCard.tsx +++ b/src/app/domain/[id]/DomainCard.tsx @@ -1,6 +1,6 @@ import { Chip } from '@/components/Chip'; import SubscribeButton from '@/components/SubscribeButton'; -import type { DomainType } from '@/types/article'; +import type { DomainType } from '@/types/'; import Image from 'next/image'; import Link from 'next/link'; import WebsiteIcon from '@/assets/icons/WebsiteIcon.svg'; diff --git a/src/app/domain/[id]/page.tsx b/src/app/domain/[id]/page.tsx index b57790d..0385c4e 100644 --- a/src/app/domain/[id]/page.tsx +++ b/src/app/domain/[id]/page.tsx @@ -1,8 +1,10 @@ import MainPageHeader from '@/components/Header/MainPageHeader'; -import DomainListTap from '@/components/ListTap/DomainListTap'; +import AlternateListTap from '@/components/ListTap/AlternateListTap'; import Image from 'next/image'; import ArticleCard from '@/components/Article/ArticleCard'; import DomainCard from '@/app/domain/[id]/DomainCard'; +import { GET } from '@/network'; +import { ArticleType, DomainType } from '@/types'; interface DomainPageProps { params: { @@ -11,7 +13,15 @@ interface DomainPageProps { } const DomainPage = async ({ params }: DomainPageProps) => { - const { domainData, isSubscribed, domainArticleData } = await getDomainPageData(params.id); + const { + domainData, + isSubscribed, + domainArticleData, + }: { + domainData: DomainType; + isSubscribed: boolean; + domainArticleData: ArticleType[]; + } = await getDomainPageData(params.id); return (
@@ -23,7 +33,7 @@ const DomainPage = async ({ params }: DomainPageProps) => {
{domainData.name}
- +
{domainArticleData.map(article => ( @@ -42,49 +52,6 @@ const DomainPage = async ({ params }: DomainPageProps) => { export default DomainPage; export const getDomainPageData = async (id: string) => { - return { - domainData: { - id: id, - name: '뉴닉', - type: '시사', - domain: 'newneek@gmail.com', - profile: 'https://picsum.photos/800', - description: - '우리가 시간이 없지, 세상이 안 궁금하냐!\n시사, 경제, 커리어 등 지식 정보부터 일상 속 사소한\n영감까지 자유롭게 이야기할 수 있는 플랫폼이에요.', - website: 'https://newneek.co/', - }, - isSubscribed: true, - domainArticleData: [ - { - id: 'randomString111', - title: '국가안전보장회의', - url: '/article/1', - type: 'IT/테크', - content: - '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', - date: '2024-07-13', - thumbnail: 'https://picsum.photos/156', - isRead: true, - from: { - domain: 'official@git', - profile: 'https://picsum.photos/36', - }, - }, - { - id: 'randomString112', - title: '국가안전보장회의', - url: '/article/2', - type: 'IT/테크', - content: - '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', - date: '2024-07-13', - thumbnail: 'https://picsum.photos/156', - isRead: true, - from: { - domain: 'official@git', - profile: 'https://picsum.photos/36', - }, - }, - ], - }; + const response = await GET(`/domainData/${id}`); + return response; }; diff --git a/src/app/main/CategoryTab.tsx b/src/app/main/CategoryTab.tsx index bea0d94..d6504af 100644 --- a/src/app/main/CategoryTab.tsx +++ b/src/app/main/CategoryTab.tsx @@ -1,7 +1,8 @@ import ArticleCard from '@/components/Article/ArticleCard'; import { Chip } from '@/components/Chip'; -import type { ArticleType } from '@/types/article'; +import type { ArticleType } from '@/types'; import RecommendArea from '@/app/main/TodayTab/RecommendArea'; +import { GET } from '@/network'; interface CategoryTabProps { currentTab: string; @@ -28,52 +29,7 @@ const CategoryTab = async ({ currentTab }: CategoryTabProps) => { export default CategoryTab; // currentTab을 props로 넘겨서 해당 탭에 맞는 데이터를 fetch -const getCategoryArticleData = async (currentTab: string): Promise => { - return [ - { - id: 'randomString111', - title: '국가안전보장회의', - url: '/article/1', - type: 'IT/테크', - content: - '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', - date: '2024-07-13', - thumbnail: 'https://picsum.photos/156', - isRead: true, - from: { - domain: 'official@git', - profile: 'https://picsum.photos/36', - }, - }, - { - id: 'randomString112', - title: '국가안전보장회의', - url: '/article/1', - type: 'IT/테크', - content: - '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', - date: '2024-07-13', - thumbnail: 'https://picsum.photos/156', - isRead: false, - from: { - domain: 'official@git', - profile: 'https://picsum.photos/36', - }, - }, - { - id: 'randomString113', - title: '국가안전보장회의', - url: '/article/1', - type: '시사', - content: - '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', - date: '2024-07-13', - thumbnail: 'https://picsum.photos/156', - isRead: false, - from: { - domain: 'official@git', - profile: 'https://picsum.photos/36', - }, - }, - ]; +const getCategoryArticleData = async (currentTab: string): Promise => { + const response = await GET('/articleList', { currentTab }); + return response.data; }; diff --git a/src/app/main/TodayTab/RecommendArea.tsx b/src/app/main/TodayTab/RecommendArea.tsx index 87ec9c8..96a8ea1 100644 --- a/src/app/main/TodayTab/RecommendArea.tsx +++ b/src/app/main/TodayTab/RecommendArea.tsx @@ -1,38 +1,26 @@ import { Chip } from '@/components/Chip'; +import DomainListItem from '@/components/Domain/DomainListItem'; import SubscribeButton from '@/components/SubscribeButton'; +import { GET } from '@/network'; +import { DomainType } from '@/types'; import Image from 'next/image'; const RecommendArea = async () => { - const recommendBrandData = await getRecommendBrandData(); + const recommendDomainData: DomainType[] = await getRecommendDomainData(); return ( -
+
채현님이 놓치고 있는 뉴스레터 더 많은 인사이트를 얻으세요
- {recommendBrandData.map((brand, index) => ( + {recommendDomainData.map((domain, index: number) => (
- - {`thumbnail-${brand.brandName}`} - - {brand.brandName} - - - - - - +
))}
@@ -42,28 +30,7 @@ const RecommendArea = async () => { export default RecommendArea; -const getRecommendBrandData = async () => { - return [ - { - id: 'randomString111', - brandName: '요즘IT', - thumbnail: 'https://picsum.photos/48', - type: 'IT/테크', - subscribed: false, - }, - { - id: 'randomString112', - brandName: '요즘IT', - thumbnail: 'https://picsum.photos/48', - type: 'IT/테크', - subscribed: false, - }, - { - id: 'randomString113', - brandName: '요즘IT', - thumbnail: 'https://picsum.photos/48', - type: 'IT/테크', - subscribed: false, - }, - ]; +const getRecommendDomainData = async () => { + const response = await GET('/domainRecommendList'); + return response.data; }; diff --git a/src/app/main/TodayTab/index.tsx b/src/app/main/TodayTab/index.tsx index d5a5fb9..af70efb 100644 --- a/src/app/main/TodayTab/index.tsx +++ b/src/app/main/TodayTab/index.tsx @@ -1,10 +1,11 @@ import ArticleCard from '@/components/Article/ArticleCard'; import { Chip } from '@/components/Chip'; -import type { ArticleType } from '@/types/article'; +import type { ArticleType } from '@/types'; import { formatToYMD } from '@/utils/formatDate/formatToYMD'; import Image from 'next/image'; import DoubleArrow from '@/assets/icons/DoubleArrow.svg'; import Link from 'next/link'; +import { GET } from '@/network'; const TodayTab = async () => { const articleApiData = await getMainPageArticleData(); @@ -37,52 +38,7 @@ const TodayTab = async () => { }; export default TodayTab; -const getMainPageArticleData = async (): Promise => { - return [ - { - id: 'randomString111', - title: '국가안전보장회의', - url: '/article/1', - type: 'IT/테크', - content: - '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', - date: '2024-07-13', - thumbnail: 'https://picsum.photos/156', - isRead: true, - from: { - domain: 'official@git', - profile: 'https://picsum.photos/36', - }, - }, - { - id: 'randomString112', - title: '국가안전보장회의', - url: '/article/2', - type: 'IT/테크', - content: - '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', - date: '2024-07-13', - thumbnail: 'https://picsum.photos/156', - isRead: false, - from: { - domain: 'official@git', - profile: 'https://picsum.photos/36', - }, - }, - { - id: 'randomString113', - title: '국가안전보장회의', - url: '/article/3', - type: '시사', - content: - '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', - date: '2024-07-13', - thumbnail: 'https://picsum.photos/156', - isRead: false, - from: { - domain: 'official@git', - profile: 'https://picsum.photos/36', - }, - }, - ]; +const getMainPageArticleData = async (): Promise => { + const response = await GET('/articleList'); + return response.data; }; diff --git a/src/app/mypage/ProfileCard.tsx b/src/app/mypage/ProfileCard.tsx deleted file mode 100644 index d87df69..0000000 --- a/src/app/mypage/ProfileCard.tsx +++ /dev/null @@ -1,7 +0,0 @@ -const ProfileCard = ({ profileData }: { profileData: any }) => { - return ( -
-
-
- ); -}; diff --git a/src/app/mypage/UserDataCard.tsx b/src/app/mypage/UserDataCard.tsx new file mode 100644 index 0000000..6c3a968 --- /dev/null +++ b/src/app/mypage/UserDataCard.tsx @@ -0,0 +1,33 @@ +import { Chip } from '@/components/Chip'; +import { UserDataType } from '@/types'; +import Image from 'next/image'; +import { GET } from '@/network'; + +const UserDataCard = async () => { + //TODO: 추후 로그인 로직 완성 후 주석 교체 + const userData: UserDataType = await getUserData(); + // const userData = cookies().get('userData'); + + return ( +
+ profile +
+ {userData.name} + {userData.email} +
+
+ {userData.typeList.map(type => ( + + ))} +
+
+ ); +}; + +export default UserDataCard; + +// TODO: 추후 로그인 로직 완성 후 아래 제거 +const getUserData = async () => { + const response = await GET('/userData'); + return response.data; +}; diff --git a/src/app/mypage/layout.tsx b/src/app/mypage/layout.tsx index ba7cea5..11b18ec 100644 --- a/src/app/mypage/layout.tsx +++ b/src/app/mypage/layout.tsx @@ -1,12 +1,44 @@ import MainPageHeader from '@/components/Header/MainPageHeader'; -import { PropsWithChildren } from 'react'; +import type { PropsWithChildren } from 'react'; +import Link from 'next/link'; +import UserDataCard from '@/app/mypage/UserDataCard'; export default async function MypageLayout({ children }: Readonly) { return ( <>
-
{children}
+
+
+ {children} +
+
+
+ + + +
+
+ 설정 + 문의하기 +
+ + 이용 약관 + + + 개인정보 처리방침 + +
+
+
+
+
); diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx index 61d41b7..bdc94e3 100644 --- a/src/app/mypage/page.tsx +++ b/src/app/mypage/page.tsx @@ -1,9 +1,52 @@ -const MyPage = () => { +import type { UserDataType } from '@/types'; +import Link from 'next/link'; +import { GET } from '@/network'; + +interface MyPageProps { + userData: UserDataType; +} + +const MyPage = async () => { + //TODO: 추후 로그인 로직 완성 후 주석 교체 + const userData: UserDataType = await getUserData(); + // const userData = cookies().get('userData'); + return ( - <> - <>Test123 - +
+
+
+
{userData?.name}
+
+
+ + 뉴스레터 구독 관리 + + + 로그아웃 + 다시 로그인 할 때까지 계정이 비활성화됩니다. + + + 회원 탈퇴 + 개인 정보 및 설정이 모두 영구적으로 삭제됩니다 + +
+
); }; export default MyPage; + +// TODO: 추후 로그인 로직 완성 후 아래 제거 +const getUserData = async () => { + const response = await GET('/userData'); + return response.data; +}; diff --git a/src/app/mypage/subscribe/page.tsx b/src/app/mypage/subscribe/page.tsx new file mode 100644 index 0000000..914a84d --- /dev/null +++ b/src/app/mypage/subscribe/page.tsx @@ -0,0 +1,38 @@ +import DomainListItem from '@/components/Domain/DomainListItem'; +import AlternateListTap from '@/components/ListTap/AlternateListTap'; +import ListItem from '@/components/ListTap/ListItem'; +import SubscribeButton from '@/components/SubscribeButton'; +import { GET } from '@/network'; + +interface SubscribeDataType { + id: string; + name: string; + type: string; +} + +const SubscribePage = async () => { + const subscribeList: SubscribeDataType[] = await getSubscribeList(); + + return ( +
+
+ {`마이페이지 >`} + 뉴스레터 구독 관리 + InspoMailClub에서 더 이상 읽고 싶지 않은 뉴스레터를 선택하세요 +
+ +
+ {subscribeList.map(subscribe => ( + + ))} +
+
+ ); +}; + +export default SubscribePage; + +const getSubscribeList = async () => { + const response = await GET('/subscribeList'); + return response.data; +}; diff --git a/src/app/onboard/emailList/page.tsx b/src/app/onboard/emailList/page.tsx index 5197503..b81b117 100644 --- a/src/app/onboard/emailList/page.tsx +++ b/src/app/onboard/emailList/page.tsx @@ -1,5 +1,6 @@ import ServiceIcon from '@/assets/icons/ServiceIcon'; import EmailListInteraction from '@/components/PageInteraction/Onboard/EmailListInteraction'; +import { GET } from '@/network'; interface EmailListProps { userName: string; @@ -31,126 +32,11 @@ const EmailList = async ({ userName = '채현' }: EmailListProps) => { export default EmailList; const getIncomingSenders = async () => { - const response = { - senders: [ - { - senderId: 'randomString1', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub1', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString2', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub2', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString3', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub3', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString4', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub4', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString5', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub5', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - ], - count: 5, - }; - + const response = GET('/incomingSenders/1'); return response; }; const getIncomingSenders2 = async () => { - const response = { - senders: [ - { - senderId: 'randomString1', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub11', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString2', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub12', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString3', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub13', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString4', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub14', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString5', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub15', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString6', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub16', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString7', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub17', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString8', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub18', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString9', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub19', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - { - senderId: 'randomString10', - fullAddress: 'inspomailclub@hedwig.com', - localPart: 'inspomailclub20', - domain: 'hedwig.com', - category: 'IT / 테크', - }, - ], - count: 10, - }; - + const response = GET('/incomingSenders/2'); return response; }; diff --git a/src/components/Article/ArticleCard.tsx b/src/components/Article/ArticleCard.tsx index 3f354bb..899f088 100644 --- a/src/components/Article/ArticleCard.tsx +++ b/src/components/Article/ArticleCard.tsx @@ -1,4 +1,4 @@ -import type { ArticleType } from '@/types/article'; +import type { ArticleType } from '@/types'; import Image from 'next/image'; import { formatToMonthDayKorean } from '@/utils/formatDate/formatToMonthDayKorean'; import Link from 'next/link'; diff --git a/src/components/ArticleCard.tsx b/src/components/ArticleCard.tsx deleted file mode 100644 index ddde853..0000000 --- a/src/components/ArticleCard.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import type { ArticleType } from '@/types/article'; -import { Chip } from './Chip'; -import Image from 'next/image'; -import { formatToMonthDayKorean } from '@/utils/formatDate/formatToMonthDayKorean'; - -interface ArticleCardProps extends ArticleType { - isToday?: boolean; -} - -const ArticleCard = ({ title, content, date, thumbnail, isRead, from, isToday = false }: ArticleCardProps) => { - return ( -
-
-
-
- {title} - {content} -
-
- - profile - {from.domain} - - {formatToMonthDayKorean(new Date(date))} -
-
- - {`thumbnail -
-
- ); -}; - -export default ArticleCard; diff --git a/src/components/Domain/DomainListItem.tsx b/src/components/Domain/DomainListItem.tsx new file mode 100644 index 0000000..1f0880f --- /dev/null +++ b/src/components/Domain/DomainListItem.tsx @@ -0,0 +1,33 @@ +import { Chip } from '@/components/Chip'; +import SubscribeButton from '@/components/SubscribeButton'; +import type { DomainType } from '@/types'; +import Image from 'next/image'; + +type DomainDataforListItem = Omit; + +interface DomainListItemProps { + domainData: DomainDataforListItem; + isSubscribed: boolean; +} + +const DomainListItem = ({ domainData, isSubscribed }: DomainListItemProps) => { + return ( +
+ + + {`thumbnail-${domainData.name}`} + {domainData.name} + + + + +
+ ); +}; +export default DomainListItem; diff --git a/src/components/Header/MainPageHeader.tsx b/src/components/Header/MainPageHeader.tsx index a6e069c..39f6b3e 100644 --- a/src/components/Header/MainPageHeader.tsx +++ b/src/components/Header/MainPageHeader.tsx @@ -9,10 +9,10 @@ const MainPageHeader = () => { - + My Page - +
); }; diff --git a/src/components/ListTap/AlternateListTap.tsx b/src/components/ListTap/AlternateListTap.tsx new file mode 100644 index 0000000..73a156d --- /dev/null +++ b/src/components/ListTap/AlternateListTap.tsx @@ -0,0 +1,18 @@ +'use client'; + +import ListItem from '@/components/ListTap/ListItem'; + +interface AlternateListTapProps { + tapName: string; + tapCount: number; +} + +const AlternateListTap = ({ tapName, tapCount }: AlternateListTapProps) => { + return ( +
+ +
+ ); +}; + +export default AlternateListTap; diff --git a/src/components/ListTap/DomainListTap.tsx b/src/components/ListTap/DomainListTap.tsx deleted file mode 100644 index dd86f98..0000000 --- a/src/components/ListTap/DomainListTap.tsx +++ /dev/null @@ -1,13 +0,0 @@ -'use client'; - -import ListItem from '@/components/ListTap/ListItem'; - -const DomainListTap = () => { - return ( -
- -
- ); -}; - -export default DomainListTap; diff --git a/src/components/PageInteraction/Onboard/EmailListInteraction.tsx b/src/components/PageInteraction/Onboard/EmailListInteraction.tsx index 099308f..5b02832 100644 --- a/src/components/PageInteraction/Onboard/EmailListInteraction.tsx +++ b/src/components/PageInteraction/Onboard/EmailListInteraction.tsx @@ -74,7 +74,7 @@ const EmailListInteraction = ({ userName, interest, incomingSenders, techSenders })}
-
+
0} />
diff --git a/src/middleware.ts b/src/middleware.ts new file mode 100644 index 0000000..0d98ece --- /dev/null +++ b/src/middleware.ts @@ -0,0 +1,21 @@ +import type { NextRequest } from 'next/server'; + +export function middleware(request: NextRequest) { + const currentUser = request.cookies.get('userData')?.value; // cookies에 userData값을 가져옴 + console.log('middleware', request.nextUrl.pathname, request.nextUrl.pathname.localeCompare('/')); + if (!currentUser) { + // 필요하다면 로그인 재시도 + + if (request.nextUrl.pathname.localeCompare('/') === 1) { + console.log('User is not logged in'); + // 로그인이 안되어있는 경우는 아무 페이지도 볼 수 없음 + // TODO: 추후 로그인 로직 완성시 아래 주석 해제 + // return Response.redirect(new URL('/', request.url)); + } + } +} +export const config = { + // api, _next/static, _next/image, favicon.ico를 제외한 모든 요청에 대해 middleware를 실행 + // TODO: MSW와 충돌 발생하지 않는지 체크 + matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'], +}; diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 54decd3..24652b3 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -1,15 +1,7 @@ +import type { UserDataType } from '@/types'; import { HttpResponse, http } from 'msw'; export const handlers = [ - http.get('/user', () => { - return HttpResponse.json({ - data: { - name: 'haha', - age: 20, - }, - }); - }), - http.get('/interests', () => { return HttpResponse.json({ data: [ @@ -46,4 +38,248 @@ export const handlers = [ ], }); }), + + http.get('/userData', () => { + return HttpResponse.json({ + data: { + id: 'randomString1', + name: '임채현', + email: 'hedwig@gmail.com', + profile: 'https://picsum.photos/200', + typeList: ['시사', 'IT/테크', '채용'], + } as UserDataType, + }); + }), + + http.get('/domainSubscribeList', () => { + return HttpResponse.json({ + data: [ + { + id: 'randomString1', + name: '뉴닉', + type: '시사', + profile: 'https://picsum.photos/48', + }, + { + id: 'randomString2', + name: '뉴닉', + profile: 'https://picsum.photos/48', + type: 'IT/테크', + }, + { + id: 'randomString3', + name: '뉴닉', + profile: 'https://picsum.photos/48', + type: '디자인', + }, + { + id: 'randomString4', + name: '뉴닉', + profile: 'https://picsum.photos/48', + type: '경제', + }, + { + id: 'randomString5', + name: '뉴닉', + profile: 'https://picsum.photos/48', + type: '트렌드', + }, + { + id: 'randomString6', + name: '뉴닉', + profile: 'https://picsum.photos/48', + type: '채용', + }, + ], + }); + }), + + http.get('/domainRecommendList', () => { + return HttpResponse.json({ + data: [ + { + id: 'randomString111', + name: '요즘IT', + profile: 'https://picsum.photos/48', + type: 'IT/테크', + isSubscribed: false, + }, + { + id: 'randomString112', + name: '요즘IT', + profile: 'https://picsum.photos/48', + type: 'IT/테크', + isSubscribed: false, + }, + { + id: 'randomString113', + name: '요즘IT', + profile: 'https://picsum.photos/48', + type: 'IT/테크', + isSubscribed: false, + }, + ], + }); + }), + + http.get('/articleList', req => { + const { currentTab } = req.params; + return HttpResponse.json({ + data: [ + { + id: 'randomString111', + title: '국가안전보장회의', + url: '/article/1', + type: 'IT/테크', + content: + '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', + date: '2024-07-13', + thumbnail: 'https://picsum.photos/156', + isRead: true, + from: { + domain: 'official@git', + profile: 'https://picsum.photos/36', + }, + }, + { + id: 'randomString112', + title: '국가안전보장회의', + url: '/article/2', + type: 'IT/테크', + content: + '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', + date: '2024-07-13', + thumbnail: 'https://picsum.photos/156', + isRead: false, + from: { + domain: 'official@git', + profile: 'https://picsum.photos/36', + }, + }, + { + id: 'randomString113', + title: '국가안전보장회의', + url: '/article/3', + type: '시사', + content: + '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', + date: '2024-07-13', + thumbnail: 'https://picsum.photos/156', + isRead: false, + from: { + domain: 'official@git', + profile: 'https://picsum.photos/36', + }, + }, + ], + }); + }), + + http.get('/domainData/:id', req => { + const { id } = req.params; + + return HttpResponse.json({ + domainData: { + id: id, + name: '뉴닉', + type: '시사', + domain: 'newneek@gmail.com', + profile: 'https://picsum.photos/800', + description: + '우리가 시간이 없지, 세상이 안 궁금하냐!\n시사, 경제, 커리어 등 지식 정보부터 일상 속 사소한\n영감까지 자유롭게 이야기할 수 있는 플랫폼이에요.', + website: 'https://newneek.co/', + }, + isSubscribed: true, + domainArticleData: [ + { + id: 'randomString111', + title: '국가안전보장회의', + url: '/article/1', + type: 'IT/테크', + content: + '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', + date: '2024-07-13', + thumbnail: 'https://picsum.photos/156', + isRead: true, + from: { + domain: 'official@git', + profile: 'https://picsum.photos/36', + }, + }, + { + id: 'randomString112', + title: '국가안전보장회의', + url: '/article/2', + type: 'IT/테크', + content: + '국가는 평생교육을 진흥하여야 한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 모든 국민은 법률이 정하는 바에 의하여 공무담임권을 가진다. 광물 기타 중요한 지하자원·수산자원·수력과 경제상 이용할 수 있는 자연력은 법률이 정하는 바에 의하여 일정한 기간 그 채취·개발 또는 이용을 특허할 수 있다.', + date: '2024-07-13', + thumbnail: 'https://picsum.photos/156', + isRead: true, + from: { + domain: 'official@git', + profile: 'https://picsum.photos/36', + }, + }, + ], + }); + }), + + http.get('/incomingSenders/:type', req => { + const { type } = req.params; + return HttpResponse.json({ + senders: [ + { + senderId: 'randomString1', + fullAddress: 'inspomailclub@hedwig.com', + localPart: 'inspomailclub1' + type, + domain: 'hedwig.com', + category: 'IT / 테크', + }, + { + senderId: 'randomString2', + fullAddress: 'inspomailclub@hedwig.com', + localPart: 'inspomailclub2' + type, + domain: 'hedwig.com', + category: 'IT / 테크', + }, + { + senderId: 'randomString3', + fullAddress: 'inspomailclub@hedwig.com', + localPart: 'inspomailclub3' + type, + domain: 'hedwig.com', + category: 'IT / 테크', + }, + { + senderId: 'randomString4', + fullAddress: 'inspomailclub@hedwig.com', + localPart: 'inspomailclub4' + type, + domain: 'hedwig.com', + category: 'IT / 테크', + }, + { + senderId: 'randomString5', + fullAddress: 'inspomailclub@hedwig.com', + localPart: 'inspomailclub5' + type, + domain: 'hedwig.com', + category: 'IT / 테크', + }, + { + senderId: 'randomString6', + fullAddress: 'inspomailclub@hedwig.com', + localPart: 'inspomailclub6' + type, + domain: 'hedwig.com', + category: 'IT / 테크', + }, + { + senderId: 'randomString7', + fullAddress: 'inspomailclub@hedwig.com', + localPart: 'inspomailclub7' + type, + domain: 'hedwig.com', + category: 'IT / 테크', + }, + ], + count: 7, + }); + }), ]; diff --git a/src/types/article.ts b/src/types/index.ts similarity index 75% rename from src/types/article.ts rename to src/types/index.ts index 6daaaf4..5ca6f34 100644 --- a/src/types/article.ts +++ b/src/types/index.ts @@ -21,3 +21,11 @@ export interface DomainType { description: string; website: string; } + +export interface UserDataType { + id: string; + name: string; + typeList: string[]; + email: string; + profile: string; +} diff --git a/tailwind.config.js b/tailwind.config.js index 22f186e..f9e6766 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -25,13 +25,15 @@ module.exports = { borderRadius: { smaller: '0.25rem', }, - width: { + spacing: { + 25: '6.25rem', 50: '12.5rem', inputBox: '30.375rem', emailSenderButton: '26.375rem', content: '75rem', articleCard: '49.5rem', - brandCard: '20.25rem', + domainCard: '20.25rem', + max_domainCard: '30.5rem', }, fontSize: { '21px': '1.3125rem',