-
-
- Edit src/App.tsx and save to test HMR
-
+
+
+
+ } />
+
+
+
+ }
+ />
+ } />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
-
- Click on the Vite and React logos to learn more
-
-
- )
+ );
}
-export default App
+export default App;
diff --git a/newlearn/src/assets/alarm-on.svg b/newlearn/src/assets/alarm-on.svg
new file mode 100644
index 0000000..2e0938e
--- /dev/null
+++ b/newlearn/src/assets/alarm-on.svg
@@ -0,0 +1,4 @@
+
diff --git a/newlearn/src/assets/alarm.svg b/newlearn/src/assets/alarm.svg
new file mode 100644
index 0000000..f65915d
--- /dev/null
+++ b/newlearn/src/assets/alarm.svg
@@ -0,0 +1,3 @@
+
diff --git a/newlearn/src/assets/arrow-right.svg b/newlearn/src/assets/arrow-right.svg
new file mode 100644
index 0000000..361081a
--- /dev/null
+++ b/newlearn/src/assets/arrow-right.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/newlearn/src/assets/bookmark-line.svg b/newlearn/src/assets/bookmark-line.svg
new file mode 100644
index 0000000..0bca459
--- /dev/null
+++ b/newlearn/src/assets/bookmark-line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/newlearn/src/assets/home.svg b/newlearn/src/assets/home.svg
new file mode 100644
index 0000000..bb1dcd2
--- /dev/null
+++ b/newlearn/src/assets/home.svg
@@ -0,0 +1,3 @@
+
diff --git a/newlearn/src/assets/image.svg b/newlearn/src/assets/image.svg
new file mode 100644
index 0000000..15c1a73
--- /dev/null
+++ b/newlearn/src/assets/image.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/newlearn/src/assets/links-line.svg b/newlearn/src/assets/links-line.svg
new file mode 100644
index 0000000..b4fd960
--- /dev/null
+++ b/newlearn/src/assets/links-line.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/newlearn/src/assets/profile.svg b/newlearn/src/assets/profile.svg
new file mode 100644
index 0000000..49972a0
--- /dev/null
+++ b/newlearn/src/assets/profile.svg
@@ -0,0 +1,3 @@
+
diff --git a/newlearn/src/assets/scrap.svg b/newlearn/src/assets/scrap.svg
new file mode 100644
index 0000000..dc87dbf
--- /dev/null
+++ b/newlearn/src/assets/scrap.svg
@@ -0,0 +1,4 @@
+
diff --git a/newlearn/src/components/cardnews.tsx b/newlearn/src/components/cardnews.tsx
new file mode 100644
index 0000000..d40020b
--- /dev/null
+++ b/newlearn/src/components/cardnews.tsx
@@ -0,0 +1,46 @@
+import { useNavigate } from 'react-router';
+import Arrow from '../assets/arrow-right.svg?react';
+import Image from '../assets/image.svg?react';
+import { news } from '../types/news';
+import { hoursSince } from '../utils/timeCalc';
+
+const Cardnews = ({
+ thumbnail,
+ title,
+ publishedDate,
+ source,
+ newsId,
+}: news) => {
+ const navigate = useNavigate();
+
+ // 특정 라우터로 이동하는 함수
+ const handleNavigation = (newsId: number) => {
+ navigate(`/details/${newsId}`);
+ };
+ const commonStyles = 'w-32 bg-[#EAF2FF] rounded-lg';
+ return (
+
handleNavigation(newsId)}
+ >
+ {thumbnail ? (
+
+ ) : (
+
+ )}
+
+
+
{title}
+
+
+ {hoursSince(publishedDate)}시간 전, {source}
+
+
+
+
+
+
+ );
+};
+
+export default Cardnews;
diff --git a/newlearn/src/components/carousel/carousel.tsx b/newlearn/src/components/carousel/carousel.tsx
new file mode 100644
index 0000000..4c1559c
--- /dev/null
+++ b/newlearn/src/components/carousel/carousel.tsx
@@ -0,0 +1,39 @@
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import MainNews from './mainNews';
+import { news } from '../../types/news';
+
+interface CarouselProps {
+ items: news[]; // 개별 뉴스 항목 배열
+}
+
+const Carousel: React.FC
= ({ items }) => {
+ const settings = {
+ dots: true,
+ infinite: false,
+ speed: 500,
+ slidesToShow: 1,
+ slidesToScroll: 1,
+ arrows: false, // 기본 화살표 숨김
+ };
+
+ return (
+
+
+ {items.map((item, index) => (
+
+
+
+ ))}
+
+
+
+
{title}
+
+ {time}, {source}
+
+
+
+ {name}
+
+ );
+};
+
+export default CategoryItem;
diff --git a/newlearn/src/components/categories/categoryLayout.tsx b/newlearn/src/components/categories/categoryLayout.tsx
new file mode 100644
index 0000000..edc867a
--- /dev/null
+++ b/newlearn/src/components/categories/categoryLayout.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import CategoryItem from './categoryItem'; // categoryItem 컴포넌트
+import { CATEGORY_NAMES } from '../../constants/category.ts'; // 카테고리 상수 가져오기
+
+type Layout = {
+ layout?: string; // 'profile' 또는 다른 화면 식별용
+};
+
+const CategoryLayout: React.FC = ({ layout }) => {
+ const [selectedCategories, setSelectedCategories] = useState(
+ layout === 'profile' ? [] : [-1], // 기본값: 프로필은 다중 선택, 홈은 단일 선택 (-1은 선택되지 않은 상태)
+ );
+
+ const handleCategoryClick = (id: number) => {
+ if (layout === 'profile') {
+ // 다중 선택 로직
+ setSelectedCategories((prev) =>
+ prev.includes(id)
+ ? prev.filter((categoryId) => categoryId !== id)
+ : [...prev, id],
+ );
+ } else {
+ // 단일 선택 로직
+ setSelectedCategories([id]);
+ }
+ };
+
+ return (
+
+ {Object.entries(CATEGORY_NAMES).map(([id, name]) => (
+ handleCategoryClick(Number(id))}
+ />
+ ))}
+
+ );
+};
+
+export default CategoryLayout;
diff --git a/newlearn/src/components/kakaologinbtn.tsx b/newlearn/src/components/kakaologinbtn.tsx
new file mode 100644
index 0000000..c1c8874
--- /dev/null
+++ b/newlearn/src/components/kakaologinbtn.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const KakaoLoginButton: React.FC = () => {
+ const K_REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
+ const K_REDIRECT_URI = import.meta.env.VITE_REDIRECT_URL;
+ const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${K_REST_API_KEY}&redirect_uri=${K_REDIRECT_URI}&response_type=code`;
+
+ const handleLogin = () => {
+ console.log(kakaoURL);
+ window.location.href = kakaoURL;
+ };
+
+ return (
+ 
+ );
+};
+
+export default KakaoLoginButton;
diff --git a/newlearn/src/components/navigationbar.tsx b/newlearn/src/components/navigationbar.tsx
new file mode 100644
index 0000000..4ae28b1
--- /dev/null
+++ b/newlearn/src/components/navigationbar.tsx
@@ -0,0 +1,37 @@
+import { Link, useLocation } from 'react-router';
+import Home from '../assets/home.svg?react';
+import Profile from '../assets/profile.svg?react';
+import Scrap from '../assets/scrap.svg?react';
+
+const NavigationBar = () => {
+ const location = useLocation();
+
+ const navItems = [
+ { path: '/scrap', component: Scrap, label: '스크랩' },
+ { path: '/', component: Home, label: '홈' },
+ { path: '/profile', component: Profile, label: '프로필' },
+ ];
+
+ return (
+
+ {navItems.map(({ path, component: Icon, label }) => (
+
+
+
+ {label}
+
+
+ ))}
+
+ );
+};
+
+export default NavigationBar;
diff --git a/newlearn/src/constants/category.ts b/newlearn/src/constants/category.ts
new file mode 100644
index 0000000..b443a3c
--- /dev/null
+++ b/newlearn/src/constants/category.ts
@@ -0,0 +1,22 @@
+export const CATEGORIES = {
+ POLITICS: 1, // 정치
+ ECONOMY: 2, // 경제
+ SOCIETY: 3, // 사회
+ CULTURE: 4, // 생활/문화
+ WORLD: 5, // 세계
+ TECHNOLOGY: 6, // 기술/IT
+ ENTERTAINMENT: 7, // 연예
+ SPORTS: 8, // 스포츠
+} as const;
+
+// 역으로 숫자 값을 통해 카테고리 이름을 얻고 싶을 때
+export const CATEGORY_NAMES: { [key: number]: string } = {
+ 1: '정치',
+ 2: '경제',
+ 3: '사회',
+ 4: '생활/문화',
+ 5: '세계',
+ 6: '기술/IT',
+ 7: '연예',
+ 8: '스포츠',
+};
diff --git a/newlearn/src/hooks/api.ts b/newlearn/src/hooks/api.ts
new file mode 100644
index 0000000..c317c2c
--- /dev/null
+++ b/newlearn/src/hooks/api.ts
@@ -0,0 +1,50 @@
+import { useState, useCallback } from 'react';
+
+interface ApiState {
+ data: T | null;
+ loading: boolean;
+ error: string | null;
+}
+
+type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
+
+const useApi = () => {
+ const [state, setState] = useState>({
+ data: null,
+ loading: false,
+ error: null,
+ });
+
+ const request = useCallback(
+ async (
+ url: string,
+ method: HttpMethod = 'GET',
+ body?: any,
+ headers?: HeadersInit,
+ ) => {
+ setState({ data: null, loading: true, error: null });
+ try {
+ const response = await fetch(url, {
+ method,
+ body: body ? JSON.stringify(body) : null,
+ headers: {
+ 'Content-Type': 'application/json',
+ ...headers,
+ },
+ });
+ if (!response.ok) {
+ throw new Error(`Error: ${response.statusText}`);
+ }
+ const data: T = await response.json();
+ setState({ data, loading: false, error: null });
+ } catch (error: any) {
+ setState({ data: null, loading: false, error: error.message });
+ }
+ },
+ [],
+ );
+
+ return { ...state, request };
+};
+
+export default useApi;
diff --git a/newlearn/src/hooks/login.ts b/newlearn/src/hooks/login.ts
new file mode 100644
index 0000000..d32bb49
--- /dev/null
+++ b/newlearn/src/hooks/login.ts
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+const useKakaoInit = () => {
+ useEffect(() => {
+ const kakaoJsKey = import.meta.env.VITE_KAKAO_JS_KEY;
+ if (!kakaoJsKey) {
+ console.error('Kakao JavaScript Key is missing.');
+ return;
+ }
+
+ if (!window.Kakao) {
+ console.error('Kakao SDK not loaded.');
+ return;
+ }
+
+ if (!window.Kakao.isInitialized()) {
+ window.Kakao.init(kakaoJsKey);
+ console.log('Kakao SDK initialized');
+ }
+ }, []);
+};
+
+export default useKakaoInit;
diff --git a/newlearn/src/index.css b/newlearn/src/index.css
index 6119ad9..7af71b1 100644
--- a/newlearn/src/index.css
+++ b/newlearn/src/index.css
@@ -1,68 +1,13 @@
-:root {
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+ .hide-scrollbar {
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
}
- button {
- background-color: #f9f9f9;
+ .hide-scrollbar::-webkit-scrollbar {
+ display: none; /* Chrome, Safari, Opera */
}
}
diff --git a/newlearn/src/layout/basicLayout.tsx b/newlearn/src/layout/basicLayout.tsx
new file mode 100644
index 0000000..d4f2570
--- /dev/null
+++ b/newlearn/src/layout/basicLayout.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import NavigationBar from '../components/navigationbar';
+
+type LayoutProps = {
+ headerComponent: ReactNode; // Header 컴포넌트
+ children: ReactNode; // 여러 개의 Main 컴포넌트를 포함할 수 있음
+};
+
+const BasicLayout: React.FC = ({ headerComponent, children }) => {
+ return (
+
+
+ {headerComponent}
+ {children}
+
+
+
Loading...
;
+ }
+
+ if (error) {
+ return Error: {error}
;
+ }
+
+ // articles 데이터 분리
+ const articles: news[] = data?.data.articles || [];
+ const carouselItems = articles.slice(0, 3); // 첫 3개 아이템
+ const cardNewsItems = articles.slice(3); // 나머지 아이템
+
+ return (
+ }>
+ {/* Carousel에 첫 3개 데이터 전달 */}
+
+
+
+ {cardNewsItems.map((item, index) => (
+
+ ))}
+
+
+ );
+};
+
+export default HomePage;
diff --git a/newlearn/src/pages/LoginPage/index.tsx b/newlearn/src/pages/LoginPage/index.tsx
new file mode 100644
index 0000000..7ea1efe
--- /dev/null
+++ b/newlearn/src/pages/LoginPage/index.tsx
@@ -0,0 +1,14 @@
+import KakaoLoginButton from '../../components/kakaologinbtn';
+
+const LoginPage = () => {
+ return (
+
+
+
+
+
+
+
+ {title}
+
+
+ {hoursSince(publishedDate)}시간 전, {source}
+
+
+
+
+
+
+
+
+
+
+
+
{content}
+
Loading...
;
+ }
+
+ if (error) {
+ return Error: {error}
;
+ }
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default NewsDetailPage;
diff --git a/newlearn/src/pages/OauthPage/index.tsx b/newlearn/src/pages/OauthPage/index.tsx
new file mode 100644
index 0000000..51e9c9c
--- /dev/null
+++ b/newlearn/src/pages/OauthPage/index.tsx
@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { Navigate, useLocation, useSearchParams } from 'react-router';
+
+interface ProtectedRouteProps {
+ children: React.ReactNode;
+}
+
+const ProtectedRoute: React.FC = ({ children }) => {
+ const location = useLocation();
+ const [searchParams] = useSearchParams();
+ const code = searchParams.get('code');
+ const [isAuthenticated, setIsAuthenticated] = useState(null); // 인증 상태
+ // const [userData, setUserData] = useState(null); // 백엔드에서 받은 사용자 데이터
+
+ useEffect(() => {
+ const queryParams = new URLSearchParams(location.search);
+ const code = queryParams.get('code'); // URL에서 카카오 인증 코드 가져오기
+ if (code) {
+ localStorage.setItem('authToken', code); // 로컬 스토리지에 'code' 저장
+ console.log('Code saved to localStorage:', code);
+ setIsAuthenticated(true);
+ } else {
+ setIsAuthenticated(false);
+ }
+ // const fetchAuthToken = async () => {
+ // if (code) {
+ // try {
+ // // 인증 코드를 백엔드로 보내기
+ // const response = await fetch('http://localhost:3000/auth/kakao', {
+ // method: 'POST',
+ // headers: {
+ // 'Content-Type': 'application/json',
+ // },
+ // body: JSON.stringify({ code }),
+ // });
+
+ // if (response.ok) {
+ // const data = await response.json();
+ // localStorage.setItem('authToken', data.token); // 받은 토큰 저장
+ // setUserData(data.user); // 사용자 데이터 저장
+ // setIsAuthenticated(true); // 인증 상태 업데이트
+ // } else {
+ // console.error('Failed to authenticate');
+ // setIsAuthenticated(false);
+ // }
+ // } catch (error) {
+ // console.error('Error during authentication:', error);
+ // setIsAuthenticated(false);
+ // }
+ // } else {
+ // // 인증 코드가 없으면 로그인 페이지로 이동
+ // setIsAuthenticated(false);
+ // }
+ // };
+
+ // fetchAuthToken();
+ }, [location.search]);
+
+ if (isAuthenticated === null) {
+ return Loading...
; // 인증 상태 확인 중
+ }
+
+ if (!isAuthenticated) {
+ return ; // 인증되지 않았으면 로그인 페이지로 이동
+ }
+
+ // 인증이 완료되었으면 자식 컴포넌트 렌더링 (userData를 Context로 전달 가능)
+ return <>{children};
+};
+
+export default ProtectedRoute;
diff --git a/newlearn/src/pages/ProfilePage/CardNews.tsx b/newlearn/src/pages/ProfilePage/CardNews.tsx
new file mode 100644
index 0000000..5f43108
--- /dev/null
+++ b/newlearn/src/pages/ProfilePage/CardNews.tsx
@@ -0,0 +1,27 @@
+import Cardnews from '../../components/cardnews';
+import { NewsData } from '../../types/news';
+
+const CardNews: React.FC = ({ newsList }) => {
+ return (
+
+
+ 최근에 읽은 뉴스{' '}
+ * 최신 20개만 저장됩니다.
+
+
+ {newsList.map((news) => (
+
+ ))}
+
+
+
+ 나의 카테고리
+
+
+
+ );
+};
+
+export default Category;
diff --git a/newlearn/src/pages/ProfilePage/DonutChart.tsx b/newlearn/src/pages/ProfilePage/DonutChart.tsx
new file mode 100644
index 0000000..b3b535c
--- /dev/null
+++ b/newlearn/src/pages/ProfilePage/DonutChart.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { CATEGORY_NAMES } from '../../constants/category';
+
+type ChartData = {
+ categoryId: number;
+ percentage: number;
+};
+
+type ChartProps = {
+ data: ChartData[];
+ colors?: string[];
+ size?: number; // 차트 크기 (DonutChart 전용)
+};
+
+const DEFAULT_COLORS = ['#f9c74f', '#90be6d', '#f94144', '#577590'];
+
+const DonutChart: React.FC = ({
+ data,
+ size = 100,
+ colors = DEFAULT_COLORS,
+}) => {
+ let cumulativePercentage = 0;
+
+ const getCoordinatesForPercentage = (percentage: number) => {
+ const x = Math.cos(2 * Math.PI * percentage);
+ const y = Math.sin(2 * Math.PI * percentage);
+ return [x, y];
+ };
+
+ return (
+
+ );
+};
+
+const Ranking: React.FC = ({ data, colors = DEFAULT_COLORS }) => {
+ return (
+
+ {data.map((category, index) => (
+
+
+ {index + 1}
+
+
+ {CATEGORY_NAMES[category.categoryId]}: {category.percentage * 100}%
+
+
+ ))}
+
+
+
+
+ );
+};
+
+export default Chart;
diff --git a/newlearn/src/pages/ProfilePage/Header.tsx b/newlearn/src/pages/ProfilePage/Header.tsx
new file mode 100644
index 0000000..d4f5674
--- /dev/null
+++ b/newlearn/src/pages/ProfilePage/Header.tsx
@@ -0,0 +1,10 @@
+const Header = () => {
+ return (
+
+ 육종호님은 지금까지
+ 총 10개의 기사를 읽었어요!
+
+ );
+};
+
+export default Header;
diff --git a/newlearn/src/pages/ProfilePage/index.tsx b/newlearn/src/pages/ProfilePage/index.tsx
new file mode 100644
index 0000000..47bf4a1
--- /dev/null
+++ b/newlearn/src/pages/ProfilePage/index.tsx
@@ -0,0 +1,24 @@
+import BasicLayout from '../../layout/basicLayout';
+import CardNews from './CardNews';
+import Category from './Category';
+import Chart from './DonutChart';
+import Header from './Header';
+import data from '../../mockup/latestNewsList.json';
+
+const ProfilPage = () => {
+ const chartData = [
+ { categoryId: 1, percentage: 0.6 },
+ { categoryId: 2, percentage: 0.25 },
+ { categoryId: 3, percentage: 0.15 },
+ ];
+
+ return (
+ }>
+
+
+
+
+ );
+};
+
+export default ProfilPage;
diff --git a/newlearn/src/pages/ScrapPage/Header.tsx b/newlearn/src/pages/ScrapPage/Header.tsx
new file mode 100644
index 0000000..bc4aa32
--- /dev/null
+++ b/newlearn/src/pages/ScrapPage/Header.tsx
@@ -0,0 +1,11 @@
+const Header = () => {
+ return (
+
+ );
+};
+
+export default Header;
diff --git a/newlearn/src/pages/ScrapPage/ScrapNews.tsx b/newlearn/src/pages/ScrapPage/ScrapNews.tsx
new file mode 100644
index 0000000..8ba668b
--- /dev/null
+++ b/newlearn/src/pages/ScrapPage/ScrapNews.tsx
@@ -0,0 +1,20 @@
+import Cardnews from '../../components/cardnews';
+import { NewsData } from '../../types/news';
+
+const ScrapNews: React.FC = ({ newsList }) => {
+ return (
+
+ {newsList.map((news) => (
+
+ ))}
+
+ );
+};
+
+export default ScrapNews;
diff --git a/newlearn/src/pages/ScrapPage/index.tsx b/newlearn/src/pages/ScrapPage/index.tsx
new file mode 100644
index 0000000..03b9324
--- /dev/null
+++ b/newlearn/src/pages/ScrapPage/index.tsx
@@ -0,0 +1,14 @@
+import BasicLayout from '../../layout/basicLayout';
+import Header from './Header';
+import ScrapNews from './ScrapNews';
+import data from '../../mockup/latestNewsList.json';
+
+const ScrapPage = () => {
+ return (
+ }>
+
+
+ );
+};
+
+export default ScrapPage;
diff --git a/newlearn/src/types/authobj.ts b/newlearn/src/types/authobj.ts
new file mode 100644
index 0000000..1994495
--- /dev/null
+++ b/newlearn/src/types/authobj.ts
@@ -0,0 +1,8 @@
+interface AuthResponse {
+ access_token: string;
+ expires_in: number;
+ refresh_token: string;
+ refresh_token_expires_in: number;
+ scope: string;
+ token_type: string;
+}
diff --git a/newlearn/src/types/kakao.d.ts b/newlearn/src/types/kakao.d.ts
new file mode 100644
index 0000000..7e12e69
--- /dev/null
+++ b/newlearn/src/types/kakao.d.ts
@@ -0,0 +1,7 @@
+declare global {
+ interface Window {
+ Kakao: any;
+ }
+}
+
+export {};
diff --git a/newlearn/src/types/news.ts b/newlearn/src/types/news.ts
new file mode 100644
index 0000000..2039a98
--- /dev/null
+++ b/newlearn/src/types/news.ts
@@ -0,0 +1,23 @@
+export type news = {
+ newsId: number;
+ thumbnail: string;
+ title: string;
+ publishedDate: string;
+ source: string;
+};
+
+export type NewsData = {
+ newsList: news[];
+};
+
+export type NewsDetail = {
+ [K in keyof news]: news[K]; // 기존 타입 복사
+} & {
+ content: string; // 새로운 프로퍼티 추가
+};
+
+export interface ApiResponse {
+ status: string;
+ message: string;
+ data: T;
+}
diff --git a/newlearn/src/utils/dateUtil.ts b/newlearn/src/utils/dateUtil.ts
new file mode 100644
index 0000000..61a688d
--- /dev/null
+++ b/newlearn/src/utils/dateUtil.ts
@@ -0,0 +1,40 @@
+export const getTodayDate = (): {
+ month: string;
+ day: number;
+ weekday: string;
+} => {
+ const today = new Date();
+
+ // 월 이름 배열 (한국어)
+ const months = [
+ '1월',
+ '2월',
+ '3월',
+ '4월',
+ '5월',
+ '6월',
+ '7월',
+ '8월',
+ '9월',
+ '10월',
+ '11월',
+ '12월',
+ ];
+
+ // 요일 이름 배열 (한국어)
+ const weekdays = [
+ '일요일',
+ '월요일',
+ '화요일',
+ '수요일',
+ '목요일',
+ '금요일',
+ '토요일',
+ ];
+
+ return {
+ month: months[today.getMonth()], // 월 이름
+ day: today.getDate(), // 날짜
+ weekday: weekdays[today.getDay()], // 요일 이름
+ };
+};
diff --git a/newlearn/src/utils/timeCalc.ts b/newlearn/src/utils/timeCalc.ts
new file mode 100644
index 0000000..60f6b52
--- /dev/null
+++ b/newlearn/src/utils/timeCalc.ts
@@ -0,0 +1,15 @@
+export const hoursSince = (isoDate: string): number => {
+ // 지정된 시간
+ const startDate = new Date(isoDate);
+
+ // 현재 시간
+ const now = new Date();
+
+ // 두 시간의 차이 (밀리초)
+ const diffMilliseconds = now.getTime() - startDate.getTime();
+
+ // 시간으로 변환
+ const diffHours = diffMilliseconds / (1000 * 60 * 60);
+
+ return Math.floor(diffHours); // 소수점 버림
+};
diff --git a/newlearn/src/vite-env.d.ts b/newlearn/src/vite-env.d.ts
index ec878b7..f40765c 100644
--- a/newlearn/src/vite-env.d.ts
+++ b/newlearn/src/vite-env.d.ts
@@ -1,2 +1,3 @@
///
///
+///
diff --git a/newlearn/tailwind.config.js b/newlearn/tailwind.config.js
new file mode 100644
index 0000000..2412096
--- /dev/null
+++ b/newlearn/tailwind.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+ content: [
+ './index.html', // Vite의 루트 HTML 파일
+ './src/**/*.{js,ts,jsx,tsx}', // 모든 React 컴포넌트 파일
+ ],
+ theme: {
+ extend: {
+ backgroundImage: {
+ 'custom-gradient':
+ 'linear-gradient(111.82deg, #502EE5 0%, #95D9FD 131.35%)',
+ },
+ }, // 커스텀 테마 추가 시 사용
+ },
+ plugins: [], // 필요한 Tailwind 플러그인 추가 가능
+};
diff --git a/newlearn/tsconfig.json b/newlearn/tsconfig.json
index a7fc6fb..74d7195 100644
--- a/newlearn/tsconfig.json
+++ b/newlearn/tsconfig.json
@@ -5,6 +5,7 @@
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
+ "types": ["vite-plugin-svgr/client"],
/* Bundler mode */
"moduleResolution": "bundler",
diff --git a/newlearn/type.d.ts b/newlearn/type.d.ts
new file mode 100644
index 0000000..e69de29
diff --git a/newlearn/vite.config.ts b/newlearn/vite.config.ts
index c8c123f..1e25e1b 100644
--- a/newlearn/vite.config.ts
+++ b/newlearn/vite.config.ts
@@ -1,48 +1,56 @@
-import { VitePWA } from "vite-plugin-pwa";
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
+import { VitePWA } from 'vite-plugin-pwa';
+import { defineConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+import react from '@vitejs/plugin-react';
+import tailwindcss from 'tailwindcss';
// https://vitejs.dev/config/
export default defineConfig({
- base: "/",
- plugins: [
- react(),
- VitePWA({
- registerType: "autoUpdate",
- injectRegister: false,
+ base: '/',
+ plugins: [
+ react(),
+ svgr(),
+ VitePWA({
+ registerType: 'autoUpdate',
+ injectRegister: false,
- manifest: {
- name: "newlearn",
- short_name: "newlearn",
- description: "어려운 뉴스 기사를 쉽고 빠르게",
- theme_color: "#ffffff",
- start_url: "/",
- icons: [
- {
- src: "icons/apple-touch-icon-60x60.png",
- sizes: "60x60",
- type: "image/png",
- },
- {
- src: "icons/apple-touch-icon-152x152.png",
- sizes: "192x192",
- type: "image/png",
- },
- ],
- },
+ manifest: {
+ name: 'newlearn',
+ short_name: 'newlearn',
+ description: '어려운 뉴스 기사를 쉽고 빠르게',
+ theme_color: '#ffffff',
+ start_url: '/',
+ icons: [
+ {
+ src: 'icons/apple-touch-icon-60x60.png',
+ sizes: '60x60',
+ type: 'image/png',
+ },
+ {
+ src: 'icons/apple-touch-icon-152x152.png',
+ sizes: '192x192',
+ type: 'image/png',
+ },
+ ],
+ },
- workbox: {
- globPatterns: ["**/*.{js,css,html,svg,png,ico,json}"],
- cleanupOutdatedCaches: true,
- clientsClaim: true,
- },
+ workbox: {
+ globPatterns: ['**/*.{js,css,html,svg,png,ico,json}'],
+ cleanupOutdatedCaches: true,
+ clientsClaim: true,
+ },
- devOptions: {
- enabled: false,
- navigateFallback: "index.html",
- suppressWarnings: true,
- type: "module",
- },
- }),
- ],
+ devOptions: {
+ enabled: true,
+ navigateFallback: 'index.html',
+ suppressWarnings: true,
+ type: 'module',
+ },
+ }),
+ ],
+ css: {
+ postcss: {
+ plugins: [tailwindcss()],
+ },
+ },
});
diff --git a/newlearn/vite.config.ts.timestamp-1736522539273-3f647e2259e4d.mjs b/newlearn/vite.config.ts.timestamp-1736522539273-3f647e2259e4d.mjs
new file mode 100644
index 0000000..d2a2702
--- /dev/null
+++ b/newlearn/vite.config.ts.timestamp-1736522539273-3f647e2259e4d.mjs
@@ -0,0 +1,56 @@
+// vite.config.ts
+import { VitePWA } from "file:///C:/Users/MYCOM/Desktop/NewLearn/newlearn/node_modules/vite-plugin-pwa/dist/index.js";
+import { defineConfig } from "file:///C:/Users/MYCOM/Desktop/NewLearn/newlearn/node_modules/vite/dist/node/index.js";
+import svgr from "file:///C:/Users/MYCOM/Desktop/NewLearn/newlearn/node_modules/vite-plugin-svgr/dist/index.js";
+import react from "file:///C:/Users/MYCOM/Desktop/NewLearn/newlearn/node_modules/@vitejs/plugin-react/dist/index.mjs";
+import tailwindcss from "file:///C:/Users/MYCOM/Desktop/NewLearn/newlearn/node_modules/tailwindcss/lib/index.js";
+var vite_config_default = defineConfig({
+ base: "/",
+ plugins: [
+ react(),
+ svgr(),
+ VitePWA({
+ registerType: "autoUpdate",
+ injectRegister: false,
+ manifest: {
+ name: "newlearn",
+ short_name: "newlearn",
+ description: "\uC5B4\uB824\uC6B4 \uB274\uC2A4 \uAE30\uC0AC\uB97C \uC27D\uACE0 \uBE60\uB974\uAC8C",
+ theme_color: "#ffffff",
+ start_url: "/",
+ icons: [
+ {
+ src: "icons/apple-touch-icon-60x60.png",
+ sizes: "60x60",
+ type: "image/png"
+ },
+ {
+ src: "icons/apple-touch-icon-152x152.png",
+ sizes: "192x192",
+ type: "image/png"
+ }
+ ]
+ },
+ workbox: {
+ globPatterns: ["**/*.{js,css,html,svg,png,ico,json}"],
+ cleanupOutdatedCaches: true,
+ clientsClaim: true
+ },
+ devOptions: {
+ enabled: true,
+ navigateFallback: "index.html",
+ suppressWarnings: true,
+ type: "module"
+ }
+ })
+ ],
+ css: {
+ postcss: {
+ plugins: [tailwindcss()]
+ }
+ }
+});
+export {
+ vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxNWUNPTVxcXFxEZXNrdG9wXFxcXE5ld0xlYXJuXFxcXG5ld2xlYXJuXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFxNWUNPTVxcXFxEZXNrdG9wXFxcXE5ld0xlYXJuXFxcXG5ld2xlYXJuXFxcXHZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9DOi9Vc2Vycy9NWUNPTS9EZXNrdG9wL05ld0xlYXJuL25ld2xlYXJuL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgVml0ZVBXQSB9IGZyb20gJ3ZpdGUtcGx1Z2luLXB3YSc7XHJcbmltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gJ3ZpdGUnO1xyXG5pbXBvcnQgc3ZnciBmcm9tICd2aXRlLXBsdWdpbi1zdmdyJztcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0JztcclxuaW1wb3J0IHRhaWx3aW5kY3NzIGZyb20gJ3RhaWx3aW5kY3NzJztcclxuXHJcbi8vIGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvXHJcbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XHJcbiAgYmFzZTogJy8nLFxyXG4gIHBsdWdpbnM6IFtcclxuICAgIHJlYWN0KCksXHJcbiAgICBzdmdyKCksXHJcbiAgICBWaXRlUFdBKHtcclxuICAgICAgcmVnaXN0ZXJUeXBlOiAnYXV0b1VwZGF0ZScsXHJcbiAgICAgIGluamVjdFJlZ2lzdGVyOiBmYWxzZSxcclxuXHJcbiAgICAgIG1hbmlmZXN0OiB7XHJcbiAgICAgICAgbmFtZTogJ25ld2xlYXJuJyxcclxuICAgICAgICBzaG9ydF9uYW1lOiAnbmV3bGVhcm4nLFxyXG4gICAgICAgIGRlc2NyaXB0aW9uOiAnXHVDNUI0XHVCODI0XHVDNkI0IFx1QjI3NFx1QzJBNCBcdUFFMzBcdUMwQUNcdUI5N0MgXHVDMjdEXHVBQ0UwIFx1QkU2MFx1Qjk3NFx1QUM4QycsXHJcbiAgICAgICAgdGhlbWVfY29sb3I6ICcjZmZmZmZmJyxcclxuICAgICAgICBzdGFydF91cmw6ICcvJyxcclxuICAgICAgICBpY29uczogW1xyXG4gICAgICAgICAge1xyXG4gICAgICAgICAgICBzcmM6ICdpY29ucy9hcHBsZS10b3VjaC1pY29uLTYweDYwLnBuZycsXHJcbiAgICAgICAgICAgIHNpemVzOiAnNjB4NjAnLFxyXG4gICAgICAgICAgICB0eXBlOiAnaW1hZ2UvcG5nJyxcclxuICAgICAgICAgIH0sXHJcbiAgICAgICAgICB7XHJcbiAgICAgICAgICAgIHNyYzogJ2ljb25zL2FwcGxlLXRvdWNoLWljb24tMTUyeDE1Mi5wbmcnLFxyXG4gICAgICAgICAgICBzaXplczogJzE5MngxOTInLFxyXG4gICAgICAgICAgICB0eXBlOiAnaW1hZ2UvcG5nJyxcclxuICAgICAgICAgIH0sXHJcbiAgICAgICAgXSxcclxuICAgICAgfSxcclxuXHJcbiAgICAgIHdvcmtib3g6IHtcclxuICAgICAgICBnbG9iUGF0dGVybnM6IFsnKiovKi57anMsY3NzLGh0bWwsc3ZnLHBuZyxpY28sanNvbn0nXSxcclxuICAgICAgICBjbGVhbnVwT3V0ZGF0ZWRDYWNoZXM6IHRydWUsXHJcbiAgICAgICAgY2xpZW50c0NsYWltOiB0cnVlLFxyXG4gICAgICB9LFxyXG5cclxuICAgICAgZGV2T3B0aW9uczoge1xyXG4gICAgICAgIGVuYWJsZWQ6IHRydWUsXHJcbiAgICAgICAgbmF2aWdhdGVGYWxsYmFjazogJ2luZGV4Lmh0bWwnLFxyXG4gICAgICAgIHN1cHByZXNzV2FybmluZ3M6IHRydWUsXHJcbiAgICAgICAgdHlwZTogJ21vZHVsZScsXHJcbiAgICAgIH0sXHJcbiAgICB9KSxcclxuICBdLFxyXG4gIGNzczoge1xyXG4gICAgcG9zdGNzczoge1xyXG4gICAgICBwbHVnaW5zOiBbdGFpbHdpbmRjc3MoKV0sXHJcbiAgICB9LFxyXG4gIH0sXHJcbn0pO1xyXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXNULFNBQVMsZUFBZTtBQUM5VSxTQUFTLG9CQUFvQjtBQUM3QixPQUFPLFVBQVU7QUFDakIsT0FBTyxXQUFXO0FBQ2xCLE9BQU8saUJBQWlCO0FBR3hCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLE1BQU07QUFBQSxFQUNOLFNBQVM7QUFBQSxJQUNQLE1BQU07QUFBQSxJQUNOLEtBQUs7QUFBQSxJQUNMLFFBQVE7QUFBQSxNQUNOLGNBQWM7QUFBQSxNQUNkLGdCQUFnQjtBQUFBLE1BRWhCLFVBQVU7QUFBQSxRQUNSLE1BQU07QUFBQSxRQUNOLFlBQVk7QUFBQSxRQUNaLGFBQWE7QUFBQSxRQUNiLGFBQWE7QUFBQSxRQUNiLFdBQVc7QUFBQSxRQUNYLE9BQU87QUFBQSxVQUNMO0FBQUEsWUFDRSxLQUFLO0FBQUEsWUFDTCxPQUFPO0FBQUEsWUFDUCxNQUFNO0FBQUEsVUFDUjtBQUFBLFVBQ0E7QUFBQSxZQUNFLEtBQUs7QUFBQSxZQUNMLE9BQU87QUFBQSxZQUNQLE1BQU07QUFBQSxVQUNSO0FBQUEsUUFDRjtBQUFBLE1BQ0Y7QUFBQSxNQUVBLFNBQVM7QUFBQSxRQUNQLGNBQWMsQ0FBQyxxQ0FBcUM7QUFBQSxRQUNwRCx1QkFBdUI7QUFBQSxRQUN2QixjQUFjO0FBQUEsTUFDaEI7QUFBQSxNQUVBLFlBQVk7QUFBQSxRQUNWLFNBQVM7QUFBQSxRQUNULGtCQUFrQjtBQUFBLFFBQ2xCLGtCQUFrQjtBQUFBLFFBQ2xCLE1BQU07QUFBQSxNQUNSO0FBQUEsSUFDRixDQUFDO0FBQUEsRUFDSDtBQUFBLEVBQ0EsS0FBSztBQUFBLElBQ0gsU0FBUztBQUFBLE1BQ1AsU0FBUyxDQUFDLFlBQVksQ0FBQztBQUFBLElBQ3pCO0FBQUEsRUFDRjtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==