[REFACTOR/#18] Select(드롭다운) 컴포넌트 코드 리팩토링

[chunjaemin]

📝 요약

• 중복 작성된 index.ts 삭제
• 안쓰이는 불필요한 로직 삭제
• css 통일
• README.md 추가
• disabled 옵션이 동작하도록 로직 추가 (기존에는 disabled 옵션이 더미 옵션이었음)

⚙️ 작업 내용

• disabled 옵션 => 비활 성UI 추가 및 선택해도 값이 바뀌지 않도록 로직 추가
• nativewind로 작성해도 되는 로직은 nativewind를 통해 작성 하도록 css 통일

🔗 관련 이슈

• Closes [REFACTOR/#18] Select(드롭다운) 컴포넌트 코드 리팩토링 #18

관련 사진

disabled 옵션이 적용된 드롭다운 사진

[github-actions]

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

[gemini-code-assist]

Summary of Changes

Hello @chunjaemin, I'm Gemini Code Assist¹! 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은 Select (드롭다운) 컴포넌트의 코드베이스를 리팩토링하여 전반적인 유지보수성을 향상시키고 일관된 스타일링을 적용합니다. 특히, 기존에 더미였던 disabled 옵션이 실제 동작하도록 기능을 추가하여 사용자 경험을 개선하고, 컴포넌트 사용법을 명확히 안내하는 README.md를 포함하여 개발 편의성을 높였습니다.

Highlights

• 중복 파일 제거: 중복된 index.ts 파일을 삭제하여 코드베이스를 정리했습니다.
• 불필요한 로직 제거: 사용되지 않는 로직을 제거하여 코드의 간결성을 높였습니다.
• CSS 스타일링 통일: NativeWind를 활용하여 CSS 스타일링을 통일하고 일관성을 확보했습니다.
• README.md 추가: Select 컴포넌트의 사용 가이드 문서를 추가하여 개발 편의성을 높였습니다.
• Disabled 옵션 기능 구현: 기존에 더미였던 disabled 옵션이 컴포넌트 전체 및 개별 항목에 대해 실제 동작하도록 기능을 추가했습니다.

Changelog

• src/shared/ui/index.ts
  • export * from "./select"; 구문이 포함된 중복 파일을 제거했습니다.
• src/shared/ui/select/README.md
  • Select 컴포넌트의 구현 세부사항, 설치 의존성, import 방법, 빠른 사용 예시, Props 설명, 상태/연결 패턴, 그리고 disabled 옵션 처리 방식에 대한 상세한 가이드를 추가했습니다.
• src/shared/ui/select/Select.tsx
  • useMemo를 사용하여 dropdownData를 생성하던 로직을 제거하고 items를 직접 사용하도록 변경했습니다.
  • disabledTapNonce 상태를 추가하여 react-native-element-dropdown의 disabled 항목 탭 시 내부 선택 상태가 변경되는 문제를 해결하기 위해 강제 리마운트를 유도했습니다.
  • label 텍스트의 className을 text-content-primary color-content-secondary에서 text-content-secondary로 변경하여 스타일을 통일했습니다.
  • onChange 핸들러에 disabled 항목 선택 시 disabledTapNonce를 증가시키고 선택을 무시하는 로직을 추가했습니다.
  • renderItem 함수를 수정하여 disabled 항목에 대해 opacity를 낮추고, 텍스트 색상을 변경하며, 잠금 아이콘을 표시하도록 시각적 피드백을 강화했습니다.

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]

Code Review

이 PR은 Select 컴포넌트의 코드를 리팩토링하고, disabled 옵션이 올바르게 동작하도록 로직을 추가했습니다. 불필요한 index.ts 파일을 삭제하고, CSS 스타일을 통일했으며, README.md 파일을 추가하여 컴포넌트 사용 가이드를 제공합니다. 전반적으로 코드 품질과 사용성을 개선하는 좋은 변경사항입니다. README.md 파일 내 useMemo 사용에 대한 불필요한 부분을 지적하는 피드백이 있습니다.

[gemini-code-assist]

정적 배열 items에 useMemo를 사용하는 것은 불필요합니다. useMemo는 복잡한 계산 결과나 참조 동일성을 유지해야 할 때 사용하며, 이 경우에는 성능 이점이 없고 코드만 복잡하게 만듭니다. useMemo를 제거하고 items 배열을 직접 선언하는 것이 좋습니다.

Suggested change

	const items = useMemo(
	() => [
	{ label: "총학생회", value: "university" },
	{ label: "단과대학 학생회", value: "college" },
	{ label: "학과/부 학생회", value: "department" },
	],
	[]
	const items = [
	{ label: "총학생회", value: "university" },
	{ label: "단과대학 학생회", value: "college" },
	{ label: "학과/부 학생회", value: "department" },
	];

[chunjaemin]

readme.md파일은 예시일 뿐입니다! 데이터의 형태에 맞게 useMemo 사용여부를 결정하면 될 것 같습니다.