📸 #찰칵 프로젝트

• 기간 : 2023. 08. 04 ~ 2023. 09. 13
• 사용자 맞춤형 게시글 추천 패션 SNS
• 배포 링크: 찰칵
• 깃허브 링크: 깃허브 찰칵

기획 배경

1. 우리는 모두 환절기나 일교차가 심한 날씨에 "겉옷을 걸칠까 말까.." 생각하고 후회했던 경험
2. "오늘 옷 좀 잘 받네?" 혹은 "오늘 나 좀 멋진데?" 하는 순간을 기록하거나 자랑하고 싶었던 경험
3. "살 쪘는데 뭐 입지.." 라던가, "내 핏은 왜 이러지?" 라고 고민한 경험

우리 프로젝트는 옷으로 누구나 맞이했던 온갖 경험들에서 시작하여, 고민을 해결하기 위해 기획하게 되었다.

💡 현재 위치의 날씨, 나의 체형, 관심있는 스타일을 태그화 하여, 활성화 된 태그를 기준으로 과거의 나 혹은 남이 작성한 게시글을 추천
이외에도 내가 관심 있는 사람들을 팔로우하여 모아 볼 수 있고, 좋아하는 사진에 좋아요를 누르고 댓글을 다는 등의 SNS 기능을 이용

👨‍👨‍👧‍👦 팀원

함께 프로젝트를 진행한 팀 이름은 최고가 된 조 ❗️
팀 인원은 총 6명으로 이루어져 있고 포지션은 백엔드 3명과 나를 포함하여 프론트엔드 3명이다.

매일 함께 하는 공간 Gather Town 🏡 👨‍👨‍👧‍👦🗣️
매주 화요일, 금요일 백엔드와 프론트엔드는 전체 회의를 통해 진행 상황, 차주 계획, 주요 안건 등 회의를 진행했고
프론트엔드는 매일 데일리스크럼을 진행했다. 작업할 때 마다 게더에 접속해서 그냥 심심하거나 막히는 부분이나 서스럼 없이 팀원들과 소통했었다.
우리 조가 팀워크가 제일 좋다고 자부할 수 있음!!
지금 프로젝트에 이어서 리팩토링도 같이 하기로 약속했다. 😁

🛠️ 기술 스택

FrontEnd

BackEnd

---

💻 내가 진행한 작업 목표물

• 로그인 페이지
• 메인 페이지
• 검색 페이지

💭 프로젝트를 하며 느낀점

1. 세세한 구성과 계획
디자이너나 PM이 따로 없다보니 로직이나 기획적인 부분이 사실 어려웠다.
백엔드와 협업하는 작업이 처음이다보니 백엔드에서 어디서부터 어디까지 작업을 해주는건지 메인페이지 작업하면서 굉장히 헤맸었다.
그러다보니 놓친 부분도 많았고 백엔드에서도 수정된 로직이 많았다.

2. 트러블 슈팅
백엔드와 협업하면서 api 관련 공부를 더 해야겠다고 뼈저리게 느꼈다.
전역상태 관리 또한 recoil로 처음 접해보았는데 새로고침 시 데이터가 다 날라가서 좋아요 기능이나, 회원 정보의 데이터가 사라지면서 메인 페이지 추천 영역도 문제가 있었다.

👩🏻‍💻 메인 페이지

<로그인 경우>
- 회원가입 시 입력한 관심 키워드가 디폴트로 추천 됨
- 체형 및 키워드 선택 검색(좋아요 60%, 조회수 40% 가중치)
- 체형에서 마이사이즈를 토글을 적용하면 사용자가 회원가입 시 입력했던 키와 몸무게로 추천

<비로그인 경우>
- '전체' 키워드가 디폴트 되어 최신순 게시물 추천
- 체형 및 키워드 선택 검색(좋아요 60%, 조회수 40% 가중치)

현재 날씨와 오늘 날씨와 어울리는 스타일
현재 날씨 같은 경우에는 openWeatherAPI를 활용했고, 오늘 날씨와 어울리는 스티일 추천 영역은 사용자의 위치 정보를 받은 후에 위도와 경도로 날씨 정보를 업데이트하여 게시글에 있는 키워드와 일치시켜 추천 해주는 영역이다.

오늘 날씨와 어울리는 스타일은 캐러셀 영역인데,
처음에는 리액트 슬릭 캐러셀을 사용했지만 사용자가 슬라이드 기능을 알 수 있게끔 첫 번째 아이템만 완전히 보여주고 두 번째 아이템은 일부만 보여주는 것이 제대로 동작하지 않아 Swiper 캐러셀로 수정했다.

키워드 추천
키워드 추천 영역에서 게시물을 useInfiniteScroll로 구현했을 때 스크롤을 내려도 새로운 데이터를 가져오지 못하는 문제점에 시간이 많이 소요되었다.

• problem : 키워드 추천 api 호출 시, 처음 게시물 4개만 보여지고, 스크롤을 내려도 새로운 데이터 로드가 안됨
• reason: scrollEvent 에서 닿는 부분이 제대로 계산이 안될 수도 있다는 점을 고려해봄
• Try to solve : 직접 내부 요소를 계산해서 구현이라던지, 값이 제대로 계산이 안될 수 도 있다는 판단하에 useInfiniteQuery훅 및 window.scrollEvent를 제거하고 IntersectionObserver 를 추가
  useInfiniteQuery를 사용하는 대신 useState를 사용하여 게시물을 관리하고, 마지막 element에 닿았을 때 새로운 게시물을 추가하도록 코드를 수정
  
  

api가 중복 호출되면서 페이지가 로드될 때, 키워드 필터링 조건이 변경될 때 게시물이 중복되는 문제가 있었다.
그리고 체형 조건에서 로그인 유저는 직접 키와 몸무게 설정하거나 마이사이즈를 불러오면 body 값이 업데이트가 되지않거나 null로 출력되어 조건 필터링이 안되는 문제도 있었다.

• Problem :

1. api 중복 호출 : 처음 호출에서 0페이지가 먼저 호출 된 후 스크롤을 내리면 페이지1이 나와야하는데 동시에 중복 호출이 발생하고, 또한 스크롤을 내리면서 페이지가 로드되거나, 키워드 필터링 조건이 변경될 때 게시물이 호출되고 있는데 같은 게시물이 중복되는 문제

2. 로그인 및 비로그인 유저 체형 설정 필터링 : 비로그인 유저가 키랑 몸무게를 입력하고 적용하기 버튼까지 누르게 되면 게시물이 다시 초기화되면서 body값에 보내줄 height와 weight 값은 업데이트가 되고 있지만, 로그인 유저는 가입 시 사용자가 입력했던 키와 몸무게가 body 값에 들어가있고, 체형 모달에서 직접 키랑 몸무게를 입력하고 적용하면 입력한 값이 변경되어야하는데 변경되지 않는 점과 마이사이즈 토글을 누르면 가입시 입력했던 원래 정보가 다시 불러와져야하는데 null값으로 나오는 문제

• Reason:

1. api 중복 호출과 게시물 : useEffect가 여러개 있어서 사이드 이펙트가 나는 문제인것 같다.
   fetchPosts 함수가 여러번 호출되면서 pageParam이 변경될 때마다 fetchPosts가 호출되고, 그리고 필터링 조건(selectedStyleTags, inputHeight, inputWeight)이 변경될 때도 게시물 목록을 초기화하고 페이지 번호를 0으로 설정하는데, 이 과정에서 pageParam 값의 변화로 인해 다시 fetchPosts가 호출되면서 중복 호출과 중복 게시물이 나오는것 같다.

2. 체형 조건문 : 로그인 사용자의 경우, 첫 번째 조건문(loggedInUser.isLoggedIn && isMySizeApplied) 인 적용 부분이 참이므로 이 부분의 코드가 실행되고, 두 번째 조건문인 사용자가 직접 키와 몸무게를 입력하면 반영이 안됨
   따라서, useEffect 내부의 조건문에서는 로그인 사용자(loggedInUser.isLoggedIn)이면서 '적용하기' 버튼을 클릭한 경우(isMySizeApplied)에만 첫 번째 조건문이 참으로 평가되어 해당 부분의 코드가 실행

• Try to solve :

1. useEffect 수정 : api 호출 fetchPosts 함수 내부에서 조건문을 통해
   pageParam === 0 이 아닌경우 기존의 게시물 데이터 뒤에 새로운 게시물 데이터를 추가하도록 수정
   const [pageParam, setPageParam] = useState(-1); 초기값을 -1로 설정하고 useEffect 내부에서 if (pageParam === -1) return; 조건문을 통해 pageParam 값이 -1일 때는 API 호출을 중단하도록 설정
   사용자가 페이지를 스크롤하여 새로운 게시물을 불러오는 동작이 시작되기 전까지는(pageParam이 0 이상의 값을 가질 때까지) 실제 게시물 데이터를 요청하지 않게 됨

2. 체형 조건문 수정 : 모든 조건이 독립적으로 실행되어야 한다면, else if를 사용하는 대신 여러 개의 if 문을 사용
   로그인 상태와 관계없이 직접 키와 몸무게 값을 입력했을 때 항상 해당 값들이 반영
   
   

🔎 검색 페이지

검색 페이지에는 전체/계정/피드/태그 의 검색 결과를 보여주기 위해서 탭으로 구분을 하였다. 페이지 이동을 안하고, 탭으로 구분하여 더 효율적이라고 생각해서 개인적으로 검색 페이지는 너무 맘에든다 😎

const [tab, setTab] = useState("전체");

{/*Tab navigation*/}
        <nav className="mt-6 w-full h-[44px] flex justify-around items-center">
          {["전체", "계정", "피드", "태그"].map((name) => (
            <div
              key={name}
              className={`pb-2 text-center w-full ${
                tab === name ? "border-b-2 border-black text-gray-900" : "border-b border-gray-200 text-gray-400"
              }`}
            >
              <button onClick={() => setTab(name)} className="text-[16px] font-bold">
                {name}
              </button>
            </div>
          ))}
        </nav>

계정 / 피드 / 태그 (styleTags, hashTags) 의 검색 결과 api를 한번에 불러와서 호출하기 때문에 4개의 api가 동시에 수행되고 모든 요청이 완료될 때 까지 Promise.all로 묶어주었다.

키보드를 입력할 때마다 api가 연속적으로 호출하는 문제점이 있어 debounce: lodash 라이브러리의 함수로 주어진 함수를 지연시키고 연속 호출을 제한했다.

전체 탭에서는 계정/피드/태그 검색 결과를 일부 보여주게 함으로써 slice를 이용하고,
‘더보기’를 눌렀을 때 해당 탭으로 이동하여 모든 데이터가 출력되게 구현했다.

📱리팩토링 예정이라면

1. 톤앤매너
   기본적으로 전체적인 톤이나, 폰트 등 생각해서 맞춘다고 맞췄던것 같지만 각자 작업을 하다보니 다른 점이 있을 거라 생각된다. modal 부분이나 alert 같은 부분들 (?)

2. 추천 영역
   키워드 추천 부분 강화 (버튼 누를 때마다 API 호출 → 캐싱으로 대체?)
   체형별 추천이 잘 안됨
   api 수정도 필요!

3. recoil 라이브러리 추가
   새로고침시에도 데이터가 유지되도록 보완

4. feature
   알림 기능
   비밀번호 찾기/수정
   채팅 기능

---

😉 사이트 바로가기

https://chal-kak.vercel.app/main