diff --git a/src/App.tsx b/src/App.tsx index 1eb4c86..a7fca4b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,34 +9,66 @@ const GlobalStyle = createGlobalStyle` * { box-sizing: border-box; } + body { margin: 0; background-color: ${(props) => props.theme.bgColor}; color: ${(props) => props.theme.textColor}; + font-family: 'Pretendard'; + font-style: normal } + ul { margin: 0; padding: 0; } + .label { font-size: 1.5em; padding: 0.5em; width: 100%; } + .non-logged-in-body { margin: 0 auto; - width: 60%; - padding: 150px 20px; + height: 100vh; + width: 100%; + max-width: 500px; + padding: 40px 20px; } + .general-layout { + margin: 0 auto; height: 100vh; + width: 100%; + max-width: 500px; display: flex; + align-items: center; } .general-layout__body { margin: 0 auto; - width: 800px; - padding: 80px 20px; + height: 100vh; + width: 100%; + max-width: 500px; + } + + @media (min-width: 500px) { + body { + background-color: #f0f0f0; + } + + .non-logged-in-body { + background-color: ${(props) => props.theme.bgColor}; + } + + .general-layout { + background-color: ${(props) => props.theme.bgColor}; + } + + .general-layout__body { + background-color: ${(props) => props.theme.bgColor}; + } } `; diff --git a/src/_shared/colors/colors.ts b/src/_shared/colors/colors.ts index 3201ac6..93b9657 100644 --- a/src/_shared/colors/colors.ts +++ b/src/_shared/colors/colors.ts @@ -28,6 +28,7 @@ const colors = { gray400: "#ADB5BD", gray500: "#868E96", gray600: "#4A5056", + gray650: "#575860", gray700: "#3D4248", gray800: "#31363B", gray850: "#282932", diff --git a/src/_shared/icons/index.ts b/src/_shared/icons/index.ts index 750ed86..00664e0 100644 --- a/src/_shared/icons/index.ts +++ b/src/_shared/icons/index.ts @@ -1,3 +1,4 @@ export { default as social } from "./social"; export { default as icons } from "./basic"; export { default as avatar } from "./avatar"; +export { default as sidebar } from "./sidebar"; diff --git a/src/_shared/icons/sidebar.tsx b/src/_shared/icons/sidebar.tsx new file mode 100644 index 0000000..86eef8d --- /dev/null +++ b/src/_shared/icons/sidebar.tsx @@ -0,0 +1,122 @@ +import { useEffect, useState } from "react"; +import { colors } from "../colors"; +import { useRouter } from "@/hooks/useRouter"; + +interface IBasicProps { + [key: string]: () => JSX.Element; +} + +const sidebar: IBasicProps = { + mygooding: (): JSX.Element => { + const [color, setColor] = useState(colors.gray650); + const { currentPath } = useRouter(); + + const handleColor = () => { + if (currentPath === "/my/record") { + setColor(colors.white); + } else { + setColor(colors.gray650); + } + }; + useEffect(() => { + console.log("/my/record"); + handleColor(); + }); + return ( + <> + + + + + + ); + }, + record: (): JSX.Element => { + const [color, setColor] = useState(colors.gray650); + const { currentPath } = useRouter(); + + const handleColor = () => { + if (currentPath === "/record") { + setColor(colors.white); + } else { + setColor(colors.gray650); + } + }; + useEffect(() => { + console.log("/record"); + handleColor(); + }); + return ( + <> + + + + + + + + + + + + ); + }, + feed: (): JSX.Element => { + const [color, setColor] = useState(colors.gray650); + const { currentPath } = useRouter(); + + const handleColor = () => { + if (currentPath === "/feed") { + setColor(colors.white); + } else { + setColor(colors.gray650); + } + }; + useEffect(() => { + console.log("/feed"); + handleColor(); + }); + return ( + <> + + + + + + + ); + }, +}; + +export default sidebar; diff --git a/src/_shared/typography/fontWeight.ts b/src/_shared/typography/fontWeight.ts index 0528835..7e44a4c 100644 --- a/src/_shared/typography/fontWeight.ts +++ b/src/_shared/typography/fontWeight.ts @@ -1,7 +1,8 @@ const fontWeight = { - regular: "400", - semiBoldRegular: "500", - semiBold: "600", + regular: 400, + semiBoldRegular: 500, + semiBold: 600, + bold: 700, }; export default fontWeight; diff --git a/src/components/Button/Button.styled.tsx b/src/components/Button/Button.styled.tsx index 20f7924..6b7e646 100644 --- a/src/components/Button/Button.styled.tsx +++ b/src/components/Button/Button.styled.tsx @@ -1,6 +1,6 @@ import loadings from "@/_shared/animations/loadings"; import { colors } from "@/_shared/colors"; -import { fontSize } from "@/_shared/typography"; +import { fontSize, fontWeight } from "@/_shared/typography"; import styled, { css } from "styled-components"; interface ILayoutProps { @@ -28,7 +28,7 @@ export const Layout = styled.button` color: "#1C1D27"; font-family: "Pretendard"; font-style: normal; - font-weight: 700; + font-weight: ${fontWeight.bold}; font-size: ${fontSize.h3}; text-align: center; text-decoration: none; diff --git a/src/components/OnboardCard/OnboardCard.styled.tsx b/src/components/OnboardCard/OnboardCard.styled.tsx index 649d347..ff893c4 100644 --- a/src/components/OnboardCard/OnboardCard.styled.tsx +++ b/src/components/OnboardCard/OnboardCard.styled.tsx @@ -32,7 +32,7 @@ const hoverColor: CardProps = { export const Layout = styled.div` position: relative; - width: fit-content; + width: 90%; text-align: center; flex-direction: column; align-items: center; @@ -41,7 +41,6 @@ export const Layout = styled.div` display: flex; user-select: none; cursor: pointer; - height: 100px; justify-content: center; ${(props) => props.disabled @@ -65,10 +64,9 @@ export const Layout = styled.div` `; export const Title = styled.div` - min-width: 240px; - min-height: ${fontSize.h1}; + width: 100%; font-weight: ${fontWeight.semiBold}; font-size: ${fontSize.h1}; color: ${(props) => textColor[props.theme]}; - margin-top: 5px; + margin: 5px 10px 5px 10px; `; diff --git a/src/components/OnboardCard/OnboardCard.tsx b/src/components/OnboardCard/OnboardCard.tsx index 2f867e0..ddb6a55 100644 --- a/src/components/OnboardCard/OnboardCard.tsx +++ b/src/components/OnboardCard/OnboardCard.tsx @@ -4,6 +4,7 @@ import { useRecoilState } from "recoil"; import { useEffect, useState } from "react"; import { interestAtom } from "@/atoms/user"; import { InterestElement } from "@/types/user"; +import styled from "styled-components"; interface ICardProps extends ImageBoxElement { interestCode: string; @@ -11,6 +12,10 @@ interface ICardProps extends ImageBoxElement { disabled?: boolean; } +const OnboardCardContent = styled.div` + /* padding-top: 5%; */ +`; + const OnboardCard = ({ interestCode, icon, @@ -63,6 +68,7 @@ const OnboardCard = ({ className={className} disabled={disabled} > + {/* */} + {/* */} {title} diff --git a/src/components/Spinner/Spinner.styled.tsx b/src/components/Spinner/Spinner.styled.tsx index 3b94a6a..91648a8 100644 --- a/src/components/Spinner/Spinner.styled.tsx +++ b/src/components/Spinner/Spinner.styled.tsx @@ -1,12 +1,7 @@ import { motion } from "framer-motion"; import styled from "styled-components"; -export const Container = styled.div` - display: grid; - place-items: center; - min-height: 90vh; - align-content: center; -`; +export const Container = styled.div``; export const Svg = styled(motion.svg)` display: block; diff --git a/src/foundations/IconSocial/IconSocial.tsx b/src/foundations/IconSocial/IconSocial.tsx index 1578e8f..80985c9 100644 --- a/src/foundations/IconSocial/IconSocial.tsx +++ b/src/foundations/IconSocial/IconSocial.tsx @@ -1,4 +1,5 @@ import { Svg } from "./IconSocial.styled"; + interface IconSocialProps { icon: JSX.Element; } diff --git a/src/foundations/Typography/Typography.styled.ts b/src/foundations/Typography/Typography.styled.ts index e5bd6b8..cd1453a 100644 --- a/src/foundations/Typography/Typography.styled.ts +++ b/src/foundations/Typography/Typography.styled.ts @@ -5,6 +5,10 @@ interface ITextProps { [key: string]: string; } +interface ITextWeightProps { + [key: string]: number; +} + interface IText { type: string; textover?: string; @@ -21,7 +25,7 @@ const textSize: ITextProps = { body2: fontSize.body2, }; -const textWeight: ITextProps = { +const textWeight: ITextWeightProps = { h0: fontWeight.semiBold, h1: fontWeight.semiBold, h2: fontWeight.semiBold, @@ -37,10 +41,13 @@ const textWeight: ITextProps = { export const Text = styled.div` font-weight: ${(props) => textWeight[props.type]}; font-size: ${(props) => textSize[props.type]}; - ${(props) => props.textover === "true" ? css` - width: ${props.textoverwidth}; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - ` : ""} + ${(props) => + props.textover === "true" + ? css` + width: ${props.textoverwidth}; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + ` + : ""} `; diff --git a/src/layout/GeneralLayoutProps.tsx b/src/layout/GeneralLayout.tsx similarity index 77% rename from src/layout/GeneralLayoutProps.tsx rename to src/layout/GeneralLayout.tsx index 9f3d3f2..ff753b4 100644 --- a/src/layout/GeneralLayoutProps.tsx +++ b/src/layout/GeneralLayout.tsx @@ -42,14 +42,27 @@ const GeneralLayout: React.FC = ({ fetchUserProfile(); }, []); - if (!userProfile?.id) return ; + if (!userProfile?.id) { + return ( +
+
+ +
+
+ ); + } return (
{withSidebar ? ( - - ) : null} -
{children}
+ + ) : ( +
{children}
+ )}
); }; diff --git a/src/layout/LayoutProps.tsx b/src/layout/Layout.tsx similarity index 76% rename from src/layout/LayoutProps.tsx rename to src/layout/Layout.tsx index 54b203c..19234d5 100644 --- a/src/layout/LayoutProps.tsx +++ b/src/layout/Layout.tsx @@ -1,5 +1,4 @@ -import Switch from "@/components/Switch"; -import GeneralLayout from "./GeneralLayoutProps"; +import GeneralLayout from "./GeneralLayout"; interface LayoutProps { children: RouterElement; @@ -15,7 +14,7 @@ const Layout: React.FC = ({ children }) => { ) : ( children.element )} - + {/* */} ); }; diff --git a/src/layout/OnboardCardGrid/OnboardCardGrid.styled.tsx b/src/layout/OnboardCardGrid/OnboardCardGrid.styled.tsx index cb9bbf0..6e85e9a 100644 --- a/src/layout/OnboardCardGrid/OnboardCardGrid.styled.tsx +++ b/src/layout/OnboardCardGrid/OnboardCardGrid.styled.tsx @@ -2,9 +2,7 @@ import styled from "styled-components"; export const Layout = styled.section` display: grid; - width: 100%; - max-width: 940px; - grid-template-columns: 1fr 1fr 1fr; - gap: 20px; + grid-template-columns: repeat(2, 1fr); + grid-row-gap: 10px; justify-items: center; `; diff --git a/src/layout/Sidebar/Sidebar.styled.tsx b/src/layout/Sidebar/Sidebar.styled.tsx index 07af0bc..5a4df47 100644 --- a/src/layout/Sidebar/Sidebar.styled.tsx +++ b/src/layout/Sidebar/Sidebar.styled.tsx @@ -1,10 +1,22 @@ import { colors } from "@/_shared/colors"; +import { fontSize, fontWeight } from "@/_shared/typography"; import styled from "styled-components"; export const SideBar = styled.div` - width: 240px; + width: 500px; + height: 100vh; background-color: ${(props) => props.theme.bgColor}; box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; +`; + +export const SideBarContent = styled.div` + height: 100%; +`; + +export const SideBarFooter = styled.div` + background-color: ${colors.gray900}; `; export const SideBarTitle = styled.h3` @@ -15,20 +27,16 @@ export const SideBarTitle = styled.h3` `; export const SideBarMenu = styled.li` + width: 110px; + color: ${colors.gray650}; + font-size: ${fontSize.cpation3}; + font-weight: ${fontWeight.semiBoldRegular}; + text-align: center; list-style: none; padding: 18px; cursor: pointer; transition: 0.5s ease; - &:hover { - background-color: ${(props) => props.theme.hoverColor}; - } &.selected { - color: ${colors.green200}; - background-color: ${colors.green50}; + color: ${colors.white}; } `; - -export const SideBarFooter = styled.div` - padding: 36px 18px 24px; - font-size: 14px; -`; diff --git a/src/layout/Sidebar/Sidebar.tsx b/src/layout/Sidebar/Sidebar.tsx index ee25a9d..4f84114 100644 --- a/src/layout/Sidebar/Sidebar.tsx +++ b/src/layout/Sidebar/Sidebar.tsx @@ -3,18 +3,27 @@ import { SidebarElement } from "@/types/sidebar"; import { User } from "@/types/user"; import { SideBar, - SideBarTitle, SideBarMenu, SideBarFooter, + SideBarContent, } from "./Sidebar.styled"; import Typography from "@/foundations/Typography/Typography"; +import styled from "styled-components"; +import React from "react"; interface SidebarProps { + children: React.ReactNode; sidebarContent: SidebarElement[]; userProfile: User | null; } -const Sidebar: React.FC = ({ sidebarContent, userProfile }) => { +const SideBarList = styled.ul` + display: flex; + flex-direction: row; + justify-content: space-around; +`; + +const Sidebar: React.FC = ({ children, sidebarContent }) => { const { currentPath, routeTo } = useRouter(); const sidebarMenuClickHandler = (path: string) => { @@ -22,35 +31,31 @@ const Sidebar: React.FC = ({ sidebarContent, userProfile }) => { }; return ( - - Gooding -
    - {sidebarContent.map((element) => { - if (element.withSidebar) { - return ( - sidebarMenuClickHandler(element.path)} - > - - - ); - } else { - return null; - } - })} -
-
- {userProfile ? ( - - 님 환영합니다. - - ) : ( - 로그인이 필요합니다. - )} -
- + <> + + {children} + + + {sidebarContent.map((element) => { + if (element.withSidebar) { + return ( + sidebarMenuClickHandler(element.path)} + > + {element.image} + + + ); + } else { + return null; + } + })} + + + + ); }; diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx index 2aa2b93..8d9a113 100644 --- a/src/pages/Login/Login.tsx +++ b/src/pages/Login/Login.tsx @@ -1,4 +1,4 @@ -import { fontWeight } from "@/_shared/typography"; +import { fontSize, fontWeight } from "@/_shared/typography"; import { social } from "@/_shared/icons"; import IconSocial from "@/foundations/IconSocial/IconSocial"; import styled from "styled-components"; @@ -16,13 +16,19 @@ const ButtonBox = styled.div` gap: 1rem; `; +const LoginContent = styled.div` + padding-top: 60px; + height: 60%; +`; + const LoginTitle = styled.h1` text-align: center; `; const LoginDescription = styled.p` text-align: center; - font-weight: ${fontWeight.regular}; + font-weight: ${fontWeight.semiBold}; + font-size: ${fontSize.body1}; color: #a4a6aa; `; @@ -42,10 +48,12 @@ const Login = () => { ) : (
- Gooding - - 로그인하고 나만의 굳이데이 기록을 남겨보세요! - + + Gooding + + 굳잉과 함께 나만의 굳이데이 기록을 남겨보세요! + + diff --git a/src/pages/MyRecord/MyRecord.tsx b/src/pages/MyRecord/MyRecord.tsx new file mode 100644 index 0000000..3ace32d --- /dev/null +++ b/src/pages/MyRecord/MyRecord.tsx @@ -0,0 +1,54 @@ +import { userAtom } from "@/atoms/user"; +import Avatar from "@/components/Avatar/Avatar"; +import Button from "@/components/Button"; +import Typography from "@/foundations/Typography/Typography"; +import { useRecoilValue } from "recoil"; +import styled from "styled-components"; + +const MyRecordWrapper = styled.div``; + +const MyReocrdAvatar = styled.div``; + +const MyRecordProfile = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px; +`; + +const MyRecordProfileInfo = styled.div` + display: flex; + align-items: center; +`; + +const MyRecordProfileName = styled.div` + padding-left: 10px; +`; + +const MyRecordProfileButton = styled.div``; + +const MyRecord = () => { + const user = useRecoilValue(userAtom); + return ( + + + + + + + + + + + + + + + ); +}; + +export default MyRecord; diff --git a/src/pages/Onboarding/Onboarding.tsx b/src/pages/Onboarding/Onboarding.tsx index f46d67f..bf502ac 100644 --- a/src/pages/Onboarding/Onboarding.tsx +++ b/src/pages/Onboarding/Onboarding.tsx @@ -1,9 +1,10 @@ +import { fontSize, fontWeight } from "@/_shared/typography"; import { isDarkAtom } from "@/atoms/theme"; import { interestAtom, userAtom } from "@/atoms/user"; import Button from "@/components/Button"; import Input from "@/components/Input"; import { useRouter } from "@/hooks/useRouter"; -import CardGrid from "@/layout/OnboardCardGrid/OnboardCardGrid"; +import OnboardCardGrid from "@/layout/OnboardCardGrid/OnboardCardGrid"; import { InterestElement, User } from "@/types/user"; import { useState } from "react"; import { useRecoilState, useRecoilValue } from "recoil"; @@ -11,6 +12,23 @@ import styled from "styled-components"; type Status = "default" | "error" | "success"; +const OnboardingDescription = styled.div` + margin: 0px 10px; +`; + +const OnboardingHeader = styled.p` + font-size: ${fontSize.h2}; + font-weight: ${fontWeight.semiBold}; +`; + +const OnboardingCategory = styled.p` + font-size: ${fontSize.body1}; +`; + +const ButtonWarpper = styled.div` + margin: 0px 15px; +`; + const Onboarding = () => { const { routeTo } = useRouter(); const isDark = useRecoilValue(isDarkAtom); @@ -60,21 +78,25 @@ const Onboarding = () => { }; return ( <> -

- 굳잉에서 사용할 닉네임과 관심있는 활동 카테고리를

- 선택해주세요. -

-

관심있는 카테고리를 3가지 이상 선택해주세요.

- handleChange(event)} - value={userProfile?.name} - > + + + 굳잉에서 사용할 닉네임과

관심있는 활동 카테고리를 + 선택해주세요. + + + 관심있는 카테고리를 3가지 이상 선택해주세요. + + handleChange(event)} + value={userProfile?.name} + > + - { ]} /> -