Refactor: image props 이름 수정, props 수정

TeamATM · Oct 22, 2023 · 364f3ec · 364f3ec
1 parent 50ba050
commit 364f3ec
Show file tree

Hide file tree

Showing 16 changed files with 35 additions and 39 deletions.
diff --git a/src/components/chat/Header.tsx b/src/components/chat/Header.tsx
@@ -4,19 +4,13 @@ import useSocketStore from '@/store/socket';
 import useChatStore from '@/store/chat';
 import color from '@/styles/color';
 import { useSession } from 'next-auth/react';
+import { CharacterStateProps } from '@/types/characterInfo';
 import FriendShip from './characterHeader/FriendShip';
 import CharacterInfo from './characterHeader/CharacterInfo';
 
-interface CharacterState {
-  characterId: number,
-  characterName: string,
-  hashTag: string,
-  imageUrl: string,
-}
-
 // TODO: Back 버튼을 누르면 지금 홈으로 돌아가지만 채팅 리스트뷰가 완성되면 그쪽으로 Link 될 예정
-const Header : FC<CharacterState> = ({
-  characterId, characterName, hashTag, imageUrl,
+const Header : FC<CharacterStateProps> = ({
+  characterId, characterName, hashTag, profileImageUrl,
 }) => {
   // TODO: 친밀도를 API로 받아와야 작업이 가능함!
   const [userStatus, setUserStatus] = useState({
@@ -42,7 +36,7 @@ const Header : FC<CharacterState> = ({
   }, [session]);
   return (
     <header css={headerCSS}>
-      <CharacterInfo imageUrl={imageUrl} characterName={characterName} hashTag={hashTag} link="/chats" />
+      <CharacterInfo profileImageUrl={profileImageUrl} characterName={characterName} hashTag={hashTag} link="/chats" />
       <FriendShip
         friendShipExp={userStatus.friendShipExp}
         maxFriendShipExp={userStatus.maxFriendShipExp}

diff --git a/src/components/chat/Main.tsx b/src/components/chat/Main.tsx
@@ -12,10 +12,10 @@ import Loading from '../common/dialog/Loading';
 interface MainProps {
   characterId: number,
   characterName: string,
-  imageUrl: string
+  profileImageUrl: string
 }
 
-const Main:FC<MainProps> = ({ characterId, characterName, imageUrl }) => {
+const Main:FC<MainProps> = ({ characterId, characterName, profileImageUrl }) => {
   const { chatContents, clearChatContents, initChatContents } = useChatStore();
   const messageEndRef = useRef<HTMLDivElement | null>(null);
   const [loadingHistory, setLoadingHistory] = useState(false);
@@ -42,7 +42,7 @@ const Main:FC<MainProps> = ({ characterId, characterName, imageUrl }) => {
             <CharacterSpeak
               key={chat.id}
               speaker={chat.speaker}
-              imageUrl={imageUrl}
+              profileImageUrl={profileImageUrl}
               content={chat.content}
               timestamp={chat.timestamp}
               loading={chat.loading}

diff --git a/src/components/chat/characterHeader/CharacterInfo.tsx b/src/components/chat/characterHeader/CharacterInfo.tsx
@@ -7,12 +7,12 @@ import color from '@/styles/color';
 interface CharacterInfoProps {
   characterName: string,
   hashTag: string,
-  imageUrl: string,
+  profileImageUrl: string,
   link: string,
 }
 
 const CharacterInfo: FC<CharacterInfoProps> = ({
-  characterName, hashTag, imageUrl, link,
+  characterName, hashTag, profileImageUrl, link,
 }) => (
   <>
     <Link href={link}>
@@ -28,7 +28,7 @@ const CharacterInfo: FC<CharacterInfoProps> = ({
     </Link>
     <div css={imageWrapperCSS}>
       <Image
-        src={imageUrl}
+        src={profileImageUrl}
         css={imageCSS}
         alt={`/${characterName}`}
         fill

diff --git a/src/components/chat/messageBox/CharacterSpeak.tsx b/src/components/chat/messageBox/CharacterSpeak.tsx
@@ -5,16 +5,16 @@ import LoadingContent from './characterChatContent/LoadingContent';
 import ChatContent from './characterChatContent/ChatContent';
 
 interface CharacterSpeakProps {
-  speaker:string, content: string, timestamp: number, imageUrl: string, loading: boolean,
+  speaker:string, content: string, timestamp: number, profileImageUrl: string, loading: boolean,
 }
 
 const CharacterSpeak: FC<CharacterSpeakProps> = ({
-  speaker, content, timestamp, imageUrl, loading = false,
+  speaker, content, timestamp, profileImageUrl, loading = false,
 }) => (
   <span css={characterSpeakCSS}>
     <div css={imageWrapperCSS}>
       <Image
-        src={imageUrl}
+        src={profileImageUrl}
         alt={speaker}
         css={imageCSS}
         fill

diff --git a/src/components/community/BoardList.tsx b/src/components/community/BoardList.tsx
@@ -30,10 +30,8 @@ const BoardList = () => {
             >
               <FriendInfo
                 characterName={`${characterInfo.characterName} 게시판`}
-                // TODO: 백엔드는 이미지를 뿌려라!
-                // imageUrl={characterInfo.profileUrl}
                 message={characterInfo.hashTag}
-                imageUrl={characterInfo.profileImageUrl}
+                profileImageUrl={characterInfo.profileImageUrl}
               />
             </FriendWrapper>
           </div>

diff --git a/src/components/community/CommunityHeader.tsx b/src/components/community/CommunityHeader.tsx
@@ -30,7 +30,7 @@ const CommunityHeader = () => {
           characterInfo
             ? (
               <CharacterInfo
-                imageUrl={characterInfo.profileImageUrl}
+                profileImageUrl={characterInfo.profileImageUrl}
                 characterName={`${characterInfo.characterName} 게시판`}
                 hashTag={characterInfo.hashTag}
                 link="/community"

diff --git a/src/components/community/PostHeader.tsx b/src/components/community/PostHeader.tsx
@@ -28,7 +28,7 @@ const PostHeader = () => {
           characterInfo
             ? (
               <CharacterInfo
-                imageUrl="/leeyj.png"
+                profileImageUrl="/leeyj.png"
                 characterName={`${characterInfo.characterName} 게시판`}
                 hashTag={characterInfo.hashTag}
                 link={`/community/${characterInfo.characterId}`}

diff --git a/src/components/friends/ChatLogs.tsx b/src/components/friends/ChatLogs.tsx
@@ -40,7 +40,7 @@ const ChatLogs = () => {
           <FriendInfo
             characterName={characterInfo.characterName}
             message={lastMessage.content}
-            imageUrl={characterInfo.profileImageUrl}
+            profileImageUrl={characterInfo.profileImageUrl}
           />
           <div css={subInfoWrapperCSS}>
             <TimeStamp timestamp={lastMessage.createdAt} />

diff --git a/src/components/friends/Friends.tsx b/src/components/friends/Friends.tsx
@@ -31,7 +31,7 @@ const Friends = () => {
           <FriendInfo
             characterName={characterInfo.characterName}
             message={characterInfo.statusMessage}
-            imageUrl={characterInfo.profileImageUrl}
+            profileImageUrl={characterInfo.profileImageUrl}
           />
           <FriendHashTag hashTag={characterInfo.hashTag} />
         </FriendWrapper>

diff --git a/src/components/friends/Recommends.tsx b/src/components/friends/Recommends.tsx
@@ -26,7 +26,7 @@ const Recommends = () => {
           characterId={characterInfo.characterId}
           hashTag={characterInfo.hashTag}
           statusMessage={characterInfo.statusMessage}
-          imageUrl={characterInfo.profileImageUrl}
+          profileImageUrl={characterInfo.profileImageUrl}
         />
       ))}
     </div>

diff --git a/src/components/friends/friend/FriendInfo.tsx b/src/components/friends/friend/FriendInfo.tsx
@@ -6,14 +6,14 @@ import color from '@/styles/color';
 interface FriendInfoProps {
   characterName: string,
   message: string,
-  imageUrl: string,
+  profileImageUrl: string,
 }
 
-const FriendInfo: FC<FriendInfoProps> = ({ characterName, message, imageUrl }) => (
+const FriendInfo: FC<FriendInfoProps> = ({ characterName, message, profileImageUrl }) => (
   <div css={css`display:flex; flex-direction:row;`}>
     <div css={imageWrapperCSS}>
       <Image
-        src={imageUrl}
+        src={profileImageUrl}
         alt={characterName}
         css={imageCSS}
         fill

diff --git a/src/components/friends/recommend/RecommendBox.tsx b/src/components/friends/recommend/RecommendBox.tsx
@@ -4,10 +4,10 @@ import Image from 'next/image';
 import Link from 'next/link';
 import styled from '@emotion/styled';
 import color from '@/styles/color';
-import { CharacterInfo } from '@/types/characterInfo';
+import { RecommendCharacterProps } from '@/types/characterInfo';
 
-const RecommendBox:FC<CharacterInfo> = ({
-  characterName, characterId, hashTag, statusMessage, imageUrl,
+const RecommendBox:FC<RecommendCharacterProps> = ({
+  characterName, characterId, hashTag, statusMessage, profileImageUrl: imageUrl,
 }) => (
   <Link href={`/profile/friends/${characterId}`} passHref legacyBehavior>
     <ResetLink>

diff --git a/src/components/profile/CharacterProfileInfo.tsx b/src/components/profile/CharacterProfileInfo.tsx
@@ -6,17 +6,17 @@ import color from '@/styles/color';
 interface CharacterProfileInfoProps {
   characterName: string,
   hashTag: string,
-  imageUrl: string,
+  profileImageUrl: string,
   statusMessage: string,
 }
 
 const CharacterProfileInfo: FC<CharacterProfileInfoProps> = ({
-  characterName, hashTag, imageUrl, statusMessage,
+  characterName, hashTag, profileImageUrl, statusMessage,
 }) => (
   <div css={profileInfoCSS}>
     <div css={imageWrapperCSS}>
       <Image
-        src={imageUrl}
+        src={profileImageUrl}
         css={imageCSS}
         alt={`/${characterName}`}
         fill

diff --git a/src/pages/chats/[character].tsx b/src/pages/chats/[character].tsx
@@ -39,14 +39,14 @@ const Character = () => {
               <div>
                 <Header
                   characterId={characterInfo.characterId}
-                  imageUrl={characterInfo.profileImageUrl}
+                  profileImageUrl={characterInfo.profileImageUrl}
                   characterName={characterInfo.characterName}
                   hashTag={characterInfo.hashTag}
                 />
                 <Main
                   characterId={characterInfo.characterId}
                   characterName={characterInfo.characterName}
-                  imageUrl={characterInfo.profileImageUrl}
+                  profileImageUrl={characterInfo.profileImageUrl}
                 />
               </div>
               <MessageInput

diff --git a/src/pages/profile/friends/[character_id].tsx b/src/pages/profile/friends/[character_id].tsx
@@ -44,7 +44,7 @@ const FriendProfile = () => {
               <CharacterProfileInfo
                 characterName={characterInfo.characterName}
                 hashTag={characterInfo.hashTag}
-                imageUrl={characterInfo.profileImageUrl}
+                profileImageUrl={characterInfo.profileImageUrl}
                 statusMessage={characterInfo.statusMessage}
               />
               <ProfileRouteButtons characterId={characterInfo.characterId} />

diff --git a/src/types/characterInfo.d.ts b/src/types/characterInfo.d.ts
@@ -6,3 +6,7 @@ export interface CharacterInfo {
   profileImageUrl: string,
   backgroundImageUrl: string,
 }
+
+export type CharacterStateProps = Omit<CharacterInfo, 'backgroundImageUrl' | 'statusMessage'>;
+
+export type RecommendCharacterProps = Omit<CharacterInfo, 'backgroundImageUrl'>;