-
+
+
+
+
+ {post.contentImageUrls.map((url, index) => (
+
+ ))}
+
-
-
);
};
diff --git a/src/app/(MainLayout)/components/ReadOnlyDebateFeed/ReadOnlyDebateFeed.module.scss b/src/app/(MainLayout)/components/ReadOnlyDebateFeed/ReadOnlyDebateFeed.module.scss
new file mode 100644
index 0000000..31df86a
--- /dev/null
+++ b/src/app/(MainLayout)/components/ReadOnlyDebateFeed/ReadOnlyDebateFeed.module.scss
@@ -0,0 +1,33 @@
+@use '../../../../styles/helpers/index' as *;
+
+.container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ max-height: 800px;
+ overflow: hidden;
+
+ .left {
+ display: flex;
+ width: 100%;
+ max-width: 900px;
+ height: 100%;
+ border-right: 1px solid $COLOR_GRAY_2;
+ }
+
+ .right {
+ width: 100%;
+ max-width: 400px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .right_up {
+ flex: 1;
+ }
+
+ .right_down {
+ height: 100%;
+ overflow: auto;
+ }
+}
diff --git a/src/app/(MainLayout)/components/ReadOnlyDebateFeed/ReadOnlyDebateFeed.tsx b/src/app/(MainLayout)/components/ReadOnlyDebateFeed/ReadOnlyDebateFeed.tsx
new file mode 100644
index 0000000..de99432
--- /dev/null
+++ b/src/app/(MainLayout)/components/ReadOnlyDebateFeed/ReadOnlyDebateFeed.tsx
@@ -0,0 +1,90 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+
+import FeedWrapper from '@/components/common/FeedWrapper';
+import { ReadOnlyDebateFeedType } from '../../types/feed';
+import FeedLikeBox from '../FeedLikeBox';
+import FeedTextContent from '../FeedTextContent';
+import DebateContent from '../DebateContent';
+
+import styles from './ReadOnlyDebateFeed.module.scss';
+
+interface ReadOnlyDebateFeedProps {
+ debateFeedData: ReadOnlyDebateFeedType;
+}
+
+const ReadOnlyDebateFeed = ({ debateFeedData }: ReadOnlyDebateFeedProps) => {
+ console.log(debateFeedData);
+
+ const feedId = new URLSearchParams(useSearchParams()).get('df');
+
+ if (!feedId) {
+ return null;
+ }
+
+ const { post, basicUser } = debateFeedData;
+
+ const [{ voteCount: firstVoteCount }, { voteCount: secondVoteCount }] =
+ post.options;
+
+ const totalCount = firstVoteCount + secondVoteCount;
+ const voteCountRatios = [
+ Math.floor((firstVoteCount / totalCount) * 100),
+ Math.floor((secondVoteCount / totalCount) * 100),
+ ];
+
+ const notSelectedYet = ![
+ post.options[0].optionId,
+ post.options[1].optionId,
+ ].includes(post.selectedOptionId);
+
+ return (
+
+
+
+ {[0, 1].map((index) => {
+ const isSelected =
+ post.selectedOptionId === post.options[index].optionId;
+
+ return (
+
+ );
+ })}
+
+
+
+ );
+};
+
+export default ReadOnlyDebateFeed;
diff --git a/src/app/(MainLayout)/components/ReadOnlyDebateFeed/index.ts b/src/app/(MainLayout)/components/ReadOnlyDebateFeed/index.ts
new file mode 100644
index 0000000..47246c2
--- /dev/null
+++ b/src/app/(MainLayout)/components/ReadOnlyDebateFeed/index.ts
@@ -0,0 +1 @@
+export { default } from './ReadOnlyDebateFeed';
diff --git a/src/app/(MainLayout)/page.tsx b/src/app/(MainLayout)/page.tsx
index b862d4b..a4dac18 100644
--- a/src/app/(MainLayout)/page.tsx
+++ b/src/app/(MainLayout)/page.tsx
@@ -1,15 +1,73 @@
-import FeedWrapper from '@/components/common/FeedWrapper';
+import ReadOnlyCommonFeed from './components/ReadOnlyCommonFeed';
+import ReadOnlyDebateFeed from './components/ReadOnlyDebateFeed';
import styles from './page.module.scss';
import ReadOnlyCommonFeed from './components/ReadOnlyCommonFeed';
+const MOCK_DATA_OF_COMMON_FEED = {
+ post: {
+ postType: 'BASIC' as const,
+ postId: 2,
+ content:
+ '테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다. 테스트 내용 입니다.',
+ hashTagNames: ['javascript', 'typescript'],
+ likeCount: 0,
+ commentCount: 0,
+ createdAt: '2024-10-10T05:47:22.000+00:00',
+ contentImageUrls: [
+ 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4vkwPhD-NHO6sV_3ailgWXjiP_WPM24J3IhkB3xZ-bQ&s',
+ 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4vkwPhD-NHO6sV_3ailgWXjiP_WPM24J3IhkB3xZ-bQ&s',
+ ],
+ isLike: false,
+ isFollow: false,
+ },
+ basicUser: {
+ userId: 2,
+ userName: 'kimchulsu',
+ profileImgUrl:
+ 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4vkwPhD-NHO6sV_3ailgWXjiP_WPM24J3IhkB3xZ-bQ&s',
+ },
+};
+
+const MOCK_DATA_OF_DEBATE_FEED = {
+ post: {
+ postType: 'DEBATE' as const,
+ postId: 1,
+ content: '오늘의 점심 메뉴는?',
+ hashTagNames: ['lunch', 'menu', 'bestmenu'],
+ likeCount: 1_345_321,
+ commentCount: 154_421,
+ createdAt: '2024-11-02',
+ options: [
+ {
+ optionId: 1,
+ optionContent: '오늘은 김치찌개다!',
+ voteCount: 162_452,
+ },
+ {
+ optionId: 2,
+ optionContent: '오늘은 된장찌개다!',
+ voteCount: 31_452,
+ },
+ ],
+ isFollow: false,
+ isLike: true,
+ selectedOptionId: 1,
+ },
+ basicUser: {
+ userId: 2,
+ userName: 'hongildong',
+ profileImgUrl:
+ 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4vkwPhD-NHO6sV_3ailgWXjiP_WPM24J3IhkB3xZ-bQ&s',
+ },
+};
+
const MainPage = () => {
return (
메인
-
-
-
+
+
);
};
diff --git a/src/app/(MainLayout)/types/feed.ts b/src/app/(MainLayout)/types/feed.ts
index c6b1ffb..5d860ab 100644
--- a/src/app/(MainLayout)/types/feed.ts
+++ b/src/app/(MainLayout)/types/feed.ts
@@ -15,4 +15,53 @@ type DiscussionFeedData = {
type FeedPopup = 'confirm' | 'publish' | null;
-export type { CommonFeedStep, CommonFeedData, DiscussionFeedData, FeedPopup };
+interface BasicUserType {
+ userId: number;
+ userName: string;
+ profileImgUrl: string;
+}
+
+interface DebateOptionType {
+ optionId: number;
+ optionContent: string;
+ voteCount: number;
+}
+
+interface ReadOnlyFeedType {
+ postId: number;
+ content: string;
+ hashTagNames: string[];
+ likeCount: number;
+ commentCount: number;
+ createdAt: string;
+ isLike: boolean;
+ isFollow: boolean;
+}
+
+interface ReadOnlyCommonFeedType {
+ post: {
+ postType: 'BASIC';
+ contentImageUrls: string[];
+ } & ReadOnlyFeedType;
+ basicUser: BasicUserType;
+}
+
+interface ReadOnlyDebateFeedType {
+ post: {
+ postType: 'DEBATE';
+ options: DebateOptionType[];
+ selectedOptionId: number;
+ } & ReadOnlyFeedType;
+ basicUser: BasicUserType;
+}
+
+export type {
+ CommonFeedStep,
+ CommonFeedData,
+ DiscussionFeedData,
+ FeedPopup,
+ BasicUserType,
+ DebateOptionType,
+ ReadOnlyCommonFeedType,
+ ReadOnlyDebateFeedType,
+};
diff --git a/src/assets/icons/blue_flag_fill.svg b/src/assets/icons/blue_flag_fill.svg
new file mode 100644
index 0000000..04ef2ed
--- /dev/null
+++ b/src/assets/icons/blue_flag_fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/red_flag.png b/src/assets/icons/red_flag.png
new file mode 100644
index 0000000000000000000000000000000000000000..66d96a2702c6c760c268e5c75ff66ca087a9f1ff
GIT binary patch
literal 340
zcmeAS@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE-VXMsm#F#`j)FbFd;%$g$s6l5$8
za(7}_cTVOdki(Mh=
C4pJsFk-_VSFpjO1hRb9-IofH+ZMCp82lJftwRsY}pe0Gs{g5^SUi&tz%
zr{skeuW_tW$YWgkHSX9ehbwFgc5Z(B=1q)=qG(hO%;&H;1Vk9`?W^$1EcF%nXd}EA53Q|KK51E
z&3<=7faAki)1`tb%zu-9?-Zu<4V!CppU=H0^iv)nTf?%bbGA&
jT{xZ7GgTe~DWM4f&YFZ?
literal 0
HcmV?d00001
diff --git a/src/assets/icons/red_flag_fill.svg b/src/assets/icons/red_flag_fill.svg
new file mode 100644
index 0000000..3143e00
--- /dev/null
+++ b/src/assets/icons/red_flag_fill.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/common/FeedWrapper/FeedWrapper.module.scss b/src/components/common/FeedWrapper/FeedWrapper.module.scss
index 7e54913..ffd1d75 100644
--- a/src/components/common/FeedWrapper/FeedWrapper.module.scss
+++ b/src/components/common/FeedWrapper/FeedWrapper.module.scss
@@ -1 +1,31 @@
@use '../../../styles/helpers/index' as *;
+
+.container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ max-height: 800px;
+ overflow: hidden;
+
+ .left {
+ flex: 1;
+ max-width: 670px;
+ height: 100%;
+ border-right: 1px solid $COLOR_GRAY_2;
+ }
+
+ .right {
+ width: 40%;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .right_up {
+ max-height: 230px;
+ }
+
+ .right_down {
+ height: 100%;
+ overflow: auto;
+ }
+}
\ No newline at end of file
diff --git a/src/components/common/FeedWrapper/FeedWrapper.tsx b/src/components/common/FeedWrapper/FeedWrapper.tsx
index 626b04b..1b58db6 100644
--- a/src/components/common/FeedWrapper/FeedWrapper.tsx
+++ b/src/components/common/FeedWrapper/FeedWrapper.tsx
@@ -11,17 +11,19 @@ interface FeedWrapperProps {
modalMaxWidth?: CSSProperties['maxWidth'];
modalHeight?: CSSProperties['height'];
modalMaxHeight?: CSSProperties['maxHeight'];
+ feedIdQuery: 'cf' | 'df' | 'sf';
}
const FeedWrapper = ({
+ children,
modalWidth = '90vw',
modalMaxWidth = '1070px',
modalHeight = '80vw',
modalMaxHeight = '800px',
- children,
+ feedIdQuery,
}: FeedWrapperProps) => {
const router = useRouter();
- const searchParams = new URLSearchParams(useSearchParams()).get('f');
+ const searchParams = new URLSearchParams(useSearchParams()).get(feedIdQuery);
const closeFeed = (bool: boolean) => {
console.log(bool);
@@ -29,6 +31,7 @@ const FeedWrapper = ({
};
if (!searchParams) {
+ router.push('/');
return null;
}