Squashed commit of the following:

commit c941d1c Author: Jeon Jinho <[email protected]> Date: Fri Feb 23 01:46:01 2024 +0900 디자인 불일치 대거 수정 (#229) * feat: add comment box * fix: comment chip icon * fix: remove meatball button from a/b topic card * chore: add @toss/utils * feat: add formatToKoreanNumber * fix: RadioInput visibility * refactor(topic-card): separate header from comment box * refactor(comment-box): replace comment preview api * fix(topic-swiper): useSwiperSlide not working * fix(home): get b side topic only * feat: add width prop to Flex * feat: add isBig prop to commentBox * feat: add ellipsis prop to Text * feat: show CTA if comments empty * fix: add key prop to SwiperSlide * fix: add exception handling for comments by topic creator commit aa91526 Author: CHAEYOUNG SONG <[email protected]> Date: Wed Feb 21 17:01:02 2024 +0900 mypage 퍼블리싱 및 기능 구현 (#228) * fix: 사파리 이슈 textcolor 지정 * fix: 서버에서 응답이 없는경우 에러방지 * fix: 디자인과 다른 input ui 수정 * feat: 내정보수정 페이지로 이동 로직 추가 * style: 버튼 이름 변경 * feat: modifyprofile route 추가 * design: 디자인과 다른 ui 수정 * feat: 내정보수정 api 생성 * feat: 내정보 수정 페이지 퍼블리싱 및 api 연동 * feat: import ModifyProfile with lazy --------- Co-authored-by: 전진호 <[email protected]> commit 6dd66e4 Author: 전진호 <[email protected]> Date: Mon Feb 19 21:34:07 2024 +0900 fix: remove duplicated identifier commit 5ec1eb5 Merge: b1350d9 4ed3857 Author: Jeon Jinho <[email protected]> Date: Mon Feb 19 21:28:53 2024 +0900 Merge branch 'main' into dev commit b1350d9 Author: Jeon Jinho <[email protected]> Date: Mon Feb 19 16:11:17 2024 +0900 comment에 choice 추가해서 선택지 반영 (#222) commit 093fdbf Author: Jeon Jinho <[email protected]> Date: Mon Feb 19 16:11:05 2024 +0900 알림 화면에 뒤로가기 버튼 추가 (#220) commit 581907a Author: Jeon Jinho <[email protected]> Date: Mon Feb 19 16:09:47 2024 +0900 fix: 유저가 작성한 토픽인 경우 조회 가능하도록 수정 (#219) * fix: get method to throw error * fix: check if member created topic * fiX: remove console.log * refactor: remove another console.logs commit 7664e48 Author: Jeon Jinho <[email protected]> Date: Mon Feb 19 16:09:35 2024 +0900 A 사이드 토픽 카드 텍스트 영역 및 소수점 이슈 해결 (#218) * fix: round percentage * fix: make progress content hidden with ellipsis * fix: integrate to topic * fix: show toast on vote my topic commit 112de6d Author: Jeon Jinho <[email protected]> Date: Mon Feb 19 13:59:24 2024 +0900 fix: 토픽 작성자는 투표 불가 (#217) * chore: add react-toastify * feat: add zIndex type to theme * feat: Toast container * feat: show toast and reset slide * fix: make handleVote return Promise<boolean> commit d101c47 Merge: ef9eaee 0292560 Author: CHAEYOUNG SONG <[email protected]> Date: Mon Feb 19 00:14:32 2024 +0900 Merge pull request #215 from team-offonoff/feat/admin-login fix: admin login button commit 0292560 Author: 전진호 <[email protected]> Date: Mon Feb 19 00:10:32 2024 +0900 feat: add admin login button commit adf85b8 Author: 전진호 <[email protected]> Date: Sun Feb 18 23:41:07 2024 +0900 feat: replace to useOAuth commit 1fade9e Author: 전진호 <[email protected]> Date: Sun Feb 18 23:40:53 2024 +0900 fix: redirect user to login page on fail commit 196a011 Author: 전진호 <[email protected]> Date: Sun Feb 18 23:38:36 2024 +0900 feat: add useOAuth to authroize commonly commit 5b20728 Author: 전진호 <[email protected]> Date: Sun Feb 18 23:38:08 2024 +0900 fix: separate login url retrieve to function commit ef9eaee Author: Jeon Jinho <[email protected]> Date: Sat Feb 17 21:10:24 2024 +0900 fix: signup 화면 디자인 불일치 수정 (#213) * fix: make DefaultButton extends ButtonHTMLAttributes * feat: replace to DefaultButton * fix: radio button selected style * feat: navigate to home after consent to term commit 89f4201 Author: 전진호 <[email protected]> Date: Sat Feb 17 20:58:26 2024 +0900 fix: google redirect url commit ca79bec Author: Jeon Jinho <[email protected]> Date: Thu Feb 15 15:29:05 2024 +0900 Theme Color를 Layout에서 동적으로 수정 (#210) * chore: add react-helmet * feat: change theme color in layout commit 03d663e Merge: 370b532 25634ba Author: Jeon Jinho <[email protected]> Date: Wed Feb 14 20:06:01 2024 +0900 Merge pull request #205 from team-offonoff/feat/mypage 마이페이지 ui 및 기능 추가 commit 25634ba Merge: b4efd5b 370b532 Author: Jeon Jinho <[email protected]> Date: Wed Feb 14 20:05:42 2024 +0900 Merge branch 'dev' into feat/mypage commit b4efd5b Author: chaeyoung103 <[email protected]> Date: Wed Feb 14 20:01:52 2024 +0900 feat: 프로필 이미지 삭제하기 기능추가 delete api 연동 및 삭제하기 모달 추가 commit ecff063 Author: chaeyoung103 <[email protected]> Date: Wed Feb 14 20:01:12 2024 +0900 fix: 삭제하기 액션모달 사용을 위한 수정 commit 370b532 Merge: 360a128 da57fb0 Author: Jeon Jinho <[email protected]> Date: Wed Feb 14 19:44:54 2024 +0900 Merge pull request #203 from team-offonoff/feat/sentry-logging feat: add @sentry/react commit 360a128 Merge: d7e66db 3a3c64c Author: Jeon Jinho <[email protected]> Date: Wed Feb 14 19:44:42 2024 +0900 Merge pull request #202 from team-offonoff/feat/b-side-detail-page B 사이드 상세 페이지 구현 commit da57fb0 Author: 전진호 <[email protected]> Date: Wed Feb 14 19:37:34 2024 +0900 feat: thrwo Error for testing commit de3c598 Author: 전진호 <[email protected]> Date: Wed Feb 14 19:37:19 2024 +0900 feat: init sentry commit 5fbe1d6 Author: 전진호 <[email protected]> Date: Wed Feb 14 19:37:12 2024 +0900 feat: add @sentry/react commit 3a3c64c Author: 전진호 <[email protected]> Date: Wed Feb 14 19:29:44 2024 +0900 feat: navigate to detail page on click card commit 85379ef Author: 전진호 <[email protected]> Date: Wed Feb 14 19:29:16 2024 +0900 feat: add B side detail page commit dd5380f Author: 전진호 <[email protected]> Date: Wed Feb 14 19:27:57 2024 +0900 fix: make choiceSlide box-sizing to content-box commit 7fc2960 Author: 전진호 <[email protected]> Date: Wed Feb 14 19:27:34 2024 +0900 feat: add BackButton component commit ce9ae78 Author: 전진호 <[email protected]> Date: Wed Feb 14 18:41:15 2024 +0900 feat: separate loading component commit d7e66db Merge: e5d10fa 88040c3 Author: Jeon Jinho <[email protected]> Date: Wed Feb 14 18:36:34 2024 +0900 Merge pull request #201 from team-offonoff/feat/loading-screen Loading 화면 분리 commit 90fc26b Author: chaeyoung103 <[email protected]> Date: Wed Feb 14 16:13:58 2024 +0900 feat: 프로필 이미지 s3 업로드 및 프로필 이미지 변경 api 연동 commit 88040c3 Author: 전진호 <[email protected]> Date: Wed Feb 14 15:50:49 2024 +0900 feat: separate loading component commit e5d10fa Author: 전진호 <[email protected]> Date: Wed Feb 14 15:16:35 2024 +0900 fix: routes missing commit 564d19c Merge: 5ff3a6e 22d7eb1 Author: Jeon Jinho <[email protected]> Date: Wed Feb 14 15:15:14 2024 +0900 Merge pull request #199 from team-offonoff/feat/lazy-routes feat: load routes lazily commit 22d7eb1 Merge: b01f5a7 5ff3a6e Author: Jeon Jinho <[email protected]> Date: Wed Feb 14 15:14:43 2024 +0900 Merge branch 'dev' into feat/lazy-routes commit 5ff3a6e Merge: 4f28590 566d213 Author: Jeon Jinho <[email protected]> Date: Wed Feb 14 15:14:10 2024 +0900 Merge pull request #198 from team-offonoff/feat/b-side-page feat: B 사이드 토픽 홈 화면 구현 commit b01f5a7 Author: 전진호 <[email protected]> Date: Tue Feb 13 22:30:19 2024 +0900 feat: load routes lazily commit 566d213 Author: 전진호 <[email protected]> Date: Tue Feb 13 22:08:37 2024 +0900 fix: render BTopicCard commit ed0f863 Author: 전진호 <[email protected]> Date: Tue Feb 13 21:58:44 2024 +0900 feat: implements BTopicCard commit 853df2a Author: 전진호 <[email protected]> Date: Tue Feb 13 21:58:21 2024 +0900 feat: implements BTopicChoice commit c1b28ef Author: 전진호 <[email protected]> Date: Tue Feb 13 21:54:23 2024 +0900 feat: add backgroundColor as optional commit 54875a5 Author: 전진호 <[email protected]> Date: Tue Feb 13 20:08:58 2024 +0900 fix: remove transition from body commit 4ef34b5 Author: 전진호 <[email protected]> Date: Tue Feb 13 19:59:11 2024 +0900 fix: separate onVote commit 2c0c540 Author: 전진호 <[email protected]> Date: Tue Feb 13 17:49:04 2024 +0900 feat: add b topics background color commit 3977e6d Author: 전진호 <[email protected]> Date: Tue Feb 13 17:48:27 2024 +0900 fix: b nav item to commit 67bd612 Author: 전진호 <[email protected]> Date: Tue Feb 13 17:14:37 2024 +0900 feat: rename ATopics and add BTopics commit d0bec20 Merge: 72aaca6 4f28590 Author: chaeyoung103 <[email protected]> Date: Tue Feb 13 16:34:58 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage commit 72aaca6 Author: chaeyoung103 <[email protected]> Date: Mon Feb 12 20:26:12 2024 +0900 feat: mypage 모달 생성, 앨범 기능 추가 commit 1936187 Merge: 629e617 413afd3 Author: chaeyoung103 <[email protected]> Date: Mon Feb 12 17:44:21 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage commit 629e617 Merge: 55d5c17 b77acf8 Author: chaeyoung103 <[email protected]> Date: Fri Feb 9 22:46:07 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage commit 55d5c17 Merge: f5be359 55e8442 Author: chaeyoung103 <[email protected]> Date: Fri Feb 9 22:38:11 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage commit f5be359 Merge: 39fc1c1 3a24467 Author: chaeyoung103 <[email protected]> Date: Fri Feb 9 20:56:42 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage commit 39fc1c1 Author: chaeyoung103 <[email protected]> Date: Fri Feb 9 17:57:44 2024 +0900 feat: mypage ui 생성 commit 682c926 Merge: 7e36b4e da45f52 Author: chaeyoung103 <[email protected]> Date: Fri Feb 9 16:18:26 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage commit 7e36b4e Merge: b532fb5 2624766 Author: chaeyoung103 <[email protected]> Date: Thu Feb 8 21:53:48 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage commit b532fb5 Merge: 185fc29 0d1fdb5 Author: chaeyoung103 <[email protected]> Date: Thu Feb 8 21:32:20 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage commit 185fc29 Merge: d892fd5 2232cb4 Author: chaeyoung103 <[email protected]> Date: Thu Feb 8 21:29:12 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage commit d892fd5 Merge: ac72441 8c74cf2 Author: chaeyoung103 <[email protected]> Date: Thu Feb 8 21:26:21 2024 +0900 Merge remote-tracking branch 'origin/dev' into feat/mypage
team-offonoff · Feb 22, 2024 · 476ea1a · 476ea1a
1 parent 49d4ba6
commit 476ea1a
Show file tree

Hide file tree

Showing 38 changed files with 727 additions and 371 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@sentry/react": "^7.101.0",
     "@tanstack/react-query": "^5.4.3",
     "@toss/date": "^1.1.8",
+    "@toss/utils": "^1.4.6",
     "@types/styled-components": "^5.1.28",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",

diff --git a/src/apis/comment/useComment.ts b/src/apis/comment/useComment.ts
@@ -6,7 +6,7 @@ import {
   useQueryClient,
 } from '@tanstack/react-query';
 
-import { CommentReaction, CommentResponse } from '@interfaces/api/comment';
+import { CommentReaction, CommentResponse, LatestComment } from '@interfaces/api/comment';
 
 import { PagingDataResponse } from '@interfaces/api';
 
@@ -20,6 +20,10 @@ const getComments = ({ topicId, page, size }: { topicId: number; page: number; s
   );
 };
 
+const getCommentPreview = (topicId: number) => {
+  return client.get<LatestComment>(`/topics/${topicId}/comment`);
+};
+
 const createComments = ({ topicId, content }: { topicId: number; content: string }) => {
   return client.post<CommentResponse>({
     path: `/comments`,
@@ -47,10 +51,10 @@ const useComments = (topicId: number) => {
   });
 };
 
-const useLatestComment = (topicId: number, enabled: boolean) => {
+const usePreviewComment = (topicId: number, enabled: boolean) => {
   return useQuery({
     queryKey: [COMMENT_KEY, 'latest', topicId],
-    queryFn: () => getComments({ topicId: topicId, page: 0, size: 1 }),
+    queryFn: () => getCommentPreview(topicId),
     enabled: enabled,
   });
 };
@@ -96,4 +100,4 @@ const useReactComment = (topicId: number, commentId: number) => {
   });
 };
 
-export { COMMENT_KEY, useComments, useCreateComment, useReactComment, useLatestComment };
+export { COMMENT_KEY, useComments, useCreateComment, useReactComment, usePreviewComment };
diff --git a/src/apis/fetch.ts b/src/apis/fetch.ts
@@ -74,13 +74,21 @@ class Fetch {
       body: JSON.stringify(body),
     });
 
-    const data = await response.json();
-
     if (!response.ok) {
+      const data = await response.json();
       throw new ResponseError(data);
     }
 
-    return data as TData;
+    // 응답 본문이 있는지 확인
+    const text = await response.text();
+    if (text) {
+      // 응답 본문이 있으면 JSON으로 파싱
+      const data = JSON.parse(text);
+      return data as TData;
+    } else {
+      // 응답 본문이 없으면 null 반환
+      return null;
+    }
   }
 
   async delete<T>(path: string, body?: object): Promise<T> {

diff --git a/src/apis/profile/useProfile.ts b/src/apis/profile/useProfile.ts
@@ -1,18 +1,13 @@
 import { useMutation } from '@tanstack/react-query';
 
-import { PresignedURLResponse, ProfileResponse } from '@interfaces/api/profile';
+import {
+  ModifyProfileRequestDTO,
+  PresignedURLResponse,
+  ProfileResponse,
+} from '@interfaces/api/profile';
 
 import client from '@apis/fetch';
 
-// export interface profileRequestDTO {
-//   status?: 'VOTING' | 'CLOSED';
-//   keyword_id?: number;
-//   page?: number;
-//   size?: number;
-//   sort?: string;
-//   side?: 'TOPIC_A' | 'TOPIC_B';
-// }
-
 const getProfile = () => {
   return client.get<ProfileResponse>('/members/profile');
 };
@@ -35,6 +30,13 @@ const updateProfileImgURL = (profileImgURL: string) => {
   });
 };
 
+const modifyProfile = (req: ModifyProfileRequestDTO) => {
+  return client.put({
+    path: `/members/profile/information`,
+    body: req,
+  });
+};
+
 const deleteProfileImg = () => {
   return client.delete(`/members/profile/image`);
 };
@@ -51,4 +53,14 @@ const useDeleteProfileImg = () => {
   return useMutation({ mutationFn: () => deleteProfileImg() });
 };
 
-export { getProfile, useGetPresignedURL, useUpdateProfileImgURL, useDeleteProfileImg };
+const useModifyProfile = () => {
+  return useMutation({ mutationFn: modifyProfile });
+};
+
+export {
+  getProfile,
+  useGetPresignedURL,
+  useUpdateProfileImgURL,
+  useDeleteProfileImg,
+  useModifyProfile,
+};
diff --git a/src/assets/icons/comment-box.svg b/src/assets/icons/comment-box.svg
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -15,6 +15,7 @@ import CameraIcon from './camera.svg?react';
 import CheckIcon from './check.svg?react';
 import ClockIcon from './clock.svg?react';
 import CloseIcon from './close.svg?react';
+import CommentBoxIcon from './comment-box.svg?react';
 import CommentIcon from './comment.svg?react';
 import DefaultProfileIcon from './default-profile.svg?react';
 import DeleteIcon from './delete.svg?react';
@@ -60,6 +61,7 @@ export {
   ClockIcon,
   CloseIcon,
   CommentIcon,
+  CommentBoxIcon,
   DefaultProfileIcon,
   DownChevronIcon,
   GoogleIcon,

diff --git a/src/components/A/ATopicCard.tsx b/src/components/A/ATopicCard.tsx
@@ -12,6 +12,8 @@ import { TopicResponse } from '@interfaces/api/topic';
 
 import { colors } from '@styles/theme';
 
+import { MeatballIcon } from '@icons/index';
+
 import { getDateDiff } from '@utils/date';
 
 interface AlphaTopicCardProps {
@@ -34,6 +36,8 @@ const AlphaTopicCard = React.memo(({ topic, onVote, chip }: AlphaTopicCardProps)
     onVote(topic.topicId, side);
   };
 
+  const handleOptionClick = () => {};
+
   return (
     <>
       <Col padding={'20px'}>
@@ -46,7 +50,10 @@ const AlphaTopicCard = React.memo(({ topic, onVote, chip }: AlphaTopicCardProps)
           <Text size={18} weight={500} color={colors.white}>
             {topic.topicTitle}
           </Text>
-          <button> - </button>
+          {/* TBD: 1차 스펙 아웃 */}
+          {/* <button onClick={handleOptionClick}>
+            <MeatballIcon fill={colors.white_60} />
+          </button> */}
         </Row>
         <Col gap={5} style={{ marginBottom: 14 }}>
           <ProgressBar

diff --git a/src/components/B/BTopicCard.tsx b/src/components/B/BTopicCard.tsx
@@ -8,6 +8,8 @@ import { TopicResponse } from '@interfaces/api/topic';
 
 import { colors } from '@styles/theme';
 
+import { MeatballIcon } from '@icons/index';
+
 import { getDateDiff } from '@utils/date';
 
 import { CardContainer, CardFooter } from './BTopicCard.styles';
@@ -24,6 +26,8 @@ const BTopicCard = ({ topic }: BTopicCardProps) => {
     navigate(`/topics/b/${topic.topicId}`, { state: { topic } });
   };
 
+  const handleOptionClick = () => {};
+
   return (
     <>
       <CardContainer onClick={handleCardClick}>
@@ -57,7 +61,10 @@ const BTopicCard = ({ topic }: BTopicCardProps) => {
             <Text size={18} weight={600} color={colors.white}>
               {topic.topicTitle}
             </Text>
-            <button>-</button>
+            {/* TBD: 1차 스펙 아웃 */}
+            {/* <button onClick={handleOptionClick}>
+              <MeatballIcon fill={colors.white_60} />
+            </button> */}
           </Row>
           <Row gap={5}>
             <BTopicChoice

diff --git a/src/components/Home/Comment/Comment.tsx b/src/components/Home/Comment/Comment.tsx
@@ -83,10 +83,18 @@ const Comment = React.memo(({ comment, choices }: CommentProps) => {
               </Row>
               <Text
                 size={14}
-                color={comment.writersVotedOption === 'CHOICE_A' ? colors.A_60 : colors.B_60}
+                color={
+                  comment.writersVotedOption
+                    ? comment.writersVotedOption === 'CHOICE_A'
+                      ? colors.A_60
+                      : colors.B_60
+                    : colors.purple
+                }
                 weight={600}
               >
-                {choices[comment.writersVotedOption === 'CHOICE_A' ? 0 : 1].content.text}
+                {comment.writersVotedOption
+                  ? choices[comment.writersVotedOption === 'CHOICE_A' ? 0 : 1].content.text
+                  : '작성자'}
               </Text>
             </Col>
           </Row>

diff --git a/src/components/Home/CommentBox/CommentBox.styles.tsx b/src/components/Home/CommentBox/CommentBox.styles.tsx
@@ -9,22 +9,6 @@ export const CommentContainer = styled.div`
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  padding: 41px 20px 0;
-`;
-
-export const CommentHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 22px;
-`;
-
-export const KeywordContainer = styled.div`
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  justify-content: flex-start;
 `;
 
 export const CommnetBodyContainer = styled.div`
@@ -41,8 +25,7 @@ export const CommentInfoContainer = styled.div`
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  height: 40px;
-  padding: 0 16px;
+  padding: 10px 16px;
   margin-top: 11px;
   background-color: #64519b;
   border-radius: 10px 10px 0 0;
@@ -54,46 +37,36 @@ export const Comment = styled.div`
   display: flex;
   gap: 10px;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   width: 100%;
-  height: 57px;
-  padding: 0 16px;
   background-color: ${colors.navy2};
   border-radius: 0 0 10px 10px;
 `;
 
 export const Blur = styled('div')<{ $voted: boolean }>`
   box-sizing: border-box;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  justify-content: flex-start;
   width: 100%;
-  height: 29px;
   background-color: transparent;
-  filter: ${(props) => (!props.$voted ? 'blur(2px)' : 'blur(0px)')};
+  filter: ${(props) => (!props.$voted ? 'blur(2px)' : 'unset')};
 `;
 
 export const HighlightText = styled.span`
   color: white;
 `;
 
 export const CommentButton = styled.button`
-  position: absolute;
-  top: 50%;
-  left: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 140px;
   height: 30px;
   padding: 4px 14px;
+  margin: 14px 0;
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 0%;
   color: ${colors.white};
   text-align: center;
   background-color: ${colors.purple};
   border-radius: 91px;
-  transform: translate(-50%, -50%);
 `;