GDSC-DGU/gdsc-dgu

[๐Ÿฅน Feedback] Timeline Feedback

Opened this issue ยท 1 comments

๐Ÿ›  Issue

timeline feedback...
๋„ˆ๋ฌด ์ž˜ ํ•ด์ฃผ์…จ์–ด์š”! ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ^_^

๐Ÿ“ To-do

  • ์ „์ฒด ๋ทฐ ํฌ๊ธฐ ์ˆ˜์ •
    ํ˜„์žฌ padding๊ณผ margin์œผ๋กœ ๋‚ด๋ถ€ ๋ทฐ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๊ณ  ๊ณ„์‹œ๋„ค์š”!
    ๋‚ด๋ถ€ ๋ทฐ์˜ ํฌ๊ธฐ๋Š” 1200px์„ ๋„˜์–ด๊ฐ€์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

w-full px-10์œผ๋กœ ์ตœ์ƒ๋‹จ ํ™”๋ฉด์„ ์ •์˜ํ•˜๋Š” ๊ฒƒ ๋ณด๋‹ค๋Š”

<section className="flex justify-center">
    <div className="max-w-[1200px] tablet:px-10 px-4">
       <div className="w-full">
           ์ฝ”๋“œ~~~~

์œผ๋กœ ์ •์˜ ํ•ด๋ณด๋Š”๊ฑด ์–ด๋–จ๊นŒ์š”?
<section className="flex justify-center"> ์•„๋ž˜๋กœ ์ •์˜๋œ
๋‚ด๋ถ€ ์ฝ˜ํ…์ธ ๋“ค์ด max-w-[1200px]์„ ๋„˜์–ด๊ฐ€์ง€ ์•Š๊ณ ,
tablet:px-10 px-4 ๋ฐ์Šคํฌํƒ‘๊ณผ ํ…Œ๋ธ”๋ฆฟ์—์„œ๋Š” ์ขŒ์šฐ ํŒจ๋”ฉ์ด 40px, ๋ชจ๋ฐ”์ผ์—์„œ๋Š” 16px๋กœ ์ •์˜๋˜์–ด ๋ทฐ ๊ตฌํ˜„์ด ์กฐ๊ธˆ ๋” ์ˆ˜์›”ํ•˜์ง€ ์•Š์„๊นŒ ํ•ฉ๋‹ˆ๋‹ค.

  • generation Button style ์ˆ˜์ •
    <button
      className="w-10 h-8 bg-transparent border rounded-lg text-xs leading-4 px-2 py-1"
      style={{ borderWidth: '1.5px', borderColor, color: textColor }}
      onClick={() => onClick(label)}
    >

w-10 h-8 ์˜ ๊ฒฝ์šฐ ๊ตณ์ด ์ง€์ •ํ•  ํ•„์š”๋Š” ์—†์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. padding ์„ค์ •์œผ๋กœ ์ž๋™์ง€์ •๋˜๋‹ˆ๊นŒ์š”!
text-xs leading-4 ์–˜๋„ค๋Š” font style ์จ์ฃผ์„ธ์š”!

borderWidth: '1.5px' 1px...์ž…๋‹ˆ๋‹ค..ใ…Žใ…Ž

  • Date Header style - ์ขŒ์šฐ 8px ๋„ฃ์–ด์ฃผ์„ธ์š”~! px-2

  • (์ œ์•ˆ) Flex๋ฅผ ์คฌ์œผ๋ฉด margin์œผ๋กœ ๊ฐ„๊ฒฉ์„ ์กฐ์ ˆํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค๋Š” ๋ณด๋‹ค๋Š” gap์„ ์จ๋ณด๋Š”๊ฑด ์–ด๋–ค๊ฐ€์š”?

์™€.. ํ•˜๋‚˜ํ•˜๋‚˜ ์•Œ๋ ค์ฃผ์…”์„œ ๋„˜ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค๐Ÿฅน ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉํ–ฅ์œผ๋กœ ์ˆ˜์ •ํ›„์— ์ฒดํฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹น!!