deploy 0.0.5v (#193)

* A사이드 토픽 생성 API 연동 (#175) * fix: lineheight 1.4 기본값 적용 * feat: text, image icon 추가 * fix: padding 값 수정 * fix: 수정된 input theme으로 변경 * feat: 카테고리 input form 추가 * fix: 파일 로직 변경 * feat: 토픽생성 image input 컴포넌트 추가 * fix: textinput props 변경 * feat: 뒤로가기 로직을 위한 코드수정 * feat: B topic step2 추가 * feat: B topic step1 추가 * feat: B topic 페이지 추가 * feat: add delete icon * feat: add maxlength * fix: constant fix * fix: constant fix * fix: form fix * feat: add BTopicCreate Step2 page * feat: separate imageinput component * feat: add imgurl dto * feat: add topic deadline constant * fix: modal close button width, height fix * feat: 토픽생성 api 구축 * feat: 토픽생성 form 유효성 검사 추가 * chore: update gitignore * fix: update value by useWatch * fix: lint error * fix: 로고색상 변경 #169 * feat: 토픽생성 유효성 검사 및 api 연동 * feat: 토픽생성 api dto 수정 * fix: 슬라이더 , 투표완료 컴포넌트 내 로고위치 수정 * fix: topic content 글자수에 따른 size 조정 * fix: 로그인 화면 로고 B 색상 수정 * fix: 슬라이더 topic content text z index 수정 * fix: api 변경에 따라 topic content 받아오도록 수정 * fix: topiccreate dto interface 위치 조정 * feat: Aside topiccreate api 연동 * fix: 절대경로로 수정 --------- Co-authored-by: 전진호 <[email protected]> * 토픽생성완료 후 로직 (#176) * fix: lineheight 1.4 기본값 적용 * feat: text, image icon 추가 * fix: padding 값 수정 * fix: 수정된 input theme으로 변경 * feat: 카테고리 input form 추가 * fix: 파일 로직 변경 * feat: 토픽생성 image input 컴포넌트 추가 * fix: textinput props 변경 * feat: 뒤로가기 로직을 위한 코드수정 * feat: B topic step2 추가 * feat: B topic step1 추가 * feat: B topic 페이지 추가 * feat: add delete icon * feat: add maxlength * fix: constant fix * fix: constant fix * fix: form fix * feat: add BTopicCreate Step2 page * feat: separate imageinput component * feat: add imgurl dto * feat: add topic deadline constant * fix: modal close button width, height fix * feat: 토픽생성 api 구축 * feat: 토픽생성 form 유효성 검사 추가 * chore: update gitignore * fix: update value by useWatch * fix: lint error * fix: 로고색상 변경 #169 * feat: 토픽생성 유효성 검사 및 api 연동 * feat: 토픽생성 api dto 수정 * fix: 슬라이더 , 투표완료 컴포넌트 내 로고위치 수정 * fix: topic content 글자수에 따른 size 조정 * fix: 로그인 화면 로고 B 색상 수정 * fix: 슬라이더 topic content text z index 수정 * fix: api 변경에 따라 topic content 받아오도록 수정 * fix: topiccreate dto interface 위치 조정 * feat: Aside topiccreate api 연동 * fix: 절대경로로 수정 * feat: 토픽생성 완료시 각 사이드 화면으로 이동 --------- Co-authored-by: 전진호 <[email protected]> * fix: remove enable option (#177) * fix: api url (#178) * Update cd.yml (#180) * fix: TopicCard nullable한 필드 예외처리 추가 (#183) * fix: change topics api url * fix: make TopicResponse's field nullable * fix: optionally render nullable content * feat: make topicSide type to TOPIC_A or TOPIC_B * fix: ATopicCard's topicSide format * 글자수,띄어쓰기에 따른 ui 조정 (#184) * fix: 선택지 글자수, 띄어쓰기에 따라 ui 조정 * fix: 토픽제목 글자수, 띄어쓰기에 따라 ui조정 * A 사이드 토픽 API 연결 (#185) * fix: rename alpha to a * feat: make useTopics to infiniteQuery * feat: make bg color to navy * fix: exclude isOpen from export * feat: add date util * fix: date distance option * feat: add commentCount and createAt to topic model * feat: add side to DTO * fix: remove dummy choices * feat: add comment sheet * fix: getDateDistanceText option condition * feat: add sort to useTopics * fix: vote to topic response * feat: add createdAt and asc to sort * fix: voteTopic response type * feat: add revealed condition * feat: export TopicsRequestDTO * fix: remove unused import * feat: add rea params to set exact query data * feat: add vote to topic * feat: add desc option * fix: timer endtime 수정 * fix: dealine 계산 방식 변경 * fix: 인증 로직 구현 (#188) * fix: remove accessToken from localStorage * feat: add Auth route * fix: change login and add relogin * fix: remove error condition * feat: �A topic 투표 응답 모델 수정 (#190) * feat: memoize ATopicCard * fix: add zIndex to show percentage * feat: add voteCount to Choice model * fix: remove req from useTopics * fix: useVoteTopic's onSucess handler * feat: enable scroll when height is not enough (#192) * feat: enable scroll when height is not enough * fix: move slide button inside slide * fix: slide button position --------- Co-authored-by: CHAEYOUNG SONG <[email protected]> Co-authored-by: chaeyoung103 <[email protected]>
team-offonoff · Feb 12, 2024 · 3e480e8 · 3e480e8
1 parent 64bd856
commit 3e480e8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 26 deletions.
diff --git a/src/components/Home/TopicCard/TopicCard.styles.tsx b/src/components/Home/TopicCard/TopicCard.styles.tsx
@@ -9,7 +9,7 @@ export const TopicCardContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: 100%;
+  margin-bottom: 100px;
   overflow: hidden;
 `;
 

diff --git a/src/components/Home/TopicCard/TopicCard.tsx b/src/components/Home/TopicCard/TopicCard.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useSwiperSlide } from 'swiper/react';
 
@@ -44,6 +44,8 @@ const TopicCard = ({ topic }: TopicCardProps) => {
   );
   const [latestComment, setLatestComment] = useState<LatestComment | undefined>();
 
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
   useEffect(() => {
     if (swiperSlide.isActive) {
       setSearchParams((searchParams) => {
@@ -76,7 +78,14 @@ const TopicCard = ({ topic }: TopicCardProps) => {
 
   return (
     <React.Fragment>
-      <TopicCardContainer>
+      <TopicCardContainer
+        ref={containerRef}
+        style={{
+          marginBottom: containerRef.current
+            ? window.innerHeight - containerRef.current.scrollHeight + 60
+            : 0,
+        }}
+      >
         <BestTopicCotainer>
           <Text size={18} color={colors.purple}>
             실시간 인기 토픽

diff --git a/src/components/Home/TopicSwiper/TopicSwiper.tsx b/src/components/Home/TopicSwiper/TopicSwiper.tsx
@@ -40,15 +40,6 @@ const TopicSwiper = ({ children, fetchNextPage, hasNextPage }: TopicSwiperProps)
 
   return (
     <React.Fragment>
-      <PrevButton
-        disabled={init || prevDisabled}
-        onClick={() => {
-          swiperRef.current?.slidePrev();
-          setNextDisabled(false);
-        }}
-      >
-        <RightChevronIcon style={{ transform: 'rotate(180deg)' }} stroke={colors.white_40} />
-      </PrevButton>
       <Swiper
         allowTouchMove={false}
         modules={[Navigation]}
@@ -61,23 +52,45 @@ const TopicSwiper = ({ children, fetchNextPage, hasNextPage }: TopicSwiperProps)
         observer={true}
       >
         {children.map((child, index) => (
-          <SwiperSlide key={index}>{child}</SwiperSlide>
+          <TopicSlide key={index} style={{ overflowY: 'auto' }}>
+            <PrevButton
+              disabled={init || prevDisabled}
+              onClick={() => {
+                swiperRef.current?.slidePrev();
+                setNextDisabled(false);
+              }}
+            >
+              <RightChevronIcon style={{ transform: 'rotate(180deg)' }} stroke={colors.white_40} />
+            </PrevButton>
+            {child}
+            <NextButton
+              disabled={nextDisabled}
+              onClick={() => {
+                swiperRef.current?.slideNext();
+                setPrevDisabled(false);
+              }}
+            >
+              <RightChevronIcon stroke={colors.white_40} />
+            </NextButton>
+          </TopicSlide>
         ))}
       </Swiper>
-      <NextButton
-        disabled={nextDisabled}
-        onClick={() => {
-          swiperRef.current?.slideNext();
-          setPrevDisabled(false);
-        }}
-      >
-        <RightChevronIcon stroke={colors.white_40} />
-      </NextButton>
     </React.Fragment>
   );
 };
 
+const TopicSlide = styled(SwiperSlide)`
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`;
+
 const SlideButton = styled.button<{ disabled: boolean }>`
+  position: absolute;
+  top: 63px;
   z-index: 100;
   width: 32px;
   height: 32px;
@@ -89,14 +102,10 @@ const SlideButton = styled.button<{ disabled: boolean }>`
 `;
 
 const PrevButton = styled(SlideButton)`
-  position: absolute;
-  top: 110px;
   left: 20px;
 `;
 
 const NextButton = styled(SlideButton)`
-  position: absolute;
-  top: 110px;
   right: 20px;
 `;