Skip to content

Gwasuwon-shot/Tutice_Client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŒณ Tutice(ํŠœํ‹ฐ์Šค) ๐ŸŒณ

๐Ÿ€ ์‰ฌ์šด ์ˆ˜์—… ๊ด€๋ฆฌ๋กœ ์—ด๋ฆฌ๋Š” ์ •ํ™•ํ•œ ๋‚˜์˜ ๊ฒฐ์‹ค ๐Ÿ€
๊ณผ์™ธ์˜ ์ถœ๊ฒฐ ์ฒดํฌ๋ถ€ํ„ฐ ์ˆ˜์—…๋น„ ๊ด€๋ฆฌ๊นŒ์ง€ ํ•œ๋ฒˆ์˜ ํด๋ฆญ์œผ๋กœ ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•˜๋Š” ์„œ๋น„์Šค


๐Ÿ™‹๐Ÿปโ€โ™€๏ธ ๊ณผ์ˆ˜์› FE

๐ŸŒฒ ์ˆ˜์—… ๊ด€๋ฆฌ ์‹œ์žฅ์— ์ƒˆ๋กœ์šด ํ‘œ์ค€์ด ๋˜๋Š” ํŒ€ ๊ณผ์ˆ˜์› ๐ŸŒฒ

์€๋นˆ
ํ˜ ์ฐŒ
๊ถŒ์€๋นˆ
Web FE ๐Ÿ…
๊ถŒํ˜œ์ธ
Web FE ๐ŸŒ

original Members ๋ฅ˜์„ฑ๊ฒฝ๐Ÿ’, ๋ฐ•ํฌ์ •๐Ÿฅ, ์„œ์ง€์ˆ˜๐Ÿ‘

โš’๏ธ ๊ธฐ์ˆ  ์Šคํƒ

์—ญํ•  ์ข…๋ฅ˜
Library React
Programming Language TypeScript
Styling Styled Components
State Management State Management
Formatting ESLint Prettier
Version Control Git GitHub
Data Fetching ReactQuery

๐Ÿ’ก ์„œ๋น„์Šค ํ•ต์‹ฌ ๊ธฐ๋Šฅ ์†Œ๊ฐœ

1๏ธโƒฃ ์ˆ˜์—… ๋“ฑ๋กํ•˜๊ธฐ

image

๐Ÿ’ฌ what?

ํ•™์ƒ ๊ณผ๋ชฉ ๋“ฑ๋ก
ํšŒ์ฐจ, ๋‚ ์งœ, ์‹œ๊ฐ„ ์Šฌ๋ผ์ด๋” ๊ตฌํ˜„
์ •๊ธฐ ์š”์ผ ์„ ํƒ
(์ฒซ ์ˆ˜์—…์ผ ๊ฒฝ์šฐ ๋””ํดํŠธ ๊ฐ’์€ ํ˜„์žฌ ๋‚ ์งœ์ด๋ฉฐ, ํ˜„์žฌ ์„ ํƒํ•œ ์š”์ผ์— ํ•ด๋‹นํ•˜์ง€ ์•Š๋Š” ๋‚ ์งœ๋ฅผ ์ฒซ ์ˆ˜์—…์ผ๋กœ ์„ ํƒํ•œ ๊ฒฝ์šฐ, ์ €์žฅ ๋ถˆ๊ฐ€ ๋ฐ ์„ ํƒ๋œ ์š”์ผ ๋ฐฐ์—ด์„ ์ˆœํšŒํ•˜๋ฉฐ ํ•ด๋‹น ์š”์ผ์ด ์•„๋‹Œ ๋‚ ์งœ ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑํ™”)
์ˆ˜์—… ์ผ์‹œ ์˜ˆ์™ธ ์ผ€์ด์Šค ์ฒ˜๋ฆฌ
-> ์กฐ๊ฑด๋ฌธ์„ ํ†ตํ•ด ์‹œ๊ฐ„ ๋ฐ ์ข…๋ฃŒ ์‹œ๊ฐ„์„ ๋ชจ๋‘ ์ž…๋ ฅํ•˜์ง€ ์•Š์•˜์„ ๋•Œ ์ˆ˜์—… ์ผ์‹œ ์ถ”๊ฐ€ ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑํ™”
->์‹œ๊ฐ„๋งŒ ์ž…๋ ฅํ•˜๊ณ  ์š”์ผ์€ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” ์ˆ˜์—… ์ผ์‹œ ์ถ”๊ฐ€ ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑํ™”
->์š”์ผ์„ ์„ ํƒํ•  ๋•Œ, ์‹œ์ž‘, ์ข…๋ฃŒ ์‹œ๊ฐ„์„ ์ž…๋ ฅํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ ๋‹ค๋ฅธ ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑํ™”
->์ฒซ ์ˆ˜์—…์ผ์— ํ•ด๋‹นํ•˜๋Š” ์š”์ผ์ด ์„ ํƒํ•œ ์ˆ˜์—… ์ผ์‹œ ์š”์ผ์— ํ•ด๋‹นํ•˜์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ์ €์žฅ ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑํ™”
->์ฒซ ์ˆ˜์—…์ผ์— ํ•ด๋‹นํ•˜๋Š” ์š”์ผ์ด ์„ ํƒํ•œ ์ˆ˜์—… ์ผ์‹œ ์š”์ผ์— ํ•ด๋‹นํ•˜๋Š” ๊ฒฝ์šฐ ์ €์žฅ ๋ฒ„ํŠผ์€ ํ™œ์„ฑํ™”

๐Ÿ‘€ how?

useState๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ ์ž…๋ ฅํผ์— focus ๋˜์—ˆ๋Š” ์ง€ ๊ด€๋ฆฌ ์ž…๋ ฅ๋ฐ›์€ ๊ฐ’ recoil๋กœ ๊ด€๋ฆฌ swiper ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•œ ์Šฌ๋ผ์ด๋” ๊ตฌํ˜„

<StyledSwiper
               direction="vertical"
               slidesPerView={7}
               spaceBetween={15}
               freeMode={true}
               freeModeSticky={true}
               freeModeMomentumRatio={0.25}
               freeModeMinimumVelocity={0.1}
               loop={true}
               loopAdditionalSlides={5}
               slideToClickedSlide={true}
               centeredSlides={true}
               onSlideChange = {handleSlideChange}
           >
               {slides}
</StyledSwiper>

loop = {true} ์†์„ฑ๊ฐ’์„ ํ†ตํ•œ ์Šคํฌ๋กค์„ ์ด์–ด์ง€๋„๋ก ๊ตฌํ˜„
swiper.realIndex๋ฅผ ํ†ตํ•ด ์œ ์ €๊ฐ€ ์„ ํƒํ•œ ์ธ๋ฑ์Šค์˜ ์Šฌ๋ผ์ด๋“œ ์ถ”์ 
๋‚ ์งœ ์Šฌ๋ผ์ด๋”์˜ ๊ฒฝ์šฐ, ํ˜„์žฌ ๋‹ฌ์„ ๊ธฐ์ค€์œผ๋กœ ์ด์ „, ํ˜„์žฌ, ๋‹ค์Œ ๋‹ฌ์˜ ๋ชจ๋“  ๋‚ ์งœ๋ฅผ ๋‹ด๋Š” ๊ฐ์ฒด ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜์—ฌ ๊ฐ ๊ฐœ์ฒด๊ฐ€ ํ•˜๋‚˜์˜ ์Šฌ๋ผ์ด๋“œ๊ฐ€ ๋˜๋„๋ก ๊ตฌํ˜„

2๏ธโƒฃ ์ˆ˜์—… ๊ด€๋ฆฌ

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2023-07-20 แ„‹แ…ฉแ„’แ…ฎ 11 14 28

๐Ÿ’ฌ what?

์ˆ˜์—… ๊ด€๋ฆฌ ( ์ถœ๊ฒฐ ๋ฐ ์ž…๊ธˆ ๊ด€๋ฆฌ)
์ถœ๊ฒฐ ์ฒดํฌ ํ›„ ์•Œ๋ฆผ ๋ณด๋‚ด๊ธฐ
์ž…๊ธˆ ์•Œ๋ฆผ ๋ณด๋‚ด๊ณ  ์ž…๊ธˆ ๋“ฑ๋ก
์—ฐ์žฅํ•˜์ง€ ์•Š์€ ์ˆ˜์—…์ด ์žˆ๋Š” ๊ฒฝ์šฐ ๋ฐฐ๋„ˆ ๋„์šฐ๊ธฐ

๐Ÿ‘€ how?

children, props ๋ฅผ ์ด์šฉํ•œ ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ ๊ตฌํ˜„
์ˆ˜์—… ๋‚ด์—ญ ๋˜๋Š” ์ž…๊ธˆ ๋‚ด์—ญ์ธ์ง€์— ๋Œ€ํ•œ ํ˜„์žฌ ํŽ˜์ด์ง€ ์ •๋ณด recoil๋กœ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ


3๏ธโƒฃ ์ˆ˜์—… ๊ด€๋ฆฌ => ์ถœ๊ฒฐ ์ฒดํฌ


Untitled

๐Ÿ’ฌ what?

ํ™ˆ ํŽ˜์ด์ง€์—์„œ ์ˆ˜์—… ์ง„ํ–‰ ์ค‘์ธ ํ•™์ƒ ์ถœ์„ ์ฒดํฌ
์ˆ˜์—… ๊ด€๋ฆฌ ํŽ˜์ด์ง€์—์„œ ์ถœ๊ฒฐ ์ฒดํฌ ๋ฐ ์ˆ˜์ •
๋†“์นœ ์ถœ๊ฒฐ ํŽ˜์ด์ง€์—์„œ ์ถœ๊ฒฐ ์ฒดํฌ
์ถœ๊ฒฐ ์ˆ˜์ • ์‹œ ์ด์ „ ์ถœ๊ฑ€ ์‚ฌํ•ญ ๋ฒ„ํŠผ ๋น„ํ™œ์„ฑํ™”
์ถœ๊ฒฐ ์ฒดํฌ ํ† ์ŠคํŠธ ๋ชจ๋‹ฌ, ์ถœ๊ฒฐ ์ฒดํฌ ์„ ํƒ์‹œ ํ™•์ธ ๋ชจ๋‹ฌ ๋„์šฐ๊ธฐ
์ตœ์ข… ์ถœ๊ฒฐ ์ฒดํฌ ํ™•์ธ ์‹œ ์ฒดํฌ๋˜๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„
์ตœ์ข… ์ถœ๊ฒฐ ์ฒดํฌ ์ดํ›„ ์ถœ๊ฒฐ ์•Œ๋ฆผ ์ „์†ก ํ† ์ŠคํŠธ ๋ชจ๋‹ฌ
ํ‘ธ์‰ฌ ์•Œ๋ฆผ์„ ์ƒ๋Œ€๊ฐ€ ํ—ˆ์šฉํ•˜์ง€ ์•Š์•˜์„ ์‹œ,
๊ฒฝ๊ณ  ๋ชจ๋‹ฌ
์ถœ๊ฒฐ ์•Œ๋ฆผ

๐Ÿ‘€ how?

-> ๋ชจ๋“  ๊ฒฝ์šฐ์˜ ์ˆ˜๋ฅผ ๋”ฐ์ ธ์„œ (์ถœ์„, ๊ฒฐ์„, ์ทจ์†Œ, ์ถœ์„์ฒดํฌ ๋†“์นœ ์ดํ›„์˜ ์ถœ์„, ๊ฒฐ์„, ์ทจ์†Œ ์„ ํƒ ๋“ฑ) switch-case ๋ฌธ๊ณผ ์‚ผํ•ญ ์—ฐ์‚ฐ์ž ์‚ฌ์šฉ

4๏ธโƒฃ ์บ˜๋ฆฐ๋”

Untitled (2)

๐Ÿ’ฌ what?

์บ˜๋ฆฐ๋”๋ทฐ date-fns ์œผ๋กœ ๊ตฌํ˜„
์˜ค๋Š˜ ๋‚ ์งœ๋ถ€๋ถ„ ๋ฉ”์ผ ์ปฌ๋Ÿฌ์˜ ๋ฐฐ๊ฒฝ์œผ๋กœ ๋‹ค๋ฅธ ๋‚ ์งœ์™€ ๋‹ค๋ฅด๊ฒŒ ๊ตฌ์„ฑ
getํ•ด์˜จ ๋ฐ์ดํ„ฐ์— ๋งž๋Š” ๋‚ ์งœ์— ์‹œ๊ฐ„ ์ˆœ์„œ๋Œ€๋กœ ์‚ฌ๋žŒ ์ด๋ฆ„ ๋ฐ ์‹œ์ž‘ ์‹œ๊ฐ„ ๋ถˆ๋Ÿฌ์™€ ์บ˜๋ฆฐ๋”์— ๋„์›Œ์ฃผ๊ธฐ
์Šค์ผ€์ค„ ์ˆ˜์ • ์บ˜๋ฆฐ๋”, ์ˆ˜์ •์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๊ณ  ์กฐํšŒ๋งŒ ๊ฐ€๋Šฅํ•œ ์บ˜๋ฆฐ๋”, ์ž„์‹œ๋กœ ์ €์žฅํ•œ ์ˆ˜์—… ์‹œ๊ฐ„๊ณผ ํ•จ๊ป˜ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์Šค์ผ€์ค„์„ ํ•œ ๋ฒˆ์— ๋ณด์—ฌ์ฃผ๋Š” ์บ˜๋ฆฐ๋”๋กœ ๋‚˜๋ˆ„๊ธฐ
๊ฐ ์บ˜๋ฆฐ๋”์—์„œ ์›ํ•˜๋Š” ๋‚ ์งœ๋ฅผ ํด๋ฆญํ•  ์‹œ, ํ•ด๋‹น ๋‚ ์งœ์— ์žˆ๋Š” ์Šค์ผ€์ค„์„ ๋ชจ๋‘ ๋ณด์—ฌ์ฃผ๋Š” ๋ชจ๋‹ฌ ๊ตฌํ˜„
๊ฐ ๋‚ ์งœ์— 4๊ฐœ ์ด์ƒ์˜ ์Šค์ผ€์ค„์ด ์žˆ์„ ๊ฒฝ์šฐ, 2๊ฐœ๊นŒ์ง€๋งŒ ๋ณด์—ฌ์ฃผ๊ณ  ๋”๋ณด๊ธฐ์™€ ๊ด€๋ จ๋œ ์•„์ด์ฝ˜ ๋„์›Œ์ฃผ๊ธฐ
์ˆ˜์ •์ด ๊ฐ€๋Šฅํ•œ ์บ˜๋ฆฐ๋”์—์„œ ์›ํ•˜๋Š” ๋‚ ์งœ๋ฅผ ํด๋ฆญํ•˜๋ฉด ํ† ์ŠคํŠธ ๋ชจ๋‹ฌ์—์„œ ํŽธ์ง‘๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ์‹œ์— ํŽธ์ง‘ ๋ชจ๋“œ๋กœ ์ „ํ™˜
ํŽธ์ง‘ ๋ชจ๋“œ ๋ชจ๋‹ฌ์—์„œ ํŽธ์ง‘ํ•˜๊ธฐ ์›ํ•˜๋Š” ์Šค์ผ€์ค„์„ ํด๋ฆญํ•˜์—ฌ ํŽธ์ง‘ ํŽ˜์ด์ง€๋กœ ์ด๋™
ํŽธ์ง‘ ํŽ˜์ด์ง€์—์„œ ์Šฌ๋ผ์ด๋”๋ฅผ ์ด์šฉํ•ด ์›ํ•˜๋Š” ์Šค์ผ€์ค„๋กœ ์ˆ˜์ •ํ•˜๊ณ , ์ €์žฅ์„ ๋ˆ„๋ฅด๋ฉด ๋ฐ”๋กœ ์บ˜๋ฆฐ๋”๋กœ ํ™•์ธํ•˜๋„๋ก ๊ตฌํ˜„

๐Ÿ‘€ how?

date-fns๋ฅผ ์‚ฌ์šฉํ•œ ์ „์ฒด์  ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„
while๋ฌธ์„ ์ด์šฉํ•ด ํ•œ ๋‹ฌ์˜ ๋‚ ์งœ๋ฅผ ๋ณด์—ฌ์ฃผ๋„๋ก ๊ตฌํ˜„
๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ, ํ† ์ŠคํŠธ ๋ชจ๋‹ฌ, ์ˆ˜์ • ๋ทฐ ์Šฌ๋ผ์ด๋” ๋“ฑ ๊ตฌํ˜„
react-query์˜ get-patch`๋ฅผ ์‚ฌ์šฉํ•œ data ๊ด€๋ฆฌ


5๏ธโƒฃ PWA๋ฅผ ํ™œ์šฉํ•œ ํ‘ธ์‰ฌ ์•Œ๋ฆผ

LockScreen_ํ•™๋ถ€๋ชจ_8ํšŒ์ฐจ ๋

๐Ÿ’ฌ what?

PWA ํ™˜๊ฒฝ์—์„œ ์ผ๋ฐ˜ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ๊ณผ ๋™์ผํ•˜๊ฒŒ ํ‘ธ์‹œ ์•Œ๋ฆผ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋„๋ก ์„ค์ •
์„ ์ƒ๋‹˜ ์‚ฌ์šฉ์ž๊ฐ€ ์ถœ๊ฒฐ ์ฒดํฌ ๋˜๋Š” ์ž…๊ธˆ ์•Œ๋ฆผ์„ ๋ณด๋‚ผ ๊ฒฝ์šฐ, ํ•™๋ถ€๋ชจ ์‚ฌ์šฉ์ž์—๊ฒŒ ํ‘ธ์‰ฌ ์•Œ๋ฆผ์ด ๊ฐ€๋„๋ก ๊ตฌํ˜„

๐Ÿ‘€ how?

ํŒŒ์ด์–ด๋ฒ ์ด์Šค ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ ํ›„ ๋ฐ›์€ ํ›„ sdk๋ฅผ ์ด์šฉํ•ด FCM์„ ์—ฐ๊ฒฐํ•˜์—ฌ ํ‘ธ์‹œ ์•Œ๋ฆผ ๊ตฌํ˜„
FCM์œผ๋กœ๋ถ€ํ„ฐ ์œ ์ €์˜ deviceToken์„ ๋ฐ›๊ณ , ์ด๋ฅผ ์„œ๋ฒ„์—๊ฒŒ postํ•˜์—ฌ ๊ธฐ๊ธฐ ๋“ฑ๋ก
๋“ฑ๋ก๋œ ๊ธฐ๊ธฐ๋กœ ์•Œ๋ฆผ์ด ๊ฐˆ ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„
. PWA ํ™˜๊ฒฝ์—์„œ ์ผ๋ฐ˜ ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ๊ณผ ๋™์ผํ•˜๊ฒŒ ํ‘ธ์‹œ ์•Œ๋ฆผ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ“ ํด๋” ๊ตฌ์กฐ

|-- ๐Ÿ“ .github
|-- ๐Ÿ“ .husky
|-- ๐Ÿ“ node_modules
|-- ๐Ÿ“ public
|-- ๐Ÿ“ src
	|-- ๐Ÿ“ api
	|-- ๐Ÿ“ atom
	|-- ๐Ÿ“ assets
			|-- ๐Ÿ“ icon
			|-- ๐Ÿ“ image
			|-- ๐Ÿ“ assets.d.ts
			|-- ๐Ÿ“ index.ts
	|-- ๐Ÿ“ core
	|-- ๐Ÿ“ components
			|-- ๐Ÿ“ common
	|-- ๐Ÿ“ hooks
	|-- ๐Ÿ“ mocks
	|-- ๐Ÿ“ pages
	|-- ๐Ÿ“ style
			|-- globalStyle.ts
			|-- style.d.ts
			|-- theme.ts
	|-- ๐Ÿ“ utils
	|-- ๐Ÿ“ type
	|-- App.tsx
	|-- main.tsx
	|-- Router.tsx
	|-- vite-env.d.ts
|-- .eslintrc.cjs
|-- .gitignore
|-- .prettierrc
|-- index.html
|-- package.json
|-- README.md
|-- tsconfig.json
|-- tsconfig.node.json
|-- vite.config.ts
|-- yarn.lock