[Design] Mobile ver. - ApplyPage, ReviewPage 구현 (#401)

* cherry-pick: useDevice 기본인수 추가 및 Footer mobMax 설정 * chore: 임시 gitignore 수정 * design: ApplyHeader 반응형 * design: ApplyInfo 반응형 * design: BottomSection 반응형 * design: CommonSection 반응형 * design: DefaultSection 반응형 * design: ~Section container align center 추가 * "design: FileInput 반응형" " design: FileInput 반응형 * design: Info 반응형 * design: LinkInput 반응형 * chore: 임시 .gitignore 해제 * design: PartSection 반응형 및 section 공통 style 분리 * design: ApplyHeader 반응형 * fix: 테스트용 분기 수정 제거 * design: ApplyPage 전체 검토 * design: ReviewPage ApplyCategory top 추가 * fix: DEVICE_TYPE -> deviceType * fix: App.tsx import 에러 수정
sopt-makers · Aug 15, 2024 · 50e960a · 50e960a
1 parent d39fcce
commit 50e960a
Show file tree

Hide file tree

Showing 34 changed files with 793 additions and 232 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,6 +12,7 @@ import Layout from '@components/Layout';
 import { RecruitingInfoContext, RecruitingInfoType } from '@store/recruitingInfoContext';
 import { ModeType, ThemeContext } from '@store/themeContext';
 import { dark, light } from 'styles/theme.css';
+import { SessionExpiredDialog } from 'views/dialogs';
 import ErrorPage from 'views/ErrorPage';
 import MainPage from 'views/MainPage';
 import PasswordPage from 'views/PasswordPage';
@@ -20,7 +21,6 @@ import ReviewPage from 'views/ReviewPage';
 import SignupPage from 'views/SignupPage';
 
 import 'styles/reset.css';
-import { SessionExpiredDialog } from 'views/dialogs';
 
 const router = createBrowserRouter([
  {

diff --git a/src/common/components/Dialog/index.tsx b/src/common/components/Dialog/index.tsx
@@ -10,10 +10,10 @@ interface DialogProps extends DialogHTMLAttributes<HTMLDialogElement> {
 }
 
 const Dialog = forwardRef<HTMLDialogElement, DialogProps>(({ children, ...dialogElementProps }: DialogProps, ref) => {
- const DEVICE_TYPE = useDevice();
+ const deviceType = useDevice();
 
  return createPortal(
- <dialog ref={ref} className={containerVar[DEVICE_TYPE]} {...dialogElementProps}>
+ <dialog ref={ref} className={containerVar[deviceType]} {...dialogElementProps}>
  {children}
  </dialog>,
  document.getElementById('modal')!,

diff --git a/src/views/ApplyPage/components/ApplyCategory/index.tsx b/src/views/ApplyPage/components/ApplyCategory/index.tsx
@@ -1,24 +1,29 @@
 import { memo } from 'react';
 import { Link } from 'react-router-dom';
 
+import { useDevice } from '@hooks/useDevice';
 import useScrollPosition from '@hooks/useScrollPosition';
 
 import { CATEGORY } from './constant';
-import { activeLinkStyle, categoryLinkStyle, categoryList, container } from './style.css';
+import { activeLinkStyleVar, categoryLinkStyleVar, categoryList, container, containerVar } from './style.css';
 
 interface ApplyCategoryProps {
  isReview: boolean;
  minIndex: number;
 }
 const ApplyCategory = memo(({ isReview, minIndex }: ApplyCategoryProps) => {
+ const deviceType = useDevice();
  const { isScrollingDown, isScrollTop } = useScrollPosition(isReview ? 380 : 950);
 
  return (
- <nav className={container[isScrollingDown && !isScrollTop ? 'scrollDown' : 'scrollUp']}>
+ <nav
+ className={`${container[isScrollingDown && !isScrollTop ? 'scrollDown' : 'scrollUp']} ${containerVar[isReview && deviceType === 'TAB' ? 'REVIEW_TAB' : deviceType]}`}>
  <ul className={categoryList}>
  {CATEGORY.map(({ index, text, path }) => (
  <li key={path}>
- <Link to={path} className={minIndex === index ? activeLinkStyle : categoryLinkStyle}>
+ <Link
+ to={path}
+ className={`${activeLinkStyleVar[minIndex === index ? 'active' : 'default']} ${categoryLinkStyleVar[deviceType]}`}>
  {text}
  </Link>
  </li>

diff --git a/src/views/ApplyPage/components/ApplyCategory/style.css.ts b/src/views/ApplyPage/components/ApplyCategory/style.css.ts
@@ -6,11 +6,9 @@ import { theme } from 'styles/theme.css';
 export const containerBase = style({
  display: 'flex',
  justifyContent: 'center',
- width: 1440,
  margin: '0px auto',
 
  position: 'sticky',
- top: 178,
 
  backgroundColor: theme.color.white,
  zIndex: Z_INDEX.applyCategory,
@@ -35,21 +33,32 @@ export const container = styleVariants({
  ],
 });
 
+export const containerVar = styleVariants({
+ DESK: {
+ top: 178,
+ },
+ TAB: {
+ top: 238,
+ },
+ MOB: {
+ top: 153,
+ },
+ REVIEW_TAB: {
+ top: 177,
+ },
+});
+
 export const categoryList = style({
  display: 'flex',
 });
 
-export const categoryLinkStyle = style({
+const categoryLinkStyle = style({
  display: 'flex',
  justifyContent: 'center',
- width: 240,
- padding: '26px 0',
- ...theme.font.HEADING_6_18_B,
- color: theme.color.lightestText,
  backgroundColor: theme.color.white,
- borderBottom: `2px solid transparent`,
+ minWidth: 104,
 
- transition: 'all 0.2s ease-out',
+ transition: 'background-color 0.2s ease-out, color 0.2s ease',
 
  selectors: {
  '&:hover': {
@@ -59,10 +68,40 @@ export const categoryLinkStyle = style({
  },
 });
 
-export const activeLinkStyle = style([
- categoryLinkStyle,
- {
+export const activeLinkStyleVar = styleVariants({
+ active: {
  color: theme.color.primary,
- borderBottom: `2px solid ${theme.color.primary}`,
+ borderBottom: `4px solid ${theme.color.primary}`,
+ },
+ default: {
+ color: theme.color.lightestText,
+ borderBottom: `2px solid transparent`,
  },
-]);
+});
+
+export const categoryLinkStyleVar = styleVariants({
+ DESK: [
+ categoryLinkStyle,
+ {
+ width: 240,
+ padding: '26px 0',
+ ...theme.font.HEADING_6_18_B,
+ },
+ ],
+ TAB: [
+ categoryLinkStyle,
+ {
+ width: 'calc(129px + (111 * ((100vw - 431px) / 337)))',
+ padding: '26px 0',
+ ...theme.font.HEADING_7_16_B,
+ },
+ ],
+ MOB: [
+ categoryLinkStyle,
+ {
+ width: 'calc(104px + (25 * ((100vw - 375px) / 56)))',
+ padding: '16px 0',
+ ...theme.font.HEADING_7_16_B,
+ },
+ ],
+});
diff --git a/src/views/ApplyPage/components/ApplyHeader/index.tsx b/src/views/ApplyPage/components/ApplyHeader/index.tsx
@@ -2,9 +2,10 @@ import { useContext } from 'react';
 
 import Button from '@components/Button';
 import Title from '@components/Title';
+import { useDevice } from '@hooks/useDevice';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 
-import { buttonWrapper, headerContainer } from './style.css';
+import { buttonWrapper, headerContainerVar } from './style.css';
 
 interface ApplyHeaderProps {
  isReview: boolean;
@@ -14,16 +15,17 @@ interface ApplyHeaderProps {
 }
 
 const ApplyHeader = ({ isReview, isLoading, onSaveDraft, onSubmitData }: ApplyHeaderProps) => {
+ const deviceType = useDevice();
  const {
  recruitingInfo: { soptName, season, group, isMakers },
  } = useContext(RecruitingInfoContext);
 
  return (
- <header className={headerContainer}>
+ <header className={headerContainerVar[deviceType]}>
  <Title>
  {season}기 {isMakers ? soptName : group} 지원서
  </Title>
- {!isReview && (
+ {!isReview && deviceType !== 'MOB' && (
  <div className={buttonWrapper}>
  <Button isLoading={isLoading} onClick={onSaveDraft} buttonStyle="line" padding="10x24">
  임시저장

diff --git a/src/views/ApplyPage/components/ApplyHeader/style.css.ts b/src/views/ApplyPage/components/ApplyHeader/style.css.ts
@@ -1,22 +1,51 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 
 import { Z_INDEX } from '@constants/zIndex';
 import { theme } from 'styles/theme.css';
 
-export const headerContainer = style({
+const headerContainer = style({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
- padding: '24px 360px 20px',
  position: 'sticky',
- top: 74,
- width: 1440,
- margin: '60px auto 0px',
  boxShadow: `0 0 0 1px ${theme.color.white}`,
  backgroundColor: theme.color.white,
  zIndex: Z_INDEX.applyHeader,
 });
 
+export const headerContainerVar = styleVariants({
+ DESK: [
+ headerContainer,
+ {
+ padding: '24px 0 20px 6px',
+ margin: '60px auto 0px',
+
+ top: 79,
+ width: 732,
+ },
+ ],
+ TAB: [
+ headerContainer,
+ {
+ flexDirection: 'column',
+ alignItems: 'baseline',
+ gap: 13,
+ top: 73,
+ width: 431,
+ padding: '24px 32px 20px',
+ margin: '60px auto 0px',
+ },
+ ],
+ MOB: [
+ headerContainer,
+ {
+ padding: '23px 31.5px 20px',
+ top: 73,
+ width: 375,
+ },
+ ],
+});
+
 export const buttonWrapper = style({
  display: 'flex',
  gap: 8,

diff --git a/src/views/ApplyPage/components/ApplyInfo/index.tsx b/src/views/ApplyPage/components/ApplyInfo/index.tsx
@@ -3,21 +3,23 @@ import { ko } from 'date-fns/locale';
 import { memo, useContext } from 'react';
 
 import Callout from '@components/Callout';
+import { useDevice } from '@hooks/useDevice';
 import { RecruitingInfoContext } from '@store/recruitingInfoContext';
 
 import {
  dateItems,
- dateLabel,
- dateText,
+ dateLabelVar,
+ dateTextVar,
  dateWrapper,
- infoContainer,
- infoItems,
+ infoContainerVar,
  infoItemsBold,
- infoWrapper,
+ infoItemsVar,
+ infoWrapperVar,
 } from './style.css';
 import { APPLY_INFO } from '../../constant';
 
 const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
+ const deviceType = useDevice();
  const {
  recruitingInfo: {
  applicationStart,
@@ -49,10 +51,10 @@ const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
  const formattedFinalPassConfirmStart = format(new Date(finalPassConfirmStart || ''), 'M월 dd일 (E)', { locale: ko });
 
  return (
- <section className={infoContainer}>
+ <section className={infoContainerVar[deviceType]}>
  {!isReview && (
- <ul className={infoWrapper}>
- <li key="first-info" className={infoItems}>
+ <ul className={infoWrapperVar[deviceType]}>
+ <li key="first-info" className={infoItemsVar[deviceType]}>
  지원서 작성 전에{` `}
  <a
  href="https://makers.sopt.org/recruit"
@@ -64,7 +66,7 @@ const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
  을 꼭 숙지하고 지원해 주시기 바랍니다.
  </li>
  {APPLY_INFO.sections.map(({ id, content }) => (
- <li key={id} className={infoItems}>
+ <li key={id} className={infoItemsVar[deviceType]}>
  {content.map(({ text, weight }) => (
  <span key={text} className={weight === 'strong' ? infoItemsBold : ''}>
  {text}
@@ -82,20 +84,23 @@ const ApplyInfo = memo(({ isReview }: { isReview: boolean }) => {
  {!isReview && (
  <ol className={dateWrapper}>
  <li className={dateItems}>
- <span className={dateLabel}>지원 기간</span>
- <span className={dateText}>{`${formattedApplicationStart} - ${formattedApplicationEnd}`}</span>
+ <span className={dateLabelVar[deviceType]}>지원 기간</span>
+ <span
+ className={
+ dateTextVar[deviceType]
+ }>{`${formattedApplicationStart} ${deviceType !== 'DESK' ? '\n' : ''}- ${formattedApplicationEnd}`}</span>
  </li>
  <li className={dateItems}>
- <span className={dateLabel}>서류 발표</span>
- <span className={dateText}>{formattedApplicationConfirmStart}</span>
+ <span className={dateLabelVar[deviceType]}>서류 발표</span>
+ <span className={dateTextVar[deviceType]}>{formattedApplicationConfirmStart}</span>
  </li>
  <li className={dateItems}>
- <span className={dateLabel}>면접 평가</span>
- <span className={dateText}>{`${formattedInterviewStart} - ${formattedInterviewEnd}`}</span>
+ <span className={dateLabelVar[deviceType]}>면접 평가</span>
+ <span className={dateTextVar[deviceType]}>{`${formattedInterviewStart} - ${formattedInterviewEnd}`}</span>
  </li>
  <li className={dateItems}>
- <span className={dateLabel}>최종 발표</span>
- <span className={dateText}>{formattedFinalPassConfirmStart}</span>
+ <span className={dateLabelVar[deviceType]}>최종 발표</span>
+ <span className={dateTextVar[deviceType]}>{formattedFinalPassConfirmStart}</span>
  </li>
  </ol>
  )}