(feat): Feat/news -> develop (11/17) #18

kss2002 · 2025-11-17T08:56:06Z

기초가 되는 api 코드 세팅.
뉴스 api 함수 세팅.
게시판 api 함수 세팅.
함수들을 컴포넌트에 이식시키기
vite 프록시 설정
feat/aianalyzer의 코드를 merge해서 최신화함.

11/17 오후 5시 52분

vercel · 2025-11-17T08:56:10Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
s-camp	Ready	Preview	Comment	Nov 17, 2025 9:27am

kss2002 · 2025-11-17T08:58:50Z

/gemini-review

Copilot

Pull Request Overview

This PR establishes the foundational API integration layer for the application, connecting the frontend to the backend API for news and board functionality. It includes comprehensive API setup with error handling, loading states, and responsive design improvements.

Key Changes

Implemented complete API client infrastructure with axios interceptors and error handling
Integrated live news and board data fetching to replace static mock data
Added Vite proxy configuration for seamless API communication in development

Reviewed Changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
vite.config.js	Configures proxy to route `/api` requests to the backend server
src/api/apiClient.js	Core axios client with interceptors for request/response handling
src/api/newsApi.js	API functions for fetching fraud-related news articles
src/api/postApi.js	API functions for fetching posts by category and ID
src/api/index.js	Centralized export point for all API modules
src/api/api-docs/docs.md	Documentation tracking API specification versions
src/api/api-docs/api-docs.json	OpenAPI specification from backend Swagger docs
src/pages/news/News.jsx	Refactored to fetch and display news from API with loading/error states
src/pages/news/News.css	Added styles for loading spinner, error states, and date display
src/pages/board/Board.jsx	Integrated API calls for posts with category filtering
src/pages/board/Board.css	Added loading/error state styles and empty state handling
src/components/board/Category.jsx	Made categories interactive with click handlers and state management
src/components/board/Category.css	Updated layout with border styling and mobile responsiveness
src/pages/not/NotFound.css	Added responsive styles for mobile devices (max-width: 500px)
src/index.css	Added global button border reset

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/pages/news/News.jsx

Copilot · 2025-11-17T09:01:45Z

src/pages/news/News.jsx

+      <div className="news-container">
+        <div className="error-wrapper">
+          <h2 className="tossface">😢 뉴스를 불러오는데 실패했습니다</h2>
+          <p>{error}</p>


The error message displays the raw error object directly to users ({error}), which may expose technical implementation details or unfriendly messages. This can confuse users or potentially leak sensitive information.

Consider providing a more user-friendly, consistent error message:

<h2 className="tossface">😢 뉴스를 불러오는데 실패했습니다</h2> 일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요. {import.meta.env.DEV && {error}}

This way, technical details are only shown in development mode.

Suggested change

{error}

일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.

{import.meta.env.DEV && {error}}

Copilot · 2025-11-17T09:01:45Z

src/components/board/Category.jsx

+            key={category.id}
+            className={selectedCategory === category.id ? 'active' : ''}
+            onClick={() => onSelectCategory(category.id)}
+            style={{ cursor: 'pointer' }}


[nitpick] Using inline styles for the cursor property is inconsistent with the rest of the codebase, which uses CSS files for styling. Consider moving this to the CSS file:

In Category.css:

.category-sidebar li { cursor: pointer; }

Then remove the inline style from the JSX.

Suggested change

style={{ cursor: 'pointer' }}

src/api/postApi.js

Copilot · 2025-11-17T09:01:46Z

src/components/board/Category.css

+    border-bottom: 1px solid var(--border-color);
+    width: 80vw;
+  }
+}


Duplicate CSS rule: border-bottom: 1px solid var(--border-color); is already defined on line 3 and is repeated here. Consider removing the duplicate declaration.

@media (max-width: 500px) { .category-sidebar { margin: 0 auto; width: 80vw; } }

Suggested change

border-bottom: 1px solid var(--border-color);

width: 80vw;

}

}

width: 80vw;

}

}

Copilot · 2025-11-17T09:01:48Z

src/api/api-docs/docs.md

+// 백엔드에서 최신화가 된 날짜와 swagger를 반영한 날짜를 전부 이 docs.md에 작성합니다.
+
+```
+백엔드에서 최신화가 된 날짜 :


The documentation is missing the backend update date, which is mentioned as a required field. This makes it unclear when the backend API was last updated and whether the frontend is synchronized.

Please fill in the backend update date:

백엔드에서 최신화가 된 날짜 : [YYYY년 MM월 DD일] 프론트에서 반영한 날짜 : 2024년 11월 17일

Suggested change

백엔드에서 최신화가 된 날짜 :

백엔드에서 최신화가 된 날짜 : 2025년 11월 10일

Copilot · 2025-11-17T09:01:48Z

src/api/api-docs/docs.md

+
+```
+백엔드에서 최신화가 된 날짜 :
+프론트에서 반영한 날짜 : 2025년 11월 17일


The date format in the documentation metadata appears to be incorrect. November cannot be the 11th month in 2025, as we're currently in November 2025 and it's only been 11 months. The date states "2025년 11월 17일" (November 17, 2025) but this seems to be in the future relative to the context.

If this should be November 2024, please correct it to:

프론트에서 반영한 날짜 : 2024년 11월 17일

Suggested change

프론트에서 반영한 날짜 : 2025년 11월 17일

프론트에서 반영한 날짜 : 2024년 11월 17일

Copilot · 2025-11-17T09:01:49Z

src/pages/board/Board.css

+.loading-wrapper,
+.error-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  text-align: center;
+  gap: 20px;
+}
+
+.loading-spinner {
+  animation: spin 1s linear infinite;
+  color: var(--primary-color);
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+


The loading and error state styles (.loading-wrapper, .error-wrapper, .loading-spinner, @keyframes spin) are duplicated between Board.css (lines 49-73) and News.css (lines 182-205). This violates the DRY (Don't Repeat Yourself) principle.

Consider extracting these common styles to a shared CSS file or the global index.css:

/* In index.css or a new shared file */ .loading-wrapper, .error-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; gap: 20px; } .loading-spinner { animation: spin 1s linear infinite; color: var(--primary-color); } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

Suggested change

.loading-wrapper,

.error-wrapper {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

min-height: 400px;

text-align: center;

gap: 20px;

}

.loading-spinner {

animation: spin 1s linear infinite;

color: var(--primary-color);

}

@keyframes spin {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

Copilot · 2025-11-17T09:01:49Z

src/pages/board/Board.jsx

+
+const categories = [
+  { id: 'all', label: '전체', value: null },
+  { id: 'notice', label: '공지사항', value: 'NOTICE' },
+  { id: 'prevention', label: '예방수칙', value: 'PREVENTION' },
+  { id: 'case', label: '사례공유', value: 'CASE' },
+];



The categories array is hardcoded in the component file. Consider extracting it to a separate constants file (e.g., src/constants/categories.js) for better maintainability and reusability.

// src/constants/categories.js export const BOARD_CATEGORIES = [ { id: 'all', label: '전체', value: null }, { id: 'notice', label: '공지사항', value: 'NOTICE' }, { id: 'prevention', label: '예방수칙', value: 'PREVENTION' }, { id: 'case', label: '사례공유', value: 'CASE' }, ];

Then import it:

import { BOARD_CATEGORIES as categories } from '../../constants/categories';

Suggested change

const categories = [

{ id: 'all', label: '전체', value: null },

{ id: 'notice', label: '공지사항', value: 'NOTICE' },

{ id: 'prevention', label: '예방수칙', value: 'PREVENTION' },

{ id: 'case', label: '사례공유', value: 'CASE' },

];

import { BOARD_CATEGORIES as categories } from '../../constants/categories';

Copilot · 2025-11-17T09:01:49Z

src/components/board/Category.jsx

+          <li
+            key={category.id}
+            className={selectedCategory === category.id ? 'active' : ''}
+            onClick={() => onSelectCategory(category.id)}
+            style={{ cursor: 'pointer' }}
+          >
+            <span>{category.label}</span>
          </li>


The clickable list items lack proper accessibility attributes. Since these are interactive elements that don't use native buttons or links, they need proper ARIA attributes and keyboard navigation support.

Consider these improvements:

<li key={category.id} className={selectedCategory === category.id ? 'active' : ''} onClick={() => onSelectCategory(category.id)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onSelectCategory(category.id); } }} role="button" tabIndex={0} aria-pressed={selectedCategory === category.id} style={{ cursor: 'pointer' }} > {category.label} </li>

github-actions

🤖 Gemini AI Code Review

Found 9 suggestions for improvement:

💡 Medium: 9

This review was automatically generated by Gemini AI. Please review the suggestions carefully.

github-actions · 2025-11-17T09:01:53Z

src/api/api-docs/api-docs.json

+{
+  "openapi": "3.0.1",
+  "info": {
+    "title": "Contact API",


The API title is quotContact APIquot, but the endpoints are for news, posts, and analysis. Consider updating the title to something more descriptive that reflects the API#x27s functionality.

github-actions · 2025-11-17T09:01:53Z

src/api/api-docs/api-docs.json

+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {


The request body for this endpoint is defined as a raw JSON string. This is unconventional and can be problematic for some HTTP clients and tools. It also makes it harder to add more parameters to the request in the future.

Consider using a JSON object instead. For example:
json
{
quotschemaquot: {
quottypequot: quotobjectquot,
quotpropertiesquot: {
quottextquot: {
quottypequot: quotstringquot
}
},
quotrequiredquot: [quottextquot]
}
}

github-actions · 2025-11-17T09:01:53Z

src/api/api-docs/api-docs.json

+              "*/*": {
+                "schema": {
+                  "type": "integer",
+                  "format": "int32"


Throughout this OpenAPI document, response content types are set to /. For APIs that return JSON, it is best practice to explicitly use application/json. This helps tooling and clients correctly interpret the response.

This applies to all responses sections in this file.

github-actions · 2025-11-17T09:01:53Z

src/api/api-docs/api-docs.json

+          },
+          "category": {
+            "type": "string"
+          },


The category field is a string here. However, the /api/posts/category/{category} endpoint defines a specific enum for it: [quotNOTICEquot, quotPREVENTIONquot, quotCASEquot].

For better consistency and validation, you should also define this enum in the PostDto schema.

json
quotcategoryquot: {
quottypequot: quotstringquot,
quotenumquot: [quotNOTICEquot, quotPREVENTIONquot, quotCASEquot]
}

github-actions · 2025-11-17T09:01:54Z

src/pages/board/Board.css

+.error-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;


For better accessibility and scalability, consider using relative units like rem instead of px.

Also, if the intent is to only add vertical spacing, it#x27s more precise to use margin-block or specify horizontal margin as 0. Applying margin to all four sides might cause unintended horizontal layout issues.

For example:
css
margin: 3.125rem 0 /* Assuming 16px root font size */

github-actions · 2025-11-17T09:01:54Z

src/pages/board/Board.jsx

+const categories = [
+  { id: 'all', label: '전체', value: null },
+  { id: 'notice', label: '공지사항', value: 'NOTICE' },
+  { id: 'prevention', label: '예방수칙', value: 'PREVENTION' },


To prevent a potential runtime error if posts is null or undefined while data is being fetched, it#x27s safer to use optional chaining. This ensures the application doesn#x27t crash when attempting to access .length on a non-array value.

suggestion
{!posts?.length ? (
ltdiv className=quotboard-empty-state tossfacequotgt
ltpgt아직 등록된 게시글이 없습니다. 🛠️lt/pgt
lt/divgt
) : (
posts.map(item =gt ltBoardItem key={item.id} item={item} /gt)
)}

github-actions · 2025-11-17T09:01:54Z

src/pages/news/News.jsx

+            다시 시도
+          </button>
+        </div>
+      </div>


For a better user experience in a Single Page Application (SPA), it#x27s preferable to re-fetch the data without a full page reload.

You can achieve this by extracting the fetchNews function from the useEffect hook, wrapping it in useCallback, and then calling it on the button#x27s onClick event.

Here#x27s an example of how you could refactor the component:
jsx
import { useState, useEffect, useCallback } from #x27react#x27
import { newsApi } from #x27../../api#x27
import #x27./News.css#x27
import { ArrowRight, Loader } from #x27lucide-react#x27

export default function News() {
const [news, setNews] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)

const fetchNews = useCallback(async () =gt {
try {
setLoading(true)
setError(null)
const data = await newsApi.getNews()
setNews(data)
} catch (err) {
setError(err.message)
} finally {
setLoading(false)
}
}, [])

useEffect(() =gt {
fetchNews()
}, [fetchNews])

if (loading) {
// ... loading UI
}

if (error) {
return (
ltdiv className=quotnews-containerquotgt
ltdiv className=quoterror-wrapperquotgt
lth2 className=quottossfacequotgt😢 뉴스를 불러오는데 실패했습니다lt/h2gt
ltpgt{error}lt/pgt
ltbutton onClick={fetchNews} className=quotbtn btn-primaryquotgt
다시 시도
lt/buttongt
lt/divgt
lt/divgt
)
}

return (
// ... news list UI
)
}

This change will make your component more efficient and provide a smoother experience for the user when an error occurs.

github-actions · 2025-11-17T09:01:54Z

src/pages/news/News.jsx

+          <p>{error}</p>
+          <button onClick={() => window.location.reload()} className="btn btn-primary">
+            다시 시도
+          </button>


Using the array index as a key is an anti-pattern in React. It can lead to performance issues and bugs with component state when the list is reordered, added to, or filtered.

Please use a unique and stable identifier from the data, such as a news item ID. If item.link is guaranteed to be unique, it would be a much better choice.

jsx
lta href={item.link} key={item.link} ... gt

github-actions · 2025-11-17T09:01:54Z

src/pages/news/News.jsx

+            다시 시도
+          </button>
+        </div>
+      </div>


Using dangerouslySetInnerHTML can expose your application to Cross-Site Scripting (XSS) vulnerabilities if the HTML content from item.title and item.description is not properly sanitized. Malicious scripts embedded in the news content could be executed in the user#x27s browser.

Recommendation:
If you must render HTML from the API, sanitize it on the client-side before rendering. A library like dompurify is excellent for this.

Example:
jsx
import DOMPurify from #x27dompurify#x27

// ... inside your component

lth3 dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.title) }} /gt
ltp dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.description) }} /gt

This ensures that only safe HTML is rendered, mitigating the XSS risk.

copilot 커밋 제안에 따라 코드 업데이트 Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

코파일럿 제안에 따라 주석 내용 변경 Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

kss2002 · 2025-11-17T08:58:12Z

vite.config.js

로컬에서도 잘 동작하기 위해서 vite의 환경에 프록시를 설정하였습니다.

kss2002 · 2025-11-17T09:01:10Z

src/api/api-docs/api-docs.json

swagger의 json 내역을 프론트에도 보기 쉽게 올려둡니다.

Updated the dates for backend and frontend updates.

tlsgud0 · 2025-11-17T10:23:25Z

확인했어, 이상 없음

kss2002 added 12 commits November 17, 2025 14:02

swagger api의 json 코드 기입

dcfab2e

로컬에서 프록시 설정

1fd18d4

button / border:none add

53bb2b6

모바일 처리

2fe97dc

api 기본 설정

35d1a5d

api 모듈 통합 export

2816a6e

뉴스 api

bf01125

게시판 api

97e10a6

카테고리도 api 연결

b58ddc9

게시판 api 연결

2a07c6d

뉴스 api 연결

331bc62

(merge): feat/aianalyzer -> develop 코드를 적용함:

6effba9

11/17 오후 5시 52분

kss2002 requested review from Copilot and tlsgud0 November 17, 2025 08:56

kss2002 self-assigned this Nov 17, 2025

Copilot started reviewing on behalf of kss2002 November 17, 2025 08:56 View session

kss2002 added the enhancement New feature or request label Nov 17, 2025

Copilot finished reviewing on behalf of kss2002 November 17, 2025 08:59

kss2002 assigned Copilot and tlsgud0 Nov 17, 2025

kss2002 added this to the deploy milestone Nov 17, 2025

kss2002 linked an issue Nov 17, 2025 that may be closed by this pull request

브랜치 전략 - 프로젝트가 끝날 때까지 이 이슈는 지우지 마세요! - #13

Closed

Copilot AI reviewed Nov 17, 2025

View reviewed changes

github-actions bot reviewed Nov 17, 2025

View reviewed changes

Update src/pages/news/News.jsx

f511b09

copilot 커밋 제안에 따라 코드 업데이트 Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel bot deployed to Preview November 17, 2025 09:14 View deployment

Update src/api/postApi.js

c73735c

코파일럿 제안에 따라 주석 내용 변경 Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel bot deployed to Preview November 17, 2025 09:15 View deployment

kss2002 commented Nov 17, 2025

View reviewed changes

Update dates in API documentation

552af2f

Updated the dates for backend and frontend updates.

vercel bot deployed to Preview November 17, 2025 09:21 View deployment

aria-label 추가

9b85310

vercel bot deployed to Preview November 17, 2025 09:27 View deployment

tlsgud0 merged commit a13fe52 into develop Nov 17, 2025
2 checks passed

kss2002 deleted the feat/news branch November 17, 2025 10:46

	<p>{error}</p>
	<p>일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.</p>
	{import.meta.env.DEV && <p className="error-details">{error}</p>}

	백엔드에서 최신화가 된 날짜 :
	백엔드에서 최신화가 된 날짜 : 2025년 11월 10일

	프론트에서 반영한 날짜 : 2025년 11월 17일
	프론트에서 반영한 날짜 : 2024년 11월 17일

(feat): Feat/news -> develop (11/17) #18

(feat): Feat/news -> develop (11/17) #18

Uh oh!

Conversation

kss2002 commented Nov 17, 2025

Uh oh!

vercel bot commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kss2002 commented Nov 17, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Uh oh!

Copilot AI Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

kss2002 Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

kss2002 Nov 17, 2025

Choose a reason for hiding this comment

Uh oh!

tlsgud0 commented Nov 17, 2025

vercel bot commented Nov 17, 2025 •

edited

Loading