[FE] FEAT: MAIN화면 재화 소개 추가#1681 (#1686)

* [FE] FEAT: main layout 설정 #1681 * [FE] FEAT: coinDolar.svg 아이콘 추가 #1681 * Co-authored-by: Gyeong A Koh <[email protected]> * FE] FEAT: ManualModal 동전 사용법 모달 수정 #1681 * [FE] FEAT: main ui 티켓 디자인 v1 #1681 * FE] FEAT: ManualModal 아이템 내용추가 #1681 * [FE] FEAT: CSS clip-path 를 사용해 STORE MandualContentBox 생성 #1681 * [FE] FIX: ManualContentBox 의 CSS 모듈화 #1681 * [FE] FIX: ManualContentBox 의 CSS Map 생성 #1681 * [FE] FIX: CSS Map 을 사용해 ManualContentBoxStyled 간소화 #1681 * [FE] FEAT: 티켓 이미지 그림자 적용 #1681 * [FE] FEAT: ManualModal 아이콘 호버 효과 적용 #1681 * [FE] FEAT: 티켓 이미지 반응형 적용 #1681 * [FE] FEAT: coin manual color 적용 #1681 * [FE] FEAT: ItemContentsStyled width 수정 #1681 * [FE] FEAT: new! #1681 * [FE] FEAT: 아이콘 resizing #1681 * [FE] DOCS: 바뀐 정책에 따라 슬랙 알림 연체 문구 수정#1681 * [FE] DOCS: 슬랙 알림 문구 볼드체 적용되게 띄어쓰기 #1681 * [FE] FEAT: 사물함 대여 모달에 연체주의사항 문구 추가 #1681 * [FE] FEAT: 사물함 대여 모달에 연체주의사항 문구 띄어쓰기 수정 #1681 * [FE] FEAT: 불필요한 파일 및 코드 삭제, storeItems 배열을 manualItemsData 객체로 수정 및 적용 #1681 * [FE] FIX: ManualModal 아이템 아이콘 그림자 잘림 해결, 오타 수정 #1681 * [FE] FEAT: 사용 안하는 css 제거 #1681 --------- Co-authored-by: Minkyu01 <[email protected]> Co-authored-by: gykoh42 <[email protected]> Co-authored-by: jiminChoi <[email protected]> Co-authored-by: jusohn Eddie Sohn <[email protected]> Co-authored-by: jnkeniaem <[email protected]>
innovationacademy-kr · Oct 8, 2024 · 9720bc6 · 9720bc6
1 parent 9539f9c
commit 9720bc6
Show file tree

Hide file tree

Showing 18 changed files with 449 additions and 139 deletions.
diff --git a/config b/config
diff --git a/frontend/src/Cabinet/assets/data/ManualContent.ts b/frontend/src/Cabinet/assets/data/ManualContent.ts
@@ -1,9 +1,13 @@
+import { ItemIconMap } from "@/Cabinet/assets/data/maps";
 import { ReactComponent as ClockImg } from "@/Cabinet/assets/images/clock.svg";
 import { ReactComponent as ClubIcon } from "@/Cabinet/assets/images/clubIcon.svg";
+import { ReactComponent as DollarImg } from "@/Cabinet/assets/images/coinDolar.svg";
 import { ReactComponent as ExtensionIcon } from "@/Cabinet/assets/images/extension.svg";
 import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIcon.svg";
 import { ReactComponent as ShareIcon } from "@/Cabinet/assets/images/shareIcon.svg";
+import { ReactComponent as StoreImg } from "@/Cabinet/assets/images/storeIconGray.svg";
 import ContentStatus from "@/Cabinet/types/enum/content.status.enum";
+import { StoreItemType } from "@/Cabinet/types/enum/store.enum";
 
 interface ContentStatusData {
   contentTitle: string;
@@ -15,6 +19,12 @@ interface ContentStatusData {
   pointColor: string;
 }
 
+interface ItemStatusData {
+  icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  title: string;
+  content: string;
+}
+
 export const manualContentData: Record<ContentStatus, ContentStatusData> = {
   [ContentStatus.PRIVATE]: {
     contentTitle: "개인 사물함",
@@ -153,4 +163,107 @@ export const manualContentData: Record<ContentStatus, ContentStatusData> = {
     </div>`,
     pointColor: "var(--normal-text-color)",
   },
+  [ContentStatus.COIN]: {
+    contentTitle: `코인 사용법`,
+    iconComponent: DollarImg,
+    background: "var(--card-bg-color)",
+    contentText: `<span>◦ 160시간 출석하기</span><br/>
+    <div>
+    42 출석 <strong>160시간</strong>을 채운다면 다음달 2일에 <strong>2000까비</strong>가 지급됩니다.<br />
+    <br />
+    </div>
+    <span>◦ 동전줍기</span><br/>
+    <div>
+    Cabi 홈페이지에 접속해, <strong>하루에 한 번</strong> 동전을 주울 수 있습니다.<br />
+    한 달 동안 20개의 코인을 모두 줍는다면 <strong>랜덤 보상</strong>이 주어집니다.<br />
+    <br />
+    </div>
+    <span>◦ 수요지식회 발표하기</span><br/>
+    <div>
+    수요지식회 발표자 분께 <strong>1000까비</strong>를 지급해 드립니다.<br />
+    수요지식회 신청은 왼쪽 상단의<strong>수요지식회 홈페이지</strong>에서 신청할 수 있습니다.<br />
+    </div>
+
+    `,
+    pointColor: "var(--sys-default-main-color)",
+  },
+  [ContentStatus.STORE]: {
+    contentTitle: "까비 상점 OPEN!",
+    iconComponent: StoreImg,
+    background:
+      "linear-gradient(to bottom, var(--ref-purple-400), var(--ref-purple-600))",
+    contentText: `
+  `,
+    pointColor: "var(--white-text-with-bg-color)",
+  },
+};
+
+export const manualItemsData: Record<StoreItemType, ItemStatusData> = {
+  [StoreItemType.EXTENSION]: {
+    icon: ItemIconMap.EXTENSION,
+    title: "연장권",
+    content: `
+  <strong>store</strong> 탭을 눌러 연장권 구매하기 버튼을 클릭 후 <strong>3일</strong>, <strong>15일</strong>, <strong>31일</strong> 단위로 구매할 수 있습니다.<br/>
+  구매한 아이템은 <strong>인벤토리</strong> 탭에서 확인할 수 있습니다.<br/>
+  <br/>
+  <span>◦ 사용방법</span><br/>
+  <div>
+  사물함을 대여한 상태로, <strong>상단 오른쪽의 상자 아이콘</strong>을 누르면 현재 자신의 <strong>사물함의 정보</strong>를 볼 수 있습니다.<br/>
+  <strong>연장권 사용하기</strong> 버튼을 눌러 보유한 연장권 중 원하는 <strong>타입을 선택</strong> 후 사용합니다.<br/>
+  이미 사용한 연장권은 취소할 수 없습니다.<br/>
+  공유사물함의 모든 인원이 연장권을 사용할 수 있지만, <strong>남은 인원이 한 명인 경우 연장권을 사용할 수 없습니다.</strong>
+  </div>
+  `,
+  },
+  [StoreItemType.SWAP]: {
+    icon: ItemIconMap.SWAP,
+    title: "이사권",
+    content: `
+  <strong></strong>
+  기존 일주일에 한 번 가능했던 이사하기 기능을 <strong>제한 없이 자유롭게</strong> 사용할 수 있습니다.<br/>
+  현재 이용중인 사물함의 <strong>대여 기간을 유지</strong>한 채 다른 사물함으로 이사할 수 있습니다.<br/>
+  store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다.
+  <br/>
+  <span>◦ 사용방법</span><br/>
+  <div>
+  <strong>개인 사물함을 이용중인 사용자</strong>만 이사권을 사용할 수 있습니다.<br/>
+  아이템을 보유한 상태로 <strong>비어있는 개인 사물함</strong>을 눌렀을 때 이사하기 버튼이 활성화됩니다.<br/>
+  이미 사용한 이사권은 취소할 수 없습니다.<br/>
+  
+  </div>
+  `,
+  },
+  [StoreItemType.ALARM]: {
+    icon: ItemIconMap.ALARM,
+    title: "알림 등록권",
+    content: `
+  내가 원하는 섹션에 <strong>빈 자리</strong>가 나온다면 알림을 받을 수 있습니다.<br/>
+  <strong>개인사물함</strong>에 대해서만 알림을 받을 수 있습니다.<br/>
+  store 탭에서 구매할 수 있으며, 인벤토리 탭에서 구매한 아이템을 확인할 수 있습니다.<br/>
+  <br/>
+  <span>◦ 사용방법</span><br/>
+  <div>
+  아이템 구매 후 원하는 섹션으로 이동해 우측 상단의 <strong>하트 아이콘</strong>을 클릭합니다.<br/>
+  사용한 알림 등록권은 섹션을 변경하거나 취소할 수 없습니다.<br/>
+  알림등록권은 1회 알림 후 <strong>소멸</strong>됩니다.
+  </div>
+
+  `,
+  },
+  [StoreItemType.PENALTY]: {
+    icon: ItemIconMap.PENALTY,
+    title: "페널티 감면권",
+    content: `
+  페널티 감면권은 <strong>7일</strong>, <strong>15일</strong>, <strong>31일</strong> 단위로 구매할 수 있습니다. <br/>
+  구매한 아이템은 <strong>인벤토리</strong> 탭에서 확인할 수 있습니다.<br/>
+  <br/>
+  <span>◦ 사용방법</span><br/>
+  <div>
+  사물함 대여 불가 페널티가 부과된 유저라면 Profile 탭을 눌러 대여정보 상자 상단의 <br/>
+  <strong>페널티 감면권 사용하기 버튼</strong>이 활성화됩니다.<br/>
+  버튼을 눌러 내가 보유한 페널티 감면권을 선택하면, 남은 페널티 기간을 확인하실 수 있습니다.<br/>
+  연체된 사물함을 아직 반납하지 않았다면, 우선 <strong>반납하기 버튼</strong>을 눌러야 사용 버튼이 활성화됩니다.
+  </div>
+  `,
+  },
 };
diff --git a/frontend/src/Cabinet/assets/data/SlackAlarm.ts b/frontend/src/Cabinet/assets/data/SlackAlarm.ts
@@ -27,7 +27,7 @@ export const SlackAlarmTemplates: ISlackAlarmTemplate[] = [
 :happy_ccabi: 안녕하세요. Cabi 팀입니다! :happy_ccabi:
 :sad_ccabi: 서비스 개선을 위해, 서버를 점검하게 되었습니다. :sad_ccabi:
 :file_cabinet: 서비스 개선과 관련한 사항은  Cabi 채널 에서, :file_cabinet:
-:hammer_and_wrench: 보관물 관련 사항은 *데스크에 직접 문의*해주세요! :hammer_and_wrench:
+:hammer_and_wrench: 보관물 관련 사항은 *데스크에 직접 문의* 해주세요! :hammer_and_wrench:
 
 점검 일자 : 2024년 04월 02일 (화요일)
 점검 시간 : 15시 10분 ~ 완료 공지 시점까지
@@ -179,9 +179,9 @@ export const SlackAlarmTemplates: ISlackAlarmTemplate[] = [
   {
     title: "연체",
     content: `[CABI] 안녕하세요! :embarrassed_cabi:
-현재 이용 중이신 사물함이 연체인 것으로 확인되어 연락드립니다.
-장기간 연체시 서비스 이용에 대한 페널티, 혹은 :tig:가 부여될 수 있음을 인지해주세요!
-사물함의 대여 기간을 확인하신 후 반납 부탁드립니다.
-항상 저희 서비스를 이용해 주셔서 감사합니다:)`,
+    현재 이용 중이신 사물함이 *연체* 된 것으로 확인되어 연락드립니다.
+    *3주(21일) 이상 연체 시 미회수된 개인 물품은 폐기될 수 있음을 인지해 주세요!*
+    사물함의 대여 기간을 확인하신 후 반납 부탁드립니다.
+    항상 저희 서비스를 이용해 주셔서 감사합니다:)`,
   },
 ];
diff --git a/frontend/src/Cabinet/assets/data/maps.ts b/frontend/src/Cabinet/assets/data/maps.ts
@@ -1,12 +1,21 @@
+import { css } from "styled-components";
+import {
+  coinBoxStyles,
+  extensionBoxStyles,
+  inSessionBoxStyles,
+  pendingBoxStyles,
+  storeBoxStyles,
+} from "@/Cabinet/components/Home/ManualContentBoxStyles";
 import { ReactComponent as ClubIcon } from "@/Cabinet/assets/images/clubIcon.svg";
-import { ReactComponent as ExtensionImg } from "@/Cabinet/assets/images/extension.svg";
+import { ReactComponent as ExtensionImg } from "@/Cabinet/assets/images/storeExtension.svg";
 import { ReactComponent as PrivateIcon } from "@/Cabinet/assets/images/privateIcon.svg";
 import { ReactComponent as ShareIcon } from "@/Cabinet/assets/images/shareIcon.svg";
 import { ReactComponent as AlarmImg } from "@/Cabinet/assets/images/storeAlarm.svg";
 import { ReactComponent as SwapImg } from "@/Cabinet/assets/images/storeMove.svg";
 import { ReactComponent as PenaltyImg } from "@/Cabinet/assets/images/storePenalty.svg";
 import CabinetStatus from "@/Cabinet/types/enum/cabinet.status.enum";
 import CabinetType from "@/Cabinet/types/enum/cabinet.type.enum";
+import ContentStatus from "@/Cabinet/types/enum/content.status.enum";
 import {
   StoreExtensionType,
   StoreItemType,
@@ -267,3 +276,16 @@ export const ItemTypeExtensionMap = {
   [StoreExtensionType.EXTENSION_15]: "15일",
   [StoreExtensionType.EXTENSION_31]: "31일",
 };
+
+export const ContentStatusStylesMap: {
+  [key in ContentStatus]: any;
+} = {
+  [ContentStatus.EXTENSION]: extensionBoxStyles,
+  [ContentStatus.STORE]: storeBoxStyles,
+  [ContentStatus.COIN]: coinBoxStyles,
+  [ContentStatus.PENDING]: pendingBoxStyles,
+  [ContentStatus.IN_SESSION]: inSessionBoxStyles,
+  [ContentStatus.PRIVATE]: css``,
+  [ContentStatus.SHARE]: css``,
+  [ContentStatus.CLUB]: css``,
+};
diff --git a/frontend/src/Cabinet/assets/images/coinDolar.svg b/frontend/src/Cabinet/assets/images/coinDolar.svg
diff --git a/frontend/src/Cabinet/assets/images/storeAlarm.svg b/frontend/src/Cabinet/assets/images/storeAlarm.svg
diff --git a/frontend/src/Cabinet/assets/images/storeExtension.svg b/frontend/src/Cabinet/assets/images/storeExtension.svg
diff --git a/frontend/src/Cabinet/assets/images/storeMove.svg b/frontend/src/Cabinet/assets/images/storeMove.svg
diff --git a/frontend/src/Cabinet/assets/images/storePenalty.svg b/frontend/src/Cabinet/assets/images/storePenalty.svg