Skip to content

Commit

Permalink
Merge pull request #126 from official-Trippy/feature/#124
Browse files Browse the repository at this point in the history 
fix: 이미지 렌더링 오류 문제
  • Loading branch information
@jiohjung98
jiohjung98 authored Sep 21, 2024
2 parents 5c8a1dd + 80db733 commit 77d61ef
Show file tree
Hide file tree
Showing 16 changed files with 45 additions and 28 deletions.
9 changes: 9 additions & 0 deletions public/defaultImage.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions src/app/board/[boardId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { useFollowingStore } from "@/store/useFollowingStore";
import { doFollow, unfollow } from "@/services/follow";
import FollowButton from "@/components/followControl/followButton";
import { colorTicket } from "@/types/board";
import DefaultImage from '../../../../public/defaultImage.svg';

export default function BoardPage({ params }: { params: { boardId: number } }) {
const accessToken = Cookies.get("accessToken");
Expand Down Expand Up @@ -434,7 +435,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
<div className="flex items-center">
<Image
className="flex items-center"
src={memberDatas?.result.profileImageUrl}
src={memberDatas?.result.profileImageUrl || DefaultImage}
alt=""
width={28}
height={28}
Expand Down Expand Up @@ -568,7 +569,7 @@ export default function BoardPage({ params }: { params: { boardId: number } }) {
<div className="flex items-center">
<Image
className="flex items-center"
src={memberDatas?.result.profileImageUrl}
src={memberDatas?.result.profileImageUrl || DefaultImage}
alt=""
width={28}
height={28}
Expand Down
3 changes: 2 additions & 1 deletion src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Header from "@/components/shared/header/Header";
import getBoard, { getTotalBoardCount } from "@/services/board/get/getBoard";
import { useEffect, useState } from "react";
import { useUserStore } from "@/store/useUserStore";
import DefaultImage from '../../public/defaultImage.svg';


const PAGE_SIZE = 10;
Expand Down Expand Up @@ -89,7 +90,7 @@ export default function Home() {
<div className="flex flex-col h-full">
<Image className="w-full h-[26rem] rounded-[1rem]" src={posts.ticket.image.accessUri} alt="" width={300} height={260} />
<div className="p-[1rem] flex">
<Image src={posts.member.profileUrl} width={40} height={40} alt="" />
<Image src={posts.member.profileUrl || DefaultImage} width={40} height={40} alt="" />
<div className="flex flex-col justify-center pl-[1rem] text-[1.4rem]">
<span className="font-bold">{posts.member.nickName}</span>
<span className="font-medium">{formattedDateTime}</span>
Expand Down
15 changes: 5 additions & 10 deletions src/components/ootd/CommentSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import UpIcon from '../../../public/icon_up.svg';
import { Comment } from '@/types/ootd';
import { useRouter } from "next/navigation";
import Cookies from "js-cookie";
import DefaultImage from '../../../public/defaultImage.svg';


interface CommentSectionProps {
Expand Down Expand Up @@ -260,17 +261,15 @@ const renderComments = (comments: Comment[], depth = 0) => {
{/* 댓글 표시 */}
<div className='comment-section p-4 rounded-lg'>
<div className='flex flex-row items-center'>
{comment.member?.profileUrl && (
<div className="relative w-[28px] h-[28px]">
<Image
src={comment.member.profileUrl}
src={comment.member.profileUrl || DefaultImage}
alt="사용자 프로필"
layout="fill"
objectFit="cover"
className="rounded-full"
/>
</div>
)}
<div className="text-[#292929] text-sm font-semibold ml-[5px]">
{comment.member?.nickName}
</div>
Expand All @@ -291,17 +290,15 @@ const renderComments = (comments: Comment[], depth = 0) => {
{replyTo === comment.id && (
<div className={`flex flex-col p-4 mt-2 bg-white rounded-lg shadow-md ${depth === 0 ? 'mx-4 sm-700:mx-12' : ''}`}>
<div className='flex flex-row items-center flex-1'>
{userInfo?.profileImageUrl && (
<div className="relative w-[28px] h-[28px]">
<Image
src={userInfo.profileImageUrl}
src={userInfo.profileImageUrl || DefaultImage}
alt="사용자 프로필"
layout="fill"
objectFit="cover"
className="rounded-full"
/>
</div>
)}
<div className="text-[#292929] font-semibold ml-[8px]">{userInfo?.nickName}</div>
</div>
<div className='flex-1 flex gap-2'>
Expand Down Expand Up @@ -357,7 +354,7 @@ const renderComments = (comments: Comment[], depth = 0) => {
<div className="flex items-center justify-center py-2">
<div className="w-12 h-12 relative mr-4">
<Image
src={like.profileUrl}
src={like.profileUrl || DefaultImage}
alt="프로필 이미지"
layout="fill"
objectFit="cover"
Expand Down Expand Up @@ -472,16 +469,14 @@ const renderComments = (comments: Comment[], depth = 0) => {
<div className='w-[90%] flex flex-col'>
<div className='w-full flex-1'>
<div className='flex flex-row items-center'>
{userInfo?.profileImageUrl && (
<><div className="relative w-[28px] h-[28px]">
<Image
src={userInfo.profileImageUrl}
src={userInfo.profileImageUrl || DefaultImage}
alt="사용자"
layout="fill"
objectFit="cover"
className="rounded-full" />
</div></>
)}
<div className="text-[#292929] font-semibold ml-[8px]">{userInfo?.nickName}</div>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/ootd/OotdDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import BookmarkIcon from "../../../public/icon_bookmark.svg";
import BookmarkedIcon from "../../../public/bookmark-fill.svg";
import { addBookmark, deleteBookmark, fetchIsBookmarked } from "@/services/bookmark/bookmark";
import WeatherIcon from "../../../public/WeatherIcon.svg";
import DefaultImage from "../../../public/defaultImage.svg";

interface OotdDetailProps {
id: number;
Expand Down Expand Up @@ -205,7 +206,7 @@ const OotdDetail: React.FC<OotdDetailProps> = ({ id }) => {
<div className="flex items-center flex-shrink min-w-0 mr-auto">
<div className="relative w-[55px] h-[55px] flex-shrink-0">
<Image
src={ootdItem.member.profileUrl}
src={ootdItem.member.profileUrl || DefaultImage}
alt="사용자 프로필"
layout="fill"
objectFit="cover"
Expand Down
5 changes: 3 additions & 2 deletions src/components/pages/home/recentPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import heartImg from "@/dummy/heart.svg";
import moment from "@/dummy/moment.svg"
import { useQuery } from 'react-query';
import { getAllBoardCount, getFollowBoard } from '@/services/board/get/getBoard';
import DefaultImage from '../../../../public/defaultImage.svg';

interface HomeRecentProps {
allPosts: number;
Expand Down Expand Up @@ -157,7 +158,7 @@ function RecentPost({ allPosts, setAllPosts, boardData, userInfo, boardRefetch,
</div>
<div className="flex mt-[2rem]">
<div className="flex h-full text-[1.4rem] font-normal space-x-4 items-end mt-auto">
<Image src={posts.member.profileUrl} width={24} height={24} alt="" />
<Image src={posts.member.profileUrl || DefaultImage} width={24} height={24} alt="" />
<span className="">{posts.member.nickName}</span>
{/* <span className="">{formattedDate}</span> */}
</div>
Expand Down Expand Up @@ -223,7 +224,7 @@ function RecentPost({ allPosts, setAllPosts, boardData, userInfo, boardRefetch,
</div>
<div className="flex mt-[2rem]">
<div className="flex h-full text-[1.4rem] font-normal space-x-4 items-end mt-auto">
<Image src={posts.member.profileUrl} width={24} height={24} alt="" />
<Image src={posts.member.profileUrl || DefaultImage} width={24} height={24} alt="" />
<span className="">{posts.member.nickName}</span>
<span className="">{formattedDate}</span>
</div>
Expand Down
3 changes: 2 additions & 1 deletion src/components/pages/ootd/RecentOotdPost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { fetchLikedPosts } from '@/services/ootd.ts/ootdComments';
import HeartIcon from '../../../../public/icon_heart.svg';
import CustomSelect from './CustomSelect';
import { useUserStore } from '@/store/useUserStore';
import DefaultImage from '../../../../public/defaultImage.svg';

const PAGE_SIZE = 12;

Expand Down Expand Up @@ -209,7 +210,7 @@ const RecentOotdPost: React.FC = () => {
<div className="flex items-center pb-4">
<div className="relative w-[24px] h-[24px]">
<Image
src={item.member.profileUrl}
src={item.member.profileUrl || DefaultImage}
alt="Profile"
layout="fill"
objectFit="cover"
Expand Down
3 changes: 2 additions & 1 deletion src/components/profile/FollowList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useUserStore } from "@/store/useUserStore";
import { unfollow } from "@/services/follow";
import { ACCESS_TOKEN } from "@/constants/general";
import axios from '@/app/api/axios';
import DefaultImage from '../../../public/defaultImage.svg';

const backendUrl = process.env.NEXT_PUBLIC_BACKEND_URL;
const FollowList: React.FC<{
Expand Down Expand Up @@ -98,7 +99,7 @@ const FollowList: React.FC<{
<div className="flex items-center">
<div className="w-16 h-16 rounded-full overflow-hidden">
<img
src={user.profileImageUrl}
src={user.profileImageUrl || DefaultImage}
alt="Profile"
className="w-full h-full object-cover"
/>
Expand Down
3 changes: 2 additions & 1 deletion src/components/profile/MyBookmark.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import HeartIcon from '../../../public/icon_heart.svg';
import { fetchLikedPosts } from "@/services/ootd.ts/ootdComments";
import Cookies from 'js-cookie';
import { useRouter } from "next/navigation";
import DefaultImage from '../../../public/defaultImage.svg';

const PAGE_SIZE = 9;

Expand Down Expand Up @@ -112,7 +113,7 @@ const MyBookmark = () => {
)}
<div className="flex items-center my-4">
<img
src={item.member.profileUrl}
src={item.member.profileUrl || DefaultImage}
alt="User Profile"
className="w-10 h-10 rounded-full mr-2"
/>
Expand Down
3 changes: 2 additions & 1 deletion src/components/profile/MyMobileProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { MemberInfo } from "@/services/auth";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";
import { doFollow } from "@/services/follow";
import DefaultImage from '../../../public/defaultImage.svg';

const TABS = {
ALL: "ALL",
Expand Down Expand Up @@ -54,7 +55,7 @@ const MyMobileProfile: React.FC<{ setActiveTab: (tab: string) => void }> = ({
<h1 className="text-4xl text-white font-bold mt-2">{userData?.blogName}</h1>
<div className="relative my-4">
<Image
src={userData?.profileImageUrl}
src={userData?.profileImageUrl || DefaultImage}
alt="Profile"
width={80}
height={80}
Expand Down
3 changes: 2 additions & 1 deletion src/components/profile/MyOotd.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Image from "next/image";
import { useRouter } from "next/navigation";
import HeartIcon from '../../../public/icon_heart.svg';
import { fetchLikedPosts } from "@/services/ootd.ts/ootdComments";
import DefaultImage from '../../../public/defaultImage.svg';

const PAGE_SIZE = 12;

Expand Down Expand Up @@ -81,7 +82,7 @@ const MyOotd: React.FC<MyOotdProps> = ({ userInfo }) => {
)}
<div className="flex items-center my-4">
<img
src={userInfo?.profileImageUrl}
src={userInfo?.profileImageUrl || DefaultImage}
alt="User Profile"
className="w-10 h-10 rounded-full mr-2"
/>
Expand Down
3 changes: 2 additions & 1 deletion src/components/profile/UserInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { MemberInfo } from "@/services/auth";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";
import { doFollow } from "@/services/follow";
import DefaultImage from "../../../public/defaultImage.svg";

const TABS = {
ALL: "ALL",
Expand Down Expand Up @@ -53,7 +54,7 @@ const UserInformation: React.FC<{ setActiveTab: (tab: string) => void }> = ({
<div className="absolute top-[-150px] w-[200px] h-auto bg-white px-8 py-6 rounded-lg shadow-lg flex flex-col items-center">
<div className="relative my-4">
<Image
src={userData?.profileImageUrl}
src={userData?.profileImageUrl || DefaultImage}
alt="Profile"
width={80}
height={80}
Expand Down
4 changes: 2 additions & 2 deletions src/components/shared/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Image from "next/image";
import Link from "next/link";
import LogoHeader from "../../../../public/LogoHeader.svg";
import AlertImg from "../../../../public/AlertImg.png";
import Profile from "../../../../public/Profile.png";
import DefaultImage from "../../../../public/defaultImage.svg";
import searchIconMobile from "../../../../public/search_icon_mobile.svg"; // Mobile search icon
import alertIconMobile from "../../../../public/alert_icon_mobile.svg"; // Mobile alert icon
import UserModal from "@/components/userInfo/userModal";
Expand Down Expand Up @@ -131,7 +131,7 @@ const Header = () => {
>
<Image
className="my-auto"
src={userInfo.profileImageUrl || Profile}
src={userInfo.profileImageUrl || DefaultImage}
alt="profile"
width={32}
height={32}
Expand Down
3 changes: 2 additions & 1 deletion src/components/user/UserMobileProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { fetchUserProfile } from "@/services/ootd.ts/ootdGet";
import { UserProfileResponse } from "@/types/ootd";
import { useUserStore } from "@/store/useUserStore";
import FollowButton from "../followControl/followButton";
import DefaultImage from '../../../public/defaultImage.svg';

const TABS = {
FOLLOWER: "FOLLOWER",
Expand Down Expand Up @@ -57,7 +58,7 @@ const UserMobileProfle: React.FC<UserProfileProps> = ({
<h1 className="text-4xl text-white font-bold mt-2">{blogName}</h1>
<div className="relative mt-4 mb-4">
<Image
src={profileImageUrl}
src={profileImageUrl || DefaultImage}
alt="Profile"
width={48}
height={48}
Expand Down
3 changes: 2 additions & 1 deletion src/components/user/UserOotd.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { useRouter } from "next/navigation";
import HeartIcon from '../../../public/icon_heart.svg';
import Cookies from "js-cookie";
import { fetchLikedPosts } from "@/services/ootd.ts/ootdComments";
import DefaultImage from '../../../public/defaultImage.svg';

const PAGE_SIZE = 12;

Expand Down Expand Up @@ -85,7 +86,7 @@ const UserOotd: React.FC<UserOotdProps> = ({ memberId }) => {
)}
<div className="flex items-center my-4">
<img
src={item.member.profileUrl}
src={item.member.profileUrl || DefaultImage}
alt="User Profile"
className="w-10 h-10 rounded-full mr-2"
/>
Expand Down
5 changes: 3 additions & 2 deletions src/components/user/UserProfile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { fetchUserProfile } from "@/services/ootd.ts/ootdGet";
import { UserProfileResponse } from "@/types/ootd";
import { useUserStore } from "@/store/useUserStore";
import FollowButton from "../followControl/followButton";
import DefaultImage from '../../../public/defaultImage.svg';

const TABS = {
FOLLOWER: "FOLLOWER",
Expand Down Expand Up @@ -54,7 +55,7 @@ const UserProfile: React.FC<UserProfileProps> = ({
<div className="absolute top-[-150px] w-[200px] h-[300px] bg-white px-8 py-4 rounded-lg shadow-lg flex flex-col items-center">
<div className="relative my-4">
<Image
src={profileImageUrl}
src={profileImageUrl || DefaultImage}
alt="Profile"
width={80}
height={80}
Expand All @@ -81,7 +82,7 @@ const UserProfile: React.FC<UserProfileProps> = ({
</div>


<div className="ml-auto flex items-center mt-[10px] mr-[50px]">
<div className="flex items-center mt-[10px]">

{targetMemberId &&
userMemberId && ( // Check both IDs are available
Expand Down

0 comments on commit 77d61ef

Please sign in to comment.