32 | {code && code.length > 0 ? (
33 | <>
34 |
42 | {code}
43 |
44 | using {language ?? 'none'}
45 |
46 | ) : (
47 |
53 | );
54 | };
55 |
--------------------------------------------------------------------------------
/client/src/common/CodeBox/styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
5 | import { COMMON_SIZE, FONT_SIZE } from 'styles/sizes';
6 |
7 | export const codeBoxWrapperStyle = (backgroundColor: string) =>
8 | css({
9 | height: '100%',
10 | maxHeight: 480,
11 | backgroundColor,
12 | display: 'flex',
13 | flexDirection: 'column',
14 | border: `1px solid ${COLORS.BOX_BORDER}`,
15 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
16 | overflow: 'hidden',
17 |
18 | [getMediaQuery(MEDIA_QUERY.LG)]: {
19 | maxHeight: 'initial',
20 | },
21 | });
22 |
23 | export const codeBoxStyle = (fontSize: number) => ({
24 | fontSize,
25 | height: '100%',
26 | overflow: 'scroll',
27 | padding: `${COMMON_SIZE.CODE_BOX_PADDING}px 10px`,
28 | flex: 1,
29 | marginBottom: 10,
30 | });
31 |
32 | export const noCodeBoxStyle = css({
33 | height: '100%',
34 | flex: 1,
35 | display: 'flex',
36 | flexDirection: 'column',
37 | alignItems: 'center',
38 | justifyContent: 'center',
39 | });
40 |
41 | export const cryIconStyle = (innerColor: string) =>
42 | css({
43 | width: '30%',
44 | marginBottom: 10,
45 |
46 | ' path': {
47 | stroke: innerColor,
48 | },
49 | });
50 |
51 | export const cryTextStyle = (innerColor: string) =>
52 | css({
53 | fontSize: FONT_SIZE.LARGE,
54 | color: innerColor,
55 | fontWeight: 600,
56 | });
57 |
58 | export const lineNumberStyle = {
59 | width: '3rem',
60 | minWidth: '3rem',
61 | opacity: 0.7,
62 | };
63 |
64 | export const languageStyle = (textColor: string) =>
65 | css({
66 | fontSize: FONT_SIZE.MEDIUM,
67 | padding: 10,
68 | color: textColor,
69 | fontStyle: 'italic',
70 | textAlign: 'end',
71 | });
72 |
--------------------------------------------------------------------------------
/client/src/common/CommonLayout/Header.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
5 | import { COMMON_SIZE, FONT_SIZE } from 'styles/sizes';
6 |
7 | export const navigationBarWrapperStyle = css({
8 | width: '100%',
9 | zIndex: 2,
10 | backgroundColor: COLORS.WHITE,
11 | display: 'flex',
12 | flexDirection: 'column',
13 | alignItems: 'center',
14 | padding: `20px 30px 10px`,
15 | borderBottom: `2px solid ${COLORS.PRIMARY_DIM}`,
16 |
17 | '> button': {
18 | height: 30,
19 | padding: 0,
20 | },
21 |
22 | [getMediaQuery(MEDIA_QUERY.MD)]: {
23 | flexDirection: 'row',
24 | alignItems: 'center',
25 | justifyContent: 'space-between',
26 | padding: `20px 50px`,
27 | },
28 | });
29 |
30 | export const headerButtonWrapperStyle = css({
31 | display: 'flex',
32 | flexDirection: 'row',
33 | alignItems: 'center',
34 | justifyContent: 'center',
35 | marginTop: 20,
36 | width: '100%',
37 |
38 | [getMediaQuery(MEDIA_QUERY.MD)]: {
39 | marginTop: 0,
40 | width: 'fit-content',
41 | },
42 | });
43 |
44 | export const headerButtonStyle = (isSelected: boolean) =>
45 | css({
46 | width: 80,
47 | height: 30,
48 | transition: '0.2s linear',
49 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
50 | marginRight: 5,
51 | backgroundColor: isSelected ? COLORS.PRIMARY_DIM : COLORS.WHITE,
52 | position: 'relative',
53 |
54 | '> span': {
55 | color: COLORS.TEXT_1,
56 | fontSize: FONT_SIZE.SMALL,
57 | userSelect: 'none',
58 | },
59 |
60 | ':hover': {
61 | backgroundColor: COLORS.PRIMARY_DIM,
62 | },
63 |
64 | '&:last-of-type': {
65 | marginRight: 0,
66 | },
67 |
68 | [getMediaQuery(MEDIA_QUERY.MD)]: {
69 | width: 100,
70 |
71 | '> span': {
72 | fontSize: FONT_SIZE.MEDIUM,
73 | },
74 | },
75 | });
76 |
77 | export const newMessageAlertStyle = css({
78 | position: 'absolute',
79 | top: 2,
80 | right: 15,
81 | width: 10,
82 | height: 10,
83 | backgroundColor: COLORS.FAILURE,
84 | borderRadius: 5,
85 | });
86 |
--------------------------------------------------------------------------------
/client/src/common/CommonLayout/index.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { Outlet } from 'react-router-dom';
4 |
5 | import { Header } from './Header';
6 |
7 | import { footerStyle, mainWrapperStyle } from './styles';
8 |
9 | export const CommonLayout = () => {
10 | return (
11 | <>
12 |
48 |
51 | )}
52 |
28 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/client/src/common/DropdownInput/InterestsBox.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { COMMON_SIZE, FONT_SIZE } from 'styles/sizes';
5 |
6 | export const interestsBoxStyle = (topPosition: number) =>
7 | css({
8 | zIndex: 10,
9 | width: '100%',
10 | position: 'absolute',
11 | top: topPosition,
12 | right: 0,
13 | display: 'flex',
14 | flexDirection: 'column',
15 | justifyItems: 'center',
16 | alignItems: 'center',
17 | backgroundColor: COLORS.WHITE,
18 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
19 | border: `2px solid ${COLORS.PRIMARY_1}`,
20 | boxShadow: `0 5px 8px 3px ${COLORS.SHADOW}`,
21 | });
22 |
23 | export const interestBoxInnerStyle = css({
24 | width: '100%',
25 | borderBottom: `1px solid ${COLORS.PRIMARY_1}`,
26 |
27 | ':last-child': { border: 'none' },
28 | });
29 |
30 | export const interestButtonStyle = css({
31 | width: '100%',
32 | display: 'flex',
33 | flexDirection: 'column',
34 | justifyItems: 'center',
35 | alignItems: 'center',
36 | padding: `15px 10px`,
37 | transition: `0.1s linear`,
38 |
39 | ' span': {
40 | fontSize: FONT_SIZE.MEDIUM,
41 | color: COLORS.TEXT_1,
42 | userSelect: 'none',
43 | },
44 |
45 | ':hover': {
46 | backgroundColor: COLORS.PRIMARY_DIM,
47 | },
48 | });
49 |
--------------------------------------------------------------------------------
/client/src/common/DropdownInput/InterestsBox.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { Dispatch, SetStateAction, useCallback } from 'react';
4 |
5 | import { INTEREST_LIST } from 'utils/constants';
6 |
7 | import { interestBoxInnerStyle, interestButtonStyle, interestsBoxStyle } from './InterestsBox.styles';
8 |
9 | interface Props {
10 | setIsShown: Dispatch
29 | {interest.length ? interest : '관심분야'}
30 |
33 |
34 | {isShown && -
23 | {INTEREST_LIST.map((interest) => (
24 |
- 25 | 34 | 35 | ))} 36 |
-
24 | {itemNames.map((itemName) => (
25 |
- 26 | {itemName} 27 | 36 | 37 | ))} 38 |
-
19 | {STACK_LIST.map((stackName) => (
20 |
29 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/client/src/common/DropdownInput/index.ts:
--------------------------------------------------------------------------------
1 | export { InterestInput } from './InterestInput';
2 | export { TechStackInput } from './TechStackInput';
3 |
--------------------------------------------------------------------------------
/client/src/common/LoadingFallback.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { css } from '@emotion/react';
4 |
5 | import { COLORS } from 'styles/colors';
6 | import { FONT_SIZE } from 'styles/sizes';
7 |
8 | interface Props {
9 | text: string;
10 | className?: string;
11 | }
12 |
13 | export const LoadingFallback = ({ text, className }: Props) => {
14 | return (
15 |
30 | {techStack.length > 0 ? (
31 |
39 | {isShown &&
16 | 
17 | {text}
18 |
19 | );
20 | };
21 |
22 | const loadingFallbackStyle = css({
23 | width: '100%',
24 | height: '100%',
25 | display: 'flex',
26 | flexDirection: 'column',
27 | alignItems: 'center',
28 | justifyContent: 'center',
29 |
30 | ' img': {
31 | width: 100,
32 | height: 100,
33 | },
34 | });
35 |
36 | const loadingTextStyle = css({
37 | marginTop: 20,
38 | fontWeight: 600,
39 | color: COLORS.TEXT_1,
40 | fontSize: FONT_SIZE.LARGE,
41 | });
42 |
--------------------------------------------------------------------------------
/client/src/common/LoginLayout.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { useEffect } from 'react';
4 | import { Outlet, useNavigate } from 'react-router-dom';
5 | import { useRecoilValue } from 'recoil';
6 | import { css } from '@emotion/react';
7 |
8 | import { currentUserState } from 'store';
9 | import { LINK } from 'utils/constants';
10 |
11 | import { LOGO_SIZE, COMMON_SIZE } from 'styles/sizes';
12 | import { COLORS } from 'styles/colors';
13 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
14 |
15 | export const LoginLayout = () => {
16 | const currentUser = useRecoilValue(currentUserState);
17 | const nav = useNavigate();
18 |
19 | useEffect(() => {
20 | if (currentUser.id) nav(LINK.MAIN);
21 | }, [currentUser]);
22 |
23 | return (
24 |
17 | {text}
18 |
25 |
38 | );
39 | };
40 |
41 | const loginPageBackgroundStyle = css({
42 | backgroundImage: `url('./loginBG.jpg')`,
43 | backgroundSize: 'cover',
44 | backgroundRepeat: 'no-repeat',
45 | width: '100vw',
46 | height: '100vh',
47 | });
48 |
49 | const loginPageWrapperStyle = css({
50 | display: 'flex',
51 | justifyContent: 'center',
52 | alignItems: 'center',
53 | width: '100%',
54 | height: '100%',
55 | backdropFilter: `blur(15px) brightness(200%) contrast(50%)`,
56 | });
57 |
58 | const loginPageInnerStyle = css({
59 | display: 'flex',
60 | flexDirection: 'column',
61 | justifyContent: 'center',
62 | alignItems: 'center',
63 | width: '90vw',
64 | height: 'fit-content',
65 | padding: 20,
66 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
67 | backgroundColor: COLORS.WHITE,
68 | boxShadow: `0 0 10px 10px ${COLORS.SHADOW}`,
69 |
70 | [getMediaQuery(MEDIA_QUERY.SM)]: {
71 | width: 540,
72 | padding: 40,
73 | },
74 | });
75 |
76 | const loginPageHeaderImageStyle = css({
77 | marginBottom: 15,
78 | width: 160,
79 | });
80 |
--------------------------------------------------------------------------------
/client/src/common/MiniNavBar.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { css } from '@emotion/react';
4 |
5 | import { COLORS } from 'styles/colors';
6 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
7 |
8 | interface Props {
9 | children: JSX.Element;
10 | }
11 |
12 | export const MiniNavBar = ({ children }: Props) => {
13 | return
26 |
37 |
27 | 
34 |
36 |
34 | {children}
;
14 | };
15 |
16 | const miniNavBarWrapper = css({
17 | backgroundColor: COLORS.WHITE,
18 | width: '100%',
19 | padding: `20px 50px`,
20 | marginBottom: 20,
21 | display: 'flex',
22 | flexDirection: 'row',
23 | justifyContent: 'space-between',
24 | alignItems: 'center',
25 | boxShadow: `1px 3px 10px 1px ${COLORS.SHADOW}`,
26 |
27 | [getMediaQuery(MEDIA_QUERY.SM)]: {
28 | padding: `30px 80px`,
29 | },
30 | });
31 |
--------------------------------------------------------------------------------
/client/src/common/NavSubtitle.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { css } from '@emotion/react';
4 |
5 | import { COLORS } from 'styles/colors';
6 | import { FONT_SIZE } from 'styles/sizes';
7 |
8 | interface Props {
9 | text: string;
10 | }
11 |
12 | export const NavSubtitle = ({ text }: Props) => {
13 | return {text}
; 14 | }; 15 | 16 | const subtitleStyle = css({ 17 | lineHeight: '32px', 18 | color: COLORS.TEXT_1, 19 | fontWeight: 700, 20 | fontSize: FONT_SIZE.LARGE, 21 | }); 22 | -------------------------------------------------------------------------------- /client/src/common/Tooltip.tsx: -------------------------------------------------------------------------------- 1 | /** @jsxImportSource @emotion/react */ 2 | 3 | import { css } from '@emotion/react'; 4 | 5 | import { COLORS } from 'styles/colors'; 6 | import { COMMON_SIZE } from 'styles/sizes'; 7 | 8 | interface Props { 9 | text: string; 10 | } 11 | 12 | export const Tooltip = ({ text }: Props) => { 13 | return ( 14 |
15 |
19 | );
20 | };
21 |
22 | const tooltipWrapperStyle = css({
23 | position: 'absolute',
24 | width: 'fit-content',
25 | filter: `drop-shadow(0 0 3px ${COLORS.SHADOW})`,
26 | display: 'flex',
27 | flexDirection: 'column',
28 | alignItems: 'center',
29 | top: 32,
30 | });
31 |
32 | const tooltipInnerStyle = css({
33 | width: 'fit-content',
34 | whiteSpace: 'nowrap',
35 | backgroundColor: COLORS.WHITE,
36 | padding: 10,
37 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
38 | });
39 |
--------------------------------------------------------------------------------
/client/src/common/index.ts:
--------------------------------------------------------------------------------
1 | export { LoginLayout } from './LoginLayout';
2 | export { CommonLayout } from './CommonLayout';
3 | export { MiniNavBar } from './MiniNavBar';
4 | export { InterestInput, TechStackInput } from './DropdownInput';
5 | export { Button } from './Button';
6 | export { CodeBox } from './CodeBox';
7 | export { NavSubtitle } from './NavSubtitle';
8 | export { LoadingFallback } from './LoadingFallback';
9 | export { Tooltip } from './Tooltip';
10 |
--------------------------------------------------------------------------------
/client/src/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export { useClickOutside } from './useClickOutside';
2 | export { useCheckLogin } from './useCheckLogin';
3 | export { useLoadSettings } from './useLoadSettings';
4 | export { useValidateUsername } from './useValidateUsername';
5 | export { useShowTooltip } from './useShowTooltip';
6 | export { useSetSSE } from './useSetSSE';
7 |
--------------------------------------------------------------------------------
/client/src/hooks/useCheckLogin.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useLocation, useNavigate } from 'react-router-dom';
3 | import { useRecoilState } from 'recoil';
4 |
5 | import { fetchCheckLogin } from 'services';
6 | import { currentUserState } from 'store';
7 | import { LINK } from 'utils/constants';
8 |
9 | export function useCheckLogin() {
10 | const [currentUser, setCurrentUser] = useRecoilState(currentUserState);
11 | const location = useLocation();
12 | const nav = useNavigate();
13 |
14 | useEffect(() => {
15 | if (currentUser.id) return;
16 | fetchCheckLogin()
17 | .then((res) => {
18 | setCurrentUser({ id: res?.id ?? null });
19 | })
20 | .then(() => {
21 | if (location.pathname === LINK.LOGIN) nav(LINK.MAIN);
22 | })
23 | .catch(() => {
24 | setCurrentUser({ id: null });
25 | });
26 | }, [location]);
27 | }
28 |
--------------------------------------------------------------------------------
/client/src/hooks/useClickOutside.ts:
--------------------------------------------------------------------------------
1 | import { Dispatch, SetStateAction, useCallback, useEffect, useRef } from 'react';
2 |
3 | export function useClickOutside(setIsShown: Dispatch
16 | {text}
17 |
18 | 저는 이런 요구사항이 있어요
32 | 71 |
47 |
58 |
59 |
38 |
39 |
53 |
46 | {validationType === VALIDATION_RESULT.SUCCESS ?
48 |
51 | {isTooltipShown &&
54 |
57 |
63 |
64 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/client/src/pages/DetailPage/EditModeContainer/TopProfileEditor.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
5 | import { COMMON_SIZE, FONT_SIZE } from 'styles/sizes';
6 |
7 | export const profileBoxWrapperStyle = css({
8 | backgroundColor: COLORS.WHITE,
9 | border: `${COMMON_SIZE.LINE_WIDTH}px solid ${COLORS.BOX_BORDER}`,
10 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
11 | padding: `${COMMON_SIZE.PROFILE_BOX_PADDING_VERTICAL}px ${COMMON_SIZE.PROFILE_BOX_PADDING_HORIZONTAL}px`,
12 | gridRow: '4 / 5',
13 | gridColumn: '1',
14 |
15 | [getMediaQuery(MEDIA_QUERY.LG)]: {
16 | gridRow: '1',
17 | gridColumn: '2',
18 | },
19 | });
20 |
21 | export const subtitleStyle = css({
22 | fontSize: FONT_SIZE.LARGE,
23 | fontStyle: 'italic',
24 | fontWeight: 600,
25 | marginBottom: COMMON_SIZE.PROFILE_BOX_DD_MARGIN_BOTTOM,
26 | color: COLORS.TEXT_1,
27 |
28 | '::before': {
29 | content: `'#'`,
30 | marginRight: 10,
31 | },
32 | });
33 |
34 | export const interestsStyle = css({
35 | marginBottom: 10,
36 | });
37 |
--------------------------------------------------------------------------------
/client/src/pages/DetailPage/EditModeContainer/TopProfileEditor.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { Dispatch, SetStateAction } from 'react';
4 |
5 | import { InterestInput, TechStackInput } from 'common';
6 |
7 | import { interestsStyle, profileBoxWrapperStyle, subtitleStyle } from './TopProfileEditor.styles';
8 |
9 | interface Props {
10 | interest: string;
11 | setInterest: Dispatch저는 이런 분야에 관심이 있어요
20 |
50 |
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/client/src/pages/DetailPage/EditModeContainer/styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
4 |
5 | export const detailProfileWrapperStyle = css({
6 | display: 'grid',
7 | gridTemplateRows: 'repeat(6, minmax(0, 1fr))',
8 | gap: 30,
9 | paddingLeft: 30,
10 | paddingRight: 30,
11 |
12 | [getMediaQuery(MEDIA_QUERY.LG)]: {
13 | height: '69vh',
14 | gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
15 | gridTemplateRows: 'repeat(3, minmax(0, 1fr))',
16 | paddingLeft: 60,
17 | paddingRight: 60,
18 | },
19 | });
20 |
--------------------------------------------------------------------------------
/client/src/pages/DetailPage/EditModeContainer/useSetProfileEditor.ts:
--------------------------------------------------------------------------------
1 | import { useRef, useState } from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 |
4 | import { ProfileType } from 'types/profile';
5 | import { LINK } from 'utils/constants';
6 | import { fetchEditUserProfile } from '../services';
7 |
8 | export function useSetProfileEditor(profileData: ProfileType) {
9 | const [interest, setInterest] = useState(profileData.interest);
10 | const [techStack, setTechStack] = useState(profileData.techStack);
11 | const [language, setLanguage] = useState(profileData.language);
12 | const [code, setCode] = useState(profileData.code);
13 | const [username, setUsername] = useState(profileData.username);
14 | const workTypeRef = useRef저는 이런 요구사항이 있어요
16 |
17 |
29 | 필수 요구사항
18 |
19 | {requirements.map((requirement, index) => (
20 | // eslint-disable-next-line react/no-array-index-key
21 | # {requirement}
22 | ))}
23 |
24 | 작업 형태
25 | {workType} 26 |작업 선호 시간대
27 | {workTime} 28 |
14 | {INTEREST_KOR[interest]}
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/client/src/pages/DetailPage/ViewModeContainer/TechStackBadge.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { FONT_SIZE } from 'styles/sizes';
5 |
6 | export const techBadgeStyle = css({
7 | display: 'flex',
8 | position: 'relative',
9 | alignItems: 'center',
10 | justifyContent: 'center',
11 | width: '100%',
12 | height: '100%',
13 | borderRadius: 5,
14 | backgroundColor: COLORS.PRIMARY_1,
15 | padding: `0 10px`,
16 |
17 | ' span': {
18 | width: '100%',
19 | textAlign: 'center',
20 | color: COLORS.WHITE,
21 | lineHeight: `${FONT_SIZE.MEDIUM + 10}px`,
22 | verticalAlign: 'center',
23 | fontSize: FONT_SIZE.MEDIUM,
24 | fontWeight: 600,
25 | overflow: 'hidden',
26 | userSelect: 'none',
27 | textOverflow: 'ellipsis',
28 | whiteSpace: 'nowrap',
29 | },
30 | });
31 |
--------------------------------------------------------------------------------
/client/src/pages/DetailPage/ViewModeContainer/TechStackBadge.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { techBadgeStyle } from './TechStackBadge.styles';
4 |
5 | interface Props {
6 | techStack: string;
7 | }
8 |
9 | export const TechStackBadge = ({ techStack }: Props) => {
10 | return (
11 |
12 | {techStack}
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/client/src/pages/DetailPage/ViewModeContainer/TopProfileBox.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
5 | import { COMMON_SIZE, FONT_SIZE } from 'styles/sizes';
6 |
7 | export const profileBoxWrapperStyle = css({
8 | display: 'flex',
9 | flexDirection: 'column',
10 | backgroundColor: COLORS.WHITE,
11 | border: `${COMMON_SIZE.LINE_WIDTH}px solid ${COLORS.BOX_BORDER}`,
12 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
13 | padding: `${COMMON_SIZE.PROFILE_BOX_PADDING_VERTICAL}px ${COMMON_SIZE.PROFILE_BOX_PADDING_HORIZONTAL}px`,
14 | gridRow: '4 / 5',
15 | gridColumn: '1',
16 |
17 | [getMediaQuery(MEDIA_QUERY.LG)]: {
18 | gridRow: '1',
19 | gridColumn: '2',
20 | },
21 | });
22 |
23 | export const subtitleStyle = css({
24 | fontSize: FONT_SIZE.LARGE,
25 | height: FONT_SIZE.LARGE,
26 | fontStyle: 'italic',
27 | fontWeight: 600,
28 | marginBottom: COMMON_SIZE.PROFILE_BOX_DD_MARGIN_BOTTOM,
29 | color: COLORS.TEXT_1,
30 |
31 | '::before': {
32 | content: `'#'`,
33 | marginRight: 10,
34 | },
35 | });
36 |
37 | export const profileBoxInnerStyle = css({
38 | width: '100%',
39 | height: '100%',
40 | display: 'grid',
41 | gridTemplateColumns: 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)',
42 | gap: 10,
43 | });
44 |
--------------------------------------------------------------------------------
/client/src/pages/DetailPage/ViewModeContainer/TopProfileBox.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { InterestBadge } from './InterestBadge';
4 | import { TechStackBadge } from './TechStackBadge';
5 |
6 | import { subtitleStyle, profileBoxWrapperStyle, profileBoxInnerStyle } from './TopProfileBox.styles';
7 |
8 | interface Props {
9 | interest: string;
10 | techStacks: string[];
11 | }
12 |
13 | export const TopProfileBox = ({ interest, techStacks }: Props) => {
14 | return (
15 | 저는 이런 분야에 관심이 있어요
17 |
18 |
23 |
23 | {icon}
24 | {innerText} 로그인
25 |
26 |
27 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/client/src/pages/LoginPage/index.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { LoginButtonComponent } from './LoginButtonComponent';
4 | import { css } from '@emotion/react';
5 |
6 | import { COLORS } from 'styles/colors';
7 | import { FONT_SIZE } from 'styles/sizes';
8 |
9 | import { GithubIcon, GoogleIcon } from 'assets/svgs';
10 |
11 | export const LoginPage = () => {
12 | return (
13 | <>
14 | 나와 찰떡궁합인 팀원 찾기
15 |
19 |
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/client/src/pages/MainPage/NavBar.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
5 | import { FONT_SIZE } from 'styles/sizes';
6 |
7 | export const filterIconStyle = css({
8 | width: 30,
9 | height: 30,
10 | fill: COLORS.PRIMARY_2,
11 | display: 'none',
12 |
13 | [getMediaQuery(MEDIA_QUERY.MD)]: {
14 | display: 'block',
15 | },
16 | });
17 |
18 | export const likedCheckStyle = css({
19 | display: 'flex',
20 | alignItems: 'center',
21 | marginBottom: 10,
22 |
23 | ' input': {
24 | margin: 0,
25 | },
26 |
27 | ' label': {
28 | marginLeft: 5,
29 | color: COLORS.TEXT_1,
30 | fontSize: FONT_SIZE.SMALL,
31 | overflowWrap: 'break-word',
32 | },
33 |
34 | [getMediaQuery(MEDIA_QUERY.LG)]: {
35 | marginBottom: 0,
36 | marginRight: 10,
37 | },
38 | });
39 |
40 | export const inputWrapperStyle = css({
41 | margin: `0 15px`,
42 | flex: 1,
43 | display: 'flex',
44 | flexDirection: 'row',
45 | });
46 |
47 | export const dropdownWrapperStyle = css({
48 | display: 'flex',
49 | flexDirection: 'column',
50 | alignItems: 'flex-start',
51 | flex: 1,
52 |
53 | [getMediaQuery(MEDIA_QUERY.LG)]: {
54 | flexDirection: 'row',
55 | alignItems: 'center',
56 | marginRight: 20,
57 | },
58 | });
59 |
60 | export const searchButtonWrapperStyle = css({
61 | display: 'flex',
62 | flexDirection: 'column',
63 | alignItems: 'center',
64 | justifyContent: 'center',
65 |
66 | [getMediaQuery(MEDIA_QUERY.LG)]: {
67 | flexDirection: 'row',
68 | },
69 | });
70 |
71 | export const interestBoxStyle = css({
72 | width: '30vw',
73 | marginBottom: 10,
74 |
75 | [getMediaQuery(MEDIA_QUERY.LG)]: {
76 | width: '20vw',
77 | marginBottom: 0,
78 | marginRight: 20,
79 | },
80 | });
81 |
82 | export const techStackBoxStyle = css({
83 | width: '40vw',
84 | marginRight: 20,
85 |
86 | [getMediaQuery(MEDIA_QUERY.LG)]: {
87 | width: '30vw',
88 | },
89 | });
90 |
91 | export const searchButtonStyle = css({
92 | height: 30,
93 |
94 | ' svg': {
95 | height: 20,
96 | },
97 | });
98 |
--------------------------------------------------------------------------------
/client/src/pages/MainPage/Profile.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { COMMON_SIZE } from 'styles/sizes';
5 | import { getMediaQuery } from 'styles/mediaQuery';
6 |
7 | export const profileBoxStyle = css({
8 | position: 'relative',
9 | height: 540,
10 | display: 'grid',
11 | gridTemplateRows: '10fr 1fr',
12 | flexGrow: 1,
13 | padding: 20,
14 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
15 | backgroundColor: COLORS.WHITE,
16 | border: `${COMMON_SIZE.LINE_WIDTH}px solid ${COLORS.BOX_BORDER}`,
17 | gap: 20,
18 | textAlign: 'start',
19 |
20 | [getMediaQuery(COMMON_SIZE.PROFILELIST_TRIPLE_WIDTH)]: {
21 | maxWidth: 'calc((100% / 3) - 15px)',
22 | minWidth: 'calc((100% / 3) - 15px)',
23 | },
24 | [getMediaQuery(COMMON_SIZE.PROFILELIST_SINGLE_WIDTH, COMMON_SIZE.PROFILELIST_TRIPLE_WIDTH)]: {
25 | maxWidth: 'calc((100% / 2) - 5px)',
26 | },
27 | [getMediaQuery(0, COMMON_SIZE.PROFILELIST_SINGLE_WIDTH)]: {
28 | minWidth: 220,
29 | },
30 | });
31 |
32 | export const profileBoxBottomStyle = css({
33 | color: COLORS.TEXT_1,
34 | display: 'flex',
35 | height: 40,
36 | width: '100%',
37 | overflowX: 'hidden',
38 | overflowY: 'hidden',
39 | alignItems: 'center',
40 | justifyContent: 'space-between',
41 | gap: 10,
42 | });
43 |
44 | export const textWrapperStyle = css({
45 | display: 'flex',
46 | flexDirection: 'column',
47 | flex: 1,
48 | overflow: 'hidden',
49 | });
50 |
51 | export const rowTextWrapperStyle = css({
52 | width: '100%',
53 | display: 'flex',
54 | flexDirection: 'row',
55 | alignItems: 'center',
56 | justifyContent: 'flex-start',
57 | overflow: 'hidden',
58 |
59 | ' span': {
60 | display: 'inline-block',
61 | color: COLORS.TEXT_1,
62 | flex: 1,
63 | overflow: 'hidden',
64 | textOverflow: 'ellipsis',
65 | whiteSpace: 'nowrap',
66 | fontWeight: '600',
67 | marginRight: 10,
68 | },
69 | });
70 |
71 | export const bottomTextStyle = css({
72 | color: COLORS.TEXT_2,
73 | width: '100%',
74 | overflowX: 'scroll',
75 | overflowY: 'hidden',
76 | opacity: 0.6,
77 | fontWeight: '600',
78 | marginTop: 5,
79 | });
80 |
81 | export const favoriteButtonStyle = css({
82 | width: 40,
83 | height: 40,
84 | display: 'flex',
85 | justifyItems: 'center',
86 | alignItems: 'center',
87 |
88 | ' svg': {
89 | width: 30,
90 | height: 30,
91 | fill: COLORS.PRIMARY_2,
92 | },
93 | });
94 |
--------------------------------------------------------------------------------
/client/src/pages/MainPage/ProfileList.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { SingleProfileType } from 'types/profile';
4 | import Profile from './Profile';
5 |
6 | import { profileListStyle } from './styles';
7 |
8 | interface Props {
9 | profileData: Array
20 | {shorthandText}
21 |
23 |
15 | {profileData.map((data) => (
16 |
19 | );
20 | };
21 |
--------------------------------------------------------------------------------
/client/src/pages/MainPage/fetchFilteredData.ts:
--------------------------------------------------------------------------------
1 | import { API } from 'utils/constants';
2 | import { checkCustomCode, checkStatusCode } from 'utils/fetchUtils';
3 |
4 | export function fetchFilteredData(paramObject: URLSearchParams) {
5 | return fetch(`${process.env.REACT_APP_FETCH_URL}${API.PROFILE}?${paramObject}`, {
6 | credentials: 'include',
7 | })
8 | .then(checkStatusCode)
9 | .then(checkCustomCode)
10 | .catch((err) => {
11 | alert(err);
12 | });
13 | }
14 |
--------------------------------------------------------------------------------
/client/src/pages/MainPage/styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
5 | import { FONT_SIZE } from 'styles/sizes';
6 |
7 | export const profileListStyle = css({
8 | display: 'flex',
9 | flexWrap: 'wrap',
10 | alignItems: 'flex-start',
11 | justifyItems: 'center',
12 | gap: 10,
13 | flex: 1,
14 | padding: `10px 20px`,
15 | height: `calc(100% - 50px)`,
16 |
17 | [getMediaQuery(MEDIA_QUERY.SM)]: {
18 | padding: `15px 60px`,
19 | },
20 | });
21 |
22 | export const paginationStyle = css({
23 | fontSize: FONT_SIZE.MEDIUM,
24 | width: '100%',
25 | display: 'flex',
26 | alignItems: 'center',
27 | justifyContent: 'center',
28 | color: COLORS.TEXT_1,
29 | marginBottom: 10,
30 |
31 | ' .pagination': {
32 | width: 'fit-content',
33 | display: 'flex',
34 | justifyContent: 'center',
35 | marginTop: 10,
36 | border: `1px solid ${COLORS.BOX_BORDER}`,
37 | borderRadius: 5,
38 | overflow: 'hidden',
39 | },
40 |
41 | li: {
42 | width: 30,
43 | height: 30,
44 | borderLeft: `1px solid ${COLORS.BOX_BORDER}`,
45 | backgroundColor: COLORS.WHITE,
46 | display: 'flex',
47 | justifyContent: 'center',
48 | alignItems: 'center',
49 | transition: '0.1s linear',
50 |
51 | ':first-of-type': {
52 | border: 'none',
53 | },
54 |
55 | ':hover': {
56 | backgroundColor: COLORS.LIGHT,
57 | cursor: 'pointer',
58 | },
59 |
60 | ' a': {
61 | textDecoration: 'none',
62 | color: COLORS.PRIMARY_1,
63 | },
64 |
65 | '&.active': {
66 | backgroundColor: COLORS.PRIMARY_1,
67 | },
68 |
69 | '&.active a': {
70 | color: COLORS.WHITE,
71 | },
72 | },
73 | });
74 |
--------------------------------------------------------------------------------
/client/src/pages/MessagePage/MessageDetail/MessageDetailInner.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { useCallback } from 'react';
4 | import { useRecoilValue } from 'recoil';
5 | import { useNavigate } from 'react-router-dom';
6 |
7 | import { Button } from 'common';
8 | import { currentUserState } from 'store';
9 | import { MessageDetailType, SingleMessageType } from 'types/message';
10 | import { useManageMessageData, useScrollBottom } from '../hooks';
11 | import { MessageElement } from './MessageElement';
12 | import { MessageTopBar } from '../MessageTopBar';
13 |
14 | import { messageDetailInputWrapperStyle, messageDetailListStyle, messageInputStyle, goBackButtonStyle } from './styles';
15 |
16 | import { ArrowDownIcon } from 'assets/svgs';
17 |
18 | interface Props {
19 | promise: { read: () => MessageDetailType };
20 | userId: string;
21 | }
22 |
23 | export const MessageDetailInner = ({ promise, userId }: Props) => {
24 | const { id: currentUserID } = useRecoilValue(currentUserState);
25 | const { toUsername, contents } = promise.read();
26 | const { handleChangeInputValue, handleSubmitMessage, inputValue, currentMessageData } = useManageMessageData(
27 | currentUserID ?? '',
28 | contents,
29 | userId
30 | );
31 | const { messageDetailListRef } = useScrollBottom(currentMessageData);
32 | const nav = useNavigate();
33 |
34 | const handleClickBackButton = useCallback(() => {
35 | nav('/message');
36 | }, []);
37 |
38 | return (
39 | <>
40 | {toUsername}
46 | 47 |-
49 | {currentMessageData.map((data: SingleMessageType, idx: number) => (
50 | // eslint-disable-next-line react/no-array-index-key
51 |
17 | {messageData.content}
18 |
19 | {time}
20 | -
29 | {messageData.map((data: MessageMetaDataType) => (
30 |
- 31 | 34 | 35 | ))} 36 |
{children}
;
14 | };
15 |
16 | export const messageTopBarStyle = css({
17 | padding: `10px 10px ${COMMON_SIZE.PROFILE_BOX_PADDING_VERTICAL}px`,
18 | fontSize: FONT_SIZE.LARGE,
19 | borderBottom: `2px solid ${COLORS.BOX_BORDER}`,
20 | display: 'flex',
21 | flexDirection: 'row',
22 | alignItems: 'center',
23 | justifyContent: 'flex-start',
24 | color: COLORS.TEXT_1,
25 | backgroundColor: COLORS.WHITE,
26 | zIndex: 2,
27 | });
28 |
--------------------------------------------------------------------------------
/client/src/pages/MessagePage/hooks/index.ts:
--------------------------------------------------------------------------------
1 | export { useManageMessageData } from './useManageMessageData';
2 | export { useScrollBottom } from './useScrollBottom';
3 |
--------------------------------------------------------------------------------
/client/src/pages/MessagePage/hooks/useManageMessageData.ts:
--------------------------------------------------------------------------------
1 | import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
2 | import { useRecoilState } from 'recoil';
3 |
4 | import { newMessageState } from 'store';
5 | import { SingleMessageType } from 'types/message';
6 | import { fetchSendMessage } from '../services';
7 |
8 | export function useManageMessageData(currentUserID: string, contents: SingleMessageType[], userId: string) {
9 | const [inputValue, setInputValue] = useState
41 |
42 |
43 |
44 |
46 |
50 |
52 |
53 |
54 | );
55 | };
56 |
57 | export { MessageDetail };
58 |
--------------------------------------------------------------------------------
/client/src/pages/MessagePage/services/fetchMessageDetail.ts:
--------------------------------------------------------------------------------
1 | import { MessageDetailType } from 'types/message';
2 | import { API, FETCH_STATUS } from 'utils/constants';
3 | import { checkCustomCode, checkStatusCode } from 'utils/fetchUtils';
4 |
5 | export function fetchMessageDetail(userId: string | null) {
6 | if (!userId) throw new Error('존재하지 않는 아이디입니다');
7 | let status = FETCH_STATUS.PENDING;
8 | let result: Error | MessageDetailType;
9 |
10 | const suspender = fetch(`${process.env.REACT_APP_FETCH_URL}${API.MESSAGE_DETAIL}${userId}`, {
11 | credentials: 'include',
12 | method: 'get',
13 | headers: { 'Content-Type': 'application/json' },
14 | })
15 | .then(checkStatusCode)
16 | .then(checkCustomCode)
17 | .then(
18 | (res) => {
19 | status = FETCH_STATUS.SUCCESS;
20 | result = res;
21 | },
22 | (err) => {
23 | status = FETCH_STATUS.ERROR;
24 | result = err;
25 | }
26 | );
27 |
28 | return {
29 | read: () => {
30 | if (status === FETCH_STATUS.PENDING) throw suspender;
31 | if (status === FETCH_STATUS.ERROR) throw result;
32 | return result as unknown as MessageDetailType;
33 | },
34 | };
35 | }
36 |
--------------------------------------------------------------------------------
/client/src/pages/MessagePage/services/fetchMessageList.ts:
--------------------------------------------------------------------------------
1 | import { MessageMetaDataType } from 'types/message';
2 | import { API, FETCH_STATUS } from 'utils/constants';
3 | import { checkCustomCode, checkStatusCode } from 'utils/fetchUtils';
4 |
5 | export function fetchMessageList() {
6 | let status = FETCH_STATUS.PENDING;
7 | let result: Error | MessageMetaDataType[];
8 |
9 | const suspender = fetch(`${process.env.REACT_APP_FETCH_URL}${API.MESSAGE_LIST}`, {
10 | credentials: 'include',
11 | method: 'get',
12 | })
13 | .then(checkStatusCode)
14 | .then(checkCustomCode)
15 | .then(
16 | (res) => {
17 | status = FETCH_STATUS.SUCCESS;
18 | result = res;
19 | },
20 | (err) => {
21 | status = FETCH_STATUS.ERROR;
22 | result = err;
23 | }
24 | );
25 |
26 | return {
27 | read: () => {
28 | if (status === FETCH_STATUS.PENDING) throw suspender;
29 | if (status === FETCH_STATUS.ERROR) throw result;
30 | return result as unknown as MessageMetaDataType[];
31 | },
32 | };
33 | }
34 |
--------------------------------------------------------------------------------
/client/src/pages/MessagePage/services/fetchSendMessage.ts:
--------------------------------------------------------------------------------
1 | import { API } from 'utils/constants';
2 | import { checkStatusCode, checkCustomCode } from 'utils/fetchUtils';
3 |
4 | export function fetchSendMessage(userId: string, content: string) {
5 | return fetch(`${process.env.REACT_APP_FETCH_URL}${API.MESSAGE_SEND}`, {
6 | credentials: 'include',
7 | method: 'post',
8 | headers: { 'Content-Type': 'application/json' },
9 | body: JSON.stringify({
10 | to: userId,
11 | content,
12 | }),
13 | })
14 | .then(checkStatusCode)
15 | .then(checkCustomCode);
16 | }
17 |
--------------------------------------------------------------------------------
/client/src/pages/MessagePage/services/index.ts:
--------------------------------------------------------------------------------
1 | export { fetchMessageList } from './fetchMessageList';
2 | export { fetchMessageDetail } from './fetchMessageDetail';
3 | export { fetchSendMessage } from './fetchSendMessage';
4 |
--------------------------------------------------------------------------------
/client/src/pages/MessagePage/styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { getMediaQuery, MEDIA_QUERY } from 'styles/mediaQuery';
5 | import { COMMON_SIZE } from 'styles/sizes';
6 |
7 | export const messagePageWrapperStyle = css({
8 | height: '69vh',
9 | paddingLeft: 30,
10 | paddingRight: 30,
11 | display: 'grid',
12 | gridTemplateColumns: 'repeat(1, minmax(0, 1fr))',
13 | gap: 30,
14 |
15 | [getMediaQuery(MEDIA_QUERY.LG)]: {
16 | gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
17 | },
18 | });
19 |
20 | export const messagePageSectionStyle = css({
21 | width: '100%',
22 | height: '100%',
23 | backgroundColor: COLORS.WHITE,
24 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
25 | border: `1px solid ${COLORS.BOX_BORDER}`,
26 | padding: `${COMMON_SIZE.PROFILE_BOX_PADDING_VERTICAL}px ${COMMON_SIZE.PROFILE_BOX_PADDING_HORIZONTAL}px`,
27 | gridColumn: '1 / 2',
28 | gridRow: '1 / 2',
29 | display: 'flex',
30 | flexDirection: 'column',
31 | overflow: 'hidden',
32 |
33 | [getMediaQuery(MEDIA_QUERY.LG)]: {
34 | gridColumn: 'initial',
35 | gridRow: 'initial',
36 | },
37 | });
38 |
--------------------------------------------------------------------------------
/client/src/pages/RegisterPage/fetchRequestRegistration.ts:
--------------------------------------------------------------------------------
1 | import { API } from 'utils/constants';
2 | import { checkCustomCode, checkStatusCode } from 'utils/fetchUtils';
3 |
4 | interface registerParams {
5 | username: string;
6 | interest: string;
7 | techStack: Array대화 목록
45 |5분이면 충분해요.
39 |파트너를 찾기 위한 정보를 알려주세요!
40 |
22 |
23 |
26 |
27 | {validationType !== VALIDATION_RESULT.NULL && (
28 | {VALIDATION_INFO[validationType]}
29 | )}
30 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/client/src/pages/SettingsPage/CodeBoxSelector.styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { COMMON_SIZE, FONT_SIZE } from 'styles/sizes';
5 |
6 | export const codeBoxListStyle = css({
7 | display: 'flex',
8 | flexDirection: 'row',
9 | width: '100%',
10 | overflowX: 'scroll',
11 | overflowY: 'hidden',
12 | });
13 |
14 | export const codeListElementStyle = (isSelected: boolean) =>
15 | css({
16 | textAlign: 'start',
17 | padding: 0,
18 | height: 'fit-content',
19 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
20 | marginRight: 10,
21 | border: isSelected ? `3px solid ${COLORS.PRIMARY_1}` : `1px solid ${COLORS.BOX_BORDER}`,
22 | display: 'flex',
23 | flexDirection: 'column',
24 | alignItems: 'center',
25 |
26 | '> span': {
27 | marginTop: 10,
28 | marginBottom: 5,
29 | fontSize: FONT_SIZE.MEDIUM,
30 | fontStyle: 'italic',
31 | color: COLORS.TEXT_2,
32 | },
33 | });
34 |
--------------------------------------------------------------------------------
/client/src/pages/SettingsPage/CodeBoxSizeSelector.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { useRecoilValue } from 'recoil';
4 |
5 | import { settingsState } from 'store';
6 | import { MiniCodeBox } from './MiniCodeBox';
7 | import { CODE_EXAMPLE, CODE_SIZE, THEME_LIST } from 'utils/constants';
8 |
9 | import { codeBoxListStyle, codeListElementStyle } from './CodeBoxSelector.styles';
10 |
11 | interface Props {
12 | onSelect: (index: number) => void;
13 | }
14 |
15 | export const CodeBoxSizeSelector = ({ onSelect }: Props) => {
16 | const settings = useRecoilValue(settingsState);
17 | const { style } = THEME_LIST[settings.codeBoxTheme];
18 |
19 | return (
20 |
21 | {CODE_SIZE.map((option, index) => (
22 |
31 | ))}
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/client/src/pages/SettingsPage/CodeBoxThemeSelector.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { useRecoilValue } from 'recoil';
4 |
5 | import { settingsState } from 'store';
6 | import { MiniCodeBox } from './MiniCodeBox';
7 | import { CODE_EXAMPLE, CODE_SIZE, THEME_LIST } from 'utils/constants';
8 |
9 | import { codeBoxListStyle, codeListElementStyle } from './CodeBoxSelector.styles';
10 |
11 | interface Props {
12 | onSelect: (index: number) => void;
13 | }
14 |
15 | export const CodeBoxThemeSelector = ({ onSelect }: Props) => {
16 | const settings = useRecoilValue(settingsState);
17 | const { size } = CODE_SIZE[settings.codeBoxSize];
18 |
19 | return (
20 |
21 | {THEME_LIST.map((option, index) => (
22 |
31 | ))}
32 |
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/client/src/pages/SettingsPage/MiniCodeBox.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 |
3 | import { CSSProperties } from 'react';
4 | import SyntaxHighlighter from 'react-syntax-highlighter';
5 |
6 | import { COMMON_SIZE } from 'styles/sizes';
7 |
8 | interface Props {
9 | code: string;
10 | style: { [key: string]: CSSProperties };
11 | fontSize: number;
12 | }
13 |
14 | export const MiniCodeBox = ({ code, style, fontSize }: Props) => {
15 | return (
16 |
43 |
55 |
51 |
53 | {isTooltipShown &&
57 |
72 |
73 | );
74 | };
75 |
--------------------------------------------------------------------------------
/client/src/pages/SettingsPage/styles.ts:
--------------------------------------------------------------------------------
1 | import { css } from '@emotion/react';
2 |
3 | import { COLORS } from 'styles/colors';
4 | import { COMMON_SIZE, FONT_SIZE } from 'styles/sizes';
5 |
6 | export const settingsBackgroundStyle = css({
7 | display: 'flex',
8 | height: '69vh',
9 | paddingLeft: 30,
10 | paddingRight: 30,
11 | });
12 |
13 | export const settingsWrapperStyle = css({
14 | width: '100%',
15 | height: '100%',
16 | borderRadius: COMMON_SIZE.BORDER_RADIUS,
17 | border: `${COMMON_SIZE.LINE_WIDTH}px solid ${COLORS.BOX_BORDER}`,
18 | backgroundColor: COLORS.WHITE,
19 | overflowX: 'hidden',
20 | overflowY: 'scroll',
21 | });
22 |
23 | export const settingsListStyle = css({
24 | padding: 20,
25 | borderBottom: `${COMMON_SIZE.LINE_WIDTH}px solid ${COLORS.BOX_BORDER}`,
26 |
27 | ' h3': {
28 | fontWeight: 600,
29 | fontSize: FONT_SIZE.LARGE,
30 | color: COLORS.TEXT_1,
31 | marginBottom: 20,
32 | },
33 |
34 | ':last-of-type': {
35 | border: 'none',
36 | },
37 | });
38 |
39 | export const subtitleWrapperStyle = css({
40 | display: 'flex',
41 | flexDirection: 'row',
42 | alignItems: 'center',
43 | position: 'relative',
44 | });
45 |
46 | export const tooltipIconStyle = css({
47 | display: 'flex',
48 | flexDirection: 'row',
49 | alignItems: 'center',
50 | justifyContent: 'center',
51 | position: 'relative',
52 | width: 20,
53 | height: 20,
54 | marginLeft: 10,
55 |
56 | ' svg': {
57 | width: 20,
58 | height: 20,
59 | fill: COLORS.BOX_BORDER,
60 | },
61 | });
62 |
--------------------------------------------------------------------------------
/client/src/pages/index.ts:
--------------------------------------------------------------------------------
1 | export { MainPage } from './MainPage';
2 | export { DetailPage } from './DetailPage';
3 | export { SettingsPage } from './SettingsPage';
4 | export { MessagePage, MessageDetail } from './MessagePage';
5 |
6 | export { LoginPage } from './LoginPage';
7 | export { RegisterPage } from './RegisterPage';
8 |
--------------------------------------------------------------------------------
/client/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// -
58 |
-
59 |
코드 뷰어 테마
60 |61 |
62 | -
63 |
코드 글자 크기
64 |65 |
66 | -
67 |
화면 밝기
68 | {/* TODO: 화면 밝기 토글 (다크모드 라이트모드) */} 69 |
70 |