-
- )
+ return {'headline-30 font'}
-{'headline-25 font'}
-{'subHead-18 font'}
-{'subHead-16 font'}
-{'subHead-13 font'}
-{'body-18 font'}
-{'body-16 font'}
-{'body-15 font'}
-{'body-14 font'}
-{'caption-13 font'}
-
+
+ )
+}
+
+export default BottomSheetContent
diff --git a/src/components/BottomSheet/BottomSheetHeader.tsx b/src/components/BottomSheet/BottomSheetHeader.tsx
new file mode 100644
index 00000000..ccb6a5a6
--- /dev/null
+++ b/src/components/BottomSheet/BottomSheetHeader.tsx
@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { LikeBlank, LikeFilled } from '@/assets/icon'
+const BottomSheetHeader = ({ title }: { title: string }) => {
+ const [liked, setLiked] = useState
+ {address}
+
+ {number} +
+ {expanded && + {number} +
{'펼쳤을 때 나오는 어쩌구 '}
}
+
+ setLiked(!liked)}
+ />
+ ) : (
+ setLiked(!liked)}
+ />
+ )}
+
+ )
+}
+
+export default BottomSheetHeader
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
new file mode 100644
index 00000000..f6ea56aa
--- /dev/null
+++ b/src/components/Loading/Loading.tsx
@@ -0,0 +1,13 @@
+import { Spinner } from '@/assets/icon'
+const Loading = () => {
+ return (
+ {title}
+ {liked ? ( +
+
+ )
+}
+
+export default Loading
diff --git a/src/components/common/Button.stories.ts b/src/components/common/Button.stories.ts
deleted file mode 100644
index 4c786732..00000000
--- a/src/components/common/Button.stories.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Button } from './Button'
-const meta = {
- title: 'Example/Button',
- component: Button,
- parameters: {
- layout: 'centered'
- },
- tags: ['autodocs'],
- argTypes: {
- backgroundColor: { control: 'color' }
- }
-} satisfies Meta
+ {'50명 정원'}
+
+ }
+ hasBorder={true}
+ className={'bg-white-100'}
+ />
+
+ {'300,000원'}
+
+ }
+ hasBorder={true}
+ className={'bg-white-100'}
+ />
+
+ }
+ rightElement={
+
+ )
+ }
+}
diff --git a/src/components/common/accordion/Accordion.tsx b/src/components/common/accordion/Accordion.tsx
new file mode 100644
index 00000000..7e41f341
--- /dev/null
+++ b/src/components/common/accordion/Accordion.tsx
@@ -0,0 +1,78 @@
+import { forwardRef, ReactNode, useState } from 'react'
+import ListRow from '@/components/common/listRow/ListRow'
+
+export interface AccordionProps {
+ title: string
+ content: ReactNode
+ contentHeight?: number
+ initialState?: boolean
+ rightElement?: ReactNode
+ onAccordionOpened?: () => void
+ onAccordionClosed?: () => void
+}
+/**
+ * @param title : 제목
+ * @param content: 아코디언 내용
+ * @param contentHeight 컨텐츠 높이 지정되면 애니메이션 적용
+ * @param initialState 초기 오픈 상태
+ * @param rightElement : 오른쪽 (핸들러 왼쪽)에 뱃지 같은거 넣을겨
+ */
+
+export const Accordion = forwardRef{'안녕'}
+ {'잘가'}
+
+
+
+
+ )
+ }
+)
diff --git a/src/components/common/bottomsheet/BottomSheet.stories.tsx b/src/components/common/bottomsheet/BottomSheet.stories.tsx
new file mode 100644
index 00000000..89ca403b
--- /dev/null
+++ b/src/components/common/bottomsheet/BottomSheet.stories.tsx
@@ -0,0 +1,22 @@
+// Button.stories.ts|tsx
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import BottomSheet from './BottomSheet'
+
+const meta: Meta
+ {content}
+
+
+ setExpanded(!expanded)}
+ >
+
+
+
+ )
+}
+
+export default BottomSheet
diff --git a/src/components/common/button/Button.stories.tsx b/src/components/common/button/Button.stories.tsx
new file mode 100644
index 00000000..68956845
--- /dev/null
+++ b/src/components/common/button/Button.stories.tsx
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Button from './Button'
+const meta = {
+ title: 'Components/Button',
+ component: Button,
+ parameters: {
+ layout: 'centered'
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ label: {
+ control: 'text'
+ },
+ buttonType: {
+ control: 'select',
+ options: [
+ 'Plain-blue',
+ 'Plain-red',
+ 'Round-blue-500',
+ 'Round-blue-700',
+ 'Square',
+ 'Floating'
+ ]
+ },
+ width: {
+ control: 'select',
+ options: ['SW', 'MW', 'LW', 'XLW']
+ }
+ }
+} satisfies Meta
+
+
+
+ )
+}
+
+export default Calender
diff --git a/src/components/common/calender/CalenderType.ts b/src/components/common/calender/CalenderType.ts
new file mode 100644
index 00000000..347b7b57
--- /dev/null
+++ b/src/components/common/calender/CalenderType.ts
@@ -0,0 +1,7 @@
+import { DaysInfo } from '../../../types/date.ts'
+
+interface CalenderProps {
+ onClick: (daysInfo: DaysInfo) => void
+}
+
+export default CalenderProps
diff --git a/src/components/common/calender/constants.ts b/src/components/common/calender/constants.ts
new file mode 100644
index 00000000..b6f4024d
--- /dev/null
+++ b/src/components/common/calender/constants.ts
@@ -0,0 +1,14 @@
+import { MonthType } from '../../../types/date.ts'
+
+export const WEEK = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
+export const defaultWeek = [0, 0, 0, 0, 0, 0, 0]
+export const WeekStyle = {
+ WEEKDAY:
+ 'w-full h-[40px] text-center justify-center items-center leading-[40px] cursor-pointer font-nsk caption-13 font-bold mr-[15px]',
+ SUN: 'text-red-500',
+ SAT: 'text-blue-500',
+ OPACITY: 'opacity-20'
+}
+
+export const DECEMBER = 12 as MonthType
+export const JANUARY = 1 as MonthType
diff --git a/src/components/common/header/Header.stories.tsx b/src/components/common/header/Header.stories.tsx
new file mode 100644
index 00000000..df5f1a01
--- /dev/null
+++ b/src/components/common/header/Header.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Header from './Header'
+const meta = {
+ title: 'Component/Header',
+ component: Header,
+ parameters: {
+ layout: 'centered'
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ headerType: {
+ control: 'select',
+ options: ['BackPush', 'Logo', 'Close', 'CloseWithTitle']
+ },
+ pageTitle: {
+ control: 'text'
+ },
+ rightElement: {
+ control: 'text'
+ }
+ }
+} satisfies Meta
+
+
+
+ {'<'}
+
+ {`${nowYear}년 ${nowMonth}월`}
+
+ {'>'}
+
+
+ {WEEK.map((daysOfWeek, index) => (
+
+
+ {daysOfWeek}
+
+ ))}
+
+ {nowDays.map((week, index) => (
+
+
+ {week.map((daysInfo, index) => (
+
+ ))}
+ handleDayClick(daysInfo)}
+ >
+ {daysInfo.day}
+
+ ))}
+
+ {headerType === 'BackPush' ? (
+ alert('뒤로가기')}>
+
+
+ navigate('/')}
+ />
+
+ {pageTitle}
+
+
+
+
+
+ ) : headerType === 'Close' ? (
+ navigate(-1)}>
+ alert('알림보기!')}>
+
+ alert('사이드 바 열기')}>
+
+ navigate(-1)}>
+
+ ) : (
+ ''
+ )}
+
+
+ )
+}
+
+export default InformationBox
diff --git a/src/components/common/informationBox/InformationBoxType.ts b/src/components/common/informationBox/InformationBoxType.ts
new file mode 100644
index 00000000..1aca78e3
--- /dev/null
+++ b/src/components/common/informationBox/InformationBoxType.ts
@@ -0,0 +1,8 @@
+import { ComponentProps } from 'react'
+
+export interface InformationBoxProps extends ComponentProps<'div'> {
+ image?: string
+ mainTitle: string
+ subTitle: string
+ description: string
+}
diff --git a/src/components/common/inputbox/input/Input.stories.tsx b/src/components/common/inputbox/input/Input.stories.tsx
new file mode 100644
index 00000000..70400659
--- /dev/null
+++ b/src/components/common/inputbox/input/Input.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Input from '@/components/common/inputbox/input/Input'
+
+const meta: Meta
+
+
+
+ {mainTitle}
+{subTitle}
++ {description} +
+ ++ {errorMessage} +
+ + ) : inputType === 'Search' ? ( + <> +
+
+ + {errorMessage} +
+ + ) : ( + '' + ) + } +) + +export default Input diff --git a/src/components/common/inputbox/input/InputType.ts b/src/components/common/inputbox/input/InputType.ts new file mode 100644 index 00000000..b20fbce1 --- /dev/null +++ b/src/components/common/inputbox/input/InputType.ts @@ -0,0 +1,11 @@ +import { ComponentProps } from 'react' + +type InputType = 'Default' | 'Search' +export interface InputProps extends ComponentProps<'input'> { + inputType: InputType + fullWidth?: boolean + typo?: string + errorMessage?: string + placeholder?: string + onChange?: (e: React.ChangeEvent
+
+
+ ) : (
+ // selectedType : Box
+ <>
+
+
+ {errorMessage}
+
+
+ {'반복'}
+ +
+
+ {errorMessage}
+ + ) + } +) + +export default Select diff --git a/src/components/common/inputbox/select/SelectType.ts b/src/components/common/inputbox/select/SelectType.ts new file mode 100644 index 00000000..352bc741 --- /dev/null +++ b/src/components/common/inputbox/select/SelectType.ts @@ -0,0 +1,13 @@ +import { ComponentProps } from 'react' + +type SelectType = 'Single' | 'Box' +export interface SelectProps extends ComponentProps<'select'> { + selectType: SelectType + value: string + options: string[] + fullWidth?: boolean + width?: number + height?: number + errorMessage?: string + onChange?: (e: React.ChangeEvent{args.leftElement}
}
+ paddingSize={args.paddingSize}
+ hasBorder={args.hasBorder}
+ />
+ )
+}
+
+export default meta
+type Story = StoryObj{'학원명'}
,
+ leftElement: {'샤론음악학원'}
,
+ paddingSize: 'medium',
+ hasBorder: false
+ }
+}
+
+export const ListRowBorder: Story = {
+ args: {
+ rightElement: {'학원명'}
,
+ leftElement: {'샤론음악학원'}
,
+ paddingSize: 'medium',
+ hasBorder: true
+ }
+}
diff --git a/src/components/common/listRow/ListRow.tsx b/src/components/common/listRow/ListRow.tsx
new file mode 100644
index 00000000..1e29771a
--- /dev/null
+++ b/src/components/common/listRow/ListRow.tsx
@@ -0,0 +1,41 @@
+import { ComponentProps, ReactNode } from 'react'
+import { PaddingSizeType, PaddingVariant } from './ListRowType'
+import cn from '@/libs/utils/cn'
+
+/**
+ * @param leftElement 왼쪽 요소 (필수) ReactNode로 작성해야 함.
+ * @param rightElement 오른쪽 요소 ReactNode로 작성해야 함
+ * @param paddingSize 'small [10px] | medium [20px] | large [30px] 가로 사이즈만 조절됨'
+ * @param hasBorder 'bottom-border 의 존재 여부 설정'
+ * */
+
+interface ListRowProps extends ComponentProps<'div'> {
+ rightElement?: ReactNode
+ leftElement: ReactNode
+ paddingSize?: PaddingSizeType
+ hasBorder?: boolean
+ className?: string
+}
+
+const ListRow = ({
+ leftElement,
+ rightElement,
+ hasBorder = true,
+ paddingSize = 'medium',
+ className
+}: ListRowProps) => {
+ return (
+
+ {leftElement}
+ {rightElement}
+
+ )
+}
+
+export default ListRow
diff --git a/src/components/common/listRow/ListRowType.ts b/src/components/common/listRow/ListRowType.ts
new file mode 100644
index 00000000..2693f79a
--- /dev/null
+++ b/src/components/common/listRow/ListRowType.ts
@@ -0,0 +1,6 @@
+export type PaddingSizeType = 'small' | 'medium' | 'large'
+export const PaddingVariant = {
+ small: 'px-[10px]',
+ medium: 'px-[20px]',
+ large: 'px-[30px]'
+}
diff --git a/src/components/common/modal/InputModal.tsx b/src/components/common/modal/InputModal.tsx
new file mode 100644
index 00000000..73b7e856
--- /dev/null
+++ b/src/components/common/modal/InputModal.tsx
@@ -0,0 +1,41 @@
+interface InputModalProperties {
+ onConfirm: () => void
+ onCancel: () => void
+ title: string
+}
+
+const InputModal = ({ onConfirm, onCancel, title }: InputModalProperties) => {
+ return (
+
+
+ )
+}
+
+export default InputModal
diff --git a/src/components/common/modal/Modal.stories.tsx b/src/components/common/modal/Modal.stories.tsx
new file mode 100644
index 00000000..37edad95
--- /dev/null
+++ b/src/components/common/modal/Modal.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import InputModal from './InputModal'
+import Modal from './Modal'
+
+const meta = {
+ title: 'Components/modal',
+ component: Modal,
+ parameters: {
+ layout: 'centered'
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ children: {
+ description: '모달에서 사용할 템플릿을 넣어주세요!',
+ control: false,
+ type: { name: 'string', required: true }
+ }
+ }
+} satisfies Meta
+ {title}
+
+
+
+
+
+
+
+
+ )
+}
+export default Modal
diff --git a/src/components/common/navigationbar/NavigationBar.stories.tsx b/src/components/common/navigationbar/NavigationBar.stories.tsx
new file mode 100644
index 00000000..fb77d908
--- /dev/null
+++ b/src/components/common/navigationbar/NavigationBar.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react'
+import NavigationBar from '@/components/common/navigationbar/NavigationBar.tsx'
+
+const meta: Meta
+ {children}
+
+
+ {navigationState &&
+ navigationState.map((list, index) => (
+
+ )
+}
+
+export default NavigationBar
diff --git a/src/components/common/navigationbar/NavigationBarType.ts b/src/components/common/navigationbar/NavigationBarType.ts
new file mode 100644
index 00000000..4cc077a6
--- /dev/null
+++ b/src/components/common/navigationbar/NavigationBarType.ts
@@ -0,0 +1,11 @@
+import { IconType } from '@/components/common/icon/Icon.tsx'
+
+export interface NavigationStateType {
+ icon: IconType
+ text: string
+ select: boolean
+}
+
+export interface NavigationBarProps {
+ selectIcon: 'SearchMap' | 'Home' | 'Timetable' | 'Info'
+}
diff --git a/src/components/common/navigationbar/constants.ts b/src/components/common/navigationbar/constants.ts
new file mode 100644
index 00000000..ef58c247
--- /dev/null
+++ b/src/components/common/navigationbar/constants.ts
@@ -0,0 +1,30 @@
+import { NavigationStateType } from '@/components/common/navigationbar/NavigationBarType.ts'
+
+export const SelectText = 'text-black-700'
+export const SelectIconFillStroke = 'fill-black-700 stroke-black-700'
+export const SelectIconFill = 'fill-black-700'
+export const DefaultText = 'text-gray-300'
+export const DefaultIconFill = 'fill-gray-300 stroke-gray-300'
+
+export const initNavigationList: NavigationStateType[] = [
+ {
+ icon: 'SearchMap',
+ text: '학원 지도',
+ select: false
+ },
+ {
+ icon: 'Home',
+ text: '홈',
+ select: true
+ },
+ {
+ icon: 'Timetable',
+ text: '시간표',
+ select: false
+ },
+ {
+ icon: 'Info',
+ text: '학원 정보',
+ select: false
+ }
+]
diff --git a/src/components/common/profile/Profile.stories.tsx b/src/components/common/profile/Profile.stories.tsx
new file mode 100644
index 00000000..21515c89
--- /dev/null
+++ b/src/components/common/profile/Profile.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Profile from './Profile'
+const meta = {
+ title: 'Components/Profile',
+ component: Profile,
+ parameters: {
+ layout: 'centered'
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ imageSize: {
+ control: 'select',
+ options: ['S', 'M', 'L']
+ }
+ }
+} satisfies Meta
+ handleIconClick(e.currentTarget.dataset.id as IconType)
+ }>
+
+ ))}
+
+ ![]()
{
+ alert('프로필 바꾸는 기능!')
+ }
+ : undefined
+ }
+ src={imageUrl}
+ alt={'profile photo'}
+ className={'absolute top-0 left-0 w-[100%] h-[100%]'}
+ />
+
+ )
+}
+
+export default Profile
diff --git a/src/components/common/profile/ProfileType.ts b/src/components/common/profile/ProfileType.ts
new file mode 100644
index 00000000..acd9a180
--- /dev/null
+++ b/src/components/common/profile/ProfileType.ts
@@ -0,0 +1,8 @@
+type ProfileImageType = 'S' | 'M' | 'L' | 'XL'
+
+export interface ProfileImageProps {
+ imageSize: ProfileImageType
+ imageUrl?: string
+ canEdit?: boolean
+ onClick?: () => void
+}
diff --git a/src/components/common/profile/constants.ts b/src/components/common/profile/constants.ts
new file mode 100644
index 00000000..1c1b826e
--- /dev/null
+++ b/src/components/common/profile/constants.ts
@@ -0,0 +1,9 @@
+export const PROFILE_SIZE = {
+ XL: 'w-[150px] h-[150px]',
+ L: 'w-[92px] h-[92px]',
+ M: 'w-[70px] h-[70px]',
+ S: 'w-[28px] h-[28px]'
+}
+export const PROFILE_BORDER_COLOR = {
+ black500: 'border-black-500'
+}
diff --git a/src/components/common/scheduleBox/ScheduleBox.stories.tsx b/src/components/common/scheduleBox/ScheduleBox.stories.tsx
new file mode 100644
index 00000000..a007f256
--- /dev/null
+++ b/src/components/common/scheduleBox/ScheduleBox.stories.tsx
@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Icon from '../icon/Icon'
+import ScheduleBox from '@/components/common/scheduleBox/ScheduleBox'
+
+const meta: Meta{'오후 4시에 종료'}
+ + ), + rightTopElement: ( + <> +
+ 
+
+
+
+
+
+
+ )
+ }
+}
+
+export const RegisteredScheduleBox: Story = {
+ args: {
+ isRegister: true,
+ scheduleType: 'toggle',
+ mainTitle: '학원 이름',
+ subElement: (
+ <>
+
+
+
+ {'매주 월,화,수'}
+{'tkghl'}
+
+ ),
+ rightTopElement: (
+ <>
+ {'btn'}
+
+ )
+ }
+}
+
+export const NotRegisteredScheduleBox: Story = {
+ args: {
+ scheduleType: 'toggle',
+ mainTitle: '학원 이름',
+ subElement: (
+ <>
+
+
+ {'매주 월,화,수'}
+{'tkghl'}
+
+ ),
+ rightTopElement: (
+ <>
+ {'btn'}
+
+ )
+ }
+}
diff --git a/src/components/common/scheduleBox/ScheduleBox.tsx b/src/components/common/scheduleBox/ScheduleBox.tsx
new file mode 100644
index 00000000..45ac56fe
--- /dev/null
+++ b/src/components/common/scheduleBox/ScheduleBox.tsx
@@ -0,0 +1,66 @@
+import type { ScheduleBoxProps } from './ScheduleBoxType'
+import Icon from '../icon/Icon'
+import Profile from '../profile/Profile'
+const ScheduleBox = ({
+ isRegister = false,
+ scheduleType,
+ mainTitle,
+ subElement
+}: ScheduleBoxProps) => {
+ return (
+
+
+ )
+}
+
+export default ScheduleBox
diff --git a/src/components/common/scheduleBox/ScheduleBoxType.ts b/src/components/common/scheduleBox/ScheduleBoxType.ts
new file mode 100644
index 00000000..21ff2ea5
--- /dev/null
+++ b/src/components/common/scheduleBox/ScheduleBoxType.ts
@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+
+type ScheduleType = 'toggle' | 'profile'
+export interface ScheduleBoxProps {
+ scheduleType: ScheduleType
+ mainTitle: string
+ subElement: ReactNode // HTML태그를 넣을 수 있음!
+ rightBottomElement?: ReactNode // HTML태그를 넣을 수 있음!
+ isRegister?: boolean
+ cntOfChild?: number
+}
diff --git a/src/components/common/selectweek/Select.stories.tsx b/src/components/common/selectweek/Select.stories.tsx
new file mode 100644
index 00000000..e9f096ed
--- /dev/null
+++ b/src/components/common/selectweek/Select.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useEffect, useState } from 'react'
+import SelectWeek from './SelectWeek'
+
+const meta: Meta
+
+
+
+ {mainTitle}
+
+
+
+
+
+ {subElement}
+
+
+ {scheduleType === 'profile' ? (
+ <>
+ {/*
+ ❗️TODO: 자식의 수 만큼 Profile컴포넌트 반복문 해주시면 됩니당
+ */}
+
+
+
+
+ )}
+
+ {week.map((day, index) => (
+
+ ))}
+
+ )
+}
+
+export default SelectWeek
diff --git a/src/components/common/spacing/Spacing.stories.tsx b/src/components/common/spacing/Spacing.stories.tsx
new file mode 100644
index 00000000..9e6600c7
--- /dev/null
+++ b/src/components/common/spacing/Spacing.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Spacing from './Spacing'
+
+const meta: Meta
+
+ )
+ }
+}
+
+export default meta
+
+type Story = StoryObj
+
+ )
+}
+
+export default StepQuestion
diff --git a/src/components/common/stepquestion/StepQuestionType.ts b/src/components/common/stepquestion/StepQuestionType.ts
new file mode 100644
index 00000000..67dde82d
--- /dev/null
+++ b/src/components/common/stepquestion/StepQuestionType.ts
@@ -0,0 +1,6 @@
+interface StepQuestionProps {
+ text: string
+ step: number
+}
+
+export default StepQuestionProps
diff --git a/src/components/common/stepquestion/constants.ts b/src/components/common/stepquestion/constants.ts
new file mode 100644
index 00000000..ba3d116b
--- /dev/null
+++ b/src/components/common/stepquestion/constants.ts
@@ -0,0 +1,4 @@
+export const StepQuestionContainer = 'flex items-center'
+export const StepStyle =
+ 'w-[28px] h-[28px] text-center bg-blue-500 rounded-full body-16 font-nsk leading-[24px] font-bold text-white-100 mr-[10px]'
+export const TextStyle = 'font-nsk body-17'
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
new file mode 100644
index 00000000..a612165d
--- /dev/null
+++ b/src/components/layout/Layout.tsx
@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+import { Outlet } from 'react-router-dom'
+
+const Layout = () => {
+ useEffect(() => {
+ const vh = window.innerHeight * 0.01
+ document.documentElement.style.setProperty('--vh', `${vh}px`)
+
+ window.addEventListener('resize', () => {
+ const vh = window.innerHeight * 0.01
+ document.documentElement.style.setProperty('--vh', `${vh}px`)
+ })
+ }, [])
+
+ return (
+ <>
+ {step}
+ {text}
+
+
+
+ )
+}
+export default Layout
diff --git a/src/components/map/NaverMap.tsx b/src/components/map/NaverMap.tsx
new file mode 100644
index 00000000..1d5c2d0c
--- /dev/null
+++ b/src/components/map/NaverMap.tsx
@@ -0,0 +1,59 @@
+import { useEffect } from 'react'
+
+/**
+ * NAVER_CLIENT_KEY : Naver 에서 발급한 클라이언트 아이디
+ *
+ * **/
+interface NaverMapProps {
+ latitude: number
+ longitude: number
+ academyList: Academy[]
+ selectAcademy: (academy: Academy) => void
+}
+
+const NaverMap = ({
+ latitude,
+ longitude,
+ academyList,
+ selectAcademy
+}: NaverMapProps) => {
+ const center: naver.maps.LatLng = new naver.maps.LatLng(latitude, longitude)
+
+ useEffect(() => {
+ const map = new naver.maps.Map('map', {
+ center: center,
+ zoom: 14
+ })
+ academyList.map((data, index) => {
+ const marker = new naver.maps.Marker({
+ position: new naver.maps.LatLng(data.latitute, data.longitute),
+ map: map,
+ icon: {
+ content: `
+
+
+ `
+ }
+ })
+
+ naver.maps.Event.addListener(marker, 'click', () => selectAcademy(data))
+ })
+ }, [academyList])
+
+ return (
+
+
+
+
+
+
+ ${data.academyName}
+
+
+
+ )
+}
+export default NaverMap
diff --git a/src/components/mapfilter/SquareBox.tsx b/src/components/mapfilter/SquareBox.tsx
new file mode 100644
index 00000000..a8f9784a
--- /dev/null
+++ b/src/components/mapfilter/SquareBox.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react'
+
+interface SquareBoxProps {
+ children: ReactNode
+ height: string
+ flex: string
+}
+
+const SquareBox = ({ children, height, flex }: SquareBoxProps) => {
+ const squareBoxStyle = `flex ${flex} w-full bg-white-0 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] mb-[10px]`
+ return (
+
+ {children}
+
+ )
+}
+
+export default SquareBox
diff --git a/src/components/selectcity/SelectCityStep1.tsx b/src/components/selectcity/SelectCityStep1.tsx
new file mode 100644
index 00000000..daf84b0d
--- /dev/null
+++ b/src/components/selectcity/SelectCityStep1.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { SidoType } from '../../types/selectcity.ts'
+import Select from '@/components/common/inputbox/select/Select.tsx'
+import StepQuestion from '@/components/common/stepquestion/StepQuestion.tsx'
+
+interface SelectCityStepProps extends SidoType {
+ onChange: (selectedSido: string) => void
+}
+
+const SelectCityStep1 = ({
+ sidoArr,
+ select,
+ onChange
+}: SelectCityStepProps) => {
+ const handleChange = (event: React.ChangeEvent
+
+
+ )
+}
+
+export default SelectCityStep1
diff --git a/src/components/selectcity/SelectCityStep2.tsx b/src/components/selectcity/SelectCityStep2.tsx
new file mode 100644
index 00000000..581c0bf0
--- /dev/null
+++ b/src/components/selectcity/SelectCityStep2.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { SigunguType } from '../../types/selectcity.ts'
+import Input from '@/components/common/inputbox/input/Input.tsx'
+import Select from '@/components/common/inputbox/select/Select.tsx'
+import StepQuestion from '@/components/common/stepquestion/StepQuestion.tsx'
+
+interface SelectCityStepProps extends SigunguType {
+ sido: string
+ onChange: (selectedSido: string) => void
+ onClick: (number: number) => void
+}
+
+const SelectCityStep2 = ({
+ sido,
+ sigunguArr,
+ select,
+ onChange,
+ onClick
+}: SelectCityStepProps) => {
+ const handleChange = (event: React.ChangeEvent
+
+
+
+
+
+ )
+}
+
+export default SelectCityStep2
diff --git a/src/components/selectcity/SelectCityStep3.tsx b/src/components/selectcity/SelectCityStep3.tsx
new file mode 100644
index 00000000..bb6770a5
--- /dev/null
+++ b/src/components/selectcity/SelectCityStep3.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import { DongneType } from '../../types/selectcity.ts'
+import Input from '@/components/common/inputbox/input/Input.tsx'
+import Select from '@/components/common/inputbox/select/Select.tsx'
+import StepQuestion from '@/components/common/stepquestion/StepQuestion.tsx'
+
+interface SelectCityStepProps extends DongneType {
+ sido: string
+ sigungu: string
+ onChange: (selectedSido: string) => void
+}
+
+const SelectCityStep3 = ({
+ dongneArr,
+ select,
+ sido,
+ sigungu,
+ onChange
+}: SelectCityStepProps) => {
+ const handleChange = (event: React.ChangeEvent
+ onClick(1)}
+ >
+
+
+
+
+
+
+
+ )
+}
+
+export default SelectCityStep3
diff --git a/src/constants/common.ts b/src/constants/common.ts
deleted file mode 100644
index 8710960b..00000000
--- a/src/constants/common.ts
+++ /dev/null
@@ -1 +0,0 @@
-console.log('공용 상수')
diff --git a/src/constants/env.ts b/src/constants/env.ts
new file mode 100644
index 00000000..64642104
--- /dev/null
+++ b/src/constants/env.ts
@@ -0,0 +1 @@
+export const { VITE_CLIENT_ID, VITE_CLIENT_SECRET } = import.meta.env
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 3c378d47..94812cae 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1 +1 @@
-console.log('constants folder')
+export * from './env'
diff --git a/src/constants/mapPage.ts b/src/constants/mapPage.ts
new file mode 100644
index 00000000..282eb436
--- /dev/null
+++ b/src/constants/mapPage.ts
@@ -0,0 +1,9 @@
+import { MapLocation } from '../types/mapPage.ts'
+
+export const defaultLocation: MapLocation = {
+ latitude: 37.498_095,
+ longitude: 127.027_61,
+ sido: '서울특별시',
+ sigungu: '강남구',
+ upmyeondong: '삼성동'
+}
diff --git a/src/constants/selectCity.ts b/src/constants/selectCity.ts
new file mode 100644
index 00000000..51d1cf94
--- /dev/null
+++ b/src/constants/selectCity.ts
@@ -0,0 +1,14 @@
+export const initSido = {
+ sidoArr: [],
+ select: ''
+}
+
+export const initSigungu = {
+ sigunguArr: [],
+ select: ''
+}
+
+export const initDongne = {
+ dongneArr: [],
+ select: ''
+}
diff --git a/src/hooks/useModal.tsx b/src/hooks/useModal.tsx
new file mode 100644
index 00000000..bdc213fe
--- /dev/null
+++ b/src/hooks/useModal.tsx
@@ -0,0 +1,31 @@
+import { ReactNode, useCallback, useState } from 'react'
+import Modal from '../components/common/modal/Modal'
+
+interface ModalProperties {
+ children: ReactNode
+}
+
+const useModal = () => {
+ const [isOpen, setIsOpen] = useState(false)
+
+ // 모달 열기
+ const open = useCallback(() => {
+ setIsOpen(() => true)
+ }, [])
+
+ // 모달 닫기
+ const close = useCallback(() => {
+ setIsOpen(() => false)
+ }, [])
+
+ // isOpen이 true라면 modal 컴포넌트를 반환, false라면 null을 반환
+ return {
+ Modal: isOpen
+ ? ({ children }: ModalProperties) =>
+
+
+
+
+
+
+
+
+
+ {'이름'}
}
+ rightElement={
+ {childInfo?.nickname}
+ }
+ />
+ {childInfo?.grade}
+ }
+ />
+
+
+
+ )
+}
+
+export default EditChildren
diff --git a/src/pages/EditChildren/EditingChildren.tsx b/src/pages/EditChildren/EditingChildren.tsx
new file mode 100644
index 00000000..3d5964d4
--- /dev/null
+++ b/src/pages/EditChildren/EditingChildren.tsx
@@ -0,0 +1,103 @@
+import { useState } from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { useMutation } from '@tanstack/react-query'
+import Button from '@/components/common/button/Button'
+import Input from '@/components/common/inputbox/input/Input'
+import Select from '@/components/common/inputbox/select/Select'
+import Profile from '@/components/common/profile/Profile'
+import Spacing from '@/components/common/spacing/Spacing'
+import StepQuestion from '@/components/common/stepquestion/StepQuestion'
+import { editChildInfo } from '@/libs/api/children/ChildrenApi'
+import { EditChildInfoRequest } from '@/libs/api/children/ChildrenType'
+import { queryClient } from '@/libs/api/queryClient'
+
+const EditingChildren = () => {
+ const location = useLocation()
+ const navigate = useNavigate()
+ const [childInfo, setChildInfo] = useState
+
+ )
+}
+export default EditingChildren
diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx
new file mode 100644
index 00000000..3f4098f4
--- /dev/null
+++ b/src/pages/ErrorPage.tsx
@@ -0,0 +1,5 @@
+const ErrorPage = () => {
+ return
+
+ {'Error Page'}
+}
+
+export default ErrorPage
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
deleted file mode 100644
index cafb7490..00000000
--- a/src/pages/HomePage.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function HomePage() {
- return {'HomePage'}
-}
diff --git a/src/pages/filter/FilterPage.tsx b/src/pages/filter/FilterPage.tsx
new file mode 100644
index 00000000..ae7ca7e2
--- /dev/null
+++ b/src/pages/filter/FilterPage.tsx
@@ -0,0 +1,84 @@
+import Button from '@/components/common/button/Button.tsx'
+import Label from '@/components/common/label/Label.tsx'
+import Spacing from '@/components/common/spacing/Spacing.tsx'
+const FilterPage = () => {
+ return (
+
+
+ )
+}
+
+export default FilterPage
diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
new file mode 100644
index 00000000..d40ade33
--- /dev/null
+++ b/src/pages/home/HomePage.tsx
@@ -0,0 +1,58 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import Loading from '@/components/Loading/Loading'
+import Icon from '@/components/common/icon/Icon'
+import InformationBox from '@/components/common/informationBox/InformationBox'
+import Spacing from '@/components/common/spacing/Spacing'
+import { getChildrenInfo } from '@/libs/api/children/ChildrenApi'
+const HomePage = () => {
+ const navigate = useNavigate()
+ const { data, isLoading } = useQuery({
+ queryKey: ['children'],
+ queryFn: () => getChildrenInfo()
+ })
+ if (isLoading) {
+ return
+
+ {'지역'}
+
+
+ {'서울, 강남구 대치동'}
+
+
+
+
+
+
+
+
+ {'과목'}
+
+ {'중복 선택 가능'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {'희망 금액(추정치)'}
+
+
+
+
+
+
+ )
+}
+
+export default HomePage
diff --git a/src/pages/login/LoginPage.tsx b/src/pages/login/LoginPage.tsx
new file mode 100644
index 00000000..36bfa10b
--- /dev/null
+++ b/src/pages/login/LoginPage.tsx
@@ -0,0 +1,70 @@
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { VITE_CLIENT_ID } from '../../constants'
+import Button from '@/components/common/button/Button'
+import {
+ getAccessToken,
+ getCode,
+ getKaKaoAccessToken,
+ pushData
+} from '@/libs/api/autorization'
+
+const LoginPage = () => {
+ const navigate = useNavigate()
+ useEffect(() => {
+ if (getCode()) {
+ const req = async () => {
+ try {
+ const kakaoToken = await getKaKaoAccessToken(pushData())
+ if (kakaoToken) {
+ const accessToken = await getAccessToken(kakaoToken)
+ if (accessToken) {
+ localStorage.setItem('token', accessToken)
+ accessToken && navigate('/')
+ }
+ }
+ } catch (error) {
+ console.error('액세스 토큰 요청 실패:', error)
+ }
+ }
+ req()
+ }
+ }, [navigate])
+ return (
+
+ {data && data?.length > 0 ? (
+ data.map((data) => {
+ return (
+
+ navigate(`edit/${data.childId}`, {
+ state: {
+ childId: data.childId
+ }
+ })
+ }
+ />
+ )
+ })
+ ) : (
+
+
+ {'아이를 먼저 등록해주세요!'}
+
+ )}
+
+
+
+
+ )
+}
+export default LoginPage
diff --git a/src/pages/map/MapPage.tsx b/src/pages/map/MapPage.tsx
new file mode 100644
index 00000000..2ca653e5
--- /dev/null
+++ b/src/pages/map/MapPage.tsx
@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { defaultLocation } from '../../constants/mapPage.ts'
+import { MapLocation } from '../../types/mapPage.ts'
+import BottomSheet from '@/components/common/bottomsheet/BottomSheet.tsx'
+import Icon from '@/components/common/icon/Icon.tsx'
+import Input from '@/components/common/inputbox/input/Input.tsx'
+import Spacing from '@/components/common/spacing/Spacing.tsx'
+import NaverMap from '@/components/map/NaverMap.tsx'
+import { getAcademys } from '@/libs/api/mapapi/mapApi.ts'
+
+const MapPage = () => {
+ const TMPLAT = 37.444_916_8
+ const TMPLNG = 127.138_868
+ const navigate = useNavigate()
+ const [mapLocation, setMapLocation] = useState(defaultLocation)
+ const [academyList, setAcademyList] = useState
+
+ {'Logo'}
+
+
+ }
+ buttonType={'Round-blue-500'}
+ width={'LW'}
+ onClick={() => {
+ window.location.href = `https://kauth.kakao.com/oauth/authorize?client_id=${VITE_CLIENT_ID}&redirect_uri=http://localhost:5173/login&response_type=code`
+ }}
+ />
+
+ }
+ buttonType={'Round-blue-500'}
+ width={'LW'}
+ />
+
+
+
+ )
+}
+export default MapPage
diff --git a/src/pages/onboarding/OnbardingPage.tsx b/src/pages/onboarding/OnbardingPage.tsx
new file mode 100644
index 00000000..48ed3e7c
--- /dev/null
+++ b/src/pages/onboarding/OnbardingPage.tsx
@@ -0,0 +1,224 @@
+import { useState, useEffect, useRef } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { DATA, grade } from './constants'
+import { validate } from './validate'
+import Button from '@/components/common/button/Button'
+import Input from '@/components/common/inputbox/input/Input'
+import Select from '@/components/common/inputbox/select/Select'
+import Spacing from '@/components/common/spacing/Spacing'
+import StepQuestion from '@/components/common/stepquestion/StepQuestion'
+import { onboarding } from '@/libs/api/onboarding.ts'
+
+const OnboardingPage = () => {
+ const [storage, setStorage] = useState
+
+
+
+
+
+
+
+
+ )
+}
+export default OnboardingPage
diff --git a/src/pages/onboarding/constants.ts b/src/pages/onboarding/constants.ts
new file mode 100644
index 00000000..ebbc85ef
--- /dev/null
+++ b/src/pages/onboarding/constants.ts
@@ -0,0 +1,93 @@
+export const DATA = [
+ {
+ mainTitle: '안녕하세요 :) 스터데이에요',
+ subTitle: '스터데이의 커뮤니티 문화를 위해 매너있는 이름을 써주세요',
+ step: [1],
+ inputTitle: ['사용할 닉네임을 입력해주세요'],
+ buttonType: ['입력완료']
+ },
+ {
+ mainTitle: '스터데이의 최근 소식을 알려드리고 싶어요.',
+ subTitle: '작성해주신 이메일로 최신 정보를 보내드려요',
+ step: [2],
+ inputTitle: ['이메일을 입력해주세요'],
+ buttonType: ['입력완료']
+ },
+ {
+ mainTitle: '자녀에 대해서 알려주세요',
+ subTitle: '자녀별로 시간표를 관리하고 맞춤 정보를 관리할 수 있어요',
+ step: [3, 4],
+ inputTitle: [
+ '아이의 이름(애칭)을 알려주세요',
+ '현재 재학중인 학년을 알려주세요'
+ ],
+ buttonType: [
+ '저장! 둘째 입력하러가기',
+ '입력완료! 스터데이를 시작해볼까요?'
+ ]
+ },
+ {
+ mainTitle: '둘째는 어떤 아이인가요?',
+ subTitle: '자녀별로 시간표를 관리하고 맞춤 정보를 관리할 수 있어요',
+ step: [3, 4],
+ inputTitle: [
+ '아이의 이름(애칭)을 알려주세요',
+ '현재 재학중인 학년을 알려주세요'
+ ],
+ buttonType: [
+ '저장! 셋째 입력하러가기',
+ '입력완료! 스터데이를 시작해볼까요?'
+ ]
+ },
+ {
+ mainTitle: '귀염둥이 셋째! 정보를 입력해주세요',
+ subTitle: '자녀별로 시간표를 관리하고 맞춤 정보를 관리할 수 있어요',
+ step: [3, 4],
+ inputTitle: [
+ '아이의 이름(애칭)을 알려주세요',
+ '현재 재학중인 학년을 알려주세요'
+ ],
+ buttonType: [
+ '저장! 넷째 입력하러가기',
+ '입력완료! 스터데이를 시작해볼까요?'
+ ]
+ },
+ {
+ mainTitle: '우와, 벌써 넷째에요',
+ subTitle: '자녀별로 시간표를 관리하고 맞춤 정보를 관리할 수 있어요',
+ step: [3, 4],
+ inputTitle: [
+ '아이의 이름(애칭)을 알려주세요',
+ '현재 재학중인 학년을 알려주세요'
+ ],
+ buttonType: [
+ '저장! 다섯째 입력하러가기',
+ '입력완료! 스터데이를 시작해볼까요?'
+ ]
+ },
+ {
+ mainTitle: '마지막이에요! 다섯째는요?',
+ subTitle: '자녀별로 시간표를 관리하고 맞춤 정보를 관리할 수 있어요',
+ step: [3, 4],
+ inputTitle: [
+ '아이의 이름(애칭)을 알려주세요',
+ '현재 재학중인 학년을 알려주세요'
+ ],
+ buttonType: ['입력완료! 스터데이를 시작해볼까요?']
+ }
+]
+
+export const grade = [
+ '초등학교 1학년',
+ '초등학교 2학년',
+ '초등학교 3학년',
+ '초등학교 4학년',
+ '초등학교 5학년',
+ '초등학교 6학년',
+ '중학교 1학년',
+ '중학교 2학년',
+ '중학교 3학년',
+ '고등학교 1학년',
+ '고등학교 2학년',
+ '고등학교 3학년'
+]
diff --git a/src/pages/onboarding/validate.ts b/src/pages/onboarding/validate.ts
new file mode 100644
index 00000000..0775e7b7
--- /dev/null
+++ b/src/pages/onboarding/validate.ts
@@ -0,0 +1,9 @@
+export const validate = (field: string, content: string) => {
+ if (field === 'email') {
+ const validCharacters = /^[\w.-]+@[\d.A-Za-z-]+\.[A-Za-z]{2,4}$/
+ return !validCharacters.test(content)
+ } else if (field === 'nickname') {
+ const validCharacters = /^[A-Za-z가-힣]+$/ // 영어와 숫자만 허용
+ return !validCharacters.test(content)
+ }
+}
diff --git a/src/pages/selectcity/SelectCity.tsx b/src/pages/selectcity/SelectCity.tsx
new file mode 100644
index 00000000..e7103c5a
--- /dev/null
+++ b/src/pages/selectcity/SelectCity.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import {
+ initDongne,
+ initSido,
+ initSigungu
+} from '../../constants/selectCity.ts'
+import useSteps from '../../hooks/useSteps.ts'
+import { SigunguType, SidoType, DongneType } from '../../types/selectcity.ts'
+import Spacing from '@/components/common/spacing/Spacing.tsx'
+import SelectCityStep1 from '@/components/selectcity/SelectCityStep1.tsx'
+import SelectCityStep2 from '@/components/selectcity/SelectCityStep2.tsx'
+import SelectCityStep3 from '@/components/selectcity/SelectCityStep3.tsx'
+import {
+ getBeopjungdong,
+ getDongne,
+ getLocation,
+ getSigungu
+} from '@/libs/api/mapapi/mapApi.ts'
+
+const SelectCity = () => {
+ const navigate = useNavigate()
+ const [sido, setSido] = useState
+
+ {pageData.mainTitle}
+{pageData.subTitle}
+
+ {pageData.inputTitle.map((title, index) => (
+ <>
+
+
+
+ {index === 0 ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+ {pageData.buttonType.map((value, index) => (
+
+
+
+ ))}
+
+
+ )
+}
+
+export default SelectCity
diff --git a/src/routes/index.ts b/src/routes/index.ts
deleted file mode 100644
index ed4245c7..00000000
--- a/src/routes/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-console.log('라우팅 폴더')
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
new file mode 100644
index 00000000..0f382357
--- /dev/null
+++ b/src/routes/index.tsx
@@ -0,0 +1,157 @@
+import { Suspense } from 'react'
+import { Outlet, createBrowserRouter } from 'react-router-dom'
+import Loading from '@/components/Loading/Loading'
+import Header from '@/components/common/header/Header'
+import Select from '@/components/common/inputbox/select/Select'
+import NavigationBar from '@/components/common/navigationbar/NavigationBar'
+import Layout from '@/components/layout/Layout.tsx'
+import EditChildren from '@/pages/EditChildren/EditChildren'
+import EditingChildren from '@/pages/EditChildren/EditingChildren'
+import ErrorPage from '@/pages/ErrorPage'
+import FilterPage from '@/pages/filter/FilterPage.tsx'
+import HomePage from '@/pages/home/HomePage'
+import OnboardingPage from '@/pages/onboarding/OnbardingPage'
+import LoginPage from '@/pages/login/LoginPage'
+import MapPage from '@/pages/map/MapPage.tsx'
+import SelectCity from '@/pages/selectcity/SelectCity.tsx'
+
+export const router = createBrowserRouter(
+ [
+ {
+ path: '/',
+ element: (
+ {'시간표 보기'}
, + errorElement:
+
+ ),
+ errorElement: {'학원 리스트 보기'}
+{'학원 리스트 body'}
, + errorElement:{'학원 상세보기'}
, + errorElement:{'학원 등록'}
, + errorElement:{'reports'}
, + errorElement:{'setting page'}
, + errorElement:{'my page'}
, + errorElement: