From 178cd633ad8ba3ca95ce9946d016dd5dcc6b24e2 Mon Sep 17 00:00:00 2001 From: aaminha Date: Thu, 17 Oct 2024 00:08:23 +0900 Subject: [PATCH 01/25] =?UTF-8?q?fix:=20=EB=9E=9C=EB=94=A9=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/containers/landing/Team/TeamButton.tsx | 31 +++++--- src/containers/landing/Team/hook.ts | 88 +++++----------------- src/containers/landing/Team/index.tsx | 14 ++-- src/types/hook.ts | 13 ++++ src/types/landing.type.ts | 6 +- 5 files changed, 61 insertions(+), 91 deletions(-) diff --git a/src/containers/landing/Team/TeamButton.tsx b/src/containers/landing/Team/TeamButton.tsx index 3faf408..cfa13c6 100644 --- a/src/containers/landing/Team/TeamButton.tsx +++ b/src/containers/landing/Team/TeamButton.tsx @@ -1,9 +1,13 @@ import { useState } from 'react'; + import { Link } from 'gatsby'; import tw from 'tailwind-styled-components'; + import { TeamButtonItem } from '@/types/landing.type'; +import extractImageUrl from '@/utils/extractImageUrl'; -function TeamButton({ team, img }: TeamButtonItem) { +// TODO: shortName 추가 +function TeamButton({ longName, image }: TeamButtonItem) { const [isHover, setIsHover] = useState(false); const handleMouseEnter = () => { @@ -15,35 +19,38 @@ function TeamButton({ team, img }: TeamButtonItem) { }; return ( -
+
+ {/* TODO: alt를 shortName으로 변경 */} {team[0]}
-
- {team[0]} - - > - -
+ {/* TODO: longName -> shortName으로 변경 */} + + {longName} +

>

+
); } -const Team = tw.span` +const Team = tw.p` text-Text_Color2-0 body3 diff --git a/src/containers/landing/Team/hook.ts b/src/containers/landing/Team/hook.ts index 3c1e70b..66a8290 100644 --- a/src/containers/landing/Team/hook.ts +++ b/src/containers/landing/Team/hook.ts @@ -1,85 +1,33 @@ import { graphql, useStaticQuery } from 'gatsby'; -import { NodeListType } from '@/types/hook'; -import { TeamButtonItem } from '@/types/landing.type'; -interface TeamIconData { - department_icons: NodeListType; -} +import { TeamButtonEdge } from '@/types/hook'; export default function useTeamDetail() { - const data: TeamIconData = useStaticQuery(graphql` + // TODO: sort 기준을 key로 변경 + // TODO: sub_name도 가져오도록 변경 + const data = useStaticQuery(graphql` query { - department_icons: allFile( - filter: { sourceInstanceName: { eq: "department_icons" } } - sort: { order: ASC, fields: name } - ) { - nodes { - publicURL - name + allSanityDepartment(sort: { basicInformation: { name: ASC } }) { + edges { + node { + basicInformation { + name + _rawIcon + } + } } } } `); - const notionLink = [ - { - id: 1, - team: ['HR', 'hr_manager'], - link: 'https://www.notion.so/yourssu/HR-Manager-c28b61f093dd4e16aaeaefefab86a6a6', - }, - { - id: 2, - team: ['IOS', 'ios_developer'], - link: 'https://www.notion.so/yourssu/iOS-Developer-faee8ac0116f4f9aa45566e3973ffd42', - }, - { - id: 3, - team: ['Android', 'android_developer'], - link: 'https://www.notion.so/yourssu/Android-Developer-111026b36dd445dd9dc4e0e0f8c58ae0', - }, - { - id: 4, - team: ['Frontend', 'frontend_developer'], - link: 'https://www.notion.so/yourssu/Web-Front-end-Developer-9d21da290a5148588f4fad2ae58a3279', - }, - { - id: 5, - team: ['Backend', 'backend_developer'], - link: 'https://www.notion.so/yourssu/Back-end-Developer-72d85c8ba8164f8c946fa83067e8e0e3', - }, - { - id: 6, - team: ['PM', 'product_manager'], - link: '', // PM은 노션 링크 없음 - }, - { - id: 7, - team: ['Designer', 'product_designer'], - link: 'https://www.notion.so/yourssu/Product-Designer-d354b42dbe154f6bbf22de157b440e60', - }, - { - id: 8, - team: ['Marketer', 'contents_marketer'], - link: 'https://www.notion.so/yourssu/Web-Front-end-Developer-9d21da290a5148588f4fad2ae58a3279', - }, - { - id: 9, - team: ['Legal', 'legal_officer'], - link: 'https://www.notion.so/yourssu/Legal-Officer-12b3c4c24089466b994d65b40fb1e368', - }, - ]; - - const teamsData = data.department_icons.nodes; + const teamsData = data.allSanityDepartment.edges; - const teams: TeamButtonItem[] = teamsData.map((team, index) => { - const teamData = { - team: notionLink[index].team, - notionLink: notionLink[index].link, - }; - const imgData = { - img: team.publicURL, + const teams = teamsData.map((team: TeamButtonEdge) => { + // TODO: sub_name을 shortName으로 받아오도록 + return { + longName: team.node.basicInformation.name, + image: team.node.basicInformation._rawIcon.asset._ref, }; - return Object.assign(teamData, imgData, teamData); }); return teams; diff --git a/src/containers/landing/Team/index.tsx b/src/containers/landing/Team/index.tsx index a692036..8900531 100644 --- a/src/containers/landing/Team/index.tsx +++ b/src/containers/landing/Team/index.tsx @@ -1,9 +1,10 @@ import { useBreakpoint } from 'gatsby-plugin-breakpoints'; import tw from 'tailwind-styled-components'; + import SectionIntro from '@/components/Intro/SectionIntro'; +import TeamButton from '@/containers/landing/Team/TeamButton'; import useTeamDetail from '@/containers/landing/Team/hook'; import { TeamButtonItem } from '@/types/landing.type'; -import TeamButton from './TeamButton'; function Team() { const breakpoints = useBreakpoint(); @@ -31,10 +32,11 @@ function Team() { /> )} - {teams.map((team: TeamButtonItem, index) => ( - - - + {teams.map((team: TeamButtonItem, index: number) => ( + + {/* TODO: shortName 추가 */} + + ))}
@@ -53,7 +55,7 @@ const TeamButtonBox = tw.div` justify-center `; -const TeamButtonWapper = tw.div<{ $index: number }>` +const TeamButtonWrapper = tw.div<{ $index: number }>` col-span-1 lg:col-span-1 /* lg:col-span-2 */ diff --git a/src/types/hook.ts b/src/types/hook.ts index 1e4527b..6248166 100644 --- a/src/types/hook.ts +++ b/src/types/hook.ts @@ -6,3 +6,16 @@ export interface NodeType { export interface NodeListType { nodes: NodeType[]; } + +export interface TeamButtonEdge { + node: { + basicInformation: { + name: string; + _rawIcon: { + asset: { + _ref: string; + }; + }; + }; + }; +} diff --git a/src/types/landing.type.ts b/src/types/landing.type.ts index 1581a9a..5913eab 100644 --- a/src/types/landing.type.ts +++ b/src/types/landing.type.ts @@ -1,7 +1,7 @@ export interface TeamButtonItem { - team: string[]; - img: string; - notionLink?: string; + // TODO: shortName: string; 추가 + longName: string; + image: string; } export interface CarouselNode { From 26ecf17ca614bba9fddcfbcdd71cebe9206e5fc8 Mon Sep 17 00:00:00 2001 From: aaminha Date: Wed, 23 Oct 2024 14:59:33 +0900 Subject: [PATCH 02/25] =?UTF-8?q?fix:=20focus=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../select/Supporting/DepartmentSearch.tsx | 25 +++++++------------ 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/containers/select/Supporting/DepartmentSearch.tsx b/src/containers/select/Supporting/DepartmentSearch.tsx index 68858b4..b5be886 100644 --- a/src/containers/select/Supporting/DepartmentSearch.tsx +++ b/src/containers/select/Supporting/DepartmentSearch.tsx @@ -1,6 +1,8 @@ -import { useRef, useState } from 'react'; +import { useRef } from 'react'; + import { useBreakpoint } from 'gatsby-plugin-breakpoints'; import tw from 'tailwind-styled-components'; + import { NodeType } from '@/types/hook'; export default function DepartmentSearch({ @@ -11,7 +13,6 @@ export default function DepartmentSearch({ setSearchText: React.Dispatch>; }) { const Ref = useRef(null); - const [onFocus, setOnFocus] = useState(false); const breakpoints = useBreakpoint(); return ( @@ -28,22 +29,15 @@ export default function DepartmentSearch({ setSearchText(Ref.current!.value); }, 2000); }} - onFocus={() => { - setOnFocus(!onFocus); - }} - onBlur={() => { - setOnFocus(!onFocus); - }} - focus={onFocus} /> - { setSearchText(Ref.current!.value); }} > - + ); } @@ -61,7 +55,7 @@ const Container = tw.div` py-[17px] `; -const SearchBox = tw.input<{ focus: boolean }>` +const SearchBox = tw.input` w-[800px] lg:w-[600px] md:w-[350px] @@ -70,8 +64,9 @@ const SearchBox = tw.input<{ focus: boolean }>` text-black-0 - ${(prop) => (prop.focus ? 'placeholder-bluegray2-0' : 'placeholder-bluegray1-0')} - + placeholder-bluegray1-0 + focus:placeholder-bluegray2-0 + bg-bluegray3-0 border-none outline-none @@ -81,8 +76,6 @@ const SearchBox = tw.input<{ focus: boolean }>` xs:body8 `; -const IconWapper = tw.button``; - const SearchIcon = tw.img` w-[32px] sm:w-[21px] From 984c8acc4fcbaf1590ea5bbc73b91e041102610c Mon Sep 17 00:00:00 2001 From: aaminha Date: Wed, 23 Oct 2024 15:21:14 +0900 Subject: [PATCH 03/25] =?UTF-8?q?fix:=20Sanity=20=EC=84=9C=EB=A5=98=20?= =?UTF-8?q?=EC=9D=BC=EC=A0=95=20=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=A5=BC=20?= =?UTF-8?q?=EB=A6=AC=EC=BF=A0=EB=A5=B4=ED=8C=85=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=97=90=20=EC=A0=81=EC=9A=A9=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Layout/index.tsx | 4 +-- src/containers/select/Banner/hook.ts | 39 +++++++++++++++++-------- src/containers/select/Banner/index.tsx | 40 +++++++++++--------------- src/pages/index.tsx | 1 + src/pages/recruiting/index.tsx | 1 + src/utils/formatDate.ts | 12 ++++++++ 6 files changed, 59 insertions(+), 38 deletions(-) create mode 100644 src/utils/formatDate.ts diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index a8ae328..b58f95a 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -11,9 +11,7 @@ interface Props { function Layout({ children, type, pageType }: Props) { return (
{children} diff --git a/src/containers/select/Banner/hook.ts b/src/containers/select/Banner/hook.ts index 2323750..72340d8 100644 --- a/src/containers/select/Banner/hook.ts +++ b/src/containers/select/Banner/hook.ts @@ -1,14 +1,25 @@ import { graphql, useStaticQuery } from 'gatsby'; + import { NodeType } from '@/types/hook'; interface BannerData { bannerImgData: { nodes: NodeType[]; }; + recruitingSchedule: { + edges: { + node: { + formSchedule: { + end: string; + start: string; + }; + }; + }[]; + }; } export default function useBannerDetail() { - const imgData: BannerData = useStaticQuery(graphql` + const data: BannerData = useStaticQuery(graphql` query { bannerImgData: allFile(filter: { name: { eq: "content-marketing" } }) { nodes { @@ -16,19 +27,23 @@ export default function useBannerDetail() { name } } + recruitingSchedule: allSanityRecruitingSchedule( + filter: { title: { regex: "/과제 O$/" } } + ) { + edges { + node { + formSchedule { + start + end + } + } + } + } } `); - const bannerDescription = { - recruitingDate: { - year: 24, - month: [9, 9], - day: [2, 8], - }, - title: [ - '당신의 손으로 바꿔나갈, 당신의 숭실', - '당신의 손으로 바꿔나갈,\n 당신의 숭실', - ], + return { + imgData: data.bannerImgData.nodes[0], + periodData: data.recruitingSchedule.edges[0].node, }; - return { imgData, bannerDescription }; } diff --git a/src/containers/select/Banner/index.tsx b/src/containers/select/Banner/index.tsx index 9f98601..7be1c0a 100644 --- a/src/containers/select/Banner/index.tsx +++ b/src/containers/select/Banner/index.tsx @@ -1,10 +1,13 @@ import { useBreakpoint } from 'gatsby-plugin-breakpoints'; import tw from 'tailwind-styled-components'; -import useBannerDetail from './hook'; + import '@/styles/global.css'; +import formatDate from '@/utils/formatDate'; + +import useBannerDetail from './hook'; function Banner({ moveSupporting }: { moveSupporting: () => void }) { - const { imgData, bannerDescription } = useBannerDetail(); + const bannerData = useBannerDetail(); const breakpoints = useBreakpoint(); return ( @@ -14,42 +17,31 @@ function Banner({ moveSupporting }: { moveSupporting: () => void }) { > {(breakpoints.query669 as boolean) ? ( - - 20{bannerDescription.recruitingDate.year}.0 - {bannerDescription.recruitingDate.month[0]}.0 - {bannerDescription.recruitingDate.day[0]}-0 - {bannerDescription.recruitingDate.month[1]}.0 - {bannerDescription.recruitingDate.day[1]} - + {formatDate(bannerData.periodData.formSchedule)} 유어슈 정기 리크루팅 ) : ( - - 20{bannerDescription.recruitingDate.year}.0 - {bannerDescription.recruitingDate.month[0]}.0 - {bannerDescription.recruitingDate.day[0]}-0 - {bannerDescription.recruitingDate.month[1]}. - {bannerDescription.recruitingDate.day[1]} - + {formatDate(bannerData.periodData.formSchedule)} 유어슈 정기 리크루팅 )} - {bannerDescription.recruitingDate.year}'YOURSSU
RECRUITING + {bannerData.periodData.formSchedule.start.slice(2, 4)}'YOURSSU{' '} +
RECRUITING - - {breakpoints.query669 - ? bannerDescription.title[1] - : bannerDescription.title[0]} + + {`당신의 손으로 바꿔나갈,\n당신의 숭실`}
- - {/* TODO: longName -> shortName으로 변경 */} - {longName} + {shortName}

>

diff --git a/src/containers/landing/Team/hook.ts b/src/containers/landing/Team/hook.ts index 66a8290..e4f4a83 100644 --- a/src/containers/landing/Team/hook.ts +++ b/src/containers/landing/Team/hook.ts @@ -3,15 +3,14 @@ import { graphql, useStaticQuery } from 'gatsby'; import { TeamButtonEdge } from '@/types/hook'; export default function useTeamDetail() { - // TODO: sort 기준을 key로 변경 - // TODO: sub_name도 가져오도록 변경 const data = useStaticQuery(graphql` query { - allSanityDepartment(sort: { basicInformation: { name: ASC } }) { + allSanityDepartment(sort: { basicInformation: { key: ASC } }) { edges { node { basicInformation { name + sub_name _rawIcon } } @@ -23,9 +22,9 @@ export default function useTeamDetail() { const teamsData = data.allSanityDepartment.edges; const teams = teamsData.map((team: TeamButtonEdge) => { - // TODO: sub_name을 shortName으로 받아오도록 return { longName: team.node.basicInformation.name, + shortName: team.node.basicInformation.sub_name, image: team.node.basicInformation._rawIcon.asset._ref, }; }); diff --git a/src/containers/landing/Team/index.tsx b/src/containers/landing/Team/index.tsx index 8900531..e406bb2 100644 --- a/src/containers/landing/Team/index.tsx +++ b/src/containers/landing/Team/index.tsx @@ -2,9 +2,9 @@ import { useBreakpoint } from 'gatsby-plugin-breakpoints'; import tw from 'tailwind-styled-components'; import SectionIntro from '@/components/Intro/SectionIntro'; -import TeamButton from '@/containers/landing/Team/TeamButton'; -import useTeamDetail from '@/containers/landing/Team/hook'; import { TeamButtonItem } from '@/types/landing.type'; +import TeamButton from './TeamButton'; +import useTeamDetail from './hook'; function Team() { const breakpoints = useBreakpoint(); @@ -34,8 +34,11 @@ function Team() { {teams.map((team: TeamButtonItem, index: number) => ( - {/* TODO: shortName 추가 */} - + ))} diff --git a/src/types/hook.ts b/src/types/hook.ts index 6248166..de6c282 100644 --- a/src/types/hook.ts +++ b/src/types/hook.ts @@ -11,6 +11,7 @@ export interface TeamButtonEdge { node: { basicInformation: { name: string; + sub_name: string; _rawIcon: { asset: { _ref: string; diff --git a/src/types/landing.type.ts b/src/types/landing.type.ts index 5913eab..fec1eed 100644 --- a/src/types/landing.type.ts +++ b/src/types/landing.type.ts @@ -1,5 +1,5 @@ export interface TeamButtonItem { - // TODO: shortName: string; 추가 + shortName: string; longName: string; image: string; } From 3fea7f9c81d3a25e360b84ef724fd78c829465f9 Mon Sep 17 00:00:00 2001 From: aaminha Date: Wed, 23 Oct 2024 16:00:19 +0900 Subject: [PATCH 06/25] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B3=A0=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=A0=95=EC=82=AC=EA=B0=81=ED=98=95?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/logo/logo.svg | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/assets/logo/logo.svg b/src/assets/logo/logo.svg index acbb0d7..74d5cf5 100644 --- a/src/assets/logo/logo.svg +++ b/src/assets/logo/logo.svg @@ -1,5 +1,12 @@ - - - - + + + + + + + + + + + From ade106df45500e3b65611525dcd737f1403e8469 Mon Sep 17 00:00:00 2001 From: aaminha Date: Fri, 25 Oct 2024 00:27:57 +0900 Subject: [PATCH 07/25] =?UTF-8?q?fix:=20=EB=A6=AC=EC=BF=A0=EB=A5=B4?= =?UTF-8?q?=ED=8C=85=20=ED=8C=80=20=EC=B9=B4=EB=93=9C=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../select/Supporting/DepartmentCard.tsx | 29 +-- src/containers/select/Supporting/hook.ts | 173 +++++++++--------- src/containers/select/Supporting/index.tsx | 68 +++---- src/utils/isTodayInRange.ts | 18 ++ 4 files changed, 156 insertions(+), 132 deletions(-) create mode 100644 src/utils/isTodayInRange.ts diff --git a/src/containers/select/Supporting/DepartmentCard.tsx b/src/containers/select/Supporting/DepartmentCard.tsx index ec217b3..a5cba6f 100644 --- a/src/containers/select/Supporting/DepartmentCard.tsx +++ b/src/containers/select/Supporting/DepartmentCard.tsx @@ -1,7 +1,10 @@ import { useState } from 'react'; + import { motion, Variants } from 'framer-motion'; import tw from 'tailwind-styled-components'; + import { NodeType } from '@/types/hook'; +import extractImageUrl from '@/utils/extractImageUrl'; import DepartmentLinkButton from './DepartmentLinkButton'; export default function DepartmentCard({ @@ -9,16 +12,18 @@ export default function DepartmentCard({ buttonImgData, }: { data: { - imgData: NodeType; - description: { - departmentName: string; - departmentDescription: string; - departmentDescriptionLink: string; + name: string; + short_introduction: string; + _rawIcon: { + asset: { + _ref: string; + }; }; }; buttonImgData: NodeType; }) { const [isHovered, setIsHovered] = useState(false); + const fixedDescription = data.short_introduction.replace(/\\n/g, '\n'); return (
- - {data.description.departmentDescription} - + {fixedDescription}
@@ -51,8 +54,11 @@ export default function DepartmentCard({ )} - {data.description.departmentName} - + {data.name} +
@@ -102,5 +108,6 @@ const DepartmentImg = tw.img` const DepartmentDescription = tw.p` whitespace-pre-line + break-words h4 `; diff --git a/src/containers/select/Supporting/hook.ts b/src/containers/select/Supporting/hook.ts index ed2ea21..eaea83b 100644 --- a/src/containers/select/Supporting/hook.ts +++ b/src/containers/select/Supporting/hook.ts @@ -3,9 +3,6 @@ import { graphql, useStaticQuery } from 'gatsby'; import { NodeType } from '@/types/hook'; interface SupportingData { - iconImgData: { - nodes: NodeType[]; - }; buttonImgData: { nodes: NodeType[]; }; @@ -15,20 +12,42 @@ interface SupportingData { errorImgData: { nodes: NodeType[]; }; + scheduleData: { + edges: { + node: { + formSchedule: { + start: string; + end: string; + }; + }; + }[]; + }; + departmentData: { + edges: { + node: { + applyProcedure: { + scheduleWithoutAssignment: boolean; + scheduleWithAssignment: boolean; + individualSchedule: boolean; + }; + basicInformation: { + name: string; + short_introduction: string; + _rawIcon: { + asset: { + _ref: string; + }; + }; + }; + searchKeyword: string; + }; + }[]; + }; } export default function useSupportingDetail() { - const imgData: SupportingData = useStaticQuery(graphql` + const data: SupportingData = useStaticQuery(graphql` query { - iconImgData: allFile( - filter: { sourceInstanceName: { eq: "department_icons" } } - sort: { order: ASC, fields: name } - ) { - nodes { - publicURL - name - } - } buttonImgData: allFile(filter: { name: { eq: "arrow-right" } }) { nodes { publicURL @@ -47,87 +66,63 @@ export default function useSupportingDetail() { name } } + scheduleData: allSanityRecruitingSchedule( + filter: { title: { regex: "/과제 O$/" } } + ) { + edges { + node { + formSchedule { + start + end + } + } + } + } + departmentData: allSanityDepartment( + sort: { basicInformation: { key: ASC } } + ) { + edges { + node { + applyProcedure { + scheduleWithoutAssignment + scheduleWithAssignment + individualSchedule + } + basicInformation { + name + short_introduction + _rawIcon + } + searchKeyword + } + } + } } `); - const description = [ - { - departmentName: `HR\nManager`, - departmentDescription: `유어슈의 심장을\n뛰게 하는 사람들`, - searchKeyword: - '인사 운영 채용 경영 사회복지 관리 직원온보딩 성과관리 노사관계 복지 조직문화 직원만족도 인재유치 다양성 포용', - departmentDescriptionLink: 'hr_manager', - deplartmentApply: false, - }, - { - departmentName: `IOS\nDeveloper`, - departmentDescription: `백설공주와\n일곱 사과 농부들`, - searchKeyword: '모바일 개발자 swift mac Xcode apple 애플', - departmentDescriptionLink: 'ios_developer', - deplartmentApply: false, - }, - { - departmentName: `Android\nDeveloper`, - departmentDescription: `유저의 사용성을\n위해 고민하는\n녹색 깡통들`, - searchKeyword: '모바일 개발자 kotlin java 안드로이드스튜디오 Android SDK', - departmentDescriptionLink: 'android_developer', - deplartmentApply: false, - }, - { - departmentName: `Frontend\nDeveloper`, - departmentDescription: `상상을 엮어\n하나의 현실을\n만드는 거미들`, - searchKeyword: - '개발자 프론트엔드 웹 html css javascript react typescript', - departmentDescriptionLink: 'frontend_developer', - deplartmentApply: false, - }, - { - departmentName: `Backend\nDeveloper`, - departmentDescription: `보이지 않는 곳에\n서 묵묵히 일하는\n 조용한 영웅들`, - searchKeyword: 'java 서버 DB API AWS 서버 최적화 spring 인프라', - departmentDescriptionLink: 'backend_developer', - deplartmentApply: false, - }, - { - departmentName: `Product\nManager`, - departmentDescription: `서비스 기획부터 매니징까지!`, - searchKeyword: - '기획 기획자 아이디어 브랜딩 시장 조사 제품 전략 로드맵 데이터 분석 사용자 경험 고객 니즈 피드백', - departmentDescriptionLink: 'product_manager', - deplartmentApply: false, - }, - { - departmentName: `Product\nDesigner`, - departmentDescription: `경험을 디자인하는\n사람들`, - searchKeyword: - '디자인 UI UX 3D 프로토타이핑 인터랙션디자인 Figma 디자인시스템 ', - departmentDescriptionLink: 'product_designer', - deplartmentApply: false, - }, - { - departmentName: `Contents\nMarketer`, - departmentDescription: `유어슈의\n얼굴이자 꽃`, - searchKeyword: - '마케팅 SNS 뿌슝이 일러스트 광고 모션그래픽 콘텐츠제작 소셜미디어 블로그 브랜딩', - departmentDescriptionLink: 'contents_marketer', - deplartmentApply: false, - }, - { - departmentName: `Legal\nOfficer`, - departmentDescription: `권리와 의무\n사이에서\n끊임없는 고민`, - searchKeyword: - '법률 법학 계약 법규 지적 재산권 기업 법률 자문 사용자 약관 법조문 개인정보처리방침 소송 관리 정책 연구 규정 해석 규제 준수 내부 규정 기업 윤리 ', - departmentDescriptionLink: 'legal_officer', - deplartmentApply: false, - }, - ]; - - const data = description.map((value, index) => { + const teamData = data.departmentData.edges.map((value) => { + const { + individualSchedule, + scheduleWithAssignment, + scheduleWithoutAssignment, + } = value.node.applyProcedure; return { - imgData: imgData.iconImgData.nodes[index], - description: value, + information: value.node.basicInformation, + isRecruiting: + individualSchedule || + scheduleWithAssignment || + scheduleWithoutAssignment, + searchKeyword: value.node.searchKeyword, }; }); - return { data, imgData }; + return { + imgData: { + buttonImgData: data.buttonImgData.nodes[0], + readingGlasses: data.readingGlasses.nodes[0], + errorImgData: data.errorImgData.nodes[0], + }, + scheduleData: data.scheduleData.edges[0].node.formSchedule, + teamData, + }; } diff --git a/src/containers/select/Supporting/index.tsx b/src/containers/select/Supporting/index.tsx index 6923185..b98a3db 100644 --- a/src/containers/select/Supporting/index.tsx +++ b/src/containers/select/Supporting/index.tsx @@ -1,36 +1,41 @@ import { useEffect, useState } from 'react'; import tw from 'tailwind-styled-components'; +import isTodayInRange from '@/utils/isTodayInRange'; import DepartmentCard from './DepartmentCard'; import DepartmentSearch from './DepartmentSearch'; import useSupportingDetail from './hook'; function Supporting() { - const { data, imgData } = useSupportingDetail(); + const { teamData, scheduleData, imgData } = useSupportingDetail(); const [searchText, setSearchText] = useState(''); + const [isInPeriod, setIsInPeriod] = useState(true); const [supportingTeam, setSupportingTeam] = useState(0); useEffect(() => { setSearchText(''); - }, []); + setIsInPeriod(isTodayInRange(scheduleData)); + }, [scheduleData]); useEffect(() => { let count = 0; - data.forEach((value) => { - if (value.description.deplartmentApply) { - count += 1; - } - }); + if (isInPeriod) { + teamData.forEach((data) => { + if (data.isRecruiting) { + count += 1; + } + }); + } setSupportingTeam(count); - }, [data]); + }, [teamData, isInPeriod]); - const filterData = data.filter((item) => { + const filterData = teamData.filter((data) => { if (searchText === '') { - return item.description.deplartmentApply; + return data.isRecruiting; } - return item.description.searchKeyword.includes(searchText); + return data.searchKeyword.includes(searchText); }); return ( @@ -47,27 +52,25 @@ function Supporting() { - {filterData.map((value, index) => { - return ( - - - - ); - })} + {filterData.map((value, index) => ( + + + + ))} {supportingTeam === 0 && filterData.length === 0 && ( )} @@ -98,26 +101,27 @@ const SubContainer2 = tw.div` const StepBox = tw.div<{ $length: number }>` gap-4 w-full + lg:px-20 ${({ $length }) => // eslint-disable-next-line no-nested-ternary $length >= 7 - ? 'grid grid-cols-10 lg:grid-cols-16 md:grid-cols-8' + ? 'grid grid-cols-10 lg:grid-cols-3 md:grid-cols-8' : 'flex md:grid md:grid-cols-8 sm:flex sm:flex-col xs:flex-col justify-center'} `; -const StepWapper = tw.div<{ $index: number; $length: number }>` +const StepWrapper = tw.div<{ $index: number; $length: number }>` w-full max-w-[236.8px] col-span-2 sm:col-span-10 - lg:col-span-4 + lg:col-span-1 + lg:justify-self-center md:col-span-4 xs:col-span-10 - ${({ $index }) => $index === 0 && 'col-start-2'} - ${({ $index }) => $index === 4 && 'col-start-3 lg:col-start-3'} + ${({ $index }) => $index === 0 && 'col-start-2 lg:col-start-1'} ${({ $length, $index }) => $length % 2 === 1 && $index === $length - 1 && 'md:col-start-3'} `; diff --git a/src/utils/isTodayInRange.ts b/src/utils/isTodayInRange.ts new file mode 100644 index 0000000..8f54f9e --- /dev/null +++ b/src/utils/isTodayInRange.ts @@ -0,0 +1,18 @@ +export default function isTodayInRange({ + start, + end, +}: { + start: string; + end: string; +}) { + const startDate = new Date(start); + startDate.setHours(0, 0, 0, 0); + + const endDate = new Date(end); + endDate.setHours(0, 0, 0, 0); + + const today = new Date(); + today.setHours(0, 0, 0, 0); + + return startDate <= today && today <= endDate; +} From f18494eb201a468aa864aaddf9d804865bdf1946 Mon Sep 17 00:00:00 2001 From: aaminha Date: Wed, 20 Nov 2024 03:19:08 +0900 Subject: [PATCH 08/25] =?UTF-8?q?fix:=20=EB=B8=8C=EB=9D=BC=EC=9A=B0?= =?UTF-8?q?=EC=A0=80=EB=A7=88=EB=8B=A4=20=ED=8F=B0=ED=8A=B8=20=EB=91=90?= =?UTF-8?q?=EA=BB=98=EA=B0=80=20=EB=8B=A4=EB=A5=B8=20=EB=AC=B8=EC=A0=9C=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=20-=20css=20=EC=98=A4=EB=A5=98=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0=20-=20=EC=BD=94=EB=93=9C=20=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0=20-=20eslint=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc | 6 +++ src/components/Footer/index.tsx | 25 ++------- src/components/Header/index.tsx | 95 ++++++++++++++------------------- src/components/Layout/index.tsx | 21 +++----- src/pages/index.tsx | 2 +- src/pages/recruiting/index.tsx | 17 +----- src/styles/global.css | 4 ++ 7 files changed, 65 insertions(+), 105 deletions(-) diff --git a/.eslintrc b/.eslintrc index 1f36177..cc67f76 100644 --- a/.eslintrc +++ b/.eslintrc @@ -41,6 +41,11 @@ "group": "external", "position": "before" }, + { + "pattern": "gatsby", + "group": "external", + "position": "after" + }, { "pattern": "@/**", "group": "internal", @@ -51,6 +56,7 @@ "alphabetize": { "order": "asc" } } ], + "react/require-default-props": "off", "@typescript-eslint/no-use-before-define": 0, "import/no-extraneous-dependencies": ["error", { "devDependencies": true }], "react/jsx-props-no-spreading": "off", diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 7a07ee1..bd6e58f 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,13 +1,11 @@ import tw from 'tailwind-styled-components'; -import { OSType } from '@/types/landing.type'; import useFooterDetail from './hook'; interface Props { - type: OSType; backgroundColor: string; } -function Footer({ type, backgroundColor }: Props) { +function Footer({ backgroundColor }: Props) { const { logo } = useFooterDetail(); const logoData = logo.nodes[0]; @@ -20,11 +18,7 @@ function Footer({ type, backgroundColor }: Props) { - {type === 'ios' ? ( - YOURSSU - ) : ( - YOURSSU - )} + YOURSSU
@@ -45,8 +39,8 @@ const Container = tw.footer<{ $bg: string }>` justify-center text-gray1-0 py-10 - xs:py-[20px] - sm:py-[20px] + xs:py-5 + sm:py-5 ${(props) => props.$bg} `; @@ -64,16 +58,7 @@ const LogoImg = tw.img` sm:h-[12px] `; -// TODO: Ios 버전 css 확인 -const IosLogo = tw.div` - body3 - py-1 - font-[550] - xs:text-[14px] - sm:text-[14px] -`; - -const DefaultLogo = tw.div` +const Logo = tw.div` body3 py-1 xs:text-[14px] diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index b2b3876..844d667 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,14 +1,14 @@ import { useState } from 'react'; + import { Link } from 'gatsby'; + import useHeaderDetail from '@/components/Header/hook'; -import { OSType } from '@/types/landing.type'; interface Props { - type: OSType; - pageType: string; + isMainPage: boolean; } -function Header({ type, pageType }: Props) { +function Header({ isMainPage }: Props) { const { data } = useHeaderDetail(); const [isClick, setIsClick] = useState(false); const logoData = data.logo.nodes[0]; @@ -18,55 +18,46 @@ function Header({ type, pageType }: Props) { return (
-
+
{logoData.name} - {type === 'ios' ? ( - - YOURSSU - - ) : ( - - YOURSSU - - )} +

+ YOURSSU +

-
+
-
+
+
- {isClick ? ( + {isClick && ( - ) : null} + )}
); } diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index b58f95a..36ffee4 100644 --- a/src/components/Layout/index.tsx +++ b/src/components/Layout/index.tsx @@ -1,24 +1,17 @@ -import { OSType } from '@/types/landing.type'; -import Footer from '../Footer'; -import Header from '../Header'; +import Footer from '@/components/Footer'; +import Header from '@/components/Header'; interface Props { children: React.ReactNode; - type: OSType; - pageType: string; + isMainPage: boolean; } -function Layout({ children, type, pageType }: Props) { +function Layout({ children, isMainPage }: Props) { return ( -
-
+
+
{children} -
+
); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 30a2547..79f7029 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -22,7 +22,7 @@ export default function Home() { } }, []); return ( - + diff --git a/src/pages/recruiting/index.tsx b/src/pages/recruiting/index.tsx index b6cf871..ecc282c 100644 --- a/src/pages/recruiting/index.tsx +++ b/src/pages/recruiting/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useRef } from 'react'; import Layout from '@/components/Layout'; import Seo from '@/components/Seo'; @@ -8,23 +8,10 @@ import Banner from '@/containers/select/Banner'; import FAQ from '@/containers/select/FAQ'; import Ideal from '@/containers/select/Ideal'; import Supporting from '@/containers/select/Supporting'; -import { OSType } from '@/types/landing.type'; function Recruiting() { - const [type, setType] = useState(); const sectionRef = useRef(null); - useEffect(() => { - const osType = navigator.userAgent.toLowerCase(); - if (osType.indexOf('android') > -1) { - setType('android'); - } else if (osType.indexOf('iphone') > -1 || osType.indexOf('ipad') > -1) { - setType('ios'); - } else { - setType('pc'); - } - }, []); - const moveSupporting = () => { if (sectionRef.current) { sectionRef.current.scrollIntoView({ @@ -34,7 +21,7 @@ function Recruiting() { }; return ( - +
diff --git a/src/styles/global.css b/src/styles/global.css index 91d6684..4c6844a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -2,6 +2,10 @@ @tailwind components; @tailwind utilities; +* { + font-synthesis: none; +} + @font-face { font-family: 'Roboto'; src: url('../../src/assets/fonts/Roboto-Medium.woff'); From a5af235f93065d8d47104fbadd9f19397c1379c8 Mon Sep 17 00:00:00 2001 From: aaminha Date: Wed, 20 Nov 2024 13:25:07 +0900 Subject: [PATCH 09/25] =?UTF-8?q?style:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=ED=99=95=EC=9D=B8=ED=95=98=EB=8A=94=20=EB=A1=9C?= =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20eslint=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc | 16 +- src/components/Footer/hook.ts | 1 + src/components/Footer/index.tsx | 1 + src/components/Header/hook.ts | 1 + src/components/Header/index.tsx | 15 +- src/components/Intro/SectionIntro.tsx | 4 +- src/containers/landing/Banner/index.tsx | 29 ++-- src/containers/landing/Culture/index.tsx | 1 + src/containers/landing/Ideal/index.tsx | 6 +- src/containers/landing/Project/Carousel.tsx | 41 +++--- .../landing/Project/CarouselContainer.tsx | 8 +- .../landing/Project/CarouselContent.tsx | 138 +++++++----------- src/containers/landing/Project/hook.ts | 1 + src/containers/landing/Project/index.tsx | 11 +- src/containers/landing/Team/TeamButton.tsx | 9 +- src/containers/landing/Team/index.tsx | 3 +- src/pages/index.tsx | 18 +-- 17 files changed, 118 insertions(+), 185 deletions(-) diff --git a/.eslintrc b/.eslintrc index cc67f76..c891644 100644 --- a/.eslintrc +++ b/.eslintrc @@ -13,11 +13,8 @@ "es6": true, "node": true }, - "plugins": ["react", "jsx-a11y", "prettier", "@typescript-eslint"], + "plugins": ["react", "jsx-a11y", "prettier", "@typescript-eslint", "import"], "extends": [ - "airbnb", - "airbnb-typescript", - "airbnb/hooks", "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended", @@ -36,16 +33,6 @@ "index" ], "pathGroups": [ - { - "pattern": "react", - "group": "external", - "position": "before" - }, - { - "pattern": "gatsby", - "group": "external", - "position": "after" - }, { "pattern": "@/**", "group": "internal", @@ -53,6 +40,7 @@ } ], "pathGroupsExcludedImportTypes": ["react", "react-dom"], + "newlines-between": "always", "alphabetize": { "order": "asc" } } ], diff --git a/src/components/Footer/hook.ts b/src/components/Footer/hook.ts index c7d906f..4b1271a 100644 --- a/src/components/Footer/hook.ts +++ b/src/components/Footer/hook.ts @@ -1,4 +1,5 @@ import { graphql, useStaticQuery } from 'gatsby'; + import { NodeListType } from '@/types/hook'; interface FooterData { diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index bd6e58f..d2aecfd 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,4 +1,5 @@ import tw from 'tailwind-styled-components'; + import useFooterDetail from './hook'; interface Props { diff --git a/src/components/Header/hook.ts b/src/components/Header/hook.ts index ce4f6bb..deeb90c 100644 --- a/src/components/Header/hook.ts +++ b/src/components/Header/hook.ts @@ -1,4 +1,5 @@ import { graphql, useStaticQuery } from 'gatsby'; + import { NodeListType } from '@/types/hook'; interface HeaderData { diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 844d667..cc621e1 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,6 +1,5 @@ -import { useState } from 'react'; - import { Link } from 'gatsby'; +import { useState } from 'react'; import useHeaderDetail from '@/components/Header/hook'; @@ -37,7 +36,7 @@ function Header({ isMainPage }: Props) {