design: Footer 컴포넌트 구현, Organism(댓글+페이지네이션) 구현 (#152)

* feat: footer에 사용되는 로고 추가 * Revert "feat: footer에 사용되는 로고 추가" This reverts commit c3c769b. * feat: footer에 사용되는 로고 추가 * feat: BLUE_LIGHT 컬러 팔레트 추가 * feat: footer 컴포넌트 UI 구현 * feat: footer 컴포넌트 스토리북 추가 * design: footer 태그별 네이밍 수정, 마진 수정 * feat: Comment 컴포넌트의 오픈 상태에 따라 높이 설정 * feat: CommentsSection 컴포넌트 구현(Comment 컴포넌트 높이변화 감지전) * design: 종류별 컨테이너가 최상위 컨테이너에서 파생되게 변경 * design: 댓글 무한 확장 디자인 * feat: CommentsSection 수정본 스토리북 추가 * feat: Toggle 컴포넌트 UI 구현 * feat: Toggle 컴포넌트 스토리북 추가 * design: toggle 가로세로 폭 조정 * feat: toggle 컴포넌트 스토리북 수정 * feat: CommentsSection 에 toggle 컴포넌트 추가 * design: 오류인 부분 색상 설정 * feat: footer 내 고유한 text 상수 처리 * refactor: 상수화된 텍스트에 따라 텍스트 매핑 * refactor: Comment mapping 시 key 값을 임시 id 값으로 변경 * move: 페이지네이션 코드 utils로 이동 * refactor: Comment mapping 시 commentData의 id 값으로 처리 * refactor: loggedIn 상태에 따라 블러처리가 될 수 있게 태그 구조 변경 * design: 블러 관련 스타일 추가, 토스트 모달 스타일 추가 * feat: 수정된 CommentsSection 스토리북 업데이트 * style: loggedIn props 네이밍 voted로 변경
JECT-Study · Aug 9, 2024 · e82341a · e82341a
1 parent cc6e6ac
commit e82341a
Show file tree

Hide file tree

Showing 16 changed files with 671 additions and 69 deletions.
diff --git a/src/assets/index.ts b/src/assets/index.ts
@@ -28,6 +28,7 @@ export { default as GoogleLogin } from './svg/google-login.svg';
 export { default as NaverLogin } from './svg/naver-login.svg';
 export { default as Copy } from './svg/copy.svg';
 export { default as Check } from './svg/check.svg';
+export { default as FooterLogo } from './svg/footer-logo.svg';
 export { default as Share } from './svg/share.svg';
 export { default as NotificationButton } from './svg/notification-button.svg';
 export { default as NotificationBell } from './svg/notification-bell.svg';

diff --git a/src/assets/svg/footer-logo.svg b/src/assets/svg/footer-logo.svg
diff --git a/src/components/atoms/Toggle/Toggle.style.ts b/src/components/atoms/Toggle/Toggle.style.ts
@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const container = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  border: 1px solid ${color.GY[2]};
+  border-radius: 4px;
+  background-color: ${color.WT};
+  gap: 8px;
+  width: max-content;
+  height: max-content;
+`;
+
+export const label = css`
+  ${typo.Main.Medium}
+  color: ${color.BK};
+  text-align: center;
+`;
+
+export const count = css`
+  text-align: center;
+  ${typo.Number.Medium_18}
+  color: ${color.MAIN};
+`;
diff --git a/src/components/atoms/Toggle/Toggle.tsx b/src/components/atoms/Toggle/Toggle.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ComponentPropsWithRef } from 'react';
+import * as S from './Toggle.style';
+
+export interface ToggleProps extends ComponentPropsWithRef<'div'> {
+  label: string;
+  count: number;
+}
+
+const Toggle = ({ label, count, ...attributes }: ToggleProps) => {
+  return (
+    <div css={S.container} {...attributes}>
+      <span css={S.label}>{label}</span>
+      <span css={S.count}>{count}</span>
+    </div>
+  );
+};
+
+export default Toggle;
diff --git a/src/components/molecules/Comment/Comment.style.ts b/src/components/molecules/Comment/Comment.style.ts
@@ -6,9 +6,17 @@ export const MainContainer = css`
   display: flex;
   flex-direction: column;
   width: 1175px;
-  height: 368px;
   min-width: 1175px;
-  min-height: 368px;
+`;
+
+export const compactContainer = css`
+  ${MainContainer};
+  height: 131px;
+`;
+
+export const expandedContainer = css`
+  ${MainContainer};
+  height: 368px;
 `;
 
 export const commentContainer = css`

diff --git a/src/components/molecules/Comment/Comment.tsx b/src/components/molecules/Comment/Comment.tsx
@@ -7,6 +7,7 @@ import MenuTap, { MenuItem } from '@/components/atoms/MenuTap/MenuTap';
 import * as S from './Comment.style';
 
 export interface CommentProps extends ComponentPropsWithRef<'div'> {
+  id: string;
   imgUrl: string;
   nickname: string;
   createdTime: string;
@@ -17,6 +18,7 @@ export interface CommentProps extends ComponentPropsWithRef<'div'> {
 }
 
 const Comment = ({
+  id,
   imgUrl,
   nickname,
   createdTime,
@@ -58,7 +60,13 @@ const Comment = ({
   ];
 
   return (
-    <div css={S.MainContainer} {...attributes}>
+    <div
+      css={[
+        S.MainContainer,
+        showReply ? S.expandedContainer : S.compactContainer,
+      ]}
+      {...attributes}
+    >
       <div css={S.commentContainer}>
         <CommentProfile stance={stance} imgUrl={imgUrl} />
         <div css={S.commentWrapper}>

diff --git a/src/components/organisms/CommentsSection/CommentsSection.style.ts b/src/components/organisms/CommentsSection/CommentsSection.style.ts
@@ -0,0 +1,64 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+
+export const commentsSectionContainer = css`
+  display: flex;
+  flex-direction: column;
+  min-height: 1554px;
+  margin: 0 auto;
+  background-color: ${color.WT};
+  overflow-y: auto;
+  gap: 23px;
+`;
+
+export const loggedInBackground = css`
+  width: 100%;
+  height: auto;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 29px;
+  position: relative;
+`;
+
+export const loggedOutBackground = css`
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.01);
+  backdrop-filter: blur(11px);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 29px;
+`;
+
+export const commentsWrapper = css`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 0;
+  margin: 0;
+  min-height: 917px;
+  height: auto;
+`;
+
+export const paginationWrapper = css`
+  display: flex;
+  justify-content: center;
+  margin-top: 17px;
+  width: 100%;
+  height: 40px;
+  flex-shrink: 0;
+`;
+
+export const toastModalWrapper = css`
+  position: absolute;
+  top: 76px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+`;
diff --git a/src/components/organisms/CommentsSection/CommentsSection.tsx b/src/components/organisms/CommentsSection/CommentsSection.tsx
@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react';
+import Comment from '@/components/molecules/Comment/Comment';
+import Pagination from '@/components/atoms/Pagination/Pagination';
+import TextArea from '@/components/molecules/TextArea/TextArea';
+import Toggle from '@/components/atoms/Toggle/Toggle';
+import ToastModal from '@/components/atoms/ToastModal/ToastModal';
+import { calculateTotalPages, generatePageNumbers } from '@/utils/pagination';
+import * as S from './CommentsSection.style';
+
+interface CommentData {
+  id: string;
+  imgUrl: string;
+  nickname: string;
+  createdTime: string;
+  comment: string;
+  likeCount: number;
+  stance: 'pros' | 'cons';
+}
+
+interface CommentsSectionProps {
+  commentsData: CommentData[];
+  voted: boolean;
+}
+
+const CommentsSection = ({ commentsData, voted }: CommentsSectionProps) => {
+  const [selectedPage, setSelectedPage] = useState(1);
+  const [displayedComments, setDisplayedComments] = useState<CommentData[]>([]);
+  const [replyText, setReplyText] = useState('');
+
+  const commentsPerPage = 7;
+
+  useEffect(() => {
+    const startIndex = (selectedPage - 1) * commentsPerPage;
+    const newDisplayedComments = commentsData.slice(
+      startIndex,
+      startIndex + commentsPerPage,
+    );
+    setDisplayedComments(newDisplayedComments);
+  }, [selectedPage, commentsData]);
+
+  const handlePageChange = (page: number) => {
+    setSelectedPage(page);
+  };
+
+  const handleReplyChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setReplyText(e.target.value);
+  };
+
+  const handleReplySubmit = () => {
+    console.log('작성한 댓글:', replyText);
+    setReplyText('');
+  };
+
+  const totalPages = calculateTotalPages(commentsData.length, commentsPerPage);
+  const pages = generatePageNumbers(totalPages);
+
+  return (
+    <div css={S.commentsSectionContainer}>
+      <Toggle count={127} label="톡댓톡" />
+      <div css={S.loggedInBackground}>
+        {!voted && (
+          <div css={S.loggedOutBackground}>
+            <div css={S.toastModalWrapper}>
+              <ToastModal bgColor="black">
+                투표 후에 확인할 수 있습니다.
+              </ToastModal>
+            </div>
+          </div>
+        )}
+        <TextArea
+          size="large"
+          value={replyText}
+          onChange={handleReplyChange}
+          onSubmit={handleReplySubmit}
+          placeholder="댓글을 입력하세요"
+          label="등록"
+        />
+        <div css={S.commentsWrapper}>
+          {displayedComments.map((commentData) => (
+            <Comment key={commentData.id} {...commentData} />
+          ))}
+        </div>
+      </div>
+      <div css={S.paginationWrapper}>
+        <Pagination
+          pages={pages}
+          selected={selectedPage}
+          maxPage={totalPages}
+          onChangeNavigate={handlePageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CommentsSection;
diff --git a/src/components/organisms/Footer/Footer.style.ts b/src/components/organisms/Footer/Footer.style.ts
@@ -0,0 +1,76 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const footerContainer = css`
+  display: flex;
+  flex-direction: column;
+  background-color: ${color.BLUE_LIGHT};
+  width: 1920px;
+  height: 427px;
+  padding-left: 200px;
+`;
+
+export const footerWrapper = css`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+export const leftContainer = css`
+  display: flex;
+  flex-direction: column;
+  width: auto;
+`;
+
+export const rightContainer = css`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 365px;
+  gap: 16px;
+  margin-right: 200px;
+  margin-top: 70px;
+`;
+
+export const logoContainer = css`
+  margin-top: 46px;
+  margin-bottom: 20px;
+`;
+
+export const tagContent = css`
+  display: flex;
+  flex-direction: column;
+  margin-left: 19px;
+  margin-bottom: 26px;
+`;
+
+export const boldContent = css`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-left: 19px;
+`;
+
+export const textLabel = css`
+  color: ${color.BK};
+  ${typo.Comment.Regular}
+`;
+
+export const email = css`
+  color: ${color.BK};
+  ${typo.Comment.SemiBold}
+`;
+
+export const linkLabel = css`
+  color: ${color.MAIN};
+  cursor: pointer;
+  ${typo.Main.SemiBold}
+`;
+
+export const subLabel = css`
+  color: ${color.GY[1]};
+  cursor: pointer;
+  ${typo.Main.Medium}
+  margin-top: 2px;
+`;
diff --git a/src/components/organisms/Footer/Footer.tsx b/src/components/organisms/Footer/Footer.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { FooterLogo } from '@/assets';
+import {
+  TAG_CONTENT,
+  BOLD_CONTENT,
+  RIGHT_CONTAINER_LINKS,
+} from '@/constants/message';
+import * as S from './Footer.style';
+
+const Footer = () => (
+  <footer css={S.footerContainer}>
+    <div css={S.footerWrapper}>
+      <div css={S.leftContainer}>
+        <div css={S.logoContainer}>
+          <FooterLogo />
+        </div>
+        <div css={S.tagContent}>
+          {TAG_CONTENT.map((text) => (
+            <p css={S.textLabel} key={text}>
+              {text}
+            </p>
+          ))}
+        </div>
+        <div css={S.boldContent}>
+          <p css={S.email}>{BOLD_CONTENT.emailLabel}</p>
+          <p css={S.textLabel}>{BOLD_CONTENT.email}</p>
+        </div>
+      </div>
+      <div css={S.rightContainer}>
+        {RIGHT_CONTAINER_LINKS.map((text) => (
+          <p
+            css={text === '개인정보처리방침' ? S.subLabel : S.linkLabel}
+            key={text}
+          >
+            {text}
+          </p>
+        ))}
+      </div>
+    </div>
+  </footer>
+);
+
+export default Footer;