0113

client/src/Pages/ProfilePage.js

@@ -12,14 +12,14 @@ import img3 from './img_3.jpg'
 import DropdownItem from 'react-bootstrap/esm/DropdownItem';
 
 
-const INIT_USER = {
-    username: '',
-    email: '',
-    nickname: ''
-}
+// const INIT_USER = {
+//     username: '',
+//     email: '',
+//     nickname: ''
+// }
 
 function ProfilePage() {
-    const [user, setUser] = useState(INIT_USER)
+    const [user, setUser] = useState('')
 
     const [userimg, setUserimg] = useState(img2)
     const [defaultImg, setDefaultImg] = useState(true)
@@ -94,6 +94,82 @@ function ProfilePage() {
     return (
         <div>
             <Menu />
+            <Container>
+                <Row><h1>ProfilePage</h1></Row>
+                <Row><h2>{user.username}님 환영합니다 !</h2></Row>
+            </Container>
+            <Container className="mt-5 shadow w-75">
+                <Row>
+                    <Col sm={4}>
+                        <Row>
+                            <div className="d-flex justify-content-center mb-3" id="defaultImg">
+                                <Image src={userimg} width="300px" roundedCircle />
+                            </div>
+                        </Row>
+                        <Row>
+                            <Form className="d-flex justify-content-center">
+                                <Form.Group>
+                                    <div id="image_container"></div>
+                                    <Form.File label="프로필 사진 변경" accept="image/*" onChange={setThumbnail} />
+                                </Form.Group>
+                            </Form>
+                        </Row>
+                        <Row className="d-flex justify-content-center">
+                            <Dropdown>
+                                <Dropdown.Toggle variant='success' id='dropdown-basic'>
+                                    프로필 사진 선택
+                                </Dropdown.Toggle>
+                                <Dropdown.Menu>
+                                    <Dropdown.Item as='button'>홈으로</Dropdown.Item>
+                                    <Dropdown.Item href='/'>라이언</Dropdown.Item>
+                                    <Dropdown.Item href='/'>어피치</Dropdown.Item>
+                                </Dropdown.Menu>
+                            </Dropdown>
+                        </Row>
+                    </Col>
+                    <Col sm={8}>
+
+                        <Row className="m-3 justify-content-flex-start" style={{ fontWeight: "bold", fontSize: "x-large" }}>
+                            <Col sm={2.5}>이름 :</Col>
+                            <Col sm={8}>{user.username}</Col>
+                        </Row>
+                        <Row className="m-3 justify-content-flex-start" id="nickname">
+                            <Form className="d-flex" onSubmit={handleSubmit} style={{ fontWeight: "bold", fontSize: "x-large" }}>
+
+                                <Row>
+                                    <Col>별명 :</Col>
+                                    <Col hidden={!hidden}>
+                                        {user.nickname}
+                                    </Col>
+                                    <Col hidden={hidden}>
+                                        <Form.Control defaultValue={user.nickname} style={{width : "110%"}} onChange={handleChange} />
+                                    </Col>
+                                    <Col>
+                                        <Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button>
+                                    </Col>
+                                </Row>
+                            </Form>
+
+                        </Row>
+                        <Row className="m-3" style={{ fontWeight: "bold", fontSize: "x-large" }}>
+                            <Col sm={2.5}>이메일 : </Col>
+                            <Col sm={8}>{user.email}</Col>
+                        </Row>
+                        <Row className='justify-content-center'>
+                            <Form>
+                                <Button variant="outline-success" size="sm" className="mr-4" onClick={handleNicksave}>저장</Button>
+                                <Link to='/'>
+                                    <Button variant="outline-success" size="sm" className="ml-4" >홈 화면으로</Button>
+                                </Link>
+                            </Form>
+                        </Row>
+                    </Col>
+                </Row>
+            </Container>
+
+
+
+
             <Container className="d-flex justify-content-center">
                 <div className="mt-5 shadow w-75">
                     <h1 className="text-center mt-4 ml-5 mr-5 mb-3">Profile Page</h1>

server/controllers/profile.controller.js

-import User from "../models/user.js"
+import Profile from "../models/profile.js"
 import bcrypt from "bcryptjs";
 import jwt from 'jsonwebtoken'
 import config from "../config.js"
@@ -6,16 +6,14 @@ import config from "../config.js"
 
 
 
-const getimage = (req, res) => {
-    // 1) 로그인 된 사용자 정보를 가져오기
-    // 일단 1명으로 해놓고 설정
+const getimage = async (req, res) => {
+    const defaultimg = 'https://t1.daumcdn.net/cfile/tistory/2761AA4558A05CBE2A'
+    // const newImg = await new Profile({
+    //     defaultimg
+    //     //required를 하였기 때문에 이중 하나라도 없으면 에러 발생
+    // }).save()
 
-    // let users = await User.find().select('name nickname email password').exec()
-    // return res.json(users)
-    res.send('여기가 프로필이다.')
-    console.log("ddd")
 
-    //try catch로 오류잡는거 추가해야함
 }
 
 export default { getimage }
\ No newline at end of file

server/models/chat.js

@@ -22,4 +22,4 @@ const ChatSchema = new mongoose.Schema({
     timestamps: true
 })
 
-export default mongoose.models.User || mongoose.model('chat', ChatSchema)
+export default mongoose.models.ChatSchema || mongoose.model('chat', ChatSchema)
\ No newline at end of file

server/models/profile.js

 import mongoose from 'mongoose'
 
-const { Image } = mongoose.Schema.Types
+const { String } = mongoose.Schema.Types
 
-const ChatSchema = new mongoose.Schema({
+const ProfileSchema = new mongoose.Schema({
     defaultImg: {
-        type: Image,
+        type: String,
         required: true,
     },
 }, {
     timestamps: true
 })
 
-export default mongoose.models.User || mongoose.model('chat', ChatSchema)
+export default mongoose.models.ProfileSchema || mongoose.model('profile', ProfileSchema)
\ No newline at end of file