diff --git a/README.md b/README.md index b1efd6d14..2a71b7138 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,92 @@ +# ๐Ÿ’— ์˜ˆ์•ฝ ๊ด€๋ฆฌ ์‹œ์Šคํ…œ -# :camera: ์ง์› ์‚ฌ์ง„ ๊ด€๋ฆฌ ์„œ๋น„์Šค - -์ง์›๋“ค์˜ ์‚ฌ์ง„์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ์‚ฌ์ง„ ๊ด€๋ฆฌ์ž ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์„ธ์š”. - -๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ๋ฆฌ๋ทฐ ๊ธฐ๊ฐ„์€ ๋ณ„๋„ ๊ณต์ง€๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”! -## [๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ์ œ์ถœ ๋ฐฉ๋ฒ•] -1. ํ˜„์žฌ ์ €์žฅ์†Œ๋ฅผ ๋กœ์ปฌ์— ํด๋ก (Clone)ํ•ฉ๋‹ˆ๋‹ค. -2. ์ž์‹ ์˜ ๋ณธ๋ช…์œผ๋กœ ๋ธŒ๋žœ์น˜๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.(๊ตฌ๋ถ„ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ณธ๋ช…์„ ๊ผญ ํŒŒ์Šค์นผ์ผ€์ด์Šค๋กœ ํ‘œ์‹œํ•˜์„ธ์š”, git branch KDT0_์ด๋ฆ„) -3. ์ž์‹ ์˜ ๋ณธ๋ช… ๋ธŒ๋žœ์น˜์—์„œ ๊ณผ์ œ๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. -4. ๊ณผ์ œ ์ˆ˜ํ–‰์ด ์™„๋ฃŒ๋˜๋ฉด, ์ž์‹ ์˜ ๋ณธ๋ช… ๋ธŒ๋žœ์น˜๋ฅผ ์›๊ฒฉ ์ €์žฅ์†Œ์— ํ‘ธ์‹œ(Push)ํ•ฉ๋‹ˆ๋‹ค.(main ๋ธŒ๋žœ์น˜์— ํ‘ธ์‹œํ•˜์ง€ ์•Š๋„๋ก ๊ผญ ์ฃผ์˜ํ•˜์„ธ์š”, git push origin KDT0_์ด๋ฆ„) -5. ์ €์žฅ์†Œ์—์„œ main ๋ธŒ๋žœ์น˜๋ฅผ ๋Œ€์ƒ์œผ๋กœ Pull Request ์ƒ์„ฑํ•˜๋ฉด, ๊ณผ์ œ ์ œ์ถœ์ด ์™„๋ฃŒ๋ฉ๋‹ˆ๋‹ค!(E.g, main <== KDT0_์ด๋ฆ„) -6. Pull Request ๋งํฌ๋ฅผ LMS๋กœ๋„ ์ œ์ถœํ•ด ์ฃผ์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค. -7. main ํ˜น์€ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ๋ธŒ๋žœ์น˜๋กœ ์ ˆ๋Œ€ ๋ณ‘ํ•ฉํ•˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”! -8. Pull Request์—์„œ ๋ณด์ด๋Š” ์„ค๋ช…์„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋„๋ก ๊ผผ๊ผผํ•˜๊ฒŒ ์ž‘์„ฑํ•˜์„ธ์š”! -9. Pull Request์—์„œ ๊ณผ์ œ ์ œ์ถœ ํ›„ ์ ˆ๋Œ€ ๋ณ‘ํ•ฉ(Merge)ํ•˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”! -10. ๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ์ œ์ถœ ๊ณผ์ •์—์„œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ, ๋ฐ”๋กœ ๋‹ด๋‹น ๋ฉ˜ํ† ๋‚˜ ๊ฐ•์‚ฌ์—์„œ ์–˜๊ธฐํ•˜์„ธ์š”! - -## [ํ•„์ˆ˜ ์š”๊ตฌ์‚ฌํ•ญ] -- โ€œAWS S3 / Firebase ๊ฐ™์€ ์„œ๋น„์Šคโ€๋ฅผ ์ด์šฉํ•˜์—ฌ ์‚ฌ์ง„์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ•˜์„ธ์š”. -- ํ”„๋กœํ•„ ํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•˜์„ธ์š”. -- ์Šคํฌ๋กค์ด ๊ฐ€๋Šฅํ•œ ํ˜•ํƒœ์˜ ๋ฆฌ์ŠคํŒ… ํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•˜์„ธ์š”. -- ์ „์ฒด ํŽ˜์ด์ง€ ๋ฐ์Šคํฌํƒ‘-๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• ํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•˜์„ธ์š”. -- ์‚ฌ์ง„์„ ๋“ฑ๋ก, ์ˆ˜์ •, ์‚ญ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. -- ์œ ์ € ํ”Œ๋กœ์šฐ๋ฅผ ์ œ์ž‘ํ•˜์—ฌ ๋ฆฌ๋“œ๋ฏธ์— ์ถ”๊ฐ€ํ•˜์„ธ์š”. -* CSS - * ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„ - * ์ƒ๋Œ€์ˆ˜์น˜ ์‚ฌ์šฉ(rem, em) -* JavaScript - * DOM event ์กฐ์ž‘ - -## [์„ ํƒ ์š”๊ตฌ์‚ฌํ•ญ] -- ์‚ฌ์ง„ ๊ด€๋ฆฌ ํŽ˜์ด์ง€์™€ ๊ด€๋ จ๋œ ๊ธฐํƒ€ ๊ธฐ๋Šฅ๋„ ๊ณ ๋ คํ•ด ๋ณด์„ธ์š”. -- ํŽ˜์ด์ง€๊ฐ€ ๋ณด์—ฌ์ง€๊ธฐ ์ „์— ๋กœ๋”ฉ ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ๋ณด์ด๋„๋ก ๋งŒ๋“ค์–ด๋ณด์„ธ์š”. -- ์ง์›์„ ๋“ฑ๋ก, ์ˆ˜์ •, ์‚ญ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด๋ณด์„ธ์š”. -- ์ง์› ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด ๋ณด์„ธ์š”. -- infinity scroll ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด ๋ณด์„ธ์š”. -- ์‚ฌ์ง„์„ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•ด ๋ณด์„ธ์š”. -- LocalStorage ์‚ฌ์šฉ - -## [ํ™”๋ฉด ์˜ˆ์‹œ] -![111](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/f1afed4b-547e-4289-8e83-2f0fa188cccb) -![222](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/72f1ea35-8965-4050-9d0b-b9f27c933f64) - - - -## [ํ๋ฆ„] -![333](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/44707a0e-6c5a-4d04-a6bd-58e46f02a9a9) +## ๐Ÿ“Œํ”„๋กœ์ ํŠธ ๊ฐœ์š” +- ๊ณ ๊ฐ๋“ค์˜ ์˜ˆ์•ฝ ๋“ฑ๋ก๊ณผ ์˜ˆ์•ฝ ๊ด€๋ฆฌ๋ฅผ ๋„์™€์ฃผ๋Š” ์„œ๋น„์Šค ์ž…๋‹ˆ๋‹ค. +- LocalStorage์™€ ํŒŒ์ด์–ด๋ฒ ์ด์Šค๋ฅผ ์ด์šฉํ•ด DB ์ •๋ณด๋ฅผ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค. +## ๐Ÿ“‚ ์‚ฌ์ดํŠธ ์ฃผ์†Œ + +๐Ÿ”— **๋ฐฐํฌ ๋งํฌ :** https://cupid-32b7f.web.app/ +
+
+ +## ๐Ÿ’ฟ ํ•„์ˆ˜ ์š”๊ตฌ์‚ฌํ•ญ + +- [x] โ€œAWS S3 / Firebase ๊ฐ™์€ ์„œ๋น„์Šคโ€๋ฅผ ์ด์šฉํ•˜์—ฌ ์‚ฌ์ง„์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ํŽ˜์ด์ง€๋ฅผ ๊ตฌํ˜„ํ•˜์„ธ์š”. +- [x] ํ”„๋กœํ•„ ํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•˜์„ธ์š”. +- [x] ์Šคํฌ๋กค์ด ๊ฐ€๋Šฅํ•œ ํ˜•ํƒœ์˜ ๋ฆฌ์ŠคํŒ… ํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•˜์„ธ์š”. +- [x] ์ „์ฒด ํŽ˜์ด์ง€ ๋ฐ์Šคํฌํƒ‘-๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• ํŽ˜์ด์ง€๋ฅผ ๊ฐœ๋ฐœํ•˜์„ธ์š”. +- [x] ์‚ฌ์ง„์„ ๋“ฑ๋ก, ์ˆ˜์ •, ์‚ญ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. +- [x] ์œ ์ € ํ”Œ๋กœ์šฐ๋ฅผ ์ œ์ž‘ํ•˜์—ฌ ๋ฆฌ๋“œ๋ฏธ์— ์ถ”๊ฐ€ํ•˜์„ธ์š”. +- [x] ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„ +- [x] ์ƒ๋Œ€์ˆ˜์น˜ ์‚ฌ์šฉ(rem, em) +- [x] DOM event ์กฐ์ž‘ +
+
+ +## ๐Ÿ“€ ์ถ”๊ฐ€ ๊ตฌํ˜„์‚ฌํ•ญ + +- [ ] ์‚ฌ์ง„ ๊ด€๋ฆฌ ํŽ˜์ด์ง€์™€ ๊ด€๋ จ๋œ ๊ธฐํƒ€ ๊ธฐ๋Šฅ๋„ ๊ณ ๋ คํ•ด ๋ณด์„ธ์š”. +- [x] ์ง์›์„ ๋“ฑ๋ก, ์ˆ˜์ •, ์‚ญ์ œ๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด๋ณด์„ธ์š”. +- [x] LocalStorage ์‚ฌ์šฉ +
+
+ +## ๐Ÿ’ป ํ™”๋ฉด ๊ตฌ์„ฑ + +| ๋ฉ”์ธ ํŽ˜์ด์ง€ | ์‚ฌ์šฉ์ž ๋“ฑ๋ก(์˜ˆ์•ฝ) ํŽ˜์ด์ง€ | +| :---------------------------------------------------------------: | :---------------------------------------------------------: | +| | | + +
+ +| ๊ณ ๊ฐ ์ •๋ณด ๊ด€๋ฆฌ ํŽ˜์ด์ง€ | ๊ณ ๊ฐ ํ”„๋กœํ•„ ํŽ˜์ด์ง€ | +| :--------------------------------------------------------------: | :-----------------------------------------------------------------: | +| | | + +
+ +
+ +## ๐Ÿ”Ž ์ฃผ์š” ๊ธฐ๋Šฅ + +### ๐Ÿ”” ์‚ฌ์šฉ์ž ๋“ฑ๋ก(์˜ˆ์•ฝ) ํŽ˜์ด์ง€ - ์‚ฌ์ง„ ๋“ฑ๋ก, ์ˆ˜์ • + +Search +Search +
+ +### ๐Ÿ”” ์‚ฌ์šฉ์ž ๋“ฑ๋ก(์˜ˆ์•ฝ) ํŽ˜์ด์ง€ - ์‚ฌ์ง„ firebase ์—…๋กœ๋“œ + +Search + +### ๐Ÿ”” ์‚ฌ์šฉ์ž ๋“ฑ๋ก(์˜ˆ์•ฝ) ํŽ˜์ด์ง€ - ์‚ฌ์šฉ์ž ์ •๋ณด LocalStorage ์—…๋กœ๋“œ + +Search + +### ๐Ÿ”” ๊ณ ๊ฐ ์ •๋ณด ๊ด€๋ฆฌ ํŽ˜์ด์ง€ - ์Šคํฌ๋กค์ด ๊ฐ€๋Šฅํ•œ ํ˜•ํƒœ์˜ ๋ฆฌ์ŠคํŒ… ํŽ˜์ด์ง€ + +Search + +### ๐Ÿ”” ๊ณ ๊ฐ ์ •๋ณด ๊ด€๋ฆฌ ํŽ˜์ด์ง€ - ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„ + +Search + +### ๐Ÿ”” ๊ณ ๊ฐ ํ”„๋กœํ•„ ํŽ˜์ด์ง€ - ์‚ฌ์ง„ ์‚ญ์ œ + +Search + +### ๐Ÿ”” ์ „์ฒด ํŽ˜์ด์ง€ ๋ฐ์Šคํฌํƒ‘-๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• ํŽ˜์ด์ง€ + +| ๋ฉ”์ธ ํŽ˜์ด์ง€ | ์‚ฌ์šฉ์ž ๋“ฑ๋ก(์˜ˆ์•ฝ) ํŽ˜์ด์ง€ | +| :------------------------------------------------------------------------: | :-----------------------------------------------------------------------: | +| Search | Search | + +| ๊ณ ๊ฐ ์ •๋ณด ๊ด€๋ฆฌ ํŽ˜์ด์ง€ | ๊ณ ๊ฐ ํ”„๋กœํ•„ ํŽ˜์ด์ง€ | +| :----------------------------------------------------------------------------: | :----------------------------------------------------------------------: | +| Search | Search | + +## ๐ŸŒฟ ์œ ์ € ํ”Œ๋กœ์šฐ + +Search diff --git a/firebase-debug.log b/firebase-debug.log new file mode 100644 index 000000000..02d4e4422 --- /dev/null +++ b/firebase-debug.log @@ -0,0 +1,42 @@ +[debug] [2023-08-18T13:30:22.125Z] ---------------------------------------------------------------------- +[debug] [2023-08-18T13:30:22.129Z] Command: C:\Program Files\nodejs\node.exe C:\Users\LG\AppData\Roaming\npm\node_modules\firebase-tools\lib\bin\firebase.js serve --only hosting +[debug] [2023-08-18T13:30:22.130Z] CLI Version: 12.4.8 +[debug] [2023-08-18T13:30:22.131Z] Platform: win32 +[debug] [2023-08-18T13:30:22.131Z] Node Version: v18.16.1 +[debug] [2023-08-18T13:30:22.137Z] Time: Fri Aug 18 2023 22:30:22 GMT+0900 (๋Œ€ํ•œ๋ฏผ๊ตญ ํ‘œ์ค€์‹œ) +[debug] [2023-08-18T13:30:22.137Z] ---------------------------------------------------------------------- +[debug] +[debug] [2023-08-18T13:30:22.142Z] >>> [apiv2][query] GET https://firebase-public.firebaseio.com/cli.json [none] +[debug] [2023-08-18T13:30:22.326Z] > command requires scopes: ["email","openid","https://www.googleapis.com/auth/cloudplatformprojects.readonly","https://www.googleapis.com/auth/firebase","https://www.googleapis.com/auth/cloud-platform"] +[debug] [2023-08-18T13:30:22.327Z] > authorizing via signed-in user (jyu4813@gmail.com) +[debug] [2023-08-18T13:30:22.327Z] [iam] checking project cupid-32b7f for permissions ["firebase.projects.get"] +[debug] [2023-08-18T13:30:22.329Z] > refreshing access token with scopes: [] +[debug] [2023-08-18T13:30:22.331Z] >>> [apiv2][query] POST https://www.googleapis.com/oauth2/v3/token [none] +[debug] [2023-08-18T13:30:22.331Z] >>> [apiv2][body] POST https://www.googleapis.com/oauth2/v3/token [omitted] +[debug] [2023-08-18T13:30:22.592Z] <<< [apiv2][status] POST https://www.googleapis.com/oauth2/v3/token 200 +[debug] [2023-08-18T13:30:22.593Z] <<< [apiv2][body] POST https://www.googleapis.com/oauth2/v3/token [omitted] +[debug] [2023-08-18T13:30:22.617Z] >>> [apiv2][query] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions [none] +[debug] [2023-08-18T13:30:22.618Z] >>> [apiv2][(partial)header] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions x-goog-quota-user=projects/cupid-32b7f +[debug] [2023-08-18T13:30:22.618Z] >>> [apiv2][body] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions {"permissions":["firebase.projects.get"]} +[debug] [2023-08-18T13:30:22.799Z] <<< [apiv2][status] GET https://firebase-public.firebaseio.com/cli.json 200 +[debug] [2023-08-18T13:30:22.799Z] <<< [apiv2][body] GET https://firebase-public.firebaseio.com/cli.json {"cloudBuildErrorAfter":1594252800000,"cloudBuildWarnAfter":1590019200000,"defaultNode10After":1594252800000,"minVersion":"3.0.5","node8DeploysDisabledAfter":1613390400000,"node8RuntimeDisabledAfter":1615809600000,"node8WarnAfter":1600128000000} +[debug] [2023-08-18T13:30:23.452Z] <<< [apiv2][status] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions 200 +[debug] [2023-08-18T13:30:23.452Z] <<< [apiv2][body] POST https://cloudresourcemanager.googleapis.com/v1/projects/cupid-32b7f:testIamPermissions {"permissions":["firebase.projects.get"]} +[debug] [2023-08-18T13:30:23.454Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f [none] +[debug] [2023-08-18T13:30:23.908Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f 200 +[debug] [2023-08-18T13:30:23.908Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f {"projectId":"cupid-32b7f","projectNumber":"102484094770","displayName":"cupid","name":"projects/cupid-32b7f","resources":{"hostingSite":"cupid-32b7f","storageBucket":"cupid-32b7f.appspot.com","locationId":"asia-northeast3"},"state":"ACTIVE","etag":"1_47983cc4-33c9-401c-8af4-c059fc3be30d"} +[debug] [2023-08-18T13:30:23.912Z] >>> [apiv2][query] GET https://firebasehosting.googleapis.com/v1beta1/projects/cupid-32b7f/sites +[debug] [2023-08-18T13:30:24.706Z] <<< [apiv2][status] GET https://firebasehosting.googleapis.com/v1beta1/projects/cupid-32b7f/sites 200 +[debug] [2023-08-18T13:30:24.706Z] <<< [apiv2][body] GET https://firebasehosting.googleapis.com/v1beta1/projects/cupid-32b7f/sites {"sites":[{"name":"projects/cupid-32b7f/sites/cupid-32b7f","defaultUrl":"https://cupid-32b7f.web.app","type":"DEFAULT_SITE"}]} +[debug] [2023-08-18T13:30:24.707Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f/webApps/-/config [none] +[debug] [2023-08-18T13:30:25.830Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f/webApps/-/config 200 +[debug] [2023-08-18T13:30:25.830Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f/webApps/-/config {"projectId":"cupid-32b7f","appId":"1:102484094770:web:f355446e96d81a1226f12b","storageBucket":"cupid-32b7f.appspot.com","locationId":"asia-northeast3","apiKey":"AIzaSyDH41YTt_vxlfIELSOXrCpk96aUsBvmvOU","authDomain":"cupid-32b7f.firebaseapp.com","messagingSenderId":"102484094770"} +[debug] [2023-08-18T13:30:25.858Z] >>> [apiv2][query] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f [none] +[debug] [2023-08-18T13:30:26.256Z] <<< [apiv2][status] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f 200 +[debug] [2023-08-18T13:30:26.257Z] <<< [apiv2][body] GET https://firebase.googleapis.com/v1beta1/projects/cupid-32b7f {"projectId":"cupid-32b7f","projectNumber":"102484094770","displayName":"cupid","name":"projects/cupid-32b7f","resources":{"hostingSite":"cupid-32b7f","storageBucket":"cupid-32b7f.appspot.com","locationId":"asia-northeast3"},"state":"ACTIVE","etag":"1_47983cc4-33c9-401c-8af4-c059fc3be30d"} +[debug] [2023-08-18T13:30:26.261Z] Specified "public" directory "public" does not exist; Deploy to Hosting site "cupid-32b7f" may fail or be empty. +[info] i hosting[cupid-32b7f]: Serving hosting files from: public {"metadata":{"emulator":{"name":"hosting"},"message":"Serving hosting files from: \u001b[1mpublic\u001b[22m"}} +[info] + hosting[cupid-32b7f]: Local server: http://localhost:5002 {"metadata":{"emulator":{"name":"hosting"},"message":"Local server: \u001b[4m\u001b[1mhttp://localhost:5002\u001b[22m\u001b[24m"}} +[info] i hosting: ::1 - - [18/Aug/2023:13:30:31 +0000] "GET / HTTP/1.1" 404 139 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200" {"metadata":{"emulator":{"name":"hosting"},"message":"::1 - - [18/Aug/2023:13:30:31 +0000] \"GET / HTTP/1.1\" 404 139 \"-\" \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200\""}} +[info] i hosting: ::1 - - [18/Aug/2023:13:30:54 +0000] "GET / HTTP/1.1" 404 139 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200" {"metadata":{"emulator":{"name":"hosting"},"message":"::1 - - [18/Aug/2023:13:30:54 +0000] \"GET / HTTP/1.1\" 404 139 \"-\" \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200\""}} +[info] i hosting: ::1 - - [18/Aug/2023:13:31:33 +0000] "GET / HTTP/1.1" 404 139 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200" {"metadata":{"emulator":{"name":"hosting"},"message":"::1 - - [18/Aug/2023:13:31:33 +0000] \"GET / HTTP/1.1\" 404 139 \"-\" \"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36 Edg/115.0.1901.200\""}} diff --git a/public/404.html b/public/404.html new file mode 100644 index 000000000..829eda8fd --- /dev/null +++ b/public/404.html @@ -0,0 +1,33 @@ + + + + + + Page Not Found + + + + +
+

404

+

Page Not Found

+

The specified file was not found on this website. Please check the URL for mistakes and try again.

+

Why am I seeing this?

+

This page was generated by the Firebase Command-Line Interface. To modify it, edit the 404.html file in your project's configured public directory.

+
+ + diff --git a/public/css/detail_profile.css b/public/css/detail_profile.css new file mode 100644 index 000000000..7392eab51 --- /dev/null +++ b/public/css/detail_profile.css @@ -0,0 +1,160 @@ +section .inner { + max-width: 1200px; + min-width: 500px; + /* background-color: rgb(127, 255, 136); */ + margin: 0 auto; +} +section h1 { + color: #55433c; + font-size: 2.8rem; + display: block; + margin: 40px auto 60px; + width: 360px; + padding-top: 20px; + font-weight: 500; +} +/* form ์ƒ๋‹จ */ +.form_top { + display: flex; + justify-content: space-evenly; +} +/* form ์™ผ์ชฝ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ */ +.form_top .top_left { + /* background-color: red; */ +} +.form_top .top_left .image_btn { + display: flex; + left: 20px; +} + +/* ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ์„ ํƒ์ฐฝ */ +.form_top .top_left .remove-image, +.form_top .top_left .edit-image { + background-color: #c7a88c; + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + cursor: pointer; + width: 80px; + display: block; + margin-right: 15px; +} + +.form_top .top_left .remove-image:hover, +.form_top .top_left .edit-image:hover { + background-color: #9ab292; +} + +.form_top .top_left .file { + display: none; +} + +.form_top .top_left .upload-box { + width: 280px; + box-sizing: border-box; +} + +.form_top .top_left .upload-box .drag-file { + height: 360px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 3px dashed #dbdbdb; + position: relative; +} + +.form_top .top_left .upload-box .drag-file .highlight { + border: 3px dashed #ee0f91; +} + +.upload-box .drag-file .image { + width: 40px; +} + +/* .upload-box .drag-file #user-url { + width: 280px; +} */ + +.upload-box .drag-file #user-url img { + width: 280px; + height: 360px; +} +.form_top .top_left .upload-box .drag-file .preview { + display: none; + position: absolute; + left: 0; + height: 0; + width: 100%; + height: 100%; +} + +/* form ์˜ค๋ฅธ์ชฝ */ +.inner .form_top .top_right { + /* background-color: orange; */ + padding-top: 40px; +} +.inner .form_top .top_right li { + padding: 15px; + font-size: 1.4rem; + display: flex; +} + +.inner .form_top .top_right li .tit { + padding-right: 10px; +} + +.inner .form_top .top_right li select { + width: 150px; + /* padding: 0.8em 0.5em; */ + width: auto; /* ๊ธฐ๋ณธ์ ์œผ๋กœ ๋„ˆ๋น„๋ฅผ ๋‚ด์šฉ์— ๋งž๊ฒŒ ์ž๋™ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค. */ + padding: 0.5em 0.8em; +} + +.inner .form_top .top_right label { + color: #3d2d27; + padding-right: 20px; +} + +.inner .form_top .top_right input { + /* background-color: red; */ + padding: 7px; + border-radius: 50px; + border: 1px solid #55433c; +} + +/* ํผ ๋ฒ„ํŠผ */ + +section .button { + display: flex; + justify-content: center; +} + +section .button button { + background-color: #c7a88c; + color: #fff; + text-align: center; + padding: 10px 0; + border-radius: 6px; + cursor: pointer; + width: 80px; + display: block; + margin: 30px; + border: none; + font-size: 1rem; +} + +@media all and (max-width: 530px) { + .form_top { + display: flex; + flex-wrap: wrap; + } +} + +@media all and (max-width: 360px) { + .form_top { + display: flex; + flex-wrap: wrap; + } +} diff --git a/public/css/header.css b/public/css/header.css new file mode 100644 index 000000000..4288a998c --- /dev/null +++ b/public/css/header.css @@ -0,0 +1,204 @@ +@font-face { + font-family: "Thin"; + src: url("/fonts/The\ Jamsil\ 1\ Thin.ttf"); +} +@font-face { + font-family: "Light"; + src: url("/fonts/The\ Jamsil\ 2\ Light.ttf"); +} +@font-face { + font-family: "Regular"; + src: url("/fonts/The\ Jamsil\ 3\ Regular.ttf"); +} +@font-face { + font-family: "IBMPlexSansKR-Regular"; + src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff") + format("woff"); + font-weight: normal; + font-style: normal; +} + +/* @keyframes */ + +/* COMMON */ +body { + font-family: "IBMPlexSansKR-Regular"; + color: #333333; + font-size: 16px; + line-height: 1.4; + background-color: #f5ece9; +} +/* img baseline ์ œ๊ฑฐ */ +img { + display: block; +} + +/* HEADER */ +header { + background-color: #f4ded6; +} + +/* icon ์ˆจ๊น€ */ +header .item { + display: none; +} + +header .logo, +header .menu { + display: block; +} + +header .inner { + max-width: 1200px; + min-width: 500px; + height: 70px; + margin: 0 auto; + display: flex; + justify-content: space-between; + align-items: center; +} + +header .menu ul { + display: flex; + justify-content: space-between; + align-items: center; +} +header .menu li { + position: relative; +} + +header .menu li:first-child::before { + display: none; +} + +header .menu li::before { + content: ""; + display: block; + width: 1px; + height: 15px; + background-color: #3d2d27; + position: absolute; + top: 0; + bottom: 0; + margin: auto; +} + +header .menu li a { + font-size: 1.1rem; + color: #3d2d27; + text-decoration: none; + padding: 15px 20px; + animation: bounce; +} +header .menu li a:hover { + /* background-color: red; */ + font-weight: 600; +} + +/* ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• ์›น, ๋ธŒ๋ผ์šฐ์ € ํฌ๊ธฐ๊ฐ€ 780์ดํ•˜์ผ ๋•Œ */ +@media all and (max-width: 530px) { + header .inner { + max-width: 530px; + min-width: 200px; + height: auto; + flex-direction: column; + align-items: flex-start; + } + + header .menu { + width: 100%; + text-align: center; + } + + header .menu ul { + flex-direction: column; + display: none; + } + header .menu ul.active { + display: flex; + } + header .menu li { + width: 100%; + } + + header .menu li a:hover { + background-color: #3d2d27; + padding-top: 10px; + padding-bottom: 10px; + margin: 0; + color: white; + width: 100%; + display: block; + } + + header .menu li a { + display: block; + padding: 10px 0; + } + + header .menu li::before { + display: none; + } + + header .icon { + display: block; + padding: 20px; + position: absolute; + right: 8px; + cursor: pointer; + } +} + +/* ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• ์›น, ๋ธŒ๋ผ์šฐ์ € ํฌ๊ธฐ๊ฐ€ 780์ดํ•˜์ผ ๋•Œ header*/ +@media all and (max-width: 530px) { + header .inner { + max-width: 530px; + min-width: 200px; + height: auto; + flex-direction: column; + align-items: flex-start; + } + + header .menu { + width: 100%; + text-align: center; + } + + header .menu ul { + flex-direction: column; + display: none; + } + header .menu ul.active { + display: flex; + } + header .menu li { + width: 100%; + } + + header .menu li a:hover { + background-color: #3d2d27; + padding-top: 10px; + padding-bottom: 10px; + margin: 0; + color: white; + width: 100%; + display: block; + } + + header .menu li a { + display: block; + padding: 10px 0; + } + + header .menu li::before { + display: none; + } + + header .icon { + display: block; + padding: 20px; + position: absolute; + right: 8px; + cursor: pointer; + } +} diff --git a/public/css/profile_upload.css b/public/css/profile_upload.css new file mode 100644 index 000000000..355e5527f --- /dev/null +++ b/public/css/profile_upload.css @@ -0,0 +1,204 @@ +section .inner { + max-width: 1200px; + min-width: 500px; + /* background-color: rgb(127, 255, 136); */ + margin: 0 auto; +} +section h1 { + color: #55433c; + font-size: 2.5rem; + margin-top: 20px; + display: block; + margin: 20px auto 40px; + width: 280px; +} +/* form ์ƒ๋‹จ */ +.form_top { + display: flex; + justify-content: space-evenly; +} +/* form ์™ผ์ชฝ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ */ +.form_top .top_left { + /* background-color: red; */ +} + +/* ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ์„ ํƒ์ฐฝ */ +.form_top .top_left label { + background-color: #c7a88c; + color: #fff; + text-align: center; + padding: 10px 0; + border-radius: 6px; + cursor: pointer; + width: 100px; + display: block; +} + +.form_top .top_left label:hover { + background-color: #9ab292; +} + +.form_top .top_left input[type="file"] { + position: absolute; + width: 0; + height: 0; + padding: 0; + overflow: hidden; + border: 0; +} + +.form_top .top_left .upload-box { + width: 280px; + box-sizing: border-box; +} + +.form_top .top_left .upload-box .drag-file { + height: 360px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 3px dashed #dbdbdb; + position: relative; +} + +.form_top .top_left .upload-box .highlight { + border: 3px dashed #9ab292; +} + +.upload-box .drag-file .image { + width: 40px; +} + +.upload-box .drag-file .message { + display: block; + padding-top: 20px; +} + +.form_top .top_left .upload-box .drag-file #preview { + display: none; + position: absolute; + left: 0; + height: 0; + width: 100%; + height: 100%; +} + +/* form ์˜ค๋ฅธ์ชฝ */ +.inner .form_top .top_right { + /* background-color: orange; */ + padding-top: 40px; +} +.inner .form_top .top_right li { + padding: 15px; + font-size: 1.4rem; +} + +.inner .form_top .top_right li select { + width: 150px; + /* padding: 0.8em 0.5em; */ + width: auto; /* ๊ธฐ๋ณธ์ ์œผ๋กœ ๋„ˆ๋น„๋ฅผ ๋‚ด์šฉ์— ๋งž๊ฒŒ ์ž๋™ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค. */ + padding: 0.5em 0.8em; +} + +.inner .form_top .top_right label { + color: #3d2d27; + padding-right: 20px; +} + +.inner .form_top .top_right input { + padding: 7px; + border-radius: 50px; + border: 1px solid #55433c; +} + +.inner .form_top .top_right li #data { + width: 140px; +} + +.inner .form_top .top_right li #place { + width: 160px; + border-radius: 20px; +} + +.inner .form_top .top_right li #number { + width: 145px; +} + +.inner .form_top .top_right li #region { + width: 205px; +} +/* ํผ ๋ฒ„ํŠผ */ + +section .button { + display: flex; + justify-content: center; +} + +section .button button { + background-color: #c7a88c; + color: #fff; + text-align: center; + padding: 10px 0; + border-radius: 6px; + cursor: pointer; + width: 80px; + display: block; + margin: 30px; + border: none; + font-size: 1rem; +} + +/* ๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• ์›น, ๋ธŒ๋ผ์šฐ์ € ํฌ๊ธฐ๊ฐ€ 780์ดํ•˜์ผ ๋•Œ header*/ +@media all and (max-width: 560px) { + section .inner { + max-width: 560px; + min-width: 360px; + /* background-color: rgb(127, 255, 136); */ + margin: 0; + } + section h1 { + font-size: 2.4rem; + width: 150px; + } + + .form_top { + width: 360px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + } + + .inner .form_top .top_right li { + padding: 10px; + font-size: 1.4rem; + } + .inner .form_top .top_right label { + padding-right: 10px; + } +} + +@media all and (max-width: 360px) { + section .inner { + max-width: 360px; + min-width: 360px; + /* background-color: rgb(127, 255, 136); */ + margin: 0; + } + section h1 { + font-size: 2.4rem; + } + + .form_top { + display: flex; + flex-wrap: wrap; + } + + .inner .form_top .top_right li { + padding: 10px; + font-size: 1.2rem; + } + .inner .form_top .top_right label { + padding-right: 10px; + } +} diff --git a/public/css/user.css b/public/css/user.css new file mode 100644 index 000000000..ab6701877 --- /dev/null +++ b/public/css/user.css @@ -0,0 +1,151 @@ +@keyframes move { + from { + top: 0px; + left: 0px; + } + to { + top: 0px; + left: 170px; + } +} + +section .inner { + max-width: 1200px; + min-width: 500px; + /* background-color: rgb(127, 255, 136); */ + margin: 0 auto; +} +section h1 { + color: #55433c; + font-size: 2.8rem; + margin: 40px auto; + display: block; + margin: auto; + width: 180px; + padding-top: 40px; + font-weight: 500; +} + +section .top { + /* background-color: aqua; */ + position: relative; + height: 100px; +} + +section .user-search { + display: flex; + position: absolute; + right: 0; + bottom: 0; + justify-content: center; + align-items: center; + margin-right: 10px; +} + +section .user-search .material-symbols-outlined { + animation: move 1.5s linear forwards; + position: relative; +} + +section .user-search input { + /* width: 30px; + height: 50px; */ + padding: 10px; + border-radius: 20px; + border: none; + outline: none; +} + +section .user-delete-button { + position: absolute; + left: 0; + bottom: 0; +} + +section .inner .top .user-delete-button button { + background-color: #c7a88c; + color: #fff; + text-align: center; + padding: 10px; + border-radius: 6px; + cursor: pointer; + width: 130px; + display: block; + border: none; + font-size: 1rem; + margin-left: 20px; +} + +section .user-profile .user-list { + display: flex; + justify-content: space-around; +} + +section .user-profile .user-list span { + padding: 30px; +} + +section .user-profile .user-list .list-tit { + padding: 0 20px 0 20px; +} + +section .user-profile .user-list-item .list-item a { + display: flex; + align-items: center; + justify-content: space-around; + text-decoration: none; + color: #55433c; +} + +section .user-profile .user-list-item .list-item a .user-image { + width: 150px; + height: 200px; + padding: 0 10px 0 20px; +} + +section .user-profile .user-list-item .list-item div { + padding: 0 35px; +} + +/* footer */ +footer .info { + height: 200px; +} + +@media all and (max-width: 560px) { + section .inner { + max-width: 360px; + min-width: 300px; + } + + .form_top { + display: flex; + } + + section .user-profile .user-list { + display: none; + } + + /* section .user-profile hr:nth-last-of-type(1) { + display: none; + } + section .user-profile hr:nth-last-of-type(2) { + display: none; + } */ + + section .user-profile .user-list-item .list-item a { + display: flex; + flex-direction: column; + } + + section .inner .top .user-delete-button button { + display: none; + } + + section .user-profile .user-list-item .list-item a input { + display: none; + } + section .user-profile .user-list-item .list-item a div { + padding: 10px; + } +} diff --git a/public/html/detail_profile.html b/public/html/detail_profile.html new file mode 100644 index 000000000..1f8141475 --- /dev/null +++ b/public/html/detail_profile.html @@ -0,0 +1,147 @@ + + + + + + + + + + + cupid + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+ menu +
+
+
+ + +
+
+

ํ”„๋กœํ•„ ์ƒ์„ธ ํŽ˜์ด์ง€

+ +
+ +
+ +
+
+
์‚ฌ์ง„ ์‚ญ์ œ
+ +
+ + + +
+
+ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ด๋ฏธ์ง€ +
+
+
+
+ +
    +
  • +
    ์‹ ๋ž‘ ์ด๋ฆ„ :
    +
    +
  • +
  • +
    ์‹ ๋ถ€ ์ด๋ฆ„ :
    +
    +
  • +
  • +
    ๊ฒฐํ˜ผ ์˜ˆ์ •์ผ :
    +
    +
  • +
  • +
    ์›จ๋”ฉํ™€ ์žฅ์†Œ :
    +
    +
  • +
  • +
    ๋Œ€ํ‘œ ์—ฐ๋ฝ์ฒ˜ :
    +
    +
  • +
  • +
    ์ง€์—ญ :
    +
    + +
    + +
      +
      +
    • +
    +
    + +
    + +
    + +
    +
    + + diff --git a/public/html/profile_upload.html b/public/html/profile_upload.html new file mode 100644 index 000000000..639125a00 --- /dev/null +++ b/public/html/profile_upload.html @@ -0,0 +1,143 @@ + + + + + + + + + + + cupid + + + + + + + + + + + + + + + + +
    +
    + + +
    + menu +
    +
    +
    + + +
    +
    +

    ์˜ˆ์•ฝ ์ •๋ณด

    +
    + +
    + +
    + +
    + + + +
    + ํŒŒ์ผ ์•„์ด์ฝ˜ +

    ์ด๋ฏธ์ง€๋ฅผ ๋“œ๋ž˜๊ทธ ํ•˜์„ธ์š”.

    + ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ด๋ฏธ์ง€ +
    +
    +
    + +
      +
    • + + +
    • +
    • + + +
    • +
    • + + +
    • +
    • + + +
    • +
    • + + +
    • +
    • + + +
    • +
    +
    + +
    + + +
    + + +
    +
    +
    +
    + + diff --git a/public/html/user.html b/public/html/user.html new file mode 100644 index 000000000..7b63889c7 --- /dev/null +++ b/public/html/user.html @@ -0,0 +1,119 @@ + + + + + + + + cupid + + + + + + + + + + + + + + + + + + + +
    +
    + + +
    + menu +
    +
    +
    + + +
    +
    +

    ๊ณ ๊ฐ ์ •๋ณด

    +
    + +
    + +
    +
    + +
    + +
    + + + diff --git a/public/images/ani.gif b/public/images/ani.gif new file mode 100644 index 000000000..32d860644 Binary files /dev/null and b/public/images/ani.gif differ diff --git a/public/images/de.gif b/public/images/de.gif new file mode 100644 index 000000000..d90cd8bd8 Binary files /dev/null and b/public/images/de.gif differ diff --git a/public/images/fire.png b/public/images/fire.png new file mode 100644 index 000000000..cc5ca4f87 Binary files /dev/null and b/public/images/fire.png differ diff --git a/public/images/highlight.gif b/public/images/highlight.gif new file mode 100644 index 000000000..fdd8854c9 Binary files /dev/null and b/public/images/highlight.gif differ diff --git a/public/images/image-bg.jpg b/public/images/image-bg.jpg new file mode 100644 index 000000000..8de70e37f Binary files /dev/null and b/public/images/image-bg.jpg differ diff --git a/public/images/info-page.png b/public/images/info-page.png new file mode 100644 index 000000000..0317d3063 Binary files /dev/null and b/public/images/info-page.png differ diff --git a/public/images/info-qks.gif b/public/images/info-qks.gif new file mode 100644 index 000000000..b230af5d3 Binary files /dev/null and b/public/images/info-qks.gif differ diff --git a/public/images/local.png b/public/images/local.png new file mode 100644 index 000000000..b2db240da Binary files /dev/null and b/public/images/local.png differ diff --git a/public/images/logo_name(160X60)_ss.png b/public/images/logo_name(160X60)_ss.png new file mode 100644 index 000000000..616fa5715 Binary files /dev/null and b/public/images/logo_name(160X60)_ss.png differ diff --git a/public/images/main-page.png b/public/images/main-page.png new file mode 100644 index 000000000..079da180a Binary files /dev/null and b/public/images/main-page.png differ diff --git a/public/images/main.gif b/public/images/main.gif new file mode 100644 index 000000000..30d131009 Binary files /dev/null and b/public/images/main.gif differ diff --git a/public/images/main_1.jpg b/public/images/main_1.jpg new file mode 100644 index 000000000..3bab1ac60 Binary files /dev/null and b/public/images/main_1.jpg differ diff --git a/public/images/main_1280.jpg b/public/images/main_1280.jpg new file mode 100644 index 000000000..c28933241 Binary files /dev/null and b/public/images/main_1280.jpg differ diff --git a/public/images/main_2.jpg b/public/images/main_2.jpg new file mode 100644 index 000000000..5ad1f8ba4 Binary files /dev/null and b/public/images/main_2.jpg differ diff --git a/public/images/main_3.jpg b/public/images/main_3.jpg new file mode 100644 index 000000000..6cd3fd5de Binary files /dev/null and b/public/images/main_3.jpg differ diff --git a/public/images/page.png b/public/images/page.png new file mode 100644 index 000000000..1faec12b1 Binary files /dev/null and b/public/images/page.png differ diff --git a/public/images/profile-page.png b/public/images/profile-page.png new file mode 100644 index 000000000..68effc87e Binary files /dev/null and b/public/images/profile-page.png differ diff --git a/public/images/qks.gif b/public/images/qks.gif new file mode 100644 index 000000000..593e1e2f5 Binary files /dev/null and b/public/images/qks.gif differ diff --git a/public/images/remove.gif b/public/images/remove.gif new file mode 100644 index 000000000..68b917655 Binary files /dev/null and b/public/images/remove.gif differ diff --git a/public/images/scroll.gif b/public/images/scroll.gif new file mode 100644 index 000000000..11888236d Binary files /dev/null and b/public/images/scroll.gif differ diff --git a/public/images/upload.gif b/public/images/upload.gif new file mode 100644 index 000000000..88c5cd5c2 Binary files /dev/null and b/public/images/upload.gif differ diff --git a/public/images/userflow.png b/public/images/userflow.png new file mode 100644 index 000000000..34b98d8a4 Binary files /dev/null and b/public/images/userflow.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 000000000..25fec3d18 --- /dev/null +++ b/public/index.html @@ -0,0 +1,90 @@ + + + + + + + + + + + cupid + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + + +
    + menu +
    +
    +
    + +
    +
    +
    +
    + +
    + + + diff --git a/public/js/detail_profile.js b/public/js/detail_profile.js new file mode 100644 index 000000000..c2b5cc25a --- /dev/null +++ b/public/js/detail_profile.js @@ -0,0 +1,56 @@ +document.addEventListener("DOMContentLoaded", function () { + // ํ˜„์žฌ ํŽ˜์ด์ง€์˜ URL ์ฟผ๋ฆฌ ๋ฌธ์ž์—ด์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. + const urlParams = new URLSearchParams(window.location.search); + + // URL ์ฟผ๋ฆฌ ๋ฌธ์ž์—ด์—์„œ ํด๋ผ์ด์–ธํŠธ ์ธ๋ฑ์Šค๋ฅผ ์ถ”์ถœํ•ฉ๋‹ˆ๋‹ค. + const clientIndex = urlParams.get("clientIndex"); + + console.log(clientIndex); + + // localStorage์—์„œ ํ•ด๋‹น ํด๋ผ์ด์–ธํŠธ ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค. + const storageData = JSON.parse( + localStorage.getItem(`user-info${parseInt(clientIndex) + 1}`) + ); + + console.log(storageData); + + // ์ถ”์ถœํ•œ ํด๋ผ์ด์–ธํŠธ ์ •๋ณด๋ฅผ ํŽ˜์ด์ง€ ๋‚ด์˜ ์š”์†Œ์— ์ฑ„์›Œ๋„ฃ์Šต๋‹ˆ๋‹ค. + const userUrlElement = document.getElementById("user-url"); + const userMnameElement = document.getElementById("user-m_name"); + const userWnameElement = document.getElementById("user-w_name"); + const userDataElement = document.getElementById("user-data"); + const userPlaceElement = document.getElementById("user-place"); + const userNumberElement = document.getElementById("user-number"); + const userRegionElement = document.getElementById("user-region"); + + console.log(userUrlElement); + + // ํŽ˜์ด์ง€ ๋‚ด์˜ ์š”์†Œ์— ํด๋ผ์ด์–ธํŠธ ์ •๋ณด๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. + if ( + userUrlElement && + userMnameElement && + userWnameElement && + userDataElement && + userPlaceElement && + userNumberElement && + userRegionElement && + storageData + ) { + userUrlElement.innerHTML = ``; + userMnameElement.textContent = storageData.m_name; + userWnameElement.textContent = storageData.w_name; + userDataElement.textContent = storageData.data; + userPlaceElement.textContent = storageData.place; + userNumberElement.textContent = storageData.number; + userRegionElement.textContent = storageData.region; + } else { + console.log("๊ฐ’์ด ์—†์Œ !!!!!!"); + } +}); + +document.querySelector(".remove-image").addEventListener("click", remove); + +function remove() { + console.log("์‚ญ์ œ"); + document.querySelector(".dataImg").remove(); +} diff --git a/public/js/profile.js b/public/js/profile.js new file mode 100644 index 000000000..44c564bb9 --- /dev/null +++ b/public/js/profile.js @@ -0,0 +1,78 @@ +// ์—ฐ๋ฝ์ฒ˜ ํ•˜์ดํ”ˆ ์‚ฝ์ž… ํ•จ์ˆ˜ +const hypenTel = (target) => { + target.value = target.value + .replace(/[^0-9]/g, "") + .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); +}; +const message = document.querySelector(".message"); +const image = document.querySelector(".image"); + +//DropFile +function DropFile(dropAreaId) { + let dropArea = document.getElementById(dropAreaId); + + function preventDefaults(e) { + e.preventDefault(); + e.stopPropagation(); + } + + function highlight(e) { + preventDefaults(e); + dropArea.classList.add("highlight"); + } + + function unhighlight(e) { + preventDefaults(e); + dropArea.classList.remove("highlight"); + } + + function handleDrop(e) { + unhighlight(e); + let date = e.dataTransfer; //๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ ๊ด€๋ จ ์ •๋ณด date ํ• ๋‹น + let files = date.files; // ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ์œผ๋กœ ์ „์†ก๋œ ํŒŒ์ผ์˜ ๋ชฉ๋ก + + handleFiles(files); + } + + //ํŒŒ์ผ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐฐ์—ด์— ๋‹ด๊ธฐ + function handleFiles(files) { + files = [...files]; + files.forEach(previewFile); + // firebaseImgUpload(files); //ํŒŒ์ด์–ด๋ฒ ์ด์Šค ์—…๋กœ๋“œ + } + + function previewFile(file) { + console.log(file); + renderFile(file); + } + + // ์ด๋ฏธ์ง€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ˆ˜ํ–‰ & ์ด๋ฏธ์ง€ ์ˆจ๊ธฐ๊ธฐ + function renderFile(file) { + let reader = new FileReader(); + reader.readAsDataURL(file); //ํŒŒ์ผ์„ Data URL ํ˜•ํƒœ๋กœ ์ฝ๊ธฐ + reader.onloadend = function () { + let img = document.getElementById("preview"); //๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ด๋ฏธ์ง€ ํด๋ž˜์Šค + console.log(img + "preview ์ฃผ์†Œ"); + if (img) { + img.src = reader.result; // reader.result๋Š” ํŒŒ์ผ์„ Data URL ํ˜•์‹์œผ๋กœ ์ฝ์–ด์˜จ ๊ฒฐ๊ณผ + img.style.display = "block"; //img block ๋ณ€๊ฒฝ + // message.style.display = "none"; + // image.style.display = "none"; + } else { + console.log("๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ด๋ฏธ์ง€ ์š”์†Œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค."); + } + }; + } + + // ์‚ฌ์ง„ ํ•˜์ด๋ผ์ดํŒ… + dropArea.addEventListener("dragenter", highlight, true); //๋“œ๋ž˜๊ทธํ•œ ์•„์ดํ…œ์ด ๋“œ๋กญ ์˜์—ญ์œผ๋กœ ๋“ค์–ด๊ฐˆ ๋•Œ + dropArea.addEventListener("dragover", highlight, true); //๋“œ๋ž˜๊ทธํ•œ ์•„์ดํ…œ์ด ๋“œ๋กญ ์˜์—ญ ์œ„์— ์œ„์น˜ ํ•  ๋•Œ + dropArea.addEventListener("dragleave", unhighlight, false); // ๋“œ๋ž˜๊ทธํ•œ ์•„์ดํ…œ์ด ๋“œ๋กญ ์˜์—ญ์„ ๋ฒ—์–ด๋‚  ๋•Œ + dropArea.addEventListener("drop", handleDrop, false); //๋“œ๋ž˜๊ทธํ•œ ์•„์ดํ…œ์ด ๋“œ๋กญ ์˜์—ญ์—์„œ ๋“œ๋กญ๋˜์—ˆ์„ ๋•Œ + + return { + handleFiles, + }; +} + +const dropFile = new DropFile("drop-file"); diff --git a/public/js/upload.js b/public/js/upload.js new file mode 100644 index 000000000..ff9f9c330 --- /dev/null +++ b/public/js/upload.js @@ -0,0 +1,123 @@ +import { initializeApp } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js"; +import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-analytics.js"; +import { + getFirestore, + Timestamp, + FieldValue, + query, + collection, + doc, + addDoc, + deleteDoc, + setDoc, + getDocs, + getDoc, +} from "https://www.gstatic.com/firebasejs/10.1.0/firebase-firestore.js"; +import { getDatabase } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-database.js"; +import { + getStorage, + ref, + getDownloadURL, + uploadBytes, +} from "https://www.gstatic.com/firebasejs/10.1.0/firebase-storage.js"; + +var firebaseConfig = { + apiKey: "AIzaSyDH41YTt_vxlfIELSOXrCpk96aUsBvmvOU", + authDomain: "cupid-32b7f.firebaseapp.com", + projectId: "cupid-32b7f", + storageBucket: "cupid-32b7f.appspot.com", + messagingSenderId: "102484094770", + appId: "1:102484094770:web:f355446e96d81a1226f12b", +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); + +// Initialize Cloud Storage and get a reference to the service +const storage = getStorage(app); + +document + .getElementById("submitBtn") + .addEventListener("click", async function () { + await localstorageUpload(); // localstorageUpload() ํ•จ์ˆ˜์˜ ๋น„๋™๊ธฐ ์ž‘์—…์ด ๋๋‚  ๋•Œ๊นŒ์ง€ ๊ธฐ๋‹ค๋ฆผ + + // localstorageUpload() ํ•จ์ˆ˜์˜ ์ž‘์—…์ด ๋๋‚œ ํ›„์— ํŽ˜์ด์ง€ ์ „ํ™˜์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. + }); + +//form ๋ฐ์ดํ„ฐ localStorage ์ €์žฅ ํ›„ ๋ฐ˜ํ™˜ +async function localstorageUpload() { + //input์—์„œ ์„ ํƒํ•œ ํŒŒ์ผ ์ฐพ๋Š” ๋ฒ• + + var file = document.querySelector("#chooseFile").files[0]; + console.log("ddd" + file); + const locationUrl = await uploadImage(file); + console.log(locationUrl); + async function uploadImage(file) { + const storageRef = ref(storage, "images/" + file.name); + const uploadRef = await uploadBytes(storageRef, file).then( + (snapshot) => snapshot.ref + ); + const location = await getDownloadURL(uploadRef).then( + (downloadUrl) => downloadUrl + ); + return location; + } + + // Event.preventDefault(); + const form = document.getElementById("form"); + const formData = new FormData(form); + + console.log(formData); + // FormData ๊ฐ์ฒด์˜ ๊ฐ’์„ ์ผ๋ฐ˜ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ + const formDataObject = {}; + formData.forEach((value, key) => { + formDataObject[key] = value; + }); + formDataObject.url = locationUrl; + console.log(formDataObject); + + // // ์ „์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ์˜ ๊ฐœ์ˆ˜ ๊ฐ€์ ธ์˜ค๊ธฐ + const storedKeys = Object.keys(localStorage).filter((key) => + key.startsWith("user-info") + ); + const dataCount = storedKeys.length; + + // // ์ƒˆ๋กœ์šด ํ‚ค ์ƒ์„ฑ + const newkey = `user-info${dataCount + 1}`; + console.log(newkey); + + // localStorage์— ๋ฐ์ดํ„ฐ ์ €์žฅ + localStorage.setItem(newkey, JSON.stringify(formDataObject)); +} + +// ์‚ฌ์ง„ ์—…๋กœ๋“œ ํด๋ฆญ์‹œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ตฌํ˜„ ์ฝ”๋“œ +const inputImage = document.getElementById("chooseFile"); +inputImage.addEventListener("change", (e) => { + readURL(e.target); // chooseFile ์˜ e๋ฅผ readURL๋กœ ์ „๋‹ฌ +}); + +// ํŒŒ์ผ ์—…๋กœ๋“œ ํด๋ฆญํ–ˆ์„ ๋•Œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ตฌํ˜„ +function readURL(input) { + // ์ธํ’‹ ํƒœ๊ทธ์— ํŒŒ์ผ์ด ์žˆ๋Š” ๊ฒฝ์šฐ + if (input.files && input.files[0]) { + console.log("์ด๋ฏธ์ง€ ๋‹ด๊น€"); + var reader = new FileReader(); + reader.onload = function (e) { + console.log(e); + const previewImg = document.getElementById("preview"); + + if (previewImg) { + previewImg.src = e.target.result; + } else { + console.log("๋ฏธ๋ฆฌ๋ณด๊ธฐ ์ด๋ฏธ์ง€ ์š”์†Œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค."); + } + previewImg.style.display = "block"; + }; + + // reader๊ฐ€ ์ด๋ฏธ์ง€ ์ฝ๋„๋ก ํ•˜๊ธฐ + reader.readAsDataURL(input.files[0]); + } else { + console.log("ํŒŒ์ผ ์•ˆ๋‹ด๊น€"); + document.getElementById("preview").src = ""; + } +} diff --git a/public/js/user.js b/public/js/user.js new file mode 100644 index 000000000..f3e87722e --- /dev/null +++ b/public/js/user.js @@ -0,0 +1,38 @@ +const storedKeys = Object.keys(localStorage).filter((key) => + key.startsWith("user-info") +); + +console.log(storedKeys.length); + +//๋ฆฌ์ŠคํŠธ +function init() { + const userListItem = document.querySelector(".user-list-item"); + + for (var i = 1; i <= storedKeys.length; i++) { + const storageData = JSON.parse(localStorage.getItem(`user-info${i}`)); + console.log(storageData); + + const listItem = document.createElement("div"); + listItem.className = "user-list-item"; + listItem.innerHTML = ` +
    + +
    + + +
    ${storageData.m_name}
    +
    ${storageData.w_name}
    +
    ${storageData.data}
    +
    ${storageData.place}
    +
    ${storageData.number}
    +
    ${storageData.region}
    + +
    + + `; + + userListItem.appendChild(listItem); + } +} + +init(); diff --git a/public/main.css b/public/main.css new file mode 100644 index 000000000..a6e18e17c --- /dev/null +++ b/public/main.css @@ -0,0 +1,19 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +img { + max-width: 100%; +} + +section .inner { + overflow: hidden; +} + +section .inner .service { + height: calc(100vh - 70px); + background-image: url("./images/main_1280.jpg"); + background-size: cover; + background-position: center; +} diff --git a/public/main.js b/public/main.js new file mode 100644 index 000000000..418c35304 --- /dev/null +++ b/public/main.js @@ -0,0 +1,10 @@ +/* header.js */ + +//๋ชจ๋ฐ”์ผ ๋ฐ˜์‘ํ˜• ์›น ํ† ๊ธ€ ๋ฒ„ํŠผ +const toggleBtn = document.querySelector(".icon"); +const menu = document.querySelector(".menu ul"); + +// toggleBtn icon์ด ํด๋ฆญ ๋์„ ๋•Œ ๋ฉ”๋‰ด์ฐฝ ๋“œ๋กญ ๋‹ค์šด +toggleBtn.addEventListener("click", () => { + menu.classList.toggle("active"); +}); diff --git a/public/profile_upload.css b/public/profile_upload.css new file mode 100644 index 000000000..e69de29bb diff --git a/public/profile_upload.js b/public/profile_upload.js new file mode 100644 index 000000000..9c1bad8a3 --- /dev/null +++ b/public/profile_upload.js @@ -0,0 +1,15 @@ +// var firebaseConfig = { +// apiKey: "AIzaSyDH41YTt_vxlfIELSOXrCpk96aUsBvmvOU", +// authDomain: "cupid-32b7f.firebaseapp.com", +// projectId: "cupid-32b7f", +// storageBucket: "cupid-32b7f.appspot.com", +// messagingSenderId: "102484094770", +// appId: "1:102484094770:web:f355446e96d81a1226f12b", +// }; +// // Initialize Firebase +// firebase.initializeApp(firebaseConfig); + +// // datebase์—์„œ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ + +// const db = firebase.firestore(); +// // db.collection("");