diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a841f1e --- /dev/null +++ b/.gitignore @@ -0,0 +1,45 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +# Dependencies +node_modules/ + +# Build output +dist +dist-ssr +build + +# React / Vite cache +.vite +.turbo + +# Env files +.env +.env.* +!.env.example + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# Testing +coverage + +# TypeScript +*.tsbuildinfo + +# Others +*.local \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..ac10312 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "semi": true, + "singleQuote": true, + "printWidth": 80, + "tabWidth": 2, + "trailingComma": "all" +} diff --git a/README.md b/README.md index 70fa983..eb075c6 100644 --- a/README.md +++ b/README.md @@ -2,49 +2,17 @@ > Netlify ์ฃผ์†Œ - https://ys-sprint-pandamarket.netlify.app/ ๐Ÿ› ๏ธ -## ์†Œ๊ฐœ - -์•ˆ๋…•ํ•˜์„ธ์š”! ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! ๐Ÿฅณ -ํŒ๋‹ค๋งˆ์ผ“์€ ๋”ฐ๋œปํ•œ ์ค‘๊ณ ๊ฑฐ๋ž˜๋ฅผ ์œ„ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”Œ๋žซํผ์ด์—์š”. ์—ฌ๋Ÿฌ๋ถ„์€ ์ด๊ณณ์—์„œ ์ƒํ’ˆ์„ ๋“ฑ๋กํ•˜๊ณ , ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž๋“ค๊ณผ ์†Œํ†ตํ•˜๋ฉฐ, ์ž์œ ๋กญ๊ฒŒ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์–ด์š”. ๋งค์ฃผ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์„ ํ†ตํ•ด ๊ธฐ๋Šฅ์„ ํ•˜๋‚˜์”ฉ ๋งŒ๋“ค์–ด ๊ฐ€๋ฉฐ ์„ฑ์žฅํ•ด ๋‚˜๊ฐ€๋Š” ์—ฌ์ •์„ ํ•จ๊ป˜ํ•ด์š”. ๐Ÿš€ - -![PandaMarket](https://github.com/user-attachments/assets/3784b99f-73c9-4349-a9a9-92b2a7563574) -_์œ„ ์ด๋ฏธ์ง€๋Š” ํŒ๋‹ค๋งˆ์ผ“์˜ ๋Œ€ํ‘œ ์ด๋ฏธ์ง€์ž…๋‹ˆ๋‹ค._ ๐Ÿ“ธ - -## ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์ด๋ž€? ๐Ÿค” - -์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์€ **ํ•˜๋‚˜์˜ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ธธ๊ฒŒ ์ง„ํ–‰ํ•˜๋ฉด์„œ, ๊ทธ ๊ณผ์ •์—์„œ ์ฃผ๊ธฐ์ ์œผ๋กœ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์‹œ์Šคํ…œ**์ด์—์š”. ๊ฐ ์Šคํ”„๋ฆฐํŠธ๋งˆ๋‹ค ๋ฐฐ์šด ์ด๋ก ์„ ์ ์šฉํ•ด ๋ณด๊ณ , **๋ฉ˜ํ† ๋‹˜๊ป˜ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์•„๊ฐ€๋ฉฐ ์‹ค๋ ฅ์„ ์‘ฅ์‘ฅ ํ‚ค์›Œ๊ฐˆ ์ˆ˜ ์žˆ๋Š” ์ค‘์š”ํ•œ ๊ฐœ์ธ ๊ณผ์ œ**๋ž๋‹ˆ๋‹ค. ๐Ÿ’ช - -## ์ฃผ์š” ๊ธฐ๋Šฅ โœจ - -1. **์ƒํ’ˆ ๋“ฑ๋ก**: ๋‚ด๊ฐ€ ๊ฐ€์ง„ ๋ฌผ๊ฑด์„ ์˜ฌ๋ฆฌ๊ณ , ์‚ฌ์ง„๊ณผ ์„ค๋ช…์„ ์ถ”๊ฐ€ํ•ด ์ง์ ‘ ํŒ๋งคํ•  ์ˆ˜ ์žˆ์–ด์š”! -2. **๋ฌธ์˜ ๋Œ“๊ธ€**: ์ƒํ’ˆ์— ๋Œ€ํ•œ ๊ถ๊ธˆํ•œ ์ ์ด๋‚˜ ์˜๊ฒฌ์„ ์ž์œ ๋กญ๊ฒŒ ๋‚จ๊ธธ ์ˆ˜ ์žˆ๋‹ต๋‹ˆ๋‹ค. ๐Ÿ“ -3. **์ž์œ ๊ฒŒ์‹œํŒ**: ๋‹ค์–‘ํ•œ ์ฃผ์ œ๋กœ ์นœ๊ตฌ๋“ค๊ณผ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆ„๊ณ , ์ •๋ณด๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์ด์—์š”! ๐Ÿ—ฃ๏ธ - -## ํ”„๋กœ์ ํŠธ ๋ธŒ๋žœ์น˜ ๊ตฌ์กฐ ๐Ÿ—๏ธ - -ํ”„๋กœ์ ํŠธ๋Š” ๋‹จ๊ณ„๋ณ„๋กœ ๋‚˜๋‰˜์–ด ์žˆ๊ณ , ๊ฐ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์— ๋งž๋Š” ๋ธŒ๋žœ์น˜๊ฐ€ ์žˆ์–ด์š”. ๊ฐ ๋ธŒ๋žœ์น˜๋ฅผ ํ†ตํ•ด ์ฒด๊ณ„์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ฉฐ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์–ด์š”. ๐ŸŽฏ - -### ๋ธŒ๋žœ์น˜ ์„ค๋ช… - -1. **basic (part1): ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 1 ~ 4 FE ์š”๊ตฌ์‚ฌํ•ญ** - - - ๊ธฐ๋ณธ์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์œ„ํ•œ ์ดˆ๊ธฐ ๋ธŒ๋žœ์น˜์ž…๋‹ˆ๋‹ค. HTML, CSS, JavaScript ๋“ฑ์„ ์‚ฌ์šฉํ•ด ๊ธฐ๋ณธ์„ ๋‹ค์ง‘๋‹ˆ๋‹ค. - - **์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 1๋ถ€ํ„ฐ 4๊นŒ์ง€**์˜ ํ”„๋ก ํŠธ์—”๋“œ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์š”. - -2. **react (part2): ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 5 ~ 7 FE ์š”๊ตฌ์‚ฌํ•ญ** - - - React ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ธŒ๋žœ์น˜์ž…๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜์™€ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๋ฐฐ์›๋‹ˆ๋‹ค. - - **์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 5๋ถ€ํ„ฐ 7๊นŒ์ง€, ๊ทธ ์ดํ›„**์˜ ํ”„๋ก ํŠธ์—”๋“œ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์š”. - - ๋งŒ์•ฝ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 9๋ถ€ํ„ฐ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ Next๊ฐ€ ์•„๋‹Œ React๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด react ๋ธŒ๋žœ์น˜๋ฅผ ์‚ฌ์šฉํ•ด์š”. - -3. **next (part3,4): ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 8 FE ์š”๊ตฌ์‚ฌํ•ญ~** - - - Next.js๋ฅผ ์‚ฌ์šฉํ•ด ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR)๊ณผ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ(SSG) ๋“ฑ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. - - **์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 8๋ถ€ํ„ฐ** ์‹œ์ž‘ํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์š”. - - ๋งŒ์•ฝ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 9๋ถ€ํ„ฐ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ React๊ฐ€ ์•„๋‹Œ Next๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด next ๋ธŒ๋žœ์น˜๋ฅผ ์‚ฌ์šฉํ•ด์š”. - -> _์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ ๋‚ด ๋ฐฑ์—”๋“œ ์š”๊ตฌ์‚ฌํ•ญ์€ [๋ฐฑ์—”๋“œ ๋ ˆํฌ์ง€ํ† ๋ฆฌ](https://github.com/codeit-sprint-fullstack/11-sprint-mission-be)์˜ ๋ธŒ๋žœ์น˜์—์„œ ๊ด€๋ฆฌํ•ด์ฃผ์„ธ์š”_ - ---- +## ๋„ค์ด๋ฐ ๊ทœ์น™ + +- ์นด๋ฉœ ์ผ€์ด์Šค(camelCase) JS/TS +- ํŒŒ์Šค์นผ ์ผ€์ด์Šค(PascalCase) React ์ปดํฌ๋„ŒํŠธ/ํด๋ž˜์Šค +- ์Šค๋„ค์ดํฌ ์ผ€์ด์Šค(snake_case) ํ™˜๊ฒฝ ๋ณ€์ˆ˜ +- ์ผ€๋ฐฅ ์ผ€์ด์Šค(kebab-case) CSS, id, ํด๋” ๋ฐ ์ผ๋ฐ˜ ํŒŒ์ผ + +## ๋ธŒ๋ผ์šฐ์ € ๋ฐ˜์‘ํ˜• ์‚ฌ์ด์ฆˆ +- PC: 1200px ์ด์ƒ +- Tablet: 744px ์ด์ƒ ~ 1199px ์ดํ•˜ +- Mobile: 375px ์ด์ƒ ~ 743px ์ดํ•˜ +- 375px ๋ฏธ๋งŒ ์‚ฌ์ด์ฆˆ์˜ ๋””์ž์ธ์€ ๊ณ ๋ คํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ณธ ํ”„๋กœ์ ํŠธ๋Š” [์ฝ”๋“œ์ž‡](https://www.codeit.kr)์˜ ์†Œ์œ ์ด๋ฉฐ, ๊ต์œก ๋ชฉ์ ์œผ๋กœ๋งŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ยฉ 2025 Codeit. All rights reserved. diff --git a/css/header.css b/css/header.css index d35ae4c..e729bf3 100644 --- a/css/header.css +++ b/css/header.css @@ -38,3 +38,18 @@ header .login { font-weight: 600; line-height: 26px; /* 162.5% */ } + +@media (max-width: 1199px) { + /* tablet ์‚ฌ์ด์ฆˆ */ + + header { + padding: 12px 24px; + } +} + +@media screen and (max-width: 743px) { + /* mobile ์‚ฌ์ด์ฆˆ */ + header { + padding: 12px 16px; + } +} \ No newline at end of file diff --git a/css/home.css b/css/home.css index bb42c54..c7ae134 100644 --- a/css/home.css +++ b/css/home.css @@ -16,6 +16,7 @@ main .contents article { } main .contents article h1 { + width: 295px; color: var(--Secondary-700); font-family: Pretendard; font-size: var(--pTr-40); @@ -39,8 +40,7 @@ main .contents article a { line-height: 32px; /* 160% */ } main .contents img { - width: 60%; - max-width: 746px; + width: 746px; height: initial; } @@ -131,10 +131,11 @@ footer { justify-content: space-between; align-items: flex-start; gap: 10px; + position: relative; } footer p, -footer .footer-center li { +footer .center li { color: var(--Secondary-400); text-align: center; font-family: Pretendard; @@ -143,16 +144,16 @@ footer .footer-center li { font-weight: 400; line-height: normal; } -footer ul.footer-center { +footer ul.center { display: flex; gap: 30px; } -footer ul.footer-center li a { +footer ul.center li a { color: var(--Secondary-200); } -footer ul.footer-icons { +footer ul.icons { display: flex; gap: 12px; flex-shrink: 0; @@ -160,7 +161,7 @@ footer ul.footer-icons { align-items: flex-end; } -footer ul.footer-icons li a { +footer ul.icons li a { width: 20px; height: 20px; display: inline-block; @@ -185,15 +186,129 @@ li.icon-instargram a { background: url(/img/sns/ic_instagram.svg); } -@media all and (max-width: 1200px) { - main .contents article, - main .contents img { - width: 50%; +@media (max-width: 1199px) { + /* tablet ์‚ฌ์ด์ฆˆ */ + main section.contents { + height: fit-content; + flex-direction: column; + justify-self: center; + align-items: center; + padding: 84px 0 0 0; + gap: 211px; + text-align: center; + } + + main section.contents img { + width: 744px; + } + + main section.contents article { + gap: 24px; + bottom: 0; + align-items: center; + } + + main section.contents article h1 { + width: 100%; + } + + section.home { + padding: 24px; + } + + section.home article { + flex-direction: column; + gap: 24px; + background: none; + } + + section.home.search article { + flex-direction: column-reverse; + } + + section.home article img { + width: 100%; + height: fit-content; + } + + section.home .capter { + width: 100%; + } + + section.home .capter h2 { + font-size: var(--pTr-32); + margin: 16px 0 24px 0; + } + + section.home .capter p { + font-size: var(--pTr-18); + } + + main .contents bottom { + padding: 201px 0 0 0; + gap: 217px; + } + + footer { + padding: 32px 24px; + } + + .br-style { + display: none; + } +} + +@media screen and (max-width: 743px) { + /* mobile ์‚ฌ์ด์ฆˆ */ + main section.contents { + padding: 48px 0 0 0; + gap: 132px; + } + + main section.contents article h1 { + width: 240px; + font-size: var(--pTr-32); + } + + main section.contents article a { + width: 240px; + padding: 11px; + } + + section.home .capter h2 { + margin: 8px 0 16px 0; + font-size: var(--ptr-24); + } + + section.home .capter h4, + section.home .capter p { + font-size: var(--ptr-16); + } + + section .home { + padding: 52px 16px; + } + + .no-box { + background: #fff; + height: 59px; + } + + main .contents.bottom { + padding: 121px 0 0 0; + gap: 71px; + } + + main section.contents img { + width: calc(100% - 32px); + } + + footer { + padding: 32px 16px; } - .home article img { - width: 50%; - max-width: 588px; - height: initial; + footer p { + position: absolute; + bottom: 65px; } } diff --git a/css/login.css b/css/login.css index 01026b2..b13cea8 100644 --- a/css/login.css +++ b/css/login.css @@ -2,12 +2,12 @@ body { background: #fff; } -#wrap.login_wrapper { +.wrap.login-wrapper { max-width: 640px; - margin: 231px auto 284px auto; + margin: 60px auto 284px auto; } -#wrap.login_wrapper .login_logo { +.wrap.login-wrapper .login-logo { width: 100%; display: flex; align-items: center; @@ -15,16 +15,20 @@ body { margin: 0 0 40px 0; } -#wrap.login_wrapper .login_logo img { +.wrap.login-wrapper .login-logo img { width: 100%; max-width: 396px; } -.login_wrapper form { +.login-wrapper form { display: flex; flex-direction: column; } +form .box { + margin: 0 0 24px 0; +} + form label { color: var(--Secondary-800); font-family: Pretendard; @@ -38,11 +42,11 @@ form label { form input { width: 640px; height: 56px; + margin: 16px 0 0 0; padding: 16px 24px; border-radius: 12px; background: var(--Secondary-100); border: 1px solid var(--Secondary-100); - margin: 0 0 24px 0; color: var(--Secondary-400); font-family: Pretendard; font-size: 1rem; @@ -58,6 +62,22 @@ form input:focus { border: 1px solid #3692ff; } +form input.input-out:not(:focus) { + border: 1px solid var(--error-red); +} + +form .error-text { + width: 100%; + padding: 8px 16px 0 16px; + display: none; +} + +form .error-text.active { + width: 100%; + padding: 8px 16px 0 16px; + display: inline-block; +} + form button { display: flex; width: 640px; @@ -78,35 +98,53 @@ form button { line-height: 32px; } -form button:hover { +form button.active { background: var(--Primary-100); border: 1px solid var(--Primary-100); } -form .password_input { +form button:hover { + opacity: 0.9; +} + +form .error-text { + color: var(--error-red); + font-family: Pretendard; + font-size: 15px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +form .pw-box { position: relative; } -form .password_input .eyes { +form .pw-box .eyes { position: absolute; top: 18px; right: 24px; z-index: 1; } -form .password_input .eyes:hover { +form .pw-box .eyes:hover { cursor: pointer; } -form .password_input .eyes .eyes_on { +form .pw-box .eyes .eyes-icon { width: 24px; height: 24px; display: inline-block; + background: url(/img/login/btn_visibility_off.svg) no-repeat; + background-size: 100% auto; +} + +form .pw-box .eyes.active .eyes-icon { background: url(/img/login/btn_visibility_on.svg) no-repeat; background-size: 100% auto; } -.sns_login { +.sns-login { display: flex; justify-content: space-between; width: 640px; @@ -120,7 +158,7 @@ form .password_input .eyes .eyes_on { margin: 24px 0; } -.sns_login p { +.sns-login p { color: var(--Secondary-800); font-family: Pretendard; font-size: 1rem; @@ -129,13 +167,13 @@ form .password_input .eyes .eyes_on { line-height: 26px; } -.sns_login ul { +.sns-login ul { display: flex; gap: 16px; } -.sns_login ul li, -.sns_login ul li a { +.sns-login ul li, +.sns-login ul li a { width: 42px; height: 42px; } @@ -154,3 +192,34 @@ form .password_input .eyes .eyes_on { color: var(--Primary-100); text-decoration: underline; } + +@media (max-width: 1199px) { + /* tablet ์‚ฌ์ด์ฆˆ */ + .wrap.login-wrapper { + margin: 48px auto 48px auto; + } +} + +@media screen and (max-width: 743px) { + /* mobile ์‚ฌ์ด์ฆˆ */ + .wrap.login-wrapper { + max-width: 343px; + margin: 24px auto; + } + + .wrap.login-wrapper .login-logo img { + max-width: 198px; + } + + form input, + form button, + .sns-login { + width: 100%; + } +} + +@media screen and (max-width: 375px) { + .wrap.login-wrapper { + margin: 24px 16px; + } +} diff --git a/css/reset.css b/css/reset.css index 1168332..89070ed 100644 --- a/css/reset.css +++ b/css/reset.css @@ -13,7 +13,7 @@ body { background: #f8f8f8; } -#wrap { +.wrap { width: 100%; max-width: 1920px; height: 100%; @@ -146,8 +146,59 @@ button:hover { /* px To rem */ --pTr-40: 2.5rem; /* 40px */ + --pTr-32: 2rem; /* 32px */ --pTr-24: 1.5rem; /* 24px */ --pTr-20: 1.25rem; /* 20px; */ --pTr-18: 1.125rem; /* 18px; */ + --ptr-16: 1rem; /* 16px */ --pTr-14: 0.875rem; /* 14px */ } + +.swal2-container.swal2-backdrop-show { + background: rgba(0, 0, 0, 0.7); +} + +.swal2-container .swal2-popup.swal2-modal.swal2-show { + width: 100%; + max-width: 540px; + margin: 0; + padding: 108px 28px 28px 28px; +} + +.swal2-container .swal2-content .swal2-html-container { + color: var(--Cool-Gray-800, #1f2937); + text-align: center; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.swal2-container .swal2-actions { + margin: 47px 0 0 0; + justify-content: flex-end; +} + +.swal2-container .swal2-actions .swal2-styled.swal2-confirm { + width: 120px; + height: 48px; + margin: 0; + padding: 12px 23px; + border-radius: 8px; + background: var(--brand-blue, #3692ff); + line-height: 24px; +} + +@media screen and (max-width: 743px) { + /* mobile ์‚ฌ์ด์ฆˆ */ + .swal2-container .swal2-popup.swal2-modal.swal2-show { + max-width: 327px; + padding: 81px 23px 23px 23px; + } + + .swal2-container .swal2-actions { + margin: 49px 0 0 0; + justify-content: center; + } +} diff --git a/img/.DS_Store b/img/.DS_Store index c611d44..999350c 100644 Binary files a/img/.DS_Store and b/img/.DS_Store differ diff --git a/img/login/btn_visibility_off.svg b/img/login/btn_visibility_off.svg new file mode 100644 index 0000000..4b4526d --- /dev/null +++ b/img/login/btn_visibility_off.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/img/login/btn_visibility_on.svg b/img/login/btn_visibility_on.svg index 4b4526d..35a7530 100644 --- a/img/login/btn_visibility_on.svg +++ b/img/login/btn_visibility_on.svg @@ -1,10 +1,3 @@ - - - - - - - - + diff --git a/img/logo/logo_mobile.svg b/img/logo/logo_mobile.svg new file mode 100644 index 0000000..55a63ef --- /dev/null +++ b/img/logo/logo_mobile.svg @@ -0,0 +1,3 @@ + + + diff --git a/index.html b/index.html index c3b9ac1..58bf043 100644 --- a/index.html +++ b/index.html @@ -8,44 +8,65 @@ + + + + - + -
+
- ํŒ๋‹ค๋งˆ์ผ“_๋กœ๊ณ  - + + + + + + ํŒ๋‹ค๋งˆ์ผ“_๋กœ๊ณ  + +
-

- ์ผ์ƒ์˜ ๋ชจ๋“  ๋ฌผ๊ฑด์„ -
- ๊ฑฐ๋ž˜ํ•ด ๋ณด์„ธ์š” -

+

์ผ์ƒ์˜ ๋ชจ๋“  ๋ฌผ๊ฑด์„ ๊ฑฐ๋ž˜ํ•ด ๋ณด์„ธ์š”

๊ตฌ๊ฒฝํ•˜๋Ÿฌ ๊ฐ€๊ธฐ
๋ฉ”์ธ_์ด๋ฏธ์ง€
-
+
- hotItem + ์ธ๊ธฐ์ƒํ’ˆ

Hot item

์ธ๊ธฐ ์ƒํ’ˆ์„ -
+
ํ™•์ธํ•ด ๋ณด์„ธ์š”

@@ -62,7 +83,7 @@

Search

๊ตฌ๋งค๋ฅผ ์›ํ•˜๋Š” -
+
์ƒํ’ˆ์„ ๊ฒ€์ƒ‰ํ•˜์„ธ์š”

@@ -79,7 +100,11 @@

register

Register

-

ํŒ๋งค๋ฅผ ์›ํ•˜๋Š”
์ƒํ’ˆ์„ ๋“ฑ๋กํ•˜์„ธ์š”

+

+ ํŒ๋งค๋ฅผ ์›ํ•˜๋Š” +
+ ์ƒํ’ˆ์„ ๋“ฑ๋กํ•˜์„ธ์š” +

์–ด๋–ค ๋ฌผ๊ฑด์ด๋“  ํŒ๋งคํ•˜๊ณ  ์‹ถ์€ ์ƒํ’ˆ์„
@@ -97,17 +122,17 @@

ํŒ๋‹ค๋งˆ์ผ“ ์ค‘๊ณ  ๊ฑฐ๋ž˜

- ํ•˜๋‹จ_์ด๋ฏธ์ง€ + ํ•˜๋‹จ_์ด๋ฏธ์ง€