Conversation
- ClubCard와 ClubProfile 컴포넌트에서 빈 태그 필터링 로직 추가 - tag.trim()을 사용하여 빈 문자열 및 공백만 있는 태그 제거 - 각 태그에 고유한 key 값 부여 (division, category, tag 구분)
- 모바일 환경에서 배너가 왼쪽으로 치우치는 문제 수정 - 초기 렌더링 시 slideWidth 계산 전 transform 적용 방지 - isReady 상태 추가로 초기화 완료 후 슬라이드 시작 - 리사이즈 시 상태 초기화 로직 개선
- useRef를 사용하여 중복 추적 방지 및 시작 시간 관리 - 컴포넌트 언마운트 시 체류시간 추적 추가 - 페이지 방문 이벤트 메시지 포맷 통일
…ender-FE-106 [fix] 모바일 환경에서 배너 슬라이더 초기 렌더링 문제 해결
- InputField 컴포넌트에 isError 및 helperText prop 추가 - 에러 시 시각적 피드백 및 하단 에러 메시지 표시
- SnsConfig 기반 반복 렌더링으로 SNS 입력 필드 추가 - socialLinks 및 snsErrors 상태 관리 로직 적용 - validateSocialLink로 입력값 유효성 검증 - SNS 링크를 updateClub 요청에 포함
…rguments-FE-112 [feature] 동아리명은 믹스패널에 arguments로 전달
…t-FE-111 [feature] 관리자 페이지 동아리 SNS 링크 등록 기능 추가
[feature] 사용자 에러 추적을 위한 Sentry 적용
|
""" Walkthrough이 변경사항은 Sentry 통합, SNS 링크 입력 및 검증 기능 추가, 입력 필드의 에러 처리 개선, 페이지 뷰 트래킹 개선, 배너 슬라이드 애니메이션 초기화 로직 개선 등을 포함합니다. 또한 관련 상수, 타입, 스타일, 유틸리티 함수 및 테스트 코드가 추가·수정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant Admin as AdminPage(ClubInfoEditTab)
participant User as User
participant Input as InputField
participant Util as validateSocialLink
participant API as UpdateClub API
User->>Input: SNS 링크 입력
Input->>Admin: onChange 이벤트
Admin->>Util: validateSocialLink(플랫폼, 값)
Util-->>Admin: 에러 메시지 or ""
Admin->>Input: isError, helperText prop 전달
User->>Admin: 저장 버튼 클릭
Admin->>Util: 모든 SNS 링크 재검증
Admin->>API: 유효하면 업데이트 요청
Possibly related PRs
Suggested labels
Suggested reviewers
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit 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 📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (3)
📒 Files selected for processing (8)
✅ Files skipped from review due to trivial changes (4)
🚧 Files skipped from review as they are similar to previous changes (1)
🔇 Additional comments (8)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
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: 5
🧹 Nitpick comments (11)
frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx (1)
11-11: MarkdownEditor 코드 스플리팅 제안
MarkdownEditor는 용량이 큰 에디터 컴포넌트일 가능성이 큽니다.React.lazy와Suspense를 활용해 동적 import를 적용하면 초기 번들 크기를 줄여 페이지 로딩 성능을 개선할 수 있습니다.frontend/src/constants/snsConfig.ts (1)
10-10: 유튜브 URL 패턴 확장 고려현재 정규식은
channel/및@형식의 URL만 허용하고 있습니다. 유튜브는youtube.com/c/사용자명또는youtube.com/user/사용자명같은 다른 URL 형식도 지원합니다.- regex: /^https:\/\/(www\.)?youtube\.com\/(channel\/|@)[A-Za-z0-9._%-]+\/?$/, + regex: /^https:\/\/(www\.)?youtube\.com\/(channel\/|@|c\/|user\/)[A-Za-z0-9._%-]+\/?$/,frontend/.gitignore (1)
19-21: gitignore 항목 추가테스트 커버리지 디렉토리(
coverage/)와 Sentry 설정 파일(.env.sentry-build-plugin)을 .gitignore에 추가한 것은 적절합니다. 이러한 파일들은 버전 관리에서 제외되어야 하는 생성된 파일 또는 민감한 정보를 포함할 수 있는 파일입니다.단, 19번 줄의
coverage/뒤에 불필요한 공백이 있으니 제거하는 것이 좋겠습니다.-coverage/ +coverage/frontend/src/utils/validateSocialLink.ts (1)
4-10: 검증 로직이 깔끔합니다소셜 링크 검증 함수가 잘 구현되어 있습니다. 빈 값 체크와 정규식 검증을 통해 적절한 에러 메시지를 반환하는 구조가 깔끔합니다.
다음과 같은 보완 사항을 고려해 볼 수 있습니다:
- 링크가 빈 값인 경우 필수 입력 여부를 검증하는 별도의 로직 추가
- 에러 메시지 다국어 지원을 위한 분리
에러 메시지를 상수로 분리하는 리팩토링을 제안합니다:
- return `${label} 링크 형식이 조금 이상해요. 다시 한 번 확인해주세요!`; + const ERROR_MESSAGE = `${label} 링크 형식이 조금 이상해요. 다시 한 번 확인해주세요!`; + return ERROR_MESSAGE;frontend/src/components/common/InputField/InputField.tsx (1)
89-91: 도움말 텍스트 조건부 렌더링에러 상태일 때만 도움말 텍스트를 렌더링하는 조건부 렌더링이 깔끔하게 구현되어 있습니다. 이는 사용자에게 필요한 시점에만 피드백을 제공하는 좋은 UX 관행입니다.
스크린 리더 접근성을 위해 ARIA 속성 추가를 고려해볼 수 있습니다.
접근성 향상을 위한 ARIA 속성 추가를 제안합니다:
- <Styled.HelperText>{helperText}</Styled.HelperText> + <Styled.HelperText role="alert" aria-live="polite">{helperText}</Styled.HelperText>frontend/src/utils/validateSocialLink.test.ts (2)
25-37: 테스트 보일러플레이트 최소화 제안
platforms.forEach+ 람다 함수 패턴이 각 테스트마다 반복되고 있어요.
test.each(또는describe.each)를 활용하면 중복을 줄이고 케이스를 테이블화하여 가독성을 높일 수 있습니다.- const expectNoError = (platform: SNSPlatform, link: string) => { - expect(validateSocialLink(platform, link)).toBe(''); - }; + const expectNoError = (platform: SNSPlatform, link: string) => + expect(validateSocialLink(platform, link)).toBe('');처럼 한 줄 함수로 간략화하거나, 아래와 같이 케이스를 묶어볼 수 있습니다:
describe.each(platforms)('%s URL 검증', (platform) => { it('유효한 링크 → 통과', () => { expect(validateSocialLink(platform, validLinks[platform])).toBe(''); }); it('잘못된 링크 → 실패', () => { expect(validateSocialLink(platform, invalidLinks[platform])).toBe( `${SNS_CONFIG[platform].label} 링크 형식이 조금 이상해요. 다시 한 번 확인해주세요!`, ); }); });
64-68: 혼동 방지를 위한 유니코드 주석 개선러시아어 ‘о’ 문자를 사용한 스푸핑 예시는 매우 좋은 케이스입니다.
다만, 두 문자가 시각적으로 같아 차이를 한눈에 파악하기 어렵기 때문에 코드 포인트를 주석에 명시하면 이해하기 더 쉽습니다.-// 러시아어 소문자 о (U+043E) +// U+043E(русская 'о')를 사용한 도메인 스푸핑 예시frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.styles.ts (1)
52-57: 접근성(A11y) 관점의 label 요소 사용
SNSCheckboxLabel은 시멘틱한<label>태그이지만, 실제로 연결된htmlFor대상을 지정하지 않고 순수 스타일 컨테이너로 사용되고 있습니다.
스크린 리더 등 보조 기기에 혼란을 줄 수 있으니 두 가지 중 하나를 고려해 주세요.
- 시멘틱 목적이 없으면
<div>또는<span>으로 변경- 연결할
id를InputField에 전달하고label에htmlFor속성을 설정-export const SNSCheckboxLabel = styled.label` +export const SNSCheckboxLabel = styled.span`frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.tsx (3)
50-62:useEffect내부 로직 결합 가능
clubDetail이 존재할 때 두 번의if블록이 각각setSocialLinks,setClubTags를 호출합니다.
하나의if (clubDetail)블록으로 합치면 불필요한 조건 검사를 줄이고 가독성이 향상됩니다.
88-97: 빈 태그 문자열 필터링 권장
tags배열에 빈 문자열이 포함되어 있는 상태로 서버에 전송될 수 있습니다(초기값['', '']대비).
서버 유효성 검사 실패나 불필요한 데이터 저장을 방지하려면 전송 직전에filter(Boolean)처리를 권장드립니다.- tags: clubTags, + tags: clubTags.filter(Boolean),
192-205:SNSCheckboxLabel와 인풋 간의 시맨틱 연결스타일 파일에서 언급한 것과 같이, 시멘틱한
<label>을 사용했다면htmlFor속성과id를 연결해 접근성을 보장해 주세요.-<Styled.SNSCheckboxLabel>{label}</Styled.SNSCheckboxLabel> +<Styled.SNSCheckboxLabel htmlFor={`${key}-input`}>{label}</Styled.SNSCheckboxLabel> ... - <InputField + <InputField + id={`${key}-input`}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (18)
frontend/.gitignore(1 hunks)frontend/package.json(1 hunks)frontend/src/components/common/InputField/InputField.styles.ts(2 hunks)frontend/src/components/common/InputField/InputField.tsx(4 hunks)frontend/src/constants/snsConfig.ts(1 hunks)frontend/src/hooks/useTrackPageView.ts(1 hunks)frontend/src/index.tsx(2 hunks)frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.styles.ts(1 hunks)frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.tsx(6 hunks)frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/components/SelectTags/SelectTags.tsx(1 hunks)frontend/src/pages/AdminPage/tabs/PhotoEditTab/PhotoEditTab.tsx(1 hunks)frontend/src/pages/AdminPage/tabs/PhotoEditTab/components/ImageUpload/ImageUpload.tsx(1 hunks)frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx(1 hunks)frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx(1 hunks)frontend/src/pages/MainPage/components/Banner/Banner.tsx(3 hunks)frontend/src/types/club.ts(3 hunks)frontend/src/utils/validateSocialLink.test.ts(1 hunks)frontend/src/utils/validateSocialLink.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
frontend/src/utils/validateSocialLink.ts (2)
frontend/src/types/club.ts (1)
SNSPlatform(14-14)frontend/src/constants/snsConfig.ts (1)
SNS_CONFIG(1-17)
frontend/src/utils/validateSocialLink.test.ts (3)
frontend/src/types/club.ts (1)
SNSPlatform(14-14)frontend/src/constants/snsConfig.ts (1)
SNS_CONFIG(1-17)frontend/src/utils/validateSocialLink.ts (1)
validateSocialLink(4-10)
frontend/src/types/club.ts (1)
frontend/src/constants/snsConfig.ts (1)
SNS_CONFIG(1-17)
frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.tsx (3)
frontend/src/types/club.ts (1)
SNSPlatform(14-14)frontend/src/utils/validateSocialLink.ts (1)
validateSocialLink(4-10)frontend/src/constants/snsConfig.ts (1)
SNS_CONFIG(1-17)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - moadong
- GitHub Check: Header rules - moadong
- GitHub Check: Pages changed - moadong
🔇 Additional comments (26)
frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx (1)
4-4: Calendar 컴포넌트 import 경로 일관성 확인
다른 AdminPage 탭(PhotoEditTab 등)과 동일하게 컴포넌트를 탭 전용 디렉터리로 분리하여 모듈 구조를 개선한 점이 좋습니다.frontend/src/pages/AdminPage/tabs/PhotoEditTab/components/ImageUpload/ImageUpload.tsx (1)
54-55: onClick 핸들러 중괄호 닫기 및 개행 추가로 가독성 개선
콜백 내부의 중괄호 닫기와 개행 적용만 있는 형식 변경이므로 기능에는 영향이 없으며, 코드 가독성이 향상되었습니다.frontend/src/pages/AdminPage/tabs/PhotoEditTab/PhotoEditTab.tsx (1)
4-5: 컴포넌트 경로 로컬라이징 반영
ImageUpload와 ImagePreview의 import 경로를 탭 전용 디렉터리로 옮겨 모듈화가 강화되었으며, 구조가 더 명확해졌습니다.frontend/src/constants/snsConfig.ts (1)
1-17: SNS 설정 개체가 잘 구성되어 있습니다SNS 연결 관리를 위한 설정 상수를 만들어 일관된 접근 방식을 제공하고 있어 좋습니다. 레이블, 자리표시자, 정규식 패턴이 각 플랫폼에 맞게 적절히 구성되어 있습니다.
frontend/src/components/common/InputField/InputField.styles.ts (1)
22-48: 오류 상태에 대한 스타일링 개선입력 필드에 오류 상태 스타일링을 추가한 것은 좋은 UX 개선입니다. 빨간색 테두리와 그림자로 사용자에게 명확한 시각적 피드백을 제공합니다.
frontend/src/hooks/useTrackPageView.ts (3)
5-9: useRef를 사용한 방식 개선시작 시간과 추적 상태를
useRef로 관리하도록 개선한 것은 좋은 변경입니다. 이를 통해 컴포넌트가 다시 렌더링되더라도 일관된 시간 측정이 가능해집니다.
18-28: 추적 중복 방지 로직 추가추적이 중복으로 발생하지 않도록
isTracked플래그를 확인하는 로직을 추가한 것은 좋은 개선입니다. 이로 인해 이벤트 데이터의 정확성이 향상됩니다.
37-42: 클린업 함수 개선컴포넌트 언마운트 시
trackPageDuration을 호출하여 페이지 머문 시간을 확실히 기록하도록 개선된 것은 좋습니다.frontend/src/pages/MainPage/components/Banner/Banner.tsx (6)
20-22: 배너 컴포넌트의 초기화 상태 개선새로운
isReady상태 변수를 추가하고isAnimating의 초기값을 false로 설정한 것은 좋은 변경입니다. 이렇게 하면 컴포넌트가 완전히 초기화되기 전에 애니메이션이 시작되는 것을 방지할 수 있습니다.
27-39: 슬라이드 초기화 로직 개선
updateSlideWidth함수의 업데이트로 슬라이드 너비가 유효할 때만 애니메이션을 활성화하도록 한 점이 좋습니다. 이는 컴포넌트가 완전히 준비되기 전에 발생할 수 있는 시각적 버그를 방지합니다.
41-54: 리사이즈 이벤트 처리 개선윈도우 리사이즈 시
isReady와isAnimating을 초기화하는 것은 레이아웃 변경 중 애니메이션이 발생하는 것을 방지하는 좋은 접근법입니다.
56-87: 슬라이드 효과 안정성 향상슬라이드 효과를 적용하기 전에
slideWidth와isReady상태를 확인하는 것은 컴포넌트가 준비되기 전에 변환이 적용되는 것을 방지하는 좋은 방어적 프로그래밍 방식입니다.
89-101: 슬라이드 이동 함수 보호 추가슬라이드 이동 함수에
isReady확인을 추가한 것은 컴포넌트가 완전히 초기화되기 전에 네비게이션이 발생하는 것을 방지하는 좋은 방법입니다.
103-111: 자동 슬라이드 타이머 조건 개선자동 슬라이드 효과가
isReady상태에 의존하도록 한 것은 컴포넌트가 완전히 준비되기 전에 타이머가 작동하는 것을 방지하는 좋은 접근법입니다.frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/components/SelectTags/SelectTags.tsx (1)
17-21: JSX 구문 오류 수정
<Styled.Button>태그에 닫는 꺾쇠 괄호>를 추가한 것은 올바른 수정입니다. 이 변경으로 이전에 존재했던 JSX 구문 오류가 해결되었습니다.frontend/package.json (1)
24-25:Details
❓ Verification inconclusive
Sentry 의존성 추가
Sentry 관련 패키지(
@sentry/react와@sentry/webpack-plugin)를 추가한 것은 애플리케이션에 에러 추적 및 모니터링 기능을 통합하기 위한 좋은 변경입니다. 단, Sentry가 애플리케이션 코드(아마도index.tsx)에서 올바르게 초기화되었는지 확인하고, 개발 및 프로덕션 환경에 맞게 적절히 구성되었는지 확인하는 것이 중요합니다.다음 스크립트를 실행하여 Sentry 초기화 코드가 존재하는지 확인해보세요:
🏁 Script executed:
#!/bin/bash # Sentry 초기화 코드 검색 echo "Checking for Sentry initialization..." rg "import \* as Sentry from '@sentry/react'" -A 10 --type tsLength of output: 661
다음 스크립트를 실행하여 Sentry 초기화 호출(
Sentry.init)이 있는지 확인해보세요:
🏁 Script executed:
#!/bin/bash echo "Sentry 초기화 호출(Sentry.init) 검색 중..." # ts 및 tsx 파일에서 Sentry.init 호출 검색 rg "Sentry\\.init" -A 5 -g '*.ts' -g '*.tsx'Length of output: 400
Sentry 초기화 확인 및 환경 변수 검증 필요
frontend/src/index.tsx에서 다음과 같이 Sentry가 올바르게 import·init 된 것이 확인되었습니다.
- import:
import * as Sentry from '@sentry/react';- 초기화:
Sentry.init({ dsn: process.env.SENTRY_DSN, sendDefaultPii: false, release: process.env.SENTRY_RELEASE, tracesSampleRate: 0.1, });남은 과제는 개발/프로덕션 환경에 맞는 환경 변수 설정이 제대로 이루어졌는지 검증하는 것입니다.
.env또는 CI/CD 환경에SENTRY_DSN,SENTRY_RELEASE값이 올바르게 설정되었는지 확인- 개발 환경에서는 로깅 레벨·샘플링(rate) 조정을 고려
- 프로덕션 환경 배포 전 리포트 전송 여부와 release 태깅이 제대로 동작하는지 테스트
frontend/src/index.tsx (2)
6-6: Sentry 의존성 추가 확인Sentry React SDK를 추가했습니다. 이는 오류 모니터링을 위한 좋은 선택입니다.
package.json에 관련 의존성(@sentry/react,@sentry/webpack-plugin)이 추가되었는지 확인해주세요.
26-31:Details
❓ Verification inconclusive
Sentry 설정 구현이 깔끔합니다
Sentry 초기화 설정이 적절하게 구현되었습니다. 특히 개인정보 전송 방지를 위한
sendDefaultPii: false설정과 적절한 샘플링 비율(10%)을 지정한 것이 좋습니다.환경 변수가 제대로 설정되어 있는지 확인이 필요합니다:
🏁 Script executed:
#!/bin/bash # Check if Sentry environment variables are properly set in CI/CD echo "Checking for Sentry environment variables..." grep -r "SENTRY_DSN\|SENTRY_RELEASE" .github/workflows/ || echo "No Sentry env vars found in workflows"Length of output: 293
#!/bin/bash echo "Checking for CI/CD configuration files at repository root and common directories..." # Check for GitHub Actions workflows if [ -d .github/workflows ]; then echo "Found .github/workflows directory:" ls -1 .github/workflows else echo "No .github/workflows directory" fi # Check for GitLab CI configuration if [ -f .gitlab-ci.yml ]; then echo "Found .gitlab-ci.yml" else echo "No .gitlab-ci.yml" fi # Check for CircleCI configuration if [ -d .circleci ]; then echo "Found .circleci directory:" ls -1 .circleci else echo "No .circleci directory" fi # Check for Azure Pipelines configuration if [ -f azure-pipelines.yml ]; then echo "Found azure-pipelines.yml" else echo "No azure-pipelines.yml" fi # Search for Sentry env vars in any YAML configurations echo "Searching for SENTRY_DSN or SENTRY_RELEASE in all YAML files..." grep -R "SENTRY_DSN\\|SENTRY_RELEASE" --include="*.yml" -n .
#!/bin/bash echo "CI/CD 구성 파일 검사 중..." # GitHub Actions if [ -d .github/workflows ]; then echo "GitHub Actions 워크플로우 파일:" ls -1 .github/workflows else echo "GitHub Actions 워크플로우 없음" fi # Travis CI if [ -f .travis.yml ]; then echo "Found .travis.yml" else echo "No .travis.yml" fi # Jenkins if [ -f Jenkinsfile ]; then echo "Found Jenkinsfile" else echo "No Jenkinsfile" fi # GitLab CI if [ -f .gitlab-ci.yml ]; then echo "Found .gitlab-ci.yml" else echo "No .gitlab-ci.yml" fi # CircleCI if [ -d .circleci ]; then echo "CircleCI 구성 파일:" ls -1 .circleci else echo "No .circleci" fi # Azure Pipelines if [ -f azure-pipelines.yml ]; then echo "Found azure-pipelines.yml" else echo "No azure-pipelines.yml" fi # SENTRY 환경 변수 검색 echo "SENTRY_DSN 및 SENTRY_RELEASE 검색 중..." grep -R "SENTRY_DSN\\|SENTRY_RELEASE" -n .
CI/CD 환경변수 설정 확인 필요
현재 리포지토리에서 CI/CD 구성 파일을 찾을 수 없어 자동으로 SENTRY_DSN·SENTRY_RELEASE 설정 여부를 검증하지 못했습니다. 배포·빌드 파이프라인에 아래 항목이 올바르게 설정되어 있는지 확인해 주세요:
.github/workflows/*.yml(GitHub Actions).gitlab-ci.yml(GitLab CI)azure-pipelines.yml(Azure Pipelines).circleci/config.yml(CircleCI)- 사용 중인 다른 CI 도구의 설정 파일
frontend/src/types/club.ts (3)
1-1: 상수 임포트 확인SNS_CONFIG 상수를 imports하고 있습니다. 타입과 상수 간의 일관성을 유지하기 위한 좋은 접근법입니다.
14-14: 타입 정의가 적절합니다
keyof typeof연산자를 사용하여 SNS_CONFIG의 키들로부터 SNSPlatform 타입을 정의한 것이 좋습니다. 이는 SNS 플랫폼이 추가되거나 변경될 때 타입을 자동으로 업데이트할 수 있게 해줍니다.
25-25: Record 타입 사용이 적절합니다
Record<SNSPlatform, string>타입을 사용하여 소셜 링크를 관리하는 방식이 적절합니다. 이는 타입 안전성을 제공하면서도 모든 SNS 플랫폼에 대한 링크를 관리하는 깔끔한 방법입니다.frontend/src/utils/validateSocialLink.ts (1)
1-3: 필요한 임포트가 있습니다SNS_CONFIG와 SNSPlatform 타입을 적절히 임포트하고 있습니다.
frontend/src/components/common/InputField/InputField.tsx (3)
17-18: 에러 상태 처리를 위한 props 추가에러 상태와 도움말 텍스트를 위한 props를 추가한 것은 좋은 개선입니다. 이는 사용자에게 더 나은 피드백을 제공할 수 있게 해줍니다.
33-34: props 구조 분해가 적절합니다새로운 props를 컴포넌트 파라미터에서 구조 분해하여 사용하고 있습니다.
71-71:Details
✅ Verification successful
스타일 컴포넌트에 에러 상태 전달
에러 상태를 스타일 컴포넌트에
hasErrorprop으로 전달하는 것이 좋습니다. 이를 통해 에러 상태일 때 시각적 피드백을 제공할 수 있습니다.InputField.styles.ts 파일에서 hasError prop에 따른 스타일 변경이 제대로 구현되어 있는지 확인해 보세요:
🏁 Script executed:
#!/bin/bash cat $(find frontend/src/components/common/InputField -name "InputField.styles.ts")Length of output: 2160
hasError 스타일 적용 확인 완료
InputField.styles.ts의Input컴포넌트는hasErrorprop을 사용해 경계(border) 색상, 포커스 시 보더 및 박스 쉐도우 색상을 올바르게 변경하고 있습니다. 추가적인 수정 없이 의도한 시각적 피드백이 정상 동작합니다.frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.styles.ts (1)
34-35: 전체 레이아웃 여백 조정 확인 필요
TagEditGroup의margin-bottom이 120px으로 증가했습니다.
동일한 섹션(InfoGroup)의margin-bottom: 140px과 조합될 때 하단 공백이 과도하게 늘어날 수 있으니 디자인 시안과 맞는지 한 번 더 확인 부탁드립니다.
SnsLinkIcons 제작
UI 스타일 컴포넌트 추가
- SnsLinkIcons 컴포넌트를 render 필드로 전달하여 렌더링 - socialLinks를 기반으로 SNS 정보 노출
- 반복 렌더링 구조로 중복 코드 제거 - props의 출처를 명확히 하기 위해 네이밍 수정 - API 응답 구조에 맞춰 props 타입을 일반화
- onSubmit type설정
…nt-FE-115 [fix] useRef에서 startTime.current 프로퍼티 누락 오류 수정
…FE-105 [fix] ClubTag 컴포넌트의 중복 key 문제 해결
…er-key-support-FE-116 [feature] 관리자 페이지 Enter키 로그인 기능 추가
…play-FE-114 [feature] 상세페이지 동아리 SNS 링크 노출 기능 추가
2 participants
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항
Summary by CodeRabbit
신규 기능
버그 수정
스타일
테스트
기타