타입 변경에 따른 미디어쿼리 수정, 비밀번호 재설정 해결, FAQ 더보기 기능 추가 (#issue 291)

[YouD0313]

구현내용

타입 변경에 따른 미디어쿼리 수정, 비밀번호 재설정 해결
FAQ 더보기 기능 추가

연관이슈

close #291

Summary by CodeRabbit

• 스타일

  • 로그인 페이지의 레이아웃과 버튼 너비가 기존 픽셀 단위에서 상대 단위(rem)로 변경되어 다양한 화면 크기에서 더 유연하게 표시됩니다.
  • 프로젝트 카드 리스트의 그리드 레이아웃 적용 조건이 개선되어, 특정 모드에서만 그리드가 적용됩니다.

• 신규 기능

  • 로그인 페이지에 새로운 스타일의 제목 요소가 추가되었습니다.
  • FAQ 페이지에서 처음에는 10개의 질문만 표시되고, "더 보기" 버튼을 눌러 추가 질문을 점진적으로 확인할 수 있는 기능이 도입되었습니다.
  • FAQ 페이지에 "더 보기" 버튼과 관련된 새로운 스타일이 적용되었습니다.

[coderabbitai]

## Walkthrough

스타일드 컴포넌트의 내부 스타일링 로직이 수정되었습니다. `ProjectCardLists.styled.ts`에서는 grid 레이아웃 적용 조건이 명확히 `'grid'`일 때만 적용되도록 변경되었고, `Login.styled.ts`에서는 고정 픽셀 단위가 rem 단위로 교체되었으며, 새로운 `LogoH1` 컴포넌트가 추가되었습니다. 또한 FAQ 컴포넌트에 초기 10개 항목만 표시하고 "더보기" 버튼으로 추가 항목을 점진적으로 노출하는 기능이 도입되었습니다.

## Changes

| 파일/경로 요약                                                                 | 변경 요약                                                                                           |
|-------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------|
| src/components/home/projectCardLists/ProjectCardLists.styled.ts               | grid-template-columns의 조건부 적용 로직을 `$flex === 'grid'`로 명확하게 변경                      |
| src/pages/login/Login.styled.ts                                               | width 관련 px 값을 rem 단위로 변경, 빈 styled h1 컴포넌트(`LogoH1`) 추가                            |
| src/pages/customerService/faq/FAQ.styled.ts                                  | `ShowMoreFAQWrapper`, `ShowMoreFAQ` 새 styled 컴포넌트 추가                                         |
| src/pages/customerService/faq/FAQ.tsx                                        | FAQ 항목 초기 10개만 표시, "더보기" 버튼으로 추가 항목 점진적 노출 기능 구현                        |

## Assessment against linked issues

| Objective (이슈 번호)                           | Addressed | Explanation                                   |
|------------------------------------------------|-----------|-----------------------------------------------|
| FAQ 더보기 추가하기 (#291)                       | ✅        | FAQ 컴포넌트에 초기 10개 항목 노출 및 "더보기" 버튼 기능이 구현됨.                                |
| 비밀번호 재연결 오류 해결 (#291)                | ❓        | 스타일링 변경이 포함되었으나, 비밀번호 재연결 오류 해결 관련 코드 변경 여부는 명확하지 않음.      |

## Possibly related PRs

- devpalsPlus/frontend#283: `Login.styled.ts`에서 width 단위 변경과 `LogoH1` 컴포넌트 추가 관련 변경이 겹침.

## Suggested labels

`🛠개선`

## Suggested reviewers

- layout-SY

## Poem

> 🐇  
> 스타일이 바뀌어 더 부드러운 밤,  
> rem으로 환복한 로그인 창,  
> LogoH1이 살짝 인사해요.  
> grid 조건도 더 똑똑해져,  
> FAQ는 더보기를 품었지요,  
> 토끼는 오늘도 코드를 춤추며  
> 개선의 길을 달려가요!  
> ✨

Tip

⚡️ Faster reviews with caching

• CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.

---

📜 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 db91974 and 13b50c5.

📒 Files selected for processing (2)

• src/pages/customerService/faq/FAQ.styled.ts (1 hunks)
• src/pages/customerService/faq/FAQ.tsx (2 hunks)

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

• src/pages/customerService/faq/FAQ.styled.ts

🧰 Additional context used

🧬 Code Graph Analysis (1)

src/pages/customerService/faq/FAQ.tsx (5)

src/models/customerService.ts (1)

• FAQ (3-7)

src/components/customerService/faq/FAQContent.tsx (1)

• FAQContent (10-34)

src/components/common/contentBorder/ContentBorder.styled.ts (1)

• ContentBorder (3-9)

src/components/common/contentBorder/ContentBorder.tsx (1)

• ContentBorder (3-5)

src/components/common/noResult/NoResult.tsx (1)

• NoResult (8-17)

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

• GitHub Check: accessibility-test

🔇 Additional comments (4)

src/pages/customerService/faq/FAQ.tsx (4)

10-10: 새로운 아이콘을 적절히 추가하였습니다.

더보기 기능 구현을 위해 필요한 ChevronDownIcon을 import 하였습니다. 이는 사용자에게 더 많은 내용을 볼 수 있다는 직관적인 힌트를 제공합니다.

---

15-15: 초기 FAQ 표시 개수 제한을 위한 상태 변수 추가가 좋습니다.

초기 10개의 FAQ만 표시하고 추가적으로 더 불러올 수 있게 하는 showFAQ 상태 변수를 적절히 추가하셨습니다. 이는 페이지 로드 시 성능 개선과 사용자 경험 향상에 도움이 됩니다.

---

43-50: FAQ 항목의 점진적 표시 구현이 잘 되었습니다.

filter 메소드를 사용하여 showFAQ 상태값에 따라 보여질 FAQ 항목을 제한하는 로직이 명확하게 구현되었습니다. 이는 사용자에게 필요한 정보를 단계적으로, 관리 가능한 양으로 제공하는 좋은 방식입니다.

---

54-65: 사용자 경험을 고려한 '더보기' 버튼 구현이 잘 되었습니다.

더 표시할 FAQ 항목이 있을 경우에만 '더보기' 버튼을 조건부로 렌더링하는 방식이 효과적으로 구현되었습니다. 버튼 클릭 시 showFAQ 값을 10씩 증가시키는 로직도 적절합니다. 아이콘 추가와 ContentBorder 컴포넌트를 통한 시각적 구분도 사용자 인터페이스 측면에서 좋은 선택입니다.

다만, 페이지네이션이나 무한 스크롤과 같은 대안적 접근법과 비교했을 때의 장단점을 고려해 보셨는지 궁금합니다. 현재 구현은 FAQ의 양이 많지 않은 경우에 적합하며, 데이터가 매우 많아질 경우 서버 측 페이지네이션을 고려할 수도 있을 것입니다.

FAQ 데이터의 일반적인 양이 얼마나 되는지, 그리고 이 접근 방식이 데이터가 증가할 경우에도 효과적일지 확인해 보시는 것이 좋겠습니다.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ 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.
  • Explain this complex logic.
  • 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 explain this code block.
  • @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 explain its main purpose.
  • @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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @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.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/pages/login/Login.styled.ts (1)

89-89: WrapperRegister 컴포넌트의 단위 변경이 누락되었습니다.

다른 컴포넌트에서는 310px에서 22rem으로 변경되었지만, WrapperRegister 컴포넌트는 여전히 픽셀 단위를 사용하고 있습니다. 일관성을 위해 이 부분도 변경하는 것이 좋겠습니다.

-  max-width: 310px;
+  max-width: 22rem;

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 9687031 and db91974.

📒 Files selected for processing (2)

• src/components/home/projectCardLists/ProjectCardLists.styled.ts (1 hunks)
• src/pages/login/Login.styled.ts (4 hunks)

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

• GitHub Check: accessibility-test

🔇 Additional comments (6)

src/pages/login/Login.styled.ts (4)

9-9: 단위 변경이 반응형 디자인을 개선합니다.

px에서 rem 단위로 변경하여 루트 글꼴 크기에 상대적으로 요소가 조정되므로 반응형 디자인이 향상됩니다.

---

29-30: 버튼 너비 단위가 일관되게 변경되었습니다.

고정 픽셀 단위에서 상대 단위로의 변경은 다양한 화면 크기와 사용자 설정에 더 잘 대응할 수 있습니다.

---

36-36: 새로운 LogoH1 컴포넌트가 추가되었습니다.

스타일이 적용되지 않은 h1 요소가 추가되었습니다. 만약 이 컴포넌트가 SEO 또는 접근성 목적으로 추가되었다면 의미있는 변경입니다.

---

44-45: 모든 입력 관련 컴포넌트의 너비 단위가 일관되게 변경되었습니다.

InputContainer, InputWrapper 및 WrapperPassword의 너비 단위를 px에서 rem으로 변경하여 스타일 일관성이 향상되었습니다.

Also applies to: 56-57, 74-75

src/components/home/projectCardLists/ProjectCardLists.styled.ts (2)

49-50: 미디어 쿼리의 조건부 스타일 적용 로직이 개선되었습니다.

기존에는 $flex가 falsy 값일 때 그리드 템플릿이 적용되었지만, 이제는 명시적으로 'grid' 값일 때만 적용되도록 변경되었습니다. 이로써 스타일 적용이 더 명확하고 예측 가능해졌습니다.

---

56-57: 모바일 미디어 쿼리에도 동일한 로직이 적용되었습니다.

태블릿 뷰와 동일하게 모바일 뷰에서도 $flex가 명시적으로 'grid'일 때만 그리드 템플릿 열이 적용되도록 변경되었습니다. 이는 일관된 스타일 적용을 보장합니다.