From c09fa424964d0e23e0a310eb3f1cb09a73951d81 Mon Sep 17 00:00:00 2001 From: chogyejin Date: Tue, 12 Jul 2022 17:18:54 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=ED=8C=8C=EC=9D=BC=20=EC=A0=9C=EA=B1=B0,=20?= =?UTF-8?q?=EC=BB=A8=EB=B2=A4=EC=85=94=EC=97=90=20=EB=94=B0=EB=9D=BC=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A0=AC,=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/notification.ts | 4 +- src/components/base/ChakraInput.tsx | 6 +- src/components/base/ChakraText.tsx | 6 +- src/components/base/DefaultText.tsx | 6 +- src/components/base/Icon.tsx | 14 +- .../domain/ChallengePage/CertificationBox.tsx | 6 +- .../ChallengePage/CertificationButton.tsx | 6 +- .../ChallengePage/CertificationTable.tsx | 6 +- .../domain/ChallengePage/ChallengeReward.tsx | 6 +- .../domain/ChallengePage/CheerUpButton.tsx | 7 +- .../domain/ChallengePage/CommentButton.tsx | 6 +- .../domain/ChallengesPage/Challenges.tsx | 10 +- src/components/domain/ChallengesPage/dummy.js | 193 ------------------ .../domain/ChannelPage/ChannelRadio.tsx | 4 +- .../domain/CommentPage/CommentInput.tsx | 6 +- .../ChallengeChannelRadio.tsx | 13 +- .../CreateChallengePage/StartDateCalendar.tsx | 8 +- src/components/domain/LoginPage/AuthForm.tsx | 6 +- .../domain/NotificationPage/Notification.tsx | 24 +-- .../domain/ProfilePage/MyChallenges.tsx | 56 ++--- .../domain/ProfilePage/MySummary.tsx | 69 +++---- .../domain/ProfilePage/OtherChallenges.tsx | 34 +-- .../domain/ProfilePage/OtherSummary.tsx | 66 +++--- .../domain/ProfilePage/UserAvatar.tsx | 16 +- src/layout/Header.tsx | 6 +- src/pages/ChallengePage.tsx | 10 +- src/pages/CreateChallengePage.tsx | 1 - src/pages/EditProfilePage.tsx | 124 ++++++----- src/pages/HomePage.tsx | 10 +- src/pages/LoginPage.tsx | 11 +- src/pages/MyProfilePage.tsx | 18 +- src/pages/NotFoundPage.tsx | 1 - src/pages/NotificationPage.tsx | 4 +- src/pages/SearchUserPage.tsx | 2 +- .../ChannelPage/ChannelRadio.stories.tsx | 10 - .../ChallengeChannelRadio.stories.tsx | 10 - .../StartDateCalendar.stories.tsx | 10 - src/types/index.ts | 9 + 38 files changed, 284 insertions(+), 520 deletions(-) delete mode 100644 src/components/domain/ChallengesPage/dummy.js delete mode 100644 src/stories/domain/ChannelPage/ChannelRadio.stories.tsx delete mode 100644 src/stories/domain/CreateChallengePage/ChallengeChannelRadio.stories.tsx delete mode 100644 src/stories/domain/CreateChallengePage/StartDateCalendar.stories.tsx diff --git a/src/api/notification.ts b/src/api/notification.ts index a01e773..5f1bc15 100644 --- a/src/api/notification.ts +++ b/src/api/notification.ts @@ -1,7 +1,9 @@ import axios from "@lib/axios"; +import { Notification } from "src/types"; export const fetchGetNotificationList = async () => { - const { data } = await axios.get("/notifications"); + const { data } = await axios.get("/notifications"); + return data; }; diff --git a/src/components/base/ChakraInput.tsx b/src/components/base/ChakraInput.tsx index 27d8923..4f0f2a0 100644 --- a/src/components/base/ChakraInput.tsx +++ b/src/components/base/ChakraInput.tsx @@ -2,7 +2,7 @@ import { Input } from "@chakra-ui/react"; import { useState } from "react"; -type inputTypes = { +interface Props { placeholder: string; variant: string; size?: string; @@ -10,7 +10,7 @@ type inputTypes = { type?: string; children?: string; onChangeValue?: any; -}; +} const ChakraInput = ({ children = "", @@ -20,7 +20,7 @@ const ChakraInput = ({ width = 400, type = "text", onChangeValue, -}: inputTypes) => { +}: Props) => { const bgColor = variant === "outline" ? "#FFFFFF" : "#E2E8F0"; const border = variant === "outline" ? "2px solid" : "2px solid transparent"; const borderColor = variant === "outline" ? "#E2E8F0" : "transparent"; diff --git a/src/components/base/ChakraText.tsx b/src/components/base/ChakraText.tsx index 9dcf969..08aaa83 100644 --- a/src/components/base/ChakraText.tsx +++ b/src/components/base/ChakraText.tsx @@ -1,13 +1,13 @@ import React from "react"; import { Text } from "@chakra-ui/react"; -type textTypes = { +interface Props { children: React.ReactNode; size?: "sm" | "md" | "lg"; color?: string; -}; +} -const ChakraText = ({ children, size = "lg", color = "black" }: textTypes) => { +const ChakraText = ({ children, size = "lg", color = "black" }: Props) => { return ( {children} diff --git a/src/components/base/DefaultText.tsx b/src/components/base/DefaultText.tsx index ee81333..9734083 100644 --- a/src/components/base/DefaultText.tsx +++ b/src/components/base/DefaultText.tsx @@ -1,12 +1,12 @@ import { Text } from "@chakra-ui/react"; import React from "react"; -type DefaultTextTypes = { +interface Props { children: React.ReactNode; styleProps?: React.CSSProperties; -}; +} -const DefaultText = ({ children, styleProps = {} }: DefaultTextTypes) => { +const DefaultText = ({ children, styleProps = {} }: Props) => { return ( { +const Icon = ({ name, size = 38, color = "#000000" }: Props) => { const iconStyle: React.CSSProperties = { width: size, height: size, @@ -36,3 +32,7 @@ const Icon = ({ name, size = 38, color = "#000000" }: iconTypes) => { }; export default Icon; + +const IconWrapper = styled.i` + display: inline-block; +`; diff --git a/src/components/domain/ChallengePage/CertificationBox.tsx b/src/components/domain/ChallengePage/CertificationBox.tsx index e7f3fc1..c81a6db 100644 --- a/src/components/domain/ChallengePage/CertificationBox.tsx +++ b/src/components/domain/ChallengePage/CertificationBox.tsx @@ -1,10 +1,10 @@ import { Box } from "@chakra-ui/react"; -type CertificationBoxType = { +interface Props { isChecked: boolean; -}; +} -const CertificationBox = ({ isChecked }: CertificationBoxType) => { +const CertificationBox = ({ isChecked }: Props) => { const bgColor = isChecked ? "#FFAA6D" : "#EAEDF2"; return ; }; diff --git a/src/components/domain/ChallengePage/CertificationButton.tsx b/src/components/domain/ChallengePage/CertificationButton.tsx index aa4a514..2d21daf 100644 --- a/src/components/domain/ChallengePage/CertificationButton.tsx +++ b/src/components/domain/ChallengePage/CertificationButton.tsx @@ -1,11 +1,11 @@ import { Circle } from "@chakra-ui/react"; import Icon from "@base/Icon"; -type activeType = { +interface Props { isActive?: boolean; -}; +} -const CertificationButton = ({ isActive }: activeType) => { +const CertificationButton = ({ isActive }: Props) => { const bgColor = isActive ? "#FF7900" : "#D9D9D9"; const name = isActive ? "arrow-up" : "check"; const color = isActive ? "#FFFFFF" : "#000000"; diff --git a/src/components/domain/ChallengePage/CertificationTable.tsx b/src/components/domain/ChallengePage/CertificationTable.tsx index dc0c492..ae6a611 100644 --- a/src/components/domain/ChallengePage/CertificationTable.tsx +++ b/src/components/domain/ChallengePage/CertificationTable.tsx @@ -6,11 +6,11 @@ type CertificationBoxType = { isChecked: boolean; }; -type CertificationTableType = { +interface Props { children: Array; -}; +} -const CertificationTable = ({ children: days }: CertificationTableType) => { +const CertificationTable = ({ children: days }: Props) => { return ( {days.length === 30 && diff --git a/src/components/domain/ChallengePage/ChallengeReward.tsx b/src/components/domain/ChallengePage/ChallengeReward.tsx index c4198f0..db4d77d 100644 --- a/src/components/domain/ChallengePage/ChallengeReward.tsx +++ b/src/components/domain/ChallengePage/ChallengeReward.tsx @@ -3,12 +3,12 @@ import ChakraText from "@base/ChakraText"; import ChakraHeading from "@base/ChakraHeading"; import { Flex } from "@chakra-ui/react"; -type ChallengeRewardTypes = { +interface Props { startDate: string; endDate: string; reward: string; restDay: number; -}; +} const RewardContainer = styled.div` display: flex; @@ -26,7 +26,7 @@ const ChallengeReward = ({ endDate, reward = "보상 내용", restDay = 30, -}: ChallengeRewardTypes) => { +}: Props) => { return ( diff --git a/src/components/domain/ChallengePage/CheerUpButton.tsx b/src/components/domain/ChallengePage/CheerUpButton.tsx index d4ab06c..8a223de 100644 --- a/src/components/domain/ChallengePage/CheerUpButton.tsx +++ b/src/components/domain/ChallengePage/CheerUpButton.tsx @@ -1,15 +1,16 @@ import Social from "@base/Social"; import { Center } from "@chakra-ui/react"; -type CheerUpButtonType = { +interface Props { isCheered?: boolean; count: number; -}; +} -const CheerUpButton = ({ isCheered = false, count }: CheerUpButtonType) => { +const CheerUpButton = ({ isCheered = false, count }: Props) => { const bgColor = isCheered ? "#FFAA6D" : "#FFFFFF"; const fill = isCheered ? "#F4F6F8" : "#000000"; const color = isCheered ? "#F4F6F8" : "#000000"; + return (
{ +const CommentButton = ({ count }: Props) => { return (
{ const navigate = useNavigate(); const handleClick = (channelId: string, challengeId: string) => { @@ -49,3 +44,8 @@ const Challenges = ({ posts }: ChallengesProps) => { }; export default Challenges; + +const CardContainer = styled.div` + margin-bottom: 12px; + cursor: pointer; +`; diff --git a/src/components/domain/ChallengesPage/dummy.js b/src/components/domain/ChallengesPage/dummy.js deleted file mode 100644 index ac9f7c3..0000000 --- a/src/components/domain/ChallengesPage/dummy.js +++ /dev/null @@ -1,193 +0,0 @@ -// GET /channels => Channel[] -export const channelsData = [ - { - authRequired: "boolean", // 사용되지 않음 - posts: [], - _id: "channelid1", // 채널 id - name: "운동", - description: "운동", - createdAt: "2022-06-07T09:44:19.128Z", - updatedAt: "2022-06-07T09:44:19.128Z", - }, - { - authRequired: "boolean", // 사용되지 않음 - posts: [], - _id: "channelid2", // 채널 id - name: "독서", - description: "독서", - createdAt: "2022-06-07T09:44:19.128Z", - updatedAt: "2022-06-07T09:44:19.128Z", - }, - { - authRequired: "boolean", // 사용되지 않음 - posts: [], - _id: "channelid3", // 채널 id - name: "자기계발", - description: "자기계발", - createdAt: "2022-06-07T09:44:19.128Z", - updatedAt: "2022-06-07T09:44:19.128Z", - }, - { - authRequired: "boolean", // 사용되지 않음 - posts: [], - _id: "channelid4", // 채널 id - name: "루틴", - description: "루틴", - createdAt: "2022-06-07T09:44:19.128Z", - updatedAt: "2022-06-07T09:44:19.128Z", - }, - { - authRequired: true, // 사용되지 않음 - posts: [], //post - _id: "channelid5", // 채널 id - name: "공부", - description: "공부", - createdAt: "2022-06-07T09:44:19.128Z", - updatedAt: "2022-06-07T09:44:19.128Z", - }, -]; - -// GET /channels/{channelName} => Channel -export const channelData = { - authRequired: "boolean", // 사용되지 않음 - posts: [ - { - likes: [ - { - _id: "likeid1", - user: "userid1", // 사용자 id - post: "postid1", // 포스트 id - createdAt: "2022-06-11T09:44:19.128Z", - updatedAt: "2022-06-11T09:44:19.128Z", - }, - { - _id: "likeid1", - user: "userid1", // 사용자 id - post: "postid1", // 포스트 id - createdAt: "2022-06-11T09:44:19.128Z", - updatedAt: "2022-06-11T09:44:19.128Z", - }, - ], - comments: [ - { - _id: "commentid1", - comment: "댓글댓", - author: { - coverImage: "자기소개", - image: "프로필이미지주소", // 프로필 이미지 - role: "role", - emailVerified: true, // 사용되지 않음 - banned: true, // 사용되지 않음 - isOnline: true, - posts: [], - likes: [], - comments: [], - followers: [], - following: [], - notifications: [], - messages: [], - _id: "userid1", // 사용자 id - fullName: "사용자닉네임", // - email: "asd@asd.com", - createdAt: "2022-05-12T09:44:19.128Z", - updatedAt: "2022-05-12T09:44:19.128Z", - }, - post: "postid1", - createdAt: "Asd", - updatedAt: "ASdas", - }, - ], // 포스트 댓글 - _id: "postid1", // 포스트 id - image: "", - imagePublicId: "", - title: { - challengeTitle: "공원달리기", - reward: "가지고 싶었던 운동화 사기", - days: [ - { - day: 1, - isChecked: true, - }, - ], - startDate: "new Date().toISOString()", - }, - channel: { - authRequired: true, // 사용되지 않음 - posts: [], - _id: "channelid1", // 채널 id - name: "운동", - description: "운동", - createdAt: "2022-06-07T09:44:19.128Z", - updatedAt: "2022-06-07T09:44:19.128Z", - }, - author: { - coverImage: "자기소개", - image: "프로필이미지주소", // 프로필 이미지 - role: "role", - emailVerified: true, // 사용되지 않음 - banned: true, // 사용되지 않음 - isOnline: true, - posts: [], - likes: [], - comments: [], - followers: [], - following: [], - notifications: [], - messages: [], - _id: "userid1", // 사용자 id - fullName: "사용자닉네임", // - email: "asd@asd.com", - createdAt: "2022-05-12T09:44:19.128Z", - updatedAt: "2022-05-12T09:44:19.128Z", - }, - createdAt: "2022-06-10T09:44:19.128Z", - updatedAt: "2022-06-10T09:44:19.128Z", - }, - { - likes: [], - comments: [], // 포스트 댓글 - _id: "postid2", // 포스트 id - image: "", - imagePublicId: "", - title: { - challengeTitle: "공부하기", - reward: "공부를 열심히 하기", - days: [ - { - day: 1, - isChecked: true, - }, - ], - startDate: "new Date().toISOString()", - }, - channel: "Adf", // Channel type - author: { - coverImage: "자기소개", - image: "프로필이미지주소", // 프로필 이미지 - role: "role", - emailVerified: true, // 사용되지 않음 - banned: true, // 사용되지 않음 - isOnline: true, - posts: [], - likes: [], - comments: [], - followers: [], - following: [], - notifications: [], - messages: [], - _id: "userid1", // 사용자 id - fullName: "사용자닉네임", // - email: "asd@asd.com", - createdAt: "2022-05-12T09:44:19.128Z", - updatedAt: "2022-05-12T09:44:19.128Z", - }, - createdAt: "2022-06-10T09:44:19.128Z", - updatedAt: "2022-06-10T09:44:19.128Z", - }, - ], - _id: "channelid1", // 채널 id - name: "운동", - description: "운동", - createdAt: "2022-06-07T09:44:19.128Z", - updatedAt: "2022-06-07T09:44:19.128Z", -}; diff --git a/src/components/domain/ChannelPage/ChannelRadio.tsx b/src/components/domain/ChannelPage/ChannelRadio.tsx index dfe3f7b..dcceec7 100644 --- a/src/components/domain/ChannelPage/ChannelRadio.tsx +++ b/src/components/domain/ChannelPage/ChannelRadio.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-unsafe-argument */ import { Box, HStack, useRadio, useRadioGroup } from "@chakra-ui/react"; -function RadioCard(props: any) { +const RadioCard = (props: any) => { const { getInputProps, getCheckboxProps } = useRadio(props); const input = getInputProps(); @@ -28,7 +28,7 @@ function RadioCard(props: any) { ); -} +}; const ChannelRadio = () => { const channels = ["운동", "독서", "공부", "루틴", "자기계발"]; diff --git a/src/components/domain/CommentPage/CommentInput.tsx b/src/components/domain/CommentPage/CommentInput.tsx index 65f5832..3b76df8 100644 --- a/src/components/domain/CommentPage/CommentInput.tsx +++ b/src/components/domain/CommentPage/CommentInput.tsx @@ -3,11 +3,11 @@ import { useState } from "react"; import { Circle, Flex, Textarea } from "@chakra-ui/react"; import Icon from "@base/Icon"; -type commentInputTypes = { +interface Props { onValueChange?: (param: string) => void; -}; +} -const CommentInput = ({ onValueChange }: commentInputTypes) => { +const CommentInput = ({ onValueChange }: Props) => { const [value, setValue] = useState(""); const resize = (obj: HTMLTextAreaElement) => { diff --git a/src/components/domain/CreateChallengePage/ChallengeChannelRadio.tsx b/src/components/domain/CreateChallengePage/ChallengeChannelRadio.tsx index 81cd8fc..9bf3cd7 100644 --- a/src/components/domain/CreateChallengePage/ChallengeChannelRadio.tsx +++ b/src/components/domain/CreateChallengePage/ChallengeChannelRadio.tsx @@ -2,10 +2,10 @@ /* eslint-disable @typescript-eslint/no-unsafe-argument */ import { Box, HStack, Text, useRadio, useRadioGroup } from "@chakra-ui/react"; -type ChallengeChannelRadioType = { - onChangeValue?: any; - channelList?: any; -}; +interface Props { + onChangeValue: (newChannel: string) => void; + channelList: string[]; +} function RadioCard(props: any) { const { getInputProps, getCheckboxProps } = useRadio(props); @@ -33,10 +33,7 @@ function RadioCard(props: any) { ); } -const ChallengeChannelRadio = ({ - onChangeValue, - channelList, -}: ChallengeChannelRadioType) => { +const ChallengeChannelRadio = ({ onChangeValue, channelList }: Props) => { const channels = channelList; const { getRootProps, getRadioProps } = useRadioGroup({ name: "channel", diff --git a/src/components/domain/CreateChallengePage/StartDateCalendar.tsx b/src/components/domain/CreateChallengePage/StartDateCalendar.tsx index 8b58b0c..035d0fb 100644 --- a/src/components/domain/CreateChallengePage/StartDateCalendar.tsx +++ b/src/components/domain/CreateChallengePage/StartDateCalendar.tsx @@ -6,11 +6,11 @@ import { useEffect, useState } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; -type StartDateCalendarProps = { - onChangeValue?: any; -}; +interface Props { + onChangeValue: (newChallengeTitle: string) => void; +} -const StartDateCalendar = ({ onChangeValue }: StartDateCalendarProps) => { +const StartDateCalendar = ({ onChangeValue }: Props) => { const [startDate, setStartDate] = useState(new Date()); useEffect(() => { diff --git a/src/components/domain/LoginPage/AuthForm.tsx b/src/components/domain/LoginPage/AuthForm.tsx index ad49b0b..25843fc 100644 --- a/src/components/domain/LoginPage/AuthForm.tsx +++ b/src/components/domain/LoginPage/AuthForm.tsx @@ -9,11 +9,11 @@ import { Tabs, } from "@chakra-ui/react"; import styled from "@emotion/styled"; -import { FormData } from "@pages/LoginPage"; +import { FormData } from "src/types"; import { useRef, useState } from "react"; import { UseFormRegister, UseFormWatch } from "react-hook-form"; -interface AuthFormProps { +interface Props { logInRegister: UseFormRegister; signUpRegister: UseFormRegister; watch: UseFormWatch; @@ -31,7 +31,7 @@ const AuthForm = ({ onSignUpSubmit, signUpRegister, watch, -}: AuthFormProps) => { +}: Props) => { const [tabIndex, setTabIndex] = useState(0); const password = useRef({}); password.current = watch("signUpPassword", ""); diff --git a/src/components/domain/NotificationPage/Notification.tsx b/src/components/domain/NotificationPage/Notification.tsx index 7ead1b1..ad213fb 100644 --- a/src/components/domain/NotificationPage/Notification.tsx +++ b/src/components/domain/NotificationPage/Notification.tsx @@ -1,29 +1,19 @@ import { Flex, Avatar, Text } from "@chakra-ui/react"; import styled from "@emotion/styled"; -interface NotificationProps { +interface Props { avatarSrc: string; userName: string; notificationType: "follow" | "comment" | "like"; createdAt: string; } -const CardContainer = styled(Flex)` - height: 96px; - padding: 0 16px; - background-color: white; -`; - -const UserNameText = styled.span` - font-weight: bold; -`; - const Notification = ({ avatarSrc, userName, notificationType, createdAt, -}: NotificationProps) => { +}: Props) => { const notifiedTime = new Date(createdAt).toLocaleString().slice(2, 20); return ( @@ -50,3 +40,13 @@ const Notification = ({ }; export default Notification; + +const CardContainer = styled(Flex)` + height: 96px; + padding: 0 16px; + background-color: white; +`; + +const UserNameText = styled.span` + font-weight: bold; +`; diff --git a/src/components/domain/ProfilePage/MyChallenges.tsx b/src/components/domain/ProfilePage/MyChallenges.tsx index 931476f..1d48fca 100644 --- a/src/components/domain/ProfilePage/MyChallenges.tsx +++ b/src/components/domain/ProfilePage/MyChallenges.tsx @@ -4,37 +4,11 @@ import styled from "@emotion/styled"; import { useNavigate } from "react-router-dom"; import { Post } from "src/types"; -interface UserChallengesProps { +interface Props { challenges: Post[]; } -const UserChallengesContainer = styled.div` - margin-top: 56px; - z-index: 1; - position: relative; -`; - -const CardContainer = styled.div` - margin: 12px 0; - cursor: pointer; -`; - -const CButton = styled(Button)` - color: white; - background-color: #ffaa6d; - top: 10px; - right: 10px; - - &:hover { - background-color: #ff7900; - } -`; - -const Text = styled.div` - text-align: center; -`; - -const MyChallenges = ({ challenges }: UserChallengesProps) => { +const MyChallenges = ({ challenges }: Props) => { const handleChallengeClick = (channelId: string, challengeId: string) => { navigate(`/challenges/${channelId}/${challengeId}`); }; @@ -86,3 +60,29 @@ const MyChallenges = ({ challenges }: UserChallengesProps) => { }; export default MyChallenges; + +const UserChallengesContainer = styled.div` + margin-top: 56px; + z-index: 1; + position: relative; +`; + +const CardContainer = styled.div` + margin: 12px 0; + cursor: pointer; +`; + +const CButton = styled(Button)` + color: white; + background-color: #ffaa6d; + top: 10px; + right: 10px; + + &:hover { + background-color: #ff7900; + } +`; + +const Text = styled.div` + text-align: center; +`; diff --git a/src/components/domain/ProfilePage/MySummary.tsx b/src/components/domain/ProfilePage/MySummary.tsx index e8ded5b..bb12638 100644 --- a/src/components/domain/ProfilePage/MySummary.tsx +++ b/src/components/domain/ProfilePage/MySummary.tsx @@ -2,13 +2,44 @@ import { Button, Text } from "@chakra-ui/react"; import styled from "@emotion/styled"; import { Link, useNavigate } from "react-router-dom"; -interface UserSummaryProps { +interface Props { introduce: string; followerCount: number; followingCount: number; id: string; } +const MySummary = ({ introduce, followerCount, followingCount, id }: Props) => { + const navigate = useNavigate(); + + const handleFollowingClick = () => { + navigate(`/follow/${id}`); + }; + + return ( + + {introduce} + +
+ {followerCount} +
팔로워
+
+
+ {followingCount} +
팔로잉
+
+ +
+ + 프로필 수정 + +
+ + ); +}; + +export default MySummary; + const IntroduceText = styled(Text)` padding-top: 32px; `; @@ -39,39 +70,3 @@ const CButton = styled(Button)` background-color: #ff7900; } `; - -const MySummary = ({ - introduce, - followerCount, - followingCount, - id, -}: UserSummaryProps) => { - const navigate = useNavigate(); - - const handleFollowingClick = () => { - navigate(`/follow/${id}`); - }; - - return ( - - {introduce} - -
- {followerCount} -
팔로워
-
-
- {followingCount} -
팔로잉
-
- -
- - 프로필 수정 - -
- - ); -}; - -export default MySummary; diff --git a/src/components/domain/ProfilePage/OtherChallenges.tsx b/src/components/domain/ProfilePage/OtherChallenges.tsx index 83edb8b..1c80ce0 100644 --- a/src/components/domain/ProfilePage/OtherChallenges.tsx +++ b/src/components/domain/ProfilePage/OtherChallenges.tsx @@ -4,26 +4,11 @@ import styled from "@emotion/styled"; import { useNavigate } from "react-router-dom"; import { Post } from "src/types"; -interface UserChallengesProps { +interface Props { challenges: Post[]; } -const UserChallengesContainer = styled.div` - margin-top: 56px; - z-index: 1; - position: relative; -`; - -const CardContainer = styled.div` - margin: 12px 0; - cursor: pointer; -`; - -const Text = styled.div` - text-align: center; -`; - -const OtherChallenges = ({ challenges }: UserChallengesProps) => { +const OtherChallenges = ({ challenges }: Props) => { const handleChallengeClick = (channelId: string, challengeId: string) => { navigate(`/challenges/${channelId}/${challengeId}`); }; @@ -65,3 +50,18 @@ const OtherChallenges = ({ challenges }: UserChallengesProps) => { }; export default OtherChallenges; + +const UserChallengesContainer = styled.div` + margin-top: 56px; + z-index: 1; + position: relative; +`; + +const CardContainer = styled.div` + margin: 12px 0; + cursor: pointer; +`; + +const Text = styled.div` + text-align: center; +`; diff --git a/src/components/domain/ProfilePage/OtherSummary.tsx b/src/components/domain/ProfilePage/OtherSummary.tsx index dbe05e1..74ac5fc 100644 --- a/src/components/domain/ProfilePage/OtherSummary.tsx +++ b/src/components/domain/ProfilePage/OtherSummary.tsx @@ -3,50 +3,19 @@ import { Button, Text } from "@chakra-ui/react"; import styled from "@emotion/styled"; import { useNavigate } from "react-router-dom"; -interface UserSummaryProps { +interface Props { introduce: string; followerCount: number; followingCount: number; id: string; } -const IntroduceText = styled(Text)` - padding-top: 32px; -`; - -const UserSummaryContainer = styled.div` - width: 50%; - display: block; - text-align: center; -`; - -const FollowContainer = styled.div` - display: flex; - justify-content: space-evenly; - margin-top: 40px; - - & p { - font-weight: 700; - } -`; - -const CButton = styled(Button)` - width: 100%; - color: white; - background-color: #ffaa6d; - margin-top: 12px; - - &:hover { - background-color: #ff7900; - } -`; - const OtherSummary = ({ introduce, followerCount, followingCount, id, -}: UserSummaryProps) => { +}: Props) => { const navigate = useNavigate(); const handleFollowingClick = () => { @@ -80,3 +49,34 @@ const OtherSummary = ({ }; export default OtherSummary; + +const IntroduceText = styled(Text)` + padding-top: 32px; +`; + +const UserSummaryContainer = styled.div` + width: 50%; + display: block; + text-align: center; +`; + +const FollowContainer = styled.div` + display: flex; + justify-content: space-evenly; + margin-top: 40px; + + & p { + font-weight: 700; + } +`; + +const CButton = styled(Button)` + width: 100%; + color: white; + background-color: #ffaa6d; + margin-top: 12px; + + &:hover { + background-color: #ff7900; + } +`; diff --git a/src/components/domain/ProfilePage/UserAvatar.tsx b/src/components/domain/ProfilePage/UserAvatar.tsx index 2d96639..9a95a18 100644 --- a/src/components/domain/ProfilePage/UserAvatar.tsx +++ b/src/components/domain/ProfilePage/UserAvatar.tsx @@ -1,18 +1,12 @@ import { Avatar, Heading } from "@chakra-ui/react"; import styled from "@emotion/styled"; -interface UserAvatarProps { +interface Props { image: string; name: string; } -const UserAvatarContainer = styled.div` - display: block; - margin-right: 72px; - text-align: center; -`; - -const UserAvatar = ({ image, name }: UserAvatarProps) => { +const UserAvatar = ({ image, name }: Props) => { return ( @@ -24,3 +18,9 @@ const UserAvatar = ({ image, name }: UserAvatarProps) => { }; export default UserAvatar; + +const UserAvatarContainer = styled.div` + display: block; + margin-right: 72px; + text-align: center; +`; diff --git a/src/layout/Header.tsx b/src/layout/Header.tsx index c109157..9f4e424 100644 --- a/src/layout/Header.tsx +++ b/src/layout/Header.tsx @@ -1,11 +1,11 @@ import React from "react"; -type headerTypes = { +interface Props { children: React.ReactNode; backgroundColor?: string; -}; +} -const Header = ({ children, backgroundColor = "#ffffff" }: headerTypes) => { +const Header = ({ children, backgroundColor = "#ffffff" }: Props) => { const headerStyle: React.CSSProperties = { height: 80, width: "100%", diff --git a/src/pages/ChallengePage.tsx b/src/pages/ChallengePage.tsx index bac730b..8719dfc 100644 --- a/src/pages/ChallengePage.tsx +++ b/src/pages/ChallengePage.tsx @@ -39,11 +39,11 @@ const ChallengePage = () => { const [authorId, setAuthorId] = useState(""); const [show, setShow] = useState(false); const [, , channelId, postId] = window.location.pathname.split("/"); - const { data: Contents } = useGetChallenge(postId); + const { data: contents } = useGetChallenge(postId); useEffect(() => { - if (Contents?.status === 200) { - const { author, title: Content, comments, likes } = Contents.data; + if (contents?.status === 200) { + const { author, title: Content, comments, likes } = contents.data; const { days, reward, @@ -70,7 +70,7 @@ const ChallengePage = () => { validateDate(calculatedPresentDay); setEndDate(format(add(new Date(date), { days: 29 }), "yyyy-MM-dd")); } - }, [Contents]); + }, [contents]); useEffect(() => { setRestDay(30 - presentDay); @@ -145,7 +145,7 @@ const ChallengePage = () => { item.day === presentDay ? { ...item, isChecked: true } : item ); - const { title } = Contents.data; + const { title } = contents.data; const newTitle = { ...JSON.parse(title), days: updatedDays }; const updatedPost = { diff --git a/src/pages/CreateChallengePage.tsx b/src/pages/CreateChallengePage.tsx index d770937..6d51264 100644 --- a/src/pages/CreateChallengePage.tsx +++ b/src/pages/CreateChallengePage.tsx @@ -7,7 +7,6 @@ import useGetChannelList from "@hooks/quries/useGetChannelList"; import { fetchPostPostByChannelId } from "@api/post"; import { useNavigate } from "react-router-dom"; import usePageTitle from "@hooks/usePageTitle"; -import { Channel } from "src/types"; const challengeTable = Array.from({ length: 30 }, (_, index) => ({ day: index, diff --git a/src/pages/EditProfilePage.tsx b/src/pages/EditProfilePage.tsx index b9d3d5f..679bcff 100644 --- a/src/pages/EditProfilePage.tsx +++ b/src/pages/EditProfilePage.tsx @@ -12,63 +12,9 @@ import { deleteTokenFromLocalStorage } from "@lib/localStorage"; import usePageTitle from "@hooks/usePageTitle"; import { fetchPostUserProfileImage } from "@api/user"; -const EditProfilePageContainer = styled.div` - display: flex; - flex-direction: column; - align-items: center; - background: white; - margin-top: 40px; - padding-top: 40px; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); -`; - -const ChangeButton = styled(Button)` - color: white; - background-color: #ffaa6d; - margin: 12px; - - &:hover { - background-color: #ff7900; - } -`; - -const FormContainer = styled.div` - margin-top: 36px; - margin-bottom: 36px; -`; - -const ProfileImageButton = styled.label` - padding: 6px 25px; - background-color: #ff6600; - border-radius: 4px; - color: white; - cursor: pointer; -`; - -const CFlex = styled(Flex)` - align-items: center; -`; - -const InfoText = styled.div` - width: 100px; - font-size: 16px; - font-weight: 400; -`; - -const CInput = styled(Input)` - width: 70%; - outline: none; -`; - -const LogoutButton = styled(Button)` - color: #838489; - background-color: #f4f6f8; - margin-bottom: 40px; -`; - const EditProfilePage = () => { - const toast = useToast(); usePageTitle("프로필 설정"); + const toast = useToast(); const [myUser, setMyUser] = useAtom(userAtom); const [newFullName, setNewFullName] = useState(""); const [newPassword, setNewPassword] = useState(""); @@ -170,33 +116,83 @@ const EditProfilePage = () => { onChange={profileChange} /> - + 이메일
{myUser?.email}
- - + + 닉네임 - 변경 - - + + 새 비밀번호 - 변경 - + - 로그아웃 + ); }; export default EditProfilePage; + +const EditProfilePageContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + background: white; + margin-top: 40px; + padding-top: 40px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); +`; + +const ChangeButton = styled(Button)` + color: white; + background-color: #ffaa6d; + margin: 12px; + + &:hover { + background-color: #ff7900; + } +`; + +const FormContainer = styled.div` + margin-top: 36px; + margin-bottom: 36px; +`; + +const ProfileImageButton = styled.label` + padding: 6px 25px; + background-color: #ff6600; + border-radius: 4px; + color: white; + cursor: pointer; +`; + +const InfoText = styled.div` + width: 100px; + font-size: 16px; + font-weight: 400; +`; diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index b156bc6..b282388 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -8,18 +8,18 @@ import { Channel, Post } from "../types/index"; const HomePage = () => { const navigate = useNavigate(); + const [channelsList, setChannelsList] = useState([]); + const [postLists, setPostLists] = useState>([]); + const { data } = useGetChannelList(); + const onClickMore = (channelId: string) => { navigate(`/challenges/${channelId}`); }; + const onClickChallenge = (channelId: string, challengeId: string): void => { navigate(`/challenges/${channelId}/${challengeId}`); }; - const [channelsList, setChannelsList] = useState([]); - const [postLists, setPostLists] = useState>([]); - - const { data } = useGetChannelList(); - useEffect(() => { if (data) { setChannelsList(data); diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 5880831..694ff9f 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -8,18 +8,9 @@ import { fetchPostLogin, fetchPostSignUp } from "@api/auth"; import { saveTokenToLocalStorage } from "@lib/localStorage"; import userAtom from "@store/user"; import usePageTitle from "@hooks/usePageTitle"; -import { User } from "src/types"; +import { User, FormData } from "src/types"; import { useEffect } from "react"; -export interface FormData { - logInEmail: string; - logInPassword: string; - signUpEmail: string; - signUpFullName: string; - signUpPassword: string; - signUpPasswordRepeat: string; -} - interface LoginResponse { data: { user: User; diff --git a/src/pages/MyProfilePage.tsx b/src/pages/MyProfilePage.tsx index 3705334..4dd74f1 100644 --- a/src/pages/MyProfilePage.tsx +++ b/src/pages/MyProfilePage.tsx @@ -5,14 +5,7 @@ import MyChallenges from "@domain/ProfilePage/MyChallenges"; import MySummary from "@domain/ProfilePage/MySummary"; import userAtom from "@store/user"; import usePageTitle from "@hooks/usePageTitle"; - -const UserInfo = styled.div` - position: relative; - display: flex; - justify-content: space-evenly; - align-items: center; - margin-top: 32px; -`; +import { Flex } from "@chakra-ui/react"; const MyProfilePage = () => { const [myUser] = useAtom(userAtom); @@ -20,7 +13,12 @@ const MyProfilePage = () => { return ( <> - + { followingCount={myUser.following.length} id={myUser._id} /> - + ); diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx index 0bea1b4..a72373a 100644 --- a/src/pages/NotFoundPage.tsx +++ b/src/pages/NotFoundPage.tsx @@ -1,4 +1,3 @@ -import React from "react"; import DefaultText from "@base/DefaultText"; const NotFoundPage = () => { diff --git a/src/pages/NotificationPage.tsx b/src/pages/NotificationPage.tsx index baa9715..2a7dfef 100644 --- a/src/pages/NotificationPage.tsx +++ b/src/pages/NotificationPage.tsx @@ -1,4 +1,4 @@ -import { Notification, User } from "src/types"; +import { Notification } from "src/types"; import NotificationCard from "@domain/NotificationPage/Notification"; import { Flex } from "@chakra-ui/react"; import DefaultText from "@base/DefaultText"; @@ -16,7 +16,7 @@ const NotificationPage = () => { return ( {data.length ? ( - data?.map((notification: Notification) => { + data.map((notification: Notification) => { return ( { const query = QueryString.parse(location.search, { ignoreQueryPrefix: true }); const [userName, setUserName] = useState(query.userName as string); const [userList, setUserList] = useState([]); - const { data: allUserList, isLoading } = useGetUserList(); + const { data: allUserList } = useGetUserList(); useEffect(() => { if (allUserList) { diff --git a/src/stories/domain/ChannelPage/ChannelRadio.stories.tsx b/src/stories/domain/ChannelPage/ChannelRadio.stories.tsx deleted file mode 100644 index 448205f..0000000 --- a/src/stories/domain/ChannelPage/ChannelRadio.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import ChannelRadio from "@domain/ChannelPage/ChannelRadio"; - -export default { - title: "Domain/ChannelPage/ChannelRadio", - component: ChannelRadio, -}; - -export const Default = () => { - return ; -}; diff --git a/src/stories/domain/CreateChallengePage/ChallengeChannelRadio.stories.tsx b/src/stories/domain/CreateChallengePage/ChallengeChannelRadio.stories.tsx deleted file mode 100644 index f7f39fb..0000000 --- a/src/stories/domain/CreateChallengePage/ChallengeChannelRadio.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import ChallengeChannelRadio from "@domain/CreateChallengePage/ChallengeChannelRadio"; - -export default { - title: "Domain/CreateChannelPage/ChallengeChannelRadio", - component: ChallengeChannelRadio, -}; - -export const Default = () => { - return ; -}; diff --git a/src/stories/domain/CreateChallengePage/StartDateCalendar.stories.tsx b/src/stories/domain/CreateChallengePage/StartDateCalendar.stories.tsx deleted file mode 100644 index 39001ba..0000000 --- a/src/stories/domain/CreateChallengePage/StartDateCalendar.stories.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import StartDateCalendar from "@domain/CreateChallengePage/StartDateCalendar"; - -export default { - title: "Domain/CreateChannelPage/StartDateCalendar", - component: StartDateCalendar, -}; - -export const Default = () => { - return ; -}; diff --git a/src/types/index.ts b/src/types/index.ts index b55b562..992f813 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -98,3 +98,12 @@ export interface Notification { createdAt: string; updatedAt: string; } + +export interface FormData { + logInEmail: string; + logInPassword: string; + signUpEmail: string; + signUpFullName: string; + signUpPassword: string; + signUpPasswordRepeat: string; +}