From 8b22183343536afd9524ce352e8d8346a33b188a Mon Sep 17 00:00:00 2001 From: hyesung oh Date: Tue, 7 Mar 2023 21:53:14 +0900 Subject: [PATCH] =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=8A=A4=EC=BA=90?= =?UTF-8?q?=EB=8B=9D=20=EA=B2=B0=EA=B3=BC=20=EB=B0=98=EC=98=81=20(#240)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: delete useless backtick * refactor: identical operands * chore: delete former assets and excluding configurations --- .eslintrc.js | 1 - former/Button/Button.tsx | 53 ----- former/Button/index.tsx | 1 - former/CTAButton/CTAButton.tsx | 18 -- former/CTAButton/index.tsx | 1 - former/NavigationBar/Anchor.tsx | 52 ---- former/NavigationBar/DimOverlay.tsx | 46 ---- former/NavigationBar/HamburgerButton.tsx | 48 ---- former/NavigationBar/HamburgerContent.tsx | 75 ------ former/NavigationBar/NavigationBar.tsx | 106 --------- former/NavigationBar/index.tsx | 1 - former/RecruitBanner/RecruitBanner.tsx | 71 ------ former/RecruitBanner/index.tsx | 1 - former/RecruitCard/RecruitCard.tsx | 121 ---------- former/RecruitCard/index.tsx | 1 - .../contact/ContactSection/ContactSection.tsx | 195 --------------- former/contact/ContactSection/index.tsx | 1 - .../OrganizerSection/OrganizerCard.tsx | 167 ------------- .../OrganizerSection/OrganizerSection.tsx | 122 ---------- former/contact/OrganizerSection/index.tsx | 1 - former/contact/OrganizerSection/source.ts | 114 --------- former/home/ApplySection/ApplySection.tsx | 80 ------- former/home/ApplySection/index.tsx | 1 - former/home/HeaderSection/HeaderSection.tsx | 126 ---------- former/home/HeaderSection/index.tsx | 1 - .../home/MoreInfoSection/MoreInfoSection.tsx | 219 ----------------- former/home/MoreInfoSection/index.tsx | 1 - former/home/RecordSection/RecordSection.tsx | 164 ------------- former/home/RecordSection/index.tsx | 1 - .../RecruitNotiSection/RecruitNotiSection.tsx | 71 ------ former/home/RecruitNotiSection/index.tsx | 1 - .../home/ScheduleSection/ScheduleSection.tsx | 196 --------------- former/home/ScheduleSection/index.tsx | 1 - former/home/SponsorSection/SponsorSection.tsx | 92 ------- former/home/SponsorSection/index.tsx | 1 - former/home/TeamSection/TeamSection.tsx | 225 ------------------ former/home/TeamSection/index.tsx | 1 - former/home/TeamSection/source.ts | 55 ----- .../interview/HeaderSection/HeaderSection.tsx | 56 ----- former/interview/HeaderSection/index.tsx | 1 - .../InterviewSection/InterviewSection.tsx | 142 ----------- former/interview/InterviewSection/index.tsx | 1 - former/interview/InterviewSection/source.ts | 140 ----------- .../AnotherProjectContainer.tsx | 177 -------------- .../AnotherProjectSection.tsx | 62 ----- .../project/AnotherProjectSection/index.tsx | 1 - .../DescriptionSection/DescriptionSection.tsx | 25 -- former/project/DescriptionSection/index.tsx | 1 - .../HorizontalDivider/HorizontalDivider.tsx | 21 -- former/project/HorizontalDivider/index.tsx | 1 - .../ProjectDetailSection/JobContainer.tsx | 53 ----- .../project/ProjectDetailSection/LinkIcon.tsx | 38 --- .../ProjectDetailSection.tsx | 218 ----------------- former/project/ProjectDetailSection/index.tsx | 1 - .../ProjectSection/ProjectContainer.tsx | 111 --------- .../project/ProjectSection/ProjectSection.tsx | 206 ---------------- former/project/ProjectSection/index.tsx | 1 - .../VerticalDivider/VerticalDivider.tsx | 12 - former/project/VerticalDivider/index.tsx | 1 - .../DescriptionSection/DescriptionSection.tsx | 173 -------------- .../DescriptionSection/index.tsx | 1 - .../HeaderSection/HeaderSection.tsx | 72 ------ former/recruit-detail/HeaderSection/index.tsx | 1 - .../OtherPositionSection.tsx | 72 ------ .../OtherPositionSection/index.tsx | 1 - former/recruit/FaqSection/FaqSection.tsx | 169 ------------- former/recruit/FaqSection/constants.ts | 93 -------- former/recruit/FaqSection/index.tsx | 1 - former/recruit/HeaderSection/Finish.tsx | 53 ----- .../recruit/HeaderSection/HeaderSection.tsx | 198 --------------- former/recruit/HeaderSection/InProgress.tsx | 84 ------- former/recruit/HeaderSection/Previous.tsx | 34 --- former/recruit/HeaderSection/index.tsx | 1 - .../PosiotionSection/PosiotionSection.tsx | 67 ------ former/recruit/PosiotionSection/index.tsx | 1 - .../RequirementSection/RequirementSection.tsx | 78 ------ former/recruit/RequirementSection/index.tsx | 1 - .../recruit/ScheduleSection/ScheduleGraph.tsx | 120 ---------- .../ScheduleSection/ScheduleSection.tsx | 190 --------------- former/recruit/ScheduleSection/constants.ts | 38 --- former/recruit/ScheduleSection/index.tsx | 1 - .../project-detail/OtherProjectSection.tsx | 2 +- src/components/recruit/FAQSection.tsx | 2 +- tsconfig.json | 2 +- 84 files changed, 3 insertions(+), 5153 deletions(-) delete mode 100644 former/Button/Button.tsx delete mode 100644 former/Button/index.tsx delete mode 100644 former/CTAButton/CTAButton.tsx delete mode 100644 former/CTAButton/index.tsx delete mode 100644 former/NavigationBar/Anchor.tsx delete mode 100644 former/NavigationBar/DimOverlay.tsx delete mode 100644 former/NavigationBar/HamburgerButton.tsx delete mode 100644 former/NavigationBar/HamburgerContent.tsx delete mode 100644 former/NavigationBar/NavigationBar.tsx delete mode 100644 former/NavigationBar/index.tsx delete mode 100644 former/RecruitBanner/RecruitBanner.tsx delete mode 100644 former/RecruitBanner/index.tsx delete mode 100644 former/RecruitCard/RecruitCard.tsx delete mode 100644 former/RecruitCard/index.tsx delete mode 100644 former/contact/ContactSection/ContactSection.tsx delete mode 100644 former/contact/ContactSection/index.tsx delete mode 100644 former/contact/OrganizerSection/OrganizerCard.tsx delete mode 100644 former/contact/OrganizerSection/OrganizerSection.tsx delete mode 100644 former/contact/OrganizerSection/index.tsx delete mode 100644 former/contact/OrganizerSection/source.ts delete mode 100644 former/home/ApplySection/ApplySection.tsx delete mode 100644 former/home/ApplySection/index.tsx delete mode 100644 former/home/HeaderSection/HeaderSection.tsx delete mode 100644 former/home/HeaderSection/index.tsx delete mode 100644 former/home/MoreInfoSection/MoreInfoSection.tsx delete mode 100644 former/home/MoreInfoSection/index.tsx delete mode 100644 former/home/RecordSection/RecordSection.tsx delete mode 100644 former/home/RecordSection/index.tsx delete mode 100644 former/home/RecruitNotiSection/RecruitNotiSection.tsx delete mode 100644 former/home/RecruitNotiSection/index.tsx delete mode 100644 former/home/ScheduleSection/ScheduleSection.tsx delete mode 100644 former/home/ScheduleSection/index.tsx delete mode 100644 former/home/SponsorSection/SponsorSection.tsx delete mode 100644 former/home/SponsorSection/index.tsx delete mode 100644 former/home/TeamSection/TeamSection.tsx delete mode 100644 former/home/TeamSection/index.tsx delete mode 100644 former/home/TeamSection/source.ts delete mode 100644 former/interview/HeaderSection/HeaderSection.tsx delete mode 100644 former/interview/HeaderSection/index.tsx delete mode 100644 former/interview/InterviewSection/InterviewSection.tsx delete mode 100644 former/interview/InterviewSection/index.tsx delete mode 100644 former/interview/InterviewSection/source.ts delete mode 100644 former/project/AnotherProjectSection/AnotherProjectContainer.tsx delete mode 100644 former/project/AnotherProjectSection/AnotherProjectSection.tsx delete mode 100644 former/project/AnotherProjectSection/index.tsx delete mode 100644 former/project/DescriptionSection/DescriptionSection.tsx delete mode 100644 former/project/DescriptionSection/index.tsx delete mode 100644 former/project/HorizontalDivider/HorizontalDivider.tsx delete mode 100644 former/project/HorizontalDivider/index.tsx delete mode 100644 former/project/ProjectDetailSection/JobContainer.tsx delete mode 100644 former/project/ProjectDetailSection/LinkIcon.tsx delete mode 100644 former/project/ProjectDetailSection/ProjectDetailSection.tsx delete mode 100644 former/project/ProjectDetailSection/index.tsx delete mode 100644 former/project/ProjectSection/ProjectContainer.tsx delete mode 100644 former/project/ProjectSection/ProjectSection.tsx delete mode 100644 former/project/ProjectSection/index.tsx delete mode 100644 former/project/VerticalDivider/VerticalDivider.tsx delete mode 100644 former/project/VerticalDivider/index.tsx delete mode 100644 former/recruit-detail/DescriptionSection/DescriptionSection.tsx delete mode 100644 former/recruit-detail/DescriptionSection/index.tsx delete mode 100644 former/recruit-detail/HeaderSection/HeaderSection.tsx delete mode 100644 former/recruit-detail/HeaderSection/index.tsx delete mode 100644 former/recruit-detail/OtherPositionSection/OtherPositionSection.tsx delete mode 100644 former/recruit-detail/OtherPositionSection/index.tsx delete mode 100644 former/recruit/FaqSection/FaqSection.tsx delete mode 100644 former/recruit/FaqSection/constants.ts delete mode 100644 former/recruit/FaqSection/index.tsx delete mode 100644 former/recruit/HeaderSection/Finish.tsx delete mode 100644 former/recruit/HeaderSection/HeaderSection.tsx delete mode 100644 former/recruit/HeaderSection/InProgress.tsx delete mode 100644 former/recruit/HeaderSection/Previous.tsx delete mode 100644 former/recruit/HeaderSection/index.tsx delete mode 100644 former/recruit/PosiotionSection/PosiotionSection.tsx delete mode 100644 former/recruit/PosiotionSection/index.tsx delete mode 100644 former/recruit/RequirementSection/RequirementSection.tsx delete mode 100644 former/recruit/RequirementSection/index.tsx delete mode 100644 former/recruit/ScheduleSection/ScheduleGraph.tsx delete mode 100644 former/recruit/ScheduleSection/ScheduleSection.tsx delete mode 100644 former/recruit/ScheduleSection/constants.ts delete mode 100644 former/recruit/ScheduleSection/index.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 1e340468..9fcb6ce4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -17,7 +17,6 @@ module.exports = { 'public', '.yarn', '@types', - 'former', ], settings: { 'import/resolver': { diff --git a/former/Button/Button.tsx b/former/Button/Button.tsx deleted file mode 100644 index 3e3f2d2e..00000000 --- a/former/Button/Button.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react'; -import { css } from '@emotion/react'; - -import { colors, mediaQuery, radius } from '~/styles/constants'; - -interface Props extends ComponentPropsWithoutRef<'button'> { - isActive?: boolean; -} - -const Button = forwardRef(function Button( - { children, isActive = false, ...rest }: Props, - ref: Ref -) { - return ( - - ); -}); - -export default Button; - -const buttonCss = (isActive: boolean) => css` - padding: 14px 28px; - border-radius: ${radius.sm}; - background-color: ${colors.gray9}; - color: ${colors.gray4}; - font-size: 1.5rem; - white-space: pre; - - transition: background-color 0.3s, color 0.3s; - - &:hover { - background-color: ${isActive ? colors.primary : colors.gray8}; - } - - &:active { - ${activeCss} - } - - ${isActive && activeCss} - - ${mediaQuery('xs')} { - padding: 8px 16px; - border-radius: ${radius.xs}; - font-size: 14px; - } -`; - -const activeCss = css` - color: ${colors.white}; - background-color: ${colors.primary}; -`; diff --git a/former/Button/index.tsx b/former/Button/index.tsx deleted file mode 100644 index efe8c800..00000000 --- a/former/Button/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Button'; diff --git a/former/CTAButton/CTAButton.tsx b/former/CTAButton/CTAButton.tsx deleted file mode 100644 index c1a4eae7..00000000 --- a/former/CTAButton/CTAButton.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ComponentPropsWithoutRef, forwardRef, Ref } from 'react'; - -import { ctaCss } from '~/styles/css/cta'; - -interface Props extends ComponentPropsWithoutRef<'button'> {} - -const CTAButton = forwardRef(function CTAButton( - { children, ...rest }: Props, - ref: Ref -) { - return ( - - ); -}); - -export default CTAButton; diff --git a/former/CTAButton/index.tsx b/former/CTAButton/index.tsx deleted file mode 100644 index 3c9b0fc8..00000000 --- a/former/CTAButton/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './CTAButton'; diff --git a/former/NavigationBar/Anchor.tsx b/former/NavigationBar/Anchor.tsx deleted file mode 100644 index d09428a4..00000000 --- a/former/NavigationBar/Anchor.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { css } from '@emotion/react'; - -import { colors, mediaQuery } from '~/styles/constants'; - -interface Props { - href: string; - name: string; -} - -export default function Anchor({ href, name }: Props) { - const router = useRouter(); - - return ( - - {name} - - ); -} - -const anchorCss = (path: string, isActive: boolean) => css` - font-size: 16px; - line-height: 118.75%; - - padding: 10px 20px; - border-radius: 8px; - transition: background-color 0.3s, color 0.3s; - - &:hover { - background-color: ${colors.gray9}; - } - - ${isActive ? activeAnchorCss : inactiveAnchorCss} - ${(path === '/' || path === '/interview') && defaultAnchorCss} - - ${mediaQuery('xs')} { - padding: 0; - } -`; - -const defaultAnchorCss = css` - color: ${colors.white}; -`; - -const activeAnchorCss = css` - font-weight: 700; -`; - -const inactiveAnchorCss = css` - color: ${colors.gray2}; -`; diff --git a/former/NavigationBar/DimOverlay.tsx b/former/NavigationBar/DimOverlay.tsx deleted file mode 100644 index 0dcacf7b..00000000 --- a/former/NavigationBar/DimOverlay.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { css } from '@emotion/react'; -import { motion, Variants } from 'framer-motion'; - -import { defaultEasing } from '~/constants/motions'; -import { colors } from '~/styles/constants'; - -interface Props { - close: VoidFunction; -} - -export default function DimOverlay({ close }: Props) { - return ( - - ); -} - -const dimBackgroundCss = css` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - background-color: ${colors.black}; - opacity: 0.4; - z-index: 9000; -`; - -export const fadeInVariants: Variants = { - closed: { - opacity: 0, - transition: { duration: 0.6, ease: defaultEasing }, - willChange: 'opacity', - }, - open: { - opacity: 0.4, - transition: { duration: 0.6, ease: defaultEasing }, - willChange: 'opacity', - }, -}; diff --git a/former/NavigationBar/HamburgerButton.tsx b/former/NavigationBar/HamburgerButton.tsx deleted file mode 100644 index 0ac68362..00000000 --- a/former/NavigationBar/HamburgerButton.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { motion, SVGMotionProps } from 'framer-motion'; - -import { colors } from '~/styles/constants'; - -import Svg from '../../src/components/common/icons/Svg'; - -export default function HamburgerButton({ toggleIsOpen }: { toggleIsOpen: VoidFunction }) { - return ( - - ); -} - -function Path(props: SVGMotionProps) { - return ( - - ); -} diff --git a/former/NavigationBar/HamburgerContent.tsx b/former/NavigationBar/HamburgerContent.tsx deleted file mode 100644 index 46f6f731..00000000 --- a/former/NavigationBar/HamburgerContent.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { css } from '@emotion/react'; -import { motion, Variants } from 'framer-motion'; - -import { defaultEasing } from '~/constants/motions'; -import { colors } from '~/styles/constants'; - -import Anchor from './Anchor'; -// import Svg from '../icons/Svg'; - -export default function HamburgerContent() { - return ( - -
- - - -
- - ); -} - -const contentWrapperCss = css` - width: 100%; - background-color: ${colors.gray9}; - - z-index: -1; - overflow: hidden; -`; - -const anchorWrapperCss = css` - padding: 40px 20px; - display: flex; - flex-direction: column; - gap: 40px; -`; - -const contentVariants: Variants = { - closed: { - height: 0, - transition: { duration: 0.3, ease: defaultEasing }, - willChange: 'opacity', - }, - open: { - height: 'auto', - transition: { duration: 0.3, ease: defaultEasing, delay: 0.16 }, - willChange: 'opacity', - }, -}; - -// function RecruitBanner() { -// return ( -// -// -// -// -// -// -// -// ); -// } diff --git a/former/NavigationBar/NavigationBar.tsx b/former/NavigationBar/NavigationBar.tsx deleted file mode 100644 index 19ac8df9..00000000 --- a/former/NavigationBar/NavigationBar.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { useState } from 'react'; -import Link from 'next/link'; -import { css } from '@emotion/react'; -import { AnimatePresence, motion, Variants } from 'framer-motion'; - -import { defaultEasing } from '~/constants/motions'; -import useMediaQuery from '~/hooks/use-media-query'; -import { colors } from '~/styles/constants'; -import hideWhenMobile, { layoutCss } from '~/styles/css'; - -import Anchor from './Anchor'; -import DimOverlay from './DimOverlay'; -import HamburgerButton from './HamburgerButton'; -import HamburgerContent from './HamburgerContent'; -import { DepromeetIcon } from '../../src/components/common/icons/DepromeetIcon'; - -export default function NavigationBar() { - const isMobile = useMediaQuery('xs'); - const [isOpen, setIsOpen] = useState(false); - - function toggleIsOpen() { - setIsOpen(prev => !prev); - } - - if (isMobile) { - return ( - <> - -
- - - - - -
- - {isOpen && } - - - - {isOpen && setIsOpen(false)} />} - - - ); - } - - return ( - - ); -} - -export const NAV_HEIGHT = 60; - -const navCss = css` - position: fixed; - top: 0; - left: 0; - - width: 100%; - height: ${NAV_HEIGHT}px; - background-color: ${colors.black}; - z-index: 9999; -`; - -const wrapperCss = css` - ${layoutCss()} - height: 100%; - - display: flex; - justify-content: space-between; - align-items: center; -`; - -const anchorCss = css` - width: 125px; -`; - -const anchorWrapperCss = css` - height: 100%; - display: flex; - align-items: center; - gap: 2.5rem; -`; - -const mobileNavVariants: Variants = { - closed: { - backgroundColor: colors.black, - transition: { duration: 0.2, easings: defaultEasing, delay: 0.26 }, - }, - open: { - backgroundColor: colors.gray9, - transition: { duration: 0.2, easings: defaultEasing }, - }, -}; diff --git a/former/NavigationBar/index.tsx b/former/NavigationBar/index.tsx deleted file mode 100644 index d78a5df2..00000000 --- a/former/NavigationBar/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './NavigationBar'; diff --git a/former/RecruitBanner/RecruitBanner.tsx b/former/RecruitBanner/RecruitBanner.tsx deleted file mode 100644 index 1f437468..00000000 --- a/former/RecruitBanner/RecruitBanner.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { css } from '@emotion/react'; -import { AnimatePresence, motion, Variants } from 'framer-motion'; - -import { defaultEasing } from '~/constants/motions'; -import useIsInProgress from '~/hooks/use-is-in-progress'; -import { colors } from '~/styles/constants'; - -import { NAV_HEIGHT } from '../NavigationBar/NavigationBar'; - -export default function RecruitBanner() { - const router = useRouter(); - - const isInProgress = useIsInProgress(); - - if (!isInProgress) return <>; - - return ( - - {router.asPath !== '/recruit' && ( - - - 👉🏻 디프만 12기 지원하러 가기 - - - )} - - ); -} - -export const RECRUIT_BANNER_HEIGHT = 40; - -const bannerCss = css` - position: sticky; - top: ${NAV_HEIGHT}px; - width: 100vw; - height: ${RECRUIT_BANNER_HEIGHT}px; - background-color: ${colors.primary}; - z-index: 8000; - font-size: 16px; - font-weight: 700; - - display: flex; - justify-content: center; - align-items: center; -`; - -export const bannerDownVariants: Variants = { - initial: { - y: -50, - transition: { duration: 0.8, ease: defaultEasing }, - willChange: 'transform', - }, - animate: { - y: 0, - transition: { duration: 0.8, ease: defaultEasing, delay: 0.8 }, - willChange: 'transform', - }, - exit: { - y: -50, - transition: { duration: 0.8, ease: defaultEasing }, - willChange: 'transform', - }, -}; diff --git a/former/RecruitBanner/index.tsx b/former/RecruitBanner/index.tsx deleted file mode 100644 index 7560e362..00000000 --- a/former/RecruitBanner/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './RecruitBanner'; diff --git a/former/RecruitCard/RecruitCard.tsx b/former/RecruitCard/RecruitCard.tsx deleted file mode 100644 index be8e8b6e..00000000 --- a/former/RecruitCard/RecruitCard.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import Image from 'next/image'; -import Link from 'next/link'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { ArrowIcon } from '~/components/common/icons/ArrowIcon'; -import { - ICON_POSITION_PATH, - POSITION_DISPLAY_NAME, - PositionType, -} from '~/components/recruit-detail/constants'; -import { defaultFadeInUpVariants } from '~/constants/motions'; -import useMediaQuery from '~/hooks/use-media-query'; -import { colors, mediaQuery, radius } from '~/styles/constants'; - -type Size = 'sm' | 'lg'; - -export default function RecruitCard({ - positionType, - size = 'lg', -}: { - positionType: PositionType; - size?: Size; -}) { - const isMobile = useMediaQuery('xs'); - const href = `/recruit/${positionType.toLowerCase()}`; - - const getSize = () => { - return size === 'lg' && !isMobile ? 'lg' : 'sm'; - }; - - return ( - - -
- {getSize() === 'sm' && ( - category-icon - )} -

{POSITION_DISPLAY_NAME[positionType]}

-
-
- {getSize() === 'lg' && '자세히 보기'} - -
- - - ); -} - -const cardCss = (size: Size) => css` - display: flex; - flex-direction: ${size === 'lg' ? 'column' : 'row'}; - justify-content: space-between; - align-items: ${size === 'lg' ? 'flex-start' : 'center'}; - padding: 30px; - height: ${size === 'lg' ? '220px' : '120px'}; - width: ${size === 'lg' ? '332px' : '100%'}; - background: ${colors.gray9}; - border-radius: ${radius.md}; - color: ${colors.gray2}; - - transition: all 0.3s; - cursor: pointer; - - svg > path { - fill: ${colors.gray3}; - } - - &:hover { - color: ${colors.white}; - background: ${size === 'lg' ? colors.primary : colors.gray8}; - - svg > path { - fill: ${colors.white}; - } - } - - ${mediaQuery('xs')} { - height: 67px; - - border-radius: ${radius.sm}; - - &:hover { - background: ${colors.gray8}; - } - } -`; - -const cardTitleCss = css` - display: flex; - align-items: center; - - gap: 20px; -`; - -const cardHeadingCss = css` - font-weight: 600; - font-size: 2rem; - line-height: 120%; - color: ${colors.gray1}; - - ${mediaQuery('xs')} { - font-size: 1.286rem; - } -`; - -const cardLinkCss = (size: Size) => css` - display: flex; - justify-content: flex-end; - align-items: center; - width: ${size === 'sm' ? 'auto' : '100%'}; - - ${mediaQuery('xs')} { - width: auto; - } -`; diff --git a/former/RecruitCard/index.tsx b/former/RecruitCard/index.tsx deleted file mode 100644 index 90444e33..00000000 --- a/former/RecruitCard/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './RecruitCard'; diff --git a/former/contact/ContactSection/ContactSection.tsx b/former/contact/ContactSection/ContactSection.tsx deleted file mode 100644 index ede26050..00000000 --- a/former/contact/ContactSection/ContactSection.tsx +++ /dev/null @@ -1,195 +0,0 @@ -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { - DEPROMEET_EMAIL, - DEPROMEET_INSTAGRAM, - KAKAO_PLUS_FRIEND, -} from '~/constants/common/depromeet'; -import { CONTACT_IMAGES } from '~/constants/images'; -import { ContactImagesKeyType } from '~/constants/images/images'; -import { defaultFadeInUpVariants, defaultFadeInVariants, staggerOne } from '~/constants/motions'; -import { defaultFadeInSlideToLeftVariants, staggerHalf } from '~/constants/motions/motions'; -import { colors, mediaQuery, radius } from '~/styles/constants'; - -export default function ContactSection() { - return ( -
- - - 궁금한 것이 있거나 -
- 문의사항이 있으신가요? - - - 카카오톡 @depromeet을 통해 궁금증을 해결하세요. -
운영 시간 : 19시 ~ 24시 - - - 비즈니스 문의: depromeet@gmail.com - - - - - - - - -
- ); -} - -const sectionCss = css` - margin-top: 120px; - - width: 100%; - display: flex; - - margin-bottom: 160px; - - ${mediaQuery('xs')} { - margin-top: 40px; - - flex-direction: column; - gap: 60px; - - margin-bottom: 100px; - } -`; - -const descriptionWrapperCss = css` - width: 100%; -`; - -const descriptionHeadingCss = css` - font-size: 2rem; - font-weight: 600; - line-height: 150%; - - margin-bottom: 16px; - - ${mediaQuery('xs')} { - font-size: 24px; - } -`; - -const descriptionTimeCss = css` - display: block; - font-size: 1.25rem; - line-height: 150%; - - margin-bottom: 4px; - - ${mediaQuery('xs')} { - font-size: 16px; - } -`; - -const descriptionBusinessCss = css` - font-size: 1rem; - line-height: 150%; - color: ${colors.gray4}; - - ${mediaQuery('xs')} { - font-size: 14px; - } -`; - -const buttonWrapperCss = css` - width: 420px; - flex-shrink: 0; - - display: flex; - flex-direction: column; - gap: 24px; - - ${mediaQuery('xs')} { - width: 100%; - gap: 12px; - } -`; - -interface ContactAnchorProps { - imageKey: ContactImagesKeyType; - href: string; - text: string; - value: string; -} - -function ContactAnchor({ imageKey, href, text, value }: ContactAnchorProps) { - return ( - -
- {`${text} - {text} -
- - {value} - - ); -} - -const contactAnchorCss = css` - width: 100%; - height: 56px; - background-color: ${colors.gray9}; - border-radius: ${radius.md}; - - display: flex; - justify-content: space-between; - align-items: center; - - padding-left: 16px; - padding-right: 24px; - - transition: background-color 0.3s; - - &:hover { - background-color: ${colors.primary}; - } -`; - -const contactInfoWrapperCss = css` - height: 100%; - display: flex; - align-items: center; - gap: 9px; -`; - -const contactValueCss = css` - font-weight: 400; -`; diff --git a/former/contact/ContactSection/index.tsx b/former/contact/ContactSection/index.tsx deleted file mode 100644 index 1baabd56..00000000 --- a/former/contact/ContactSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ContactSection'; diff --git a/former/contact/OrganizerSection/OrganizerCard.tsx b/former/contact/OrganizerSection/OrganizerCard.tsx deleted file mode 100644 index bd18180d..00000000 --- a/former/contact/OrganizerSection/OrganizerCard.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import { PropsWithChildren } from 'react'; -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { BehanceIcon, GithubIcon, LinkedinIcon, WebIcon } from '~/components/common/icons'; -import { ORGANIZER_IMAGES } from '~/constants/images'; -import { defaultFadeInUpVariants } from '~/constants/motions'; -import { colors, mediaQuery, radius } from '~/styles/constants'; - -import type { Organizer } from './source'; - -interface Props extends Organizer {} - -export default function OrganizerCard({ - imageKey, - name, - position, - behance, - linkedin, - github, - web, -}: Props) { - return ( - -
- {name} -
- -
-

{name}

-
{position}
-
- -
- {behance && ( - - - - )} - {linkedin && ( - - - - )} - {github && ( - - - - )} - {web && ( - - - - )} -
- - ); -} - -const articleCss = css` - position: relative; - width: calc(25% - 2.5rem); - height: 324px; - border-radius: ${radius.md}; - overflow: hidden; - - ${mediaQuery('xs')} { - width: calc(50% - 7.5px); - height: 243px; - } -`; - -const imageWrapperCss = css` - position: relative; - width: 100%; - height: calc(324px - 80px); - - ${mediaQuery('xs')} { - height: calc(243px - 80px); - } -`; - -const infoWrapperCss = css` - width: 100%; - height: 80px; - padding: 0 1rem; - - display: flex; - flex-direction: column; - justify-content: center; - - background-color: ${colors.gray9}; -`; - -const nameCss = css` - font-size: 16px; - font-weight: 600; - line-height: 140%; - - margin-bottom: 4px; -`; - -const positionCss = css` - font-size: 13px; - font-weight: 500; - line-height: 140%; - - color: ${colors.gray4}; -`; - -const overlayWrapperCss = css` - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - display: flex; - justify-content: center; - align-items: center; - gap: 0.75rem; - - z-index: 1000; - backdrop-filter: blur(8px); - opacity: 0; - - transition: opacity 0.3s; - - &:hover { - opacity: 1; - } - - ${mediaQuery('xs')} { - gap: 0.5rem; - } -`; - -interface IconAnchorProps { - href: string; -} - -function IconAnchor({ href, children }: PropsWithChildren) { - return ( - - {children} - - ); -} - -const iconAnchorCss = css` - width: 2.25rem; - height: 2.25rem; - display: flex; - justify-content: center; - align-items: center; - - background-color: rgba(255, 255, 255, 0.2); - border-radius: 50%; -`; diff --git a/former/contact/OrganizerSection/OrganizerSection.tsx b/former/contact/OrganizerSection/OrganizerSection.tsx deleted file mode 100644 index eb7b5079..00000000 --- a/former/contact/OrganizerSection/OrganizerSection.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { - defaultFadeInUpVariants, - defaultFadeInVariants, - staggerHalf, - staggerOne, -} from '~/constants/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -import OrganizerCard from './OrganizerCard'; -import { ORGANIZERS } from './source'; - -export default function OrganizerSection() { - return ( - - - 디프만 운영진을 소개할게요 - - - 여러분들께 특별한 디프만 12기 경험을 전달하기 위해 -
- 오늘도 열심인 12기 운영진들을 소개합니다! 🥹 - - - - - 12기 운영진 - - - ~ - - - - - {ORGANIZERS.map(organizer => ( - - ))} - - - ); -} - -const sectionCss = css` - margin-top: 80px; - - ${mediaQuery('xs')} { - margin-top: 40px; - } -`; - -const headingCss = css` - font-size: 2rem; - font-weight: 600; - line-height: 140%; - - margin-bottom: 16px; - - ${mediaQuery('xs')} { - font-size: 24px; - - margin-bottom: 12px; - } -`; - -const paragraphCss = css` - font-size: 1rem; - line-height: 150%; - color: ${colors.gray3}; - - margin-bottom: 60px; -`; - -const organizerHeadingWrapperCss = css` - display: flex; - gap: 10px; - align-items: flex-end; - - margin-bottom: 60px; - - ${mediaQuery('xs')} { - margin-bottom: 30px; - } -`; - -const organizerHeadingCss = css` - font-size: 1.625rem; - font-weight: 700; - line-height: 120%; - - ${mediaQuery('xs')} { - font-size: 20px; - font-weight: 600; - } -`; - -const organizerDateCss = css` - font-size: 1rem; - line-height: 150%; - color: ${colors.gray4}; - - ${mediaQuery('xs')} { - font-size: 12px; - } -`; - -const organizerWrapperCss = css` - display: flex; - flex-wrap: wrap; - gap: 2.5rem; - - ${mediaQuery('xs')} { - gap: 15px; - } -`; diff --git a/former/contact/OrganizerSection/index.tsx b/former/contact/OrganizerSection/index.tsx deleted file mode 100644 index cee258f7..00000000 --- a/former/contact/OrganizerSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './OrganizerSection'; diff --git a/former/contact/OrganizerSection/source.ts b/former/contact/OrganizerSection/source.ts deleted file mode 100644 index 382743ae..00000000 --- a/former/contact/OrganizerSection/source.ts +++ /dev/null @@ -1,114 +0,0 @@ -import { OrganizerImagesKeyType } from '~/constants/images/images'; - -export interface Organizer { - imageKey: OrganizerImagesKeyType; - name: string; - position: string; - - behance?: string; - linkedin?: string; - github?: string; - web?: string; -} - -export const ORGANIZERS: Organizer[] = [ - { - imageKey: '박소현', - name: '박소현(회장)', - position: 'UIUX Designer', - behance: 'https://www.behance.net/sohyunpark576e', - linkedin: 'https://www.linkedin.com/in/sohyunpark0319/', - github: '', - web: 'https://brunch.co.kr/@tudandilion', - }, - { - imageKey: '김동건', - name: '김동건(부회장)', - position: 'Backend', - behance: '', - linkedin: 'https://www.linkedin.com/in/코딩-극락-776222236/', - github: 'https://github.com/DongGeon0908', - web: '', - }, - { - imageKey: '김나영', - name: '김나영', - position: 'UIUX Designer', - behance: 'https://www.behance.net/402zzang', - linkedin: '', - github: '', - web: '', - }, - { - imageKey: '김민수', - name: '김민수', - position: 'Backend', - behance: '', - linkedin: 'https://www.linkedin.com/in/minsoozz', - github: 'https://github.com/minsoozz', - web: 'https://minsoolog.tistory.com/', - }, - { - imageKey: '오혜성', - name: '오혜성', - position: 'Web', - behance: '', - linkedin: 'https://www.linkedin.com/in/hyesungoh414/', - github: 'https://github.com/hyesungoh', - web: 'https://www.hyesungoh.xyz', - }, - { - imageKey: '윤영', - name: '윤영', - position: 'Backend', - behance: '', - linkedin: '', - github: 'https://github.com/yunyoung1819', - web: '', - }, - { - imageKey: '이성용', - name: '이성용', - position: 'Web', - behance: '', - linkedin: 'https://www.linkedin.com/in/seongyong-lee', - github: 'https://github.com/seongyonglee', - web: '', - }, - { - imageKey: '이승희', - name: '이승희', - position: 'UIUX Designer', - behance: 'https://www.behance.net/seunghee555b99', - linkedin: '', - github: '', - web: '', - }, - { - imageKey: '임효연', - name: '임효연', - position: 'UIUX Designer', - behance: 'https://www.behance.net/gd054', - linkedin: 'https://www.linkedin.com/in/효연-임-2a2046231/', - github: '', - web: 'https://linktr.ee/gd054', - }, - { - imageKey: '정대윤', - name: '정대윤', - position: 'Web', - behance: '', - linkedin: '', - github: 'https://github.com/sensecodevalue', - web: '', - }, - { - imageKey: '홍서희', - name: '홍서희', - position: 'UIUX Designer', - behance: 'https://www.behance.net/carinhong', - linkedin: 'https://www.linkedin.com/in/seohee-hong-ba331a1ab', - github: '', - web: '', - }, -]; diff --git a/former/home/ApplySection/ApplySection.tsx b/former/home/ApplySection/ApplySection.tsx deleted file mode 100644 index 2dbf2ce7..00000000 --- a/former/home/ApplySection/ApplySection.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInVariants, staggerHalf } from '~/constants/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -export default function ApplySection() { - return ( - - - 알림 신청하고 이메일로 간편히 받아보세요 - - - - 디프만 13기 언제 시작하나.. -
- 오매불망 기다리고만 있었다면? - - - {/* - - - {isInProgress() ? '지금 지원하기' : '모집 기간이 아닙니다.'} - - - */} - - ); -} - -const sectionCss = css` - margin-top: 220px; - margin-bottom: 120px; - width: 100%; - - display: flex; - flex-direction: column; - align-items: center; -`; - -const spanCss = css` - display: block; - font-size: 2rem; - line-height: 110%; - color: ${colors.gray4}; - text-align: center; - - margin-bottom: 12px; - - ${mediaQuery('xs')} { - font-size: 16px; - line-height: 150%; - - margin-bottom: 8px; - } -`; - -const headingCss = css` - font-size: 3.125rem; - font-weight: 700; - line-height: 110%; - color: ${colors.white}; - text-align: center; - - margin-bottom: 60px; - - ${mediaQuery('xs')} { - font-size: 24px; - line-height: 150%; - - margin-bottom: 30px; - } -`; diff --git a/former/home/ApplySection/index.tsx b/former/home/ApplySection/index.tsx deleted file mode 100644 index e3c073d0..00000000 --- a/former/home/ApplySection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ApplySection'; diff --git a/former/home/HeaderSection/HeaderSection.tsx b/former/home/HeaderSection/HeaderSection.tsx deleted file mode 100644 index 542c9f98..00000000 --- a/former/home/HeaderSection/HeaderSection.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { motion, useScroll, useTransform, Variants } from 'framer-motion'; - -import { NAV_HEIGHT } from '~/../former/NavigationBar/NavigationBar'; -import { ScrollBottomIcon } from '~/components/common/icons'; -import { DepromeetIcon } from '~/components/common/icons/DepromeetIcon'; -import { defaultEasing } from '~/constants/motions'; -import useMediaQuery from '~/hooks/use-media-query'; -import { mediaQuery } from '~/styles/constants'; - -const HOME_HEADER_BASE = '/images/home'; -const HEADER_IMAGE = `${HOME_HEADER_BASE}/home_header.png`; -const HEADER_IMAGE_MOBILE = `${HOME_HEADER_BASE}/home_header_mobile.png`; - -export default function HeaderSection() { - const { scrollY } = useScroll(); - const scrollBottomOpacity = useTransform(scrollY, [0, 800], [1, 0]); - const scrollBottomScale = useTransform(scrollY, [0, 800], [1, 0.6]); - - const isMobile = useMediaQuery('xs'); - - return ( -
- depromeet 12 - -
-
- -
- -

디자이너와 {isMobile &&
}프로그래머가 만났을 때

-
- - - - -
- ); -} - -const headerCss = css` - position: relative; - left: calc(-50vw + 50%); - width: 100vw; - height: calc(100vh - ${NAV_HEIGHT}px); -`; - -const headingWrapperCss = css` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -`; - -const logoWrapperCss = css` - margin-bottom: 19px; - - ${mediaQuery('xs')} { - margin-bottom: 15px; - } -`; - -const heading1Css = css` - font-weight: 500; - font-size: 3.125rem; - line-height: 150%; - white-space: pre; - - ${mediaQuery('xs')} { - font-size: 24px; - } -`; - -const scrollBottomIconWrapperCss = css` - position: absolute; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - margin: 0 auto; -`; - -const scrollBottomVariants: Variants = { - initial: { - opacity: 0, - scale: 0.5, - x: '-50%', - y: -30, - transition: { duration: 1.2, ease: defaultEasing }, - willChange: 'opacity, transform', - }, - animate: { - opacity: 1, - scale: 1, - y: 0, - transition: { duration: 1.2, ease: defaultEasing }, - willChange: 'opacity, transform', - }, - exit: { - opacity: 0, - scale: 0.85, - y: 0, - transition: { duration: 1.2, ease: defaultEasing }, - willChange: 'opacity, transform', - }, -}; diff --git a/former/home/HeaderSection/index.tsx b/former/home/HeaderSection/index.tsx deleted file mode 100644 index 02dba600..00000000 --- a/former/home/HeaderSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './HeaderSection'; diff --git a/former/home/MoreInfoSection/MoreInfoSection.tsx b/former/home/MoreInfoSection/MoreInfoSection.tsx deleted file mode 100644 index c5281c93..00000000 --- a/former/home/MoreInfoSection/MoreInfoSection.tsx +++ /dev/null @@ -1,219 +0,0 @@ -import Image from 'next/image'; -import Link from 'next/link'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { DEPROMEET_MEDIUM } from '~/constants/common'; -import { defaultFadeInUpVariants, defaultFadeInVariants, staggerOne } from '~/constants/motions'; -import useMediaQuery from '~/hooks/use-media-query'; -import { colors, mediaQuery, radius } from '~/styles/constants'; - -const MORE_INFO_IMAGE_BASE = '/images/home/more-info'; - -const MORE_INFO_MEDIUM_IMAGE = `${MORE_INFO_IMAGE_BASE}/medium.png`; -const MORE_INFO_MEDIUM_IMAGE_MOBILE = `${MORE_INFO_IMAGE_BASE}/medium_mobile.png`; - -const MORE_INFO_INTERVIEW_IMAGE = `${MORE_INFO_IMAGE_BASE}/interview.png`; -const MORE_INFO_INTERVIEW_IMAGE_MOBILE = `${MORE_INFO_IMAGE_BASE}/interview_mobile.png`; - -const MORE_INFO_PROJECTS_IMAGE = `${MORE_INFO_IMAGE_BASE}/projects.png`; -const MORE_INFO_PROJECTS_IMAGE_MOBILE = `${MORE_INFO_IMAGE_BASE}/projects_mobile.png`; - -export default function MoreInfoSection() { - const isMobile = useMediaQuery('xs'); - - return ( - - - 디프만에 대해서 -
더 자세히 알고 싶다면? - - - - - - - - - ); -} - -const sectionCss = css` - margin-top: 220px; -`; - -const headingCss = css` - text-align: center; - font-size: 2.75rem; - line-height: 150%; - - margin-bottom: 50px; - - ${mediaQuery('xs')} { - font-size: 24px; - font-weight: 500; - - margin-bottom: 30px; - } -`; - -const articleWrapperCss = css` - width: 100%; - display: flex; - justify-content: space-evenly; - gap: 2.625rem; - - ${mediaQuery('xs')} { - flex-direction: column; - gap: 15px; - } -`; - -interface LinkArticleProps { - href: string; - image: string; - heading: string; - description: string; - blank?: boolean; -} - -function LinkArticle({ href, heading, image, description, blank = false }: LinkArticleProps) { - if (blank) { - return ( - -
- {heading} -
- -
-

{heading}

-

{description}

-
- - ); - } - - return ( - - -
- {heading} -
- -
-

{heading}

-

{description}

-
- - - ); -} - -const anchorCss = css` - width: 100%; - height: 530px; - overflow: hidden; - border-radius: ${radius.md}; - background-color: ${colors.gray9}; - - ${mediaQuery('xs')} { - height: 354px; - } -`; - -const imageWrapperCss = css` - position: relative; - width: 100%; - height: 346px; - background-color: ${colors.gray7}; - - ${mediaQuery('xs')} { - height: 233px; - } -`; - -const contentWrapperCss = css` - padding: 35px 2.5rem; - - ${mediaQuery('xs')} { - padding: 20px; - } -`; - -const contentHeadingCss = css` - color: ${colors.gray4}; - font-size: 1.25rem; - font-weight: 500; - line-height: 120%; - - margin-bottom: 12px; - - ${mediaQuery('xs')} { - font-size: 14px; - - margin-bottom: 6px; - } -`; - -const contentParagraphCss = css` - color: ${colors.gray2}; - font-size: 1.625rem; - font-weight: 600; - line-height: 150%; - - ${mediaQuery('xs')} { - width: 60%; - font-size: 18px; - } -`; diff --git a/former/home/MoreInfoSection/index.tsx b/former/home/MoreInfoSection/index.tsx deleted file mode 100644 index 1f97cbce..00000000 --- a/former/home/MoreInfoSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './MoreInfoSection'; diff --git a/former/home/RecordSection/RecordSection.tsx b/former/home/RecordSection/RecordSection.tsx deleted file mode 100644 index cbb34a4e..00000000 --- a/former/home/RecordSection/RecordSection.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInUpVariants, defaultFadeInVariants, staggerOne } from '~/constants/motions'; -import { colors, mediaQuery, radius } from '~/styles/constants'; - -const RECORDS: CardProps[] = [ - { title: '탄생한 지', value: '6년' }, - { title: '누적 멤버 수', value: '800명+' }, - { title: '론칭 성공률', value: '100%', description: '10, 11기 기준' }, - { title: '론칭 서비스', value: '34개+', description: '5~11기 기준' }, -]; - -export default function RecordSection() { - return ( - - - 디프만은 서비스 기획부터 론칭, 그리고 개선까지 -
다양한 경험을 통해 성장하는 모임이에요. - - - - {RECORDS.map(record => ( - - ))} - - - ); -} - -const sectionCss = css` - margin-top: 310px; - width: 100%; -`; - -const headingCss = css` - text-align: center; - font-size: 2.75rem; - line-height: 150%; - - ${mediaQuery('xs')} { - font-size: 24px; - font-weight: 500; - } -`; - -const cardWrapperCss = css` - margin-top: 60px; - - width: 100%; - display: flex; - justify-content: space-evenly; - - ${mediaQuery('xs')} { - margin-top: 40px; - gap: 15px; - flex-wrap: wrap; - } -`; - -interface CardProps { - title: string; - value: string; - description?: string; -} - -function Card({ title, value, description }: CardProps) { - return ( - -
- {title} - {value} - {description && {description}} -
- - ); -} - -const cardCss = css` - position: relative; - border-radius: ${radius.md}; - background-color: ${colors.gray9}; - - width: 23%; - height: 255px; - - ${mediaQuery('xs')} { - width: calc(50% - 7.5px); - aspect-ratio: 1 / 1; - height: auto; - - @supports not (aspect-ratio: 1 / 1) { - &::before { - content: ''; - float: left; - padding-top: 100%; - } - - &::after { - content: ''; - display: block; - clear: both; - } - } - } -`; - -const supportAspectRatioWrapperCss = css` - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - @supports not (aspect-ratio: 1 / 1) { - position: absolute; - top: 0; - left: 0; - } -`; - -const titleCss = css` - color: ${colors.gray3}; - font-size: 1.5rem; - line-height: 112.5%; - margin-bottom: 12px; - - ${mediaQuery('xs')} { - font-size: 14px; - } -`; - -const valueCss = css` - font-size: 3.125rem; - line-height: 112.5%; - font-weight: 700; - - ${mediaQuery('xs')} { - font-size: 30px; - } -`; - -const descriptionCss = css` - position: absolute; - bottom: 20px; - color: ${colors.gray6}; - font-size: 1.125rem; - - ${mediaQuery('xs')} { - font-size: 12px; - } -`; diff --git a/former/home/RecordSection/index.tsx b/former/home/RecordSection/index.tsx deleted file mode 100644 index 2934c8c1..00000000 --- a/former/home/RecordSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './RecordSection'; diff --git a/former/home/RecruitNotiSection/RecruitNotiSection.tsx b/former/home/RecruitNotiSection/RecruitNotiSection.tsx deleted file mode 100644 index 99418450..00000000 --- a/former/home/RecruitNotiSection/RecruitNotiSection.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { css } from '@emotion/react'; - -import CTAButton from '~/components/common/CTAButton'; -import { colors, mediaQuery } from '~/styles/constants'; - -export default function RecruitNotiSection() { - return ( -
-
-
-

13기 모집 알람이 마감되었습니다

-
- - 곧 만나요 ! - - 13기 모집 알림 신청하기 -
-
- ); -} - -const sectionCss = css` - margin-top: 260px; - width: 100%; - padding-bottom: 260px; -`; - -const headingWrapperCss = css` - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -`; - -const logoWrapperCss = css` - margin-bottom: 19px; - - ${mediaQuery('xs')} { - margin-bottom: 15px; - } -`; - -const pendingHeadingCss = css` - font-weight: 600; - font-size: 4.375rem; - line-height: 120%; - white-space: pre; - - ${mediaQuery('sm')} { - font-size: 3.5rem; - } - - ${mediaQuery('xs')} { - font-size: 1.875rem; - line-height: 150%; - } -`; - -const notificationSpanCss = css` - font-weight: 400; - font-size: 2rem; - line-height: 140%; - white-space: pre; - color: ${colors.gray3}; - - margin-bottom: 80px; - - ${mediaQuery('xs')} { - font-size: 1.25rem; - } -`; diff --git a/former/home/RecruitNotiSection/index.tsx b/former/home/RecruitNotiSection/index.tsx deleted file mode 100644 index 62df31b0..00000000 --- a/former/home/RecruitNotiSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './RecruitNotiSection'; diff --git a/former/home/ScheduleSection/ScheduleSection.tsx b/former/home/ScheduleSection/ScheduleSection.tsx deleted file mode 100644 index d85f7cb2..00000000 --- a/former/home/ScheduleSection/ScheduleSection.tsx +++ /dev/null @@ -1,196 +0,0 @@ -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInVariants, staggerHalf } from '~/constants/motions'; -import { defaultFadeInSlideToRightVariants, staggerOne } from '~/constants/motions/motions'; -import useMediaQuery from '~/hooks/use-media-query'; -import { colors, mediaQuery, radius } from '~/styles/constants'; - -const SCEDULE_IMAGE_BASE = '/images/home/schedule'; -interface Scehdule { - week: string; - title: string; - image: string; - mobileImage: string; -} - -const SCHEDULES: Scehdule[] = [ - { - week: '1~3주차', - title: - '12기를 함께할 멤버들을 만날 수 있는 OT와 멋진 서비스를 위한 아이디에이션, MVP 설정을 진행해요.', - image: `${SCEDULE_IMAGE_BASE}/1to3.png`, - mobileImage: `${SCEDULE_IMAGE_BASE}/1to3_mobile.png`, - }, - { - week: '4~8주차', - title: - '연사들의 강연을 들으며 서비스 기획을 구체화하고, UT와 중간 공유로 유의미한 피드백을 받아요.', - image: `${SCEDULE_IMAGE_BASE}/4to8.png`, - mobileImage: `${SCEDULE_IMAGE_BASE}/4to8_mobile.png`, - }, - { - week: '9~13주차', - title: '론칭을 위해 열심히 팀 활동을 수행해요.', - image: `${SCEDULE_IMAGE_BASE}/9to13.png`, - mobileImage: `${SCEDULE_IMAGE_BASE}/9to13_mobile.png`, - }, - { - week: '14~17주차', - title: '드디어 최종 발표! 함께 모여 열심히 만든 서비스를 공유하고 우승팀을 선정해요.', - image: `${SCEDULE_IMAGE_BASE}/14to17.png`, - mobileImage: `${SCEDULE_IMAGE_BASE}/14to17_mobile.png`, - }, -]; - -export default function ScheduleSection() { - const isMobile = useMediaQuery('xs'); - - return ( - - - 디프만 12기는 {isMobile &&
}다음과 같이 진행될 예정이에요! - - - 디프만 12기는 매주 토요일, 총 17주간 진행됩니다. - - - - {SCHEDULES.map(schedule => ( - - {schedule.week} -

{schedule.title}

- -
- {schedule.title} -
- - ))} - - - ); -} - -const sectionCss = css` - margin-top: 220px; -`; - -const headingCss = css` - text-align: center; - font-size: 2.75rem; - line-height: 150%; - - margin-bottom: 10px; - - ${mediaQuery('xs')} { - font-size: 24px; - font-weight: 500; - - margin-bottom: 8px; - } -`; - -const descriptionCss = css` - text-align: center; - color: ${colors.gray4}; - font-size: 1.625rem; - line-height: 140%; - - margin-bottom: 50px; - - ${mediaQuery('xs')} { - font-size: 14px; - - margin-bottom: 30px; - } -`; - -const articleWrapperCss = css` - display: flex; - flex-direction: column; - gap: 30px; - - ${mediaQuery('xs')} { - gap: 14px; - } -`; - -const articleCss = css` - position: relative; - width: 100%; - height: 200px; - border-radius: ${radius.md}; - background-color: ${colors.gray9}; - padding: 40px; - - overflow: hidden; - - ${mediaQuery('xs')} { - padding: 20px; - } -`; - -const articleWeekCss = css` - display: inline-block; - color: ${colors.gray4}; - font-size: 1.25rem; - - margin-bottom: 12px; - - ${mediaQuery('xs')} { - font-size: 14px; - - margin-bottom: 6px; - } -`; - -const articleTitleCss = css` - color: ${colors.gray1}; - font-size: 1.5rem; - line-height: 150%; - width: 50%; - - ${mediaQuery('xs')} { - font-size: 16px; - font-weight: 500; - width: 100%; - } -`; - -const articleImageWrapperCss = css` - position: absolute; - top: 0; - right: 0; - - width: 378px; - height: 100%; - - ${mediaQuery('xs')} { - top: unset; - bottom: 20px; - right: 20px; - - width: 130px; - height: 70px; - } -`; diff --git a/former/home/ScheduleSection/index.tsx b/former/home/ScheduleSection/index.tsx deleted file mode 100644 index 3187bf54..00000000 --- a/former/home/ScheduleSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ScheduleSection'; diff --git a/former/home/SponsorSection/SponsorSection.tsx b/former/home/SponsorSection/SponsorSection.tsx deleted file mode 100644 index 78e94746..00000000 --- a/former/home/SponsorSection/SponsorSection.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInUpVariants, defaultFadeInVariants, staggerHalf } from '~/constants/motions'; -import { mediaQuery } from '~/styles/constants'; - -const SPONSOR_IMAGE_BASE = '/images/sponsor'; - -const SPONSOR_IMAGES = [ - { name: 'aws', src: `${SPONSOR_IMAGE_BASE}/aws.svg`, width: 101, height: 62 }, - { name: 'notefolio', src: `${SPONSOR_IMAGE_BASE}/notefolio.svg`, width: 211, height: 35 }, - { name: 'surfit', src: `${SPONSOR_IMAGE_BASE}/surfit.svg`, width: 153, height: 62 }, - { name: 'inflearn', src: `${SPONSOR_IMAGE_BASE}/inflearn.svg`, width: 194, height: 36 }, - { name: 'dcamp', src: `${SPONSOR_IMAGE_BASE}/dcamp.svg`, width: 172, height: 40 }, - { name: 'openup', src: `${SPONSOR_IMAGE_BASE}/openup.png`, width: 170, height: 78 }, -] as const; - -export default function SponsorSection() { - return ( - - - 디프만과 함께하는 -
- 후원사를 소개할게요 - - - {SPONSOR_IMAGES.map(({ name, src, width, height }) => ( - - {name} - - ))} - - - ); -} - -const sectionCss = css` - margin-top: 220px; - width: 100%; - - ${mediaQuery('xs')} { - margin-top: 160px; - } -`; - -const headingCss = css` - font-weight: 500; - font-size: 2.75rem; - line-height: 150%; - text-align: center; - - ${mediaQuery('xs')} { - font-size: 24px; - } -`; - -const imageWrapperCss = css` - margin-top: 90px; - - position: relative; - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - column-gap: 124px; - row-gap: 55px; - padding: 0 100px; - - ${mediaQuery('xs')} { - margin-top: 30px; - - flex-direction: column; - gap: 60px; - } -`; diff --git a/former/home/SponsorSection/index.tsx b/former/home/SponsorSection/index.tsx deleted file mode 100644 index 216a5746..00000000 --- a/former/home/SponsorSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SponsorSection'; diff --git a/former/home/TeamSection/TeamSection.tsx b/former/home/TeamSection/TeamSection.tsx deleted file mode 100644 index 537c3551..00000000 --- a/former/home/TeamSection/TeamSection.tsx +++ /dev/null @@ -1,225 +0,0 @@ -import { useState } from 'react'; -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { AnimatePresence, motion, Variants } from 'framer-motion'; - -import Button from '~/../former/Button'; -import { - defaultEasing, - defaultFadeInScaleVariants, - defaultFadeInVariants, - staggerHalf, - staggerOne, -} from '~/constants/motions'; -import useMediaQuery from '~/hooks/use-media-query'; -import { colors, mediaQuery, radius } from '~/styles/constants'; - -import { - CONTENTS_PER_TEAM, - POSITION_ICON_IMAGES, - POSITION_ICON_MOBILE, - TEAMS, - TeamType, -} from './source'; - -export default function TeamSection() { - const isMobile = useMediaQuery('xs'); - - const [currentTeam, setCurrentTeam] = useState('UIUX Design'); - - function onClickTeamButton(team: TeamType) { - setCurrentTeam(team); - } - - return ( - - - 디프만의 팀은 어떻게 구성되어 있을까요? - - - - {TEAMS.map(team => ( - - - - ))} - - - - - -
- {currentTeam} -
- -
-

-

-
- - - - - ); -} - -const sectionCss = css` - margin-top: 220px; -`; - -const headingCss = css` - text-align: center; - font-size: 2.75rem; - line-height: 150%; - - margin-bottom: 60px; - - ${mediaQuery('xs')} { - font-size: 24px; - font-weight: 500; - - margin-bottom: 30px; - } -`; - -const buttonWrapperCss = css` - width: 100%; - display: flex; - justify-content: center; - gap: 1.875rem; - - margin-bottom: 40px; - - ${mediaQuery('xs')} { - overflow-x: scroll; - justify-content: flex-start; - gap: 14px; - - margin-bottom: 24px; - } -`; - -const contentWrapperCss = css` - width: 100%; - height: 330px; - background-color: ${colors.gray9}; - border-radius: ${radius.lg}; - - display: flex; - gap: 5rem; - - ${mediaQuery('xs')} { - flex-direction: column; - height: auto; - min-height: 330px; - gap: 30px; - - padding: 30px 20px; - } -`; - -const contentImageWrapperCss = css` - position: relative; - width: 23.125rem; - height: 100%; - flex-shrink: 0; - - ${mediaQuery('xs')} { - flex-direction: column; - align-self: center; - width: 120px; - height: 120px; - } -`; - -const contentTextWrapperCss = css` - width: 100%; - height: 100%; - padding-right: 5rem; - display: flex; - flex-direction: column; - justify-content: center; - - ${mediaQuery('xs')} { - padding-right: 0; - } -`; - -const contentHeadingCss = css` - color: ${colors.gray1}; - font-size: 1.75rem; - font-weight: 700; - line-height: 150%; - margin-bottom: 10px; - - ${mediaQuery('xs')} { - font-size: 18px; - text-align: center; - } -`; - -const contentParagraphCss = css` - color: ${colors.gray4}; - font-size: 1.375rem; - line-height: 150%; - - ${mediaQuery('xs')} { - font-size: 14px; - text-align: center; - } -`; - -const cardSwitchVariants: Variants = { - initial: { - opacity: 0, - y: 30, - transition: { duration: 0.5, ease: defaultEasing }, - willChange: 'opacity, transform', - }, - animate: { - opacity: 1, - y: 0, - transition: { duration: 0.4, ease: defaultEasing }, - willChange: 'opacity, transform', - }, - exit: { - opacity: 0, - y: 30, - transition: { duration: 0.4, ease: defaultEasing }, - willChange: 'opacity, transform', - }, -}; diff --git a/former/home/TeamSection/index.tsx b/former/home/TeamSection/index.tsx deleted file mode 100644 index 7884b69a..00000000 --- a/former/home/TeamSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './TeamSection'; diff --git a/former/home/TeamSection/source.ts b/former/home/TeamSection/source.ts deleted file mode 100644 index ca6c0804..00000000 --- a/former/home/TeamSection/source.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { POSITION_ICON_BASE } from '~/constants/images/images'; - -export const TEAMS = ['UIUX Design', 'Web', 'iOS', 'Android', 'Backend'] as const; - -export type TeamType = (typeof TEAMS)[number]; - -type Contents = { - [team in TeamType]: { heading: string; paragraph: string }; -}; - -export const CONTENTS_PER_TEAM: Contents = { - 'UIUX Design': { - heading: '서비스 디자인의 모든 것을 담당하는
UIUX 디자이너', - paragraph: - '서비스 기획부터 UX/UI, 브랜딩, 마케팅까지 -
서비스 런칭에 필요한 메인 업무를 담당하게 되어요. ', - }, - iOS: { - heading: 'iOS 유저를 위한 앱 개발을 담당하는
iOS Developer', - paragraph: `앱 개발을 담당해요. 디자인 및 서버 개발 직군과의 협업을 경험할 수 있으며, 보다 나은 사용성을 위해
- Use Case 및 Wireframe을 구축하게 되어요.`, - }, - Android: { - heading: - '모바일 환경에서 사용자 경험을 개선하는데 필요한 퍼포먼스를 담당하는 Android Developer', - paragraph: `구글의 Material Design에 대한 이해를 바탕으로 최고의 모바일 서비스를 만들기 위한 아이디어를 실행해 볼 수 있는 Android Developer로 성장하게 되어요. `, - }, - Web: { - heading: '웹부터 앱까지 클라이언트 개발을 담당하는
Web Developer', - paragraph: `서비스의 Life Cycle에 전반적으로 참여하며 웹 혹은 웹뷰 형태의 앱 클라이언트 개발을 담당하게 되어요.`, - }, - Backend: { - heading: '시스템의 전반적인 흐름을 관리하는
Backend Developer', - paragraph: `서비스의 전반적인 흐름을 구축해요. 시스템 설계부터 배포까지, 서비스 및 데이터의 흐름을 관리하며 서비스의 전반적인 Life Cycle을 경험하게 되어요.`, - }, -}; - -type PositionIcon = { - [team in TeamType]: string; -}; - -export const POSITION_ICON_IMAGES: PositionIcon = { - Android: `${POSITION_ICON_BASE}/android.png`, - 'UIUX Design': `${POSITION_ICON_BASE}/design.png`, - iOS: `${POSITION_ICON_BASE}/ios.png`, - Backend: `${POSITION_ICON_BASE}/backend.png`, - Web: `${POSITION_ICON_BASE}/web.png`, -}; - -export const POSITION_ICON_MOBILE: PositionIcon = { - Android: `${POSITION_ICON_BASE}/android_mobile.png`, - 'UIUX Design': `${POSITION_ICON_BASE}/design_mobile.png`, - iOS: `${POSITION_ICON_BASE}/ios_mobile.png`, - Backend: `${POSITION_ICON_BASE}/backend_mobile.png`, - Web: `${POSITION_ICON_BASE}/web_mobile.png`, -}; diff --git a/former/interview/HeaderSection/HeaderSection.tsx b/former/interview/HeaderSection/HeaderSection.tsx deleted file mode 100644 index 90a19794..00000000 --- a/former/interview/HeaderSection/HeaderSection.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import Image from 'next/image'; -import { css } from '@emotion/react'; - -import { INTERVIEW_BANNER_BASE } from '~/constants/images/images'; -import useMediaQuery from '~/hooks/use-media-query'; -import { colors, mediaQuery } from '~/styles/constants'; - -const BANNER_IMAGE = `${INTERVIEW_BANNER_BASE}/interview_banner.png`; -const BANNER_IMAGE_MOBILE = `${INTERVIEW_BANNER_BASE}/interview_banner_mobile.png`; - -export default function HeaderSection() { - const isMobile = useMediaQuery('xs'); - - return ( -
- interviewing depromeet 11th -

Member Interview

-
- ); -} - -const headerCss = css` - position: relative; - width: 100vw; - left: calc(-50vw + 50%); - height: 400px; - - ${mediaQuery('xs')} { - height: 200px; - } -`; - -const headingCss = css` - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - font-size: 3.75rem; - font-weight: 500; - text-align: center; - white-space: pre; - color: ${colors.primary}; - - ${mediaQuery('xs')} { - font-size: 30px; - } -`; diff --git a/former/interview/HeaderSection/index.tsx b/former/interview/HeaderSection/index.tsx deleted file mode 100644 index 02dba600..00000000 --- a/former/interview/HeaderSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './HeaderSection'; diff --git a/former/interview/InterviewSection/InterviewSection.tsx b/former/interview/InterviewSection/InterviewSection.tsx deleted file mode 100644 index d53a9219..00000000 --- a/former/interview/InterviewSection/InterviewSection.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import { useState } from 'react'; -import { css } from '@emotion/react'; -import { AnimatePresence, motion } from 'framer-motion'; - -import Button from '~/../former/Button'; -import { NAV_HEIGHT } from '~/../former/NavigationBar/NavigationBar'; -import { defaultFadeInScaleVariants, staggerHalf } from '~/constants/motions'; -import { - defaultFadeInSlideToRightVariants, - defaultFadeInUpVariants, -} from '~/constants/motions/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -import { INTERVIEW_SOURCES, TEAMS, TeamType } from './source'; - -export default function InterviewSection() { - const [currentTeam, setCurrentTeam] = useState('UIUX DESIGN'); - - function onClickTeamButton(team: TeamType) { - setCurrentTeam(team); - } - - return ( -
- - {TEAMS.map(team => ( - - - - ))} - - - - - - {INTERVIEW_SOURCES[currentTeam].name} - - {INTERVIEW_SOURCES[currentTeam].source.map((source, index) => ( - -

Q. {source.question}

-

- - ))} - - -
- ); -} - -const buttonWrapperCss = css` - margin-top: 80px; - - width: 100%; - display: flex; - justify-content: center; - gap: 1.875rem; - - margin-bottom: 100px; - - ${mediaQuery('xs')} { - margin-top: 18px; - - background-color: ${colors.black}; - justify-content: flex-start; - overflow-y: scroll; - padding: 12px 0; - gap: 14px; - - margin-bottom: 40px; - - position: sticky; - top: ${NAV_HEIGHT}px; - z-index: 1000; - } -`; - -const interviewerNameCss = css` - font-size: 2.375rem; - font-weight: 600; - - margin-bottom: 60px; - - ${mediaQuery('xs')} { - font-size: 24px; - margin-bottom: 30px; - } -`; - -const questionWrapperCss = css` - margin-bottom: 60px; - - ${mediaQuery('xs')} { - margin-bottom: 30px; - } -`; - -const questionCss = css` - font-size: 1.625rem; - line-height: 120%; - font-weight: 600; - - &::first-letter { - color: ${colors.secondaryBlue}; - } - - margin-bottom: 16px; - - ${mediaQuery('xs')} { - font-size: 16px; - line-height: 150%; - - margin-bottom: 8px; - } -`; - -const answerCss = css` - color: ${colors.gray4}; - font-size: 1.25rem; - line-height: 150%; - - ${mediaQuery('xs')} { - font-size: 14px; - } -`; diff --git a/former/interview/InterviewSection/index.tsx b/former/interview/InterviewSection/index.tsx deleted file mode 100644 index 8dfa5acc..00000000 --- a/former/interview/InterviewSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './InterviewSection'; diff --git a/former/interview/InterviewSection/source.ts b/former/interview/InterviewSection/source.ts deleted file mode 100644 index 7fc07883..00000000 --- a/former/interview/InterviewSection/source.ts +++ /dev/null @@ -1,140 +0,0 @@ -const QUESTIONS = [ - '많은 동아리들 중, 왜 디프만을 선택하셨는지가 궁금해요.', - '디프만 11기 활동 중 어떤 부분이 가장 기억에 남으시나요?', - '말씀해주신 활동을 통해 어떤 것을 얻으셨나요?', - '어떤 사람에게 디프만 활동이 가장 잘 맞을 것 같나요?', - '디프만 활동을 추천하신다면 이유는 무엇인가요?', - '미래 디프만 12기 분들에게, 본인만의 디프만 꿀팁을 전수해주세요!', -]; - -const ANSWER_BACKEND = [ - `MVP 서비스 출시도 매력적이지만, 이외에도 스터디, 연사 초청 등 디프만 활동을 하며
다양한 직군과 소통을 할 수 있다는 점이 매력적으로 다가왔어요.`, - - `게더타운에서 다양한 사람들과 소통을 했던 경험이 가장 기억에 남아요.`, - - `새로운 사람들을 만나는 건 늘 설레는 것 같아요.
커리어에 대한 고민을 서로 공유하거나 같이 만나서 스터디를 진행하고,
다양한 사람들과 어울리면서 직무에 대한 견해가 넓어진 것 같아서 좋았어요.`, - - `디프만 활동에 책임감이 있고, 적극적인 사람이 잘 맞을 것 같아요. 디프만 활동 기간 동안 서비스 출시를 위해 몰두할 수 있어야 해요.
또한 다양한 사람들이 모여 활동하는 만큼 적극적으로 디프만 활동에 참여한다면 많은 것들을 배워갈 수 있을 것 같아요.`, - - `서비스 출시 이외에도 디프만 활동을 하면서 많은 것들을 얻을 수 있다고 생각해요.
- 다양한 직군의 이야기를 듣거나 같은 직군끼리 스터디를 진행하면서 성장할 수 있는 환경이 갖추어져 있어요.
- 동아리 활동에 적극적으로 참여할 수 있는 사람이라면 추천해요.`, - - `평소 자신이 만들고 싶었던 서비스, 사용해보고 싶었던 기술스택이 있다면 적극적으로 공유해주세요 🙂
- 디프만의 또 다른 매력은 팀원과 의사소통을 통해 주제와 기술스택을 선정할 수 있는 것이라 생각해요.`, -]; - -const ANSWER_WEB = [ - `개발자와 디자이너의 공동 성장을 목표로 한다는 슬로건에 마음이 이끌렸어요.
-서비스를 개발하고 운영하는 활동은 많은 동아리에서 경험할 수 있지만,
-’성장'이라는 공동의 목표를 가진 상태에서 활동에 임하면 더욱 보람찬 경험이 될 수 있을 것이라 생각했어요.`, - - `디프만 운영진분들께서 모셔주신 연사분들과의 시간이 가장 기억에 남아요.
- 평소에 동경하고 있던 분들에게 직접 질문을 드리고 답변을 받았던 것이 인사이트가 되어
- 궁금했던 부분들을 해소할 수 있던 시간이었다고 생각해 기억에 남아요.`, - - `연사분들에게 저를 포함해 많은 분들이 커리어에 대한 질문을 주셨었어요.
- 이에 대해 고민해 주시고, 조심스럽게 견해를 알려주셔서 커리어 패스를 생각해 보는데 큰 도움이 됐어요.`, - - `디프만의 모든 활동에 온전히 참여할 열정이 있는 분이 가장 잘 맞을 거 같아요.
- 서비스를 개발, 운영하는 것 외에 많은 분들과 유대를 쌓으며 네트워킹을 할 수 있는 것이 장점이라 생각하기 때문에
- 활동에 적극적으로 참여하실수록 얻어 가시는 것이 많을 것 같아요.`, - - `개발자 입장에서 디자이너와 함께 서비스를 개발, 운영하고 싶으신 분들,
- 같은 기수분들부터 수많은 이전 기수분들과 유대감을 쌓고 네트워킹 하고 싶으신 분들,
- 사이드 프로젝트로써 완성도 높은 서비스를 만들고 싶으신 분들에게 매우 추천드려요.
- 제가 디프만 활동을 지원하며 기대했던 것들이 충족되었기 때문에 저와 같은 니즈를 갖는 분들이라면 주저하지 않으셔도 좋을 것 같아요.`, - - `학생 개발자분들에게 지원 꿀팁을 드리자면 프로젝트 경험을 어필하는 것이 중요할 것 같아요.
- 코어 활동이 프로젝트 기반으로 진행되기 때문에 면접관의 입장에서는 상대적으로 경험이 부족할 가능성이 있는 학생분들의 프로젝트 경험을 더 유의 깊게 보시겠죠? 그렇기 때문에 학생 입장에서도 충분한 경험이 있고 잘 해낼 수 있다는 것을 어필하신다면 긍정적인 인상을 주실 수 있을 겁니다!`, -]; - -const ANSWER_ANDROID = [ - `직장인들이 많이 참여하는 커뮤니티라고 봤었고, 이전 기수나 홈페이지에도 런칭된 앱이 많아 디프만이 끝나도 제가 참여한 앱이 런칭될 것이라는 신뢰감이 있어 선택하게 되었습니다.`, - - `활동하면서 팀원들이랑 친해지고자 쿵쿵따게임을 온라인으로 진행했던 적이 인상깊습니다. 뭔가 다들 수줍지만 친해지려고 노력하는 모습이 따수웠어요 😊`, - - `가장 크게 얻은 것은 앱 론칭인 것 같습니다. 디프만 활동 동안 목표했던 방향대로 앱을 론칭한 점이 좌충우돌 정신없었지만 재미있었어요. 그리고 다른 포지션에 계신 분들과 소통할 때 효율적으로 소통하는 법을 배울 수 있었습니다.`, - - `책임감과 주도적인 사람이 가장 잘 맞을 것 같아요. 일정 기간 동안 목표한 바를 책임지고 이뤄낼 수 있는 사람, 주도적이게 자신의 일을 이끌고 사람들에게 표현할 줄 아는 사람이 잘 맞을 것 같습니다.`, - - `저는 추천합니다! zerobase에서 다른 포지션에 계신 분들과 협업하고, 무언갈 이뤄내면서 성취감도 얻고! 그 과정에서 배우는 게 많거든요.`, - - `본인만의 생각을 가지고 디프만에 참여하시는 것을 추천드립니다. 예를 들어 이런 서비스를 진행하고 싶다 혹은 디프만을 통해서 이런 것을 얻고 싶다 등 하고 싶어서 뚜렷한 목표를 가지고 디프만에 임하면 더 보람 있을 거예요 👍`, -]; - -const ANSWER_IOS = [ - `개발뿐만 아니라 운영까지 충분한 시간을 가지고 탄탄한 프로젝트를 만들어 갈 수 있다는 매력에 이끌렸습니다.
- 팀과 회의하고 협업하며 현업과 유사한 방식으로 0에서 1을 만들어가는 프로세스를 이곳 말고 또 어디서 경험할까? 라는 생각에
- 고민하지 않고 지원하게 되었습니다.`, - - `모든 것이 생생하게 기억날 정도로 재미있었지만 그 중에서도 같은 직무의 개발자분들과의 협업이 가장 기억에 남습니다.
- 혼자 개발을 해오던 저한테는 항상 바라던 일이었기에 기대를 잔뜩 머금고 왔는데 상상 이상이었습니다. 모두 유쾌하신 분들이었고 무엇보다도 열정적이신 분들이었기에 모임이 끝날때마다 아쉬움이 가득했었습니다.`, - - `더 원활한 소통 능력뿐만 아니라 개인적으로 가지고 있던 기술적인 목마름을 해결할 수 있었습니다. 내가 바라보지 못한 측면으로도 생각해볼 수 있었고 감탄이 나올만한 코드도 볼 수 있었습니다. 뿐만 아니라 혼자 했을 때는 항상 마무리가 흐지부지했었는데 민폐 끼칠 수는 없다는 생각에 제대로 된 마무리를 지을 수 있었습니다.`, - - `'내가 제대로 개발하고 있는 걸까?' 라고 고민하시던 개발자분들, 혼자보다는 함께하는 것을 즐기시는 분들 그리고 기술에 대한 갈증이나 본인의 부족한 부분을 채우고 싶어하시는 모두에게 추천드리고 싶습니다. 디프만에서는 이러한 생각들을 지니고 계신 분들이 많으니 함께 나아갈 수 있을거라고 생각해요!`, - - `혼자서 또는 여럿이 모이더라도 제대로된 프로덕트를 만드는 것은 굉장히 어렵습니다. 하지만 디프만에는 실력뿐 아니라 열정이 넘치시는 분들이 대다수입니다. 말 그대로 디프만은 훌륭한 프로젝트를 만들기에 최적의 환경을 갖추고 있습니다. 최적의 환경에서 프로덕트를 만든다는 것은 메이커분들께는 최고의 선택지가 아닐까 생각합니다.`, - - `무엇보다도 같은 팀, 그리고 같은 기수분들과 친해지는 걸 추천드려요. 주저하지 마시고 먼저 인사드려보세요! 디프만의 본질은 단순히 좋은 프로덕트를 만드는 것이 아니라 같은 길을 걷는 분들과의 네트워킹이라고 생각합니다.
내가 하는 고민거리들 내 옆의 분도 하고 계실 확률이 높을 겁니다! 빨리 친해지고 이야기 나누면서 함께 성장해나가 보세요!`, -]; - -const ANSWER_DESIGNER = [ - `완성도 높은 프로젝트를 런칭하는 것 외에도, 비슷한 성향과 목표를 가진 다양한 사람들과 함께 협업하는 경험을 해보고 싶었어요.`, - - `디프만 활동을 하면서 정말 좋은 사람들을 많이 만났어요.
- 특히 수많은 팀 프로젝트를 했지만 이번만큼 죽이 잘 맞는 팀원들은 처음이었어서 가장 기억에 남네요.`, - - `팀원들 모두가 비슷한 직군에 종사하다보니 커리어에 대한 고민을 나눌 수도 있고, 비슷한 나이대라 더 친하게 지낼 수 있었어요.
- 어른이 돼서 친구 만들기란 하늘의 별따기처럼 느껴졌던 저같은 내향인에게는 친구가 많이 생겨 너무 행복했답니다.`, - - `결과만큼 과정도 중요하다는 걸 알고 계신 분이 디프만 활동에 적격일 것 같아요.`, - - `추천드립니다 별이 다섯 개!
- 11기에 지원할 때 자소서에 썼던 '디프만에서 기대하는 것 세 가지'를 모두 이루었기 때문인데요.
- '내가 왜 UXUI를 하려고 했었지'를 돌아볼 수 있는 계기가 되었고, 색다른 관점에서 문제를 해결할 수 있는 역량을 배웠으며,
- 디프만에서 디자이너, 개발자들과 협업하며 배운 커뮤니케이션 역량을 실무에서도 활용할 수 있었어요.`, - - `'내 포트폴리오는 아직 부족해..'라고 생각하셨나요? 대단한 디자이너들만 모여있을 것 같나요?
- ..물론 대단한 분들이 모여계십니다. 하지만 그렇다고 주눅드실 필요는 전혀 없답니다. 저도 열정 하나로 밀어붙여서(?) 여기까지 왔는걸요.. - 오히려 멋진 디자이너 분들 옆에서 배우고 성장할 수 있으며, 본인이 생각만 했던 디자인을 직접 구현해 런칭까지 해 볼 수 있는 절호의 기회입니다. - 초반 아이디에이션이나 디자인 컨셉 회의 때 마음껏 의견을 내세요!`, -]; - -// TODO: 포지션과 포지션 타입을 국지적으로 사용하고 있는데, 상수로써 관리하는건 어떨지 -export const TEAMS = ['UIUX DESIGN', 'Web', 'iOS', 'Android', 'Backend'] as const; - -export type TeamType = (typeof TEAMS)[number]; - -type InterviewSource = Array<{ - question: string; - answer: string; -}>; - -type InterviewSources = { - [team in TeamType]: { name: string; source: InterviewSource }; -}; - -export const INTERVIEW_SOURCES: InterviewSources = { - 'UIUX DESIGN': { - name: 'UIUX Designer 박소현 님', - source: QUESTIONS.map((question, index) => ({ question, answer: ANSWER_DESIGNER[index] })), - }, - iOS: { - name: 'iOS Developer 김록원 님', - source: QUESTIONS.map((question, index) => ({ question, answer: ANSWER_IOS[index] })), - }, - Android: { - name: 'Android Developer 김수연 님', - source: QUESTIONS.map((question, index) => ({ question, answer: ANSWER_ANDROID[index] })), - }, - Web: { - name: 'Web Developer 오혜성 님', - source: QUESTIONS.map((question, index) => ({ question, answer: ANSWER_WEB[index] })), - }, - Backend: { - name: 'Backend Developer 김민수 님', - source: QUESTIONS.map((question, index) => ({ question, answer: ANSWER_BACKEND[index] })), - }, -}; diff --git a/former/project/AnotherProjectSection/AnotherProjectContainer.tsx b/former/project/AnotherProjectSection/AnotherProjectContainer.tsx deleted file mode 100644 index 1412aa9d..00000000 --- a/former/project/AnotherProjectSection/AnotherProjectContainer.tsx +++ /dev/null @@ -1,177 +0,0 @@ -import React from 'react'; -import Image from 'next/image'; -import { useRouter } from 'next/router'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { Project } from '~/components/project/constants'; -import { PROJECTS_IMAGE_BASE } from '~/constants/images/images'; -import { defaultFadeInUpVariants, staggerHalf } from '~/constants/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -interface Props { - projects: Project[]; -} - -export default function AnotherProjectContainer({ projects }: Props) { - const { push } = useRouter(); - - return ( - - {projects.map(({ title, catchphrase, thumbnail, icon }, projectIndex) => ( - push(`/project/${title}`)} - variants={defaultFadeInUpVariants} - > -
- {`${title} -
-
- {`${title} -
-
-
{title}
-
{catchphrase}
-
- - ))} - - ); -} -const projectsContainerCss = css` - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 40px 42px; - - > button:nth-of-type(n + 4) { - display: none; - } - - ${mediaQuery('xs')} { - gap: 20px 30px; - - > button:nth-of-type(n + 4) { - display: block; - } - } -`; - -const projectCss = css` - width: 332px; - height: 296px; - overflow: hidden; - text-align: left; - - > div:first-of-type { - height: 200px; - border-radius: 16px 16px 0 0; - background-color: ${colors.gray7}; - overflow: hidden; - - & img { - transition: transform 0.3s; - } - } - > div:last-child { - height: 96px; - border-radius: 0 0 16px 16px; - background-color: ${colors.gray9}; - padding: 20px 20px 0; - - transition: background-color 0.5s; - } - - &:hover { - > div:first-of-type img { - transform: scale(1.1); - } - > div:last-child { - background-color: ${colors.gray8}; - } - } - - ${mediaQuery('xs')} { - width: 160px; - height: 221px; - - > div:first-of-type { - width: 160px; - height: 160px; - border-radius: 16px; - background-color: ${colors.gray7}; - overflow: hidden; - } - > div:last-child { - height: 51px; - border-radius: 0; - background-color: transparent; - padding: 10px 0 0; - } - } -`; - -const imageCss = css` - position: relative; - width: 335px; - height: 200px; - - ${mediaQuery('xs')} { - display: none; - } -`; - -const imageMobileCss = css` - position: relative; - width: 160px; - height: 160px; - display: none; - - ${mediaQuery('xs')} { - display: block; - } -`; - -const projectNameCss = css` - color: ${colors.gray1}; - padding-bottom: 8px; - font-size: 1.5rem; - line-height: 29px; - font-weight: 700; - - ${mediaQuery('xs')} { - padding-bottom: 4px; - font-size: 1rem; - line-height: 19px; - font-weight: 600; - letter-spacing: -0.005em; - } -`; - -const projectCatchphraseCss = css` - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: ${colors.gray4}; - line-height: 19px; - font-weight: 500; - - ${mediaQuery('xs')} { - font-size: 0.75rem; - line-height: 14px; - font-weight: 500; - letter-spacing: -0.005em; - } -`; diff --git a/former/project/AnotherProjectSection/AnotherProjectSection.tsx b/former/project/AnotherProjectSection/AnotherProjectSection.tsx deleted file mode 100644 index 1f362402..00000000 --- a/former/project/AnotherProjectSection/AnotherProjectSection.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import dynamic from 'next/dynamic'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { projects } from '~/components/project/constants'; -import { defaultFadeInUpVariants, staggerOne } from '~/constants/motions'; -import { mediaQuery } from '~/styles/constants'; - -import HorizontalDivider from '../HorizontalDivider'; - -const AnotherProjectContainer = dynamic(() => import('./AnotherProjectContainer'), { ssr: false }); - -export default function AnotherProjectSection() { - return ( - <> -
- -
- - - 다른 프로젝트 - - Math.random() - Math.random()).slice(0, 4)} - /> - - - ); -} - -const dividerCss = css` - ${mediaQuery('xs')} { - margin: 0 20px; - } -`; - -const sectionCss = css` - margin: 60px 0 120px; - - ${mediaQuery('xs')} { - margin: 40px 20px 120px; - } -`; - -const anotherProjectCss = css` - text-align: center; - font-weight: 700; - font-size: 2rem; - margin-bottom: 40px; - - ${mediaQuery('xs')} { - text-align: left; - margin-bottom: 30px; - } -`; diff --git a/former/project/AnotherProjectSection/index.tsx b/former/project/AnotherProjectSection/index.tsx deleted file mode 100644 index ddae0318..00000000 --- a/former/project/AnotherProjectSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './AnotherProjectSection'; diff --git a/former/project/DescriptionSection/DescriptionSection.tsx b/former/project/DescriptionSection/DescriptionSection.tsx deleted file mode 100644 index 8afec7d3..00000000 --- a/former/project/DescriptionSection/DescriptionSection.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInUpVariants } from '~/constants/motions'; -import { colors } from '~/styles/constants'; - -export default function DescriptionSection() { - return ( - - - 디프만에서 탄생한 개성만점 -
- 서비스들을 소개할게요! - - - ); -} - -const headerCss = css` - font-weight: 600; - font-size: 2rem; - line-height: 150%; - color: ${colors.white}; - margin: 120px 0 60px; -`; diff --git a/former/project/DescriptionSection/index.tsx b/former/project/DescriptionSection/index.tsx deleted file mode 100644 index 386a763a..00000000 --- a/former/project/DescriptionSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './DescriptionSection'; diff --git a/former/project/HorizontalDivider/HorizontalDivider.tsx b/former/project/HorizontalDivider/HorizontalDivider.tsx deleted file mode 100644 index cbfae094..00000000 --- a/former/project/HorizontalDivider/HorizontalDivider.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInVariants } from '~/constants/motions'; -import { colors } from '~/styles/constants'; - -export default function HorizontalDivider() { - return ( - - ); -} - -const horizontalDividerCss = css` - border: thin solid ${colors.gray7}; -`; diff --git a/former/project/HorizontalDivider/index.tsx b/former/project/HorizontalDivider/index.tsx deleted file mode 100644 index dc7f5fe8..00000000 --- a/former/project/HorizontalDivider/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './HorizontalDivider'; diff --git a/former/project/ProjectDetailSection/JobContainer.tsx b/former/project/ProjectDetailSection/JobContainer.tsx deleted file mode 100644 index 64063a07..00000000 --- a/former/project/ProjectDetailSection/JobContainer.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInUpVariants } from '~/constants/motions'; -import { defaultFadeInSlideToLeftVariants } from '~/constants/motions/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -const memberTextFilter = (members: string[]) => { - return members.reduce((result, member) => { - return `${result}, ${member}`; - }); -}; - -interface Props { - job: 'Design' | 'FrontEnd' | 'Backend'; - member: string[]; -} - -export default function JobContainer({ job, member }: Props) { - return ( - - - {job} - - - {memberTextFilter(member)} - - - ); -} - -const JobContainerCss = css` - display: flex; - margin-bottom: 12px; -`; - -const jobCss = css` - min-width: 105px; - font-weight: 400; - color: ${colors.gray2}; -`; - -const memberCss = css` - min-width: 200px; - font-weight: 500; - color: ${colors.gray4}; - white-space: normal; - - ${mediaQuery('xs')} { - white-space: normal; - } -`; diff --git a/former/project/ProjectDetailSection/LinkIcon.tsx b/former/project/ProjectDetailSection/LinkIcon.tsx deleted file mode 100644 index e3540094..00000000 --- a/former/project/ProjectDetailSection/LinkIcon.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInSlideToLeftVariants } from '~/constants/motions/motions'; -import { mediaQuery } from '~/styles/constants'; - -interface Props { - src: string; - alt: string; - href: string; -} - -export default function LinkIcon({ src, alt, href }: Props) { - return ( - - {alt} - - ); -} - -const iconCss = css` - position: relative; - width: 64px; - height: 64px; - - ${mediaQuery('xs')} { - width: 40px; - height: 40px; - } -`; diff --git a/former/project/ProjectDetailSection/ProjectDetailSection.tsx b/former/project/ProjectDetailSection/ProjectDetailSection.tsx deleted file mode 100644 index 949fd791..00000000 --- a/former/project/ProjectDetailSection/ProjectDetailSection.tsx +++ /dev/null @@ -1,218 +0,0 @@ -import React from 'react'; -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { Project } from '~/components/project/constants'; -import { CONTACT_PROJECT_IMAGES, PROJECTS_IMAGE_BASE } from '~/constants/images/images'; -import { defaultFadeInUpVariants, staggerOne } from '~/constants/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -import JobContainer from './JobContainer'; -import LinkIcon from './LinkIcon'; - -interface Props { - project: Project; -} - -export default function ProjectDetailSection({ project }: Props) { - return ( - - - {'image'} -
- - - - {'image'} - - - - {project.title} - - - {project.catchphrase} - - - - {project.generation}기 · {project.team} - - - - {project.designers && } - {project.frontends && } - {project.backends && } - - - {project.description} - - - - {project.ios && ( - - )} - {project.android && ( - - )} - {project.web && ( - - )} - {project.behance && ( - - )} - - - - ); -} - -const projectDetailCss = css` - padding-top: 60px; - - ${mediaQuery('xs')} { - padding-top: 0; - } -`; - -const imageCss = css` - position: relative; - height: 500px; - width: auto; - border-radius: 20px; - overflow: hidden; - - ${mediaQuery('xs')} { - max-height: 174px; - width: auto; - border-radius: 0px; - } -`; - -const imageLinnerCss = css` - ${mediaQuery('xs')} { - width: 100%; - height: 100%; - background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%); - opacity: 0.8; - transform: matrix(1, 0, 0, -1, 0, 0); - } -`; - -const explanationCss = css` - position: relative; - margin: 60px 0 120px; - - ${mediaQuery('xs')} { - margin: 83px 20px 100px; - } -`; - -const imageThumbnailCss = css` - position: absolute; - display: none; - top: -127px; - width: 97px; - height: 97px; - border-radius: 12px; - overflow: hidden; - ${mediaQuery('xs')} { - display: block; - } -`; - -const titleContainerCss = css` - display: flex; - align-items: flex-end; - margin-top: 60px; - - ${mediaQuery('xs')} { - flex-direction: column; - align-items: flex-start; - } -`; - -const titleCss = css` - margin-right: 16px; - font-weight: 600; - font-size: 2rem; - line-height: 38px; - letter-spacing: -0.5px; - color: ${colors.white}; -`; - -const catchphraseCss = css` - font-size: 1.5rem; - line-height: 29px; - letter-spacing: -0.5px; - color: ${colors.gray4}; -`; - -const generationCss = css` - margin: 40px 0 12px; - font-weight: 700; - font-size: 1.5rem; - line-height: 150%; - letter-spacing: -0.5px; -`; - -const detailCss = css` - display: flex; - justify-content: space-between; - - ${mediaQuery('xs')} { - flex-direction: column; - align-items: flex-start; - } -`; - -const teamContainerCss = css` - width: 335px; - font-size: 1.25rem; - line-height: 150%; - margin: 0 10% 30px 0; -`; - -const descriptionCss = css` - font-weight: 500; - font-size: 1.25rem; - line-height: 150%; - color: ${colors.gray2}; - margin: 0 0 40px 0; -`; - -const iconContainerCss = css` - display: flex; - gap: 24px; - - ${mediaQuery('xs')} { - gap: 16px; - } -`; diff --git a/former/project/ProjectDetailSection/index.tsx b/former/project/ProjectDetailSection/index.tsx deleted file mode 100644 index 33266f79..00000000 --- a/former/project/ProjectDetailSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProjectDetailSection'; diff --git a/former/project/ProjectSection/ProjectContainer.tsx b/former/project/ProjectSection/ProjectContainer.tsx deleted file mode 100644 index b4941634..00000000 --- a/former/project/ProjectSection/ProjectContainer.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import React from 'react'; -import Image from 'next/image'; -import { useRouter } from 'next/router'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { Project } from '~/components/project/constants'; -import { PROJECTS_IMAGE_BASE } from '~/constants/images/images'; -import { defaultFadeInUpVariants, staggerHalf } from '~/constants/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -interface Props { - projects: Project[]; -} - -export default function ProjectContainer({ projects }: Props) { - const { push } = useRouter(); - - return ( - - {projects.map(({ title, catchphrase, thumbnail }, projectIndex) => ( - push(`/project/${title}`)} - variants={defaultFadeInUpVariants} - > -
- {`${title} -
-
-
{title}
-
{catchphrase}
-
- - ))} - - ); -} -const projectsContainerCss = css` - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 40px 42px; - - ${mediaQuery('xs')} { - gap: 20px 0; - } -`; - -const projectCss = css` - width: 332px; - height: 296px; - overflow: hidden; - text-align: left; - - > div:first-of-type { - height: 200px; - border-radius: 16px 16px 0 0; - background-color: ${colors.gray7}; - overflow: hidden; - - & img { - transition: transform 0.3s; - } - } - > div:last-child { - height: 96px; - border-radius: 0 0 16px 16px; - background-color: ${colors.gray9}; - padding: 20px 20px 0; - transition: background-color 0.3s; - } - - &:hover { - > div:first-of-type img { - transform: scale(1.1); - } - > div:last-child { - background-color: ${colors.gray8}; - } - } -`; - -const imageCss = css` - position: relative; - width: 335px; - height: 200px; -`; - -const projectNameCss = css` - color: ${colors.gray1}; - padding-bottom: 8px; - font-size: 1.5rem; - line-height: 29px; - font-weight: 700; -`; - -const projectCatchphraseCss = css` - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: ${colors.gray4}; - line-height: 19px; - font-weight: 500; -`; diff --git a/former/project/ProjectSection/ProjectSection.tsx b/former/project/ProjectSection/ProjectSection.tsx deleted file mode 100644 index 72eb1e2f..00000000 --- a/former/project/ProjectSection/ProjectSection.tsx +++ /dev/null @@ -1,206 +0,0 @@ -import React, { useState } from 'react'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import BottomSheet from '~/../former/BottomSheet'; -import Button from '~/../former/Button'; -import { ArrowIcon } from '~/components/common/icons/ArrowIcon'; -import { CheckIcon } from '~/components/common/icons/CheckIcon'; -import { Project, projects } from '~/components/project/constants'; -import { defaultFadeInVariants, staggerOne } from '~/constants/motions'; -import useMediaQuery from '~/hooks/use-media-query'; -import { colors, mediaQuery } from '~/styles/constants'; - -import ProjectContainer from './ProjectContainer'; -import VerticalDivider from '../VerticalDivider'; - -type Order = 'latest' | 'oldest'; - -/** - * [string, Project[]][] - * - string: 해당 기수 - * - Project[]: 해당 기수 프로젝트 리스트 - */ -const oldGeneration = 7; -const organizeProjects = projects.reduce>((result, project) => { - // 8기 이전 기수는 이전 기수라는 명칭으로 통일합니다. - const generation = project.generation > oldGeneration ? project.generation : oldGeneration; - - result[generation] = [...(result[generation] ? result[generation] : []), project]; - - return result; -}, {}); - -export default function ProjectSection() { - const [order, setOrder] = useState('latest'); - const [sortedProjects, setSortedProjects] = useState( - Object.entries(organizeProjects).sort(([a], [b]) => Number(b) - Number(a)) - ); - const isMobile = useMediaQuery('xs'); - const [isShowing, setIsShowing] = useState(false); - - const setProjects = (order: Order) => { - setOrder(order); - setSortedProjects( - Object.entries(organizeProjects).sort(([a], [b]) => - order === 'latest' ? Number(b) - Number(a) : Number(a) - Number(b) - ) - ); - }; - - return ( - <> - - {isMobile && ( - - - - )} - {!isMobile && ( - - - - - - )} - - {sortedProjects.map((projects, generationIndex) => ( - - -
- {Number(projects[0]) > oldGeneration ? `${projects[0]}기` : '이전기수'} -
- - - - ))} - - { - setIsShowing(false); - }} - > - - -
- - - - - ); -} - -const sortMenuListCss = css` - margin: 30px 30px 0; -`; - -const sortMenuDivider = css` - margin-bottom: 24px; - - border: 0px; - border-top: 1px solid ${colors.gray7}; -`; - -const sortMenuCss = (selected: boolean) => css` - display: flex; - justify-content: space-between; - align-items: center; - - width: 100%; - - font-size: 1.286rem; - line-height: 120%; - font-weight: ${selected ? 700 : 400}; - color: ${selected ? colors.white : colors.gray3}; - - margin-bottom: 24px; -`; - -const orderContainerCss = (order: Order) => css` - display: flex; - justify-content: flex-end; - flex-wrap: wrap; - margin: 24px 0 50px; - gap: 12px; - - button { - font-weight: 600; - font-size: 1rem; - transition: color 0.3s; - } - button:first-of-type { - color: ${order === 'latest' ? colors.white : colors.gray4}; - } - button:last-child { - color: ${order === 'latest' ? colors.gray4 : colors.white}; - } -`; - -const mobilOrderContainerCss = css` - display: flex; - justify-content: end; - margin: 17px 0 23px; - - button { - display: flex; - align-items: center; - gap: 6px; - - color: ${colors.white}; - - &:hover { - background-color: ${colors.gray8}; - } - } -`; - -const sortedProjectsContainerCss = css` - margin-bottom: 80px; -`; - -const generationCss = css` - margin-bottom: 30px; - font-size: 1.5rem; - font-weight: 700; - - ${mediaQuery('xs')} { - display: flex; - justify-content: center; - } -`; - -const generationInnerCss = css` - ${mediaQuery('xs')} { - width: 332px; - } -`; diff --git a/former/project/ProjectSection/index.tsx b/former/project/ProjectSection/index.tsx deleted file mode 100644 index 070a1eb0..00000000 --- a/former/project/ProjectSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ProjectSection'; diff --git a/former/project/VerticalDivider/VerticalDivider.tsx b/former/project/VerticalDivider/VerticalDivider.tsx deleted file mode 100644 index c5e03d47..00000000 --- a/former/project/VerticalDivider/VerticalDivider.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { css } from '@emotion/react'; - -import { colors } from '~/styles/constants'; - -export default function VerticalDivider() { - return
; -} - -const verticalDividerCss = css` - background-color: ${colors.gray7}; - width: 1px; -`; diff --git a/former/project/VerticalDivider/index.tsx b/former/project/VerticalDivider/index.tsx deleted file mode 100644 index c3c35a37..00000000 --- a/former/project/VerticalDivider/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './VerticalDivider'; diff --git a/former/recruit-detail/DescriptionSection/DescriptionSection.tsx b/former/recruit-detail/DescriptionSection/DescriptionSection.tsx deleted file mode 100644 index 562a18e6..00000000 --- a/former/recruit-detail/DescriptionSection/DescriptionSection.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import CTAButton from '~/components/common/CTAButton'; -import { RECRUIT_STATE } from '~/../former/recruit/HeaderSection/HeaderSection'; -import { END_DATE, NOTION_RECRUIT_PATH, START_DATE } from '~/constants/common/common'; -import { defaultFadeInUpVariants, staggerOne } from '~/constants/motions'; -import { defaultFadeInSlideToRightVariants } from '~/constants/motions/motions'; -import useGaEvent from '~/hooks/use-ga-event'; -import { colors, mediaQuery } from '~/styles/constants'; - -import { - ICON_CATEGORY_PATH, - POSITION_DESCRIPTION, - POSITION_DISPLAY_NAME, - POSITION_PREFER_LIST, - POSITION_WITH_CATEGORY_NAME, - PositionType, -} from '../constants'; - -export default function DescriptionSection({ positionType }: { positionType: PositionType }) { - const { recordApplyEvent } = useGaEvent(); - - const positionName = POSITION_DISPLAY_NAME[positionType]; - - const startDate = new Date(START_DATE); - const endDate = new Date(END_DATE); - - const getCurrentState = () => { - const current = new Date(); - - if (startDate > current) return RECRUIT_STATE.PREVIOUS; - if (endDate < current) return RECRUIT_STATE.FINISH; - - return RECRUIT_STATE.IN_PROGRESS; - }; - - const isInProgress = () => { - return getCurrentState() === RECRUIT_STATE.IN_PROGRESS; - }; - - return ( - - - {positionName} - -
- - category-icon - {POSITION_WITH_CATEGORY_NAME[positionType]}는 이런 일을 해요 - - - {POSITION_DESCRIPTION[positionType]} - -
-
- - category-icon - 이런 분들과 함께하고 싶어요 - - -
    - {POSITION_PREFER_LIST[positionType].map((item, index) => ( -
  • - {item} -
    • - ))} -
- -
- - { - recordApplyEvent(); - window.open(NOTION_RECRUIT_PATH); - }} - > - {isInProgress() ? '지원하기' : '모집 기간이 아닙니다.'} - - -
- - ); -} - -const sectionCss = css` - width: 100%; - margin-bottom: 60px; -`; - -const headingCss = css` - font-weight: 600; - font-size: 2.625rem; - line-height: 120%; - - margin-bottom: 60px; - - ${mediaQuery('xs')} { - font-size: 1.714rem; - - margin-bottom: 30px; - } -`; - -const descriptionCss = css` - margin-bottom: 80px; - font-size: 1.5rem; - dt { - display: flex; - align-items: center; - gap: 6px; - - font-weight: 600; - line-height: 29px; - - color: ${colors.gray1}; - - margin-bottom: 12px; - } - - dd { - line-height: 150%; - word-break: break-all; - white-space: pre-wrap; - color: ${colors.gray3}; - } - - ${mediaQuery('xs')} { - font-size: 1.143rem; - - margin-bottom: 30px; - } -`; - -const preferListCss = css` - list-style: disc; - padding-left: 20px; -`; - -const preferItemCss = css` - line-height: 150%; -`; - -const ctaBtnCss = css` - margin-bottom: 120px; - - ${mediaQuery('xs')} { - width: 100%; - - margin-top: 20px; - margin-bottom: 100px; - } -`; - -const dividerCss = css` - border: 0px; - border-top: 1px solid ${colors.gray7}; -`; diff --git a/former/recruit-detail/DescriptionSection/index.tsx b/former/recruit-detail/DescriptionSection/index.tsx deleted file mode 100644 index 386a763a..00000000 --- a/former/recruit-detail/DescriptionSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './DescriptionSection'; diff --git a/former/recruit-detail/HeaderSection/HeaderSection.tsx b/former/recruit-detail/HeaderSection/HeaderSection.tsx deleted file mode 100644 index 76fc234e..00000000 --- a/former/recruit-detail/HeaderSection/HeaderSection.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import Image from 'next/image'; -import { css } from '@emotion/react'; - -import useMediaQuery from '~/hooks/use-media-query'; -import { mediaQuery } from '~/styles/constants'; - -import { - BANNER_IMG_PATH, - MOBILE_BANNER_IMG_PATH, - POSITION_DISPLAY_NAME, - PositionType, -} from '../constants'; - -export default function HeaderSection({ positionType }: { positionType: PositionType }) { - const isMobile = useMediaQuery('xs'); - - const positionName = POSITION_DISPLAY_NAME[positionType]; - - return ( -
-
- {`banner-image-${positionName}`} -
-

{positionName}

-
- ); -} - -const headerCss = css` - height: calc(100vw * (400 / 1440)); - margin-bottom: 80px; - - ${mediaQuery('xs')} { - height: calc(100vw * (200 / 375)); - - margin-bottom: 50px; - } -`; - -const backgroundCss = css` - position: absolute; - left: 50%; - transform: translateX(-50%); - - width: 100vw; - height: calc(100vw * (400 / 1440)); - - ${mediaQuery('xs')} { - height: calc(100vw * (200 / 375)); - } -`; - -const headingCss = css` - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -`; diff --git a/former/recruit-detail/HeaderSection/index.tsx b/former/recruit-detail/HeaderSection/index.tsx deleted file mode 100644 index 02dba600..00000000 --- a/former/recruit-detail/HeaderSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './HeaderSection'; diff --git a/former/recruit-detail/OtherPositionSection/OtherPositionSection.tsx b/former/recruit-detail/OtherPositionSection/OtherPositionSection.tsx deleted file mode 100644 index 0df3e9dd..00000000 --- a/former/recruit-detail/OtherPositionSection/OtherPositionSection.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import RecruitCard from '~/components/common/RecruitCard'; -import { staggerOne } from '~/constants/motions'; -import { mediaQuery } from '~/styles/constants'; - -import { POSITION_TYPE, PositionType } from '../constants'; - -export default function OtherPostionSection({ positionType }: { positionType: PositionType }) { - const getOtherPositionKeys = (): string[] => { - return Object.keys(POSITION_TYPE).filter(type => type !== positionType); - }; - - return ( - -

다른 직군 보기

- - {getOtherPositionKeys().map((type: string) => ( -
- -
- ))} - - - ); -} - -const sectionCss = css` - width: 100%; - margin-bottom: 120px; -`; - -const headingCss = css` - font-weight: 600; - font-size: 2.625rem; - line-height: 140%; - - margin-bottom: 60px; - - ${mediaQuery('xs')} { - font-size: 1.714rem; - - margin-bottom: 30px; - } -`; - -const cardListContainerCss = css` - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 40px; - - ${mediaQuery('xs')} { - gap: 12px; - } -`; - -const cardWrapperCss = css` - width: 500px; - - ${mediaQuery('xs')} { - width: 100%; - } -`; diff --git a/former/recruit-detail/OtherPositionSection/index.tsx b/former/recruit-detail/OtherPositionSection/index.tsx deleted file mode 100644 index 927a0d76..00000000 --- a/former/recruit-detail/OtherPositionSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './OtherPositionSection'; diff --git a/former/recruit/FaqSection/FaqSection.tsx b/former/recruit/FaqSection/FaqSection.tsx deleted file mode 100644 index 0423d4dc..00000000 --- a/former/recruit/FaqSection/FaqSection.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { useState } from 'react'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import Button from '~/../former/Button'; -import { defaultFadeInVariants, staggerHalf } from '~/constants/motions'; -import { - defaultFadeInSlideToRightVariants, - defaultFadeInUpVariants, -} from '~/constants/motions/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -import { FAQ, FAQ_TYPE } from './constants'; - -export default function FaqSection() { - const [currentTab, setCurrentTab] = useState(FAQ_TYPE.REQUIREMENT); - - return ( - - - 자주 묻는 질문 - - - 찾으시는 내용이 없다면 디프만 카카오톡 채널 ( - - @depromeet - - )으로 궁금한 점을 전달해 주세요. - - - - - - - - {FAQ[currentTab].map((faq, index) => ( -
  • -
    - Q. - {faq.title} -
    -
    {faq.description}
    -
    • - ))} -     -     - ); -} - -const sectionCss = css` - width: 100%; - margin-bottom: 120px; - - ${mediaQuery('xs')} { - margin-bottom: 140px; - } -`; - -const headingCss = css` - font-weight: 700; - font-size: 2.625rem; - line-height: 140%; - - margin-bottom: 12px; - - ${mediaQuery('xs')} { - font-size: 1.714rem; - line-height: 150%; - } -`; - -const descriptionCss = css` - font-weight: 400; - font-size: 1.25rem; - line-height: 150%; - color: ${colors.gray2}; - - margin-bottom: 60px; - - ${mediaQuery('xs')} { - font-size: 1rem; - line-height: 150%; - - margin-bottom: 40px; - } -`; - -const tabContainerCss = css` - display: flex; - gap: 0 40px; - - margin-bottom: 60px; - - ${mediaQuery('xs')} { - gap: 0 14px; - - margin-bottom: 30px; - } -`; - -const faqCss = css` - margin-bottom: 60px; - - em { - font-style: normal; - color: ${colors.secondaryBlue}; - } - - dt { - font-weight: 600; - font-size: 1.625rem; - line-height: 150%; - } - - dd { - font-weight: 400; - font-size: 1.25rem; - line-height: 150%; - color: ${colors.gray4}; - white-space: pre-wrap; - } - - ${mediaQuery('xs')} { - margin-bottom: 30px; - - dt { - font-size: 1.143rem; - line-height: 120%; - - margin-bottom: 8px; - } - - dd { - font-size: 1rem; - } - } -`; - -const kakaoLinkCss = css` - color: ${colors.secondaryBlue}; -`; diff --git a/former/recruit/FaqSection/constants.ts b/former/recruit/FaqSection/constants.ts deleted file mode 100644 index a53d02e1..00000000 --- a/former/recruit/FaqSection/constants.ts +++ /dev/null @@ -1,93 +0,0 @@ -export const FAQ_TYPE = { - REQUIREMENT: 'REQUIREMENT', - INTERVIEW: 'INTERVIEW', - ACTIVITY: 'ACTIVITY', -} as const; - -interface FaqItem { - title: string; - description: string; -} - -interface FaqMap { - [key: string]: FaqItem[]; -} - -export const REQUIREMENT_LIST = [ - { - title: '지원 가능한 나이가 어떻게 되나요?', - description: '20세 이상부터 가능해요!', - }, - { - title: '관련 경험이 없어도 지원 가능한가요?', - description: - '관련 직무 경험이 없어도 지원 가능해요. 다만 디자인 직군은 지원 시 포트폴리오를 필수로 제출하셔야 해요.', - }, - { - title: '실력이 뛰어나야만 참여할 수 있나요?', - description: - '디프만은 실력보다 개인의 성장 가능성, 열정, 책임감 등에 더 큰 비중을 두고 지원자 분들을 심사할 예정이에요.', - }, - { - title: '외국 또는 지방지역에서도 참여할 수 있나요?', - description: - '디프만 12기는 오프라인 모임도 진행될 예정이므로, 외국에 거주하실 경우 참여가 어려워요.\n(지방 거주자는 서울에서 진행되는 오프라인 모임에 참여 가능할 경우 지원 가능합니다.)', - }, - { - title: '직군간 중복지원이 가능한가요?', - description: '직군간 중복지원은 불가능해요.', - }, - { - title: '지원 결과는 어디에서 확인할 수 있나요?', - description: '서류 작성시 기입한 이메일로 결과를 안내드릴 예정이에요.', - }, -]; - -export const INTERVIEW_LIST = [ - { - title: '면접은 언제 진행되나요?', - description: - '9월 17, 18 양일 간의 심사를 거쳐 12기 멤버를 선발할 예정이에요.\n서류 지원 시 가능한 시간대를 선택해주시면 됩니다! ', - }, - { - title: '면접 인원은 어떻게 되나요?', - description: '면접관과 지원자 다대다 면접으로 진행될 예정이에요.', - }, - { - title: '면접 방식은 어떻게 되나요?', - description: '면접은 메타버스 온라인 플랫폼인 게더타운에서 진행될 예정이에요.', - }, - { - title: '면접 시간은 얼마나 걸리나요?', - description: '약 30~40분 정도 소요될 예정이에요.', - }, -]; - -export const ACTIVITY_LIST = [ - { - title: '디프만 12기 정규 세션은 어떻게 진행되나요?', - description: - '디프만 12기는 온라인과 오프라인 모두 진행되어요. 온라인의 경우 메타버스 온라인 플랫폼인 게더타운에서, 오프라인의 경우 서울 지역에서 개최될 예정이에요.', - }, - { - title: '활동 기간은 어떻게 되나요? ', - description: - '우리는 공휴일을 소중히 여기는 디프만!\n9.24-1.14 3개월 간 진행되며, 크리스마스, 새해 주간에는 쉬어가요.', - }, - { - title: '디프만에서는 어떤 활동을 하나요?', - description: - '팀별로 서비스 아이디에이션부터 기획, 디자인, 개발, 런칭까지! 서비스 하나가 만들어지는 전 과정에 참여하게 돼요.', - }, - { - title: '활동비가 있나요?', - description: - '디프만은 12기 운영에 필요한 비용 및 적극적인 활동 참여 장려를 위해 활동비를 받고 있어요. 활동비는 회비와 보증금으로 이루어져 있으며, 아직 책정 중에 있어요. 알뜰살뜰하게 비용을 계산하여 부담가지 않는 금액으로 전달드릴게요!', - }, -]; - -export const FAQ: FaqMap = { - [FAQ_TYPE.REQUIREMENT]: REQUIREMENT_LIST, - [FAQ_TYPE.INTERVIEW]: INTERVIEW_LIST, - [FAQ_TYPE.ACTIVITY]: ACTIVITY_LIST, -}; diff --git a/former/recruit/FaqSection/index.tsx b/former/recruit/FaqSection/index.tsx deleted file mode 100644 index e520d8d5..00000000 --- a/former/recruit/FaqSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './FaqSection'; diff --git a/former/recruit/HeaderSection/Finish.tsx b/former/recruit/HeaderSection/Finish.tsx deleted file mode 100644 index f406fa37..00000000 --- a/former/recruit/HeaderSection/Finish.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { css } from '@emotion/react'; - -import CTAButton from '~/components/common/CTAButton'; -import { colors, mediaQuery } from '~/styles/constants'; - -export default function Finish() { - return ( - <> - 13기 세부 일정은 2월 말 오픈 예정입니다 -

    13기 모집 알람이 마감되었습니다

    - - 13기 모집 알림 신청하기 - - ); -} -const descriptionCss = css` - font-weight: 400; - font-size: 2rem; - line-height: 140%; - text-align: center; - - color: ${colors.gray3}; - - margin-bottom: 30px; - - ${mediaQuery('xs')} { - font-size: 1.429rem; - - margin-bottom: 8px; - } -`; - -const headingCss = css` - font-weight: 600; - font-size: 4.5rem; - line-height: 120%; - text-align: center; - - color: ${colors.white}; - - margin-bottom: 155px; - - ${mediaQuery('sm')} { - font-size: 3.5rem; - } - - ${mediaQuery('xs')} { - font-size: 1.857rem; - line-height: 150%; - - margin-bottom: 40px; - } -`; diff --git a/former/recruit/HeaderSection/HeaderSection.tsx b/former/recruit/HeaderSection/HeaderSection.tsx deleted file mode 100644 index 8a204dfa..00000000 --- a/former/recruit/HeaderSection/HeaderSection.tsx +++ /dev/null @@ -1,198 +0,0 @@ -import { useRef, useState } from 'react'; -import Image from 'next/image'; -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { NAV_HEIGHT } from '~/../former/NavigationBar/NavigationBar'; -import { END_DATE, START_DATE } from '~/constants/common'; -import { defaultFadeInScaleVariants } from '~/constants/motions'; -import useEffectOnce from '~/hooks/use-effect-once'; -import useMediaQuery from '~/hooks/use-media-query'; - -import Finish from './Finish'; -import InProgress from './InProgress'; -import Previous from './Previous'; - -const MOBILE_BANNER = '/images/position/mobile-banner-recruit.png'; -const BANNER = '/images/position/banner-recruit.png'; - -// export const START_DATE = '2022-08-18T22:21:59.000Z'; // test -// export const END_DATE = '2022-08-20T20:00:00.000Z'; // test - -export default function HeaderSection() { - const isMobile = useMediaQuery('xs'); - const { state, remainTime } = useRecruitState(); - - // const { scrollY } = useScroll(); - // const scrollBottomOpacity = useTransform(scrollY, [0, 800], [1, 0]); - // const scrollBottomScale = useTransform(scrollY, [0, 800], [1, 0.6]); - - return ( - -
    - banner-recruit -
    - - - {RECRUIT_STATE.PREVIOUS === state && } - {RECRUIT_STATE.IN_PROGRESS === state && } - {RECRUIT_STATE.FINISH === state && } - - - {/* - - */} -     - ); -} - -const headerCss = css` - width: 100%; - height: calc(100vh - ${NAV_HEIGHT}px); -`; - -const backgroundCss = css` - position: absolute; - left: 0; - width: 100vw; - height: 100%; -`; - -const sectionCss = css` - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - box-sizing: border-box; -`; - -// const scrollBottomIconWrapperCss = css` -// position: absolute; -// bottom: 20px; -// left: 50%; -// transform: translateX(-50%); -// margin: 0 auto; - -// ${mediaQuery('xs')} { -// bottom: 50px; -// } -// `; - -// const scrollBottomVariants: Variants = { -// initial: { -// opacity: 0, -// scale: 0.5, -// y: -30, -// x: '-50%', -// transition: { duration: 1.2, ease: defaultEasing }, -// willChange: 'opacity, transform', -// }, -// animate: { -// opacity: 1, -// scale: 1, -// y: 0, -// transition: { duration: 1.2, ease: defaultEasing }, -// willChange: 'opacity, transform', -// }, -// exit: { -// opacity: 0, -// scale: 0.85, -// y: 0, -// transition: { duration: 1.2, ease: defaultEasing }, -// willChange: 'opacity, transform', -// }, -// }; - -export const RECRUIT_STATE = { - PREVIOUS: 'PREVIOUS', - IN_PROGRESS: 'IN_PROGRESS', - FINISH: 'FINISH', -}; - -const SECONDS_TO_MS = 1000; - -function useRecruitState() { - const [state, setState] = useState(''); - const [remainTime, setRemainTime] = useState(0); - const timerId = useRef(null); - const startDate = new Date(START_DATE); - const endDate = new Date(END_DATE); - - useEffectOnce(() => { - const currentState = getCurrentState(); - - if (RECRUIT_STATE.FINISH !== currentState) { - setRemainTime(getRemainTime()); - playTimer(); - } - - setState(currentState); - - return () => { - resetTimer(); - }; - }); - - const getCurrentState = () => { - const current = new Date(); - - if (startDate > current) return RECRUIT_STATE.PREVIOUS; - if (endDate < current) return RECRUIT_STATE.FINISH; - - return RECRUIT_STATE.IN_PROGRESS; - }; - - const getRemainTime = () => { - const current = new Date(); - - return Math.floor((endDate.getTime() - current.getTime()) / SECONDS_TO_MS); - }; - - const playTimer = () => { - timerId.current = requestAnimationFrame(timer); - }; - - const resetTimer = () => { - timerId.current = null; - }; - - const timer = () => { - if (!timerId.current) return; - - const currentState = getCurrentState(); - if (RECRUIT_STATE.FINISH === currentState) { - setState(currentState); - return; - } - - if (currentState !== state) setState(currentState); - - const _remainTime = getRemainTime(); - if (RECRUIT_STATE.IN_PROGRESS === currentState && _remainTime !== remainTime) { - setRemainTime(_remainTime); - } - - playTimer(); - }; - - return { state, remainTime }; -} diff --git a/former/recruit/HeaderSection/InProgress.tsx b/former/recruit/HeaderSection/InProgress.tsx deleted file mode 100644 index 6aa9ba2e..00000000 --- a/former/recruit/HeaderSection/InProgress.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { css } from '@emotion/react'; - -import CTAButton from '~/components/common/CTAButton'; -import { NOTION_RECRUIT_PATH } from '~/constants/common/common'; -import useGaEvent from '~/hooks/use-ga-event'; -import { colors, mediaQuery } from '~/styles/constants'; -import { - DAY_TO_SECONDS, - getDayByTimeSeconds, - getHourByTimeSeconds, - getMinuteByTimeSeconds, - getSecondsByTimeSeconds, - getTimerString, - getTimeStringFormater, -} from '~/utils/time'; - -export default function InProgress({ remainTime }: { remainTime: number }) { - const { recordApplyEvent } = useGaEvent(); - const getRemainDayString = (): string => { - const remainDay = getDayByTimeSeconds(remainTime); - return getTimeStringFormater(remainDay); - }; - - const getRemainTimeString = (): string => { - const hour = getHourByTimeSeconds(remainTime); - const min = getMinuteByTimeSeconds(remainTime); - const sec = getSecondsByTimeSeconds(remainTime); - - return getTimerString(hour, min, sec); - }; - - return ( - <> -
    서류 접수 마감까지
    -

    - {remainTime > DAY_TO_SECONDS ? `D-${getRemainDayString()}` : getRemainTimeString()} -

    - - { - recordApplyEvent(); - window.open(NOTION_RECRUIT_PATH); - }} - > - 지금 지원하러 가기 > - - - ); -} - -const descriptionCss = css` - font-weight: 700; - font-size: 2rem; - line-height: 140%; - text-align: center; - - color: ${colors.white}; - - margin-bottom: 30px; - - ${mediaQuery('xs')} { - font-size: 1.429rem; - - margin-bottom: 8px; - } -`; - -const headingCss = css` - font-weight: 600; - font-size: 8rem; - line-height: 120%; - text-align: center; - - color: ${colors.white}; - - margin-bottom: 87px; - - ${mediaQuery('xs')} { - font-size: 4.286rem; - line-height: 150%; - - margin-bottom: 30px; - } -`; diff --git a/former/recruit/HeaderSection/Previous.tsx b/former/recruit/HeaderSection/Previous.tsx deleted file mode 100644 index 69e9fbf7..00000000 --- a/former/recruit/HeaderSection/Previous.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { css } from '@emotion/react'; - -import CTAButton from '~/components/common/CTAButton'; -import { colors, mediaQuery } from '~/styles/constants'; - -export default function Previous() { - return ( - <> -

    - 2022.08.22. -
    모집이 시작됩니다. -

    - 아직 모집 기간이 아닙니다. - - ); -} - -const headingCss = css` - font-weight: 600; - font-size: 4.5rem; - line-height: 120%; - text-align: center; - - color: ${colors.white}; - - margin-bottom: 174px; - - ${mediaQuery('xs')} { - font-size: 1.857rem; - line-height: 150%; - - margin-bottom: 40px; - } -`; diff --git a/former/recruit/HeaderSection/index.tsx b/former/recruit/HeaderSection/index.tsx deleted file mode 100644 index 02dba600..00000000 --- a/former/recruit/HeaderSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './HeaderSection'; diff --git a/former/recruit/PosiotionSection/PosiotionSection.tsx b/former/recruit/PosiotionSection/PosiotionSection.tsx deleted file mode 100644 index 97dc2086..00000000 --- a/former/recruit/PosiotionSection/PosiotionSection.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import RecruitCard from '~/components/common/RecruitCard'; -import { POSITION_TYPE } from '~/components/recruit-detail/constants'; -import { defaultFadeInVariants, staggerOne } from '~/constants/motions'; -import { mediaQuery } from '~/styles/constants'; - -export type PositionType = keyof typeof POSITION_TYPE; - -export default function PosiotionSection() { - return ( - -

    - - 모집 직군 - - - - - - - - -     - ); -} - -const sectionCss = css` - width: 100%; - margin-bottom: 180px; - - ${mediaQuery('xs')} { - margin-bottom: 130px; - } -`; -const headingCss = css` - font-weight: 700; - font-size: 2.625rem; - line-height: 140%; - - margin-bottom: 60px; - - ${mediaQuery('xs')} { - font-size: 1.714rem; - line-height: 150%; - - margin-bottom: 30px; - } -`; -const cardContainerCss = css` - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; - gap: 22px; - - ${mediaQuery('xs')} { - gap: 12px; - } -`; diff --git a/former/recruit/PosiotionSection/index.tsx b/former/recruit/PosiotionSection/index.tsx deleted file mode 100644 index 58f4358a..00000000 --- a/former/recruit/PosiotionSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './PosiotionSection'; diff --git a/former/recruit/RequirementSection/RequirementSection.tsx b/former/recruit/RequirementSection/RequirementSection.tsx deleted file mode 100644 index 6a00f4c2..00000000 --- a/former/recruit/RequirementSection/RequirementSection.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInVariants, staggerHalf } from '~/constants/motions'; -import { defaultFadeInUpVariants } from '~/constants/motions/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -const REQUIREMNENT_LIST = [ - '매주 토요일, 오후 2~5시에 진행되는 정규 세션에 참여할 수 있는 분', - '4개월간 맡은 역할을 충실히 이행할 수 있는 책임감 있는 분', - '디프만 활동을 재밌게 할 수 있는 분', - '새로운 것을 배울 의지가 있고, 성장을 위해 노력하는 분', - '팀원들과 원활한 의사소통이 가능하신 분', - '좋은 결과만 추구하는 것이 아닌, 모든 과정을 즐기는 태도를 가지신 분', -]; - -export default function RequirementSection() { - return ( - - - 공통 자격 요건 - - - {REQUIREMNENT_LIST.map((requirement, index) => ( - - {requirement} - - ))} - - - ); -} - -const sectionCss = css` - width: 100%; - margin-bottom: 180px; - - ${mediaQuery('xs')} { - margin-bottom: 130px; - } -`; - -const headingCss = css` - font-weight: 700; - font-size: 2.625rem; - line-height: 140%; - - margin-bottom: 30px; - - ${mediaQuery('xs')} { - font-size: 1.714rem; - line-height: 150%; - - margin-bottom: 15px; - } -`; - -const requirementListCss = css` - padding-left: 20px; - - list-style: disc; - - font-weight: 400; - font-size: 1.375rem; - line-height: 180%; - color: ${colors.gray2}; - - ${mediaQuery('xs')} { - font-size: 1rem; - } -`; diff --git a/former/recruit/RequirementSection/index.tsx b/former/recruit/RequirementSection/index.tsx deleted file mode 100644 index 95e6e2e7..00000000 --- a/former/recruit/RequirementSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './RequirementSection'; diff --git a/former/recruit/ScheduleSection/ScheduleGraph.tsx b/former/recruit/ScheduleSection/ScheduleGraph.tsx deleted file mode 100644 index 5e88bb97..00000000 --- a/former/recruit/ScheduleSection/ScheduleGraph.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInSlideToRightVariants } from '~/constants/motions/motions'; -import { colors, mediaQuery } from '~/styles/constants'; - -import { RecruitScheduleInterface } from './constants'; - -interface ScheduleGraphProps { - schedule: RecruitScheduleInterface; - isLast: boolean; -} - -export function ScheduleGraph({ schedule, isLast }: ScheduleGraphProps) { - return ( - -
    -
    - {`${schedule.date}`} - {schedule.title} -
    -
    - {!isLast &&
    } -     - ); -} - -const rangeCss = css` - display: flex; - align-items: center; - - width: calc(20% - 20px / 5); - - :last-child { - width: 20px; - } - - ${mediaQuery('xs')} { - width: calc(50% - 10px / 2); - - :last-child { - width: 10px; - } - } -`; -const circleCss = (isRecurit: boolean) => css` - position: relative; - - flex-basis: 20px; - - width: 20px; - height: 20px; - margin-right: 10px; - border-radius: 50%; - - background-color: ${isRecurit ? colors.primary : colors.white}; - - :last-child { - margin-right: 0; - } - - ${mediaQuery('xs')} { - flex-basis: 10px; - - width: 10px; - height: 10px; - } -`; -const lineCss = css` - flex: auto; - - margin-right: 10px; - - border: 1px solid ${colors.gray4}; -`; - -const eventCss = css` - position: absolute; - left: 50%; - transform: translate(-50%, 45px); - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - width: max-content; - - ${mediaQuery('xs')} { - font-size: 1.143rem; - line-height: 150%; - } - - ${mediaQuery('xs')} { - transform: translate(-50%, 25px); - } -`; - -const dateCss = css` - font-weight: 700; - font-size: 1.5; - line-height: 180%; - - ${mediaQuery('xs')} { - font-weight: 600; - font-size: 1.143rem; - line-height: 150%; - } -`; - -const titleCss = css` - font-weight: 400; - font-size: 1.375rem; - line-height: 180%; - - ${mediaQuery('xs')} { - font-size: 1rem; - line-height: 150%; - } -`; diff --git a/former/recruit/ScheduleSection/ScheduleSection.tsx b/former/recruit/ScheduleSection/ScheduleSection.tsx deleted file mode 100644 index 27741df0..00000000 --- a/former/recruit/ScheduleSection/ScheduleSection.tsx +++ /dev/null @@ -1,190 +0,0 @@ -import { css } from '@emotion/react'; -import { motion } from 'framer-motion'; - -import { defaultFadeInScaleVariants, staggerOne } from '~/constants/motions'; -import { defaultFadeInSlideToRightVariants } from '~/constants/motions/motions'; -import useMediaQuery from '~/hooks/use-media-query'; -import { colors, mediaQuery, radius } from '~/styles/constants'; - -import { SCHEDULE_LIST } from './constants'; -import { ScheduleGraph } from './ScheduleGraph'; - -export default function ScheduleSection() { - const isMobile = useMediaQuery('xs'); - - return ( - - - 모집 일정 - - {/* TODO: 코드 정리 필요 */} - {isMobile && ( - <> - -
    멤버 모집 기간
    -     - - - {SCHEDULE_LIST.slice(0, 3).map((schedule, index) => ( - - ))} - - - -
    -
    정규 활동 기간
    -     - - - {SCHEDULE_LIST.slice(3, 6).map((schedule, index) => ( - - ))} - - - )} - - {!isMobile && ( - <> - -
    멤버 모집 기간
    -
    정규 활동 기간
    -     - - - {SCHEDULE_LIST.map((schedule, index) => ( - - ))} - - - )} -     - ); -} - -const sectionCss = css` - width: 100%; - margin-bottom: 180px; - - ${mediaQuery('xs')} { - margin-bottom: 130px; - } -`; - -const headingCss = css` - font-weight: 700; - font-size: 2.625rem; - line-height: 140%; - - margin-bottom: 50px; - - ${mediaQuery('xs')} { - font-size: 1.714rem; - line-height: 150%; - - margin-bottom: 30px; - } -`; - -const blockContainerCss = css` - display: flex; - justify-content: space-between; - - max-width: 1000px; - width: 100%; - height: 42px; - margin: 0 auto; - padding: 0 30px; - - ${mediaQuery('xs')} { - padding: 0 10px; - height: 28px; - } -`; - -const recruitBlockCss = css` - display: flex; - align-items: center; - justify-content: center; - - width: 61.2%; - height: 100%; - - background: ${colors.primary}; - border-radius: 10px; - - font-weight: 700; - font-size: 1.25rem; - line-height: 180%; - color: ${colors.white}; - - ${mediaQuery('xs')} { - flex: 1; - font-size: 0.857rem; - - border-radius: 6px; - } -`; - -const activeBlockCss = css` - display: flex; - align-items: center; - justify-content: center; - - width: calc(100% - 61.2% - 2.4%); - height: 100%; - - color: ${colors.white}; - background: ${colors.gray9}; - border-radius: 10px; - - font-weight: 600; - font-size: 1.25rem; - line-height: 180%; - - color: ${colors.gray3}; - ${mediaQuery('xs')} { - flex-basis: 66%; - - margin-left: 12px; - - font-size: 0.857rem; - - border-radius: ${radius.xs}; - } -`; - -const rangeContainerCss = css` - display: flex; - align-items: flex-start; - - max-width: 1000px; - height: 150px; - margin: 40px auto 0; - padding: 0 30px; - - ${mediaQuery('xs')} { - width: 100%; - height: 75px; - margin: 20px auto 30px; - padding: 0 30px; - letter-spacing: -0.5px; - } -`; diff --git a/former/recruit/ScheduleSection/constants.ts b/former/recruit/ScheduleSection/constants.ts deleted file mode 100644 index 666acd2b..00000000 --- a/former/recruit/ScheduleSection/constants.ts +++ /dev/null @@ -1,38 +0,0 @@ -export interface RecruitScheduleInterface { - date: string; - title: string; - isRecruit: boolean; -} - -export const SCHEDULE_LIST: RecruitScheduleInterface[] = [ - { - date: '8.22 - 9.2', - title: '서류 접수', - isRecruit: true, - }, - { - date: '9.12', - title: '서류 결과 발표', - isRecruit: true, - }, - { - date: '9.17 - 9.18', - title: '온라인 면접', - isRecruit: true, - }, - { - date: '9.21', - title: '최종 합격 발표', - isRecruit: true, - }, - { - date: '9.24', - title: '12기 OT', - isRecruit: false, - }, - { - date: '1.14', - title: '활동 종료', - isRecruit: false, - }, -]; diff --git a/former/recruit/ScheduleSection/index.tsx b/former/recruit/ScheduleSection/index.tsx deleted file mode 100644 index 3187bf54..00000000 --- a/former/recruit/ScheduleSection/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ScheduleSection'; diff --git a/src/components/project-detail/OtherProjectSection.tsx b/src/components/project-detail/OtherProjectSection.tsx index 0934ddb6..bd8219d9 100644 --- a/src/components/project-detail/OtherProjectSection.tsx +++ b/src/components/project-detail/OtherProjectSection.tsx @@ -8,7 +8,7 @@ import { projects } from '../project/constants'; const ProjectItem = dynamic(() => import('../project/ProjectItem/ProjectItem'), { ssr: false }); export default function OtherProjectSection() { - const randomProjects = projects.sort(() => Math.random() - Math.random()).slice(0, 3); + const randomProjects = projects.sort(() => Math.random() - 0.5).slice(0, 3); return (
    diff --git a/src/components/recruit/FAQSection.tsx b/src/components/recruit/FAQSection.tsx index 3ee38763..ec1be0ba 100644 --- a/src/components/recruit/FAQSection.tsx +++ b/src/components/recruit/FAQSection.tsx @@ -224,6 +224,6 @@ const faqCategoryButtonCss = (selected = false) => css` font-weight: 500; font-size: 16px; line-height: 22px; - color: ${selected ? colors.point : '${colors.black}'}; + color: ${selected ? colors.point : colors.black}; } `; diff --git a/tsconfig.json b/tsconfig.json index 3bae379a..b13626df 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,5 +19,5 @@ "types": ["@emotion/react/types/css-prop"] }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules", "former"] + "exclude": ["node_modules"] }