Skip to content

fix(mobile): 동아리 정보 수정 화면 필수값 표시 및 인풋 스타일 정리 #175

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.

Sign up for GitHub

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

Merged
dennis0405 merged 1 commit into from
Oct 5, 2026
Merged

fix(mobile): 동아리 정보 수정 화면 필수값 표시 및 인풋 스타일 정리 #175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 124 additions & 38 deletions apps/mobile/src/features/club/screens/ClubInfoEditScreen/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,14 +260,15 @@ SuccessModal.displayName = "SuccessModal";

type ClubCategorySectionProps = {
category: ClubInfoEditFormData["category"];
isMissing: boolean;
onChange: (category: ClubInfoEditFormData["category"]) => void;
};

const ClubCategorySection = memo(
({ category, onChange }: ClubCategorySectionProps) => {
({ category, isMissing, onChange }: ClubCategorySectionProps) => {
return (
<View style={styles.fieldWrapper}>
<Text style={styles.label}>카테고리</Text>
<Text style={styles.label}>*카테고리</Text>
<View style={styles.categoryGrid}>
{CLUB_CATEGORIES.map((categoryOption) => {
const isSelected = category === categoryOption;
Expand All @@ -292,6 +293,9 @@ const ClubCategorySection = memo(
);
})}
</View>
{isMissing && (
<Text style={styles.requiredHint}>카테고리는 필수 입력 정보예요</Text>
)}
</View>
);
},
Expand All @@ -301,14 +305,15 @@ ClubCategorySection.displayName = "ClubCategorySection";

type ClubRecruitTypeSectionProps = {
recruitType: string;
isMissing: boolean;
onChange: (recruitType: string) => void;
};

const ClubRecruitTypeSection = memo(
({ recruitType, onChange }: ClubRecruitTypeSectionProps) => {
({ recruitType, isMissing, onChange }: ClubRecruitTypeSectionProps) => {
return (
<View style={styles.fieldWrapper}>
<Text style={styles.fieldLabel}>모집 형태</Text>
<Text style={styles.fieldLabel}>*모집 형태</Text>
<View style={styles.buttonGroup}>
{CLUB_RECRUIT_TYPES.map((recruitTypeOption) => {
const isSelected = recruitType === recruitTypeOption;
Expand All @@ -333,6 +338,11 @@ const ClubRecruitTypeSection = memo(
);
})}
</View>
{isMissing && (
<Text style={styles.requiredHint}>
모집 형태는 필수 입력 정보예요
</Text>
)}
</View>
);
},
Expand Down Expand Up @@ -497,6 +507,11 @@ type ClubBasicInfoSectionProps = {
department: string;
shortIntro: string;
showDepartmentDropdown: boolean;
isImageMissing: boolean;
isNameMissing: boolean;
isBasicInfoMissing: boolean;
isDepartmentMissing: boolean;
isShortIntroMissing: boolean;
onSelectImage: () => void;
onClubNameChange: (value: string) => void;
onToggleDepartmentDropdown: () => void;
Expand All @@ -510,18 +525,29 @@ const ClubBasicInfoSection = memo(
department,
shortIntro,
showDepartmentDropdown,
isImageMissing,
isNameMissing,
isBasicInfoMissing,
isDepartmentMissing,
isShortIntroMissing,
onSelectImage,
onClubNameChange,
onToggleDepartmentDropdown,
onShortIntroChange,
}: ClubBasicInfoSectionProps) => (
<>
<View style={styles.fieldWrapper}>
<Text style={styles.label}>동아리 대표 이미지</Text>
<Text style={styles.label}>*동아리 대표 이미지</Text>
<Text style={styles.helperDescription}>
4X4 정방형 이미지를 권장드려요
</Text>
<Pressable style={styles.imageUploadBox} onPress={onSelectImage}>
<Pressable
style={[
styles.imageUploadBox,
isImageMissing && styles.imageUploadBoxError,
]}
onPress={onSelectImage}
>
{clubImage ? (
<Image source={{ uri: clubImage }} style={styles.uploadedImage} />
) : (
Expand All @@ -531,25 +557,40 @@ const ClubBasicInfoSection = memo(
<Pressable style={styles.imageChangeButton} onPress={onSelectImage}>
<Text style={styles.imageChangeText}>이미지 변경</Text>
</Pressable>
{isImageMissing && (
<Text style={styles.requiredHint}>
대표 이미지는 필수 입력 정보예요
</Text>
)}
</View>

<View style={styles.fieldWrapper}>
<Text style={styles.label}>동아리명</Text>
<Text style={styles.label}>*동아리명</Text>
<TextField
height={54}
style={styles.textFieldInput}
value={clubName}
placeholder="와플스튜디오"
onChangeText={onClubNameChange}
maxLength={30}
border={
isNameMissing ? { color: Colors.BUTTON_DESTRUCTIVE } : undefined
}
/>
{isNameMissing && (
<Text style={styles.requiredHint}>동아리명은 필수 입력 정보예요</Text>
)}
</View>

<View style={styles.fieldWrapper}>
<Text style={styles.label}>한줄소개</Text>
<Text style={styles.label}>*한줄소개</Text>
<View style={styles.affiliationRow}>
<Pressable
style={[
styles.dropdown,
!!department.trim() && styles.dropdownFilled,
showDepartmentDropdown && styles.dropdownActive,
isDepartmentMissing && styles.dropdownError,
]}
onPress={onToggleDepartmentDropdown}
>
Expand All @@ -566,11 +607,23 @@ const ClubBasicInfoSection = memo(
</View>

<TextField
height={54}
style={styles.textFieldInput}
placeholder="웹/앱 개발 동아리, 경영전략학회"
value={shortIntro}
onChangeText={onShortIntroChange}
maxLength={100}
border={
isShortIntroMissing
? { color: Colors.BUTTON_DESTRUCTIVE }
: undefined
}
/>
{isBasicInfoMissing && (
<Text style={styles.requiredHint}>
동아리 한줄소개는 필수 입력 정보예요
</Text>
)}
</View>
</>
),
Expand All @@ -580,23 +633,28 @@ ClubBasicInfoSection.displayName = "ClubBasicInfoSection";

type ClubDescriptionSectionProps = {
description: string;
isMissing: boolean;
onChange: (value: string) => void;
};

const ClubDescriptionSection = memo(
({ description, onChange }: ClubDescriptionSectionProps) => (
({ description, isMissing, onChange }: ClubDescriptionSectionProps) => (
<View style={styles.fieldWrapper}>
<Text style={styles.fieldLabel}>동아리 추가 설명</Text>
<TextInput
style={styles.descriptionInput}
<Text style={styles.fieldLabel}>*동아리 추가 설명</Text>
<TextField
height={54}
style={styles.textFieldInput}
placeholder="동아리에 대해 자세히 설명해주세요"
placeholderTextColor={Colors.BODYTEXT_DISABLED}
value={description}
onChangeText={onChange}
maxLength={500}
multiline
textAlignVertical="top"
border={isMissing ? { color: Colors.BUTTON_DESTRUCTIVE } : undefined}
/>
{isMissing && (
<Text style={styles.requiredHint}>
동아리 추가 설명은 필수 입력 정보예요
</Text>
)}
</View>
),
);
Expand Down Expand Up @@ -912,15 +970,24 @@ const ClubInfoEditScreen = () => {
JSON.stringify(initialComparable?.snsUrls) ||
areValidSnsUrls(formData.clubSNSUrls);

const isImageMissing = !formData.clubImage;
const isNameMissing = !formData.clubName.trim();
const isDepartmentMissing = !formData.department.trim();
const isShortIntroMissing = !formData.shortIntro.trim();
const isBasicInfoMissing = isDepartmentMissing || isShortIntroMissing;
const isCategoryMissing = !formData.category;
const isRecruitTypeMissing = !formData.recruitType.trim();
const isSnsMissing = !isSNSComplete;
const isDescriptionMissing = !formData.clubDescription.trim();

const isComplete =
!!formData.clubImage &&
!!formData.clubName.trim() &&
!!formData.category &&
!!formData.department.trim() &&
!!formData.shortIntro.trim() &&
!!formData.recruitType.trim() &&
!isImageMissing &&
!isNameMissing &&
!isCategoryMissing &&
!isBasicInfoMissing &&
!isRecruitTypeMissing &&
isSNSComplete &&
!!formData.clubDescription.trim() &&
!isDescriptionMissing &&
(minActivityPeriodMode === "none" ||
!!formData.minActivityPeriodInput.trim());

Expand Down Expand Up @@ -1061,6 +1128,11 @@ const ClubInfoEditScreen = () => {
department={formData.department}
shortIntro={formData.shortIntro}
showDepartmentDropdown={showDepartmentDropdown}
isImageMissing={isImageMissing}
isNameMissing={isNameMissing}
isBasicInfoMissing={isBasicInfoMissing}
isDepartmentMissing={isDepartmentMissing}
isShortIntroMissing={isShortIntroMissing}
onSelectImage={handleSelectImage}
onClubNameChange={handleClubNameChange}
onToggleDepartmentDropdown={handleToggleDepartmentDropdown}
Expand All @@ -1069,11 +1141,13 @@ const ClubInfoEditScreen = () => {

<ClubCategorySection
category={formData.category}
isMissing={isCategoryMissing}
onChange={handleCategoryChange}
/>

<ClubRecruitTypeSection
recruitType={formData.recruitType}
isMissing={isRecruitTypeMissing}
onChange={handleRecruitTypeChange}
/>

Expand All @@ -1095,17 +1169,21 @@ const ClubInfoEditScreen = () => {
<ClubSnsInputList
urls={formData.clubSNSUrls}
onChange={handleSnsUrlsChange}
/>

<ClubActivityImagePicker
images={formData.activityImages}
onChange={handleActivityImagesChange}
required
isMissing={isSnsMissing}
missingText="동아리 SNS URL은 필수 입력 정보예요"
/>

<ClubDescriptionSection
description={formData.clubDescription}
isMissing={isDescriptionMissing}
onChange={handleDescriptionChange}
/>

<ClubActivityImagePicker
images={formData.activityImages}
onChange={handleActivityImagesChange}
/>
</View>

<ClubEditFooter
Expand Down Expand Up @@ -1196,14 +1274,24 @@ const styles = StyleSheet.create({
label: {
...typography.headerXLSemibold,
color: Colors.BODYTEXT_SUB,
paddingLeft: s(5),
},
fieldLabel: {
...typography.headerXLSemibold,
color: Colors.BODYTEXT_SUB,
paddingLeft: s(5),
},
helperDescription: {
...typography.bodySRegular,
color: Colors.BODYTEXT_SUB,
paddingLeft: s(5),
},
requiredHint: {
...typography.bodyMRegular,
color: Colors.POINTCOLOR,
},
textFieldInput: {
paddingHorizontal: s(15),
},
imageUploadBox: {
width: s(150),
Expand All @@ -1217,6 +1305,9 @@ const styles = StyleSheet.create({
marginTop: vs(4),
overflow: "hidden",
},
imageUploadBoxError: {
borderColor: Colors.BUTTON_DESTRUCTIVE,
},
uploadedImage: {
width: "100%",
height: "100%",
Expand Down Expand Up @@ -1251,9 +1342,15 @@ const styles = StyleSheet.create({
borderRadius: 8,
backgroundColor: Colors.WHITE,
},
dropdownFilled: {
borderColor: Colors.BODYTEXT_SUB,
},
dropdownActive: {
borderColor: Colors.BUTTON_SELECTED,
},
dropdownError: {
borderColor: Colors.BUTTON_DESTRUCTIVE,
},
dropdownText: {
...typography.bodyMRegular,
color: Colors.BODYTEXT_SUB,
Expand Down Expand Up @@ -1416,17 +1513,6 @@ const styles = StyleSheet.create({
borderRadius: 8,
backgroundColor: Colors.WHITE,
},
descriptionInput: {
minHeight: vs(60),
...typography.bodyMRegular,
color: Colors.BODYTEXT_MAIN,
paddingHorizontal: s(16),
paddingVertical: vs(12),
borderWidth: 1,
borderColor: Colors.BODYTEXT_DISABLED,
borderRadius: 8,
backgroundColor: Colors.WHITE,
},
footer: {
paddingTop: vs(24),
},
Expand Down
Loading
Loading