feat: 기업정보 탭 api 연결 #89
Conversation
Walkthrough이 풀 리퀘스트는 기업 상세 정보 API 연결을 위한 여러 컴포넌트와 유틸리티 함수를 추가하고 수정했습니다. Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip CodeRabbit's docstrings feature is now available as part of our Early Access Program! Simply use the command Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (12)
src/app/search/[id]/_components/detail-info/company-overview/consensus.tsx (3)
11-13: ConsensusProps 인터페이스 정의
ConsensusProps에서investmentRecommendationData를 옵션으로 받도록 설정하였는데, 타입 안정성을 높이기 위해 매우 적절한 선언입니다. 다만 추후에 필수로 항상 존재해야 하는 데이터라면undefined대신 안전한 기본값을 고려해볼 수도 있습니다.
15-24: 데이터 로드 중 문구 처리
기업 정보 로딩 시 사용자에게"데이터를 로드하는 중입니다..."문구를 보여주는 것은 직관적이고 좋습니다. 다만, 프로젝트 전반에 로딩 처리가 통일되어 있다면 (예: 로딩 스피너) 해당 컴포넌트를 활용하여 일관성을 유지해보는 것도 좋겠습니다.
32-75: 카테고리 렌더링 및 동적 툴팁
categories.map을 통해 동적으로 색상을 바꾸고 툴팁을 표시하는 로직이 아주 직관적이며, UI 변화를 잘 반영합니다.isActive를 판단할 때 범위에>,<=를 사용하여 카테고리 포함 여부를 정확하게 구별하는 점도 좋습니다.(/* eslint-disable-next-line react/no-array-index-key */)를 사용해 index를 키로 삼고 있는데, 랜더링 과정에서 순서가 바뀔 가능성이 낮다면 괜찮지만, 가능하다면 데이터 내에서도 고유한 식별자를 활용하는 것이 바람직합니다.src/types/company-details/index.ts (1)
20-24: 컨센서스 인터페이스의 숫자 타입 검토
Consensus인터페이스의 속성들이 문자열로 정의되어 있는데, 해당 필드들이 주로 금액 연산 등에 사용될 예정이라면, 숫자 타입으로 변환하는 로직이 필요합니다. 현재로서는 파싱하여 재계산하는 구조가 잘 잡혀 있다면 문제되지 않을 수 있으나, 장기적으로는 Numeric 타입을 고려해 보시는 게 유지보수에 도움이 될 수 있습니다.src/utils/calculate-consensus.ts (2)
3-9: 퍼센트 계산 안정성 확보
calculateDifferencePercentage함수에서parseFloat후에 연산을 수행하고 있는데, NaN 검사나 0 나누기 같은 보완 로직이 추가되면 안전성이 더 높아질 것 같습니다.
11-17: 범위 검증 보완
getRelativePosition함수가 범위가 동일할 경우0을 반환하는 로직이 있습니다. 다만,range[0]또는range[1]가 NaN인 경우 등에 대한 예외 처리도 고려해 볼 수 있습니다.src/api/make-api-request.ts (1)
5-5: 토큰 파라미터 옵션 변경에 대한 점검
토큰을 선택적으로 전달하도록 개선한 점 좋습니다. 다만, 인증이 필요한 API와 불필요한 API를 분리할 때, API 문서 차원에서 명확히 안내해야 혼동을 줄일 수 있습니다.src/app/search/[id]/_components/detail-info/relative-news/index.tsx (1)
12-39: target="_blank"에 대한 보안 속성 추가 권장
테이블 생성과 동적 렌더링이 깔끔합니다. 다만, 외부 링크에 열람 시 보안을 위해target="_blank"사용 시rel="noopener noreferrer"추가를 권장합니다.예시 수정안:
<a href={news.link} target="_blank" + rel="noopener noreferrer" > {cleanText(news.title)} </a>src/app/search/[id]/_components/detail-info/index.tsx (1)
21-29: relativeNews 데이터 패칭
useQuery로 뉴스 데이터를 받아오는 흐름이 자연스럽습니다. 에러 처리나 로딩 상태 관리도 추후 보강하면 좋겠습니다.src/app/search/[id]/_components/detail-info/company-overview/index.tsx (2)
18-23: 투자 권장사항 데이터 fetch
getConsensusAPI 호출 처리 흐름이 자연스럽습니다. 에러 시 예외 처리 로직도 보완할 수 있으면 더욱 좋겠습니다.
31-39: 동적 뉴스 목록 렌더링
뉴스 목록을 3개까지만 슬라이싱하여 보여주는 방법이 단순하고 깔끔합니다. 역시 외부 링크에rel="noopener noreferrer"를 추가하면 더 안전합니다.src/app/search/[id]/_components/detail-info/company-overview/target-price.tsx (1)
21-32: [목표주가 포지션 계산 로직 검토]
주가 대비 목표가의 비율을 0~100 범위로 한정하는 수식이 잘 작성되어 있습니다.Math.min과Math.max로 최솟값·최댓값을 모두 제한하는 방식이 실수를 방지하기에 적합합니다. 다만, 해당 계산에 대한 의미(왜 50을 더하고 50으로 나누는지)를 주석으로 더 명시하면 유지보수 시 가독성이 향상될 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (22)
package.json(1 hunks)src/api/company-details/index.ts(1 hunks)src/api/make-api-request.ts(1 hunks)src/app/globals.css(1 hunks)src/app/search/[id]/_components/candle-chart.tsx(1 hunks)src/app/search/[id]/_components/detail-info/company-overview/consensus.tsx(1 hunks)src/app/search/[id]/_components/detail-info/company-overview/financial-statements.tsx(3 hunks)src/app/search/[id]/_components/detail-info/company-overview/index.tsx(1 hunks)src/app/search/[id]/_components/detail-info/company-overview/target-price.tsx(1 hunks)src/app/search/[id]/_components/detail-info/index.tsx(2 hunks)src/app/search/[id]/_components/detail-info/relative-news/index.tsx(1 hunks)src/app/search/[id]/_components/order-stock/edit-cancel/index.tsx(1 hunks)src/app/search/[id]/_components/order-stock/index.tsx(1 hunks)src/app/search/[id]/_components/order-stock/order-history/index.tsx(1 hunks)src/app/search/[id]/page.tsx(1 hunks)src/constants/company-details.ts(1 hunks)src/context/stock-info-context.tsx(3 hunks)src/types/company-details/index.ts(1 hunks)src/utils/calculate-consensus.ts(1 hunks)src/utils/clean-text.ts(1 hunks)src/utils/price.ts(1 hunks)tailwind.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- src/app/search/[id]/_components/order-stock/edit-cancel/index.tsx
- src/app/search/[id]/_components/order-stock/index.tsx
- src/app/search/[id]/_components/order-stock/order-history/index.tsx
- src/app/search/[id]/_components/candle-chart.tsx
🔇 Additional comments (38)
src/app/search/[id]/_components/detail-info/company-overview/consensus.tsx (2)
1-9: import 구문 및 유틸 사용 확인
이 파일에서 필요한 모듈과 유틸 함수를 적절히 불러오고 있습니다. 특히 calculateDifferencePercentage, getRelativePosition, cn 등을 프로젝트 내에서 재사용하기 좋게 구성했습니다. 가독성도 뛰어나므로 별다른 문제는 없어 보입니다.
26-29: 차이 계산 로직 및 범위 제한
calculateDifferencePercentage로부터 반환된 값을 Math.max(Math.min(...))로 -100과 100 사이로 제한하는 로직이 명확합니다. 극단적인 입력에 대한 방어 코드로 적절해 보입니다.
src/app/search/[id]/_components/detail-info/company-overview/financial-statements.tsx (6)
3-9: React Query 및 타입 임포트
react-query, @/types/company-details 등을 적절히 불러오고 있습니다. 데이터 관리 로직을 별도 파일(getFinancialStatements)로 분리한 점이 확장성 면에서 좋아 보입니다.
Line range hint 11-44: 타입 정의 및 재무지표 배열
FinancialRatioKey와NumberKeys를 통해 숫자형 속성을 깔끔하게 추출하는 로직이 매우 직관적입니다.FINANCIAL_METRICS배열에서key가NumberKeys로 캐스팅되어 있어 타입 안전성이 높습니다.- 각 라벨과 키, 퍼센트 여부가 명확하게 분리되어 있어 유지보수에 유리합니다.
116-127: useStockInfoContext와 쿼리 함수 연동
stockName을useStockInfoContext에서 받아와queryKey로 사용함으로써, 종목에 따라 재무 데이터를 동적으로 불러오는 구조가 잘 되어 있습니다.queryFn으로getFinancialStatements(stockName)를 호출하는 부분도 적절하며, 훅 구조가 간결합니다.
128-128: 빈 데이터 처리
재무 정보가 없는 경우 <NoDataMessage />로 표현하여 사용자에게 명확히 안내하는 점이 좋습니다.
132-135: 로딩 처리
로딩 시 LoadingSpinner를 표시해 주는 로직 역시 사용자 경험을 높이는 좋은 패턴입니다.
136-149: 테이블 렌더링 및 데이터 바인딩
TableHeader,TableRow컴포넌트를 분리하여 가독성이 우수하며, 핵심 로직과 UI 로직이 구분되어 있습니다.FINANCIAL_METRICS.map에서values를 동적으로 매핑하는 부분도 직관적이며, 널 처리를 위한null확인이 제대로 이루어져 있습니다.
src/utils/clean-text.ts (1)
1-8: HTML 엔티티 디코딩 및 깨진 문자 제거
DOMParser로 HTML 엔티티를 디코딩하고, 이후�문자를 제거하여 텍스트를 정리하는 방식은 적절합니다.- 만약 사용자 입력이 그대로 들어오는 경우, 보안상 XSS 등의 위험은 없는지 확인하는 절차가 필요할 수 있습니다(단, 현재 로직은
DOMParser().parseFromString(text, "text/html")로 단순 텍스트 역질만 하고 있으므로 크게 문제될 여지는 낮아 보입니다).
src/constants/company-details.ts (1)
1-9: 투자 카테고리 상수 정의
range배열을 통해 -100~100 사이의 범위를 구분하는 구성이 직관적이며, 각 구간별로 라벨을 분리하여 재사용이 용이해 보입니다.- 범위의 구간 설정에서 경계 조건(예: -60, 20 등)이 명확히 정의되어 있어서, 추후 수정 시에 상수 변경만으로 관리 가능하겠습니다.
src/utils/price.ts (1)
Line range hint 6-14: 주문 금액 계산 로직 추가
count와bidding이 모두 유효할 때만 곱하고, 그렇지 않으면0을 반환하는 로직이 명료합니다.- 다만
count나bidding이0인 경우도0을 반환하게 되므로, 0도 유효한 값인지 한 번 더 확인해 보면 좋겠습니다.
src/types/company-details/index.ts (2)
1-12: 재무 지표 인터페이스 정의 확인
새롭게 추가된 FinancialRatio 인터페이스는 필요한 지표를 문자열 타입으로 충실히 정의하고 있습니다. 추후 각 지표에 대한 정규화 혹은 숫자 연산이 필요하다면, 서버나 프론트 단에서 숫자 타입을 적용할지 여부를 재검토해 볼 수도 있습니다. 현재로서는 목적에 적합해 보입니다.
14-18: 뉴스 인터페이스 설계 적절성
RelativeNews 인터페이스가 뉴스의 핵심 정보를 빠짐없이 잘 캡슐화하고 있습니다. 확장 가능성을 위해 필요한 추가 필드(예: 뉴스 요약, 기사 출처 등)가 있다면 앞으로도 쉽게 확장이 가능할 것 같습니다.
src/api/company-details/index.ts (3)
9-18: 재무제표 API 함수의 유효성 검토
getFinancialStatements 함수는 FinancialRatio[]를 반환하도록 되어 있습니다. 정상 동작을 위해서는 백엔드로부터 올바른 데이터 구조가 전달되는지 꼭 검증이 필요합니다.
20-25: 뉴스 API 함수 확인
getRelativeNews 함수가 RelativeNews[]을 반환하도록 정의되어 있습니다. 스펙 변경 시 뉴스의 확장 필드가 생길 수 있으니, 추후 변경 사항이 있다면 인터페이스 정의를 함께 업데이트해야 합니다.
27-34: 컨센서스 API 호출 주의 사항
getConsensus가 단일 Consensus 객체를 반환합니다. API 응답에서 해당 객체가 없거나 속성이 누락된 경우의 예외 처리를 프런트에서 한 번 더 점검해 보시면 좋겠습니다.
src/api/make-api-request.ts (1)
14-14: 토큰 처리 로직conditional 추가
...(token && { Authorization: \Bearer ${token}` })` 형태로 Authorization 헤더가 조건부 삽입되도록 개선되었습니다. 인증이 필요 없는 API 호출이 있는 경우에 대응이 간단해진 점이 인상적입니다.
src/app/search/[id]/_components/detail-info/relative-news/index.tsx (3)
3-4: dayjs 라이브러리 도입으로 날짜 형식을 간단히 처리
dayjs를 통한 날짜 포맷 처리는 가독성과 유지보수 측면에서 적절합니다.
5-7: 유형과 유틸 함수 임포트가 적절함
RelativeNewsType으로 뉴스 데이터 타입을 명확히 하면서 cleanText를 활용해 HTML 태그를 정리하는 접근이 좋습니다.
8-10: newsData를 undefined로 처리 가능
newsData를 undefined로 처리할 수 있게 인터페이스를 잡은 덕분에, 초기 데이터가 없을 경우에도 안전하게 렌더링할 수 있습니다.
src/context/stock-info-context.tsx (3)
11-11: stockInfo를 null 허용함
비동기 로딩 과정에서 stockInfo가 아직 없을 수 있기 때문에 null을 허용하는 수정은 합리적입니다.
23-23: 옵션으로 변경된 stockInfo
StockInfoProviderProps에서 stockInfo를 옵셔널로 처리해, 더 유연한 초기 설정이 가능해졌습니다.
41-41: 초기값이 없을 때 null 할당
stockInfo ?? initialStockInfo ?? null 구문으로 안전하게 대응한 처리 방식이 좋습니다.
src/app/search/[id]/_components/detail-info/index.tsx (4)
3-12: getRelativeNews와 StockInfoProvider에 대한 신규 임포트
관련 API와 Context Provider를 함께 가져와 기능을 확장하는 흐름이 일관적입니다.
18-20: DetailInfoProps 정의
stockName을 받아오는 인터페이스로 컴포넌트의 목적이 명확해졌습니다.
31-33: 로딩 상태 분기 처리
데이터 로딩 중 LoadingSpinner로 사용성을 높이는 접근이 적절합니다.
43-50: StockInfoProvider 사용으로 Context 일원화
TabsContent 안에서 CompanyOverview와 RelativeNews를 구성하면서 Context를 공유하는 구조가 일관성이 높습니다.
src/app/search/[id]/_components/detail-info/company-overview/index.tsx (4)
3-4: useQuery 임포트로 비동기 데이터 사용
투자 권장사항 데이터 패칭을 위해 useQuery를 사용하는 방식이 일관적이며 유지보수가 용이합니다.
5-9: 스토어 Context와 유틸 함수 임포트
useStockInfoContext를 통해 stockName을 가져오고, cleanText로 텍스트 정리 로직을 분리한 점이 좋습니다.
14-16: CompanyOverviewProps로 newsData 타입화
RelativeNews[] | undefined 형태로 받을 수 있도록 설계한 것은 컴포넌트 재사용성과 안정성을 높이는 데 유리합니다.
43-46: Consensus 및 TargetPrice 연계
investmentRecommendationData를 각각의 컴포넌트에 전달해주는 구조가 가독성이 좋고 확장에 유리합니다.
src/app/search/[id]/_components/detail-info/company-overview/target-price.tsx (3)
1-9: [임포트 및 인터페이스 정의]
해당 컴포넌트에서 사용하는 Consensus 타입과 getKoreanPrice 함수가 명확히 구분되어 있어 의존성이 분명합니다. 별도의 추가 의존성도 없어서 문제 없이 동작할 것으로 보입니다. TargetPriceProps 인터페이스를 통해 investmentRecommendationData를 명시적으로 받도록 설계한 점이 좋습니다.
13-19: [로딩 상태 처리]
if (!investmentRecommendationData) 분기 처리를 통해 데이터를 정상적으로 받기 전 로딩 메시지를 표시하고 있습니다. 사용자 입장에서 처리 중임을 명시해주는 적절한 방법으로 보입니다.
35-54: [렌더링 블록 및 스타일링]
- 목표 주가와 현재 주가 범위를 시각적으로 잘 표현하고 있습니다.
position값을style에 직접 연결해서 동적인 렌더링이 가능하도록 한 점이 직관적입니다.- Tailwind 클래스를 활용해 UI 요소들이 간결하게 구현되었습니다.
현재 요구사항 충족에는 문제 없어 보이며, 확장 시에도 무리 없습니다.
src/app/search/[id]/page.tsx (1)
78-78: [stockName props 추가]
<DetailInfo stockName={stockName} />와 같이 DetailInfo 컴포넌트로 stockName을 넘겨주는 로직이 명확합니다. API 호출 또는 데이터 바인딩 시 주식 이름을 명확히 인식할 수 있어 가독성이 높아졌습니다.
tailwind.config.ts (1)
61-61: [새로운 gray 색상 단계 추가]
gray: { 700: "#9f9f9f" } 색상 값이 기존 팔레트와 충돌하지 않고 계층이 자연스럽게 이어집니다. 스타일 일관성 유지에 문제 없어 보입니다.
src/app/globals.css (1)
57-69: [툴팁을 위한 CSS 삼각형 비주얼 추가]
.tooltip-container::after를 통한 삼각형 만들기 기법이 UI 편의性 향상에 유용합니다. 배경색과 위치가 명확하며, position: absolute로 컨테이너 내부에서 단순히 삼각형만 표현하는 로직이 직관적입니다.
package.json (1)
22-22: dayjs 라이브러리 추가 승인 및 버전 확인 권장
dayjs는 뉴스 기사의 날짜 포맷팅을 위한 적절한 선택입니다. 다만 다음 사항들을 확인해주시기 바랍니다:
- 보안 업데이트를 위해 최신 버전 사용을 검토해주세요
- 정기적으로 보안 패치 및 업데이트 확인이 필요합니다
보안 취약점 및 최신 버전을 확인하기 위해 다음 스크립트를 실행하세요:
✅ Verification successful
dayjs 버전 1.11.13은 안전하며 프로덕션에 적합합니다
확인 결과:
- 현재 dayjs의 최신 버전은 2.0.0-alpha.4이지만, 이는 알파 버전입니다
- 1.11.13 버전에 대해 알려진 보안 취약점이 없습니다
- ^1.11.13 버전 범위는 안정적인 1.x 릴리스를 사용하므로 적절합니다
프로덕션 환경에서는 알파 버전보다 안정적인 1.x 버전을 사용하는 것이 권장되므로, 현재 지정된 버전이 적절합니다.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# dayjs 라이브러리의 최신 버전과 보안 권고사항 확인
# npm에서 최신 버전 확인
npm view dayjs versions --json | jq -r '.[-1]'
# GitHub 보안 권고사항 확인
gh api graphql -f query='
{
securityVulnerabilities(first: 5, ecosystem: NPM, package: "dayjs") {
nodes {
advisory {
summary
severity
publishedAt
}
vulnerableVersionRange
firstPatchedVersion {
identifier
}
}
}
}'
Length of output: 401
|
|
||
| import { ChartDTO, VolumeDTO } from "../types"; | ||
| import LoadingSpinner from "./loading-spiner"; | ||
| import LoadingSpinner from "./loading-spinner"; |
#️⃣ 이슈
📝 작업 내용
이번 PR에서 작업한 내용을 간략히 설명해주세요.
📸 스크린샷
Screen.Recording.2024-12-27.at.5.41.44.PM.mov
✅ 체크 리스트
👩💻 공유 포인트 및 논의 사항
리팩토링이나 고쳤으면 하는 부분 있으면 알려주세요!
Summary by CodeRabbit
새로운 기능
dayjs라이브러리 추가로 날짜 조작 기능 향상.버그 수정
LoadingSpinner컴포넌트의 잘못된 파일 이름 수정.문서화
categories추가로 투자 카테고리 정의.스타일