Skip to content

[refactor] year, semester 타입 분리에 따른 리팩토링 #1051

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
seongwon030 merged 4 commits into from
Jan 19, 2026
Merged

[refactor] year, semester 타입 분리에 따른 리팩토링 #1051

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d043f4d
refactor: Award 타입 구조화 및 중복 타입 정의 제거
seongwon030 Jan 17, 2026
c340e4a
refactor: Award 타입 구조화 및 중복 타입 정의 제거
seongwon030 Jan 17, 2026
1483360
Merge branch 'develop-fe' into refactor/#1050-year-semester-type-MOA-523
seongwon030 Jan 18, 2026
35445e0
fix: Award key에 index 추가하여 고유성 보장
seongwon030 Jan 18, 2026
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
70 changes: 39 additions & 31 deletions frontend/src/pages/AdminPage/tabs/ClubIntroEditTab/components/AwardEditor/AwardEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
import deleteButton from '@/assets/images/icons/delete_button_icon.svg';
import selectIcon from '@/assets/images/icons/selectArrow.svg';
import { CustomDropDown } from '@/components/common/CustomDropDown/CustomDropDown';
import { Award } from '@/types/club';
import { Award, SemesterTerm, SemesterTermType } from '@/types/club';
import * as Styled from './AwardEditor.styles';

interface AwardEditorProps {
Expand All @@ -12,12 +12,14 @@ interface AwardEditorProps {

const START_YEAR = 2020;

const parseSemester = (semester: string): number => {
const match = semester.match(/(\d{4})\s+(\d)학기/);
if (!match) return 0;
const year = parseInt(match[1], 10);
const semesterNumber = parseInt(match[2], 10);
return year * 10 + semesterNumber;
const getSemesterSortValue = (award: Award): number => {
const semesterValue = award.semester === SemesterTerm.FIRST ? 1 : 2;
return award.year * 10 + semesterValue;
};

const formatSemesterLabel = (award: Award): string => {
const semesterLabel = award.semester === SemesterTerm.FIRST ? '1학기' : '2학기';
return `${award.year} ${semesterLabel}`;
};

const generateYearOptions = (currentYear: number) => {
Expand All @@ -32,44 +34,49 @@ const generateYearOptions = (currentYear: number) => {
};

const SEMESTER_OPTIONS = [
{ value: '1', label: '1학기' },
{ value: '2', label: '2학기' },
{ value: SemesterTerm.FIRST, label: '1학기' },
{ value: SemesterTerm.SECOND, label: '2학기' },
] as const;

const AwardEditor = ({ awards, onChange }: AwardEditorProps) => {
const currentYear = new Date().getFullYear();
const [selectedYear, setSelectedYear] = useState(currentYear.toString());
const [selectedSemester, setSelectedSemester] = useState('1');
const [selectedSemester, setSelectedSemester] =
useState<SemesterTermType>(SemesterTerm.FIRST);
const [isYearDropdownOpen, setIsYearDropdownOpen] = useState(false);
const [isSemesterDropdownOpen, setIsSemesterDropdownOpen] = useState(false);
const [lastAddedSemester, setLastAddedSemester] = useState<string | null>(
null,
);
const [lastAddedKey, setLastAddedKey] = useState<string | null>(null);
const inputRefs = useRef<Record<string, HTMLInputElement | null>>({});

const yearOptions = generateYearOptions(currentYear);

const sortedAwards = [...awards].sort(
(awardA, awardB) =>
parseSemester(awardB.semester) - parseSemester(awardA.semester),
getSemesterSortValue(awardB) - getSemesterSortValue(awardA),
);

const getAwardKey = (award: Award): string =>
`${award.year}-${award.semester}`;

const handleAddSemester = () => {
const semesterText = `${selectedYear} ${selectedSemester}학기`;
const year = parseInt(selectedYear, 10);

const isDuplicate = awards.some((award) => award.semester === semesterText);
const isDuplicate = awards.some(
(award) => award.year === year && award.semester === selectedSemester,
);
if (isDuplicate) {
alert('이미 추가된 학기입니다.');
return;
}

const newAward: Award = {
semester: semesterText,
year,
semester: selectedSemester,
achievements: [''],
};

onChange([...awards, newAward]);
setLastAddedSemester(semesterText);
setLastAddedKey(getAwardKey(newAward));
};

const handleRemoveSemester = (semesterIndex: number) => {
Expand All @@ -83,7 +90,7 @@ const AwardEditor = ({ awards, onChange }: AwardEditorProps) => {
: award,
);
onChange(updatedAwards);
setLastAddedSemester(awards[semesterIndex].semester);
setLastAddedKey(getAwardKey(awards[semesterIndex]));
};

const handleRemoveAchievement = (
Expand Down Expand Up @@ -122,21 +129,19 @@ const AwardEditor = ({ awards, onChange }: AwardEditorProps) => {
};

useEffect(() => {
if (lastAddedSemester) {
const award = awards.find(
(award) => award.semester === lastAddedSemester,
);
if (lastAddedKey) {
const award = awards.find((award) => getAwardKey(award) === lastAddedKey);
if (award) {
const lastIndex = award.achievements.length - 1;
const key = `${lastAddedSemester}-${lastIndex}`;
const key = `${lastAddedKey}-${lastIndex}`;
const inputRef = inputRefs.current[key];
if (inputRef) {
inputRef.focus();
}
}
setLastAddedSemester(null);
setLastAddedKey(null);
}
}, [awards, lastAddedSemester]);
}, [awards, lastAddedKey]);

return (
<Styled.Container>
Expand Down Expand Up @@ -174,7 +179,7 @@ const AwardEditor = ({ awards, onChange }: AwardEditorProps) => {
<CustomDropDown
options={SEMESTER_OPTIONS}
selected={selectedSemester}
onSelect={setSelectedSemester}
onSelect={(value) => setSelectedSemester(value as SemesterTermType)}
open={isSemesterDropdownOpen}
onToggle={(isOpen) => setIsSemesterDropdownOpen(!isOpen)}
style={{ width: '100px' }}
Expand Down Expand Up @@ -207,13 +212,16 @@ const AwardEditor = ({ awards, onChange }: AwardEditorProps) => {

<Styled.AwardsList>
{sortedAwards.map((award) => {
const awardKey = getAwardKey(award);
const originalIndex = awards.findIndex(
(originalAward) => originalAward.semester === award.semester,
(originalAward) => getAwardKey(originalAward) === awardKey,
);
return (
<Styled.AwardItem key={award.semester}>
<Styled.AwardItem key={awardKey}>
<Styled.SemesterHeader>
<Styled.SemesterTitle>{award.semester}</Styled.SemesterTitle>
<Styled.SemesterTitle>
{formatSemesterLabel(award)}
</Styled.SemesterTitle>
<Styled.RemoveButton
onClick={() => handleRemoveSemester(originalIndex)}
>
Expand All @@ -226,7 +234,7 @@ const AwardEditor = ({ awards, onChange }: AwardEditorProps) => {
<Styled.AchievementItem key={achievementIndex}>
<Styled.AchievementInput
ref={(element) => {
const key = `${award.semester}-${achievementIndex}`;
const key = `${awardKey}-${achievementIndex}`;
inputRefs.current[key] = element;
}}
placeholder='수상 내역을 입력하세요'
Expand Down
58 changes: 28 additions & 30 deletions frontend/src/pages/ClubDetailPage/components/ClubIntroContent/ClubIntroContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,22 @@
import { useState } from 'react';
import { USER_EVENT } from '@/constants/eventName';
import useMixpanelTrack from '@/hooks/useMixpanelTrack';
import { Award, FAQ, IdealCandidate, SemesterTerm } from '@/types/club';
import * as Styled from './ClubIntroContent.styles';

export interface Award {
semester: string;
achievements: string[];
}

export interface IdealCandidate {
tags?: string[]; // TODO: tags가 추가될수도 있음
content: string;
}
const formatSemesterLabel = (award: Award): string => {
const semesterLabel = award.semester === SemesterTerm.FIRST ? '1학기' : '2학기';
return `${award.year} ${semesterLabel}`;
};

export interface Faq {
question: string;
answer: string;
}
const getAwardKey = (award: Award): string => `${award.year}-${award.semester}`;

interface ClubIntroContentProps {
activityDescription?: string;
awards?: Award[];
idealCandidate?: IdealCandidate;
benefits?: string;
faqs?: Faq[];
faqs?: FAQ[];
}

const ClubIntroContent = ({
Expand All @@ -35,11 +28,11 @@ const ClubIntroContent = ({
}: ClubIntroContentProps) => {
const trackEvent = useMixpanelTrack();

const [openFaqIndices, setOpenFaqIndices] = useState<number[]>([]);
const [openFaqIndexes, setOpenFaqIndexes] = useState<number[]>([]);

const handleToggleFaq = (index: number) => {
const isOpening = !openFaqIndices.includes(index);
setOpenFaqIndices((prev) =>
const isOpening = !openFaqIndexes.includes(index);
setOpenFaqIndexes((prev) =>
prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index],
);

Expand All @@ -66,18 +59,23 @@ const ClubIntroContent = ({
<Styled.Section>
<Styled.SectionTitle>동아리 성과</Styled.SectionTitle>
<Styled.TextContainer>
{awards.map((award) => (
<Styled.AwardGroup key={award.semester}>
<Styled.SemesterBadge>{award.semester}</Styled.SemesterBadge>
<Styled.AwardList>
{award.achievements.map((item, idx) => (
<Styled.AwardItem key={`${award.semester}-${idx}`}>
{item}
</Styled.AwardItem>
))}
</Styled.AwardList>
</Styled.AwardGroup>
))}
{awards.map((award) => {
const awardKey = getAwardKey(award);
return (
<Styled.AwardGroup key={awardKey}>
<Styled.SemesterBadge>
{formatSemesterLabel(award)}
</Styled.SemesterBadge>
<Styled.AwardList>
{award.achievements.map((item, idx) => (
<Styled.AwardItem key={`${awardKey}-${idx}`}>
{item}
</Styled.AwardItem>
))}
</Styled.AwardList>
</Styled.AwardGroup>
);
})}
</Styled.TextContainer>
</Styled.Section>
)}
Expand All @@ -102,7 +100,7 @@ const ClubIntroContent = ({
<Styled.FaqHeader>FAQ</Styled.FaqHeader>
<Styled.FaqList>
{faqs.map((faq, index) => {
const isOpen = openFaqIndices.includes(index);
const isOpen = openFaqIndexes.includes(index);
return (
<Styled.FaqItem key={faq.question}>
<Styled.QuestionRow onClick={() => handleToggleFaq(index)}>
Expand Down
10 changes: 9 additions & 1 deletion frontend/src/types/club.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,16 @@ export interface ClubDescription {
recruitmentTarget: string;
}

export const SemesterTerm = {
FIRST: 'FIRST',
SECOND: 'SECOND',
} as const;

export type SemesterTermType = (typeof SemesterTerm)[keyof typeof SemesterTerm];

export interface Award {
semester: string;
year: number;
semester: SemesterTermType;
achievements: string[];
}

Expand Down