Skip to content
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

[FE] 캘린더 메모 기능 추가 #981

Merged
merged 21 commits into from
Jan 13, 2025
Merged

[FE] 캘린더 메모 기능 추가 #981

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
9051e0e
refactor: 캘린더 등록, 수정 모달 사이즈 줄이기
hafnium1923 Dec 29, 2024
e8d39c5
chore: storybook 7-> 8 업그레이드
hafnium1923 Jan 3, 2025
2d333a5
feat: switch 공용 컴포넌트 구현
hafnium1923 Jan 3, 2025
275733f
feat: 캘린더 수정, 등록 모달 종일 체크박스에서 스위치로 변경
hafnium1923 Jan 3, 2025
06097e2
feat: 캘린더 등록, 수정 모달에 메모 추가
hafnium1923 Jan 3, 2025
7a58270
feat: 캘린더 조회 메모 구현
hafnium1923 Jan 3, 2025
0735d26
refactor: mock data endDateTime 수정
hafnium1923 Jan 3, 2025
9223caa
refactor: 요술토끼 리뷰 반영
hafnium1923 Jan 10, 2025
f714b6b
fix: 메모 없을 때 등록안되는 버그 픽스
hafnium1923 Jan 13, 2025
584a7a8
refactor: 오타 수정
hafnium1923 Jan 13, 2025
15c54ba
refactor: 캘린더 등록, 수정 모달 사이즈 줄이기
hafnium1923 Dec 29, 2024
7efd92e
chore: storybook 7-> 8 업그레이드
hafnium1923 Jan 3, 2025
4c7c560
feat: switch 공용 컴포넌트 구현
hafnium1923 Jan 3, 2025
d06940c
feat: 캘린더 수정, 등록 모달 종일 체크박스에서 스위치로 변경
hafnium1923 Jan 3, 2025
3f7cf02
feat: 캘린더 등록, 수정 모달에 메모 추가
hafnium1923 Jan 3, 2025
8cb20d6
feat: 캘린더 조회 메모 구현
hafnium1923 Jan 3, 2025
afc05d7
refactor: mock data endDateTime 수정
hafnium1923 Jan 3, 2025
65e6fbd
refactor: 요술토끼 리뷰 반영
hafnium1923 Jan 10, 2025
53e9223
fix: 메모 없을 때 등록안되는 버그 픽스
hafnium1923 Jan 13, 2025
a475c3b
refactor: 오타 수정
hafnium1923 Jan 13, 2025
6ebe60f
Merge branch 'feat/fe/캘린더-메모-기능-추가' of https://github.com/woowacourse…
hafnium1923 Jan 13, 2025
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
18 changes: 0 additions & 18 deletions frontend/src/components/common/Switch/Switch.tsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

다른 건 모르겠고 이 컴포넌트에 진심이라는 건 잘 알겠어 ㅋㅋ

image

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

ㅋㅋㅋㅋㅋㅋ아니 사실은 이거 내가 혼자만들고 있는 디자인시스템에서 긁어온거거든..? 공용 컴포넌트 하나씩 만들고 있었어서.. 근데 디자인시스템이니까 사용방법을 써야할 거 아냐 그래서 완전 열심히 써둠ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 긁어오면서 설명 지울필요를 못느껴서 그대로 뒀서🤪

Original file line number Diff line number Diff line change
Expand Up @@ -79,20 +79,10 @@ const Switch = ({
const [isOn, setIsOn] = useState(checked);
const throttleTimeout = useRef<number | null>(null);

const throttledOnChange = useCallback(() => {
if (throttleTimeout.current === null) {
onChange();
throttleTimeout.current = window.setTimeout(() => {
throttleTimeout.current = null;
}, 500);
}
}, [onChange]);

const handleClickToggle = () => {
if (!readonly && !disabled) {
setIsOn((prevState) => !prevState);
onChange();
// throttledOnChange();
}
};

Expand All @@ -102,14 +92,6 @@ const Switch = ({
}
}, [checked, isOn]);

// useEffect(() => {
// return () => {
// if (throttleTimeout.current !== null) {
// clearTimeout(throttleTimeout.current);
// }
// };
// }, []);

return (
<S.ContainerDiv $descriptionPosition={descriptionPosition} style={style}>
{description &&
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/components/team_calendar/ScheduleAddModal/ScheduleAddModal.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,10 +138,6 @@ export const ControlButtonWrapper = styled.div`
height: 38px;
`;

export const DescriptionDiv = styled.div<{ $isDescription: boolean }>`
display: ${({ $isDescription }) => ($isDescription ? 'block' : 'none')};
`;

export const DescriptionTextarea = styled.textarea`
display: inline-block;
width: 100%;
Expand Down
45 changes: 26 additions & 19 deletions frontend/src/components/team_calendar/ScheduleAddModal/ScheduleAddModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { getIsMobile } from '~/utils/getIsMobile';
import Switch from '~/components/common/Switch/Switch';
import theme from '~/styles/theme';
import Svg from '~/components/common/Svg/Svg';
import { SCHEDULE_DESCRIPTION_MAX_LENGTH } from '~/constants/calendar';

interface ScheduleAddModalProps {
calendarSize?: CalendarSize;
Expand Down Expand Up @@ -172,25 +173,31 @@ const ScheduleAddModal = (props: ScheduleAddModalProps) => {
</Text>
</Button>
</S.ConvenientContainer>
<S.DescriptionDiv $isDescription={isDescription}>
<S.DescriptionTextarea
rows={1}
placeholder="메모를 작성해주세요.(최대 100자)"
value={schedule.description}
ref={descriptionInputRef}
onChange={handleDescriptionInput}
required
/>
<S.WarnDiv>
{!isDescriptionMaxLength ? (
<Text size="xs">({schedule.description.length} / 100자)</Text>
) : (
<Text size="xs" css={S.errorText}>
최대 100자까지 입력가능합니다.
</Text>
)}
</S.WarnDiv>
</S.DescriptionDiv>
{isDescription && (
<>
<S.DescriptionTextarea
rows={1}
placeholder={`메모를 작성해주세요.(최대 ${SCHEDULE_DESCRIPTION_MAX_LENGTH}자)`}
value={schedule.description}
ref={descriptionInputRef}
onChange={handleDescriptionInput}
/>
<S.WarnDiv>
{!isDescriptionMaxLength ? (
<Text size="xs">
({schedule.description.length} / $
{SCHEDULE_DESCRIPTION_MAX_LENGTH}자)
</Text>
Copy link
Collaborator

Choose a reason for hiding this comment

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

의도했던 결과는 아니지?

Suggested change
<Text size="xs">
({schedule.description.length} / $
{SCHEDULE_DESCRIPTION_MAX_LENGTH}자)
</Text>
<Text size="xs">
{`(${schedule.description.length} / ${SCHEDULE_DESCRIPTION_MAX_LENGTH}자)`}
</Text>

image

) : (
<Text size="xs" css={S.errorText}>
최대 ${SCHEDULE_DESCRIPTION_MAX_LENGTH}자까지
입력가능합니다.
</Text>
)}
</S.WarnDiv>
</>
)}

<S.InnerContainer>
<S.TeamNameContainer title={displayName}>
<TeamBadge teamPlaceColor={teamPlaceColor} size="md" />
Expand Down
4 changes: 0 additions & 4 deletions frontend/src/components/team_calendar/ScheduleEditModal/ScheduleEditModal.styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,10 +138,6 @@ export const ControlButtonWrapper = styled.div`
height: 38px;
`;

export const DescriptionDiv = styled.div<{ $isDescription: boolean }>`
display: ${({ $isDescription }) => ($isDescription ? 'block' : 'none')};
`;

export const DescriptionTextarea = styled.textarea`
display: inline-block;
width: 100%;
Expand Down
42 changes: 24 additions & 18 deletions frontend/src/components/team_calendar/ScheduleEditModal/ScheduleEditModal.tsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

이왕 상수를 적용해 줬다면 이 컴포넌트에도 상수를 적용해 줄 수 있을 것 같아보인다

  • 메모를 작성해주세요.(최대 ${상수}자)
  • 최대 ${상수}자까지 입력가능합니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

그거 고민하긴 했는데 문자열 너무 더러워보여서 뺐었음ㅋㅋ 해둘게

Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { getIsMobile } from '~/utils/getIsMobile';
import Switch from '~/components/common/Switch/Switch';
import theme from '~/styles/theme';
import Svg from '~/components/common/Svg/Svg';
import { SCHEDULE_DESCRIPTION_MAX_LENGTH } from '~/constants/calendar';

interface ScheduleEditModalProps {
calendarSize?: CalendarSize;
Expand Down Expand Up @@ -162,24 +163,29 @@ const ScheduleEditModal = (props: ScheduleEditModalProps) => {
</Text>
</Button>
</S.ConvenientContainer>
<S.DescriptionDiv $isDescription={isDescription}>
<S.DescriptionTextarea
rows={1}
placeholder="메모를 작성해주세요.(최대 100자)"
value={schedule.description}
onChange={handleDescriptionInput}
required
/>
<S.WarnDiv>
{!isDescriptionMaxLength ? (
<Text size="xs">({schedule.description.length} / 100자)</Text>
) : (
<Text size="xs" css={S.errorText}>
최대 100자까지 입력가능합니다.
</Text>
)}
</S.WarnDiv>
</S.DescriptionDiv>
{isDescription && (
<>
<S.DescriptionTextarea
rows={1}
placeholder={`메모를 작성해주세요.(최대 ${SCHEDULE_DESCRIPTION_MAX_LENGTH}자)`}
value={schedule.description}
onChange={handleDescriptionInput}
/>
<S.WarnDiv>
{!isDescriptionMaxLength ? (
<Text size="xs">
({schedule.description.length} / $
{SCHEDULE_DESCRIPTION_MAX_LENGTH}자)
</Text>
) : (
<Text size="xs" css={S.errorText}>
최대 ${SCHEDULE_DESCRIPTION_MAX_LENGTH}자까지
입력가능합니다.
</Text>
)}
</S.WarnDiv>
</>
)}
<S.InnerContainer>
<S.TeamNameContainer title={displayName}>
<TeamBadge teamPlaceColor={teamPlaceColor} size="lg" />
Expand Down
Loading