Merge remote-tracking branch 'origin/feature/TargetPage' into TargetP…

…age/#145-targetpage-refactor
Team-Lecue · Jan 17, 2024 · 5bafcc6 · 5bafcc6
2 parents 681ec1b + 1ef1d30
commit 5bafcc6
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 94 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@sentry/vite-plugin": "^2.10.2",
     "axios": "^1.6.5",
     "eslint-plugin-react": "^7.33.2",
+    "grapheme-splitter": "^1.0.4",
     "lottie-react": "^2.4.0",
     "postcss": "^8.4.33",
     "postcss-styled-syntax": "^0.6.3",

diff --git a/src/CreateBook/components/CompleteButton/index.tsx b/src/CreateBook/components/CompleteButton/index.tsx
@@ -4,12 +4,17 @@ import * as S from './CompleteButton.style';
 interface CompleteButtonProps {
   isActive: boolean;
   onClick: () => void;
+  backgroundColor: string;
 }
 
-function CompleteButton({ isActive, onClick }: CompleteButtonProps) {
+function CompleteButton({
+  isActive,
+  onClick,
+  backgroundColor,
+}: CompleteButtonProps) {
   return (
     <S.CompleteButtonWrapper>
-      <Button variant="complete" disabled={!isActive} onClick={onClick}>
+      <Button variant="complete" disabled={!isActive} onClick={onClick} backgroundColor={backgroundColor}>
         완료
       </Button>
     </S.CompleteButtonWrapper>

diff --git a/src/CreateBook/components/SelectColor/SelectColor.style.ts b/src/CreateBook/components/SelectColor/SelectColor.style.ts
@@ -5,9 +5,9 @@ export const Wrapper = styled.article`
   gap: 1.6rem;
   flex-direction: column;
 `;
-export const Category = styled.p`
+export const Category = styled.p<{ variant: boolean }>`
   display: flex;
 
-  ${({ theme }) => theme.colors.BG};
+  color: ${({ theme, variant }) => (variant ? theme.colors.white : theme.colors.BG)};
   ${({ theme }) => theme.fonts.Title1_SB_16};
 `;
diff --git a/src/CreateBook/components/SelectColor/index.tsx b/src/CreateBook/components/SelectColor/index.tsx
@@ -12,7 +12,9 @@ function SelectColor({
 }: SelectColorProps) {
   return (
     <S.Wrapper>
-      <S.Category>레큐북 배경색</S.Category>
+      <S.Category variant={backgroundColor === '#191919'}>
+        레큐북 배경색
+      </S.Category>
       <ShowColorChart
         backgroundColor={backgroundColor}
         handleFn={(backgroundColor: string) =>

diff --git a/src/CreateBook/components/ShowColorChart/index.tsx b/src/CreateBook/components/ShowColorChart/index.tsx
@@ -11,17 +11,17 @@ function ShowColorChart({ backgroundColor, handleFn }: ShowColorChartProps) {
       <S.ColorWrapper>
         <S.Color
           type="button"
-          $colorCode={'#191919'}
-          onClick={() => handleFn('#191919')}
-          variant={backgroundColor === '#191919'}
+          $colorCode={'#F5F5F5'}
+          onClick={() => handleFn('#F5F5F5')}
+          variant={backgroundColor === '#F5F5F5'}
         ></S.Color>
       </S.ColorWrapper>
       <S.ColorWrapper>
         <S.Color
           type="button"
-          $colorCode={'#F5F5F5'}
-          onClick={() => handleFn('#F5F5F5')}
-          variant={backgroundColor === '#F5F5F5'}
+          $colorCode={'#191919'}
+          onClick={() => handleFn('#191919')}
+          variant={backgroundColor === '#191919'}
         ></S.Color>
       </S.ColorWrapper>
     </S.Wrapper>

diff --git a/src/CreateBook/page/CreateBook.style.ts b/src/CreateBook/page/CreateBook.style.ts
@@ -1,11 +1,13 @@
 import styled from '@emotion/styled';
 
-export const CreateBookWrapper = styled.section`
+export const CreateBookWrapper = styled.section<{ $backgroundColor: string }>`
   display: flex;
   flex-direction: column;
 
   width: 100vw;
   height: 100dvh;
+
+  background-color: ${({ $backgroundColor }) => $backgroundColor};
 `;
 
 export const CreateBookBodyWrapper = styled.div`
@@ -23,8 +25,9 @@ export const InputWrapper = styled.div`
   width: 100%;
 `;
 
-export const SectionTitle = styled.p`
-  color: ${({ theme }) => theme.colors.BG};
+export const SectionTitle = styled.p<{ variant: boolean }>`
+  color: ${({ theme, variant }) =>
+    variant ? theme.colors.white : theme.colors.BG};
 
   ${({ theme }) => theme.fonts.Head2_SB_18};
 `;

diff --git a/src/CreateBook/page/index.tsx b/src/CreateBook/page/index.tsx
@@ -12,7 +12,7 @@ import * as S from './CreateBook.style';
 function CreateBook() {
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
-  const [backgroundColor, setBackgroundColor] = useState('#191919');
+  const [backgroundColor, setBackgroundColor] = useState('#F5F5F5');
   const location = useLocation();
   const navigate = useNavigate();
   const { presignedFileName, name } = location.state || {};
@@ -31,16 +31,16 @@ function CreateBook() {
   };
 
   return (
-    <S.CreateBookWrapper>
+    <S.CreateBookWrapper $backgroundColor={backgroundColor}>
       <Header headerTitle="레큐북 만들기" />
       <S.CreateBookBodyWrapper>
         <S.InputWrapper>
           <S.BookInputWrapper>
-            <S.SectionTitle>레큐북 제목</S.SectionTitle>
+            <S.SectionTitle variant={backgroundColor==="#191919"}>레큐북 제목</S.SectionTitle>
             <BookInput title={title} changeTitle={(title) => setTitle(title)} />
           </S.BookInputWrapper>
           <S.BookInfoTextareaWrapper>
-            <S.SectionTitle>레큐북 소개</S.SectionTitle>
+            <S.SectionTitle variant={backgroundColor==="#191919"}>레큐북 소개</S.SectionTitle>
             <BookInfoTextarea
               description={description}
               changeDescription={(description) => setDescription(description)}
@@ -54,6 +54,7 @@ function CreateBook() {
           />
         </S.InputWrapper>
         <CompleteButton
+        backgroundColor={backgroundColor}
           isActive={title.length !== 0 && description.length !== 0}
           onClick={handleClickCompleteButton}
         />

diff --git a/src/LecueNote/components/WriteNote/index.tsx b/src/LecueNote/components/WriteNote/index.tsx
@@ -1,3 +1,4 @@
+import GraphemeSplitter from 'grapheme-splitter';
 import { useEffect, useState } from 'react';
 
 import { WriteNoteProps } from '../../type/lecueNoteType';
@@ -13,6 +14,8 @@ function WriteNote({
 }: WriteNoteProps) {
   const nickname = '와라라라랄라';
 
+  // 이모지 글자 수 세기 관련 라이브러리
+  const split = new GraphemeSplitter();
   const today = new Date();
   const [dateArr, setDateArr] = useState([0, 0, 0]);
 
@@ -33,7 +36,7 @@ function WriteNote({
           <S.Date>
             {dateArr[0]}.{dateArr[1]}.{dateArr[2]}
           </S.Date>
-          <S.Counter>({contents.length}/1000)</S.Counter>
+          <S.Counter>({split.splitGraphemes(contents).length}/1000)</S.Counter>
         </S.BottomContentsWrapper>
       </S.LecueNote>
       <S.Notice>*욕설/비속어는 자동 필터링됩니다.</S.Notice>

diff --git a/src/components/common/Button/Button.style.ts b/src/components/common/Button/Button.style.ts
@@ -2,13 +2,18 @@ import styled from '@emotion/styled';
 
 export type ButtonStyle = 'choose' | 'complete';
 
-export const CustomButton = styled.button<{ variant: ButtonStyle }>`
+export const CustomButton = styled.button<{
+  variant: ButtonStyle;
+  $bookBackgroundColor?: string;
+}>`
   width: 100%;
   height: 6rem;
 
   border-radius: 0.625rem;
-  background-color: ${({ theme, variant }) =>
-    variant === 'choose' ? theme.colors.key : theme.colors.BG};
+  background-color: ${({ theme, variant, $bookBackgroundColor }) =>
+    variant === 'choose' || $bookBackgroundColor === '#191919'
+      ? theme.colors.key
+      : theme.colors.BG};
   color: ${({ theme }) => theme.colors.white};
 
   ${({ theme }) => theme.fonts.Head2_SB_18};

diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
@@ -8,17 +8,19 @@ export interface ButtonProps
     'type' | 'disabled' | 'onClick'
   > {
   variant: S.ButtonStyle;
+  backgroundColor?: string;
   children: ReactNode;
 }
 
 function Button(props: ButtonProps) {
-  const { children, onClick, disabled, variant } = props;
+  const { children, onClick, disabled, variant, backgroundColor } = props;
   return (
     <S.CustomButton
       type="button"
       onClick={onClick}
       disabled={disabled}
       variant={variant}
+      $bookBackgroundColor={backgroundColor}
     >
       {children}
     </S.CustomButton>

diff --git a/src/components/common/Modal/CommonModalForm/index.tsx b/src/components/common/Modal/CommonModalForm/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { MODAL_CONTETNS } from '../constants/ModalContents';
 import * as S from './CommonModalForm.style';
@@ -9,7 +10,30 @@ interface CommonModalFormProps {
 }
 
 function CommonModalForm({ onClose, category }: CommonModalFormProps) {
+  const navigate = useNavigate();
   const [idx, setIdx] = useState(0);
+
+  const handleClickRightBtn = () => {
+    onClose();
+    switch (category) {
+      case 'note_complete':
+        break;
+      case 'note_escape':
+        break;
+      case 'book_escape':
+        break;
+      case 'book_create':
+        break;
+      case 'book_delete':
+        break;
+      case 'login':
+        navigate('/login');
+        break;
+      default:
+        break;
+    }
+  };
+
   useEffect(() => {
     switch (category) {
       case 'note_complete':
@@ -47,7 +71,11 @@ function CommonModalForm({ onClose, category }: CommonModalFormProps) {
             </S.Button>
           )}
 
-          <S.Button type="button" variant="continue" onClick={onClose}>
+          <S.Button
+            type="button"
+            variant="continue"
+            onClick={handleClickRightBtn}
+          >
             {MODAL_CONTETNS[idx].rightBtn}
           </S.Button>
         </S.BtnWrapper>