textarea 사이즈 고정
textarea {
resize: none;
}tailwind css
<textarea className="resize-none" />챌린지 생성 종료일
인증 빈도 + 기간 + 시작일 -> 종료일 -> "시작일 ~ 종료일"
인증 빈도 => [ EVERYDAY, WEEKDAY, WEEKEND, ONCEAWEEK, TWICEAWEEK, THIRDAWEEK, FORTHAWEEK, FIFTHAWEEK, SIXTHAWEEK ]
기간 => [ ONEWEEK, TWOWEEK, THREEWEEK, FOURWEEK ]
시작일 => '10. 16 (일)' = '9.16.0' => const [month, date, day] = startDate.split('.')
자바스크립트 Date 객체의 month는 0~11이므로 화면엔 month+1로 표시했다. 그리고 day는 0(일)~6(토) 정말 헷갈림
인증 빈도와 예상 종료일
- 매일이면 시작일~일요일
- 평일 매일이면 시작일~금요일
- 주말 매일이면 시작일(토, 일)~일요일
- 주 n 회면 시작일~일요일
그리고 기간에 따라서도 종료일이 달라진다. 🤕
1차 완성 코드
interface GetEndDataParams {
y: number; // year
m: number; // month
d: number; // date
o?: boolean; // option - 2주부터?
}
// params - authFrequency, peroid, startDate
export function getChallengeEndData(af: AuthFrequency, p: string, s: string) {
const year = new Date().getFullYear();
const [m, de, dy] = s.split('.'); // string type
const [month, date, day] = [+m, +de, +dy];
function getEverydayEndData({ y, m, d }: GetEndDataParams) {
const { year, month } = getCurrentDate();
const lastDate = getLastDate(year, month);
let [tempYear, tempMonth, tempDate] = [y, m, d];
let day = getDay(y, m, d); // 시작일 요일
let leftDay = 7 - day;
tempDate += leftDay;
if (tempDate > lastDate) {
tempMonth += 1;
tempDate = Math.abs(lastDate - tempDate);
}
return [tempYear, tempMonth, tempDate];
}
function getWeekdayEndData({ y, m, d, o = false }: GetEndDataParams) {
const { year, month } = getCurrentDate();
const lastDate = getLastDate(year, month);
let [tempYear, tempMonth, tempDate] = [y, m, d];
let day = getDay(y, m, d); // 시작일 요일
if (day === 5 && o) {
day = 1;
tempDate += 3;
}
let leftDay = 5 - day;
tempDate += leftDay;
if (tempDate > lastDate) {
tempMonth += 1;
tempDate = Math.abs(lastDate - tempDate);
}
return [tempYear, tempMonth, tempDate];
}
function getWeekendEndDate({ y, m, d, o = false }: GetEndDataParams) {
const { year, month } = getCurrentDate();
const lastDate = getLastDate(year, month);
let [tempYear, tempMonth, tempDate] = [y, m, d];
let day = getDay(y, m, d); // 시작일 요일
if (day === 6) tempDate += 1;
if (o) tempDate += 7;
if (tempDate > lastDate) {
tempMonth += 1;
tempDate = Math.abs(lastDate - tempDate);
}
return [tempYear, tempMonth, tempDate];
}
function getNTimesAWeekEndData({ y, m, d, o = false }: GetEndDataParams) {
const { year, month } = getCurrentDate();
const lastDate = getLastDate(year, month);
let [tempYear, tempMonth, tempDate] = [y, m, d];
if (o) tempDate += 7;
else tempDate += 6;
if (tempDate > lastDate) {
tempMonth += 1;
tempDate = Math.abs(lastDate - tempDate);
}
return [tempYear, tempMonth, tempDate];
}
switch (af) {
case 'EVERYDAY':
const e1 = getEverydayEndData({ y: year, m: +month, d: +date });
const e2 = getEverydayEndData({ y: e1[0], m: e1[1], d: e1[2] });
const e3 = getEverydayEndData({ y: e2[0], m: e2[1], d: e2[2] });
const e4 = getEverydayEndData({ y: e3[0], m: e3[1], d: e3[2] });
if (p === 'ONEWEEK') return e1;
else if (p === 'TWOWEEK') return e2;
else if (p === 'THREEWEEK') return e3;
else return e4;
case 'WEEKDAY':
const w1 = getWeekdayEndData({ y: year, m: +month, d: +date });
const w2 = getWeekdayEndData({ y: w1[0], m: w1[1], d: w1[2], o: true });
const w3 = getWeekdayEndData({ y: w2[0], m: w2[1], d: w2[2], o: true });
const w4 = getWeekdayEndData({ y: w3[0], m: w3[1], d: w3[2], o: true });
if (p === 'ONEWEEK') return w1;
else if (p === 'TWOWEEK') return w2;
else if (p === 'THREEWEEK') return w3;
else return w4;
case 'WEEKEND':
const k1 = getWeekendEndDate({ y: year, m: +month, d: +date });
const k2 = getWeekendEndDate({ y: k1[0], m: k1[1], d: k1[2], o: true });
const k3 = getWeekendEndDate({ y: k2[0], m: k2[1], d: k2[2], o: true });
const k4 = getWeekendEndDate({ y: k3[0], m: k3[1], d: k3[2], o: true });
if (p === 'ONEWEEK') return k1;
else if (p === 'TWOWEEK') return k2;
else if (p === 'THREEWEEK') return k3;
else return k4;
default:
const n1 = getNTimesAWeekEndData({ y: year, m: +month, d: +date });
const n2 = getNTimesAWeekEndData({ y: n1[0], m: n1[1], d: n1[2], o: true });
const n3 = getNTimesAWeekEndData({ y: n2[0], m: n2[1], d: n2[2], o: true });
const n4 = getNTimesAWeekEndData({ y: n3[0], m: n3[1], d: n3[2], o: true });
if (p === 'ONEWEEK') return n1;
else if (p === 'TWOWEEK') return n2;
else if (p === 'THREEWEEK') return n3;
else return n4;
}
}
//
export default function CreateChallenge() {
...
// 사용
const [sMonth, sDate, sDay] = startDate.split('.');
const [eYear, eMonth, eDate] = getChallengeEndData(
authFrequency as AuthFrequency,
challengePeroid,
startDate
);
const eDay = getToday(getDay(+eYear, +eMonth, +eDate));
return (
...
{authFrequency && (
<div className="w-full mt-6">
<label>
<h2 className="font-bold">
시작일<span className="text-red-400">*</span>
</h2>
</label>
<div className="flex flex-wrap">
{/* {JSON.stringify(getChallengeStartDate(authFrequency))} */}
{getChallengeStartDate(authFrequency).map(({ month, date, day }, i) => (
<button
type="button"
key={i}
onClick={() => handleChangeStartDate(`${month}.${date}.${day}`)}
className={`border border-gray-4 rounded-full px-2 py-1 mt-2 mr-1 text-sm
${
`${month}.${date}.${day}` === startDate ? 'bg-black text-white' : ''
}`}
>
{`${month + 1}. ${date} (${getToday(day)})`}
</button>
))}
</div>
</div>
)}
{authFrequency && challengePeroid && startDate && (
<div className="flex items-center bg-gray-2 rounded-md py-3 px-4 font-semibold mt-6">
<BiCalendar className="mr-2" size={22} />
{`${+sMonth + 1}. ${sDate} (${getToday(+sDay)}) ~ ${
+eMonth + 1
}. ${+eDate} (${eDay})`}
</div>
)}
);
}야매로 짜서 머라 설명할지 모르겠고 일단은 잘 나오고 있음..!
주 n 일은 시작일과 종료일 구하기가 조금 쉬웠다
꾸준히 자유롭게 즐겁게