feature: ChatList 페이지 레이아웃 제작 + 반응형 디자인 (#97)

* refactor: Home 레이아웃 수정 - PageContainer 스타일을 동적으로 받도록 수정 * refactor: PageContainer 컴포넌트 수정 - style props 받을 수 있도록 수정 - 다크모드 받을 수 있도록 수정 * refactor: 반응형 디자인 - AppHeader: max-width: 280px일 때 텍스트 폰트 줄이도록 수정 - Avatar: max-width: 280px일 때 아바타 크기 줄이도록 수정 * refactor: PageHeader 컴포넌트 수정 - max-width: 414px로 가지도록 수정 - cursor: pointer 가지도록 수정 * refactor: AvatarGroup 수정 - style props 받도록 수정 - AvatarGroup이 높이를 가지도록 수정 * refactor: Card 컴포넌트 수정 - PageContainer 수정에 따른 리팩토링 * feature: ChatList 페이지 구현 - chatRoomList 더미데이터 추가 - ChatRoomBubbles: chatRoomList를 받아서 ChatRoomBubble 렌더링 - ChatRoomBubble: 채팅방 생성 시점 기준 1일 이후를 D-Day로 설정한 타이머 추가 - max-width: 280px일 때 column이 하나로만 나오도록 반응형 디자인 * refactor: ChatRoomBubble 빌드 오류 수정 * fix: merge conflict 해결 * refactor: Card 컴포넌트의 Styled 태그 코드들 하단으로 이동 * hotfix: VITE_BASE_URL 환경변수 설정 (#113) * fix: VITE_BASE_URL 환경변수 설정 * fix: 띄어쓰기 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * feature: 이전대화방 MSW 설정 + framer-motion 효과 추가 - /api/v1/histories로 이전 대화방 목록 요청하도록 세팅 (+useQuery) - 로컬에서도 MSW 동작할 수 있도록 설정 --------- Co-authored-by: wukddang <[email protected]>
coffee-meet · Nov 19, 2023 · 311d156 · 311d156
1 parent e038693
commit 311d156
Show file tree

Hide file tree

Showing 12 changed files with 341 additions and 582 deletions.
diff --git a/src/apis/axios.ts b/src/apis/axios.ts
@@ -3,7 +3,10 @@ import axios from 'axios'
 import useAuthStore from '@/store/AuthStore'
 
 export const axiosAPI = axios.create({
-  baseURL: import.meta.env.VITE_BASE_URL,
+  baseURL:
+    process.env.NODE_ENV === 'development'
+      ? 'http://localhost:5173'
+      : import.meta.env.VITE_BASE_URL,
 })
 
 // Add a request interceptor

diff --git a/src/components/common/AppHeader/index.tsx b/src/components/common/AppHeader/index.tsx
@@ -19,6 +19,29 @@ const StyleAppHeader = styled.div<{ height?: string }>`
   padding: 6.5% 5% 7%;
 `
 
+const StyledAppHeaderLargeText = styled(Text)<Pick<AppHeaderProps, 'isDarkMode'>>`
+  font: Body_24;
+  font-weight: 600;
+  letter-spacing: -0.5;
+  color: ${({ isDarkMode }) => (isDarkMode ? palette.WHITE : palette.DARK_WHITE)};
+  margin-right: 5px;
+
+  @media (max-width: 280px) {
+    font-size: 1.25rem;
+  }
+`
+
+const StyledAppHeaderSmallText = styled(Text)<Pick<AppHeaderProps, 'isDarkMode'>>`
+  font: Body_18;
+  font-weight: 600;
+  letter-spacing: -0.5;
+  color: ${({ isDarkMode }) => (isDarkMode ? palette.WHITE : palette.DARK_WHITE)};
+
+  @media (max-width: 280px) {
+    font-size: 0.85rem;
+  }
+`
+
 type AppHeaderProps = {
   nickname: string
   isDarkMode: boolean
@@ -77,7 +100,8 @@ const AppHeader = ({ nickname, isDarkMode, height, toggleDarkMode }: AppHeaderPr
         )}
       </FlexBox>
       <FlexBox align={'flex-end'}>
-        <Text
+        <StyledAppHeaderLargeText
+          isDarkMode={isDarkMode}
           font={'Body_24'}
           fontWeight={600}
           letterSpacing={-0.5}
@@ -87,8 +111,9 @@ const AppHeader = ({ nickname, isDarkMode, height, toggleDarkMode }: AppHeaderPr
           }}
         >
           {nickname}
-        </Text>
-        <Text
+        </StyledAppHeaderLargeText>
+        <StyledAppHeaderSmallText
+          isDarkMode={isDarkMode}
           font={'Body_18'}
           fontWeight={600}
           letterSpacing={-0.5}
@@ -97,7 +122,7 @@ const AppHeader = ({ nickname, isDarkMode, height, toggleDarkMode }: AppHeaderPr
           }}
         >
           {'님, 안녕하세요! 오늘도 즐거운 커피밋! ☕️'}
-        </Text>
+        </StyledAppHeaderSmallText>
       </FlexBox>
     </StyleAppHeader>
   )

diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx
@@ -23,6 +23,15 @@ const StyledAvatar = styled.div<AvatarProps>`
   margin: ${(props) => `${props.margin}px`};
   border: ${(props) => (props.border ? props.border : 'none')};
   box-shadow: ${(props) => (props.shadow ? '0px 0px 10px rgba(0, 0, 0, 0.25)' : 'none')};
+
+  @media (max-width: 280px) {
+    width: ${(props) =>
+      typeof props.width === 'number' ? `${props.width * 0.95}px` : `calc(${props.width} * 0.95)`};
+    height: ${(props) =>
+      typeof props.height === 'number'
+        ? `${props.height * 0.95}px`
+        : `calc(${props.height} * 0.95)`};
+  }
 `
 
 /**

diff --git a/src/components/common/Buttons/IconButton/ParticularTopicButton.tsx b/src/components/common/Buttons/IconButton/ParticularTopicButton.tsx
@@ -12,6 +12,7 @@ type ParticularTopicButtonProps = {
 
 /**
  * @param isDarkMode - 다크모드 여부
+ * @param moveToParticularTopic? - 특정 주제로 대화하기 버튼 클릭 시 이동할 페이지
  */
 const ParticularTopicButton = ({
   isDarkMode,

diff --git a/src/components/common/PageContainer/index.tsx b/src/components/common/PageContainer/index.tsx
@@ -6,7 +6,6 @@ import { palette } from '@/styles/palette'
 const StyledPageContainer = styled.div<{ height: string; isDarkMode: boolean }>`
   width: 100%;
   height: ${({ height }) => height};
-  padding: 5% 5% 5%;
   background-color: ${({ isDarkMode }) => (isDarkMode ? palette.DARK_BLUE : palette.GRAY100)};
   border-top-right-radius: 20px;
   border-top-left-radius: 20px;
@@ -18,19 +17,26 @@ const StyledPageContainer = styled.div<{ height: string; isDarkMode: boolean }>`
 
 type PageContainerProps = {
   children: ReactNode
-  height?: string
   isDarkMode: boolean
+  height?: string
+  style?: React.CSSProperties
 }
 
 /**
  *
  * @param children - 자식 컴포넌트
+ * @param isDarkMode - 다크 모드 여부
  * @param height - 높이
- * @param isDarkMode - 다크모드 여부
+ * @param style - (Optional) React.CSSProperties
  */
-const PageContainer = ({ children, height = '77%', isDarkMode }: PageContainerProps) => {
+const PageContainer = ({
+  children,
+  height = '77%',
+  isDarkMode = false,
+  ...props
+}: PageContainerProps) => {
   return (
-    <StyledPageContainer height={height} isDarkMode={isDarkMode}>
+    <StyledPageContainer height={height} isDarkMode={isDarkMode} {...props}>
       {children}
     </StyledPageContainer>
   )

diff --git a/src/components/common/PageHeader/index.tsx b/src/components/common/PageHeader/index.tsx
@@ -3,10 +3,11 @@ import styled from '@emotion/styled'
 import { Text } from '@/components/common/Text'
 import { palette } from '@/styles/palette'
 
-const StylePageHeader = styled.div<{
+const StyledPageHeader = styled.div<{
   isDarkMode?: boolean
   hasBackground?: boolean
 }>`
+  max-width: 414px;
   width: 100%;
   height: 72px;
   padding: 0 18px;
@@ -33,7 +34,7 @@ const StylePageHeader = styled.div<{
       : 'transparent'};
 `
 
-const StyleIcon = styled.div`
+const StyledIcon = styled.div`
   width: 38px;
   height: 38px;
   display: flex;
@@ -49,6 +50,7 @@ type PageHeaderProps = {
   isDarkMode?: boolean
   hasBackground?: boolean
   onClick?: () => void
+  style?: React.CSSProperties
 }
 
 /**
@@ -60,10 +62,23 @@ type PageHeaderProps = {
  * @param onClick - (Optional) 클릭 이벤트
  */
 
-const PageHeader = ({ leftIcon, rightIcon, title, isDarkMode, hasBackground }: PageHeaderProps) => {
+const PageHeader = ({
+  leftIcon,
+  rightIcon,
+  title,
+  isDarkMode,
+  hasBackground,
+  ...props
+}: PageHeaderProps) => {
   return (
-    <StylePageHeader isDarkMode={isDarkMode} hasBackground={hasBackground}>
-      <StyleIcon>{leftIcon}</StyleIcon>
+    <StyledPageHeader isDarkMode={isDarkMode} hasBackground={hasBackground} {...props}>
+      <StyledIcon
+        style={{
+          cursor: 'pointer',
+        }}
+      >
+        {leftIcon}
+      </StyledIcon>
       <Text
         font={'Body_20'}
         fontWeight={600}
@@ -80,8 +95,14 @@ const PageHeader = ({ leftIcon, rightIcon, title, isDarkMode, hasBackground }: P
       >
         {title}
       </Text>
-      <StyleIcon>{rightIcon}</StyleIcon>
-    </StylePageHeader>
+      <StyledIcon
+        style={{
+          cursor: 'pointer',
+        }}
+      >
+        {rightIcon}
+      </StyledIcon>
+    </StyledPageHeader>
   )
 }
 

diff --git a/src/components/home/AvatarGroup.tsx b/src/components/home/AvatarGroup.tsx
@@ -2,44 +2,61 @@ import styled from '@emotion/styled'
 
 import Avatar from '@/components/common/Avatar'
 
-const StyleAvatarGroup = styled.div`
+const StyledAvatarGroup = styled.div<{ avatarHeight: number }>`
   display: flex;
-  position: relative;
-  justify-content: flex-end;
   align-items: center;
   width: 100%;
-  position: relative;
+  height: ${({ avatarHeight }) => `${avatarHeight}px`};
 `
 
-const StyleAvatarWrapper = styled.div`
+const StyledAvatarWrapper = styled.div`
   position: absolute;
-  right: 0;
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  width: 100%;
 `
 
 type AvatarGroupProps = {
   avatarList: string[]
+  avatarWidth?: number
+  avatarHeight?: number
+  style?: React.CSSProperties
 }
 
-const AvatarGroup = ({ avatarList }: AvatarGroupProps) => {
+/**
+ * @param avatarList: string[] - 아바타 이미지 리스트
+ * @param avatarWidth?: number - 아바타 이미지의 width 값
+ * @param avatarHeight?: number - 아바타 이미지의 height 값
+ * @param style?: React.CSSProperties - 컴포넌트 스타일
+ */
+
+const AvatarGroup = ({
+  avatarList,
+  avatarWidth = 34,
+  avatarHeight = 34,
+  ...props
+}: AvatarGroupProps) => {
   return (
-    <StyleAvatarGroup>
+    <StyledAvatarGroup avatarHeight={avatarHeight} {...props}>
       {avatarList.map((avatar, index) => {
         return (
-          <StyleAvatarWrapper
+          <StyledAvatarWrapper
             key={index}
             style={{
-              right: `${index * 15}px`,
+              right: `${index * 7}px`,
             }}
           >
-            <Avatar width={34} height={34} imgUrl={avatar} margin={'0'} border={'2px solid red'} />
-          </StyleAvatarWrapper>
+            <Avatar
+              width={avatarWidth}
+              height={avatarHeight}
+              imgUrl={avatar}
+              margin={'0'}
+              border={'2px solid red'}
+            />
+          </StyledAvatarWrapper>
         )
       })}
-    </StyleAvatarGroup>
+    </StyledAvatarGroup>
   )
 }