chore : 배포 환경에서 일기작성 이미지 깨지는 문제 해결 (#188)

* chore : 이미지 path 수정 * chore : 리엑션 이미지 경로 수정 * ci : ci 에러 수정
prgrms-fe-devcourse · Nov 5, 2024 · 52d29aa · 52d29aa
1 parent 66f9eff
commit 52d29aa
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 16 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -31,7 +31,11 @@ jobs:
 
             - name: Build project
               run: |
-                  REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }} yarn build
+                  REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }} \
+                  REACT_APP_SPOTIFY_CLIENT_ID=${{ secrets.REACT_APP_SPOTIFY_CLIENT_ID }} \
+                  REACT_APP_SPOTIFY_CLIENT_SECRET=${{ secrets.REACT_APP_SPOTIFY_CLIENT_SECRET }} \
+                  REACT_APP_YOUTUBE_API_KEY=${{ secrets.REACT_APP_YOUTUBE_API_KEY }} \
+                  yarn build
 
             - name: Deploy to S3
               uses: jakejarvis/s3-sync-action@v0.5.1

diff --git a/src/features/diary-write/visibility/ui/VisibilityButton.tsx b/src/features/diary-write/visibility/ui/VisibilityButton.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Container, StyledButton, StyledImg } from './VisibilityButton.styled';
 import { VisibilityButtonProps } from '../model/type';
+import privateIcon from '@/shared/assets/private.svg';
+import publickIcon from '@/shared/assets/public.svg';
 
 export const VisibilityButton = ({
     isPublic,
@@ -16,7 +18,7 @@ export const VisibilityButton = ({
                 aria-label={isPublic ? '공개' : '비공개'}
             >
                 <StyledImg
-                    src={isPublic ? '/public.svg' : '/private.svg'}
+                    src={isPublic ? `${publickIcon}` : `${privateIcon}`}
                     alt={isPublic ? '공개' : '비공개'}
                 />
             </StyledButton>

diff --git a/src/shared/EmotionButtonList/ui/EmotionButtonList.tsx b/src/shared/EmotionButtonList/ui/EmotionButtonList.tsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { StyledEmotionButtonList } from './EmotionButtonList.styled';
 import EmotionButton from '../../EmotionButton/ui/EmotionButton';
 import { Emotions } from '../../model/EmotionEnum';
+import { useToastStore } from '@/features/Toast/hooks/useToastStore';
+import { emotionMap } from '../../model/getEmotionPath';
 
 interface EmotionListProps {
     isPrimary: boolean;
@@ -15,20 +17,14 @@ interface EmotionListProps {
  * 대표 감정 모드와 서브 감정 모드를 지원하며, 초기 선택된 감정을 설정하고 최대 선택 가능 수를 제한할 수 있습니다.
  */
 
-/* ***********************************************************
-TODO - 해결
-SelectEmotionContainer.tsx:27 Warning: Cannot update a component (`SelectEmotionContainer`) while rendering a different component (`EmotionList`). To locate the bad setState() call inside `EmotionList`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
-    at EmotionList
- ********************************************************** */
-
 const EmotionList: React.FC<EmotionListProps> = ({
     isPrimary = true,
     maxSelections,
     initialSelectedEmotions = [],
     onSelectionChange
 }) => {
     const [selectedEmotions, setSelectedEmotions] = useState<Emotions[]>([]);
-
+    const { addToast } = useToastStore();
     useEffect(() => {
         if (isPrimary) {
             if (initialSelectedEmotions.length > 0) {
@@ -61,7 +57,10 @@ const EmotionList: React.FC<EmotionListProps> = ({
                 } else if (prev.length < maxSelections) {
                     newSelection = [...prev, emotion];
                 } else {
-                    alert(`최대 ${maxSelections}개 감정만 선택할 수 있습니다.`);
+                    addToast(
+                        `최대 ${maxSelections}개 감정만 선택 가능합니다.`,
+                        'error'
+                    );
                     newSelection = prev;
                 }
             }

diff --git a/src/shared/EmotionIcon/ui/EmotionIcon.tsx b/src/shared/EmotionIcon/ui/EmotionIcon.tsx
@@ -1,7 +1,7 @@
-/* eslint-disable react/require-default-props */
 import React from 'react';
 import { Emotions, getEmotionInfo } from '../../model/EmotionEnum';
 import { StyledEmotionIcon } from './EmotionIcon.styled';
+import { emotionMap } from '@/shared/model/getEmotionPath';
 
 interface EmotionProps {
     emotion: Emotions;
@@ -16,11 +16,11 @@ export const EmotionIcon = ({
     width = '100px',
     height = '100px'
 }: EmotionProps) => {
-    const { description, imagePath } = getEmotionInfo(emotion);
+    const { description } = getEmotionInfo(emotion);
 
     return (
         <StyledEmotionIcon width={width} height={height}>
-            <img src={imagePath} alt={description} />
+            <img src={emotionMap[description]} alt={description} />
         </StyledEmotionIcon>
     );
 };

diff --git a/src/shared/model/EmotionEnum.ts b/src/shared/model/EmotionEnum.ts
@@ -24,7 +24,7 @@ export enum Emotions {
 
 export const emotionDescriptions: Record<Emotions, string> = {
     [Emotions.Happy]: '기뻐요',
-    [Emotions.Confident]: '자신있어요',
+    [Emotions.Confident]: '자신 있어요',
     [Emotions.Grateful]: '감사해요',
     [Emotions.Comfortable]: '편안해요',
     [Emotions.Fun]: '신이나요',

diff --git a/src/shared/model/getEmotionPath.ts b/src/shared/model/getEmotionPath.ts
@@ -22,7 +22,7 @@ import emojiShocked from '@/shared/assets/emoji/emoji_shocked.svg';
 import emojiAwkward from '@/shared/assets/emoji/emoji_awkward.svg';
 
 // 감정에 따른 SVG 매핑 객체
-const emotionMap: Record<string, string> = {
+export const emotionMap: Record<string, string> = {
     기뻐요: emojiHappy,
     '자신 있어요': emojiConfident,
     감사해요: emojiGrateful,

diff --git a/src/widgets/date-picker/ui/DatePicker.tsx b/src/widgets/date-picker/ui/DatePicker.tsx
@@ -9,6 +9,7 @@ import {
 import moment from 'moment';
 import { DatePickerProps } from '../model/type';
 import { setDateFormat } from './setDateFormat';
+import calederIcon from '@/shared/assets/calendar_icon.svg';
 
 export const DatePicker: React.FC<DatePickerProps> = ({
     initialDate,
@@ -55,7 +56,7 @@ export const DatePicker: React.FC<DatePickerProps> = ({
     return (
         <StyledCalendarWrapper>
             <StyledButton onClick={toggleModal}>
-                <StyledImg src="/calendar_icon.svg" />
+                <StyledImg src={calederIcon} />
             </StyledButton>
             {isModalOpen && (
                 <StyledCalendar