A 사이드 화면 구현

.eslintrc.cjs

@@ -28,12 +28,98 @@ module.exports = {
     },
   },
   rules: {
-    '@tanstack/query/exhaustive-deps': 'error',
-    '@tanstack/query/stable-query-client': 'error',
-    '@typescript-eslint/no-unused-vars': 'warn',
-    'no-empty-pattern': 'warn',
-    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
-    'import/no-unresolved': 'off',
+    'no-implicit-coercion': 'error',
+
+    'no-undef': 'off',
+
+    indent: 'off',
+    '@typescript-eslint/indent': 'off',
+    semi: 'off',
+
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    'no-extra-boolean-cast': 'off',
+
+    'getter-return': 'warn',
+
+    '@typescript-eslint/explicit-function-return-type': 'off',
+
+    '@typescript-eslint/no-use-before-define': 'off',
+
+    '@typescript-eslint/no-empty-interface': 'off',
+
+    '@typescript-eslint/no-parameter-properties': 'off',
+
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'util',
+            importNames: ['isArray'],
+            message: '`Array.isArray`를 대신 사용해주세요!',
+          },
+        ],
+      },
+    ],
+
+    'no-async-promise-executor': 'warn',
+    '@typescript-eslint/prefer-as-const': 'warn',
+    '@typescript-eslint/no-non-null-asserted-optional-chain': 'warn',
+    '@typescript-eslint/ban-types': 'warn',
+    '@typescript-eslint/no-inferrable-types': 'warn',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+        selector: 'variable',
+        leadingUnderscore: 'allow',
+      },
+      { format: ['camelCase', 'PascalCase'], selector: 'function' },
+      { format: ['PascalCase'], selector: 'interface' },
+      { format: ['PascalCase'], selector: 'typeAlias' },
+    ],
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
+    '@typescript-eslint/no-unused-vars': ['error', { ignoreRestSiblings: true }],
+    '@typescript-eslint/member-ordering': [
+      'error',
+      {
+        default: [
+          'public-static-field',
+          'private-static-field',
+          'public-instance-field',
+          'private-instance-field',
+          'public-constructor',
+          'private-constructor',
+          'public-instance-method',
+          'private-instance-method',
+        ],
+      },
+    ],
+    'no-warning-comments': [
+      'warn',
+      {
+        terms: ['TODO', 'FIXME', 'XXX', 'BUG'],
+        location: 'anywhere',
+      },
+    ],
+    'prefer-const': 'error',
+    'no-var': 'error',
+    curly: ['error', 'all'],
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'import/no-duplicates': 'error',
+
+    'react/prop-types': 'off',
+
+    'react/display-name': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+
+    '@typescript-eslint/no-var-requires': 'warn',
+    'react/react-in-jsx-scope': 'off',
     'import/order': [
       'error',
       {

index.html

@@ -6,7 +6,7 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
     <meta name="description" content="My Awesome App description" />
     <meta name="theme-color" content="#242036" />
     <title>AB - 세상의 모든 질문, AB로 답하다</title>

package.json

@@ -23,6 +23,7 @@
     "react-hook-form": "^7.49.2",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.16.0",
+    "react-uid": "^2.3.3",
     "styled-components": "^6.0.8",
     "styled-normalize": "^8.0.7",
     "swiper": "^11.0.4",

src/App.tsx

@@ -6,14 +6,16 @@ import { StyleSheetManager, ThemeProvider } from 'styled-components';
 import GlobalStyle from '@styles/global';
 import { theme } from '@styles/theme';
 
-import { enableScrollLock } from '@utils/scrollLock';
+import { initHeight } from '@utils/initHeight';
 
 import Router from './routes';
 
 const App = () => {
   const queryClient = new QueryClient();
 
-  useEffect(() => {}, []);
+  useEffect(() => {
+    initHeight();
+  }, []);
 
   return (
     <StyleSheetManager shouldForwardProp={() => true}>

src/assets/icons/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
 import ALogoIcon from './a-logo.svg?react';
 import ABLogoIcon from './ab-logo.svg?react';
 import ABIcon from './ab.svg?react';
@@ -28,6 +29,7 @@ import RotateIcon from './rotate.svg?react';
 import SizeUpIcon from './size-up.svg?react';
 import ThumbsIcon from './thumbs.svg?react';
 import TopicCreatBackgrounIcon from './topic-create-background.svg?react';
+import UpDownChevronIcon from './up-down.svg?react';
 import WriteBoxIcon from './write-box.svg?react';
 
 export {
@@ -61,5 +63,6 @@ export {
   SizeUpIcon,
   ThumbsIcon,
   TopicCreatBackgrounIcon,
+  UpDownChevronIcon,
   WriteBoxIcon,
 };

src/assets/styles/global.tsx

@@ -17,11 +17,22 @@ const GlobalStyle = styled.createGlobalStyle`
   }
 
   body {
-    min-height: 100vh;
     font-size: 1.6rem;
     background-color: #f6f6f6;
   }
 
+  html,
+  body,
+  #root {
+    width: 100vw;
+    height: calc(var(--vh, 1vh) * 100);
+
+    /* height: 100% !important; */
+
+    /* overflow: auto !important; */
+    -webkit-overflow-scrolling: touch !important;
+  }
+
   button {
     padding: 0;
     overflow: visible;

src/components/AlphaTopic/AlphaTopicCard.styles.tsx

@@ -0,0 +1,5 @@
+import { styled } from 'styled-components';
+
+const Container = styled.div``;
+
+export { Container };

src/components/AlphaTopic/AlphaTopicCard.tsx

@@ -0,0 +1,70 @@
+import Chip from '@components/commons/Chip/Chip';
+import CommentChip from '@components/commons/Chip/CommentChip';
+import { Col, Row } from '@components/commons/Flex/Flex';
+import ProgressBar from '@components/commons/ProgressBar/ProgressBar';
+import Text from '@components/commons/Text/Text';
+import { TopicResponse } from '@interfaces/api/topic';
+
+import { colors } from '@styles/theme';
+
+interface AlphaTopicCardProps extends TopicResponse {
+  chip?: 'popular' | 'close';
+}
+
+const AlphaTopicCard = (props: AlphaTopicCardProps) => {
+  const { chip, topicTitle } = props;
+
+  return (
+    <Col padding={'20px'}>
+      {chip && (
+        <Row style={{ marginBottom: 12 }}>
+          <Chip tintColor={'#D3FF9C'} label={'실시간 인기 토픽'} />
+        </Row>
+      )}
+      <Row justifyContent={'space-between'} style={{ marginBottom: 14 }}>
+        <Text size={18} weight={500} color={colors.white}>
+          {topicTitle}
+        </Text>
+        <button> - </button>
+      </Row>
+      <Col gap={5} style={{ marginBottom: 14 }}>
+        <ProgressBar
+          revealed={true}
+          highlighted={true}
+          title={'A'}
+          percentage={75}
+          onClick={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+          left={() => (
+            <Text color={1 === 1 ? colors.A_80 : colors.A_40} size={24} weight={900}>
+              A
+            </Text>
+          )}
+        />
+        <ProgressBar
+          revealed={true}
+          highlighted={false}
+          title={'B'}
+          percentage={25}
+          onClick={function (): void {
+            throw new Error('Function not implemented.');
+          }}
+          left={() => (
+            <Text color={1 === 1 ? colors.B_80 : colors.B_40} size={24} weight={900}>
+              B
+            </Text>
+          )}
+        />
+      </Col>
+      <Row justifyContent={'space-between'} alignItems={'center'}>
+        <Text size={13} color={colors.white_40}>
+          방금
+        </Text>
+        <CommentChip count={420} onClick={() => {}} />
+      </Row>
+    </Col>
+  );
+};
+
+export default AlphaTopicCard;

src/components/Notifications/TabHeader.tsx

@@ -17,7 +17,7 @@ const TabHeader = ({ currentTab, setCurrentTab }: TabHeaderProps) => {
     setCurrentTab(tabName);
   };
   return (
-    <Row justifyContent={'center'} gap={45} padding={'30px 0 24px 0'}>
+    <Row justifyContent={'center'} gap={45} padding={'30px 0 24px 0'} style={{ height: 76 }}>
       {NOTIFICATIONS_TABS.map((tabName) => {
         return (
           <div

src/components/commons/BottomNavigation/BottomNavigation.tsx

@@ -21,7 +21,7 @@ const BottomNavigation = () => {
           <SelectedHomeIcon width={26} height={26} />
           <Text size={12}>홈</Text>
         </StyledNavLink>
-        <StyledNavLink to={'/a'}>
+        <StyledNavLink to={'/topics/a'}>
           <ALogoIcon width={19} height={20} />
           <Text size={12}>A사이드</Text>
         </StyledNavLink>

src/components/commons/BottomSheet/BottomSheet.tsx

@@ -179,7 +179,7 @@ const Wrapper = styled(motion.div)`
   left: 0;
   z-index: ${(props) => props.theme.zIndex.sheet};
   max-width: 512px;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   margin: 0 auto;
 `;
 

src/components/commons/Chip/Chip.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { styled } from 'styled-components';
+
+import Text from '../Text/Text';
+
+interface ChipProps {
+  tintColor: string;
+  label: string;
+}
+
+const Chip = ({ tintColor, label }: ChipProps) => {
+  return (
+    <Container color={tintColor}>
+      <Dot color={tintColor} />
+      <Text size={13} weight={600} color={tintColor}>
+        {label}
+      </Text>
+    </Container>
+  );
+};
+
+const Dot = styled.div<{ color: string }>`
+  width: 14px;
+  height: 14px;
+  background-color: ${({ color }) => color};
+  border-radius: 50%;
+`;
+
+const Container = styled.button<{ color: string }>`
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: 2px 10px;
+  background-color: ${({ color }) => {
+    const hexToRgb = (hex: string) => {
+      const r = parseInt(hex.slice(1, 3), 16),
+        g = parseInt(hex.slice(3, 5), 16),
+        b = parseInt(hex.slice(5, 7), 16);
+      return [r, g, b];
+    };
+    const [r, g, b] = hexToRgb(color);
+    return `rgba(${r}, ${g}, ${b}, 0.2)`;
+  }};
+  border-radius: 20px;
+`;
+
+export default Chip;

src/components/commons/Chip/CommentChip.tsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+import { colors } from '@styles/theme';
+
+import { CommentIcon } from '@icons/index';
+
+import Text from '../Text/Text';
+
+interface CommentChipProps {
+  count: number;
+  onClick: () => void;
+}
+
+const CommentChip = ({ count, onClick }: CommentChipProps) => {
+  return (
+    <Container type="button" onClick={onClick}>
+      <CommentIcon width={18} height={18} />
+      <Text size={13} weight={400} color={colors.white}>
+        댓글
+      </Text>
+      <Text size={13} weight={400} color={colors.white_60}>
+        {count}
+      </Text>
+    </Container>
+  );
+};
+
+export default CommentChip;
+
+const Container = styled.button`
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 10px;
+  background-color: ${({ theme }) => theme.colors.black_40};
+  border-radius: 20px;
+`;