Merge pull request #67 from manymogo/manymogo

✨FEAT: 환율 소숫점 비정상적인 표시 제거(Math.floor)

README.md

@@ -14,6 +14,7 @@
 - [주요 기술 스택 선정 포인트](#주요-기술-스택-선정-포인트)
 - [주요 기능](#주요-기능-📌)
 - [라우팅 & 컴포넌트 & 상태관리](#라우팅--컴포넌트--상태-관리)
+- [추가 요구 사항](#추가-요구-사항)
 
 ## 개요
 
@@ -113,24 +114,45 @@ $ npm run preview // 빌드 후 배포 환경에서의 실행
 
 ## 주요 기술 스택 선정 포인트
 
-- VITE
+- VITE <br>
+  기존의 Create React App의 방식을 사용하면 Webpack 번들러와 Babel 트랜스파일러를 통해 빌드하는데, VITE를 이용한 방식은 ESbuild 등을 활용하여 속도가 더 빠르고 개발 환경에서 빌드 결과물을 빠르게 확인할 수 있어 선택했습니다.
 - REACT
-- FIREBASE
-- NETLIFY
+- FIREBASE <br>
+  백엔드 서비스의 구축은 express 프레임워크와 mongoDB를 이용하여 진행할 수도 있습니다. 하지만 해당 방식을 따르면 인증을 구현하기 위해 `passport` 모듈 등을 이용하여 시간이 상대적으로 더 소요된다는 점, mongoDB와 firebase firestore가 모두 noSQL 기반의 document 방식이라 큰 차이가 없다는 점을 고려하여 firebase를 이용해 백엔드를 구축하기로 결정했습니다.
+- NETLIFY <br>
+  netlify 호스팅 서비스를 이용하여 웹 애플리케이션의 배포를 진행하면 Github 레포지토리의 프로젝트를 자동으로 빌드해줄 수 있을 뿐만 아니라, 해당 브랜치에 새롭게 push된 변경 사항까지 자동으로 적용된다는 점은 매우 매력적으로 다가왔습니다.
 
 ## 주요 기능 📌
 
 1. Login & Signup 🔐
+> 로그인은 크게 비밀번호 인증 방식과 깃허브 계정 연동 방식으로 이루어져 있습니다. 두 방식 모두 로그인된 사용자의 정보를 `localStorage`에 [넣어주고](https://github.com/2-guys-Javascript/travel-web-app/blob/d00d43cdb030e24b68f720e1db93925dc1192bc8/src/components/Login/Login.jsx#L19-L21), 각 페이지에 해당하는 컴포넌트가 마운트 될 때마다 useEffect() 훅을 통해서 이를 불러오는 [방식](https://github.com/2-guys-Javascript/travel-web-app/blob/d00d43cdb030e24b68f720e1db93925dc1192bc8/src/components/Japan/Japan.jsx#L6-L16)을 택했습니다 => 지도, 날씨, 환율, 마이 페이지 탭 모두
+> 회원 가입(Sign up)은 html form의 input으로부터 사용자에게 이메일, 비밀 번호 그리고 닉네임을 입력 받아 firebase authentication에 등록해주는 [방식](https://github.com/2-guys-Javascript/travel-web-app/blob/d00d43cdb030e24b68f720e1db93925dc1192bc8/src/components/SignUp/SignUpForm.jsx#L43-L48)을 사용했습니다. 이 과정에서 각 입력 필드가 이메일이 맞는지, 비밀번호의 길이가 적당한지를 정규 표현식 등을 이용하여 검증해주었고, 이미 존재하는 계정인지에 대한 정보는 firebase의 오류 메시지를 통해 나타냈습니다.
 
-2. Map 🗺️
+2. Map 🗺️ <br>
+   지도는 로그인된 사용자와 그렇지 않은 사용자에게 각각 다른 기능을 제공합니다. 전자는 후자의 기능에 추가적으로 날짜에 맞는 본인의 일정을 생성하고 조회할 수 있으며, 후자는 특정 장소에 대한 검색과 해당 장소 주변의 명소(식당, 카페)에 대한 정보를 제공합니다. 
+> LoginMap <br>
+로그인된 사용자는 버튼을 눌러 자신의 위치로 지도를 위치시킬 수 있으며, 특정 지점을 클릭해 지도 하단의 폼을 사용하여 일정을 생성할 수 있습니다. 또한 자신이 생성한 일정에 대한 마커를 클릭하여 주변의 명소 정보를 얻을 수 있습니다. 
 
-3. Weather 🌦️
+> NonLoginMap <br>
+비로그인된 사용자는 지도의 자동 완성 검색창에 특정 장소를 검색하여 이동하고, 주변의 명소 정보를 얻을 수 있습니다. 
 
-4. Currency 💴
+3. Weather 🌦️ <br>
+> 사용자는 날씨 탭에서 한국과 일본의 특정 도시에 대한 박스를 클릭하여 오늘, 내일, 모레에 대한 날씨 정보를 얻을 수 있습니다. 
+5. Currency 💴 <br>
+> 사용자는 환율 탭에서 클릭을 통해 당일의 환율 정보를 원화 기준, 엔화 기준으로 얻을 수 있습니다. 
 
 ## 라우팅 & 컴포넌트 & 상태 관리
 
 ### 라우팅
+1. Home (url : `/`) 
+2. 한국 (url : `/korea`) <br>
+> 최외곽에는 KrDefaultLayout이 감싸고 있어 상단에는 애플리케이션 헤더가, 하단에는 각 탭으로 이동할 수 있는 네비게이션 바가 위치하고, 세부 url path에 따라서 Outlet 컴포넌트가 달라집니다.
+3. 일본 (url : `/japan`) <br>
+> 일본 탭도 한국 탭과 마찬가지로 최외곽에는 JpDefaultLayout이 감싸고 있어 상단과 하단에 각각 애플리케이션 헤더와 네비게이션 바가 위치합니다. 하지만 세부 Outlet 컴포넌트가 환율(`Exchange`)이 추가되었다는 특징이 있습니다. 
+4. 회원 가입 (url : `/signup`) 과 로그인 (url : `/login`) <br>
+> 해당 url path만 예외적으로 ApplicationHeader를 이용하지 않고, 개별적인 헤더를 정의하여 UI를 렌더링합니다. 
+5. 마이페이지 (url : `/mypage`) <br>
+> 로그인된 사용자의 계정 정보를 보여주는 탭이므로 ApplicationHeader를 사용하고 나머지 내용은 MyPage 컴포넌트를 사용하여 렌더링합니다. 
 
 ### 컴포넌트
 
@@ -149,3 +171,10 @@ $ npm run preview // 빌드 후 배포 환경에서의 실행
   - KrNavBar
 
 ### 상태 관리
+
+## 추가 요구 사항
+1. 사용자의 일정에 대한 삭제를 넘어 수정 기능
+2. 추가적인 소셜 로그인(페이스북, 구글 등) 구현
+3. localStorage를 이용한 로그인 정보 저장은 보안상 아쉬운 점이 있으니 cookie를 이용한 방식으로 구현
+4. 비로그인된 사용자도 특정 지점을 클릭하고, 해당 장소 주면의 명소 정보를 볼 수 있으면 좋을 것 같음
+5. MyPage 컴포넌트에는 따로 footer 컴포넌트를 만들어주진 않을 것인지?

src/components/Japan/Exchange.jsx

@@ -54,8 +54,8 @@ function Exchange({ onChangeIsLoggedIn, onChangeUserId, onChangeDisplayName }) {
         </div>
         <h2>
           {isKrwToJpy === true
-            ? `100엔에 ${krwToJpy['conversion_rate'] * 100} 원입니다!`
-            : `1000원에 ${jpyToKrw['conversion_rate'] * 1000} 엔입니다!`}
+            ? `100엔에 ${Math.floor(krwToJpy['conversion_rate'] * 100)} 원입니다!`
+            : `1000원에 ${Math.floor(jpyToKrw['conversion_rate'] * 1000)} 엔입니다!`}
         </h2>
       </div>
     </div>