diff --git a/members/minjeekim.md b/members/minjeekim.md index 1fc984d..891cea3 100644 --- a/members/minjeekim.md +++ b/members/minjeekim.md @@ -80,7 +80,7 @@ --- -### Week 02 +### Week 02~03 > ๐Ÿ’ก์š”์•ฝ > @@ -186,4 +186,122 @@ - ๊ฐœ์„  ๋ฐฉํ–ฅ - ํŠธ๋ž™ ๋‚ด ์ธ ์œ„์น˜ ์กฐ์ • - ์š”์ฒญ ์‚ฌํ•ญ - - ํ˜„์žฌ figma ์ž‘์—… ํŽ˜์ด์ง€ ๋‚ด ์ •์˜๊ฐ€ ์—†์–ด ๊ด€๋ จ ์ŠคํŽ™ ์ •์˜ ์š”์ฒญ (size, state, type ๋“ฑ) \ No newline at end of file + - ํ˜„์žฌ figma ์ž‘์—… ํŽ˜์ด์ง€ ๋‚ด ์ •์˜๊ฐ€ ์—†์–ด ๊ด€๋ จ ์ŠคํŽ™ ์ •์˜ ์š”์ฒญ (size, state, type ๋“ฑ) + + +### Week 04 - 05 + +> ์š”์•ฝ +> ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ ๊ด€๋ จ ๋ ˆํผ๋Ÿฐ์Šค ๋””์ž์ธ ์‹œ์Šคํ…œ ๋ถ„์„ํ•œ ๋‚ด์šฉ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ธฐ๋ณธ ๊ตฌํ˜„ ๋ฐฉํ–ฅ(์—๋Ÿฌ, ๋กœ๋”ฉ ์ฒ˜๋ฆฌ ๋ฐฉ์‹) ๊ด€๋ จ ์ดˆ๊ธฐ ์ž‘์—…์„ ์ง„ํ–‰ ์ค‘์ž…๋‹ˆ๋‹ค. +> ๋‹ค์Œ ํšŒ์˜ ์ „๊นŒ์ง€ ์ดˆ์•ˆ ์ปดํฌ๋„ŒํŠธ ์™„์„ฑ + ๋…ผ์˜ ์ง€์  ์ •๋ฆฌํ•ด์„œ ๊ณต์œ  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. + +#### ๋ ˆํผ๋Ÿฐ์Šค ๋””์ž์ธ ์‹œ์Šคํ…œ ๋ถ„์„ + +Next.js ๊ธฐ๋ฐ˜ ์„œ๋น„์Šค ํŠน์„ฑ์ƒ Next.js Image ๋Œ€์‘์ด ๊ฐ€๋Šฅํ•œ ์ƒ์šฉ ๋””์ž์ธ ์‹œ์Šคํ…œ(Mantine, Chakra UI)์„ ์šฐ์„  ๊ฒ€ํ† ํ–ˆ์Šต๋‹ˆ๋‹ค. +๋‹ค๋งŒ ๋กœ๋”ฉ, ์—๋Ÿฌ ์ฒ˜๋ฆฌ ๋ถ€๋ถ„์€ ๋‘ ์‹œ์Šคํ…œ๋งŒ์œผ๋กœ๋Š” ์•„์‰ฌ์šด ์ ์ด ์žˆ์–ด ์ถ”๊ฐ€ ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ๋” ์‚ดํŽด๋ณผ ์˜ˆ์ •์ž…๋‹ˆ๋‹ค. + +- ๊ณตํ†ต : alt ํ•„์ˆ˜ prop ๊ฐ•์ œ +- ์ฐจ์ด์  : fallback ์ฒ˜๋ฆฌ ๋ฐฉ์‹ (Mantine : fallback์šฉ img๋ฅผ ๋ณ„๋„ ๋ Œ๋”๋ง / Chakra UI๋Š” fallbackSrc๋กœ URL์„ ๋ฐ›์•„ ์ฒ˜๋ฆฌ) + +#### ๊ธฐ๋ณธ ๊ตฌํ˜„ ๋ฐฉํ–ฅ +- component prop ํŒจํ„ด ์ฑ„ํƒ (img ๊ธฐ๋ณธ, Next.js Image ์ฃผ์ž… ๊ฐ€๋Šฅ) : asChild + Slot ๋ฐฉ์‹์˜ ํƒ€์ž… ๋ฌธ์ œ(@ts-expect-error ์–ต์ œ ํ•„์š”)๋ฅผ ํ”ผํ•˜๊ธฐ ์œ„ํ•œ ์„ ํƒ + => ์ถ”ํ›„ ๋ณ€๋™ ๊ฐ€๋Šฅ์„ฑ ์žˆ์Œ +- ์—๋Ÿฌ ์ฒ˜๋ฆฌ: ๊ฐ™์€ DOM์—์„œ resolvedSrc๋งŒ ๊ฐฑ์‹ ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ + (Mantine์€ ์—๋Ÿฌ ์‹œ fallback์šฉ img๋ฅผ ๋ณ„๋„๋กœ ๋ Œ๋”๋งํ•˜๋Š” ๋ฐฉ์‹์ธ๋ฐ, ์šฐ๋ฆฌ๋Š” ๋™์ผ DOM์—์„œ resolvedSrc๋งŒ ๊ฐฑ์‹ ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๋‹จ์ˆœํ™”) +- ๋กœ๋”ฉ ์ฒ˜๋ฆฌ: Skeleton ์กฐํ•ฉ ๋ฐฉ์‹ ์ฑ„ํƒ (Mantine, Chakra UI ๋™์ผ ํŒจํ„ด) +- fit prop: cover / contain / fill ์ง€์›, ๊ธฐ๋ณธ๊ฐ’ cover +- radius: ํ˜„์žฌ none ๊ณ ์ •, ์ถ”ํ›„ ๋””์ž์ธ ํ† ํฐ ๋ฐ˜์˜ ์˜ˆ์ • + +#### ๋‹ค์Œ์ฃผ ํ•  ์ผ +- ๋กœ๋”ฉ, ์—๋Ÿฌ ์ฒ˜๋ฆฌ ๊ด€๋ จ ๋ ˆํผ๋Ÿฐ์Šค๋ฅผ ์ถ”๊ฐ€๋กœ ๊ฒ€ํ†  +- ์ดˆ์•ˆ ์ปดํฌ๋„ŒํŠธ ์™„์„ฑ +- ๋…ผ์˜๊ฐ€ ํ•„์š”ํ•œ ์ง€์ ์€ PR๋กœ ๋”ฐ๋กœ ์ •๋ฆฌํ•ด์„œ ํŒ€์›๋ถ„๋“ค์˜ ์˜๊ฒฌ์„ ๋“ฃ๊ณ  ์‹ถ์Œ + +#### 2026.04.29 ์ปดํฌ๋„ŒํŠธํŒ€ ๋ฐœํ‘œ ์ค€๋น„ ํšŒ์˜๋ก + +- ํ”„๋กœ์ ํŠธ ์ฃผ์š” ๋ชฉํ‘œ ๋ฐ ๋ฐฉํ–ฅ์„ฑ + - SIDE ๋””์ž์ธ์‹œ์Šคํ…œ์„ ๋ถ„์„ํ•˜๊ณ  ๋ฒ”์šฉ์ ์ธ ๋””์ž์ธ ์‹œ์Šคํ…œ ๊ตฌ์ถ•ํ•˜์ž + - 1์ฐจ ๋ชฉํ‘œ : ๋””์ž์ธ์‹œ์Šคํ…œ ๋ถ„์„, SIPE ํ™ˆํŽ˜์ด์ง€์— ์ปดํฌ๋„ŒํŠธ ์ ์šฉ + - ๋ชฉํ‘œ ๋‹ฌ์„ฑ์„ ์œ„ํ•œ ๊ตฌ์ฒด์ ์ธ ์•ก์…˜ : ํ™ˆํŽ˜์ด์ง€ ๊ธฐ์ค€ ํ™œ์šฉ์„ฑ ๋†’์€ ์ปดํฌ๋„ŒํŠธ ์œ„์ฃผ๋กœ ์šฐ์„ ์ˆœ์œ„ ์„ค์ • ํ›„ ์ž‘์—… + +- ์ฃผ์ฐจ๋ณ„ ์ž‘์—… + - 1-2์ฃผ์ฐจ + - ๊ธฐ์กด SIDE ์‹œ์Šคํ…œ ๋ฐ ์ƒ์šฉ ๋””์ž์ธ์‹œ์Šคํ…œ ๋ถ„์„ + - ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ๋ฐฉ์‹ ๋…ผ์˜ ๊ตฌ์ฒดํ™” (headless vs headful) + - SIDE ver2 ๋ฐฉํ–ฅ์„ฑ ๋ฐ MVP ๋ฒ”์œ„ ๋ฐ ๋‹ด๋‹น ์ปดํฌ๋„ŒํŠธ ๋ฐฐ์ • + - 3-4์ฃผ์ฐจ + - ๋‹ด๋‹น ์ปดํฌ๋„ŒํŠธ ๋ถ„์„ ๋ฐ ์ž‘์—… ๊ณ„ํš ์„ค์ • -> ๊ฐœ๋ณ„ ์ž‘์—… + - ๋ชจ๊ฐ์ž‘ + - ํŒ€์› PR ๋ฆฌ๋ทฐ + - 5-6์ฃผ์ฐจ + - ์ปดํฌ๋„ŒํŠธ ๋ณธ๊ฒฉ ์ž‘์—… + - ํ…Œ์ŠคํŠธ์ฝ”๋“œ ์ปจ๋ฒค์…˜ ํ™•์ • + - ๋ฒ„๊ทธ ํ”ฝ์Šค, ์ฝ”๋“œ ํ€„๋ฆฌํ‹ฐ ๋ฐ ํ…Œ์ŠคํŠธ ์ฝ”๋“œ ๊ฐœ์„  + - ๊ณ ๋„ํ™”ํ•œ ์ปดํฌ๋„ŒํŠธ SIPE ๋ฐ˜์˜ + +### Week 06 ๊ณผ์ œ - ๋ฐœํ‘œ ์ค€๋น„ + +#### ๊ฐœ์ธ ๋А๋‚€์  (100์ž ์ด๋‚ด) + +๋™๋ฃŒ๋“ค์˜ ์ž‘์—… ๋ฐฉ์‹์„ ๋ณด๊ณ  ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์œผ๋ฉฐ, ํ˜ผ์ž์„œ๋Š” ์ƒ๊ฐ ๋ชปํ–ˆ์„ ๊ฒƒ๋“ค์„ ํ•ด๋ณด๊ณ  ๋ฐฐ์šธ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ฒ˜์Œ์ด๋ผ ์–ด๋ ค์› ์ง€๋งŒ ํ•จ๊ป˜ํ•  ์ˆ˜ ์žˆ์–ด์„œ ์˜๊ด‘์ด์—ˆ์Šต๋‹ˆ๋‹ค. SIPE ์ตœ๊ณ ! + +#### ๋‹ด๋‹น ์ปดํฌ๋„ŒํŠธ ์ž‘์—… ๋‚ด์šฉ ์ •๋ฆฌ + +> ์š”์•ฝ +> as-is: SIDE DS์—๋Š” ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—†์—ˆ์Œ. SIPE๋Š” next/image ๋ž˜ํผ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •์˜ํ•ด์„œ ์‚ฌ์šฉ ์ค‘์ด์—ˆ์œผ๋‚˜ ์‚ฌ์šฉ์ฒ˜๋งˆ๋‹ค ์—๋Ÿฌ/๋กœ๋”ฉ ์ฒ˜๋ฆฌ๊ฐ€ ๋‹ฌ๋ž์Œ. +> to-be: img ๊ธฐ๋ฐ˜ ์‹ ๊ทœ ์ปดํฌ๋„ŒํŠธ ํŒจํ‚ค์ง€ ์ถ”๊ฐ€, Ant Design ๋“ฑ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๋ ˆํผ๋Ÿฐ์Šค๋กœ ๋กœ๋”ฉยท์ •์ƒยท๋Œ€์ฒดยท์—๋Ÿฌ ๋„ค ๊ฐ€์ง€ ์ƒํƒœ๋กœ ๊ตฌ๋ถ„. fallbackSrc, placeholder๋กœ ๋™์ž‘ ํ†ต์ผ +> ๋‚จ์€ ๊ณผ์—… : SIPE ํ™ˆํŽ˜์ด์ง€์— ๋””์ž์ธ์‹œ์Šคํ…œ ์ปดํฌ๋„ŒํŠธ ๋„์ž…. ๊ณ ๋„ํ™” + +- ๋‹ด๋‹น ์ปดํฌ๋„ŒํŠธ : image, input, checkbox, radio, switch +- ์ž‘์—… ๋ฐฉํ–ฅ์„ฑ : SIPE ํ™ˆํŽ˜์ด์ง€์— ์ง์ ‘์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์šฐ์„ ์ ์œผ๋กœ ์ž‘์—…ํ•˜๊ธฐ ์œ„ํ•ด image๋ถ€ํ„ฐ ์ž‘์—… ๊ฒฐ์ • +- `as-is` + - SIDE ๋””์ž์ธ์‹œ์Šคํ…œ : ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ ๋ถ€์žฌ + - SIPE ํ™ˆํŽ˜์ด์ง€ + - 8๊ณณ์—์„œ ์ด๋ฏธ์ง€ ์š”์†Œ ์‚ฌ์šฉ ์ค‘ (ํžˆ์–ด๋กœ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€, Avatar ์ปดํฌ๋„ŒํŠธ ๋Œ€์ฒด 2๊ณณ ์ œ์™ธ 5๊ณณ์„ ์ ์šฉ ๋ฒ”์œ„๋กœ ์„ค์ •) + - ๋‚ด๋ถ€์ ์œผ๋กœ ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ ์„ ์–ธ ํ›„ ์‚ฌ์šฉ ์ค‘ : next/image ์œ„์— ์–‡๊ฒŒ ์˜ฌ๋ฆฐ wrapper ํ˜•ํƒœ + - ๋ฌธ์ œ ์ง€์  : ์‚ฌ์šฉ์ฒ˜๋งˆ๋‹ค ์—๋Ÿฌ ์ฒ˜๋ฆฌ ๋ฐฉ์‹์ด ๋‹ค๋ฆ„ / ๋กœ๋”ฉ ์ฒ˜๋ฆฌ ๋ฐฉ์‹ ๋ถ€์žฌ +- ๊ณผ์ • + - ์ƒ์šฉ ๋””์ž์ธ ์‹œ์Šคํ…œ(Ant Design, Next.js, Mantine, Chakra)์„ ๋ ˆํผ๋Ÿฐ์Šค๋กœ ์ŠคํŽ™ ๊ตฌ์„ฑ +- `to-be` + - ํŒจํ‚ค์ง€๋กœ Image ์ปดํฌ๋„ŒํŠธ ์‹ ๊ทœ ์ถ”๊ฐ€ + - img ๊ธฐ๋ฐ˜ ํ”„๋ ˆ์ž„์›Œํฌ ์ค‘๋ฆฝ์  ์ฝ”์–ด๋กœ ์„œ๋น„์Šค ํ”„๋ ˆ์ž„์›Œํฌ ์ƒ๊ด€์—†์ด ๋™์ผํ•œ ๋™์ž‘๊ณผ API๋ฅผ ์“ฐ๊ฒŒ ํ•จ + - 4๊ฐ€์ง€ ์ƒํƒœ(loading, normal, fallback, error) ๊ธฐ๋ฐ˜์œผ๋กœ ๋กœ๋”ฉ/์„ฑ๊ณต/์—๋Ÿฌ ์ƒํ™ฉ ๊ตฌ๋ถ„ + - fallbackSrc, ์ตœ์ข… ์‹คํŒจ ์‹œ visibility: hidden์œผ๋กœ ์˜์—ญ๋งŒ ๋‚จ๊ธฐ๊ณ  ์ˆจ๊ธธ ์ˆ˜ ์žˆ๋„๋ก ํ•จ +- ๋‚จ์€ ๊ณผ์—… + - SIPE ํ™ˆํŽ˜์ด์ง€ ๋„์ž… + - next/image ์—ฐ๋™ ์ „๋žต ๊ณ ๋ฏผ + - ๊ณ ๋„ํ™” : ๊ธฐ๋ณธ ์—๋Ÿฌ UI, ๋””์ž์ธ ํ† ํฐ ๋ฐ ํ”„๋ฆฌ์…‹ ๋“ฑ, src ๋ณ€๊ฒฝ ์‹œ ์ƒํƒœ ๋ฆฌ์…‹ ๋“ฑ + +### Week 06 - ์ž‘์—… ๋ณด๊ณ  + +> ์š”์•ฝ +> ์ด๋ฏธ์ง€ ์ปดํฌ๋„ŒํŠธ ์ดˆ์•ˆ PR์„ ์˜ฌ๋ ธ์Šต๋‹ˆ๋‹ค. +> - [PR ๋งํฌ](https://github.com/sipe-team/side/pull/262) + +#### ๊ตฌํ˜„ ์™„๋ฃŒ ๋‚ด์šฉ + +- `useImageStatus` ํ›… ๋ถ„๋ฆฌ : ์—๋Ÿฌ/๋Œ€์ฒด ์ด๋ฏธ์ง€ ์ƒํƒœ ๊ด€๋ฆฌ (loading / normal / fallback / error 4๋‹จ๊ณ„) + - fallback 1ํšŒ ์ „ํ™˜ + ๋ฌดํ•œ๋ฃจํ”„ ๋ฐฉ์ง€ (`hasTriedFallback` ํ”Œ๋ž˜๊ทธ) โ€” ๋ ˆํผ๋Ÿฐ์Šค์— ์—†๋Š” ๋ฐฉ์‹์œผ๋กœ ์ง์ ‘ ์ถ”๊ฐ€ + - `onError` ์ฝœ๋ฐฑ ํ˜ธ์ถœ ๋ณด์žฅ +- Props : `src`, `alt` ํ•„์ˆ˜ / `width`, `height`, `fit`, `fill`, `loading`(๊ธฐ๋ณธ๊ฐ’ lazy), `placeholder`, `fallbackSrc` ์ง€์› +- ํ…Œ์ŠคํŠธ 8๊ฐœ ์ผ€์ด์Šค ์ž‘์„ฑ +- Storybook ์ถ”๊ฐ€ (Basic / Fallbacks / WithPlaceholder / WithFill / Fits / ResponsiveWidth) +- ๋‚ด๋ถ€์ ์œผ๋กœ ์—๋Ÿฌ/๋กœ๋”ฉ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋‹ค ๋ณด๋‹ˆ next/image์˜ ์ž์ฒด ์ฒ˜๋ฆฌ์™€ ์ถฉ๋Œ ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์–ด ์ด์ „ ๊ตฌํ˜„ ๋ฐฉ์‹์—์„œ ๋ณ€๊ฒฝ ์žˆ์Œ + (4์ฃผ์ฐจ์—์„œ ๊ฒ€ํ† ํ–ˆ๋˜ component prop ๋ฐฉ์‹์€ next/image ์ž์ฒด ์ฒ˜๋ฆฌ์™€์˜ ์ถฉ๋Œ ๊ฐ€๋Šฅ์„ฑ์œผ๋กœ ์ด๋ฒˆ ๊ตฌํ˜„์—์„œ ์ œ์™ธ, ๋Œ€์‘ ๋ฐฉ์‹์€ ํŒ€ ๋…ผ์˜ ํ›„ ๊ฒฐ์ • ์˜ˆ์ •) + +#### ๋ ˆํผ๋Ÿฐ์Šค ์ถ”๊ฐ€ ๋ถ„์„ + +4์ฃผ์ฐจ์—์„œ Mantine, Chakra UI๋ฅผ ๊ฒ€ํ† ํ–ˆ๊ณ , ์—๋Ÿฌ ์ฒ˜๋ฆฌ์™€ ๋กœ๋”ฉ ์ฒ˜๋ฆฌ ๊ด€๋ จํ•ด์„œ ์ถ”๊ฐ€ ๋ ˆํผ๋Ÿฐ์Šค(Ant Design, Next.js)๋ฅผ ์‚ดํŽด๋ดค์Šต๋‹ˆ๋‹ค. + +- ์ƒํƒœ 4๋‹จ๊ณ„ ๋ถ„๋ฆฌ ๊ตฌ์กฐ : Ant Design ์ฐธ๊ณ  +- ์—๋Ÿฌ ์‹œ `visibility: hidden`์œผ๋กœ ๊ณต๊ฐ„ ์œ ์ง€ : Ant Design ์ฐธ๊ณ  +- `fallbackSrc` prop ์ œ๊ณต + `onError` ํ•ญ์ƒ ํ˜ธ์ถœ : Ant Design + Next.js ์ฐธ๊ณ  + +#### ๋‹ค์Œ ์ฃผ ํ•  ์ผ +- PR ํ”ผ๋“œ๋ฐฑ ๋ฐ˜์˜ ๋ฐ ์„ธ๋ถ€ ์ž‘์—… ์ง„ํ–‰ +- ํ† ํฐ/radius ์ฒ˜๋ฆฌ ๋ฐฉํ–ฅ ๋…ผ์˜ (ํ˜„์žฌ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ๊ฐ’์„ ์ž…๋ ฅํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์—ด์–ด๋‘” ์ƒํƒœ) + +#### ํŒ€๊ณผ ๋…ผ์˜ํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ +- ์—๋Ÿฌ ํ‘œ์‹œ ์ •์ฑ… : ํ˜„์žฌ `visibility: hidden`์œผ๋กœ ๊ณต๊ฐ„ ์œ ์ง€ ์ค‘. ๊ธฐ๋ณธ fallback UI๋ฅผ ๋‚ด์žฅํ•˜๋Š” ๋ฐฉํ–ฅ์œผ๋กœ ๊ฐ€๋ฉด ์—๋Ÿฌ ์ƒํƒœ๊ฐ€ ๋” ๋ช…ํ™•ํ•ด์งˆ ๊ฒƒ ๊ฐ™์•„ ๋””์ž์ธํŒ€๊ณผ UI ํ˜•ํƒœ ๋…ผ์˜ ํ›„ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉํ–ฅ ์ œ์•ˆ +- next/image ๋Œ€์‘ ๋ฐฉ์‹ : ๋‹จ์ผ ํŒจํ‚ค์ง€ ๋Œ€์‘ vs `@sipe-team/image-next` ๋ถ„๋ฆฌ +- `aspectRatio` prop : ํ˜„์žฌ ์„œ๋น„์Šค์—์„œ ๋น„์œจ ์ฒ˜๋ฆฌ ์ผ€์ด์Šค๊ฐ€ ์ ์–ด ์ œ์™ธํ–ˆ์œผ๋‚˜, ํ•„์š” ์‹œ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉํ–ฅ ๊ณ ๋ ค \ No newline at end of file