diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx index 938555d96..c84492e06 100644 --- a/frontend/src/components/common/Button/Button.tsx +++ b/frontend/src/components/common/Button/Button.tsx @@ -18,11 +18,11 @@ const pulse = keyframes` const StyledButton = styled.button` 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'}; diff --git a/frontend/src/components/common/InputField/InputField.styles.ts b/frontend/src/components/common/InputField/InputField.styles.ts index e7f8afe7f..1eed0f15a 100644 --- a/frontend/src/components/common/InputField/InputField.styles.ts +++ b/frontend/src/components/common/InputField/InputField.styles.ts @@ -1,3 +1,4 @@ +import { colors } from '@/styles/theme/colors'; import styled from 'styled-components'; export const InputContainer = styled.div<{ width: string; readOnly?: boolean }>` @@ -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; @@ -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; } diff --git a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts b/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts index d08edcd0a..f1e2e0e44 100644 --- a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts +++ b/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts @@ -1,3 +1,4 @@ +import { colors } from '@/styles/theme/colors'; import styled from 'styled-components'; export const Container = styled.div` @@ -13,7 +14,8 @@ 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; @@ -21,9 +23,9 @@ export const AlwaysRecruitButton = styled.button<{ $active: boolean }>` 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; diff --git a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx b/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx index 6f44ace53..9464d3883 100644 --- a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx +++ b/frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx @@ -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); @@ -138,7 +138,7 @@ const RecruitEditTab = () => { + } diff --git a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts b/frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts index 60b84216b..3f2fe5fe6 100644 --- a/frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts +++ b/frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts @@ -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; @@ -52,17 +45,17 @@ 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; @@ -70,7 +63,7 @@ export const DatepickerContainer = styled.div` position: relative; } .react-datepicker__current-month { - color: ${white}; + color: ${colors.base.white}; font-weight: 600; font-size: 18px; } @@ -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; @@ -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, @@ -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]}; } /* 날짜 셀 스타일 */ @@ -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 { @@ -195,7 +190,7 @@ export const DatepickerContainer = styled.div` } .react-datepicker__time { - background: ${white}; + background: ${colors.base.white}; } .react-datepicker__time-box { width: 100%;