Skip to content

팀 생성하기 페이지 퍼블리싱 및 관련 로직 추가 #54

Merged
Jieunsse merged 24 commits into
mainfrom
feature/team-create-page
Feb 19, 2026
Merged

팀 생성하기 페이지 퍼블리싱 및 관련 로직 추가 #54
Jieunsse merged 24 commits into
mainfrom
feature/team-create-page

Conversation

@Jieunsse

@Jieunsse Jieunsse commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

Summary

  • 팀 생성하기 페이지 퍼블리싱
  • 팀명 중복 검증로직 구현
  • 팀 생성 관련 비즈니스 로직 커스텀 훅으로 구현
Screenshot 2026-02-13 at 18 04 51

Issue

Scope

특이사항:

  • tanstack query 적용을 위해 layout에 provider 적용했습니다.
  • api 작성 내용을 별도의 PR로 분리하여 요청할 예정이라 해당 PR에 대해서는 버셀 빌드오류가 발생합니다!

@Jieunsse Jieunsse added this to the 페이지 milestone Feb 13, 2026
@Jieunsse Jieunsse self-assigned this Feb 13, 2026
@Jieunsse Jieunsse added the 기능추가 기능개발 및 추가할 때 사용해주세요. label Feb 13, 2026
@Jieunsse Jieunsse added this to workers Feb 13, 2026
@github-project-automation github-project-automation Bot moved this to 개발 대기중 in workers Feb 13, 2026
@gemini-code-assist

Copy link
Copy Markdown
Contributor

Summary of Changes

Hello @Jieunsse, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자가 새로운 팀을 생성할 수 있는 기능을 도입합니다. 팀 생성 페이지의 사용자 인터페이스를 구축하고, 팀 이름의 유효성을 검사하는 로직을 포함하여 중복된 팀 이름 생성을 방지합니다. 또한, 팀 생성 과정을 관리하는 재사용 가능한 커스텀 훅을 제공하여 비즈니스 로직을 효율적으로 처리합니다. 이 변경사항은 애플리케이션의 팀 관리 기능을 확장하고 사용자 경험을 개선합니다.

Highlights

  • 팀 생성 페이지 퍼블리싱: 사용자가 새로운 팀을 생성할 수 있는 페이지의 UI가 구축되었습니다.
  • 팀명 중복 검증 로직 추가: 새로운 팀 이름이 기존 팀 이름과 중복되는지 확인하는 로직이 구현되었습니다.
  • 팀 생성 비즈니스 로직 커스텀 훅 구현: 팀 생성과 관련된 모든 비즈니스 로직이 재사용 가능한 커스텀 훅으로 추상화되었습니다.
  • Tanstack Query Provider 적용: 전역 레이아웃에 Tanstack Query Provider가 적용되어 애플리케이션 전반에서 데이터 페칭 및 상태 관리가 가능해졌습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • src/app/addteam/_hooks/useCreateTeam.ts
    • 새로운 팀을 생성하고 팀 이름 중복을 검사하는 커스텀 훅 useCreateTeam이 추가되었습니다.
    • 캐시된 팀 이름을 가져와 중복 여부를 확인하는 로직이 포함되었습니다.
  • src/app/addteam/_hooks/useTeams.ts
    • useGroupQuery를 래핑하는 간단한 useTeams 훅이 추가되었습니다.
  • src/app/addteam/_utils/duplicationCalculator.ts
    • 팀 이름을 정규화하고 중복을 확인하는 유틸리티 함수 normalizeTeamNameisDuplicated가 추가되었습니다.
  • src/app/addteam/page.module.css
    • 팀 생성 페이지의 레이아웃, 카드, 제목, 입력 필드 및 버튼에 대한 스타일이 추가되었습니다.
    • 모바일 반응형 디자인을 위한 미디어 쿼리 스타일이 포함되었습니다.
  • src/app/addteam/page.tsx
    • 팀 생성 페이지의 메인 컴포넌트가 추가되었습니다.
    • 팀 이름 입력 필드, 프로필 이미지, 생성 버튼 및 유효성 검사 메시지 표시 로직이 구현되었습니다.
    • useCreateTeam 훅을 사용하여 팀 생성 기능을 통합했습니다.
  • src/app/layout.tsx
    • 애플리케이션 전반에 걸쳐 Tanstack Query를 사용할 수 있도록 Providers 컴포넌트로 자식 요소를 래핑하도록 수정되었습니다.
  • src/app/providers.tsx
    • Tanstack Query의 QueryClientProvider를 설정하는 Providers 컴포넌트가 추가되었습니다.
Activity
  • 이 PR은 현재 생성되었으며, 초기 검토를 기다리고 있습니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Code Review

팀 생성 페이지와 관련 로직 추가에 대한 PR 잘 보았습니다. 전반적으로 tanstack-query를 활용한 데이터 관리와 컴포넌트 구조가 깔끔하게 잘 작성되었습니다. 다만, 팀 이름 중복 검증 로직의 안정성과 생성 성공 후 사용자 경험(UX) 측면에서 개선할 수 있는 두 가지 점을 발견하여 리뷰 코멘트를 남겼습니다. 확인 부탁드립니다.

Comment on lines +30 to +33
const cachedNames = getCachedTeamNames(queryClient);
if (isDuplicated(cachedNames, normalizedName)) {
throw new Error(DUPLICATED_TEAM_NAME_ERROR);
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

high

현재 팀 이름 중복 검사를 클라이언트 측 캐시 데이터에만 의존하고 있어 안정성에 문제가 있을 수 있습니다. 사용자의 캐시가 최신이 아니거나 모든 팀 목록을 포함하지 않을 경우 중복 검사가 실패할 수 있으며, 여러 사용자가 동시에 생성할 때 Race Condition이 발생할 수 있습니다.

가장 안정적인 방법은 서버 API에서 이름의 유일성을 보장하고, 중복 시 에러를 반환하도록 하는 것입니다. 클라이언트에서는 API가 반환하는 에러를 처리하여 사용자에게 알리는 것이 좋습니다. 클라이언트 측 검사는 즉각적인 피드백을 위한 보조 수단으로 활용할 수 있지만, 최종적인 데이터 정합성은 서버에서 책임져야 합니다.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

서버 스펙을 변경할 수 없어 정합성을 확보할 수는 없지만, 리뷰를 반영하여 프론트단에서 할 수 있는 조치를 적용했습니다.

Comment thread src/app/addteam/page.tsx Outdated
Comment on lines +17 to +22
const handleSubmit = async () => {
if (isSubmitDisabled) return;

await createTeam(teamName);
setTeamName('');
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

medium

팀 생성이 성공적으로 완료된 후, 입력 필드를 비우는 것 외에 사용자에게 명확한 피드백이 없습니다. 이로 인해 사용자는 작업이 성공했는지 알기 어렵습니다. 생성 성공을 알리는 메시지를 보여주거나 다른 페이지로 이동시키는 등 후속 처리를 추가하는 것을 권장합니다.

  const handleSubmit = async () => {
    if (isSubmitDisabled) return;

    try {
      await createTeam(teamName);
      setTeamName('');
      // TODO: 팀 생성 성공 후 사용자 피드백(e.g. 토스트 메시지) 또는 페이지 이동(e.g. router.push) 처리가 필요합니다.
    } catch (error) {
      // 에러는 useCreateTeam 훅의 error 상태로 처리되므로 여기서는 별도 처리가 필요하지 않을 수 있습니다.
    }
  };

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

추후 작업 예정입니다.

@Jieunsse Jieunsse merged commit c557d06 into main Feb 19, 2026
1 check failed
@github-project-automation github-project-automation Bot moved this from 개발 대기중 to 개발 완료 in workers Feb 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

기능추가 기능개발 및 추가할 때 사용해주세요.

Projects

Status: 개발 완료

Development

Successfully merging this pull request may close these issues.

2 participants