feat: News 페이지 구현

* feat: 공지 기본이미지(임시용)추가

* feat: News 페이지 구현

* feat; 배너이미지 고정정

* feat: NewsInfo페이지 구현

* feat: news 상세페이지 이동 추가

Author: limtjdghks

src/App.tsx

@@ -5,6 +5,8 @@ import Main from './pages/Main'
 import Login from './pages/Login'
 import RecruitMeeting from './pages/RecruitMeeting'
 import RecruitSubmitMeeting from './pages/RecruitSubmitMeeting'
+import News from './pages/News'
+import NewsInfo from './pages/NewsInfo'
 
 function App() {
 	return (
@@ -15,6 +17,8 @@ function App() {
           <Route path='/login' element={<Login />} />
 					<Route path='/recruit-meeting' element={<RecruitMeeting />} />
 					<Route path='/recruit-meeting/submit' element={<RecruitSubmitMeeting />} />
+					<Route path='/news' element={<News />} />
+					<Route path='/news/:no' element={<NewsInfo />} />
 				</Routes>
 			</Router>
 		</div>

src/assets/images/newsBannerExam.svg

@@ -0,0 +1,35 @@
+import React, { JSX, useEffect, useState } from 'react'
+import defaultBanner from '../../assets/images/newsBannerExam.svg'
+
+interface news {
+	id: number
+	title: string
+	banner: string | null
+	date: string
+	onClick: () => void
+}
+
+/** 공지사항 컴포넌트 */
+const NewsContent = ({ title, banner, date, onClick }: news): JSX.Element => {
+	const [src, setSrc] = useState<string>(defaultBanner) // 기본 배너 이미지
+
+	// 배너 이미지 있을 경우 src 변경
+	useEffect(() => {
+		if (banner) {
+			setSrc(banner)
+		}
+	}, [banner])
+
+	return (
+		<div className='mb-5 w-[90%] cursor-pointer' onClick={onClick}>
+			{/* 배너 이미지 */}
+			<img className='w-[350px] h-[140px]' src={src} />
+			{/* 제목 */}
+			<p className='font-pretendardBold text-white text-[20px]'>{title}</p>
+			{/* 날짜 */}
+			<p className='font-pretendardRegular text-[12px] text-subGrey2'>{date}</p>
+		</div>
+	)
+}
+
+export default NewsContent

src/components/UI/NewsContent.tsx

@@ -0,0 +1,17 @@
+import React, { JSX } from 'react'
+
+interface notice {
+	text: string
+	date: Date
+}
+
+const NewsNotice = ({ text, date }: notice): JSX.Element => {
+	return (
+		<div className='w-[90%] mb-5'>
+			<div className='text-white font-pretendardRegular whitespace-pre-wrap' dangerouslySetInnerHTML={{ __html: text }} />
+			<p className='text-subGrey2 font-pretendardRegular mt-5'>작성일 : {date.toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit' })}</p>
+		</div>
+	)
+}
+
+export default NewsNotice

src/components/UI/NewsNotice.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import MobileLayout from '../components/layout/MobileLayout'
+import { Header } from '../components/UI/Header'
+import dasomLogo from '../assets/images/dasomLogo.svg'
+import NewsContent from '../components/UI/NewsContent'
+import { useNavigate } from 'react-router-dom'
+
+interface news {
+	id: number // 고유번호
+	title: string // 제목
+	banner: string | null // 배너 이미지
+	date: string // 기간
+}
+
+/** 예시 데이터 */
+const newsContentExam: news[] = [
+	{ id: 1, title: '다솜 34기 신규 부원 모집!', banner: null, date: '2월 25일(화) ~ 3월 14일(금)' },
+	{ id: 2, title: '다솜 34기 신규 부원 모집!', banner: null, date: '2월 25일(화) ~ 3월 14일(금)' },
+	{ id: 3, title: '다솜 34기 신규 부원 모집!', banner: null, date: '2월 25일(화) ~ 3월 14일(금)' },
+	{ id: 4, title: '다솜 34기 신규 부원 모집!', banner: null, date: '2월 25일(화) ~ 3월 14일(금)' },
+]
+
+/** 소식 페이지 */
+const News: React.FC = () => {
+	const navigate = useNavigate()
+
+	// 데이터의 id를 받아와 해당 상세 페이지로 이동
+	const handleClick = (id: number) => {
+		navigate(`/news/${id}`)
+	}
+
+	return (
+		<MobileLayout>
+			<Header />
+			<div className='mt-[65px] mb-2 ml-[12px] flex'>
+				<img className='w-[21px] h-[24px] cursor-pointer' alt='logo' src={dasomLogo} />
+				<div className='font-pretendardSemiBold text-white text-[16px] ml-[9px]'>다솜 소식</div>
+			</div>
+			<div className='flex flex-col items-center w-full mb-40'>
+				{/* 공지사항 리스트 출력 */}
+				{newsContentExam.map((news) => (
+					<NewsContent key={news.id} {...news} onClick={() => handleClick(news.id)} />
+				))}
+			</div>
+		</MobileLayout>
+	)
+}
+
+export default News

src/pages/News.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import MobileLayout from '../components/layout/MobileLayout'
+import dasomLogo from '../assets/images/dasomLogo.svg'
+import NewsContent from '../components/UI/NewsContent'
+import NewsNotice from '../components/UI/NewsNotice'
+import { Header } from '../components/UI/Header'
+
+interface notice {
+	id: number
+	text: string
+	date: Date
+}
+
+/** 소식 상세페이지 */
+const NewsInfo: React.FC = () => {
+	return (
+		<MobileLayout>
+			<Header />
+			<div className='mt-[65px] mb-2 ml-[12px] flex'>
+				<img className='w-[21px] h-[24px] cursor-pointer' alt='logo' src={dasomLogo} />
+				<div className='font-pretendardSemiBold text-white text-[16px] ml-[9px]'>다솜 소식</div>
+			</div>
+			<div className='flex flex-col items-center w-full mb-40'>
+				<NewsContent title='다솜 34기 신규 부원 모집!' banner={null} date='2월 25일(화) ~ 3월 14일(금)' onClick={() => {}} id={1} />
+				<NewsNotice text={examText} date={examDate} />
+			</div>
+		</MobileLayout>
+	)
+}
+
+/** DB에서 받아올 예시 데이터 */
+const examText: string =
+	'<p>컴퓨터공학부 전공 동아리 <span style="color:#00B493 ">다솜</span>은 1992년에 설립된, <strong>웹/앱 서비스 개발</strong>을 통해 개인의 개발 실력 향상을 도모하는 동아리입니다.</p>\n' +
+	'<p>다솜에서는 활발한 커뮤니티 형성을 목적으로 하며, 현직자 강의, 세미나와 스터디 및 팀 프로젝트 활동 등으로 비단 개인만이 아닌 <strong>팀과의 협업을 경험</strong>하고, <strong>실력과 인사이트 모두 한 단계 더 성장</strong>할 수 있게끔 지원해드리고 있습니다. ☺️</p>\n' +
+	'<p>또한, 다솜의 매력은 <strong>동료 개발자들과의 교류</strong>라고 생각하는데요, 하계, 동계 MT, 비어 네트워킹과 팀 프로젝트 등으로 <strong>친밀감을 쌓으며</strong> ' +
+	'여러분이 "<strong>함께 성장하는 개발자</strong>"가 될 수 있을 것이라고 생각합니다. 🌟</p>\n' +
+	'<p><strong>지금, 다솜에서 여러분의 가능성을 펼쳐보세요!\n' +
+	'더 큰 미래를 그릴 준비가 되셨나요? 다솜은 여러분과 함께합니다.</strong></p>'
+
+/** DB에서 받아올 예시 데이터 */
+const examDate: Date = new Date('2025-02-13')
+
+export default NewsInfo