Skip to content

Conversation

@parkheeddong
Copy link

@parkheeddong parkheeddong commented Jul 4, 2023

๐Ÿ”ฅ Related Issues

๐Ÿ’™ ์ž‘์—… ๋‚ด์šฉ

  • 1. ์š”์ผ + ์‹œ๊ฐ„ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ๋‹ฌ๋ ฅ์— ํ‘œ๊ธฐ
  • 2. ํ•™์ƒ๋งˆ๋‹ค ๋‹ค๋ฅธ ์ƒ‰๊น”๋กœ ํ‘œ๊ธฐ
  • 3. ์‹œ๊ฐ„์ˆœ์„œ๋Œ€๋กœ ํ‘œ๊ธฐ
  • 4. ์‹ฌํ™” ( ์ผ์ • ์ถ”๊ฐ€ )

โœ… PR Point

์ €๋Š” ์บ˜๋ฆฐ๋” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ด์šฉํ•˜์ง€ ์•Š๊ณ , ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‚ ์งœ ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ date-fns๋ฅผ ์„ค์น˜ํ•ด์„œ ์ผ๋ถ€ ํ•จ์ˆ˜๋“ค์„ ์ด์šฉํ–ˆ์Šต๋‹ˆ๋‹ค!

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜์ง€ ์•Š๊ณ  ๊ตฌํ˜„ํ•œ ์ผ€์ด์Šค๋“ค์„ ๋งŽ์ด ์‚ดํŽด๋ดค๋Š”๋ฐ, https://sennieworld.tistory.com/61 ์š” ๊ธ€์„ ๋ ˆํผ๋Ÿฐ์Šค๋กœ ์ฐธ์กฐํ•ด์„œ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.


โœจ ์ „์ฒด ๊ตฌ์กฐ

Header -> ์ด์ „ ๋‹ฌ (prevMonth) , ํ˜„์žฌ ๋‹ฌ, ์ดํ›„ ๋‹ฌ(nextMonth) ์ด๋™

Days -> ์š”์ผ

Body -> ๋‹ฌ๋ ฅ ์ „์ฒด ๊ตฌ์กฐ & ์Šค์ผ€์ค„ ์ž…๋ ฅ


โœจ ๋‹ฌ๋ ฅ ๋ทฐ

๋‹ฌ๋ ฅ๋ทฐ๋Š” ๋ ˆํผ๋Ÿฐ์Šค์˜ ๋กœ์ง์„ ์ฐธ์กฐํ•ด์„œ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
๋‹ฌ์€ ์–ธ์ œ๋‚˜ 1์ผ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์ง€๋งŒ, ์š”์ผ์€ ํ•ญ์ƒ ์›”์š”์ผ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜๋Š”๊ฒƒ์ด ์•„๋‹ˆ๋ฏ€๋กœ, ํ•ด๋‹น ๋‹ฌ์˜ 1์ผ์ด ์›”์š”์ผ์ด ์•„๋‹ˆ๋ผ๋ฉด ๊ทธ ์ „ ๋‹ฌ์˜ ํ›„๋ฐ˜๋ถ€ ๋‚ ์งœ๋“ค์ด ๋‹ฌ๋ ฅ์— ํฌํ•จ๋  ์ˆ˜ ์žˆ์–ด์„œ monthStart๊ฐ€ ํ•ด๋‹น ๋‹ฌ์˜ ์‹œ์ž‘/๋งˆ์ง€๋ง‰์ผ์ด๋ผ๋ฉด, startDate๋Š” monthStart๊ฐ€ ์†ํ•œ ์ฃผ์˜ ๋งˆ์ง€๋ง‰ ์ผ, endDate๋Š” monthEnd๊ฐ€ ์†ํ•œ ๋‹ฌ์˜ ๋งˆ์ง€๋ง‰ ์ผ์ž…๋‹ˆ๋‹ค.

for๋ฌธ์œผ๋กœ monthStart๋ถ€ํ„ฐ monthEnd๊นŒ์ง€ ์›”ํ™”์ˆ˜๋ชฉ๊ธˆํ† ์ผ ์ด 7๊ฐœ์˜ ๊ฐ’์„ ๋ฐ›์•„์„œ days๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ , ์ „์ฒด ๋‹ฌ๋ ฅ์— ๋Œ€ํ•œ ๋ฐฐ์—ด rows์— ๋„ฃ์–ด์ฃผ๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

for (let i = 0; i < 7; i++) {
 // ์ƒ๋žต
           calenderDate = format(day, 'dd');
            days.push(
                <Day isThisMonth = {isThisMonth}>
                    {calenderDate}
                    {isThisMonth === true ? 
                        daySchedule.map((item)=> (
                            <ScheduleText key = {item.id} color = {item.color}>
                                {item.student} {item.time}
                            </ScheduleText>
                        )) 
                        : null
                    }
                </Day>
            );
            day = addDays(day, 1);
        }
        rows.push(
            <Row>
                {days}
            </Row>
        );
        days = [];

โœจ ๋ฐ์ดํ„ฐ ๋‹ฌ๋ ฅ์— ํ‘œ์‹œ

์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ฌ๋ ฅ์— ํ‘œ์‹œํ•˜๊ธฐ ์œ„ํ•ด์„œ, ํ•ด๋‹น ๋‚ ์งœ๋ฅผ ํ‘œ๊ธฐํ•  ๋•Œ ์ด๋ฒˆ๋‹ฌ์˜ ๋‚ ์งœ์ธ์ง€ ๊ฒ€์‚ฌํ•˜๋Š” ๋กœ์ง์„ ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌํ˜„ํ–ˆ์–ด์š”!

            // ์ด๋ฒˆ๋‹ฌ ๋‚ ์งœ์ธ์ง€ ๊ฒ€์‚ฌ ํ›„, ์ด๋ฒˆ๋‹ฌ ๋‚ ์งœ์ผ ๊ฒฝ์šฐ ์Šค์ผ€์ค„ ์ฒดํฌ
            if (isThisMonth === false && format(day, 'dd') === '01') { 
                isThisMonth = true; // ์ง€๋‚œ๋‹ฌ์ด์—ˆ๋Š”๋ฐ, 1์ผ๋กœ ๋„˜์–ด์˜ค๋ฉด true 
            } else if (isThisMonth === true && format(day, 'dd') === '01') {
                isThisMonth = false; // ์ด๋ฒˆ๋‹ฌ์ด์—ˆ๋Š”๋ฐ, ๋‹ค์Œ๋‹ฌ๋กœ ๋„˜์–ด๊ฐ€๋ฉด false
            }

๊ทธ๋ฆฌ๊ณ  ๋งŒ์•ฝ ์ด๋ฒˆ ๋‹ฌ์ธ ๊ฒƒ์ด ํ™•์ธ๋˜๋ฉด, ์•„๋ž˜์™€ ๊ฐ™์ด ๋น„๊ตํ•  ๋‚ ์งœ ํฌ๋งท์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ „์ฒด ์Šค์ผ€์ค„ ๋ฐ์ดํ„ฐ์—์„œ filterํ•จ์ˆ˜๋กœ ํ•ด๋‹น ๋‚ ์งœ๊ฐ€ ํฌํ•จ๋œ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๊ณ , ๊ทธ ๊ฐ’ ์„ ์‹œ๊ฐ„ ์ˆœ๋Œ€๋กœ ์ •๋ ฌํ•ด์ค๋‹ˆ๋‹ค.

            if (isThisMonth === true) {
                let compareDate = format(monthStart, 'yyyy.MM') + "." + format(day, 'dd');
                daySchedule = schedule.filter((items) => items.date.includes(compareDate));
                daySchedule = daySchedule.sort((a, b)=> a.time.localeCompare(b.time));
            }

๐Ÿ˜ก Trouble Shooting

ํฐ ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ…์€ ์—†์—ˆ๊ณ  ์ข…์ข… ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ๊ด€๋ จ ์˜ค๋ฅ˜๊ฐ€ ๋งŽ์ด ๋ฐœ์ƒํ–ˆ๋Š”๋ฐ ๊ธˆ๋ฐฉ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค! ์‹ฌํ™”๊ณผ์ œ๋Š” ๋ฆฌํŒฉํ† ๋ง ํ• ๊ฒŒ์š”!! ๐ŸŒฑ๐ŸŒฑ

๐Ÿ‘€ ์Šคํฌ๋ฆฐ์ƒท / GIF / ๋งํฌ

sopt_appjam

๐Ÿ“š Reference

@parkheeddong parkheeddong added feat-function ๊ธฐ๋Šฅ๊ตฌํ˜„ํ–ˆ์–ด์š” feat-UI UI ๋งŒ๋“ค์—ˆ์–ด์š” ํฌ์ • ํฌ์ • ๋‹ด๋‹น labels Jul 4, 2023
@parkheeddong parkheeddong self-assigned this Jul 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat-function ๊ธฐ๋Šฅ๊ตฌํ˜„ํ–ˆ์–ด์š” feat-UI UI ๋งŒ๋“ค์—ˆ์–ด์š” ํฌ์ • ํฌ์ • ๋‹ด๋‹น

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ Heejung ] ์บ˜๋ฆฐ๋” ๊ตฌํ˜„

3 participants