refactor: 사용자 피드백 적용

[cindycho0423]

#️⃣ 이슈

• close refactor: 사용자 피드백 적용 #100

📝 작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요.

• 날짜부분 . 으로 나누기

• 호가부분 금액창이 윈도우에선 내려가는 부분 수정

• 현재가에서 수량을 입력하지않은 상태에서 초기화를 누르면 아예 폼이 초기화되는것 수정(호가랑 매수가능주식이 사라짐)

📸 스크린샷

✅ 체크 리스트

• 적절한 Title 작성
• 적절한 Label 지정
• Assignee 및 Reviewer 지정
• 로컬 작동 확인
• Merge 되는 브랜치 확인

👩‍💻 공유 포인트 및 논의 사항

Summary by CodeRabbit

• New Features

  • 주문/매도 화면의 리셋 기능이 개선되어, 시장가 주문 시 일부 입력값은 그대로 유지되고 지정가 주문 시 모든 입력값이 초기화됩니다.

• Style

  • 재무제표 표 헤더의 연도 값이 YYYY.MM 형식으로 표시되어 가독성이 향상되었습니다.
  • 드롭다운 메뉴의 레이아웃과 버튼 스타일이 업데이트되어 보다 깔끔한 UI를 제공합니다.

[coderabbitai]

Walkthrough

이번 PR은 4개 컴포넌트에 걸쳐 UI 및 초기화 동작 관련 수정이 이루어졌습니다. financial-statements 컴포넌트에서는 dayjs 라이브러리를 활용하여 연도 값을 YYYY.MM 형식으로 변환하였으며, BuyAndSell 컴포넌트의 handleReset 함수는 priceType에 따라 조건부로 상태를 리셋하도록 변경되었습니다. 또한, NumberDropdown 및 공통 Dropdown 컴포넌트의 CSS 클래스 수정으로 드롭다운의 너비 및 텍스트 줄바꿈 스타일이 개선되었습니다.

Changes

File(s)	Change Summary
src/app/.../company-overview/financial-statements.tsx	dayjs를 도입해 연도 값을 YYYY.MM 형식으로 변환하도록 수정
src/app/.../buy-and-sell/index.tsx	handleReset 함수에 가격 유형에 따른 조건부 초기화 로직 추가
src/app/.../buy-and-sell/number-dropdown.tsx, src/components/.../dropdown/index.tsx	드롭다운 컴포넌트의 CSS 클래스 변경으로 너비 및 텍스트 줄바꿈 스타일 개선

Sequence Diagram(s)

sequenceDiagram
    participant U as 사용자
    participant B as BuyAndSell 컴포넌트
    U->>B: Reset 버튼 클릭
    B->>B: priceType 확인
    alt priceType == Market
        B->>B: count 리셋, bidding 유지
    else priceType == Limit
        B->>B: count, bidding 모두 리셋
    end

Loading

Assessment against linked issues

Objective	Addressed	Explanation
날짜 부분 '.' 포맷 적용 (#100)	✅
호가 금액창 위치 수정 및 현재가 초기화 로직 개선 (#100)	✅

Suggested labels

🛠️ FIX

Suggested reviewers

• Han-wo

Poem

토끼가 뛰노는 코드 정원
한 줄 한 줄에 놀라운 변신이 피어나고
날짜는 이제 반짝이는 점으로,
reset은 부드럽게 흐르는 강물처럼
🥕 오늘도 즐겁게 뛰노는 우리 토끼의 노래!

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b2fbe84 and 45a06ef.

📒 Files selected for processing (4)

• src/app/search/[id]/_components/detail-info/company-overview/financial-statements.tsx (2 hunks)
• src/app/search/[id]/_components/order-stock/buy-and-sell/index.tsx (1 hunks)
• src/app/search/[id]/_components/order-stock/buy-and-sell/number-dropdown.tsx (1 hunks)
• src/components/common/dropdown/index.tsx (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• src/components/common/dropdown/index.tsx

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: storybook-preview

🔇 Additional comments (3)

src/app/search/[id]/_components/order-stock/buy-and-sell/number-dropdown.tsx (1)

24-24: 드롭다운 너비 개선

드롭다운의 너비를 고정값에서 컨텐츠에 맞게 자동 조절되도록 변경한 것이 적절합니다. 이는 사용자 경험을 개선하고 UI의 일관성을 높여줄 것입니다.

Also applies to: 31-31

src/app/search/[id]/_components/detail-info/company-overview/financial-statements.tsx (1)

4-4: 날짜 형식 개선

dayjs를 사용하여 연도와 월을 점(.)으로 구분하도록 변경한 것이 적절합니다. 이는 PR의 요구사항을 정확히 구현하였으며, 사용자가 더 쉽게 읽을 수 있는 형식으로 개선되었습니다.

Also applies to: 74-74

src/app/search/[id]/_components/order-stock/buy-and-sell/index.tsx (1)

73-85: 초기화 동작 개선

가격 유형에 따라 초기화 동작을 다르게 처리하도록 개선한 것이 적절합니다:

• 시장가 선택 시: 수량만 초기화하고 호가는 유지
• 지정가 선택 시: 수량과 호가 모두 초기화

이는 PR에서 언급된 "수량을 입력하지 않고 초기화 버튼을 눌렀을 때 폼이 전체 초기화되는 문제" 를 해결합니다.

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

💄 Storybook: https://66e95dd74f88edf048011168-sgianzfhtw.chromatic.com/

[Han-wo]

고생하셨습니다!!