collabu / pennyway-client-webview

🪙 Pennyway Webview Client: A web browser that is embedded in a pennyway iOS mobile client

💰 Pennyway

지출 관리 SNS 플랫폼

Pennyway는 소비를 측정하고 불필요한 부분을 줄일 수 있도록 도와주는 SNS 플랫폼입니다. 사용자들은 Pennyway를 통해 지출을 관리하고, 소비 습관을 분석하며, 다른 사용자들과 소비 관련 정보를 공유할 수 있습니다. Pennyway는 개인과 가계부, 그리고 사회적인 소비 관리를 위한 플랫폼으로서, 더 나은 소비 습관을 형성하고 재정적인 안정을 도모하는 데 도움을 줍니다.

Version #	Revision Date	Description	Author
v0.0.1	2024.03.11	프로젝트 기본 설명 작성	이의찬
v0.0.2	2024.05.06	프로젝트 환경 설정	강병준

👪 Webview Team

이의찬	강병준

📌 Architecture

1️⃣ FSD Architecture

2️⃣ CI/CD Pipeline

📗 Gruond Rule

• Agile Process

🤝 Convention

• Naming Rule
• Type & Interface Rule
• Commit Convention
• Pull Request Convention

⚙️ Software Design - Frontend

• Application Spec
• Directory Structure
• CI/CD Pipeline
• API Specification

pennyway-client-webview's Issues

🐛 폰트 디코딩 실패

버그 내용

• 폰트 디코딩 실패

버그 위치

• public/assets/font
• src/app/styles/_fonts.scss

재현

할일

• 정상적으로 font의 디코딩이 이뤄지도록 수정

공용 컴포넌트 리팩토링 (NetworkErrorToast, Carousel)

• NetworkErrorToast 컴포넌트의 경우 최상단에 위치하고 있으며, 재사용 컴포넌트는 아니기 때문에 app/ 이동
• carousel의 경우 피드에서만 사용되기 때문에 widgets/feed-carousel로 이동

공용 컴포넌트 수정

• ActiveButton 및 BasicButton의 모호한 사용처로 인한 해당 버튼들 제거
• (추가 작업) ConfirmReportModal 버튼 스타일링
• 모달 Small 버튼 및 팔로잉 버튼 추가
• ConfirmModal 스타일에 분기문 정리

🐛 Profile 페이지 스크롤 버그

버그 내용

• Profile 페이지 스크롤이 최하단에서 시작

버그 위치

• src/pages/profile/ui/ProfileMainPage.tsx

재현

1. iPhone-layout의 경우

• Feed의 게시글 중 최상위 게시글(Feed Content 1 by 강병준)이 아니라면 최하단에서 시작
  

2. 일반 화면의 경우
   • Feed의 게시글 중 최상위 게시글이 아니고, 첫 방문이 아닐 경우(이미 랜더링 된 페이지일 경우) 최하단에서 시작

• 추측되는 원인
  • 이전 페이지에서의 스크롤 위치가 유지되는 것으로 추측됩니다. 다만 뒤로 가기가 아니라 새로운 페이지로 이동할 경우 스크롤 위치가 최상단이 되는 것이 기본 설정인 것으로 알기에, 조금 더 찾아볼 필요가 있습니다.
  • 또한 iPhone-layout의 경우에는 최상위 피드의 Profile이 아니라면 처음 방문하는 페이지도 늘 최하단에서 시작되기에 iPhone-Layout의 경우 다른 원인이 있을 수 있습니다.

할일

• ProfilePage의 스크롤이 최상단에서 시작되도록 수정

🔧 Mutation 이후 서버 상태 동기화 유지

수정 목적

Mutation 이후에 서버 상태 동기화 유지를 위한 리팩토링

수정 코드

• src/features/feed-bookmark/api/useBookmarks.tsx
• src/features/feed-main-like/api/useLikes.tsx

할 일 목록

• Mutation 이후 서버 상태 동기화

설명

낙관적 업데이트를 진행한 이후 API 요청을 최소화하기 위해 현재 아래와 같이 코드가 작성되어있습니다.

export const useLikes = (feedId: number, isLiked: boolean) => {
  const queryClient = useQueryClient();

  const { mutate: handleLikeFeed, isPending } = useMutation({
    mutationFn: () => isLiked ? requestUnlikeFeed(feedId) : requestLikeFeed(feedId),
    onMutate: () => {
      // 낙관적 업데이트
    }
    onError: (_, __, context) => {
      // Network Error일 경우 이전 쿼리값으로 롤백
      queryClient.setQueryData([QUERY_KEYS.feeds], context?.previousQueryData);
    },
    onSuccess: (response, _, context) => {
      if (isErrorResponse(response)) {
        // 서버 응답 실패 시 이전 쿼리값으로 롤백
        queryClient.setQueryData([QUERY_KEYS.feeds], context.previousQueryData);
      }
    },
  });

  return { handleLikeFeed, isPending };
};

하지만 이 경우에는 치명적인 문제점이 하나 있는데, 바로 서버와의 동기화가 진행되지 않는다는 점입니다.

🔧 CD Pipeline의 적용 시점

논의 주제

• CD Pipeline의 적용 시점

논의 내용

현재 github flow에 맞춰 main브런치와 작업 브런치 두개의 브런치로 관리하고 있습니다. CI 파이프라인은 main 브랜치에 pull request가 발생하였을 때 trigger 되고, CD 파이프라인은 main 브랜치에 push 되었을 때 trigger 됩니다.

논의하고자 하는 점은 CD 파이프라인을 언제 적용시켜야 하는가입니다. 그 이유는 만약 push되었을 때 CD Pipeline이 fail 되면 최신 버전이 정상적으로 반영되지 않는 문제가 발생합니다. 그렇다면 이 문제에 대해서 어떻게 해결해야 할까요?

제가 생각한 방법은 아래와 같습니다.

우선 제가 생각한 방법은 위 3가지 인데, 혹시 더 좋은 방법이 있다면 의견을 남겨주셔도 좋을 것 같습니다!

🔧 z-index값 수정

수정 목적

• 불분명한 z-index값 통일

수정 코드

• src/shared/ui/backdrop/Backdrop.scss
• src/shared/ui/modal/ModalOverlay.scss
• 기타 z-index값 사용 scss파일

할 일 목록

• 어떤 파일이 위에 출력되어야 할지 계층별 분류
• 계층에 따라 z-index값 수정

설명

• 계층에 따라 z-index값이 통일되어 있지 않아, 오류발생 가능성 존재

🔧 SVG Sprite를 활용한 SVG 관리

수정 목적

SVG Sprite 적용

수정 코드

import BookmarkIcon from '@/shared/ui/icon/assets/bookmark_icon.svg?react';
import ChatIcon from '@/shared/ui/icon/assets/chat_icon.svg?react';
import KebabMenuIcon from '@/shared/ui/icon/assets/kebab_menu_icon.svg?react';
import LikeIcon from '@/shared/ui/icon/assets/like_icon.svg?react';
import SharedIcon from '@/shared/ui/icon/assets/share_icon.svg?react';

피드 메인 페이지에서 위와 같이 SVG를 가져와서 사용하고 있는데, 위 부분을 아마 다음과 같이 사용할 예정입니다.

import SvgIcon from '@/shared/ui';

<Icon icon="bookmark" size="20" color="red" />

할 일 목록

• SVG Box의 크기를 디바이스에 맞게 반응형 구성 - 일관성 보장
• SVG Sprite 기법 적용 - 일관성 및 Public API 적용

설명

현재 SVG를 사용함에 있어 아래와 같은 문제가 발생하고 있습니다.

1. 일관성있게 관리가 되지 않는다.
2. 현재 아키텍처에서 추구하는 Public API에 대한 적용이 이루어지지 않고 있다.

실제로 아이콘을 불러올 때 이런식으로 svg 위치 자체를 가져와서 사용하고 있습니다.

✨ 피드 신고하기 UI 수정

추가할 기능

• 신고하기 버튼 클릭 후 UI 혹은 토스트 렌더링
• 신고하기 버튼 클릭 시 에러가 발생할 경우에 대한 UI 및 서버 재요청 기능 등

할 일 목록

• 신고하기 버튼 클릭 시 "신고가 접수되었어요" 토스트 표시
• 해당 게시물 숨기기 클릭 후, 신고하기 버튼 클릭 시 토스트 메시지 및 게시물 숨기기
• 신고하기 체크박스 체크되어 있지 않은 상태로 시작
• 신고하기 실패 시, 기존 상태 유지 및 "다시 시도해 주세요" 토스트 표시

설명

피드 신고하기 기능의 UI가 현재 수정중에 있어 UI 수정 작업에 대해 이슈로 등록해두고, UI가 완성되는 대로 반영 예정

Virtual Scroll

현재 화면에 보여지는 피드의 개수와 달리, 모든 피드 데이터가 DOM에 그려지고 있습니다. 이는 아이폰을 사용하는 유저의 입장에서 다음과 같은 영향을 끼칠 수 있습니다.

1. 성능 저하
2. 메모리 사용 증가
3. 응답성 저하 -> 앱 멈춤

이를 Virtual Scroll을 기법을 적용하여 화면에 보이는 부분만 동적으로 렌더링할 수 있도록
최적화 하겠습니다.

✨ User API 닉네임 / 이름 분리

추가할 기능

• User API에 닉네임과 이름 추가
• 추가한 사항에 따라 기존 로직 수정

할 일 목록

• User API 닉네임, 이름 분리
• 기존 User API 사용 로직 수정

설명

• User API에 닉네임과 이름이 별개로 되어 있지않고 name이라는 하나의 키워드만 있습니다.

🔧 Basic, Active 버튼 컴포넌트에 대한 폰트 설정

수정 목적

현재 shared에 위치한 공용 버튼 컴포넌트들에 대한 폰트 적용

수정 코드

• ActiveButton.scss
• BasicButton.scss

할 일 목록

• 버튼 클래스들에 대한 폰트 클래스 추가

설명

#31 에서 폰트 클래스가 중복으로 처리되는 문제를 해결하면서, 기존에 Basic 버튼과 Active 버튼 클래스에 적용되고 있었던 폰트들이 제거가 되었습니다. 이에 각 버튼 클래스들에 대해 폰트 클래스를 적용 필요

🔧 의존성 관리 도구 변경

수정 목적

의존성 관리를 더욱 효율적으로 함과 동시에 Zero-install을 통한 Build time 증가

수정 내용

• node_modules -> yarn PnP

할 일 목록

• node_modules -> yarn PnP 변경
• zero-install 설정
• CI/CD Pipeline 수정

설명

아직까지는 프로젝트의 규모가 그렇게 크지 않아, node_modules을 이용한 의존성 관리와 yarn PnP를 이용한 의존성 관리에 큰 차이가 없습니다.

하지만 프로젝트의 규모가 커짐에 따라 node_modules를 이용하는 방법은 의존성 관리에 큰 복잡성이 따르게 됩니다. 이에 yarn PnP를 통해 더욱 효율적인 의존성 관리를 하고자 합니다.

또한 yarn PnP를 이용하게 되면 zero-install을 도입할 수 있어, CI/CD Build Time의 증가까지 기대할 수 있습니다.

중요하지만 긴급하지는 않은 사항이라고 생각하여, Jira Confluence table에 (중요함-긴급하지 않음)에 추가하였습니다.

참고 문서: https://toss.tech/article/node-modules-and-yarn-berry

🐛 BottomSheetModal 구분선 오류

버그 내용

• BottomSheetModal의 구분선이 0.5px로 정의되어 있음, 하지만 브라우저에서 0.5px가 정상적으로 출력 되지 않음

버그 위치

• shared/ui/modal/BottomSheetModal
• widgets/feed-main-list/ui/FeedMainList.scss
• widgets/feed-main-list/ui/SkeletonFeedMainList.scss

할일

• 에러 원인 파악 후 정상적으로 출력되도록 수정
• App 내부에서도 같은 현상 발생하는지 확인
• 만약 0.5px 설정 자체가 불가능하다면, 디자인팀에 수정 요청

🐛 queryClient 테스트 에러

버그 내용

기존에 generateQueryClient 함수를 만들어두고, 해당 함수를 통해 QueryClient를 생성하여 테스팅 환경에서 렌더링을 진행하고 있었습니다. 근데 #47 에서 queryClient를 shared로 이동하고 테스팅 환경에서도 동일한 queryClient를 적용하려고 하니 에러가 발생하였습니다.

버그 위치

• src/shared/tests/setup.tsx

재현

할일

• 에러가 발생한 원인을 자세하게 분석한다.
• 에러를 해결한다.

🔧 공용 타입 위치 이동

수정 목적

shared 내부에서 공용 타입 관리

수정 코드

• Feed, Comment, User 등의 타입 위치 이동

할 일 목록

• 타입 shared로 위치 이동
• 해당 타입들을 사용하고 있는 파일들에 대해 import 수정

설명

기존에 mocking API에 사용되는 부분은 production에 포함되지 않는 부분이라 아예 배제하고 타입을 정의하였었습니다. 하지만 이렇게 작업을 하게 되니, type에 대해 중복이 발생하는 문제가 발생하였습니다.

그래서 아예 타입 자체를 shared에 두고 mocks와 프로젝트에서 사용하고자 합니다.

🔧 공용 컴포넌트 리팩토링

수정 목적

공용 컴포넌트 리팩토링

수정 코드

• src/shared/ui

할 일 목록

• #60
• #61

설명

현재 공용 컴포넌트가 공용 컴포넌트로서의 역할을 온전히 수행하지 못하고 있는 것 같습니다.

export type ActiveStyle =
  | 'confirm h4semi'
  | 'follow-sm b2semi'
  | 'follow-lg b1semi';

export const ActiveButton = ({
  onClick,
  styleClass,
  isDisabled,
  children,
}: ActiveButtonProps) => {
  const sytleClassname = isDisabled ? styleClass : `${styleClass}-disabled`; // 🚨 폰트 비활성화

  return (
    <button
      onClick={onClick}
      className={`${sytleClassname}`}
      disabled={isDisabled}
    >
      {children}
    </button>
  );
};

만일 ActiveButton을 활용하는 도중 버튼이 비활성화되게 되는 경우 폰트 클래스가 정상적으로 적용되지 않습니다.

• 폰트가 비활성화 되는 문제
• 신고하기 버튼이 색상이 유효하지 않음
• 버튼에 대한 타입을 지정해줄 수 없음
• onExecute 메서드의 타입을 변경해줘야함.

🔧 피드 신고하기 Props Drilling

수정 목적

신고하기 API를 활용하기 위해 Props로 전달해주는 과정에서 Props Drilling이 발생하여 이 문제를 해결하고자 함.

수정 코드

• src/widgets/feed-main-list/ui/Feed.tsx
• src/widgets/feed-kebab/ui/FeedKebabButton.tsx
• src/widgets/feed-kebab/ui/KebabMenu.tsx
• src/features/feed-reports/ui/FeedReportsForm.tsx
• src/features/feed-reports/api/useSubmitReports.tsx

할 일 목록

• Props Drilling 문제 해결하기
• 동시에 여러 피드의 KebabMenuList를 펼칠 수 있는 문제 해결하기

설명

현재 신고하기 API를 적용하는 부분에 있어 다음과 같이 props drilling이 발생하고 있습니다.

Feed -> FeedKebabButton -> KebabMenu -> FeedReportsForm -> useSubmitReports

위와 같은 컴포넌트의 연결은 Props Drilling으로 인한 컴포넌트들의 결합성이 강해져서, 수정에 어려움을 겪을 수 있습니다.

제가 생각한 방법은 Zustand를 이용하여 feedId와 onClose를 전역 상태로 관리하는 방법입니다! 아직 구체적인 방안에 대해서 계획하지는 않았지만, 혹시 좋은 의견 있으시다면 의견 제시해주시면 감사하겠습니다!

🐛 iOS factor 적용 시 디자인 깨짐 현상

버그 내용

iOS Factor를 WebView에 그대로 가져와서 적용하였더니, Web에서는 디자인이 깨지는 문제가 발생하였습니다.

버그 위치

branch name: fix/issue-35-responsive-design

• src/app/styles/_fonts.scss
• src/shared/styles/_box.scss

재현

iPhone SE 1 을 기준으로 했을 때는 큰 이상이 없었지만, iPhone SE 3 그 이상으로 height 값이 커짐에 따라 디자인이 깨지는 문제 발생

논의할 점

1. 모든 기기에 대한 factor 값을 web에 맞춰 재 계산하여 적용한다. (프론트가 너무 힘들 수도)
2. 아이폰과 아이패드 2가지에 대해서만 디자인 요소 값을 계산하여 적용한다. (디자이너가 힘들 수도)
3. 그냥 모든 기기에 동일한 디자인을 제공한다. (모두가 행복한 길)

🐛 UI 깨짐

버그 내용

• Feed Footer의 아이콘이 숫자에 따라 움직임
• Profile Count의 구분선이 숫자에 따라 움직임

버그 위치

• src/widgets/feed-main-list/ui/Feed.scss
• src/widgets/profile-user/ui/ProfileCount.scss

재현

할일

• PM/디자인팀에 숫자가 커질 경우 1천, 1만 or 1K, 1M 등 줄임말로 표기하도록 제안
• 너비를 주는 방식으로 수정

🐛 Params URL에 Icon Sprite 미 적용 버그

버그 내용

Params가 포함되지 않는 URL에서는 정상적으로 Icon Sprite가 적용되고 있었습니다. 하지만 Params가 포함된 URL(feeds/:feedId) 등에서는 Icon이 정상적으로 적용되지 않는 문제가 발생하였습니다.

버그 위치

• Icon 컴포넌트를 사용하는 장소

재현

• Params URL을 router에 등록하고, 해당 페이지로 이동하면 다음과 같이 svg가 표시되지 않는 것을 확인할 수 있습니다.

할일

• 버그 원인 분석
• 버그 수정

✨ 알림 조회, 팔로우 요청 수락 / 거절 개발 검토

추가할 기능

알림 조회, 팔로우 요청 수락 / 거절

할 일 목록

아래 이벤트가 발생할 시, 알림이 실시간으로 이뤄져야 하는지 검토가 필요합니다.

• 작성한 글에 좋아요를 눌렀을 시
• 작성한 글에 댓글이 작성되었을 시
• 팔로우 요청이 일어났을 시
• 팔로우 수락/거절이 일어났을 시

설명

현재 FooterNavbar를 제외한 Feed page의 모든 기능을 우선 WebView로 개발하기로 합의한 상태입니다.

그 중 알림 조회, 팔로우 요청 수락 / 거절 기능이 포함되어 있습니다.
WebView에서 이 기능들을 어떻게 구현해야 할지에 대한 검토가 필요합니다.

🔧 FSD Architecture Public API 적용

수정 목적

현재 Public API가 적용되어 있지 않은 부분에 대해 Public API 적용

수정 코드

• 대부분의 폴더..

할 일 목록

• Slice 계층에 대해 Public API 적용
• Layer 계층에 대해 Public API 제거

설명

FSD Architecture가 문제를 해결하는 방식을 살펴보면, Public API를 통해 캡슐화를 달성한다고 나와있는 만큼 Public API은 해당 아키텍처에서 매우 중요하다고 생각합니다.

하지만 현재 프로젝트 코드 베이스를 살펴보면 대부분의 폴더에서 Public API가 적용되지 않고 있어서 이를 수정할 예정입니다.

• 참고: https://emewjin.github.io/feature-sliced-design/#fsd%EA%B0%80-%EB%AC%B8%EC%A0%9C%EB%A5%BC-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94-%EB%B0%A9%EC%8B%9D

✨ ProfileFeed 제거

추가할 기능

• ProfileFeed Interface 제거

할 일 목록

• ProfileFeed 제거
• ProfileFeed Interface를 사용하는 코드 수정

설명

• UI가 변경되며 Profile의 Feed와 MainFeed가 동일한 사항을 출력하도록 수정되었기에, 이에 따라 Profile Page에서 Feed를 출력할때 사용되는 ProfileFeed 항목 제거

🔧 피드 메인 페이지 고도화 작업

수정 목적

• Lighthouse 기준 Performance Score 개선

할 일 목록

• #88
• #90
• 이미지 CloudFront 적용
• 이미지 webp 적용

설명

현재 피드 메인 페이지, Lighthouse 기준 성능 점수가 55점이 나오고 있어 80점 이상을 목표로 리팩토링하겠습니다.

🔧현실적인 환경 구축을 위해 모든 API에 대해 delay 설정

수정 목적

현재 피드 데이터를 받아오기 위한 API에만 delay가 적용되어 있어, 모든 API에 대해 delay를 적용할 계획입니다.

수정 코드

• src/app/mocks/handler

할 일 목록

• Mocking Service Worker에 등록된 모든 API에 대한 지연 처리

설명

즉각적인 응답이 오면 개발 속도는 향상될 수 있으나, 에러 처리가 미흡해질 수 있다고 생각합니다.

이에 현실적인 환경 구축을 통해 API 응답 상황에 따른 처리를 위해 Mocking Service Worker에 등록된 모든 API에 대해 delay를 설정해 주어야 할 것 같습니다.

✨ 페이지 전환 Animation 추가

추가할 기능

• 페이지 전환 시 Animation 추가

할 일 목록

• 뒤로 가기 버튼을 눌러 전환 시 좌측에서 화면이 슬라이딩해 현재 화면을 덮도록
• 이 외 버튼으로 전환 시 우측에서 화면이 슬라이딩해 현재 화면을 덮도록

설명

iOS App에서 화면 전환 시 해당 Animation으로 화면이 전환되고 있기에, 통일감을 주기 위해서 구현

⚡ 이미지 lazy loading 처리

현재 피드 메인 페이지에서 모든 이미지를 렌더링하고 있어서, 이미지 지연 처리를 통해 성능을 개선하고자 합니다.

• 첫 번째 이미지는 렌더링
• 두 번째 이미지부터 지연 처리 적용

🐛 네트워크 불안정 토스트 메시지 관리

버그 내용

현재 네트워크 불안정 토스트 메시지가 모든 API에 대해 적용 가능한 것이 아닌, 무한 스크롤 관련 에러에서만 사용가능하다는 문제가 있었습니다.

그렇기에 다른 API들에 대해 타임아웃이 발생하게 될 경우에는 네트워크 에러 토스트를 사용할 수 없습니다.

버그 위치

• src/widgets/feed-main-list/ui/FeedMainList.tsx
• src/shared/ui/network-error-toast

재현

할일

• 에러 중앙화 관리
• 토스트 메시지 사용 편의성 향상

🐛 fonts 동작 오류

버그 내용

• 설정된 font가 의도한대로 동작하지 않음
  • font-weight 중 bold를 제외한 medium, regular, semi-bold가 적용되지 않음
  • letter-spacing 역시 %로 적용되지 않음
• font의 size에 반응형이 적용되어 있지 않음

버그 위치

• shared/styles/fonts.scss

할일

• font-weight이 정상적으로 동작하도록
• letter-spacing이 정상적으로 동작하도록
• font size가 기기 사이즈에 따라 변동되도록
• 폰트 클래스가 중복으로 처리되는 문제 발생 - #29

✨ 테스트 코드 리팩토링 및 구현

추가할 기능

• 피드 숨김에 대한 단위 테스트 및 통합 테스트
• 피드 신고에 대한 단위 테스트 및 통합 테스트
• 기존 테스트코드 리팩토링

할 일 목록

• 피드 숨기기 및 신고 단위 테스트
• 피드 신고 통합 테스트
• 기존 테스트코드 리팩토링

설명

기존에 작성한 테스트 코드가 단위 테스트인지, 통합 테스트인지에 대해 애매모호한 부분이 있었습니다. 이 부분에 대해서 경계를 명확히 하고 테스트 코드를 작성해야 할 것 같습니다.

🐛 피드 메인 페이지 시연 중 이슈

버그 내용

1. 피드 메인 페이지에서 스크롤 시 우측에 스크롤이 표시되는 문제
2. 피드 메인 페이지에서 스크롤 시 2 페이지부터 스켈레톤 UI가 표시되지 않는 문제
3. 피드 메인 페이지 시나리오 추가 (1 페이지 성공 -> 2 페이지 실패 -> 2 페이지 성공)

버그 위치

• src/widgets/feed-main-list/ui/FeedMainList.tsx

재현

1. 피드 메인 페이지에서 하단으로 스크롤
2. 피드 메인 페이지에서 하단으로 스크롤
3. 피드 리스트 요청에 대한 서버 응답 시간 delay를 2~4초로 랜덤으로 설정하고, timeout을 3초로 설정하여 시나리오를 확인할 예정

할일

• 피드 메인 페이지 스크롤 제거
• 피드 메인 페이지 스크롤 시 2페이지 이후에도 스켈레톤 UI 표시
• 피드 리스트 요청 랜덤 조정 및 시나리오 확인

🔧 가독성 향상을 위한 spriteMap 분리

수정 목적

• 가독성 향상을 위한 spriteMap 분리

수정 코드

• src/shared/ui/icon/consts/sprite.ts
• src/shared/ui/icon/ui/Icon.tsx

할 일 목록

• spriteMap을 특정 행위 혹은 목적에 따라 분리
• 분리된 spriteMap의 타입을 유추하여 IconComponent에 적용

설명

export type IconName =
  | 'back'
  | 'notification'
  | 'share'
  | 'kebab-menu'
  | 'writing'
  | 'bookmark'
  | 'pennyway-logo'
  | 'like'
  | 'chat'
  | 'search'
  | 'caution'
  | 'no-profile'
  | 'checkbox-circle_off'
  | 'checkbox-circle_on'
  | 'checkbox-square_on'
  | 'checkbox-square_off';

• 아이콘의 수가 많아짐에 따라 관리의 복잡성 ↑ 및 가독성 ↓

✨ User content 제거

추가할 기능

• User Interface 내 content 제거

할 일 목록

• User Interface 내 content 제거
• User Interface를 사용하는 코드 수정

설명

• UI가 변경되며 Webview에서 User가 상태메세지를 출력하지 않도록 수정되었기에, 이에 따라 User Interface에서 상태메세지를 담당하는 content 항목 제거