Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(community): 구성원 소개 페이지 퍼블리싱 #23

Merged
merged 19 commits into from
Nov 15, 2024

Conversation

SunwooJaeho
Copy link
Contributor

@SunwooJaeho SunwooJaeho commented Nov 13, 2024

Summary

closed issue #15

구성원 페이지에 대해 퍼블리싱을 진행하였어요.

Tasks

  • 교수 Card 제작

Summary by CodeRabbit

  • 새로운 기능

    • 교수 목록을 표시하는 Page 컴포넌트 추가.
    • 교수 정보를 표시하는 ProfessorCard 컴포넌트 추가.
  • 스타일

    • 교수 카드 및 페이지 헤더에 대한 새로운 CSS 스타일 추가.
    • 반응형 그리드 레이아웃을 적용하여 교수 목록의 표시 방식 개선.
    • 페이지 헤더의 스타일 개선.
  • 기타

    • 교수 데이터 구조를 정의하는 Professor 인터페이스 및 PROFESSORS 배열 추가.
    • 원격 이미지 소스 추가로 이미지 처리 기능 향상.

@SunwooJaeho SunwooJaeho linked an issue Nov 13, 2024 that may be closed by this pull request
2 tasks
Copy link
Contributor

coderabbitai bot commented Nov 13, 2024

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

📝 Walkthrough
📝 Walkthrough
📝 Walkthrough

Walkthrough

이 변경 사항은 Next.js 애플리케이션의 이미지 처리 기능을 향상시키기 위해 next.config.ts 파일의 images 구성에서 원격 이미지 소스를 추가하고, 교수 정보를 정의하는 새로운 TypeScript 인터페이스 및 상수 배열을 도입하며, 교수 목록을 렌더링하는 새로운 React 컴포넌트를 생성하는 내용을 포함합니다. 또한, 교수 카드 및 페이지 헤더 컴포넌트에 대한 스타일을 정의하는 CSS 모듈이 추가되었습니다.

Changes

파일 경로 변경 요약
apps/community/next.config.ts nextConfigimages 구성에서 remotePatterns에 새로운 원격 이미지 소스 추가
apps/community/src/app/member/professor/mocks/professor.ts Professor 인터페이스 추가 및 PROFESSORS 상수 배열 생성, 교수 정보 포함
apps/community/src/app/member/professor/page.tsx 교수 목록을 렌더링하는 Page 컴포넌트 추가
apps/community/src/app/member/professor/page.css.ts professorListWrapper 스타일 정의를 위한 새로운 CSS 모듈 추가
apps/community/src/components/professor-card.css.ts 교수 카드 스타일을 정의하는 새로운 CSS 모듈 추가
apps/community/src/components/professor-card.tsx 교수 정보를 표시하는 ProfessorCard 컴포넌트 추가
apps/community/src/components/page-header.css.ts pageHeaderWrapper 스타일 추가 및 내보내기 업데이트
apps/community/src/components/page-header.tsx PageHeader 컴포넌트의 외부 <div>에 CSS 클래스 추가

Possibly related PRs

Suggested reviewers

  • gwansikk
  • wontory

🐇
새로운 교수 카드,
스타일과 함께 빛나네,
이미지도 추가되어,
모두가 즐겁게,
학문을 나누는 곳,
함께하는 우리들! 🌼


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
🪧 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 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.

@SunwooJaeho SunwooJaeho changed the title 구성원 소개 페이지 퍼블리싱 feat: 구성원 소개 페이지 퍼블리싱 Nov 13, 2024
@wontory wontory changed the title feat: 구성원 소개 페이지 퍼블리싱 feat(community): 구성원 소개 페이지 퍼블리싱 Nov 13, 2024
@wontory wontory added the enhancement New feature or request label Nov 13, 2024
coderabbitai[bot]

This comment was marked as off-topic.

coderabbitai[bot]

This comment was marked as off-topic.

Copy link
Member

@wontory wontory left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

회의 변경사항 적용해주세요!

  • page-header 적용
  • 절대경로 사용
  • next/image 적용
  • 그 외

Comment on lines 15 to 24
{!imgError ? (
<Image
src={professor.img ?? 'https://placehold.co/128'}
width={100}
height={100}
className={styles.avatarImage}
alt={professor.name}
onError={() => setImgError(true)}
/>
) : (
Copy link
Member

@wontory wontory Nov 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

대체 이미지가 있는데 error state를 둔 이유가 있나요?
error state 빼면 서버 컴포넌트로도 가능할 것 같아요!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 이미지는 외부 url을 통해 불러오기 때문에 onError를 활용하는 방안을 유지했고, placehold 이미지는 필요가 없다고 판단되어 삭제 조치했습니다!

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range comments (1)
apps/community/next.config.ts (1)

Line range hint 8-18: images 설정이 중복되어 있습니다.

nextConfig 객체 내에 images 설정이 두 번 정의되어 있습니다. 두 번째 설정(23-35줄)만 적용되고 첫 번째 설정(8-18줄)은 무시됩니다.

다음과 같이 중복된 설정을 제거하고 하나로 통합하세요:

const nextConfig: NextConfig = {
-  images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'placehold.co',
-      },
-      {
-        protocol: 'https',
-        hostname: 'www.kyonggi.ac.kr',
-      },
-    ],
-  },
  experimental: {
    reactCompiler: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'kutis.kyonggi.ac.kr',
        pathname: '/webkutis/**',
      },
      {
        protocol: 'https',
        hostname: 'placehold.co',
      },
    ],
  },
};

Also applies to: 23-35

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE

📥 Commits

Reviewing files that changed from the base of the PR and between e2a8ff4 and 479019a.

📒 Files selected for processing (1)
  • apps/community/next.config.ts (1 hunks)
🔇 Additional comments (2)
apps/community/next.config.ts (2)

31-33: placehold.co 도메인에 대한 보안 설정 검토가 필요합니다.

이전 리뷰에서 지적된 보안 문제가 아직 해결되지 않았습니다. placehold.co 도메인에 대한 pathname 제한이 없어 보안상 위험할 수 있습니다.


26-29: kutis.kyonggi.ac.kr 도메인 설정을 검증해주세요.

새로 추가된 kutis.kyonggi.ac.kr 도메인의 경우:

  1. pathname이 /webkutis/**로 제한되어 있어 보안상 좋습니다.
  2. 하지만 이 경로가 실제로 교수 이미지를 제공하는 올바른 경로인지 확인이 필요합니다.
✅ Verification successful

kutis.kyonggi.ac.kr 도메인 설정이 올바르게 구성되어 있습니다

코드베이스 분석 결과:

  • /webkutis/TransferImageStreamHJ.do 경로가 교수 이미지를 제공하는 실제 엔드포인트로 확인됨
  • professor.ts 목업 데이터에서 해당 URL이 교수 프로필 이미지로 사용되고 있음
  • next.config.ts의 pathname: '/webkutis/**' 설정이 실제 사용되는 경로와 일치함
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify image URLs in the codebase that use kutis.kyonggi.ac.kr domain

# Search for image URLs in the codebase
rg -i "kutis\.kyonggi\.ac\.kr/webkutis" --type ts --type tsx

Length of output: 90


Script:

#!/bin/bash
# Search for image URLs in the codebase with broader file types and patterns
rg -i "kutis\.kyonggi\.ac\.kr" -t js -t jsx -t ts -t typescript

# Also check for any Next.js image configurations
rg -i "images.*kyonggi" -t js -t jsx -t ts -t typescript

# List all files that might contain image-related code
fd -e tsx -e ts -e js -e jsx | grep -i "image"

Length of output: 227


Script:

#!/bin/bash
# Search for any references to kutis.kyonggi.ac.kr in all text files
rg -i "kutis\.kyonggi\.ac\.kr"

# Find and examine next.config files
fd "next.config" --type f --exec cat {}

# Look for image-related configurations
rg -i "images.*=" --type-add 'ts:*.ts' --type ts

Length of output: 7177

@gwansikk
Copy link
Member

@SunwooJaeho
Copy link
Contributor Author

CI Build 에러 확인해주세요

에러 확인 후 수정 완료하였습니다!

@SunwooJaeho SunwooJaeho reopened this Nov 14, 2024
coderabbitai[bot]

This comment was marked as off-topic.

coderabbitai[bot]

This comment was marked as off-topic.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE

📥 Commits

Reviewing files that changed from the base of the PR and between e673eff and 64b3dfc.

📒 Files selected for processing (1)
  • apps/community/src/components/professor-card.tsx (1 hunks)

apps/community/src/components/professor-card.tsx Outdated Show resolved Hide resolved
@kgu-developers kgu-developers deleted a comment from coderabbitai bot Nov 14, 2024
@kgu-developers kgu-developers deleted a comment from coderabbitai bot Nov 14, 2024
apps/community/src/app/member/professor/page.css.ts Outdated Show resolved Hide resolved
apps/community/src/app/member/professor/page.css.ts Outdated Show resolved Hide resolved
apps/community/src/app/member/professor/page.tsx Outdated Show resolved Hide resolved
apps/community/src/components/page-header.css.ts Outdated Show resolved Hide resolved
apps/community/src/components/professor-card.css.ts Outdated Show resolved Hide resolved
apps/community/src/components/professor-card.css.ts Outdated Show resolved Hide resolved
apps/community/src/components/professor-card.css.ts Outdated Show resolved Hide resolved
apps/community/src/components/professor-card.css.ts Outdated Show resolved Hide resolved
apps/community/src/components/professor-card.css.ts Outdated Show resolved Hide resolved
apps/community/src/components/professor-card.css.ts Outdated Show resolved Hide resolved
coderabbitai[bot]

This comment was marked as off-topic.

@SunwooJaeho SunwooJaeho requested a review from gwansikk November 15, 2024 00:56
Copy link
Member

@gwansikk gwansikk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🎉

@SunwooJaeho SunwooJaeho merged commit b1509bf into develop Nov 15, 2024
3 checks passed
@SunwooJaeho SunwooJaeho deleted the feature/publishing-member-page branch November 15, 2024 05:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature]: 구성원 페이지
4 participants