-
- {/* 테스트 텍스트입니다. */}
- 지킬과 하이드
-
-
- {/* 테스트 텍스트입니다. */}
- 1시간 전
-
+
{writer.nickname}
+
{formattedDate}
{status === 'edit' && (
@@ -39,8 +32,7 @@ function CommentCard({ status }: CommentCardProps) {
- {/* 테스트 텍스트입니다. */}
- 오늘 하루 우울했었는데 덕분에 많은 힘 얻고 갑니다. 연금술사 책 다시 사서 오랜만에 읽어봐야겠어요!
+ {content}
diff --git a/src/components/Card/EpigramCard.tsx b/src/components/Card/EpigramCard.tsx
index 07ceb392..a4191b86 100644
--- a/src/components/Card/EpigramCard.tsx
+++ b/src/components/Card/EpigramCard.tsx
@@ -1,14 +1,21 @@
import React from 'react';
-// figma 상으로는 sm ~ 3xl 사이즈로 구현되어 있는데, tailwind 환경을 반영해
-// xs ~ 2xl 으로 정의했습니다.
+interface Tag {
+ name: string;
+ id: number;
+}
+
+interface EpigramCardProps {
+ content: string;
+ author: string;
+ tags: Tag[];
+}
+
const sizeStyles = {
- xs: 'w-[286px] max-h-[132px]',
- sm: 'sm:w-[312px] sm:max-h-[152px]',
+ base: 'w-[312px] max-h-[152px]',
md: 'md:w-[384px] md:max-h-[180px]',
lg: 'lg:w-[540px] lg:max-h-[160px]',
xl: 'xl:w-[640px] xl:max-h-[196px]',
- '2xl': '2xl:w-[744px] 2xl:max-h-[196px]',
};
const textSizeStyles = {
@@ -17,44 +24,38 @@ const textSizeStyles = {
md: 'md:text-base',
lg: 'lg:text-xl',
xl: 'xl:text-2xl',
- '2xl': '2xl:text-2xl',
};
-function EpigramCard() {
+function EpigramCard({ content, author, tags }: EpigramCardProps) {
return (
-
+
{/* eslint-disable-next-line */}
{/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
- {/* 테스트 텍스트입니다. */}
- 오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아 간다.
+ {content}
- {/* 테스트 텍스트입니다. */}- 앙드레 말로 -
+ - {author} -
-
- {/* 테스트 텍스트입니다. */}
- #나아가야할때
-
-
- {/* 테스트 텍스트입니다. */}
- #꿈을이루고싶을때
-
+ {tags.map((tag) => (
+
+ #{tag.name}
+
+ ))}
);
diff --git a/src/components/Card/UserProfileModal.tsx b/src/components/Card/UserProfileModal.tsx
new file mode 100644
index 00000000..f4dd6f50
--- /dev/null
+++ b/src/components/Card/UserProfileModal.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog_dim';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+interface UserProfileModalProps {
+ username: string;
+ profileImage: string;
+ children: React.ReactNode;
+}
+
+function UserProfileModal({ username, profileImage, children }: UserProfileModalProps) {
+ return (
+
+ );
+}
+
+export default UserProfileModal;
diff --git a/src/components/Emotion/EmotionSelector.tsx b/src/components/Emotion/EmotionSelector.tsx
index 4375c3ca..57bae69a 100644
--- a/src/components/Emotion/EmotionSelector.tsx
+++ b/src/components/Emotion/EmotionSelector.tsx
@@ -10,7 +10,12 @@ import EmotionSaveToast from './EmotionSaveToast';
* EmotionSelector 컴포넌트는 여러 개의 EmotionIconCard를 관리하고
* 사용자의 오늘의 감정을 선택하고 저장하고 출력합니다.
*/
-function EmotionSelector() {
+
+interface EmotionSelectorProps {
+ onEmotionSaved: () => void; // Callback for when the emotion is saved
+}
+
+function EmotionSelector({ onEmotionSaved }: EmotionSelectorProps) {
// 반응형 디자인을 위한 미디어 쿼리 훅
const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1024px)');
const isMobile = useMediaQuery('(max-width: 767px)');
@@ -26,6 +31,8 @@ function EmotionSelector() {
// 현재 선택된 감정을 관리하는 useState 훅
const [selectedEmotion, setSelectedEmotion] = useState
(null);
+ const [showToast, setShowToast] = useState(false); // State for controlling the toast
+
// 오늘의 감정을 조회하기 위한 훅
const { data: emotion, error: getError, isLoading: isGetLoading } = useGetEmotion();
// 감정을 저장하기 위한 훅
@@ -49,7 +56,9 @@ function EmotionSelector() {
* 감정을 서버에 저장합니다.
* @param iconType - 클릭된 감정의 타입
*/
+
const handleCardClick = async (iconType: EmotionType) => {
+ let emotionChanged = false;
setStates((prevStates) => {
const newStates = { ...prevStates };
@@ -63,6 +72,7 @@ function EmotionSelector() {
Object.keys(newStates).forEach((key) => {
newStates[key as EmotionType] = key === iconType ? 'Clicked' : 'Unclicked';
});
+ emotionChanged = true;
}
return newStates;
@@ -71,7 +81,14 @@ function EmotionSelector() {
// 오늘의 감정 저장
postEmotionMutation.mutate(iconType, {
onSuccess: (_, clickedIconType) => {
- setSelectedEmotion(clickedIconType);
+ if (emotionChanged) {
+ setSelectedEmotion(clickedIconType);
+ setShowToast(true);
+ setTimeout(() => {
+ setShowToast(false);
+ onEmotionSaved();
+ }, 1000);
+ }
},
onError: (error: unknown) => {
// eslint-disable-next-line
@@ -103,7 +120,7 @@ function EmotionSelector() {
))}
{/* 감정이 선택되었을 때 토스트 메시지 표시 */}
- {selectedEmotion &&
}
+ {showToast && selectedEmotion &&
}
);
}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d342347f..9f4776d9 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -18,9 +18,10 @@ import SHARE_ICON from '../../../public/icon/share-icon.svg';
// NOTE isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
// NOTE SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래
를 추가해주세요.
+// TODO 새로 바뀐 피그마 시안으로 바꿀지 추후 결정
+
export interface HeaderProps {
icon: 'back' | 'search' | '';
- routerPage: string;
isLogo: boolean;
insteadOfLogo: string;
isProfileIcon: boolean;
@@ -31,10 +32,15 @@ export interface HeaderProps {
onClick: (e: React.MouseEvent
) => void;
}
-function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, routerPage, disabled, onClick }: HeaderProps) {
+function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, disabled, onClick }: HeaderProps) {
const router = useRouter();
const { toast } = useToast();
+ // 뒤로가기
+ const handleBack = () => {
+ router.back();
+ };
+
// 페이지 이동 함수
const handleNavigateTo = (path: string) => {
router.push(path);
@@ -62,10 +68,10 @@ function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareI
return (