�fix(web-domains): about 페이지 자잘자잘 레이아웃 수정 (#143)

* fix(web-domains): 다음 질문인 카카오톡 공유하기 오지정 오류 해결 (#120) * refactor: 다음 질문인 공유 nextTarget field 추가 및 카카오 공유하기에 적용 * refactor: 버튼 디자인 시안에 맞게 large로 적용 * feat(web, web-domains): not-found 페이지 추가 (#137) * chore: not-found 페이지 * fix: 경로 export 수정 Co-authored-by: Doeun Kim <doeunnkimm@gmail.com> * fix: Icon 컴포넌트 분리 * fix: Icon 이름 수정 --------- Co-authored-by: Doeun Kim <doeunnkimm@gmail.com> * fix: 네비 + 플로팅 버튼 = 180px 하단 여백 확보 * fix: trigger child 영역 maxWidth 부여로 넘치는 것을 방지 * fix: trigger 아이콘이 상단에 붙도록 수정 * fix: 타이틀이 길어져도 # index 부분을 넘어가지 않도록 수정 * fix: 하단 여백 보장 * fix: 손 흔들기 버튼 위치 및 여백 수정 --------- Co-authored-by: 이세민 <89172499+semnil5202@users.noreply.github.com> Co-authored-by: leejeongho <92032081+LeeJeongHooo@users.noreply.github.com>
depromeet · Aug 25, 2024 · 30e043f · 30e043f
1 parent 90e9bca
commit 30e043f
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 16 deletions.
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
@@ -0,0 +1,7 @@
+import { Error404 } from '@sambad/web-domains/common';
+
+const NotFoundPage = () => {
+  return <Error404 />;
+};
+
+export default NotFoundPage;
diff --git a/packages/core/sds/src/components/Accordion/Trigger.tsx b/packages/core/sds/src/components/Accordion/Trigger.tsx
@@ -7,7 +7,7 @@ import { Icon } from '../Icon';
 
 import { arrowIconAttribute } from './constants';
 import { useAccordionContext, useAccordionItemContext } from './context';
-import { triggerCss } from './styles';
+import { triggerChildCss, triggerCss } from './styles';
 
 export interface AccordionTriggerProps extends HTMLAttributes<HTMLDivElement> {}
 
@@ -32,7 +32,7 @@ export const AccordionTrigger = forwardRef<HTMLDivElement, AccordionTriggerProps
       onClick={composeEventHandlers(onClick, handleItemOpen)}
       {...restProps}
     >
-      {children}
+      <span css={triggerChildCss}>{children}</span>
       <Icon name="angle-small-up" color={colors.grey600} {...arrowIconAttribute.attribute} />
     </div>
   );

diff --git a/packages/core/sds/src/components/Accordion/styles.ts b/packages/core/sds/src/components/Accordion/styles.ts
@@ -15,9 +15,15 @@ export const triggerCss = css({
   [`& ${arrowIconAttribute.querySelector}`]: {
     position: 'absolute',
     right: 0,
+    // NOTE: 상단 여백만큼 top 부여하여 정렬에 맞게 상단에 붙도록 top 부여
+    top: size['4xs'],
   },
 });
 
+export const triggerChildCss = css({
+  maxWidth: '93%',
+});
+
 export const itemCss = css({
   overflow: 'hidden',
 

diff --git a/packages/core/sds/src/components/Icon/assets/CrossCircle.tsx b/packages/core/sds/src/components/Icon/assets/CrossCircle.tsx
@@ -0,0 +1,14 @@
+import { IconAssetProps } from '../types';
+
+export const CrossCircle = (props: IconAssetProps) => {
+  const { color, size } = props;
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 65 64" fill="none" {...props}>
+      <path
+        d="M32.5 0C14.8269 0 0.5 14.3269 0.5 32C0.5 49.6731 14.8269 64 32.5 64C50.1731 64 64.5 49.6731 64.5 32C64.4809 14.3347 50.1653 0.019125 32.5 0ZM43.1666 38.8986C44.2503 39.896 44.3203 41.583 43.3229 42.6666C42.3255 43.7503 40.6385 43.8203 39.5549 42.8229C39.5006 42.773 39.4486 42.7209 39.3986 42.6666L32.5 35.7706L25.604 42.6666C24.5446 43.6898 22.8565 43.6604 21.8334 42.601C20.8354 41.5676 20.8354 39.9294 21.8334 38.896L28.7294 32L21.8334 25.104C20.8103 24.0446 20.8396 22.3565 21.899 21.3334C22.9324 20.3354 24.5706 20.3354 25.604 21.3334L32.5 28.2294L39.3986 21.3334C40.396 20.2498 42.083 20.1798 43.1666 21.1771C44.2503 22.1745 44.3203 23.8615 43.3229 24.9451C43.273 24.9994 43.2209 25.0514 43.1666 25.1014L36.2706 32L43.1666 38.8986Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
diff --git a/packages/core/sds/src/components/Icon/constants.ts b/packages/core/sds/src/components/Icon/constants.ts
@@ -13,6 +13,7 @@ import { CheckIconMeet } from './assets/CheckIcon';
 import { CloseIcon } from './assets/CloseIcon';
 import { CommentsIcon } from './assets/CommentsIcon';
 import { ConnectStar } from './assets/ConnectStar';
+import { CrossCircle } from './assets/CrossCircle';
 import { CrownIcon } from './assets/Crown';
 import { HandShaving } from './assets/HandShaving';
 import { HomeIcon } from './assets/HomeIcon';
@@ -56,4 +57,5 @@ export const iconMap = {
   stats: Stats,
   upload: Upload,
   check: CheckIcon,
+  'cross-circle': CrossCircle,
 };
diff --git a/packages/web-domains/src/about-me/features/containers/AboutMeContainer.tsx b/packages/web-domains/src/about-me/features/containers/AboutMeContainer.tsx
@@ -15,7 +15,7 @@ export const AboutMeContainer = () => {
   if (hasNoInfo) return <EmptyView title="아직 입력한 정보가 없어요" style={{ height: '300px' }} />;
 
   return (
-    <section style={{ padding: `${size['4xs']} 0` }}>
+    <section style={{ padding: `${size['4xs']} 0`, marginBottom: '180px' }}>
       <HobbyList contents={data?.hobbies} />
       <IntroduceBox content={data?.introduction} />
     </section>

diff --git a/packages/web-domains/src/about-me/features/containers/AnsweredQuestionsContainer.tsx b/packages/web-domains/src/about-me/features/containers/AnsweredQuestionsContainer.tsx
@@ -47,7 +47,7 @@ export const AnsweredQuestionsContainer = forwardRef<Ref>((_, ref) => {
   }
 
   return (
-    <section>
+    <section style={{ marginBottom: '180px' }}>
       <If condition={isModifyPage}>
         <Txt typography="title4" color={colors.grey600}>
           프로필에 표시할 질문 선택하기
@@ -68,10 +68,14 @@ export const AnsweredQuestionsContainer = forwardRef<Ref>((_, ref) => {
                 />
               </If>
               <Accordion.Trigger>
-                <Txt typography="subtitle1" color={colors.primary500} style={{ paddingRight: size['6xs'] }}>
-                  #{index + 1}
-                </Txt>
-                <Txt typography="subtitle1">{answer.title}</Txt>
+                <div style={{ display: 'flex' }}>
+                  <Txt typography="subtitle1" color={colors.primary500} style={{ paddingRight: size['6xs'] }}>
+                    #{index + 1}
+                  </Txt>
+                  <Txt as="p" typography="subtitle1">
+                    {answer.title}
+                  </Txt>
+                </div>
               </Accordion.Trigger>
             </div>
             <Accordion.Content>

diff --git a/packages/web-domains/src/about-me/features/containers/styles.ts b/packages/web-domains/src/about-me/features/containers/styles.ts
@@ -41,8 +41,11 @@ export const answerContentCss = css({
 });
 
 export const handWavingButtonCss = css({
-  position: 'absolute',
-  bottom: size['xl'],
+  position: 'fixed',
+  // NOTE: 좌우 여백을 고려한 너비 계산
+  width: `calc(100% - ${size['2xs']} * 2)`,
+  bottom: size['2xs'],
+  left: size['2xs'],
 });
 
 export const screenRootCss = css({

diff --git a/packages/web-domains/src/common/components/Error/404.tsx b/packages/web-domains/src/common/components/Error/404.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { css } from '@emotion/react';
+import { Icon, Txt } from '@sds/components';
+import { colors, size } from '@sds/theme';
+
+import { titleCss } from './styles';
+
+export const Error404 = () => {
+  return (
+    <div css={containerCss}>
+      <Icon name="cross-circle" size={65} color={colors.grey400} style={{ marginBottom: size.sm }} />
+      <h1 css={titleCss}>페이지를 찾을 수 없습니다</h1>
+      <Txt typography="body2" as="h2" color={colors.grey600} css={{ textAlign: 'center' }}>
+        죄송합니다. 원하시는 페이지를 찾을 수 없습니다.
+        <br />
+        요청하신 페이지가 사라졌거나, 잘못된 경로입니다.
+      </Txt>
+    </div>
+  );
+};
+
+const containerCss = css({
+  width: '100%',
+  height: '100dvh',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'relative',
+});
diff --git a/packages/web-domains/src/common/components/Error/index.ts b/packages/web-domains/src/common/components/Error/index.ts
@@ -1 +1,2 @@
 export { Error500 } from './500';
+export { Error404 } from './404';
diff --git a/packages/web-domains/src/common/index.ts b/packages/web-domains/src/common/index.ts
@@ -4,3 +4,4 @@ export { QueryClientProvider } from './contexts/QueryClientProvider';
 export { RootLayout } from './layout/RootLayout';
 export { GlobalStyle } from './styles/GlobalStyles';
 export { getWebDomain } from './utils/getWebDomain';
+export * from './components/Error';
diff --git a/packages/web-domains/src/home/features/my-profile/components/AboutMe.tsx b/packages/web-domains/src/home/features/my-profile/components/AboutMe.tsx
@@ -14,7 +14,7 @@ export const AboutMe = ({ info }: AboutMeProps) => {
   if (hasNoInfo) return <EmptyView title="아직 입력한 정보가 없어요" style={{ height: '300px' }} />;
 
   return (
-    <section style={{ padding: `${size['4xs']} 0` }}>
+    <section style={{ padding: `${size['4xs']} 0`, marginBottom: '180px' }}>
       <HobbyList contents={info?.hobbies} />
       <IntroduceBox content={info?.introduction} />
     </section>

diff --git a/packages/web-domains/src/home/features/my-profile/components/AnswerQuestions.tsx b/packages/web-domains/src/home/features/my-profile/components/AnswerQuestions.tsx
@@ -47,7 +47,7 @@ export const AnswerQuestions = forwardRef<Ref, AnswerQuestionsProps>(({ isModify
   }
 
   return (
-    <section>
+    <section style={{ marginBottom: '180px' }}>
       <If condition={isModifyPage}>
         <Txt typography="title4" color={colors.grey600}>
           프로필에 표시할 질문 선택하기
@@ -68,10 +68,14 @@ export const AnswerQuestions = forwardRef<Ref, AnswerQuestionsProps>(({ isModify
                 />
               </If>
               <Accordion.Trigger>
-                <Txt typography="subtitle1" color={colors.primary500} style={{ paddingRight: size['6xs'] }}>
-                  #{index + 1}
-                </Txt>
-                <Txt typography="subtitle1">{answer.title}</Txt>
+                <div style={{ display: 'flex' }}>
+                  <Txt typography="subtitle1" color={colors.primary500} style={{ paddingRight: size['6xs'] }}>
+                    #{index + 1}
+                  </Txt>
+                  <Txt as="p" typography="subtitle1">
+                    {answer.title}
+                  </Txt>
+                </div>
               </Accordion.Trigger>
             </div>
             <Accordion.Content>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { Error500 } from './500';
		export { Error404 } from './404';