Giter Club home page Giter Club logo

ujinlog's Introduction

๐Ÿ“…ย ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„

  • 1์ฐจ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ : 2024.06.08 ~ 2024.06.26

๐Ÿ”ฅย ํ”„๋กœ์ ํŠธ ๋ชฉํ‘œ

  • css๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ์• ๋‹ˆ๋งค์ด์…˜๊ณผ ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒํ•œ ์š”์†Œ ๊ตฌํ˜„

๐Ÿ’ปย ๊ตฌํ˜„ํ•œ ๊ธฐ์ˆ 

  • ์Šคํฌ๋กค ๊ธฐ๋ฐ˜ ์นด๋“œ ๋ ˆ์ด์•„์›ƒ
  • keyframes๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์–‘ํ•œ ์Šฌ๋ผ์ด๋“œ ์ธ ๋ฐ ์›ํ˜• ํ™•๋Œ€/์ถ•์†Œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ ์šฉ
  • svg๋ฅผ ํ™œ์šฉํ•˜์—ฌ progress circle bar ๊ตฌํ˜„

๐Ÿ› ๏ธย ์‚ฌ์šฉํ•œ ๊ธฐ์ˆ  ์Šคํƒ

  • Front : React JavaScript styled-components SVG
  • ๋ฒ„์ „ ๋ฐ ์ด์Šˆ๊ด€๋ฆฌ : Github
  • ์„œ๋น„์Šค ๋ฐฐํฌ ํ™˜๊ฒฝ : Vercel

๐Ÿ“ƒย ํŽ˜์ด์ง€ ๋ณ„ ๋กœ์ง

HomePage(ํ™ˆํŽ˜์ด์ง€)

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-06-26 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 11 49 49
  1. ๊ทธ๋ฆฌ๋“œ ํ˜•ํƒœ์˜ ์นด๋“œ ๋ชฉ๋ก์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. ์Šคํฌ๋กค์„ ๋‚ด๋ฆฌ๋ฉด ๋” ๋งŽ์€ ์นด๋“œ๋“ค์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  3. ์นด๋“œ๋ฅผ ํ˜ธ๋ฒ„ํ–ˆ์„ ๋•Œ ์—ฌ๋Ÿฌ์žฅ์˜ ์นด๋“œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ModalPage(๋ชจ๋‹ฌ ํŽ˜์ด์ง€)

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-06-26 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 11 56 25 แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-06-26 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 11 52 30

Link Icons

  1. ๊ฐ ํ”„๋กœ์ ํŠธ์˜ ๊นƒํ—ˆ๋ธŒ, ์ด๋ฉ”์ผ, ๋งํฌ๋“œ์ธ ๋งํฌ๋ฅผ ๋ˆ„๋ฅด๋ฉด ํ•ด๋‹น ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•ฉ๋‹ˆ๋‹ค.

Main Card

  1. hover ํ–ˆ์„ ๋•Œ ์นด๋“œ ๋’ท๋ฉด์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  2. ์นด๋“œ ์•ž๋ฉด์—์„œ๋Š” ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์„ค๋ช…์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  3. ์นด๋“œ ๋’ท๋ฉด์—์„œ๋Š” ์ €์— ๋Œ€ํ•œ ์„ค๋ช…์„ ๋ณผ ์ˆ˜ ์žˆ๊ณ  QR์ฝ”๋“œ๋ฅผ ์ฐ์œผ๋ฉด ๋ชจ๋ฐ”์ผ ๋ฒ„์ „์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Progress Circle

  • SVG๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Progress Circle์— ํƒ€์ด๋จธ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ํƒ€์ด๋จธ๊ฐ€ ๋๋‚˜๋ฉด ์ž๋™์œผ๋กœ ๋‹ค์Œ ์นด๋“œ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.
  • X ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ๋ชจ๋‹ฌ์ฐฝ์ด ๋‹ซํž™๋‹ˆ๋‹ค.

Mobile ๋ฒ„์ „

แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-06-26 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 11 46 04 แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-06-26 แ„‹แ…ฉแ„’แ…ฎ 12 23 17 แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2024-06-26 แ„‹แ…ฉแ„’แ…ฎ 12 23 57

ujinlog's People

Contributors

ujeans avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.