Wesop 프로젝트 회고록

sooyuni·2022년 7월 6일

aesop wesop 프로젝트

🌠Wesop 프로젝트 소개

🌠What is Wesop Client Project?

저희 wesop팀은 브라질 기업 나투라앤코가 소유한 호주 고급 스킨케어 브랜드인 Aesop 사이트를 클론 코딩하였으며, 해당 기업의 홈페이지를 React Page로 변환해가며 React를 학습하는 것을 목표로 두고 진행 했습니다.
외부 라이브러리를 최대한 활용하지 않고 기초 문법과 기초 태그만을 활용하여 기능을 구현했습니다.

🌠개발 인원 및 기간

개발 기간
- 2022/06/20 ~ 2022/07/01
개발 인원
- 프론트엔드 4명(서한샘, 박수연, 홍희윤, 조예지)
Front-end Github
- 백엔드 1명 (정지민)

🌠적용 기술

🌠구현 페이지 소개

🌠Wesop 팀이 목표로 했던 필수 구현 기능
1. 로그인 - 내가 구현한 부분
2. 회원가입
3. 카테고리(네비게이션) - 내가 구현한 부분
4. 제품 리스트
5. 제품 상세 리스트
🌠목표 달성 후 추가로 구현한 기능
6. 회원정보 조회 및 수정
7. 장바구니

🌟네비게이션

네비게이션 구성 조회 api를 활용하여 네비게이션 메뉴 및 각 메뉴의 서브 카테고리 구현에 필요한 데이터를 불러오도록 작업.
1. 불러온 data를 useState()에 저장.
2. 반복되는 코드를 Array.map()메서드를 활용해서 간결하게 구현(메뉴, 서브카테고리, 카테고리)
3. 메뉴 탭이 바뀌는 것에 따라서 보여지는 내용이(서브 카테고리, 카테고리) 달라야 하므로 객체의 특정 값을 맵핑하는 방식을 통해 메뉴 탭을 구현
변하지 않는 데이터를 사용하여 메뉴 탭이 바뀔때마다 modal 창의 배경색과 이미지가 달라지도록 구현.
Link tag를 활용하여 동적 라우팅 구성

🌟로그인 페이지

JWT와 로컬 스토리지를 활용하여 로그인 기능 구현.
placeholder 텍스트가 label로 애니메이션 되는 input창 구현.
(floating label input)
정규 표현식을 사용하여 이메일의 형식과 비밀번호 형식 확인.
삼항연산자를 이용하여 버튼 교체 기능 구현. (로그인 → 사용자 이름)
1. 로그인 전 : 클릭 시 로그인을 위한 모달창이 열리는 "로그인" 버튼.
2. 로그인 후 : 로컬 스토리지에 저장된 사용자의 FullName을 불러와 사용자의 이름으로 된 버튼으로 교체 되게끔 구현. 해당 버튼은 useNavigate()를 이용해 사용자 개인 정보 페이지로 이동하게 구현.
useRef()와 useEffect()를 이용하여 Modal창 외부 영역을 클릭하면 Modal창이 닫히게 하는 기능 구현.

🌠좋았던 점, 아쉬운 점

🌟좋았던 점 : 멋진 팀원과 화목한 팀 분위기

팀 분위기가 정말 좋았다:D 끊임없는 칭찬과 배려, 응원이 가득했다.🤗

서로 일을 미루거나 하는 것 없이 본인이 하나라도 더 구현하려고 하는 열정이 굉장히 강했다. 막히는 부분이 생겨 스트레스 받거나 지치는 와중에도 서로를 위한 응원이나 배려가 좋았던게 기억에 남는다. 막히는 부분이 나오면 해결할 방법을 같이 고민 해줬다. 협업의 장점이 이런거구나. 하는걸 느끼게 해주는 고마운 팀이었다.
우리 Wesop팀의 유일한 백엔드 지민님, 유일한 청일점 한샘님, 열정 가득한 예지님, 천사 같은 마음씨의 희윤님에게 너무나도 감사드린다😚
(오른쪽의 그림은 무려 백엔드 지민님이 1차 프로젝트 완료 기념으로 찍었던 단체 사진을 그림으로 그려주셨다..🍀 잠금 화면으로 설정 완료!🍀)

🌟아쉬운 점 : 미숙한 Trello 사용

Trello 사용이 처음이었던지라 1차 프로젝트 당시 중간 점검 전까지는 Trello를 제대로 사용하지 못했던 것이 아쉬움에 남는다. 처음 티켓을 발행했을땐 로그인창 구현, 네비게이션 구현 등 기능별로 세세하게 나누지 않고, 큼직 큼직하게 나눴던 것이 기억에 남는다. 중간 점검을 통해 다른 팀들의 Trello 사용법을 보고 크게 반성했다. 나는 Trello를 전혀 활용하지 못한거나 마찬가지였다. 2차 프로젝트에서는 Trello를 좀 더 적극적으로 활용해보고자 한다.

🌠기억에 남는 코드

🌠모달창 외부 영역을 클릭하면 모달창이 닫히는 기능

로그인창을 구현할 때 가장 기억에 남는 기능이다.
처음엔 단순하게도 loginWrap에 onClick()이벤트를 걸어서 클릭하면 닫히게 하면 되겠지!라고 시도했던거 같다.
결과는 완전 꽝이었다.
로그인 모달창의 외부 영역과 X 버튼을 눌렀을때만 닫혀야 했는데 처음엔 그냥 어딜 눌러도 닫혔다.🤣
loginWrap안에 loginBody가 자식 요소로 있으니 어딜 눌러도 닫혀버리는 것이었다.

loginBody가 아닌 부분만 클릭하는걸 어떻게 인식시켜야 하지? 고민했다. 바로 구글 검색을 진행 했다.

여러 글들을 읽어봤는데 내 코드에 적용하기 좋았던 것은 아래의 블로그에 쓰인 방법이었다.

https://velog.io/@miyoni/TIL37
useRef()를 이용한 outside click 감지

document에 addEventListener를 붙인다.
1. modal의 외부 영역를 클릭하면 modal이 닫혀야 하기 때문이다.
2. eventlistener의 종류로는 mousedown을 골랐다.
  💡 mousedown : 클릭하는 순간 이벤트가 동작된다.
outside 클릭의 기준이 되는 요소를 지정해준다.
1. loginBody에 useRef() 적용
2. mousedown 이벤트가 발생하면 clickModalOutside 함수가 실행된다. 모달창이 활성화 된 상태에서 event.target이 ref에 저장된 요소를 포함하는지 확인한다. 포함이 되지 않는다면, outside 클릭이 된다.😊

🌠Floating Label Input창 만들기

loginModal.js

loginModal.scss

🌠Floating Label Input 구현 방법은 아래와 같다.

label과 input을 감싸는 상위 div 태그를 만든다.
✔ input창이 빈 상태에서 label은 입력 창 중간에서 placeholder의 역할을 한다.
✔ input창이 입력 값으로 채워져 있거나 입력을 위해 focus 된 상태라면 왼쪽 상단 모서리에 고정되어 label의 역할을 수행한다.
label과 input을 감싼 formText div의 position을 relative로, label의 position을 absolute로 설정하여 placeholder처럼 배치한다.

(placeholder처럼 보이지만 사실은 label text...!😚)
여기서 가장 중요한 설정은 transform-origin: top left이다.
이 속성이 없이 label 상태 변환을 진행하면 좌측 상단으로 이동하는게 아닌 센터 상단으로 이동하게 된다.
:focus-within을 사용하여 input창에 포커스가 있을 때 label의 위치를 어디로 할껀지 설정해준다.