🏠 INATON

🔗 배포 링크

목차

1. 프로젝트 소개
2. 개발 환경 및 배포 URL
3. 프로젝트 구조
4. 팀원 소개
5. 역할 분담
6. 개발 기간 및 이슈 관리
7. 페이지 기능
8. 개발하며 겪은 이슈

1. 프로젝트 소개

• INATON(인에톤)서비스는 "공간"이라는 키워드를 중심으로 각자만이 알고있는 장소를 공유하는 SNS입니다.
• 서로의 아지트를 공유하며 '좋아요' , '댓글'기능을 통해 서로 소통할 수 있습니다.
• 🦁 멋쟁이사자처럼 프론트엔드스쿨 3기 팀 프로젝트로 진행한 INATON입니다.

(Top)

2. 개발 환경 및 배포 URL

개발 환경

• Front : React, styled-components, SCSS
• Back : 제공 API, 카카오맵 API

배포 URL

• https://17ant.github.io/INATON/
• 테스트 계정

  email: inaton@admin.com pw: admin1234

(Top)

3. 프로젝트 구조

• public/assets/ : 이미지 파일
• src/common/ : 여러 컴포넌트, 페이지에서 사용하는 공통적인 로직 및 상수(Constants), API
• src/components/ : 아토믹 디자인 패턴을 적용한 컴포넌트
• src/pages/ : 여러 컴포넌트를 합성한 페이지
• src/routes/ : 페이지 라우팅 기능

├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── assets
│   └── index.html
└── src
    ├── App.jsx
    ├── Contexts
    │   └── SignupContext.jsx
    ├── common
    │   ├── AuthenticationCheck.jsx
    │   ├── BASE_URL.jsx
    │   ├── GetMyInfo.jsx
    │   ├── GetPostDetail.jsx
    │   ├── GetUserPost.jsx
    │   ├── ImageResize.jsx
    │   ├── ImageUploadAPI.jsx
    │   └── PostComment.jsx
    ├── components
    │   ├── Input
    │   │   └── Input.jsx
    │   ├── comment
    │   │   ├── Comment.jsx
    │   │   ├── CommentReportAPI.jsx
    │   │   ├── CommentsDeleteAPI.jsx
    │   │   ├── CommentsListAPI.jsx
    │   │   └── CommentsWriteAPI.jsx
    │   ├── customButton
    │   │   └── CustomButton.jsx
    │   ├── errorMessage
    │   │   └── ErrorMessage.jsx
    │   ├── feedList
    │   │   └── FeedList.jsx
    │   ├── followCount
    │   │   └── FollowCount.jsx
    │   ├── header
    │   │   ├── BasicHeader.jsx
    │   │   ├── ChatHeader.jsx
    │   │   ├── CustomMainHeader.jsx
    │   │   └── UploadHeader.jsx
    │   ├── homePost
    │   │   ├── DeleteLikeAPI.jsx
    │   │   ├── HomePost.jsx
    │   │   ├── LikeAPI.jsx
    │   │   └── PostReportAPI.jsx
    │   ├── imageButton
    │   │   └── ImageButton.jsx
    │   ├── imagePreview
    │   │   └── ImagePreview.jsx
    │   ├── imgSlider
    │   │   └── ImgSlider.jsx
    │   ├── inLineProfileFollow
    │   │   └── InlineProfileFollow.jsx
    │   ├── inlineProfileInfo
    │   │   └── InlineProfileInfo.jsx
    │   ├── map
    │   │   ├── MapInline.jsx
    │   │   ├── MapModal.jsx
    │   │   ├── MapPost.jsx
    │   │   ├── MapSearch.jsx
    │   │   ├── map.css
    │   │   └── page.css
    │   ├── navBar
    │   │   └── NavBar.jsx
    │   ├── profileImg
    │   │   └── ProfileImg.jsx
    │   ├── uploadButton
    │   │   └── UploadButton.jsx
    │   ├── userInfoInput
    │   │   └── UserInfoInput.jsx
    │   └── userInfoText
    │       └── UserInfoText.jsx
    ├── index.js
    ├── pages
    │   ├── LoginEmail
    │   │   ├── LoginAPI.jsx
    │   │   └── LoginEmail.jsx
    │   ├── NotFound
    │   │   └── NotFound.jsx
    │   ├── chatList
    │   │   └── ChatList.jsx
    │   ├── chatRoom
    │   │   └── ChatRoom.jsx
    │   ├── follow
    │   │   ├── FollowAPI.jsx
    │   │   ├── Follower.jsx
    │   │   ├── FollowerAPI.jsx
    │   │   ├── Following.jsx
    │   │   ├── FollowingAPI.jsx
    │   │   └── UnFollowAPI.jsx
    │   ├── home
    │   │   ├── FeedAPI.jsx
    │   │   ├── Home.jsx
    │   │   └── SearchAPI.jsx
    │   ├── login
    │   │   └── Login.jsx
    │   ├── myProfile
    │   │   ├── GetProfileAPI.jsx
    │   │   ├── MyProfile.jsx
    │   │   └── MyProfileFeedAPI.jsx
    │   ├── postDetail
    │   │   ├── PostDeleteAPI.jsx
    │   │   └── PostDetail.jsx
    │   ├── postModify
    │   │   ├── PostModify.jsx
    │   │   └── PostModifyAPI.jsx
    │   ├── postUpload
    │   │   ├── PostUpload.jsx
    │   │   └── PostUploadAPI.jsx
    │   ├── profileModification
    │   │   ├── AccountValidAPI.jsx
    │   │   ├── ImageAPI.jsx
    │   │   ├── ProfileModification.jsx
    │   │   └── ProfileModificationAPI.jsx
    │   ├── signup
    │   │   ├── AccountValidAPI.jsx
    │   │   ├── EmailValidAPI.jsx
    │   │   ├── ImageAPI.jsx
    │   │   ├── Signup.jsx
    │   │   ├── SignupAPI.jsx
    │   │   └── SignupProfile.jsx
    │   ├── splash
    │   │   └── Splash.jsx
    │   └── yourProfile
    │       ├── ProfileAPI.jsx
    │       └── YourProfile.jsx
    └── routes
        └── Router.jsx

(Top)

4. 팀원 소개

김세원	김지현	백경현	장수민
@gajua	@jhyun-k	@baekg6	@jangsumin

(Top)

5. 역할 분담

공통

• API를 활용한 로그인, 회원가입 페이지의 기능 구현
• 프로젝트 도중 발생한 이슈를 즉각적으로 의논하여 처리
• 개발 후반부에는 Live Share 확장을 사용하여 프로젝트 진행을 가속화

김세원

• 유저검색 UI 마크업 및 기능 구현
• 로그인, 회원가입 페이지 UI 마크업

김지현

• API 활용하여 팔로우/팔로잉 페이지 및 관련 컴포넌트 구현
• 네비바 및 헤더 제작
• 404 페이지 마크업
• 첫 만남 시 냉장고 추천

백경현

• 게시글 상세/ 업로드 페이지 및 관련 컴포넌트 구현
• 지도 API 활용을 위한 데이터 처리 및 구현
• 이미지 압축, API 호출 개선을 통한 성능 최적화

장수민

• 내 프로필, 상대 프로필, 프로필 수정 페이지 마크업 및 관련 컴포넌트 구현
• react-confirm-alert 라이브러리를 활용한 confirm 기능 획일화

(Top)

6. 개발 기간 및 작업 관리

• 전체 개발 기간 : 2022-12-09 ~ 2023-01-04

(Top)

7. 페이지 기능

1) 홈

Splash	로그인	회원가입

홈 피드	검색	채팅 페이지

2) 게시글

게시글 작성	게시글 수정	게시글 삭제

게시글 신고	댓글 작성	댓글 신고 및 삭제

3) 프로필

팔로워	팔로잉	로그아웃

프로필 설정	유저 프로필	프로필 수정

---

(Top)

8. 트러블 슈팅

1. 경로 이슈

• 이슈: public/assets 폴더 이미지 상대 경로 접근 오류
• 분석: 브라우저에서 public/index.html 을 기준으로 보여지기 때문에 상대 경로 접근 불가
• 해결: 이미지 경로를 환경변수 PUBLIC_URL을 사용하여 작성

src = {`${process.env.PUBLIC_URL}/assets/basic-profile.png`}

2. 비동기 렌더링

function handlePwValid() {
  //비밀번호 validation check
  const reg = new RegExp('^.*(?=.{8,})(?=.*[0-9])(?=.*[a-zA-Z]).*$');

  if (reg.test(pwRef.current.value)) {
    setPwMsg('');
  } else {
    setPwMsg('* 영어, 숫자포함해서 8자 이상 입력해주세요');
  }

  if (emailMsg === '* 사용 가능한 이메일 입니다.' && pwMsg === '') {
    setBtnState('');
  } else {
    setBtnState('disabled');
  }
}

• 이슈: setPwMsg를 이용한 후, pwMsg 값이 변경이 처리되지 않음
• 분석: 리렌더링이 비동기로 진행되어, pwMsg가 변경이 되기 전에 setBtnState 판별
• 해결: useEffect를 이용하여, 오류 메시지가 변경될 때 버튼의 상태를 변경

useEffect(()=>{
     if (emailMsg === '* 사용 가능한 이메일 입니다.' && pwMsg === '') {
            setBtnState('');
        } else {
            setBtnState('disabled');
        }
}, [pwMsg])

3. Auth props 전달

• 이슈: Local storage의 token을 이용하여 Auth를 갱신하는데 갱신 되지 않음
• 분석: 페이지와 라우터에서 각각 auth를 선언하여 값이 동기화되지 않음
• 해결: props를 이용하여 router에서 각 페이지 컴포넌트로 auth, setAuth 변수를 전달하여 상태 관리

(Top)