KDT0_JangMunYong 카페 직원 관리 서비스 #53

moonyah · 2023-08-18T14:22:56Z

☕카페 직원 관리 서비스

카페 직원들의 정보를 관리하는 서비스입니다.

[배포 사이트]

배포 사이트 url

키 관리 이슈 때문에 AWS S3를 제외한 (local storage를 이용) 기능 구현 페이지를 배포하였습니다.

[과제 기간]

2023.08.07 ~ 2023.08.17

[필수 요구사항]

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

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

[선택 요구사항]

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

[사용 스택]

[구현 내용]

로딩 페이지

메인 페이지

직원 등록 폼 & AWS 3S에 이미지 업로드

여러 사람 등록, 삭제

LocalStorage

전체 삭제

상세 정보 폼

모바일 반응형

[User Flow]

[아쉬운 점]

과제 기간 내에 검색 기능을 구현하지 못했다.
직원 정보를 편집하는 기능을 넣지 못햇다. 삭제하고 다시 작성하는 식으로 수정을 해야 한다.
아직 AWS 3S를 능숙하게 다루지 못했다.

[느낀 점]

Firebase는 전에 해 본 경험이 있어서 AWS 3S를 도전해 보았는데 어려웠지만 AWS를 경험해 본 것에 큰 의미를 둔다.
Javascript에 대해서 많은 공부를 한 것 같다. 전에는 거의 한 줄도 작성하지 못했는데 이번 과제를 통해 많이 공부한 것 같다.
AWS 3S를 선택함으로 api 키 관리에 대해서도 많이 알아보게 되었다.

seungjun222 · 2023-08-25T07:11:13Z

.env로 키 관리하고 웹팩 등 설정 리팩토링때 하시면 키 관련 문제는 잘 해결될 것 같습니다! 그리고 aws s3로 등록만 할 수 있는건가요? s3랑 localstorage로 구현한 것을 각각 분리해서 명시하면 이해가 더 잘 될 것 같습니다!!

JitHoon

로딩화면 귀엽게 잘 만드셨네요! 프로젝트 하시느라 고생 많으셨습니다!

JitHoon · 2023-08-25T09:16:44Z

script/loading.js

+window.addEventListener("load", function() {
+    setTimeout(function() {
+      window.location.href = "emp-list-page.html"; // 리다이렉트할 페이지의 URL
+    }, 3000); // 로딩 화면을 보여주는 시간 (여기서는 3초)
+  });


emp-list-page.html 파일 안에 div#loadingScreen와 #content를 넣어서 한 페이지에서 로딩 화면을 보여주지 않고 따로 로딩 화면을 위한 html을 사용한 이유가 궁금합니다!

JitHoon · 2023-08-25T09:23:34Z

script/aws.js

AWS S3에 어떻게 데이터를 업로드하는지 알 수 있어서 좋았습니다!
firebase와 메소드 이름만 조금 다르고 전체적인 흐름은 유사하게 느껴집니다!

JitHoon · 2023-08-25T09:28:13Z

script/register-emp.js

+// 요소를 로컬 스토리지에 저장하기
+function saveToLocalStorage() {
+    const data = JSON.stringify(items);
+
+    localStorage.setItem('emp_lists', data);
+}
+
+// 로컬 스토리지에서 요소 가져오기
+function loadFromLocalStorage() {
+    const data = localStorage.getItem('emp_lists');
+
+    if (data) {
+        items = JSON.parse(data);
+    }


이번 과제에서 로컬 스토리지를 활요해보지 못했는데,
어떻게 사용하는지 한 눈에 볼 수 있어서 좋았습니다!

lilviolie · 2023-08-25T11:44:06Z

프로젝트 고생하셨어요!! 문용님도 컨셉에 맞춰서 깔끔하고 귀엽게 디자인하셔서 구경 잘하고 갑니당ㅎㅎ 직원 등록할 때 정보를 하나도 입력하지 않아도 등록이 되던데 이 부분 개선해보시는 것도 좋을것같아요..!

LikeFireAndSky

문용님은 정말 보는 사람이 귀여운 UI를 잘 만드시는 것 같습니다!!

특히 처음 로딩 화면이 정말 좋았습니다.

익숙한 Firebase대신 S3로 도전하신 것도 정말 멋있으십니다!! 오늘도 배워갑니다 😶‍🌫️

LikeFireAndSky · 2023-08-25T12:52:34Z

css/common.css

+* {
+    margin: 0;
+    padding: 0;
+
+    box-sizing: border-box;
+    font-family: 'Gowun Dodum', sans-serif;
+  }
+


문용님!! 글씨체 너무 귀여워요 🫢

font가 디자인에 참 많은 것을 기여하는데 이런 세세한 부분까지 신경 쓰시다니 문용님은 참 유저에게 친근한 UI 디자인을 잘 하시는 것 같습니다!!

LikeFireAndSky · 2023-08-25T12:53:20Z

css/employee-list.css

+@import url(common.css);
+@import url(registration-form.css);
+@import url(information-form.css);
+


CSS파일을 이러한 형식으로 불러올 수 도 있다는 것을 하나 배워갑니다!!

LikeFireAndSky · 2023-08-25T12:55:02Z

css/employee-list.css

+.search {
+  float: right;
+
+  width: 300px;
+
+  margin: 20px;
+
+  position: relative;
+}


반응형을 하면 왼쪽으로 쏙 하고 들어가던데

이것을 float의 기능 때문인 건가요??

너무 신기하네요!!

LikeFireAndSky · 2023-08-25T12:59:24Z

css/loading.css

+.beans {
+  margin: 20px auto;
+  width: 35px;
+  height: 50px;
+  background: #8B4C39;
+  border-radius: 50%;
+  animation: drop2 1s ease-in infinite;
+}


저번 HTML, CSS과제에서 멘토님께 받았던 피드백이었는데 이런 식으로 CSS 프로퍼티들을 기능 별로 띄어쓰기 해주면 정말 잘 읽히는 것 같아요!! 한번 해보시면 좋을 것 같습니다 😊 저는 display관련 기능을 올리고 width 속성을 두 번째로 보냈어요 ㅎㅎ

Suggested change

.beans {

margin: 20px auto;

width: 35px;

height: 50px;

background: #8B4C39;

border-radius: 50%;

animation: drop2 1s ease-in infinite;

}

.beans {

width: 35px;

height: 50px;

margin: 20px auto;

border-radius: 50%;

background: #8B4C39;

animation: drop2 1s ease-in infinite;

}

LikeFireAndSky · 2023-08-25T13:01:19Z

css/loading.css

+@keyframes drop {
+  0% {
+    transform: translate(0px, -70px) rotate(45deg);
+  }
+  100% {
+    transform: translate(0px, 130px) rotate(45deg);
+  }
+}
+
+@keyframes drop2 {
+  0% {
+    transform: translate(0px, -70px);
+  }
+  100% {
+    transform: translate(0px, 130px);
+  }
+}


귀여운 디테일 장인 문용님...!! 커피가 떨어지는 것이 예사롭지 않던데 rotate값이 들어가 있었네요!!

나중에 25%랑 50%랑 75%도 추가해주세요 😎

커피가 예술적으로 떨어지면 좋을 것 같아요

LikeFireAndSky · 2023-08-25T13:06:19Z

script/aws.js

+    const S3_BUCKET = 'employee-management-picture';
+
+    const AWS_CONFIG = {
+        accessKeyId: AWSKeys.NETLIFY_S3_ACCESS_KEY_ID,
+        secretAccessKey: AWSKeys.NETLIFY_S3_SECRET_ACCESS_KEY,
+        region: 'ap-northeast-2'
+    };
+
+    // AWS SDK를 사용하여 인증 정보를 설정하고 서비스에 연결
+    AWS.config.update(AWS_CONFIG);
+
+    const s3 = new AWS.S3();
+
+    const file = e.target.files[0];
+
+    // 파일과 파일이름을 넘겨주면 됩니다.


S3 연결 과정이 주석과 함께 잘 나와 있어서 한번 해보고 싶습니다.

멘토님께서 netlify나 vercel같은 배포 사이트가 아니라 AWS같은 곳에서 배포를 해봐야 실력이 는다고 말씀하셨는데 그 첫 걸음을 벌써..!! 기존에 사용해봤던 익숙한 firebase가 아니라 s3를 도전해보신 것이 정말 멋있습니다. 저도 계속 기술에 도전해야겠습니다. 😶‍🌫️

LikeFireAndSky · 2023-08-25T13:09:19Z

script/register-emp.js

+function displayLists() {
+    // local storage에 있는 요소 가져오기
+    loadFromLocalStorage();
+
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+
+        // List Item 요소 생성
+        const {
+            listEl
+        } = createListElement(item);
+
+        // List Div 안에 추가
+        list.appendChild(listEl);
+    }
+}
+displayLists();


이번에 firebase firestore을 활용하느라 local storage를 활용해보지 못했는데 문용님 코드를 통해서 배울 수 있는 것 같습니다. 로컬 스토리지에 파일 저장할 때도 json 형식으로 보내야 하더라고요!! 또 하나 배워갑니다 🙂

LikeFireAndSky · 2023-08-25T13:11:35Z

script/register-emp.js

+        if (!empNameFormEl) { // 이름이 계속 생성되지 않는 것 방지
+            empNameFormEl = document.createElement('div');
+            empNameFormEl.classList.add('emp-name');
+            informationFormContent.appendChild(empNameFormEl);
+        }


코드가 반복되는 것 같은데 함수로 처리해봐도 좋을 것 같습니다!! 위에 함수들을 정말 잘 만들어서 정리해두셔서 문용님은 이 정도야 간단하게 하실 것 같습니다!! 😎

minsoo-web

문용님! 고생 많으셨습니다.

시간이 없으셔서 검색, 수정 기능 구현을 못하신 게 많이 아쉽습니다 ㅠ
시간 나실 때 꼭 구현 해보시는 거 연습해보시면 좋을 것 같고,

지금은 로컬스토리지를 사용하고 있지만, 그냥 로컬스토리지"도" 사용한단 느낌이 강합니다.
로컬스토리지에 저장된 값이 있으니, 라는 식으로 접근해야 유용하게 브라우저 저장공간을 활용하는 거거든요

하나의 파일에 모두 관리되고 있는 것들을 분류해서 관리해보시면 더 좋았을 것 같습니다.

minsoo-web · 2023-08-26T05:33:05Z

index.html

+    <div class="row cup">
+    </div>
+  </div>
+  <script src="./script/loading.js"></script>


요구사항은 페이지가 로드되기 전에 보여져야하는 ui를 구현하는 건데, 지금은 맨 처음 방문할 때만 뜨는 스플래시 화면처럼 구현하셨네요!

요구사항에는 안 맞을 수 있지만, 귀엽게 잘 구현하셨단 생각이 들었습니다.

minsoo-web · 2023-08-26T05:34:08Z

script/aws.js

+        })
+}
+
+document.getElementById('photo').addEventListener('change', onFileUpload);


aws 관련된 설정을 정의한 파일과, 이벤트를 등록하는 함수는 관심사가 다른 것 같습니다. fileUpload.js 와 비슷한 네이밍으로 파일을 분리했다면 어땠을까요?

minsoo-web · 2023-08-26T05:36:06Z

script/register-emp.js

+const registerBtn = document.getElementById('register-button');
+registerBtn.addEventListener('click', showRegistrationForm);
+
+let items = [];


지금 이 변수가 굉장히 많이 쓰이고 있습니다.
전역변수로 값을 관리하는 것은 꽤나 위험한 상황들이 많이 야기될 수 있는데요.
지역 변수로 사용하도록 함수의 인자에서 items를 받을 수 있도록해서 변경하는 것을 추천드리고, const 로 선언해도 됩니다. push나 pop은 const 배열에 영향을 안 주는데 왜 그런지도 공부해보세요

minsoo-web · 2023-08-26T05:38:36Z

script/register-emp.js

지금 이 파일에서 너무 많은 함수가 선언되고 활용되고 있어서 어떤 함수들인지 읽어보고 찾아야 하는 불편함이 있습니다.
파일로 관심사를 분리해서 하나의 파일에 관심사가 비슷한 함수들만 모아둘 수 있도록 해보고 필요한 애들을 require 또는 Import 로 가져다 쓰는 모듈 시스템을 적용해보세요!

minsoo-web · 2023-08-26T05:39:43Z

script/register-emp.js

+    closeRegistrationForm();
+
+    saveToLocalStorage();
+    location.reload(); // 새로고침을 해야 checkbox 문제 해결됨


직원 등록에는 체크박스가 관계가 없는 ui인 것 같은데 새로고침이 필요할까요?

minsoo-web · 2023-08-26T05:40:43Z

script/register-emp.js

+    imgEl.src = item.image;
+    imgEl.alt = "picture";


객체에 직접 접근해서 수정하기 보다는, setAttribute 메소드를 통해서 접근하는 것을 권장합니다. 객체에 직접 접근해서 수정하는 것은 많은 이슈를 낳을 수있거든요 ㅠㅠ

moonyah added 5 commits August 10, 2023 02:35

Feat: create html files and style employee-detail.html

aa879cc

Feat: upload project files

c4f64d4

Docs: update README.md

7610309

Docs: update README.md

884d554

Docs: update README.md

276c4c9

moonyah self-assigned this Aug 18, 2023

JitHoon reviewed Aug 25, 2023

View reviewed changes

LikeFireAndSky reviewed Aug 25, 2023

View reviewed changes

minsoo-web reviewed Aug 26, 2023

View reviewed changes

moonyah added 2 commits August 28, 2023 10:39

Refactor: update json file

78ad952

Fix: update index.html

a2a47e5

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

KDT0_JangMunYong 카페 직원 관리 서비스 #53

KDT0_JangMunYong 카페 직원 관리 서비스 #53

moonyah commented Aug 18, 2023 •

edited by seungjun222

Loading

seungjun222 commented Aug 25, 2023 •

edited

Loading

JitHoon left a comment

JitHoon Aug 25, 2023

JitHoon Aug 25, 2023

JitHoon Aug 25, 2023

lilviolie commented Aug 25, 2023

LikeFireAndSky left a comment

LikeFireAndSky Aug 25, 2023

LikeFireAndSky Aug 25, 2023

LikeFireAndSky Aug 25, 2023

LikeFireAndSky Aug 25, 2023

LikeFireAndSky Aug 25, 2023

LikeFireAndSky Aug 25, 2023

LikeFireAndSky Aug 25, 2023

LikeFireAndSky Aug 25, 2023

minsoo-web left a comment

minsoo-web Aug 26, 2023

minsoo-web Aug 26, 2023

minsoo-web Aug 26, 2023

minsoo-web Aug 26, 2023

minsoo-web Aug 26, 2023

minsoo-web Aug 26, 2023

KDT0_JangMunYong 카페 직원 관리 서비스 #53

Are you sure you want to change the base?

KDT0_JangMunYong 카페 직원 관리 서비스 #53

Conversation

moonyah commented Aug 18, 2023 • edited by seungjun222 Loading

☕카페 직원 관리 서비스

[배포 사이트]

[과제 기간]

[필수 요구사항]

[선택 요구사항]

[사용 스택]

[구현 내용]

로딩 페이지

메인 페이지

직원 등록 폼 & AWS 3S에 이미지 업로드

여러 사람 등록, 삭제

LocalStorage

전체 삭제

상세 정보 폼

모바일 반응형

[User Flow]

[아쉬운 점]

[느낀 점]

seungjun222 commented Aug 25, 2023 • edited Loading

JitHoon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lilviolie commented Aug 25, 2023

LikeFireAndSky left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minsoo-web left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moonyah commented Aug 18, 2023 •

edited by seungjun222

Loading

seungjun222 commented Aug 25, 2023 •

edited

Loading