검색결과 없음
7 | 팀원 아이디를 검색해 팀으로 초대하세요
8 | 아직 키워드가 없어요
7 | 키워드를 생성해 보세요
8 | 이슈에 대한 피드백이 없어요
7 | 첫번째 피드백을 남겨주세요
8 | 아직 팀원소개서 컨텐츠가 없어요
7 | 팀이나 이슈를 추가해보세요
8 | 아직 생성한 너가소개서가 없어요
11 | 첫 너가소개서, 만들어 볼까요?
12 |
13 | 아직 픽할 {text}이 없어요
14 | {text}을 받아보세요!
15 | {title}
13 |
14 | 
15 |
16 |
10 |
13 | ))}
14 | 답변이 전달되었어요
16 | 내 너가소개서도 받아보세요.
17 |
18 |
21 | {title}
19 | {content}
20 | 픽한 {pickTarget}이 없어요
15 | {isMyPage && (
16 | 18 | 마음에 드는 {pickTarget}을 픽해보세요 19 |
19 | 
20 |
21 | {profileName}
22 | {content}
18 | {title}
19 |
20 |
22 |
24 | {children}
25 | 22 |
14 | {username}님 환영합니다!
15 | 회원가입이 완료되었어요
16 |
17 | 이제 내 너가소개서를 받아보세요
18 |아직 답변이 없어요.
16 | 링크를 공유하고 답변을 받아보세요.
17 |
24 |
19 |
20 |
24 |
25 |
28 |
31 |
32 |
33 | ))}
34 |
35 | );
36 | }
37 |
38 | export default NSSPickSkeleton;
39 |
--------------------------------------------------------------------------------
/src/presentation/pages/Home/MyPage/TeamPick/style.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | import { COLOR } from '@styles/common/color';
4 | import { FONT_STYLES } from '@styles/common/font-style';
5 |
6 | export const StMyTeamPick = styled.div`
7 | header {
8 | background-color: ${COLOR.GRAY_1};
9 | height: 76px;
10 | padding: 18px 20px;
11 | ${FONT_STYLES.R_14_BODY};
12 | color: ${COLOR.GRAY_6};
13 | line-height: 140%;
14 |
15 | span {
16 | color: ${COLOR.CORAL_MAIN};
17 | }
18 | }
19 | `;
20 |
21 | export const StMyTeamList = styled.div`
22 | & > div:first-child {
23 | padding: 24px 23px 0 23px;
24 | }
25 |
26 | & > div:last-child {
27 | padding: 37px 23px 0 23px;
28 | color: ${COLOR.GRAY_8};
29 | ${FONT_STYLES.SB_18_TITLE};
30 | }
31 | `;
32 |
33 | export const StMyTeamPickList = styled.div`
34 | padding: 0 20px;
35 | `;
36 |
--------------------------------------------------------------------------------
/src/presentation/pages/Login/index.tsx:
--------------------------------------------------------------------------------
1 | import { KAKAO_AUTH_URL } from './OAuth';
2 | import { StLogin, StLoginImg, StLoginButton, StTitle, StNoticeWrapper } from './style';
3 | import { icKakao } from '@assets/icons/index';
4 | import { imgLogo, imgLoginCharacter } from '@assets/images/index';
5 |
6 | export default function Login() {
7 | const loginWithKakao = () => {
8 | window.location.href = KAKAO_AUTH_URL;
9 | };
10 |
11 | return (
12 | 18 | 나의 소개서, 너가소개서 19 |
19 | {issueMembers.slice(0, MAX_IMAGE_NUM).map(({ id, profileImage }) => (
20 |
21 | ))}
22 |
23 | {length <= MAX_IMAGE_NUM ? null : +{length - MAX_IMAGE_NUM}}
24 |
19 |
22 |
27 |
29 |
33 |
34 | ))}
35 | {title}
20 | {description &&
22 |
23 |
24 |
25 |
18 | {name}
19 | ·
20 | 너를 {relationship}
21 |
22 | {content}
23 |
24 | {
27 | return;
28 | }}
29 | />
30 |
31 |
26 | {issueList.map((issue) => (
27 | onIssueClick(issue.teamID, issue.issueNumber)}
30 | {...issue}
31 | />
32 | ))}
33 |
34 | );
35 | }
36 |
37 | export default IssueCardList;
38 |
--------------------------------------------------------------------------------
/src/presentation/components/FeedbackCard/ExpandableList/index.tsx:
--------------------------------------------------------------------------------
1 | import { FeedbackDetail } from '@api/types/team';
2 | import ExpandListButton from '@components/common/ExpandListButton';
3 | import { useState } from 'react';
4 | import FeedbackCardList from '../List';
5 |
6 | type FeedbackCardExpandableListProps = {
7 | feedbacks: FeedbackDetail[];
8 | firstShown?: number;
9 | };
10 |
11 | function FeedbackCardExpandableList(props: FeedbackCardExpandableListProps) {
12 | const { feedbacks, firstShown = 2 } = props;
13 | const [isExpanded, setIsExpanded] = useState(false);
14 | return (
15 | <>
16 |
22 |
25 | ))}
26 |
29 |
30 |
33 |
34 |
37 |
40 |
41 |
42 | ))}
43 |
44 | );
45 | }
46 |
47 | export default TSSPickSkeleton;
48 |
--------------------------------------------------------------------------------
/src/assets/icons/ic_setting.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/application/utils/browser.ts:
--------------------------------------------------------------------------------
1 | const getBrowser = () => {
2 | const agent = navigator.userAgent.toLowerCase();
3 | if (agent.indexOf('chrome') !== -1) return 'Chrome';
4 | if (agent.indexOf('opera') !== -1) return 'Opera';
5 | if (agent.indexOf('staroffice') !== -1) return 'Star Office';
6 | if (agent.indexOf('webtv') !== -1) return 'WebTV';
7 | if (agent.indexOf('beonex') !== -1) return 'Beonex';
8 | if (agent.indexOf('chimera') !== -1) return 'Chimera';
9 | if (agent.indexOf('netpositive') !== -1) return 'NetPositive';
10 | if (agent.indexOf('phoenix') !== -1) return 'Phoenix';
11 | if (agent.indexOf('firefox') !== -1) return 'Firefox';
12 | if (agent.indexOf('safari') !== -1) return 'Safari';
13 | if (agent.indexOf('skipstone') !== -1) return 'SkipStone';
14 | if (agent.indexOf('netscape') !== -1) return 'Netscape';
15 | if (agent.indexOf('mozilla/5.0') !== -1) return 'Mozilla';
16 | if (agent.indexOf('msie') !== -1) return 'Internet Explorer';
17 | else return 'unknown browser';
18 | };
19 |
20 | export const checkBrowser = (...args: string[]) => {
21 | const currentBrowser = getBrowser();
22 | return args.includes(currentBrowser);
23 | };
24 |
--------------------------------------------------------------------------------
/src/presentation/components/common/Skeleton/TemplateList/style.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | import StSkeletonItem from '../style';
4 | import { COLOR } from '@styles/common/color';
5 |
6 | export const StTemplateListSkeleton = styled.div`
7 | margin-top: 52px;
8 | display: flex;
9 | flex-direction: column;
10 | padding: 0 20px;
11 | width: 100%;
12 | `;
13 |
14 | export const StText = styled(StSkeletonItem)`
15 | height: 16px;
16 | background-color: ${COLOR.GRAY_3};
17 | `;
18 |
19 | export const StShortText = styled(StText)`
20 | width: 164px;
21 | margin-bottom: 8px;
22 | `;
23 |
24 | export const StLongText = styled(StText)`
25 | width: 219px;
26 | margin-bottom: 25px;
27 | `;
28 |
29 | export const StCardContainer = styled.div`
30 | display: flex;
31 | flex-wrap: nowrap;
32 | width: max-content;
33 | gap: 8px;
34 | padding-left: 20px;
35 | margin-left: -20px;
36 | margin-bottom: 41px;
37 | `;
38 |
39 | export const StCard = styled(StSkeletonItem)`
40 | box-sizing: border-box;
41 | width: 136px;
42 | height: 156px;
43 | border-radius: 17px;
44 | background-color: ${COLOR.GRAY_2};
45 | overflow: hidden;
46 | `;
47 |
--------------------------------------------------------------------------------
/src/presentation/components/common/ImageUpload/style.ts:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components';
3 |
4 | export const StThumbnail = styled.img<{ styles: React.CSSProperties }>`
5 | object-fit: cover;
6 | width: ${(props) => props.styles.width};
7 | height: ${(props) => props.styles.height};
8 | border-radius: ${(props) => props.styles.borderRadius ?? 0};
9 | `;
10 |
11 | export const StImageUpload = styled.div<{ styles: React.CSSProperties }>`
12 | width: ${(props) => props.styles.width};
13 | cursor: pointer;
14 | position: relative;
15 | `;
16 |
17 | export const StThumbnailWrapper = styled.div<{ styles: React.CSSProperties }>`
18 | width: ${(props) => props.styles.width};
19 | height: ${(props) => props.styles.height};
20 | border-radius: ${(props) => props.styles.borderRadius ?? 0};
21 | `;
22 |
23 | export const StDefaultChildren = styled.img<{ styles: React.CSSProperties }>`
24 | bottom: ${(props) => props.styles.bottom ?? 0};
25 | right: ${(props) => props.styles.right ?? 0};
26 | width: ${(props) => props.styles.width};
27 | height: ${(props) => props.styles.height ?? props.styles.width};
28 | position: absolute;
29 | `;
30 |
--------------------------------------------------------------------------------
/src/presentation/pages/OAuthRedirectHandler/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 | import { useMutation } from 'react-query';
4 |
5 | import { useLoginUser } from '@hooks/useLoginUser';
6 | import { api } from '@api/index';
7 | import { UnauthorizedError } from '@api/types/errors';
8 |
9 | const OAuthRedirectHandler = () => {
10 | const navigate = useNavigate();
11 | const { saveLoginUser } = useLoginUser();
12 |
13 | const { mutate: login } = useMutation(
14 | (authorizationCode: string) => api.loginUserService.postLogin(authorizationCode),
15 | {
16 | useErrorBoundary: true,
17 | onSuccess: (data) => {
18 | saveLoginUser(data);
19 | if (data.isJoined) navigate('/home');
20 | else navigate('/join');
21 | },
22 | },
23 | );
24 |
25 | useEffect(() => {
26 | const authorizationCode = new URL(window.location.href).searchParams.get('code') ?? '';
27 | if (authorizationCode.length) login(authorizationCode);
28 | else throw new UnauthorizedError('카카오 인가 코드 조회 실패');
29 | }, []);
30 |
31 | return <>;
32 | };
33 |
34 | export default OAuthRedirectHandler;
35 |
--------------------------------------------------------------------------------
/src/presentation/components/common/SelectBox/style.ts:
--------------------------------------------------------------------------------
1 | import { COLOR } from '@styles/common/color';
2 | import styled from 'styled-components';
3 |
4 | export const StSelectBoxWrapper = styled.div`
5 | position: relative;
6 | cursor: pointer;
7 | `;
8 |
9 | export const StSelectBoxHeader = styled.div`
10 | display: flex;
11 | align-items: center;
12 | justify-content: space-between;
13 | padding: 0 16px;
14 | height: 52px;
15 | border-radius: 16px;
16 | color: ${COLOR.GRAY_6};
17 | border: 1px solid ${COLOR.GRAY_3};
18 | z-index: 1;
19 | `;
20 |
21 | export const StSelectBoxItem = styled.div<{ selected: boolean }>`
22 | height: 52px;
23 | padding: 0 16px;
24 | display: flex;
25 | align-items: center;
26 | color: ${({ selected }) => (selected ? COLOR.GRAY_6 : COLOR.GRAY_5)};
27 | background-color: white;
28 | `;
29 |
30 | export const StSelectBoxTail = styled.div`
31 | position: absolute;
32 | top: 0;
33 | left: 0;
34 | width: 100%;
35 | padding-top: 52px;
36 | border-radius: 16px;
37 | border: 2px solid ${COLOR.CORAL_MAIN};
38 | z-index: 2;
39 | & div:last-child {
40 | border-bottom-left-radius: 16px;
41 | border-bottom-right-radius: 16px;
42 | }
43 | `;
44 |
--------------------------------------------------------------------------------
/src/presentation/pages/Team/Main/MemberPopup/index.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router-dom';
2 |
3 | import { TeamMemberNoneId } from '@api/types/team';
4 | import { MAX_TEAM_MEMBER } from '@utils/constant';
5 | import { StTeamMemberPopup, StWholeButton } from './style';
6 | import { icWhole } from '@assets/icons';
7 | import { imgEmptyProfile } from '@assets/images';
8 |
9 | interface TeamMemberPopupProps {
10 | members: TeamMemberNoneId[];
11 | teamID: number;
12 | }
13 |
14 | function TeamMemberPopup(props: TeamMemberPopupProps) {
15 | const { members, teamID } = props;
16 | const slicedMemberList = members.slice(0, MAX_TEAM_MEMBER);
17 | const navigate = useNavigate();
18 |
19 | return (
20 |
23 |
24 | {profileName}
25 |
26 | ))}
27 |
18 | 
19 |
24 |
20 |
23 | {`${userName}님의 너가소개서`}
21 | {createdAt}
22 | {createdAt}
28 | 검색 결과
20 | {searchedUserList === null ? (
21 | <>
22 | ) : searchedUserList.length ? (
23 | searchedUserList.map((user) => {
24 | return (
25 |
29 | 
35 | )}
36 |
37 | {viewMode === 'linear' && {content}
30 | {isMutable && !isMine && (
31 |
25 |
28 | 팀원 목록
24 |
30 |
31 | {isHost ? '팀장' : '팀원'}
36 |
37 | ),
38 | )}
39 |
32 | {profileName}
33 | @{profileId}
34 |
35 |
24 |
27 | {title}
25 | {createdAt}
26 |
30 | {answer && answer.length !== 0 ? (
31 | answer.map((answer) =>
34 |
37 | )}
38 |
39 | 아직 답변이 없어요
35 | 링크를 공유해 답변을 받아보세요
36 |