diff --git a/.github/workflows/delete-merged-branch-config.yml b/.github/workflows/delete-merged-branch-config.yml new file mode 100644 index 00000000..d5493361 --- /dev/null +++ b/.github/workflows/delete-merged-branch-config.yml @@ -0,0 +1,14 @@ +name: delete branch on close pr + +on: + pull_request: + types: [closed] + +jobs: + delete-branch: + runs-on: ubuntu-latest + steps: + - name: delete branch + uses: SvanBoxel/delete-merged-branch@main + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/7-sprint-mission-fe b/7-sprint-mission-fe new file mode 160000 index 00000000..50ef68c0 --- /dev/null +++ b/7-sprint-mission-fe @@ -0,0 +1 @@ +Subproject commit 50ef68c0ca8c420863b993fc22040cac798f1f7b diff --git a/README.md b/README.md deleted file mode 100644 index dc1e2371..00000000 --- a/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# ๐Ÿผ ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ - -> _์ด ์ €์žฅ์†Œ๋Š” ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ์˜ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ณณ์ž…๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ํด๋ก ํ•˜์—ฌ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์„ค์ •ํ•˜๊ณ , ๊ฐ ๋ธŒ๋žœ์น˜์—์„œ ํ•ด๋‹น ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์„ ์ˆ˜ํ–‰ํ•ด ์ฃผ์„ธ์š”!_ ๐Ÿ› ๏ธ - -## ์†Œ๊ฐœ - -์•ˆ๋…•ํ•˜์„ธ์š”! ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! ๐Ÿฅณ -ํŒ๋‹ค๋งˆ์ผ“์€ ๋”ฐ๋œปํ•œ ์ค‘๊ณ ๊ฑฐ๋ž˜๋ฅผ ์œ„ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”Œ๋žซํผ์ด์—์š”. ์—ฌ๋Ÿฌ๋ถ„์€ ์ด๊ณณ์—์„œ ์ƒํ’ˆ์„ ๋“ฑ๋กํ•˜๊ณ , ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž๋“ค๊ณผ ์†Œํ†ตํ•˜๋ฉฐ, ์ž์œ ๋กญ๊ฒŒ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์–ด์š”. ๋งค์ฃผ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์„ ํ†ตํ•ด ๊ธฐ๋Šฅ์„ ํ•˜๋‚˜์”ฉ ๋งŒ๋“ค์–ด ๊ฐ€๋ฉฐ ์„ฑ์žฅํ•ด ๋‚˜๊ฐ€๋Š” ์—ฌ์ •์„ ํ•จ๊ป˜ํ•ด์š”. ๐Ÿš€ - -![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/7-sprint-mission-be)์˜ ๋ธŒ๋žœ์น˜์—์„œ ๊ด€๋ฆฌํ•ด์ฃผ์„ธ์š”_ - ---- - -๋ณธ ํ”„๋กœ์ ํŠธ๋Š” [์ฝ”๋“œ์ž‡](https://www.codeit.kr)์˜ ์†Œ์œ ์ด๋ฉฐ, ๊ต์œก ๋ชฉ์ ์œผ๋กœ๋งŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ยฉ 2024 Codeit. All rights reserved. diff --git a/css/faq.css b/css/faq.css new file mode 100644 index 00000000..ba8df799 --- /dev/null +++ b/css/faq.css @@ -0,0 +1 @@ +/* ๋ฏธ์ž‘์„ฑ */ \ No newline at end of file diff --git a/css/items.css b/css/items.css new file mode 100644 index 00000000..ba8df799 --- /dev/null +++ b/css/items.css @@ -0,0 +1 @@ +/* ๋ฏธ์ž‘์„ฑ */ \ No newline at end of file diff --git a/css/login.css b/css/login.css new file mode 100644 index 00000000..e87bb751 --- /dev/null +++ b/css/login.css @@ -0,0 +1,187 @@ +/* ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€ ์Šคํƒ€์ผ ์‹œํŠธ */ + +* { + box-sizing: border-box; + padding: 0px 200px; + justify-self: center; + white-space: nowrap; +} + +main { + display: flex; + flex-direction: column; + gap: 40px; + width: 1920px; + padding: 227px 640px; + justify-content: center; + align-items: center; +} + +.homelink { + display: flex; + width: 396px; + height: 132px; + align-items: center; + justify-content: center; + text-decoration: none; + gap: 20px; +} + +.logo { + color: #3692FF; + font-family: "ROKAF Sans"; + font-size: 66.344px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.logoicon { + width: 103.529px; + height: 103.88px; + flex-shrink: 0; +} + +.inputbar { + display: flex; + width: 640px; height: 56px; + padding: 16px 24px; + padding-right: 40px; + align-items: center; + gap: 10px; + border-radius: 12px; + background: #F3F4F6; + color: #9CA3AF; + font-family: Pretendard; + font-weight: 400; + line-height: 26px; /* 162.5% */ + border: none; /* ๊ธฐ๋ณธ ํ…Œ๋‘๋ฆฌ ์ œ๊ฑฐ */ +} + +.inputbar:focus { + outline: none; /* ๊ธฐ๋ณธ outline ์ œ๊ฑฐ */ + border: 2px solid #3692FF; /* ํฌ์ปค์Šค ์‹œ ํ…Œ๋‘๋ฆฌ ์ ์šฉ */ +} + +.inputbar.error { + border: 2px solid red; /* ์—๋Ÿฌ ์ƒํƒœ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ */ +} + +.error-message { + color: red; + font-size: 14px; + margin-top: 5px; + justify-self: flex-start; +} + +.bars{ + position: relative; + display: inline-block; +} + +.bars .text { + display: flex; + gap: 16px; + color: #1F2937; + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + font-style: normal; + line-height: normal; + margin: auto; + padding: 0px 0px 16px 0px; +} + +.bars .eyes { + position: absolute; + right: 10px; /* ์˜ค๋ฅธ์ชฝ ์—ฌ๋ฐฑ */ + top: 50%; + transform: translateY(-50%); /* ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌ */ + cursor: pointer; /* ํด๋ฆญ ๊ฐ€๋Šฅ ํ‘œ์‹œ */ + font-size: 16px; + color: #9CA3AF; +} + +.relative { + position: relative; +} + +.button { + display: flex; + width: 640px; + height: 56px; + border-radius: 40px; + background: #3692FF; + border: none; + color: #F3F4F6; + text-align: center; + justify-content: center; + align-items: center; + cursor: pointer; + font-family: Pretendard; + font-size: 20px; + font-style: normal; + font-weight: 600; +} + +.loginbox { + width: 640px; + height: 74px; + padding: 16px 23px; + align-items: flex-start; + border-radius: 8px; + background: #E6F2FF; +} + +.icon { + display: flex; + align-items: flex-start; + gap: 16px; +} + +.loginbox .box { + display: flex; + width: 594px; + justify-content: space-between; + align-items: center; +} + +.signup { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; +} + +.signup a { + color:#3692FF; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-skip-ink: none; + text-decoration-thickness: auto; + text-underline-offset: auto; + +} + +.login p { + color: #1F2937; + /* pretendard/md-14px-medium */ + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 171.429% */ +} + +.form-gap { + width: 640px; + flex-direction: column; + align-items: center; + display: flex; + gap: 24px; +} \ No newline at end of file diff --git a/css/prvacy.css b/css/prvacy.css new file mode 100644 index 00000000..ba8df799 --- /dev/null +++ b/css/prvacy.css @@ -0,0 +1 @@ +/* ๋ฏธ์ž‘์„ฑ */ \ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..5f5af49e --- /dev/null +++ b/css/reset.css @@ -0,0 +1,47 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/css/signup.css b/css/signup.css new file mode 100644 index 00000000..8c455854 --- /dev/null +++ b/css/signup.css @@ -0,0 +1,191 @@ +/* ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ์Šคํƒ€์ผ ์‹œํŠธ */ + +* { + box-sizing: border-box; + padding: 0px 200px; + justify-self: center; + white-space: nowrap; +} + +main { + display: flex; + flex-direction: column; + gap: 40px; + display: flex; + width: 1920px; + padding: 227px 640px; + justify-content: center; + align-items: center; +} + +.homelink { + display: flex; + width: 396px; + height: 132px; + align-items: center; + justify-content: center; + text-decoration: none; + gap: 20px; +} + +.logo { + color: #3692FF; + font-family: "ROKAF Sans"; + font-size: 66.344px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.logoicon { + width: 103.529px; + height: 103.88px; + flex-shrink: 0; +} + +.inputbar { + display: flex; + width: 640px; height: 56px; + padding: 16px 24px; + align-items: center; + gap: 10px; + border-radius: 12px; + background: #F3F4F6; + color: #9CA3AF; + font-family: Pretendard; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 26px; /* 162.5% */ + border: none; /* ๊ธฐ๋ณธ ํ…Œ๋‘๋ฆฌ ์ œ๊ฑฐ */ +} + +.inputbar:focus { + outline: none; /* ๊ธฐ๋ณธ outline ์ œ๊ฑฐ */ + border: 2px solid #3692FF; /* ํฌ์ปค์Šค ์‹œ ํ…Œ๋‘๋ฆฌ ์ ์šฉ */ +} + + +.inputbar.error { + border: 2px solid red; /* ์—๋Ÿฌ ์ƒํƒœ ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ */ +} + +.error-message { + color: red; + font-size: 14px; + margin-top: 5px; + justify-self: flex-start; +} + +.bars{ + position: relative; + display: inline-block; +} + +.bars .text { + display: flex; + gap: 16px; + color: #1F2937; + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + font-style: normal; + line-height: normal; + margin: auto; + padding: 0px 0px 16px 0px; +} + +.bars .eyes { + position: absolute; + right: 10px; /* ์˜ค๋ฅธ์ชฝ ์—ฌ๋ฐฑ */ + top: 50%; + transform: translateY(-50%); /* ์ˆ˜์ง ์ค‘์•™ ์ •๋ ฌ */ + cursor: pointer; /* ํด๋ฆญ ๊ฐ€๋Šฅ ํ‘œ์‹œ */ + font-size: 16px; + color: #9CA3AF; +} + +.relative { + position: relative; +} + +.button { + display: flex; + width: 640px; height: 56px; + border-radius: 40px; + cursor: pointer; + background: #9CA3AF; + border: none; + color: #F3F4F6; + text-align: center; + justify-content: center; + align-items: center; + font-family: Pretendard; + font-size: 20px; + font-style: normal; + font-weight: 600; +} + +.loginbox { + width: 640px; + height: 74px; + padding: 16px 23px; + align-items: flex-start; + border-radius: 8px; + background: #E6F2FF; +} + +.icon { + display: flex; + align-items: flex-start; + gap: 16px; +} + +.loginbox .box { + display: flex; + width: 594px; + justify-content: space-between; + align-items: center; +} + +/* ํ•˜๋‹จ ๊ฐ„ํŽธ ๋กœ๊ทธ์ธ ์ฐฝ */ + +.login { + display: flex; + justify-content: center; + align-items: center; + gap: 4px; +} + +.login a { + color:#3692FF; + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-decoration-line: underline; + text-decoration-style: solid; + text-decoration-skip-ink: none; + text-decoration-thickness: auto; + text-underline-offset: auto; + +} + +.login p { + color: #1F2937; + /* pretendard/md-14px-medium */ + font-family: Pretendard; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 171.429% */ +} + +.form-gap { + width: 640px; + flex-direction: column; + align-items: center; + display: flex; + gap: 24px; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..b7c085e6 --- /dev/null +++ b/css/style.css @@ -0,0 +1,266 @@ +/* ๋ฉ”์ธ ํ™ˆ ์Šคํƒ€์ผ ์‹œํŠธ */ + +* { + box-sizing: border-box; + padding: 0px 200px; + justify-content: center; + padding: 200px; + white-space: nowrap; +} + +@font-face { + font-family: 'Pretendard'; + font-style: normal; + src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; + } + +@font-face { + font-family: 'ROKAF Sans'; + src: url('https://blog.kakaocdn.net/dn/boarur/btrDdJnfORN/X7v4fyOFBYLvbtiqlcvmLk/%EA%B3%B5%EA%B5%B0%EC%84%9C%EC%B2%B4%20%EC%84%A4%EC%B9%98%ED%8C%8C%EC%9D%BC.zip?attach=1&knm=tfile.zip'); + font-style: normal; + font-weight: 400; +} + + +body { + font-family: 'Pretendard'; + font-style: normal; +} + + +.title { + font-family: 'ROKAF Sans'; + font-style: normal; + color: #3692ff; + font-size: 1.60em; + font-weight: 700; + font-style: normal; + line-height: normal; + display: flex; +} + +.login { + font-family: 'Pretendard'; + font-style: normal; + text-decoration: none; + padding: 12px 23px; + background-color: #3692ff; + color: #F3F4F6; + font-size: 1.00em; + font-style: normal; + font-weight: 600; + line-height: 162.5%; + border-radius: 8px; + width: 128px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} + +.logo { + display: flex; + gap: 8px; +} + +.container { + display: flex; + justify-content:space-between; + align-items: center; + align-self: stretch; + padding: 9px 200px; + max-width: 1920px; + margin: auto; + +} + +.navigation { + border-bottom: 1px solid #DFDFDF; + background: #FFF; + margin: auto; + position: fixed; + top: 0; + /* width: 100% */ + left: 0; + right: 0; + +} + +.click{ + border: none; + text-decoration: none; + background-color: #3692ff; + color: #fff; + border-radius: 40px; + padding-bottom: 0%; + padding: 16px 124px; + font-size: 1.25em; + display: flex; + cursor: pointer; +} +.main { + display: flex; + align-items: center; + padding: 0px 0px 0px 200px; + max-height: 540px; + max-width: 1920px; + margin: auto; + +} + +.text { + font-size: 2.50em; + font-style: normal; + font-weight: 700; + line-height: 140%; +} + +.maintext { + display: flex; + padding-bottom: 60px; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 32px; + +} + +.mainimg { + display: flex; + align-items: center; +} + +.maincard { + background-color: #CFE5FF; + padding: 200px 200px 0px 200px; +} + +.subcard { + display: flex; + padding: 138px 344px; + display:flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.card { + justify-content:center; + display: flex; + width: 988px; + height: 448px; + background-color: #FCFCFC; + margin: 150px 0px 150px 150px; + align-items: center; + gap: 64px; +} + +.point { + color: #3692FF; + font-size: 1.13em; + font-weight: 700; + line-height: 26px; + gap: 12px; +} + +.headline { + color: #000; + font-size: 2.50em; + font-weight: 700; + line-height: 140%; + letter-spacing: 0.8px; + padding-top: 12px; + padding-bottom: 24px; +} + +.paragraph { + content: #374151; + font-size: 1.50em; + font-weight: 500; + line-height: 32px; + justify-content: center; +} + +.subtextbox1 { + text-align: right; + order: 0; + align-items: flex-end; + gap: 12px; + padding: 100px 0px 130px 40px; +} + +img .subimg1 { + order: 1; +} + +.subtextbox2 { + order: 1; + align-items: flex-start; + gap: 12px; + padding: 100px 0px 130px 0px; + text-align: left; +} + +img .subimg2 { + order: 0; +} + +.subtextbox3 { + order: 1; + align-items: flex-start; + gap: 12px; + padding: 100px 0px 130px 0px; + text-align: left; +} + +img .subimg3 { + order: 0; +} +.footerText { + text-decoration-line: none; + color: #9CA3AF; + font-family: Pretendard; + font-size: 1.00em; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.SNSicon { + width: 116px; + gap: 12px; + display: flex; + align-items: center; + justify-items: center; +} + +.footTextbox { + display: flex; + align-items: center; + justify-content: center; + gap: 30px; + cursor: pointer; +} + +.footbox { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + max-width: 1920px; + width: 1920px; +} + +.footcord { + background-color: #111827; + place-items: center; + display: flex; + height: 160px; + padding: 32px 200px; + gap: 10px; + align-items: flex-start; +} + diff --git a/eyes.js b/eyes.js new file mode 100644 index 00000000..0d137e36 --- /dev/null +++ b/eyes.js @@ -0,0 +1,14 @@ +function togglePasswordVisibility(toggleId, inputId) { + const passwordInput = document.getElementById(inputId); + const eyeIcon = document.getElementById(toggleId).querySelector('i'); + + if (passwordInput.type === 'password') { + passwordInput.type = 'text'; + eyeIcon.classList.remove('fa-eye'); + eyeIcon.classList.add('fa-eye-slash'); + } else { + passwordInput.type = 'password'; + eyeIcon.classList.remove('fa-eye-slash'); + eyeIcon.classList.add('fa-eye'); + } +}; \ No newline at end of file diff --git a/html/faq.html b/html/faq.html new file mode 100644 index 00000000..ad45cdc5 --- /dev/null +++ b/html/faq.html @@ -0,0 +1,15 @@ + + + + + + + + + + faq + + + + + diff --git a/html/index.html b/html/index.html new file mode 100644 index 00000000..a10e1836 --- /dev/null +++ b/html/index.html @@ -0,0 +1,118 @@ + + + + + + + + + + Document + + + + + + + + +
+
+ + +
+
+ + + +
+ +
+ +
+

Hot item

+

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

+

๊ฐ€์žฅ HOTํ•œ ์ค‘๊ณ ๊ฑฐ๋ž˜ ๋ฌผํ’ˆ์„
ํŒ๋‹ค ๋งˆ์ผ“์—์„œ ํ™•์ธํ•ด ๋ณด์„ธ์š”

+
+ + +
+ +
+ +
+

Serch

+

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

+

๊ตฌ๋งคํ•˜๊ณ  ์‹ถ์€ ๋ฌผํ’ˆ์€ ๊ฒ€์ƒ‰ํ•ด์„œ
์‰ฝ๊ฒŒ ์ฐพ์•„๋ณด์„ธ์š”

+
+ + +
+ +
+ +
+

Register

+

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

+

์–ด๋–ค ๋ฌผ๊ฑด์ด๋“  ํŒ๋งคํ•˜๊ณ  ์‹ถ์€ ์ƒํ’ˆ์„
์‰ฝ๊ฒŒ ๋“ฑ๋กํ•˜์„ธ์š”

+
+ + +
+ +
+ + + + + + \ No newline at end of file diff --git a/html/items.html b/html/items.html new file mode 100644 index 00000000..5dd7bd11 --- /dev/null +++ b/html/items.html @@ -0,0 +1,13 @@ + + + + + + + + items + + + + + \ No newline at end of file diff --git a/html/login.html b/html/login.html new file mode 100644 index 00000000..9fe714ae --- /dev/null +++ b/html/login.html @@ -0,0 +1,77 @@ + + + + + + + login + + + + + + + + + + + +
+
+ + +
+
+ +
+
+ +

์ด๋ฉ”์ผ

+ + + +
+ +
+ +

๋น„๋ฐ€๋ฒˆํ˜ธ

+
+ + +
+ +
+
+ +
+
+ + +
+
+ +
+
+
+

๊ฐ„ํŽธ ๋กœ๊ทธ์ธํ•˜๊ธฐ

+
+ + +
+
+
+
+

ํŒ๋‹ค๋งˆ์ผ“์ด ์ฒ˜์Œ์ด์‹ ๊ฐ€์š”?

+ ํšŒ์›๊ฐ€์ž… +
+
+ + + + \ No newline at end of file diff --git a/html/privacy.html b/html/privacy.html new file mode 100644 index 00000000..08fd8617 --- /dev/null +++ b/html/privacy.html @@ -0,0 +1,13 @@ + + + + + + + + privacy + + + + + \ No newline at end of file diff --git a/html/signup.html b/html/signup.html new file mode 100644 index 00000000..7b57661e --- /dev/null +++ b/html/signup.html @@ -0,0 +1,89 @@ + + + + + + + + singup + + + + + + + +
+
+ + +
+ +
+
+ +
+ +

์ด๋ฉ”์ผ

+ + + +
+
+ +

๋‹‰๋„ค์ž„

+ + + +
+
+ +

๋น„๋ฐ€๋ฒˆํ˜ธ

+
+ + +
+ +
+
+ +
+
+ +

๋น„๋ฐ€๋ฒˆํ˜ธ ํ™•์ธ

+
+ + +
+ +
+
+ +
+
+ + +
+
+ +
+
+
+

๊ฐ„ํŽธ ๋กœ๊ทธ์ธํ•˜๊ธฐ

+
+ + +
+
+
+
+

์ด๋ฏธ ํšŒ์›์ด์‹ ๊ฐ€์š”?

+ ๋กœ๊ทธ์ธ +
+ +
+ + + + + \ No newline at end of file diff --git a/imge/Facebook.svg b/imge/Facebook.svg new file mode 100644 index 00000000..61141b62 --- /dev/null +++ b/imge/Facebook.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/imge/Instagram.svg b/imge/Instagram.svg new file mode 100644 index 00000000..e73c9362 --- /dev/null +++ b/imge/Instagram.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/imge/Twitter.svg b/imge/Twitter.svg new file mode 100644 index 00000000..56c4cb8f --- /dev/null +++ b/imge/Twitter.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/imge/YouTube.svg b/imge/YouTube.svg new file mode 100644 index 00000000..a6288443 --- /dev/null +++ b/imge/YouTube.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/imge/homeimg.svg b/imge/homeimg.svg new file mode 100644 index 00000000..4f57a9a1 --- /dev/null +++ b/imge/homeimg.svg @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/imge/loginGo copy.svg b/imge/loginGo copy.svg new file mode 100644 index 00000000..dc2dc1c1 --- /dev/null +++ b/imge/loginGo copy.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/imge/loginGo.svg b/imge/loginGo.svg new file mode 100644 index 00000000..dc2dc1c1 --- /dev/null +++ b/imge/loginGo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/imge/loginKO copy.svg b/imge/loginKO copy.svg new file mode 100644 index 00000000..0519d68e --- /dev/null +++ b/imge/loginKO copy.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/imge/loginKO.svg b/imge/loginKO.svg new file mode 100644 index 00000000..0519d68e --- /dev/null +++ b/imge/loginKO.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/imge/maincard.svg b/imge/maincard.svg new file mode 100644 index 00000000..64661363 --- /dev/null +++ b/imge/maincard.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imge/panda-fac.svg b/imge/panda-fac.svg new file mode 100644 index 00000000..bea37e07 --- /dev/null +++ b/imge/panda-fac.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/imge/subimg1.svg b/imge/subimg1.svg new file mode 100644 index 00000000..c82cde0e --- /dev/null +++ b/imge/subimg1.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/imge/subimg2.svg b/imge/subimg2.svg new file mode 100644 index 00000000..5dfc3243 --- /dev/null +++ b/imge/subimg2.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/imge/subimg3.svg b/imge/subimg3.svg new file mode 100644 index 00000000..5ad23d15 --- /dev/null +++ b/imge/subimg3.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..cb246f36 --- /dev/null +++ b/script.js @@ -0,0 +1,129 @@ +document.addEventListener('DOMContentLoaded', function() { + const form = document.getElementById('login-form') || document.getElementById('signup-form'); + + // ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€์™€ ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ๊ตฌ๋ถ„ + const isLoginPage = document.body.classList.contains('login-page'); + const isSignupPage = document.body.classList.contains('signup-page'); + + const emailField = document.getElementById('email'); + const emailError = document.getElementById('email-error'); + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + + const passwordField = document.getElementById('password'); + const passwordError = document.getElementById('password-error'); + const loginBtn = document.getElementById(isLoginPage ? 'login-btn' : 'signup-btn'); + const requiredLength = 8; + + // ๋น„๋ฐ€๋ฒˆํ˜ธ ํ™•์ธ ํ•„๋“œ (ํšŒ์›๊ฐ€์ž… ์ „์šฉ) + const confirmPasswordField = document.getElementById('confirm-password'); + const confirmPasswordError = document.getElementById('confirm-password-error'); + + // ๋‹‰๋„ค์ž„ ํ™•์ธ ํ•„๋“œ (ํšŒ์›๊ฐ€์ž… ์ „์šฉ) + const nicknameField = document.getElementById('nickname'); + const nicknameError = document.getElementById('nickname-error'); + + // ํผ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ + function validateForm() { + const isEmailEmpty = emailField.value.trim() === ''; + const isPasswordEmpty = passwordField.value.trim() === ''; + const isConfirmPasswordEmpty = confirmPasswordField && confirmPasswordField.value.trim() === ''; + const isNicknameEmpty = nicknameField && nicknameField.value.trim() === ''; + + const isEmailErrorVisible = emailError.style.display === 'block'; + const isPasswordErrorVisible = passwordError.style.display === 'block'; + const isConfirmPasswordErrorVisible = confirmPasswordError && confirmPasswordError.style.display === 'block'; + const isNicknameErrorVisible = nicknameError && nicknameError.style.display === 'block'; + + const shouldDisable = isEmailEmpty || isPasswordEmpty || isEmailErrorVisible || isPasswordErrorVisible || + (isSignupPage && (isConfirmPasswordEmpty || isConfirmPasswordErrorVisible || isNicknameEmpty || isNicknameErrorVisible)); + loginBtn.disabled = shouldDisable; + } + + + // ์ด๋ฉ”์ผ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ + emailField.addEventListener('focusout', function() { + if (emailField.value.trim() === '') { + emailError.textContent = '์ด๋ฉ”์ผ์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'; + emailError.style.display = 'block'; + emailField.classList.add('error'); + } else if (!emailPattern.test(emailField.value)) { + emailError.textContent = '์ž˜๋ชป๋œ ์ด๋ฉ”์ผ ํ˜•์‹์ž…๋‹ˆ๋‹ค.'; + emailError.style.display = 'block'; + emailField.classList.add('error'); + } else { + emailError.style.display = 'none'; + emailField.classList.remove('error'); + } + validateForm(); + }); + + // ๋น„๋ฐ€๋ฒˆํ˜ธ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ + passwordField.addEventListener('focusout', function() { + const value = passwordField.value.trim(); + if (value === '') { + passwordError.textContent = '๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'; + passwordError.style.display = 'block'; + passwordField.classList.add('error'); + } else if (value.length < requiredLength) { + passwordError.textContent = '๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ 8์ž ์ด์ƒ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'; + passwordError.style.display = 'block'; + passwordField.classList.add('error'); + } else { + passwordError.style.display = 'none'; + passwordField.classList.remove('error'); + } + validateForm(); + }); + + // ๋น„๋ฐ€๋ฒˆํ˜ธ ํ™•์ธ ํ•„๋“œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ (ํšŒ์›๊ฐ€์ž… ์ „์šฉ) + if (isSignupPage) { + confirmPasswordField.addEventListener('focusout', function() { + const passwordValue = passwordField.value.trim(); + const confirmPasswordValue = confirmPasswordField.value.trim(); + + if (confirmPasswordValue === '') { + confirmPasswordError.textContent = '๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ๋‹ค์‹œ ํ•œ ๋ฒˆ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'; + confirmPasswordError.style.display = 'block'; + confirmPasswordField.classList.add('error'); + } else if (confirmPasswordValue !== passwordValue) { + confirmPasswordError.textContent = '๋น„๋ฐ€๋ฒˆํ˜ธ๊ฐ€ ์ผ์น˜ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.'; + confirmPasswordError.style.display = 'block'; + confirmPasswordField.classList.add('error'); + } else { + confirmPasswordError.style.display = 'none'; + confirmPasswordField.classList.remove('error'); + } + validateForm(); + }); + } + +// ๋‹‰๋„ค์ž„ ๊ฒ€์‚ฌ + if (isSignupPage) { + nicknameField.addEventListener('focusout', function() { + if (nicknameField.value.trim() === '') { + nicknameError.textContent = '๋‹‰๋„ค์ž„์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'; + nicknameError.style.display = 'block'; + nicknameField.classList.add('error'); + } else { + nicknameError.style.display = 'none'; + nicknameField.classList.remove('error'); + } + validateForm(); + }); + } + + // ์ž…๋ ฅ ๊ฐ’ ๋ณ€๊ฒฝ์‹œ ํผ ์ƒํƒœ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ + emailField.addEventListener('input', validateForm); + passwordField.addEventListener('input', validateForm); + if (isSignupPage) { + confirmPasswordField.addEventListener('input', validateForm); + nicknameField.addEventListener('input', validateForm); + } + + // ํผ ์ œ์ถœ ๋ฐฉ์ง€ (๋ฒ„ํŠผ์ด ๋น„ํ™œ์„ฑํ™”๋œ ์ƒํƒœ์ผ ๊ฒฝ์šฐ) + form.addEventListener('submit', function(event) { + if (loginBtn.disabled) { + event.preventDefault(); // ์ œ์ถœ ๋ง‰๊ธฐ + } + }); +}); \ No newline at end of file