Skip to content

[fix] 상시모집 버튼 상태가 유지되지 않는 버그를 수정한다 #990

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
suhyun113 merged 5 commits into from
Dec 30, 2025
Merged

[fix] 상시모집 버튼 상태가 유지되지 않는 버그를 수정한다 #990

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c14f1fa
style: 상시모집 버튼 스타일 수정
suhyun113 Dec 29, 2025
7daf29b
style: 모집 기간 캘린더 입력 필드 스타일 수정
suhyun113 Dec 29, 2025
417dfcd
fix: 상시보집 버튼 상태 로직 수정
suhyun113 Dec 29, 2025
293afeb
style: 변경된 디자인 반영
suhyun113 Dec 29, 2025
9187177
fix: 불필요한 import 제거
suhyun113 Dec 30, 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
4 changes: 2 additions & 2 deletions frontend/src/components/common/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@ const pulse = keyframes`
const StyledButton = styled.button<ButtonProps>`
background-color: #3a3a3a;
color: #ffffff;
height: 45px;
height: 42px;
border-radius: 10px;
border: none;
font-weight: 600;
font-size: 1.125rem;
font-size: 16px;
cursor: pointer;
transition: background-color 0.2s;
width: ${({ width }) => width || 'auto'};
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/components/common/InputField/InputField.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { colors } from '@/styles/theme/colors';
import styled from 'styled-components';

export const InputContainer = styled.div<{ width: string; readOnly?: boolean }>`
Expand Down Expand Up @@ -35,7 +36,7 @@ export const Input = styled.input<{
${({ hasError, isSuccess }) =>
hasError ? 'red' : isSuccess ? '#28a745' : '#c5c5c5'};
background-color: transparent;
border-radius: 6px;
border-radius: 10px;
outline: none;
font-size: 1.125rem;
letter-spacing: 0;
Expand Down Expand Up @@ -66,7 +67,8 @@ export const Input = styled.input<{
}

&::placeholder {
color: rgba(0, 0, 0, 0.3);
color: ${colors.gray[400]};
font-size: 16px;
transition: color 0.25s ease;
}

Expand Down
10 changes: 6 additions & 4 deletions frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { colors } from '@/styles/theme/colors';
import styled from 'styled-components';

export const Container = styled.div`
Expand All @@ -13,17 +14,18 @@ export const RecruitPeriodContainer = styled.div`
`;

export const AlwaysRecruitButton = styled.button<{ $active: boolean }>`
border-radius: 6px;
border-radius: 10px;
width: 120px;
height: 45px;
padding: 0px 16px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
flex-shrink: 0;

color: ${({ $active }) => ($active ? '#fff' : '#797979')};
background: ${({ $active }) => ($active ? '#FF7543' : 'rgba(0,0,0,0.05)')};
border: ${({ $active }) => ($active ? 'none' : '1px solid #C5C5C5')};
color: ${({ $active }) => ($active ? colors.base.white : colors.gray[700])};
background: ${({ $active }) => ($active ? colors.primary[800] : colors.gray[300])};
border: ${({ $active }) => ($active ? 'none' : `1px solid ${colors.gray[500]}`)};
transition:
background-color 0.12s ease,
transform 0.06s ease;
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const RecruitEditTab = () => {
const end = clubDetail.recruitmentEnd
? recruitmentDateParser(clubDetail.recruitmentEnd)
: null;
const isAlways = clubDetail.recruitmentStatus === '상시모집';
const isAlways = isFarFuture(end);

if (isAlways) {
setAlways(true);
Expand Down Expand Up @@ -138,7 +138,7 @@ const RecruitEditTab = () => {
<ContentSection.Header
title='모집 정보'
action={
<Button width={'150px'} animated onClick={handleUpdateClub}>
<Button width={'135px'} animated onClick={handleUpdateClub}>
저장하기
</Button>
}
Expand Down
45 changes: 20 additions & 25 deletions frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
import styled, { css } from 'styled-components';
import 'react-datepicker/dist/react-datepicker.css';

const primary = 'rgba(255, 84, 20, 0.8)';
const primaryHover = 'rgba(255, 84, 20, 0.95)';
const white = '#fff';
const gray = 'rgba(0,0,0,0.5)';
const disabledGray = 'rgba(0,0,0,0.2)';
const inputBg = 'rgba(0,0,0,0.05)';
const inputDisabledBg = '#DFDFDF';
import { colors } from '@/styles/theme/colors';

/* 재사용 블록 */
const selected = css`
background-color: ${primary} !important;
color: ${white} !important;
background-color: ${colors.primary[800]} !important;
color: ${colors.base.white} !important;
`;
const selectedHover = css`
background-color: ${primaryHover};
color: ${white};
background-color: ${colors.primary[800]} !important;
color: ${colors.base.white};
`;
const cellBase = css`
border-radius: 6px;
Expand Down Expand Up @@ -52,25 +45,25 @@ export const DatepickerContainer = styled.div`
.react-datepicker__time-container {
flex: 0 0 120px;
border-left: 1px solid rgba(0, 0, 0, 0.08);
background: ${white};
background: ${colors.base.white};
}

/* 헤더 영역 */
.react-datepicker__header {
padding: 0 0 10px;
border: none;
background: ${white};
background: ${colors.base.white};
}
.react-datepicker__header-custom {
background: ${primary};
background: ${colors.primary[800]};
padding: 10px 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.react-datepicker__current-month {
color: ${white};
color: ${colors.base.white};
font-weight: 600;
font-size: 18px;
}
Expand All @@ -84,7 +77,7 @@ export const DatepickerContainer = styled.div`
border: none;
cursor: pointer;
font-size: 25px;
color: ${white};
color: ${colors.base.white};
}
.react-datepicker__navigation--previous--custom {
left: 10px;
Expand Down Expand Up @@ -126,11 +119,13 @@ export const DatepickerContainer = styled.div`
width: 270px;
height: 45px;
border: none;
border-radius: 6px;
color: ${gray};
background: ${inputBg};
font-size: 1.125rem;
border-radius: 10px;
color: ${colors.gray[700]};
background: ${colors.gray[100]};
font-size: 16px;
font-weight: 400;
padding: 12px 20px;
text-align: center;
cursor: pointer;
transition:
background-color 0.1s ease,
Expand All @@ -143,8 +138,8 @@ export const DatepickerContainer = styled.div`

/* 비활성화 입력 필드 */
.react-datepicker__input-container input:disabled {
background: ${inputDisabledBg};
color: ${disabledGray};
background: ${colors.gray[400]};
color: ${colors.gray[500]};
}

/* 날짜 셀 스타일 */
Expand Down Expand Up @@ -185,7 +180,7 @@ export const DatepickerContainer = styled.div`

/* 시간 패널 */
.react-datepicker__time-container .react-datepicker__header {
background: ${white};
background: ${colors.base.white};
padding: 10px 0;
}
.react-datepicker-time__header {
Expand All @@ -195,7 +190,7 @@ export const DatepickerContainer = styled.div`
}

.react-datepicker__time {
background: ${white};
background: ${colors.base.white};
}
.react-datepicker__time-box {
width: 100%;
Expand Down