KDT0_ParkNaYoung 프로젝트 매니지먼트 서비스 by im-na0 · Pull Request #66 · KDT1-FE/Y_FE_JAVASCRIPT_PICTURE

im-na0 · 2023-08-18T21:36:29Z

프로젝트 매니지먼트 서비스

🚀 프로젝트 소개

팀 프로젝트 진행 시 멤버를 등록하고 팀 구성을 도와주는 서비스를 입니다 😁

🚀 프로젝트 배포

https://deploy-preview-66--effulgent-axolotl-ab38e8.netlify.app/

🚀 과제 요구사항

✅ 필수 요구사항

“AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
프로필 페이지를 개발하세요.
스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
사진을 등록, 수정, 삭제가 가능해야 합니다.
유저 플로우를 제작하여 리드미에 추가하세요.

CSS
- 애니메이션 구현
- 상대수치 사용(rem, em)
JavaScript
- DOM event 조작

✅ 선택 요구사항

사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
직원을 등록, 수정, 삭제가 가능하게 해보세요.
페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
직원 검색 기능을 추가해 보세요.
infinity scroll 기능을 추가해 보세요.
사진을 편집할 수 있는 기능을 추가해 보세요.
LocalStorage 사용

🚀 프로젝트 내용

메인페이지	메인 페이지

✓ 전체 리스트 확인 ✓ floating animation	✓ members 이름순 정렬 (최대 6개 출력) ✓ lazy-loading
멤버 리스트 페이지	멤버 리스트 페이지

✓ 멤버 리스트 확인 ✓ 멤버 등록순 정렬 ✓ lazy-loading	✓ 멤버 등록

✓ 삭제 / 수정 / 조회	✓ 수정 & 등록 시 유효성 검사 ✓ 모든 폼을 채워야 등록 가능
팀 리스트 페이지	팀 리스트 페이지

✓ 팀 리스트 확인 ✓ 팀 이름순 정렬 ✓ hover animation ✓ lazy-loading	✓ 팀 멤버 조회 가능 (프로필만 구현함) ✓ unsplash random 이미지 사용

🚀 유저 플로우

interaction 기준으로 작성했습니다

✍️ 아쉬운 점

다른 부분에서 오류처리하느라 firebase에 대해 자세히 공부하지 못했던 것 같아 아쉽습니다.
디렉토리 구조가 깔끔하지 못한 것 같습니다. 🥲
기능 추가를 많이 못한 것이 아쉽습니다. 팀 페이지도 여유가 된다면 구현해보고 싶습니다.
모듈화해서 코드의 재사용성을 높이고자 했는데 오히려 같은 로직을 두번이나 사용해야 했었습니다. 다시한번 더 클린코드에 대해 고민해보게 되는 시간이였습니다..😞

netlify · 2023-08-20T18:43:41Z

✅ Deploy Preview for effulgent-axolotl-ab38e8 ready!

Name	Link
🔨 Latest commit	`e8ac04d`
🔍 Latest deploy log	https://app.netlify.com/sites/effulgent-axolotl-ab38e8/deploys/64ecbdd6e741a500087549a8
😎 Deploy Preview	https://deploy-preview-66--effulgent-axolotl-ab38e8.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

lee-sangone · 2023-08-23T07:30:07Z

디렉터리 구조 아쉽다 하셨는데 제가 보기엔 깔끔한 것 같습니다! 다양한 기능들을 넣으셨고 결과물도 정말 완벽한것 같아요 수고하셨습니다!

Gaoridang

구조가 너무 잘 짜여있어서 깜짝 놀랐습니다! 오래 들여다보긴 했는데 제가 첨언할 내용이 많지 않아서 리뷰 내용은 별로 없네요ㅠ 진짜 고생 많으셨어요!!

Gaoridang · 2023-08-24T06:16:40Z

+import { handleTooltipClick } from './tooltip'
+// import { handleupdateBtn } from './upadate'
+
+export function buildHTMLList(member) {


이거 만드느라 시간 엄청 뺏기셨을 것 같아요 요소 생성하는 함수를 하나 만드는 것도 좋았을 것 같아요!! 클래스 명은 미리 생각해두고 붙이신걸까요?

넵 여기서 시간을 많이 잡아먹었습니다😭 구조가 복잡해서 먼저 html로 만들어보고 js로 옮겼어요!
오 아예 요소를 만드는 부분도 함수로 만들면 좋을 것 같네요 좋은 의견 감사합니다!

Gaoridang · 2023-08-24T06:22:37Z

+      observer.unobserve(entry.target)
+    }
+  })
+}, options)


어차피 나머지 값은 디폴트이니 options => { threshold: 0.1 } 이렇게 바꿔도 괜찮을 것 같아요! 저도 시도해본 건 아니라 확실치는 않아요ㅎㅎ..

아 그렇게 해도 똑같이 동작할 것 같네요~ 리팩토링할 때 시도해보겠습니다 😄

Gaoridang · 2023-08-24T06:28:46Z

+// 스토리지에 업로드
+export async function uploadStorage(file) {
+  const fileName = file.name
+  const id = Date.now() / fileName.length


id를 이렇게 생성하신 이유가 있으신가요?

id는 고유값을 생성하는 부분이에요! storage에 파일을 업로드할 때 이름에 고유값을 넣어서 최대한 중복이름을 피하고자 했습니다.

fileName을 해싱해서 Date.now()와 조합했으면 조금 더 unique한 id를 만들 수 있었을 것 같네요.

im-na0 · 2023-08-24T08:00:37Z

디렉터리 구조 아쉽다 하셨는데 제가 보기엔 깔끔한 것 같습니다! 다양한 기능들을 넣으셨고 결과물도 정말 완벽한것 같아요 수고하셨습니다!

감사합니다 😄😄 !!

SOL-MI

모듈화 관련해서 정말 많은 고민을 하셨던 걸로 아는데 그 고민의 흔적이 가득 녹아있는 코드였습니다..! 엄청 깔끔하게 정리해두셔서 감탄하면서 봤습니다 :) 심지어 사이트도 예뻐요ㅎㅎ 최고세요!!!!!!!!!!🤩
+) 아주 사소한 문제 하나 발견했습니당. 반응형 가로 391px~753px정도를 지날때 멤버리스트에서 글씨 및 아이콘이 조금 빠져나가게 보여요

SOL-MI · 2023-08-24T07:56:18Z

+        imageUrlInfo.revokeImageUrl()
+      }
+    } catch (error) {
+      console.error('Error during form submission: ', error)


Add member버튼 통해서 업로드 할 때 이런 오류가 발생합니다!
업로드는 정상적으로 되지만 한번 확인해보시면 좋을 것 같습니다.
members.controller.js:73 Error during form submission: ReferenceError: imageUrlInfo is not defined
at HTMLFormElement. (members.controller.js:69:1)

감사합니다!! 어디서 에러가 나는지 알았으니 얼른 고쳐봐야겠네요 😁!!

SOL-MI · 2023-08-24T09:07:51Z

+    if (e.target.classList.contains('members__row')) {
+      const memberId = e.target.getAttribute('data-id')
+      const newUrl = `/members/${memberId}`
+      navigateTo(newUrl)


이런 식으로 해쉬를 사용하는 방법도 있었군요:D 배워갑니다 ㅎㅎ
다만 글씨/사진 근처 부분을 클릭했을 때는 이동하지 않고, 커서가 pointer로 바뀌지 않아 동작을 확인하는 게 쉽지 않았습니다..!

이동이 제대로 안되는 부분은 어떻게 해결해야할 지 저도 고민인 부분입니다 😭.. 리팩토링하면서 왜 이동이 안되는지 원인을 찾아봐야겠어요!
커서를 pointer로 바꾸는게 훨씬 접근성이 좋을 것 같네요 좋은 의견 감사합니다!!

developer-jyyun · 2023-08-25T05:15:53Z

폴더 구조 아쉽다고 하셨는데 폴도 구조도, 코드도 너무 잘 정리되어있고 깔끔해서 가독성이 높았습니다!
유효성 검사에 정렬 기능까지!! 필수 구현 외에도 다양한 기능 추가되었는데 기능 추가가 아쉽다고 하신 나영님..너무 겸손하신거 아닌가요...
제가 아직 구현 못한 기능들은 나영님 코드 보며 공부 해 보려구요😗

개인적으로 팀 영역에 마우스 각 팀의 멤버들 뜨는 거 좋았어요!!
팀 페이지 구현되면 마음껏 자랑해주세요!!! 😊

프로필 상세 보기 아이콘이 크기가 작고, 리스트의 마우스 오버 효과로 인해서 상세보기 아이콘 위치도 달라져서 곧바로 클릭하기가 조금 불편했어요..! 아이콘 크기가 작은만큼 수정/삭제 버튼 아이콘이 리스트에 바로 노출되면 사용성이 더 좋을 것 같아요!

모바일에서 프로필 상세보기 아이콘 클릭할 때 '박지민'분만 레이아웃이 가로형으로 변경됩니다!

marshallku

고생하셨습니다!
짧은 시간에 구현하실 수 있을 분량이 아니었을 것 같은데, 잠은 주무시면서 하시는 거죠?
dom 생성 부분같은 것과 프로젝트 구조만 조금 다듬으면 아주 좋아질 것 같습니다!

marshallku · 2023-08-27T14:11:26Z

+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200


_redirects 파일이랑 netlify.toml 둘 다 사용해야 작동하는 건가요??

marshallku · 2023-08-27T14:12:13Z

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">


en -> ko

marshallku · 2023-08-27T14:12:29Z

+    <title>Main</title>
+  </head>
+  <body>
+    <div id="app"></div>


html이 극단적으로 다이어트했네요

marshallku · 2023-08-27T14:13:31Z

+@media (min-width: 1200px) {
+  .container-xxl,
+  .container-xl,
+  .container-lg,
+  .container-md,
+  .container-sm,
+  .container {
+    max-width: 960px;
+  }
+}


이게 더 아래에 있어야 우선순위가 제대로 부여되지 않을까요?

marshallku · 2023-08-27T14:14:01Z

커밋되지 않아야 하는 파일이 같이 커밋된 것 같네요...!

marshallku · 2023-08-27T15:16:07Z

+  rmBtn.style.display = showRmBtn ? 'block' : 'none'
+  cgBtn.style.display = showCgBtn ? 'block' : 'none'
+  saveCgBtn.style.display = showSaveCgBtn ? 'block' : 'none'


hidden attribute을 toggle하거나, css로 조절해보셔도 좋을 것 같습니다.

marshallku · 2023-08-27T15:17:03Z

+  }
+
+  &__image {
+    flex-grow: 0 !important;


!import의 사용은 최대한 지양해주시는 게 좋습니다.

marshallku · 2023-08-27T15:17:48Z

+  const getAllTeams = () => {
+    return new Promise((resolve, reject) => {


이런 케이스엔 return을 생략해도 되지 않을까요?

marshallku · 2023-08-27T15:18:12Z

+  const getUsersByTeam = (teamName) => {
+    return new Promise((resolve, reject) => {
+      try {
+        const q = query(collection(db, 'members'), where('team', '==', teamName), orderBy('name'))


q보단 조금 더 성의있는 이름을 지어주시면 좋을 것 같습니다.

marshallku · 2023-08-27T15:18:38Z

+          const members = []
+          querySnapshot.forEach((doc) => {
+            members.push(doc.data())
+          })


map을 사용하면 좀 더 깔끔하고 직관적으로 정리할 수 있지 않을까요?

im-na0 added 14 commits August 16, 2023 23:52

gitignore is now working

5b97b8d

Feat: Initial project setup

8406164

Feat: Added Client-Side Routing Configuration

198ec0d

Feat: Members page

98054ba

Feat: Update Router

b8ddc56

Feat: Add Upload DB

67bd8a1

Feat: Add Modal UI

bbb958c

Feat: Add Validate Form

b5ee842

Feat: Update modalForm template

995b30e

Feat: Updated Firebase DB and Storage upload functionality

02057dd

Feat: Updated modal dialog events

d2ac094

Feat: Add FirebaseUtils

bbcc101

Feat: Add btn event

97d99f2

README.md

be2f8d1

im-na0 changed the title ~~KDT0프로젝트 매니지먼트 서비스~~ KDT0_ParkNaYoung 프로젝트 매니지먼트 서비스 Aug 18, 2023

im-na0 and others added 9 commits August 19, 2023 06:37

gitignore

e3bc0ef

Docs: User Flow

3fb1fd6

Docs: User Flow

67bbafc

Update README.md

ec9a5e5

Fix

d6a81ce

Docs: README.md

7798a7c

Update README.md

e339713

configuration setting

ce0d5d1

Docs: README.md

23c2ab0

im-na0 added 5 commits August 21, 2023 09:50

Fix

2779f88

Fix

5cb8d78

Fix

9c39d0e

Fix

3dead2b

Feat: Add .env

beb6a04

im-na0 added 5 commits August 22, 2023 01:41

gitignore is working

5b54420

Feat: Add .env

5092229

Fix: Update .env

c792d2b

Fix

266d9a1

Feat: Update config

227fe41

Gaoridang reviewed Aug 24, 2023

View reviewed changes

SOL-MI reviewed Aug 24, 2023

View reviewed changes

marshallku reviewed Aug 27, 2023

View reviewed changes

im-na0 added 4 commits August 28, 2023 11:31

Refactor: Restructured project directory

2c74a75

Refactor: Restructured project directory

898cb02

Refactor: Modify router

a503cb5

Refactor: etc

e8ac04d

		const getAllTeams = () => {
		return new Promise((resolve, reject) => {

Conversation

im-na0 commented Aug 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

프로젝트 매니지먼트 서비스

🚀 프로젝트 소개

🚀 프로젝트 배포

🚀 과제 요구사항

✅ 필수 요구사항

✅ 선택 요구사항

🚀 프로젝트 내용

🚀 유저 플로우

✍️ 아쉬운 점

Uh oh!

netlify Bot commented Aug 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for effulgent-axolotl-ab38e8 ready!

Uh oh!

lee-sangone commented Aug 23, 2023

Uh oh!

Gaoridang left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

im-na0 commented Aug 24, 2023

Uh oh!

SOL-MI left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

developer-jyyun commented Aug 25, 2023

Uh oh!

marshallku left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

im-na0 commented Aug 18, 2023 •

edited

Loading

netlify Bot commented Aug 20, 2023 •

edited

Loading

marshallku left a comment •

edited

Loading