Merge pull request #20 from whatever-mentoring/dev

style: 모바일에 맞게 디자인 수정

src/assets/common.ts

@@ -5,8 +5,9 @@ import { Palette } from 'styles/Palette';
 export const EntireContainer = styled.div<{
   homebar?: boolean;
   background?: string;
+  padding?: string;
 }>`
-  padding: 25px 30px;
+  padding: ${({ padding }) => (padding ? padding : '25px 30px')};
   background: ${({ background }) => (background ? background : Palette.White)};
   height: ${({ homebar }) =>
     homebar ? 'calc(100dvh - 156px)' : 'calc(100dvh - 60px)'};
@@ -16,6 +17,11 @@ export const EntireContainer = styled.div<{
     display: none;
   }
 
+  // 쥬시글 둘러보기 메인페이지
+  .padding-container {
+    padding: 0px 30px;
+  }
+
   // 마이페이지
   .mypage-submenu-container {
     padding: 40px 0px;

src/components/Answer/Notice.tsx

@@ -14,7 +14,6 @@ const Notice = () => {
 export default Notice;
 
 const Container = styled(Column)`
-  padding: 30px;
   padding-bottom: 10px;
   gap: 5px;
 `;

src/components/Category/CategoryBar.tsx

@@ -57,7 +57,7 @@ const Categories = ({ ctgAll }: { ctgAll: boolean }) => {
 const Container = styled(Column)`
   width: 100%;
   gap: 6px;
-  padding: 10px 30px;
+  padding: 10px 0;
 `;
 const Title = () => {
   return <Typo.s1>카테고리</Typo.s1>;

src/components/common/Card.tsx

@@ -21,7 +21,9 @@ export const QTitleCard = () => {
       <Tag tagType={'question'}>
         <CategoryLabel>일상</CategoryLabel>
       </Tag>
-      <Title>글 제목입니다 글 제목입니다 글 제목입니다 글 제목입니다</Title>
+      <Title>
+        일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십일이삼사오륙칠팔구십
+      </Title>
       <Date>2023.09.11</Date>
     </Container>
   );
@@ -30,7 +32,7 @@ export const QContentCard = () => {
   return (
     <Container height={317} color={Palette.Main05} gap={14}>
       <Tag tagType={'question'}>
-        <Typo.b2 color={Palette.Main}>질문 내용</Typo.b2>
+        <Typo.b2>질문 내용</Typo.b2>
       </Tag>
       <ScrollBox>
         로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인
@@ -145,7 +147,7 @@ const Date = ({ children }: { children: string }) => {
 /* styles */
 
 const Container = styled(Column)<{ height?: number; color: string }>`
-  width: 330px;
+  width: 100%;
   ${({ height }) => height && `height: ${height}px`};
 
   padding: 27px 28px;
@@ -167,6 +169,7 @@ const Title = styled(Typo.h1)`
   display: flex;
   justify-content: center;
   align-items: center;
+  text-align: center;
 `;
 const AnsTitle = styled(Typo.h2)`
   height: 100%;

src/components/common/Homebar.tsx

@@ -33,8 +33,8 @@ const Homebar = () => {
           <Typo.homebar isOn={icons.isAnsOn}>답변하기</Typo.homebar>
         </Menu>
       ) : (
-        <Menu to="/answer">
-          <Icon src={`${pathname === '/answer' ? askOn : askOff}`} />
+        <Menu to="/ask">
+          <Icon src={`${pathname === '/ask' ? askOn : askOff}`} />
           <Typo.homebar isOn={icons.isAskOn}>질문하기</Typo.homebar>
         </Menu>
       )}

src/pages/Answer/WriteAnswer/index.tsx

@@ -8,10 +8,13 @@ import { Palette } from 'styles/Palette';
 const WriteAnswer = () => {
   return (
     <Column>
-      <Header borderBottom={true} color={Palette.Main}>
+      <Header borderBottom={true} color={Palette.Main} btn="back">
         답변하기
       </Header>
-      <EntireContainer>
+      <EntireContainer
+        homebar={false}
+        style={{ height: 'calc(100dvh - 119px)' }}
+      >
         <Column gap={22} alignItems="center">
           <QDetailCard />
           <WriteInputBox

src/pages/Answer/index.tsx

@@ -9,11 +9,13 @@ const Answer = () => {
   return (
     <Column>
       <Header borderBottom={true}>답변하기</Header>
-      <Notice></Notice>
-      <CategoryBar.container>
-        <CategoryBar.ctgs ctgAll={true} />
-      </CategoryBar.container>
-      <EntireContainer>
+      <EntireContainer homebar={true}>
+        <div style={{ padding: '10px 0' }}>
+          <Notice />
+          <CategoryBar.container>
+            <CategoryBar.ctgs ctgAll={true} />
+          </CategoryBar.container>
+        </div>
         <AnswersContainer />
       </EntireContainer>
       <Homebar />

src/pages/Ask/WriteQuestion/index.tsx

@@ -14,7 +14,10 @@ const WriteQuestion = () => {
       <Header borderBottom={false} btn={'back'}>
         질문하기
       </Header>
-      <EntireContainer>
+      <EntireContainer
+        homebar={false}
+        style={{ height: 'calc(100dvh - 119px)' }}
+      >
         <Column gap={18} alignItems="flex-start">
           <Typo.s2>제목(최대 100자)</Typo.s2>
           <Title />

src/pages/Ask/index.tsx

@@ -11,7 +11,7 @@ const Ask = () => {
   return (
     <Column>
       <Header borderBottom={false}>질문하기</Header>
-      <EntireContainer>
+      <EntireContainer homebar={true}>
         <InnerContainer justifyContent="space-between">
           <CTAText />
           <InnerContents>

src/pages/Main/index.tsx

@@ -22,17 +22,21 @@ const Main = () => {
       <Header borderBottom={false} btn={'search'}>
         쥬시글
       </Header>
-      <Column color={Palette.Gray05}>
-        <CategoryBar ctgAll={true} />
-        <CallToAction />
-      </Column>
-      <EntireContainer>
-        <Column gap={26}>
-          <StyledLink to="/post/1">
-            <CardSlider cards={cards} />
-          </StyledLink>
-          <CardSlider cards={cards} />
+      <EntireContainer homebar={true} padding="25px 0px">
+        <Column color={Palette.Gray05}>
+          <div className="padding-container">
+            <CategoryBar ctgAll={true} />
+          </div>
+          <CallToAction />
         </Column>
+        <div className="padding-container">
+          <Column gap={26}>
+            <StyledLink to="/post/1">
+              <CardSlider cards={cards} />
+            </StyledLink>
+            <CardSlider cards={cards} />
+          </Column>
+        </div>
       </EntireContainer>
       <Homebar />
     </Column>