๐ŸŒฑ MEGAFOX ํ”„๋กœ์ ํŠธ ๊ฐœ์š”

  • MEGAFOX๋Š” ์˜ํ™” ์˜ˆ๋งค ์‚ฌ์ดํŠธ MEGABOX๋ฅผ ํด๋ก ํ•œ ํ”„๋กœ์ ํŠธ ์ž…๋‹ˆ๋‹ค.
  • ์งง์€ ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„๋™์•ˆ ๊ฐœ๋ฐœ์— ์ง‘์ค‘ํ•ด์•ผ ํ•˜๋ฏ€๋กœ ๋””์ž์ธ/๊ธฐํš ๋ถ€๋ถ„๋งŒ ํด๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.

โ˜˜๏ธ ๊ฐœ๋ฐœ ์ธ์› ๋ฐ ๊ธฐ๊ฐ„

  • ๊ฐœ๋ฐœ๊ธฐ๊ฐ„ : 2021. 10. 18 ~ 2021. 10. 28

  • ๊ฐœ๋ฐœ ์ธ์› : ํ”„๋ก ํŠธ์—”๋“œ 3๋ช…, ๋ฐฑ์—”๋“œ 2๋ช…

  • back-end repo โ†

๐Ÿ€ ํ”„๋กœ์ ํŠธ ์„ ์ •์ด์œ 

  • ์ด ์‚ฌ์ดํŠธ๋Š”, ์กฐ์‚ฌ๊ฒฐ๊ณผ ํด๋ก  ์ฝ”๋”ฉ์„ ํ•˜๋ฉฐ ๋ฐฐ์šธ์ ์ด ๋งŽ์•„ ์„ ์ •ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ ์šฉ ๊ธฐ์ˆ  ๋ฐ ๊ตฌํ˜„ ๊ธฐ๋Šฅ

๐Ÿš€ ์ ์šฉ ๊ธฐ์ˆ 

HTML
JavaScript
React
React Hooks
React Router
Styled-Components

๐Ÿ”ฅ ๊ตฌํ˜„ ๊ธฐ๋Šฅ

๐Ÿ‘ฉ๐Ÿผโ€๐Ÿ’ป ๊ฐ•๋‹จ

  • Header์˜์—ญ navigation๊ตฌํ˜„
  • sitemap ๊ตฌํ˜„
  • ์˜ํ™” ๋ช…์— ๋งˆ์šฐ์Šค ํ˜ธ๋ฒ„ ์‹œ ํ•ด๋‹น ์˜ํ™” ํฌ์Šคํ„ฐ ์ถœ๋ ฅ๋˜๋Š” ๊ธฐ๋Šฅ ๊ตฌํ˜„
  • ๋กœ๊ทธ์ธ/์•„์›ƒ ์ƒํƒœ์— ๋”ฐ๋ฅธ ์œ ์ € ์ •๋ณด ์ถœ๋ ฅ ๊ตฌํ˜„
  • ๋ฉ”์ธํŽ˜์ด์ง€ : api๋ฅผ ์‚ฌ์šฉํ•œ ๊ด€๊ฐ ์ˆ˜ top 4 ์˜ํ™”๋ฆฌ์ŠคํŠธ ์ถœ๋ ฅ
  • ์˜ํ™” ํฌ์Šคํ„ฐ์— ๋งˆ์šฐ์Šค ํ˜ธ๋ฒ„ ์‹œ ํ•ด๋‹น ์˜ํ™” ์ •๋ณด ์ถœ๋ ฅ ๊ธฐ๋Šฅ ๊ตฌํ˜„

๐Ÿ‘ฉโ€๐Ÿ’ป ์‹ ํ˜œ๋ฆฌ

  • ๊ณต์šฉ ํƒญ ์ปดํฌ๋„ŒํŠธ ๊ตฌํ˜„
  • ์ „์ฒด ์˜ํ™” ํŽ˜์ด์ง€ ๊ตฌํ˜„
  • ์˜ํ™” ์ƒ์„ธ ํŽ˜์ด์ง€ ๊ตฌํ˜„
  • ์ „์ฒด ์˜ํ™” ํŽ˜์ด์ง€๋„ค์ด์…˜ ๊ตฌํ˜„
  • ์ „์ฒด ์˜ํ™” ์ด๋ฏธ์ง€ hover์‹œ API๋กœ ๋ฐ›์•„์˜ค๋Š” ์ค„๊ฑฐ๋ฆฌ ๋‚ด์šฉ์ด ๋‚˜ํƒ€๋‚˜๋„๋ก ๊ตฌํ˜„
  • ๋™์  ๋ผ์šฐํŒ…์„ ์ด์šฉํ•ด ๊ฐ ์˜ํ™” ์ƒ์„ธ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€๊ฒŒ ๊ตฌํ˜„
  • ๊ด€๋žŒ ๋“ฑ๊ธ‰์— ๋”ฐ๋ผ ์•„์ด์ฝ˜์„ ์ด๋ฏธ์ง€๊ฐ€ ์•„๋‹Œ ์Šคํƒ€์ผ๋กœ ๊ตฌํ˜„

๐Ÿง‘๐Ÿปโ€๐Ÿ’ป ์ •์ฐฌ์˜

  • ๊ณต์šฉ style variables, font ์ถ”๊ฐ€
  • ์†Œ์…œ ๋กœ๊ทธ์ธ (์นด์นด์˜ค) ๊ตฌํ˜„
  • ์ „์ฒด ๊ทน์žฅ ํŽ˜์ด์ง€ ๊ตฌํ˜„
  • ์Šคํฌ๋กค ์ด๋ฒคํŠธ (์ƒ๋‹จ ์ด๋™ ๋ฒ„ํŠผ) ๊ตฌํ˜„
  • ์˜ˆ๋งค ํŽ˜์ด์ง€ ๊ตฌํ˜„
  • ๋‚ ์งœ ์Šฌ๋ผ์ด๋“œ ๊ตฌํ˜„
  • ์ƒ์˜ ์œ ๋ฌด์— ๋”ฐ๋ฅธ ๋ธ”๋Ÿฌ์ฒ˜๋ฆฌ ๊ตฌํ˜„
  • ๋‹ค์ค‘ ์„ ํƒ ๋ฒ„ํŠผ ๊ตฌํ˜„, ์„ ํƒ๋œ ํƒ€๊ฒŸ์— ๋”ฐ๋ฅธ APIํ˜ธ์ถœ ๊ตฌํ˜„

์˜์ƒ

MEGAFOX.mov

๐Ÿ”ด Reference

  • ์ด ํ”„๋กœ์ ํŠธ๋Š” MEGABOX ์‚ฌ์ดํŠธ๋ฅผ ์ฐธ์กฐํ•˜์—ฌ ํ•™์Šต๋ชฉ์ ์œผ๋กœ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
  • ํ•™์Šต์šฉ์œผ๋กœ ๋งŒ๋“  ํ”„๋กœ์ ํŠธ์ž„์œผ๋กœ ์ด๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ด๋“์„ ์ทจํ•˜๊ฑฐ๋‚˜ ๋ฌด๋‹จ ๋ฐฐํฌํ•  ๊ฒฝ์šฐ ๋ฒ•์ ์œผ๋กœ ๋ฌธ์ œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.