Skip to content

Commit

Permalink
style : 모달 버튼 지도 디자인 수정 (#422)
Browse files Browse the repository at this point in the history
* style : 색상 스타일링

* chore : 로딩 컴포넌트 적용
  • Loading branch information
mmjjaa authored Dec 9, 2024
1 parent 328743b commit b472194
Show file tree
Hide file tree
Showing 14 changed files with 75 additions and 35 deletions.
9 changes: 8 additions & 1 deletion src/components/Common/TopBar/TopBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,14 @@ export const TopBar = ({
return (
<div className="z-10 flex items-center justify-between w-full px-4 mt-5 text-2xl ">
{handleBackClick && <BackButton onClick={handleBackClick} />}
{handleSuccesClick && <p onClick={handleSuccesClick}>완료</p>}
{handleSuccesClick && (
<button
onClick={handleSuccesClick}
className=" bg-sample-blue w-12 text-sm text-white px-2 py-2 rounded-lg"
>
완료
</button>
)}
</div>
);
};
7 changes: 6 additions & 1 deletion src/components/HomePage/BottomSheet/BottomSheetContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { KeywordContainer } from './KeywordContainer';
import { useGetAllKeywords } from '@/hooks/useGetAllKeywords';
import { useGetUserKeywords } from '@/hooks/useGetUserKeywords';
import { useEffect } from 'react';
import { Loading } from '@/components/Common/Loading/Loading';

type BottomSheetContentProps = {
nickname: string | undefined;
Expand Down Expand Up @@ -38,7 +39,11 @@ export const BottomSheetContent = ({
}, [userKeywordsData, setSelectedKeywords]);

if (isAllKeywordsLoading || isUserKeywordsLoading) {
return <p>로딩 중...</p>;
return (
<div className="flex flex-1 w-full h-full">
<Loading />
</div>
);
}

if (isAllKeywordsError || isUserKeywordsError) {
Expand Down
6 changes: 3 additions & 3 deletions src/components/LetterDetailPage/Delete/DeleteModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,9 @@ export const DeleteModal = ({ closeModal }: DeleteModalProps) => {
};

return (
<div className="flex flex-col bg-white rounded-2xl items-center justify-center w-full h-full p-4">
<div className="flex flex-col font-sans bg-white rounded-2xl items-center justify-center w-60 h-28 p-4">
<Margin top={10} />
<span className="font-bold mb-4 text-2xl">
<span className="font-bold mb-4 text-xl">
편지를 삭제하시겠습니까?
</span>

Expand All @@ -84,7 +84,7 @@ export const DeleteModal = ({ closeModal }: DeleteModalProps) => {
</button>
<button
onClick={handleDelete}
className="mt-6 bg-slate-500 w-24 text-white px-4 py-2 rounded-lg"
className="mt-6 bg-theme-skyblue w-24 text-white px-4 py-2 rounded-lg"
>
삭제하기
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { useGetMapReplyList } from '@/hooks/useGetMapReplyList';
import { ReportButton } from '../../Report/ReportButton';
import { useLocation } from 'react-router-dom';
import { Label } from '@/components/Common/BottleLetter/Label/Label';
import { Loading } from '@/components/Common/Loading/Loading';

type MapLetterDetailProps = {
letterData: {
Expand Down Expand Up @@ -46,7 +47,11 @@ export const MapLetterArchieveDetail = ({

console.log(mapReplyListData);
if (isMapReplyListDataLoading) {
return <div>로딩 중...</div>;
return (
<div className="flex flex-1 w-full h-full">
<Loading />
</div>
);
}

if (mapReplyListDataError instanceof Error) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useEffect } from 'react';
import { useKeywordLetterDetail } from '@/hooks/useGetKeywordLetterDetail';
import { useGetKeywordReplyLetterDetail } from '@/hooks/useGetKeywordReplyLetterDetail';
import { KeywordLetterDetail } from '../../LetterDatail/KeywordLetterDetail/KeywordLetterDetail';
import { Loading } from '@/components/Common/Loading/Loading';

export const KeywordLetterDetailContainer = () => {
const { letterId, replyLetterId, letterType } = useParams<{
Expand Down Expand Up @@ -44,7 +45,11 @@ export const KeywordLetterDetailContainer = () => {
}, [keywordError, replyError, addToast, navigate]);

if (isKeywordLoading || isReplyLoading) {
return <div>로딩 중...</div>;
return (
<div className="flex flex-1 w-full h-full">
<Loading />
</div>
);
}

if (!keywordData && !replyData) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useEffect } from 'react';
import { useGetArchivedLetter } from '@/hooks';
import { MapLetterArchieveDetail } from '../../LetterDatail/MapLetterArchieveDetail/MapLetterArchieveDetail';
import { useGetMapReplyLetterDetail } from '@/hooks/useGetMapReplyLetterDetail';
import { Loading } from '@/components/Common/Loading/Loading';

export const MapLetterArchieveDetailContainer = () => {
const { letterId, replyLetterId, dataType } = useParams<{
Expand Down Expand Up @@ -43,7 +44,11 @@ export const MapLetterArchieveDetailContainer = () => {
}, [mapError, replyError, addToast, navigate]);

if (isMapLoading || isReplyLoading) {
return <div>로딩 중...</div>;
return (
<div className="flex flex-1 w-full h-full">
<Loading />
</div>
);
}

if (!mapData && !replyData) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useToastStore } from '@/hooks';
import { useEffect } from 'react';
import { useNearbyLettersDetail } from '@/hooks/useGetNearbyLettersDetail';
import { MapLetterDetail } from '../../LetterDatail/MapLetterDetail/MapLetterDetail';
import { Loading } from '@/components/Common/Loading/Loading';

export const MapLetterDetailContainer = () => {
const { letterId, lat, lot } = useParams<{
Expand Down Expand Up @@ -34,7 +35,11 @@ export const MapLetterDetailContainer = () => {
}, [mapError, addToast]);

if (isMapLoading) {
return <div>로딩 중...</div>;
return (
<div className="flex flex-1 w-full h-full">
<Loading />
</div>
);
}

if (!mapData) {
Expand Down
14 changes: 4 additions & 10 deletions src/components/LetterDetailPage/Report/ReportModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -163,19 +163,13 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {

return (
<div>
<div className="flex flex-col bg-white rounded-2xl items-center justify-center w-full h-full p-4">
<div className="flex flex-col bg-white rounded-2xl items-center justify-center w-52 h-full p-4">
<Margin top={10} />
<span className="font-bold mb-4 text-2xl">편지 신고하기</span>
<span className="text-sm text-gray-700 mb-4">
신고 이유 및 설명
</span>
<span className="font-bold mb-4 text-xl">편지 신고하기</span>

<form className="flex flex-col items-start gap-4">
{reportReasons.map((reason, index) => (
<label
key={index}
className="flex items-center text-lg"
>
<label key={index} className="flex items-center text-m">
<input
type="radio"
name="reportReason"
Expand Down Expand Up @@ -206,7 +200,7 @@ export const ReportModal = ({ closeModal }: ReportModalProps) => {
</button>
<button
onClick={onReport}
className="mt-6 bg-red-500 w-24 text-white px-4 py-2 rounded-lg"
className="mt-6 bg-theme-skyblue w-24 text-white px-4 py-2 rounded-lg"
disabled={
!selectedReason ||
(selectedReason === '기타' &&
Expand Down
18 changes: 8 additions & 10 deletions src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,22 @@ export const LetterInfoContainer = ({
const Letter = { label };

return (
<div className="flex flex-col w-[330px] bg-gray-200 rounded-lg p-4 shadow-md">
<div className="flex flex-col w-[330px] bg-white border rounded-lg p-4 shadow-md">
<div className="flex gap-4 mb-4">
<div className="p-2 bg-gray-300 rounded-md w-20 h-20">
<div className="p-2 bg-gray-100 rounded-md w-20 h-20">
<BottleLetter Letter={Letter} />
</div>
<div className="flex flex-col h-20">
<div className="gap-2 flex-center">
<div className="gap-2 flex items-center">
<p className="text-sm text-gray-600">작성일: {date}</p>
<div className="p-1 bg-gray-100 flex-center rounded-xl">
<p className="text-sm font-bold text-gray-500 text-nowrap">
<div className="p-1 bg-theme-skyblue bg-opacity-30 flex-center rounded-xl">
<p className="text-sm font-bold text-gray-500 text-nowrap">
D-{daysLeft}
</p>
</div>
</div>

<h3 className="text-lg font-semibold">{title}</h3>
<h3 className="text-lg font-semibold truncate ">{title}</h3>
<p className="text-sm text-gray-600">
현재 위치에서 {distance}m
</p>
Expand All @@ -50,10 +50,8 @@ export const LetterInfoContainer = ({

<NavLink
to={`/letter/map/${lat}/${lot}/${letterId}`}
className={`w-full py-2 text-center text-gray-700 bg-gray-300 rounded-lg ${
limitDistance
? 'hover:bg-gray-400'
: 'cursor-not-allowed bg-gray-400'
className={`w-full py-2 text-center text-gray-700 bg-theme-skyblue rounded-lg ${
limitDistance ? '' : 'cursor-not-allowed bg-gray-400'
}`}
aria-disabled={!limitDistance}
onClick={(e) => !limitDistance && e.preventDefault()}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const NavigateContainer: React.FC<NavigateContainerProps> = ({
count
}) => {
return (
<div className="flex-center bg-sample-blue rounded-2xl shadow-md w-[300px] p-2">
<div className="flex-center bg-sample-blue bg-opacity-80 rounded-2xl shadow-md w-[300px] p-2">
<p className="text-lg font-bold text-white ">
반경 500m 내 {count}
</p>
Expand Down
7 changes: 6 additions & 1 deletion src/components/SelectItemPage/SelectItem/SelectItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useParams, useLocation } from 'react-router-dom';
import { useCreateLetter } from '@/hooks/useCreateLetter';
import { usePostKeywordReplyLettter } from '@/hooks/usePostKeywordReplyLettter';
import { usePostMapReplyLetter } from '@/hooks/usePostMapReplyLetter';
import { Loading } from '@/components/Common/Loading/Loading';

type SelectItemProps = {
isActive: boolean;
Expand Down Expand Up @@ -65,7 +66,11 @@ export const SelectItem = ({ isActive, setIsActive }: SelectItemProps) => {
};

if (!keyweordData) {
return <div>로딩 중 입니다.</div>;
return (
<div className="flex flex-1 w-full h-full">
<Loading />
</div>
);
}

const handleKeywordSelection = (content: string) => {
Expand Down
7 changes: 6 additions & 1 deletion src/pages/Home/HomePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { TopButtonContainer } from '@/components/HomePage/TopButtonContainer/Top
import { getToken, firebaseMessaging, onMessage } from '@/util/firebase';
import { postToken } from '@/service/nofication/postToken';
import { useToastStore } from '@/hooks';
import { Loading } from '@/components/Common/Loading/Loading';

export type ReplyLetter = {
type: 'MAP' | 'KEYWORD';
Expand Down Expand Up @@ -112,7 +113,11 @@ export const HomePage = () => {
}, [toggle, refetchRecommendedLetters, refetchRecentRelyLetters]);

if (isRecommendedLetterLoading || isRecentRelyLetterLoading) {
return <p>로딩 중...</p>;
return (
<div className="flex flex-1 w-full h-full">
<Loading />
</div>
);
}

if (isRecommendedLetterError || isRecentRelyLetterError) {
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Map/MapExplorerPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const MapExplorerPage = () => {
setQuery(event.target.value);
};

const CreateBtnStyle = `text-sample-blue absolute gap-2 p-2 transform -translate-x-12 flex-center bottom-[5rem] translate-y-7 left-[46%] bg-white border border-sample-blue w-52 rounded-2xl`;
const CreateBtnStyle = `text-sample-blue absolute gap-2 p-2 transform -translate-x-12 flex-center bottom-[5rem] translate-y-7 left-[46%] bg-white w-52 rounded-2xl`;

return (
<div>
Expand Down Expand Up @@ -94,7 +94,7 @@ export const MapExplorerPage = () => {
) : (
<NavLink
to={'/letter/create'}
className={CreateBtnStyle}
className={`mb-36 ${CreateBtnStyle}`}
onClick={(e) => e.preventDefault()}
>
<HiOutlinePencilAlt />
Expand Down
8 changes: 7 additions & 1 deletion src/pages/Notification/NotificationPage.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Loading } from '@/components/Common/Loading/Loading';
import { Margin } from '@/components/Common/Margin/Margin';
import { TitleClosedTopBar } from '@/components/Common/TitleClosedTopBar/TitleClosedTopBar';
import { NotificationContainer } from '@/components/NotificationPage/NotificationContainer';
Expand All @@ -12,7 +13,12 @@ export const NotificationPage = () => {
// 상태 업데이트
useUpdateNotificationStatus();

if (isLoading) return <p>알림 로딩 중...</p>;
if (isLoading)
return (
<div className="flex flex-1 w-full h-full">
<Loading />
</div>
);
if (isError) return <p>알림 로딩 실패!</p>;

const dummy = data?.result || [];
Expand Down

0 comments on commit b472194

Please sign in to comment.