-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bc24a23
commit 4248e9d
Showing
16 changed files
with
417 additions
and
143 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,82 @@ | ||
| Form Control Convention | ||
| admin -> backend -> client (문항 커스텀으로 만들때) | ||
|
|
||
| 1. data-testid | ||
| ```ts | ||
| export const QuestionTypes = { | ||
| checkbox: "checkbox", | ||
| selector: "selector", | ||
| slider: "slider", | ||
| doubleSlider: "doubleSlider", | ||
| } as const; | ||
|
|
||
| interface FormProps { | ||
| title: string; | ||
| description: string; | ||
| questions: { | ||
| questionText: string; | ||
| questionType: keyof typeof QuestionTypes; | ||
| dataType: string; | ||
| options: { label?: string; value: any }[]; | ||
| }[]; | ||
| } | ||
| ``` | ||
| data-testid: <UI>_{option.label} | ||
|
|
||
| ex. | ||
| <CheckBoxWithLabelForm/> | ||
| data-testid: checkbox\_{option.label} | ||
| ```js | ||
| const formProps: FormProps = { | ||
| title: "test", | ||
| description: "test", | ||
| questions: [ | ||
| { | ||
| questionId | ||
| questionText: "test-question-slider", | ||
| questionType: "slider", | ||
| dataType: "number", | ||
| options: [ | ||
| { label: "label1", value: 1 }, | ||
| { label: "label2", value: 2 }, | ||
| { label: "label3", value: 3 }, | ||
| ], | ||
| }, | ||
| { | ||
| questionText: "test-question-checkbox", | ||
| questionType: "checkbox", | ||
| dataType: "number", | ||
| options: [ | ||
| { label: "label1", value: "value1" }, | ||
| { label: "label2", value: "value2" }, | ||
| { label: "label3", value: "value3" }, | ||
| ], | ||
| }, | ||
| { | ||
| questionText: "test-question-selector", | ||
| questionType: "selector", | ||
| dataType: "number", | ||
| options: [ | ||
| { label: "label1", value: "value1" }, | ||
| { label: "label2", value: "value2" }, | ||
| { label: "label3", value: "value3" }, | ||
| ], | ||
| }, | ||
| { | ||
| questionText: "test-question-doubleSlider", | ||
| questionType: "doubleSlider", | ||
| dataType: "number", | ||
| options: [ | ||
| { label: "label1", value: 1 }, | ||
| { label: "label2", value: 2 }, | ||
| { label: "label3", value: 3 }, | ||
| { label: "label4", value: 4 }, | ||
| { label: "label5", value: 5 }, | ||
| ], | ||
| }, | ||
| ], | ||
| }; | ||
| ``` | ||
|
|
||
| 2. htmlFor, id | ||
| client (문항 응답자가 응답완료해서 백엔드로 보낼때) -> backend | ||
|
|
||
| ```ts | ||
| interface ResponseSchema { | ||
| sruveyId: | ||
| } | ||
|
|
||
| ``` | ||
| const id = useId(); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,15 @@ | ||
| import { Provider } from "react-redux"; | ||
| import { createBrowserRouter, RouterProvider } from "react-router-dom"; | ||
|
|
||
| import { router } from "./Router"; | ||
| import { Stack } from "./stackflow"; | ||
| import { store } from "./store/store"; | ||
| import "./styles/tailwind.css"; | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <Provider store={store}> | ||
| <RouterProvider router={createBrowserRouter(router)} /> | ||
| <main className="w-full max-w-[500px] mx-auto h-screen border-[1px]"> | ||
| <Stack /> | ||
| </main> | ||
| </Provider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { CirclePlus, HeartHandshake, MessagesSquare, User, UserSearch } from "lucide-react"; | ||
|
|
||
| export const navBottom = [ | ||
| { | ||
| path: "/match", | ||
| label: "룸메 찾기", | ||
| icon: HeartHandshake, | ||
| }, | ||
| { | ||
| path: "/match/create", | ||
| label: "룸메 구하기", | ||
| icon: CirclePlus, | ||
| }, | ||
| { | ||
| path: "/chat", | ||
| label: "채팅", | ||
| icon: MessagesSquare, | ||
| }, | ||
| { | ||
| path: "/mypage", | ||
| label: "마이페이지", | ||
| icon: User, | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { Fragment } from "react/jsx-runtime"; | ||
|
|
||
| import { NavBottom } from "@/components/layouts/NavBottom"; | ||
|
|
||
| import HomePage from "@/pages/home/HomePage"; | ||
| import MatchDeatilPage from "@/pages/match/MatchDeatilPage"; | ||
| import MatchListPage from "@/pages/match/MatchListPage"; | ||
|
|
||
| import { AppScreen, AppScreenProps, basicUIPlugin } from "@stackflow/plugin-basic-ui"; | ||
| import { historySyncPlugin } from "@stackflow/plugin-history-sync"; | ||
| import { basicRendererPlugin } from "@stackflow/plugin-renderer-basic"; | ||
| import { stackflow } from "@stackflow/react"; | ||
|
|
||
| export const { Stack, useFlow } = stackflow({ | ||
| transitionDuration: 250, | ||
| plugins: [ | ||
| basicRendererPlugin(), | ||
| basicUIPlugin({ | ||
| theme: "cupertino", | ||
| }), | ||
| historySyncPlugin({ | ||
| routes: { | ||
| HomePage: "/", | ||
| MatchListPage: "/match", | ||
| MatchDeatilPage: "/match/detail", | ||
| }, | ||
| fallbackActivity: () => "HomePage", | ||
| }), | ||
| ], | ||
|
|
||
| activities: { | ||
| HomePage, | ||
| MatchListPage, | ||
| MatchDeatilPage, | ||
| }, | ||
| initialActivity: () => "HomePage", | ||
| }); | ||
|
|
||
| export const Screen = ({ children, ...appScreenProps }: AppScreenProps) => { | ||
| return ( | ||
| <Fragment> | ||
| <AppScreen {...appScreenProps}> | ||
| <div className="screen">{children}</div> | ||
| </AppScreen> | ||
| <NavBottom /> | ||
| </Fragment> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { navBottom } from "@/apps/constants/nav"; | ||
|
|
||
| export const NavBottom = () => { | ||
| return ( | ||
| <nav className="w-full max-w-[500px] h-[70px] fixed bottom-0 z-30 bg-white shadow-2xl shadow-black"> | ||
| <ul className="flex justify-around w-full h-full gap-4 px-2 bg-white "> | ||
| {navBottom.map((item, index) => { | ||
| return ( | ||
| <li className="flex items-center h-full"> | ||
| <button className="flex flex-col items-center"> | ||
| <item.icon size={25} /> | ||
| <p className="text-sm">{item.label}</p> | ||
| </button> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| </nav> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default function SignUpPage() { | ||
| return <div className=""></div>; | ||
| } |
Oops, something went wrong.