Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kdt0 nam hyeon jun #58

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open

Kdt0 nam hyeon jun #58

wants to merge 21 commits into from

Conversation

applevalley
Copy link

@applevalley applevalley commented Aug 18, 2023

πŸ‹οΈβ€β™‚οΈ ν—¬μŠ€μž₯ νšŒμ› 관리 μ„œλΉ„μŠ€

μ§μ›λ“€μ˜ 사진을 관리할 수 μžˆλŠ” 사진 κ΄€λ¦¬μž μ„œλΉ„μŠ€λ₯Ό λ§Œλ“€μ–΄ λ³΄μ„Έμš”.

배포 μ£Όμ†Œ

https://nhj-js-homework.firebaseapp.com/index.html

[ν•„μˆ˜ μš”κ΅¬μ‚¬ν•­]

  • β€œAWS S3 / Firebase 같은 μ„œλΉ„μŠ€β€λ₯Ό μ΄μš©ν•˜μ—¬ 사진을 관리할 수 μžˆλŠ” νŽ˜μ΄μ§€λ₯Ό κ΅¬ν˜„ν•˜μ„Έμš”.
  • ν”„λ‘œν•„ νŽ˜μ΄μ§€λ₯Ό κ°œλ°œν•˜μ„Έμš”.
  • 슀크둀이 κ°€λŠ₯ν•œ ν˜•νƒœμ˜ λ¦¬μŠ€νŒ… νŽ˜μ΄μ§€λ₯Ό κ°œλ°œν•˜μ„Έμš”.
  • 전체 νŽ˜μ΄μ§€ λ°μŠ€ν¬νƒ‘-λͺ¨λ°”일 λ°˜μ‘ν˜• νŽ˜μ΄μ§€λ₯Ό κ°œλ°œν•˜μ„Έμš”.
  • 사진을 등둝, μˆ˜μ •, μ‚­μ œκ°€ κ°€λŠ₯ν•΄μ•Ό ν•©λ‹ˆλ‹€.
  • μœ μ € ν”Œλ‘œμš°λ₯Ό μ œμž‘ν•˜μ—¬ λ¦¬λ“œλ―Έμ— μΆ”κ°€ν•˜μ„Έμš”.
  • CSS
    • μ• λ‹ˆλ©”μ΄μ…˜ κ΅¬ν˜„
    • μƒλŒ€μˆ˜μΉ˜ μ‚¬μš©(rem, em)
  • JavaScript
    • DOM event μ‘°μž‘

[선택 μš”κ΅¬μ‚¬ν•­]

  • 사진 관리 νŽ˜μ΄μ§€μ™€ κ΄€λ ¨λœ 기타 κΈ°λŠ₯도 κ³ λ €ν•΄ λ³΄μ„Έμš”.
  • νŽ˜μ΄μ§€κ°€ 보여지기 전에 λ‘œλ”© μ• λ‹ˆλ©”μ΄μ…˜μ΄ 보이도둝 λ§Œλ“€μ–΄λ³΄μ„Έμš”.
  • 직원을 등둝, μˆ˜μ •, μ‚­μ œκ°€ κ°€λŠ₯ν•˜κ²Œ ν•΄λ³΄μ„Έμš”.
  • infinity scroll κΈ°λŠ₯을 μΆ”κ°€ν•΄ λ³΄μ„Έμš”.

μœ μ € ν”Œλ‘œμš°

user flow

ν™”λ©΄ μ˜ˆμ‹œ

메인 νŽ˜μ΄μ§€

메인 ν™”λ©΄

  • νšŒμ› 전체 정보 μ—΄λžŒμ΄ κ°€λŠ₯ν•œ 메인 νŽ˜μ΄μ§€μž…λ‹ˆλ‹€.
  • 쒌츑 μƒλ‹¨μ˜ 등둝 λ²„νŠΌμ„ 톡해 νšŒμ› μ‹ κ·œ 등둝이 κ°€λŠ₯ν•˜κ³ , μ²΄ν¬λ°•μŠ€λ‘œ νšŒμ›μ„ μ„ νƒν•œ ν›„ μ‚­μ œν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • νšŒμ› λͺ©λ‘ μ˜μ—­ λ‚΄μ—μ„œ νšŒμ› 번호λ₯Ό 선택해, ν•΄λ‹Ή νšŒμ›μ˜ ν”„λ‘œν•„ νŽ˜μ΄μ§€λ‘œ 이동할 수 μžˆμŠ΅λ‹ˆλ‹€.

등둝 νŽ˜μ΄μ§€

등둝 ν™”λ©΄

  • νšŒμ› 정보와, 사진 등둝이 κ°€λŠ₯ν•©λ‹ˆλ‹€.
  • μ‚­μ œ λ²„νŠΌμ„ 톡해, λ“±λ‘ν•œ 사진을 μ‚­μ œν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • νšŒμ› 정보와 사진 등둝을 μ™„λ£Œν•œ λ’€, 우츑 μƒλ‹¨μ˜ 등둝 λ²„νŠΌμ„ 톡해 메인 νŽ˜μ΄μ§€λ‘œ 이동할 수 μžˆμŠ΅λ‹ˆλ‹€.

ν”„λ‘œν•„ νŽ˜μ΄μ§€

ν”„λ‘œν•„ ν™”λ©΄

  • λ“±λ‘ν•œ νšŒμ›μ˜ 정보λ₯Ό μ—΄λžŒν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • λ“±λ‘λœ μ •λ³΄λŠ” ν”„λ‘œν•„ νŽ˜μ΄μ§€μ—μ„œ μˆ˜μ •ν•  수 μ—†μœΌλ©°, νšŒμ› 정보 μˆ˜μ •μ΄ ν•„μš”ν•œ 경우 우츑 μƒλ‹¨μ˜ μˆ˜μ • λ²„νŠΌμ„ 톡해 μˆ˜μ • νŽ˜μ΄μ§€λ‘œ μ§„μž…ν•©λ‹ˆλ‹€.

μˆ˜μ • νŽ˜μ΄μ§€

μˆ˜μ • ν™”λ©΄

  • λ“±λ‘ν•œ νšŒμ›μ˜ 정보λ₯Ό μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
  • 사진 ν•˜λ‹¨μ˜ μ‚­μ œ λ²„νŠΌμ„ 눌러 κΈ°μ‘΄ λ“±λ‘λœ 사진을 μ‚­μ œν•˜κ³ , μƒˆλ‘œμš΄ 사진을 λ“±λ‘μ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€.
  • ν•˜λ‹¨μ˜ 일지 μ˜μ—­ λ‚΄μ—μ„œ μ„Έμ…˜ μΆ”κ°€ λ²„νŠΌμ„ 톡해 λ‚΄μš©μ„ μž…λ ₯ν•˜κ³ , μ„Έμ…˜ μ €μž₯ λ²„νŠΌμ„ 톡해 λ‚΄μš©μ„ μ €μž₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

μˆ˜μ • μ™„λ£Œ

  • μˆ˜μ •μ΄ μ™„λ£Œλ˜κ³  λ‚˜λ©΄, ν•΄λ‹Ή νšŒμ›μ˜ ν”„λ‘œν•„ νŽ˜μ΄μ§€λ‘œ μ΄λ™ν•©λ‹ˆλ‹€.

λŠλ‚€ 점

ν•„μˆ˜ κΈ°λŠ₯을 λ¨Όμ € λΉ λ₯΄κ²Œ μ™„μ„±μ‹œμΌœ 놓은 λ‹€μŒ 이후 κΈ°λŠ₯ κ΅¬ν˜„μ„ μ§„ν–‰ν–ˆμ–΄μ•Ό ν–ˆλŠ”λ°, μ²˜μŒλΆ€ν„° κΈ°νšμ„ λ„ˆλ¬΄ 크게 작고 진행해 속도도 λ‚˜μ§€ μ•Šμ•˜κ³ , λͺ©ν‘œλ‘œ ν•œ κΈ°λŠ₯듀도 μ „λΆ€ κ΅¬ν˜„ν•˜μ§€ λͺ»ν•΄ 슀크립트 λΆ€λΆ„λ§Œ λΉ λ₯΄κ²Œ μ§„ν–‰ν•˜μ˜€κ³ , css μŠ€νƒ€μΌλ§ 뢀뢄은 많이 μ§„ν–‰ν•˜μ§€ λͺ»ν–ˆλ˜ 점이 μ•„μ‰¬μ› μŠ΅λ‹ˆλ‹€.

ν˜„μž¬ ν•„μˆ˜ κΈ°λŠ₯ 쀑 λ°μŠ€ν¬νƒ‘-λͺ¨λ°”일 λ°˜μ‘ν˜• 개발 뢀뢄은 λ―Έκ΅¬ν˜„ μƒνƒœμž…λ‹ˆλ‹€.
μΆ”ν›„ λ¦¬νŒ©ν† λ§ μ§„ν–‰ν•˜λ©΄μ„œ κ΅¬ν˜„ μ˜ˆμ •μž…λ‹ˆλ‹€.

@netlify
Copy link

netlify bot commented Aug 18, 2023

βœ… Deploy Preview for velvety-puppy-c1029b ready!

Name Link
πŸ”¨ Latest commit f507fd8
πŸ” Latest deploy log https://app.netlify.com/sites/velvety-puppy-c1029b/deploys/64ecba275486ce00087f4058
😎 Deploy Preview https://deploy-preview-58--velvety-puppy-c1029b.netlify.app
πŸ“± Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@turkey-kim
Copy link

μš΄λ™μΌμ§€κΉŒμ§€ 기둝할 수 μžˆλ„€μš” γ…‹γ…‹
μˆ˜μ • μ‹œ 인풋 placeholoder도 μˆ˜μ • μ „ κ°’μœΌλ‘œ 적용되고 ν˜„μž¬λ‚ μ§œλ„ 반영되고,
κΈ°λŠ₯적인 λΆ€λΆ„μ—μ„œ κΌΌκΌΌν•˜κ²Œ κ΅¬ν˜„ν•˜μ…¨λ‹€κ³  μƒκ°ν–ˆμŠ΅λ‹ˆλ‹€!

@zoeyourlife
Copy link

css 적인 뢀뢄은 쑰금 아쉽긴 ν•˜μ§€λ§Œ, κΈ°λŠ₯적인 λΆ€λΆ„μ—μ„œ μ—„μ²­ λ…Έλ ₯ν•˜μ‹  것이 λ³΄μž…λ‹ˆλ‹€.
저도 κ΅¬ν˜„ν•˜μ§€ λͺ»ν•œ κΈ°λŠ₯듀을 λ§ˆμ € λ¦¬νŒ©ν† λ§ κ³Όμ • λ•Œ 진행을 ν•΄μ•Όν•  것 κ°™μŠ΅λ‹ˆλ‹€.
λ¬Όλ‘  저도 κΉ”λ”ν•œ 디렉토리 μ •λ¦¬λŠ” ν•˜μ§€ μ•ŠκΈ΄ ν–ˆμ§€λ§Œ, λ¦¬νŒ©ν† λ§ κ³Όμ • λ•Œ 디렉토리 ν•œλ²ˆ μˆ˜μ •ν•˜μ‹œλ©΄ 쒋을 것 κ°™μ•„μš” !

Copy link

@Eojoonhyuk Eojoonhyuk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아이디어가 μž¬λ°Œλ„€μš”γ…Žγ…Ž CSSκΉŒμ§€ μΆ”κ°€λ˜λ©΄ 더 쒋은 퀄리티가 λ κ±°κ°™μŠ΅λ‹ˆλ‹€!

@wowba
Copy link

wowba commented Aug 25, 2023

MVC ꡬ쑰둜 μž‘μ—…ν•˜μ…”μ„œ νŒŒμΌμ„ 각 νŽ˜μ΄μ§€λ³„λ‘œ λ‚˜λˆˆ λ’€ λΌμš°ν„°λ₯Ό λ‘”λ‹€λ©΄ μ’€ 더 직관적인 폴더 ꡬ쑰λ₯Ό κ°€μ§ˆ 수 μžˆμ„ 것 κ°™μ•„μš”!
μˆ˜κ³ ν•˜μ…¨μŠ΅λ‹ˆλ‹€!

Copy link
Member

@iamidlek iamidlek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ν•„μˆ˜ μš”μ†Œμ™€ κΈ°λŠ₯은 잘 ν˜„ν•΄ μ£Όμ‹  것 κ°™μŠ΅λ‹ˆλ‹€.
css 뢀뢄이 쑰금 μ•„μ‰¬μš΄ 것 κ°™μŠ΅λ‹ˆλ‹€.
일뢀 일반적으둜 ꢌμž₯λ˜λŠ” μŠ€νƒ€μΌμ„ μ½”λ©˜νŠΈ ν•˜μ˜€κ³ 
μ€‘λ³΅λ˜λŠ” 뢀뢄은 μƒλž΅ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

κ³ μƒν•˜μ…¨μŠ΅λ‹ˆλ‹€.

detail.html Outdated
Comment on lines 75 to 84
<ul>
<li>μ„Έμ…˜ 번호</li>
<li>λ‚ μ§œ</li>
<li>λΆ€μœ„</li>
<li>λ‚΄μš©</li>
<li>μ€‘λŸ‰</li>
<li>횟수</li>
<li>μ„ΈνŠΈ</li>
<li>λΉ„κ³ </li>
</ul>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tableμ‚¬μš©ν•˜μ—¬ κ΅¬ν˜„ν•˜λŠ” 것이 더 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.

firebase.js Outdated
userPtSession,
userTrainer
);
userBox.append(userInfoFrame);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반볡문 μ•ˆμ—μ„œ appendλ‚˜ innerHTML을 ν•˜κΈ° 보단
λ³€μˆ˜μ— λͺ¨λ“  λ‚΄μš©μ„ 가지고 ν•œλ²ˆμ— μ μš©ν•˜λŠ” 것이 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.

firebase.js Outdated
) {
const db = getDatabase();
try {
console.log(sessionId, date);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인이 μ™„λ£Œλœ 뢀뢄은 console.logλ₯Ό μ œκ±°ν•˜λ©΄ 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants