Waffle Party

OTT 같이 볼 사람이 필요할 때, Waffle Party

와플파티 배포 링크 👉 와플파티 시작하기

📢 서비스 소개

배경

OTT를 같이 보면서 채팅할 수 있는 그룹시청 서비스가 꾸준히 이용되고 있고, 그룹 시청자의 84%는 다음카페, 트위터 등 온라인에서 같이 볼 사람을 구한다고 답했습니다.

기존 채널의 문제점

다음카페: 등업한 회원에게만 구인 글이 보입니다.
트위터: 나를 팔로우한 유저에게만 구인 글이 보입니다.

해결

기존 채널의 폐쇄성에 주목하여, 별도의 등업절차 혹은 인맥과 관계없이 참여 가능한 개방형 커뮤니티 와플파티를 만들었습니다.

🏠 FE 팀원

이보은(FE)

이에스더(FE)

⚙️ 기술스택

😊 서비스 주 기능

필터칩

댓글&비밀댓글

내소식

💻 트러블슈팅

댓글, 답댓글 등록&수정&삭제

댓글과 답댓글 데이터가 변경될 때, 사용자에게 즉각적으로 변경된 내용을 반영하는 것이 중요합니다.

이를 위해 데이터가 변경되었을 때 새로고침을 요구하지 않고, SWR 라이브러리에서 제공하는 mutate 함수를 사용했습니다.

mutate함수는 서버의 데이터를 최신화시키고, SWR에서 fetch한 값으로 데이터를 다시 변경합니다.

const useGetPostDetail = (postId: string) => {
  const { data, mutate, isLoading } = useSWR...
return {
postDetailData: data?.data,
isLoading: isLoading,
refetch: mutate,
};
};

useEffect(() => {
if (refresh) {
refetch(); // 데이터 갱신을 위한 함수 호출
setRefresh(false); // 갱신 후 상태 초기화
}
}, [refresh, refetch]);

웹 성능을 저하시킬 수 있는 큰 파일 크기로 인한 경고

웹 페이지의 초기 로드 시간은 페이지의 성능에 큰 영향을 미치므로, 큰 파일을 최소화하기 위해 lazy를 사용하여 청크 크기를 줄였습니다.

1. 기존에는 Index.js에 모두 담겨있었습니다. 이를 lazy를 사용하여 라우팅으로 분리된 각 페이지를 split 하였습니다.
2. Suspense는 컴포넌트 로딩중 fallback이 발생할때 보여집니다.

• 개선된 모습

딥링크

서비스의 디자인은 다크 모드를 기본으로 제작되었습니다. 하지만 삼성 브라우저의 다크 모드 접속 시, 다음과 같은 문제가 발생하였습니다.

1. prefers-color-scheme CSS 기능을 지원하지 않아 다크 모드를 감지하지 못하는 문제가 발생했습니다.
2. 삼성 브라우저 자체의 알고리즘으로 색상이 변경되어, 의도하지 않은 디자인이 표시되었습니다.

이러한 문제를 해결하기 위해 삼성 브라우저에서 접속할 경우, 딥링크를 사용하여 크롬 브라우저로 열리도록 수정하였습니다.

const userAgent = navigator.userAgent;
const isSamsung = userAgent.includes("SamsungBrowser");

const url = window.location.href;

// 삼성 브라우저일 경우
if (isSamsung) {
  window.alert("와플파티는 크롬에 최적화되어있습니다.\n크롬으로 이동할까요?",);
  // window.location.href를 변경하여 리디렉션
  const url = window.location.href;
  // http 혹은 https
  const protocol = window.location.protocol.replace(":", "");
  // 크롬 앱이 없다면, playstore 크롬 앱 다운로드 링크로 이동
  window.location.href = `intent://${url.replace(/^https?:\/\//,"",)}#Intent;scheme=${protocol};package=com.android.chrome;S.browser_fallback_url=https://play.google.com/store/apps/details?id=com.android.chrome;end`;
  }

📁 프로젝트 폴더 구조

📦src
 ┣ 📂assets
 ┃ ┣ 📂icons
 ┃ ┃ ┣ 📜.DS_Store
 ┃ ┃ ┣ 📜AlertCirlcleError.svg
 ┃ ┃ ┣ 📜BellIcon.svg
 ┃ ┃ ┣ 📜Camera.svg
 ┃ ┃ ┣ 📜Chat.svg
 ┃ ┃ ┣ 📜Check.svg
 ┃ ┃ ┣ 📜CheckBoxOff.svg
 ┃ ┃ ┣ 📜CheckBoxOn.svg
 ┃ ┃ ┣ 📜CheckChip.svg
 ┃ ┃ ┣ 📜CloseIcon.svg
 ┃ ┃ ┣ 📜DividerStrongLarge.svg
 ┃ ┃ ┣ 📜DividerStrongShort.svg
 ┃ ┃ ┣ 📜DividerThinLarge.svg
 ┃ ┃ ┣ 📜DividerThinShort.svg
 ┃ ┃ ┣ 📜HomeIcon.svg
 ┃ ┃ ┣ 📜HomePageLogo.svg
 ┃ ┃ ┣ 📜Image.svg
 ┃ ┃ ┣ 📜ImageDeleteButton.svg
 ┃ ┃ ┣ 📜InputCheck.svg
 ┃ ┃ ┣ 📜InputDelete.svg
 ┃ ┃ ┣ 📜InputError.svg
 ┃ ┃ ┣ 📜KakaoIcon.svg
 ┃ ┃ ┣ 📜KakaoTalkIcon.svg
 ┃ ┃ ┣ 📜LeftArrowIcon.svg
 ┃ ┃ ┣ 📜Lock.svg
 ┃ ┃ ┣ 📜LockActive.svg
 ┃ ┃ ┣ 📜MoreIcon.svg
 ┃ ┃ ┣ 📜OptionsIcon.svg
 ┃ ┃ ┣ 📜PencilIcon.svg
 ┃ ┃ ┣ 📜PencilUnderLine.svg
 ┃ ┃ ┣ 📜ProfileComment.svg
 ┃ ┃ ┣ 📜ProfileIcon.svg
 ┃ ┃ ┣ 📜ProfileMoreComment.svg
 ┃ ┃ ┣ 📜ProfileMyPage.svg
 ┃ ┃ ┣ 📜RightArrow.svg
 ┃ ┃ ┣ 📜RoundClosed.svg
 ┃ ┃ ┣ 📜Symbol.svg
 ┃ ┃ ┣ 📜SymbolIcon.svg
 ┃ ┃ ┣ 📜UnLock.svg
 ┃ ┃ ┣ 📜WafflePartyLogo.svg
 ┃ ┃ ┗ 📜profile.svg
 ┃ ┣ 📂image
 ┃ ┃ ┣ 📜HeroImage01.png
 ┃ ┃ ┗ 📜HeroImage02.png
 ┃ ┗ 📜.DS_Store
 ┣ 📂components
 ┃ ┣ 📂Header
 ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┣ 📜HeaderButton.tsx
 ┃ ┃ ┗ 📜HeaderLoginButton.tsx
 ┃ ┣ 📂Home
 ┃ ┃ ┣ 📜Banner.tsx
 ┃ ┃ ┗ 📜FilterList.tsx
 ┃ ┣ 📂Login
 ┃ ┃ ┣ 📜KakaoLogin.tsx
 ┃ ┃ ┗ 📜Loading.tsx
 ┃ ┣ 📂MyPage
 ┃ ┃ ┗ 📜MyPageSection.tsx
 ┃ ┣ 📂Navigation
 ┃ ┃ ┣ 📜NavButton.tsx
 ┃ ┃ ┗ 📜Navigation.tsx
 ┃ ┣ 📂card
 ┃ ┃ ┣ 📜MyCommentsCard.tsx
 ┃ ┃ ┣ 📜MyPageListCard.tsx
 ┃ ┃ ┣ 📜MyReactCard.tsx
 ┃ ┃ ┣ 📜NotiCard.tsx
 ┃ ┃ ┣ 📜PostListCard.tsx
 ┃ ┃ ┗ 📜UserCard.tsx
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📜Button.tsx
 ┃ ┃ ┣ 📜CheckBox.tsx
 ┃ ┃ ┣ 📜Chip.tsx
 ┃ ┃ ┣ 📜EmptyList.tsx
 ┃ ┃ ┣ 📜Input.tsx
 ┃ ┃ ┣ 📜MiniChip.tsx
 ┃ ┃ ┗ 📜ProfileImageUploader.tsx
 ┃ ┣ 📂modal
 ┃ ┃ ┣ 📜ActionSheet.tsx
 ┃ ┃ ┣ 📜BasicModal.tsx
 ┃ ┃ ┣ 📜BottomSheet.tsx
 ┃ ┃ ┣ 📜BottomSheetHeader.tsx
 ┃ ┃ ┗ 📜ListModal.tsx
 ┃ ┣ 📜DeletePostMessage.tsx
 ┃ ┣ 📜FullImage.tsx
 ┃ ┣ 📜ImagePreview.tsx
 ┃ ┣ 📜NickNameForm.tsx
 ┃ ┗ 📜ProfilePreview.tsx
 ┣ 📂hooks
 ┃ ┣ 📜checkValidation.ts
 ┃ ┣ 📜formatDate.ts
 ┃ ┣ 📜useFormattedDate.ts
 ┃ ┣ 📜useGetMyComment.tsx
 ┃ ┣ 📜useGetMyPost.tsx
 ┃ ┣ 📜useGetMyProfile.tsx
 ┃ ┣ 📜useGetNotification.tsx
 ┃ ┣ 📜useGetPostDetail.tsx
 ┃ ┗ 📜useGetPostList.tsx
 ┣ 📂layout
 ┃ ┗ 📜BasicLayout.tsx
 ┣ 📂lib
 ┃ ┣ 📂api
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📜comment.dto.ts
 ┃ ┃ ┃ ┣ 📜login.dto.ts
 ┃ ┃ ┃ ┣ 📜post.dto.ts
 ┃ ┃ ┃ ┣ 📜response.dto.ts
 ┃ ┃ ┃ ┗ 📜user.dto.ts
 ┃ ┃ ┣ 📜comment.ts
 ┃ ┃ ┣ 📜image.ts
 ┃ ┃ ┣ 📜login.ts
 ┃ ┃ ┣ 📜notification.ts
 ┃ ┃ ┣ 📜post.ts
 ┃ ┃ ┗ 📜profile.ts
 ┃ ┣ 📜axios.ts
 ┃ ┗ 📜token.ts
 ┣ 📂mock
 ┃ ┣ 📜detail.ts
 ┃ ┣ 📜mockData.ts
 ┃ ┣ 📜myComment.ts
 ┃ ┣ 📜notification.ts
 ┃ ┗ 📜userInfo.ts
 ┣ 📂pages
 ┃ ┣ 📜HomePage.tsx
 ┃ ┣ 📜KakaoCallback.tsx
 ┃ ┣ 📜LoginPage.tsx
 ┃ ┣ 📜MyCommentsPage.tsx
 ┃ ┣ 📜MyPage.tsx
 ┃ ┣ 📜MyPostsPage.tsx
 ┃ ┣ 📜NicknamePage.tsx
 ┃ ┣ 📜NotificationsPage.tsx
 ┃ ┣ 📜PostCreatePage.tsx
 ┃ ┣ 📜PostDetailPage.tsx
 ┃ ┣ 📜PostEditPage.tsx
 ┃ ┣ 📜PrivacyPolicyPage.tsx
 ┃ ┣ 📜PrivateRoute.tsx
 ┃ ┣ 📜ProfileEditPage.tsx
 ┃ ┣ 📜PublicRoute.tsx
 ┃ ┗ 📜TermsPage.tsx
 ┣ 📂recoil
 ┃ ┣ 📜notificationState.ts
 ┃ ┣ 📜postDetailState.ts
 ┃ ┣ 📜postListState.ts
 ┃ ┣ 📜userProfile.ts
 ┃ ┗ 📜userState.ts
 ┣ 📂styles
 ┃ ┗ 📜homeCustomSlick.css
 ┣ 📂types
 ┃ ┣ 📜actionSheetOption.ts
 ┃ ┣ 📜enum.ts
 ┃ ┣ 📜notification.ts
 ┃ ┣ 📜ottTags.ts
 ┃ ┣ 📜postDetail.ts
 ┃ ┣ 📜postList.ts
 ┃ ┣ 📜userProfile.ts
 ┃ ┣ 📜userToken.ts
 ┃ ┗ 📜validationResultType.ts
 ┣ 📜.DS_Store
 ┣ 📜App.tsx
 ┣ 📜Router.tsx
 ┣ 📜env.d.ts
 ┣ 📜image.d.ts
 ┣ 📜index.css
 ┣ 📜main.tsx
 ┣ 📜svg.d.ts
 ┗ 📜vite-env.d.ts